diff --git a/index.html b/index.html index 5122490..ced62e0 100644 --- a/index.html +++ b/index.html @@ -202,8 +202,9 @@ diff --git a/styles.css b/styles.css index 93c7d39..14aa9d6 100644 --- a/styles.css +++ b/styles.css @@ -485,58 +485,63 @@ button { } .footer { - padding-bottom: clamp(4.5rem, 9vw, 8rem); + position: relative; + min-height: 320px; + border-top: 18px solid var(--bg-lime); } .footer__inner { position: relative; - z-index: 1; - display: grid; - grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); - gap: clamp(2rem, 5vw, 5rem); - align-items: end; - min-height: clamp(320px, 31vw, 420px); - padding-top: clamp(3rem, 5vw, 4.5rem); - padding-bottom: clamp(2.5rem, 4vw, 4rem); + min-height: 302px; + padding: 0 clamp(2.5rem, 6vw, 5rem); +} + +.footer__brand { + position: absolute; + top: 73px; + left: clamp(2.9rem, 5vw, 5rem); + width: clamp(240px, 22vw, 290px); } .footer__contact { + position: absolute; + left: clamp(2.9rem, 5vw, 5rem); + bottom: 18px; display: flex; flex-direction: column; - gap: 1.05rem; - justify-content: end; - align-self: end; - padding: 0; + gap: 0.2rem; } .footer__contact a { width: fit-content; color: inherit; text-decoration: none; - font-size: clamp(1.1rem, 1.75vw, 2rem); + font-size: clamp(1.05rem, 1.72vw, 1.15rem); font-weight: var(--font-weight-black); line-height: 1.05; + text-transform: uppercase; } .footer__claim { + position: absolute; + top: 38px; + right: clamp(2.5rem, 5vw, 5rem); display: flex; flex-direction: column; align-items: flex-start; - justify-self: end; - align-self: start; - width: min(100%, 36rem); - gap: 0.45rem; - padding: 0; + width: clamp(490px, 47vw, 610px); + gap: 0.3rem; } .section-title--claim { - font-size: clamp(3.35rem, 5.7vw, 5.85rem); - max-width: 7.7ch; + font-size: clamp(4rem, 5.85vw, 5.85rem); + max-width: none; line-height: 0.92; } .footer__claim p { margin: 0; + font-size: clamp(1rem, 1.2vw, 1.15rem); font-weight: var(--font-weight-bold); } @@ -544,33 +549,24 @@ button { display: flex; flex-direction: column; align-items: flex-end; - gap: 1.2rem; + gap: 1rem; width: 100%; - margin-top: 1.15rem; + margin-top: 0.9rem; } .footer__claim span { - font-size: 1rem; + font-size: clamp(0.95rem, 1.1vw, 1.05rem); font-weight: var(--font-weight-bold); } .footer__accent { - width: clamp(220px, 22vw, 300px); + width: clamp(255px, 22vw, 300px); margin-left: auto; } .footer__accent img:last-child { - width: 78%; - margin: -0.95rem 0 0 auto; -} - -.footer__wave { - position: absolute; - right: 0; - bottom: 0; - width: 100%; - height: auto; - pointer-events: none; + width: 82%; + margin: -0.85rem 0 0 auto; } .contact-flyover { @@ -827,7 +823,7 @@ button { } .footer__claim { - justify-self: start; + position: static; width: 100%; } @@ -836,14 +832,25 @@ button { } .footer__inner { - grid-template-columns: 1fr; - align-items: start; + display: flex; + flex-direction: column; + gap: 1.8rem; min-height: auto; + padding-top: 2.6rem; padding-bottom: 2rem; } + .footer__brand, .footer__contact { - gap: 0.8rem; + position: static; + } + + .footer__brand { + width: min(260px, 72vw); + } + + .footer__contact { + gap: 0.5rem; } .footer__claim-meta {