/* ============================================================ ULTRAEASE — SHARED COMPONENTS Nav, footer, cursor shine, glass orbs. One implementation, used by every page. The flowing brand-gradient text treatment on links is the canonical expression of the full palette (teal → deep teal → purple → pink → deep teal → teal). ============================================================ */ /* ------------------------------------------------------------ COLOUR-BLOCK SYSTEM — the foundation. A colour section is a WebGL shader wave-field on a , driven by js/site.js. The CSS gradient on the canvas is the fallback when WebGL is unavailable. Used IDENTICALLY by every page so the homepage and the product page render the same living colour — same engine, same palette, same amplitude. ------------------------------------------------------------ */ .block-colour{position:relative;overflow:hidden;padding:clamp(92px,12vh,148px) 0} .block-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0; pointer-events:none;display:block} /* Bloom fallback gradients (full-voice; tokens in css/tokens.css) */ .cb-device .block-canvas{background: radial-gradient(70% 80% at 85% 14%, rgba(var(--cloud-violet),var(--bloom-lo)), transparent 60%), radial-gradient(82% 92% at 8% 92%, rgba(var(--cloud-mint),var(--bloom-hi)), transparent 64%), linear-gradient(126deg,#57D1B4 0%,#76D7C3 31%,#A6E2D6 63%,#CBEAE2 100%)} .cb-routines .block-canvas{background: radial-gradient(70% 80% at 89% 87%, rgba(var(--cloud-violet),var(--bloom-lo)), transparent 60%), radial-gradient(82% 92% at 8% 12%, rgba(var(--cloud-teal),.85), transparent 64%), linear-gradient(126deg,#57D1B4 0%,#86D8C6 30%,#B9E6DC 62%,#D2B9DD 100%)} /* Content sits above the canvas */ .block-colour > .wrap{position:relative;z-index:2} /* Type that reads on the bright pastel wave */ .block-colour .eyebrow{color:var(--col-ink)} .block-colour .eyebrow::before{background:var(--col-ink)} .block-colour .accent{color:var(--col-ink)} /* ------------------------------------------------------------ LANGUAGE SUGGESTION BAR — one quiet line offering the twin page when the browser's own language is not the page's. Mounted by js/site.js as the FIRST child of , in flow, above the sticky nav: it displaces nothing, overlaps nothing (the iubenda cookie banner floats at the bottom of the viewport), and scrolls away for good on the first scroll rather than following the reader down the page. Slim, mint-tinted, gone in one click — the register of a footnote, not of a popup. Deliberately un-animated: it appears with the page, so there is nothing for prefers-reduced-motion to switch off beyond the two hover tints handled at the bottom of this block. ------------------------------------------------------------ */ .lang-suggest{background:var(--tint-mint);border-bottom:1px solid var(--hair)} .lang-suggest-in{max-width:1280px;margin:0 auto;padding:9px 56px; display:flex;align-items:center;gap:5px 14px;flex-wrap:wrap} .lang-suggest-text{font-size:12.5px;font-weight:300;line-height:1.5;color:var(--body); flex:1 1 auto;min-width:0} .lang-suggest-cta{flex:0 0 auto;font-size:12.5px;font-weight:500;color:var(--turq-deep); text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px;text-decoration-color:rgba(15,124,117,.34); transition:text-decoration-color .45s ease,color .45s ease} .lang-suggest-cta:hover{color:var(--turq-ink);text-decoration-color:var(--turq-ink)} .lang-suggest-close{flex:0 0 auto;margin-left:auto; width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center; border:0;border-radius:99px;background:transparent;color:var(--muted); cursor:pointer;padding:0;transition:color .35s ease,background .35s ease} .lang-suggest-close:hover{color:var(--turq-ink);background:rgba(23,187,176,.12)} .lang-suggest-close svg{display:block} @media (max-width:1000px){ .lang-suggest-in{padding-left:32px;padding-right:32px} } /* Below 600px the line is given its own row and the action sits under it, so nothing is squeezed to two words per line at 360px. */ @media (max-width:600px){ .lang-suggest-in{padding:8px 20px;gap:3px 12px} .lang-suggest-text{flex:1 1 100%;font-size:12px} .lang-suggest-cta{font-size:12px} } @media (prefers-reduced-motion:reduce){ .lang-suggest-cta,.lang-suggest-close{transition:none} } /* ------------------------------------------------------------ NAV ------------------------------------------------------------ */ .nav{position:sticky;top:0;z-index:50; background:rgba(253,253,253,.82);border-bottom:1px solid var(--hair); backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)} .nav-in{max-width:1280px;margin:0 auto;padding:15px 56px;display:flex;align-items:center;gap:40px} .brand{display:flex;align-items:center;gap:9px} .brand img{display:block;height:22px;width:auto} .brand span{font-size:19px;font-weight:500;letter-spacing:-.02em;color:var(--ink)} .nav-links{display:flex;gap:30px;margin-left:auto;align-items:center} /* Nav links — flowing brand-colour gradient clipped through the letters. Rest: opaque body grey. Hover: colour fades to transparent so the gradient reveals through. .active loops continuously like a quiet heartbeat. */ .nav-links a, .nav-item .nav-link{font-size:13px;font-weight:400;color:var(--body);position:relative;padding:4px 0; cursor:pointer;display:inline-block; background-image:linear-gradient(110deg, var(--logo-teal) 0%, var(--turq-deep) 22%, var(--purple) 48%, var(--pink) 68%, var(--turq-deep) 86%, var(--logo-teal) 100%); background-size:220% 100%; background-position:0% 50%; -webkit-background-clip:text; background-clip:text; transition:color .55s ease} .nav-links a:hover, .nav-item .nav-link:hover{color:transparent;animation:nav-flow 3.2s ease-in-out infinite} .nav-links a.active, .nav-item .nav-link.active{color:transparent;animation:nav-flow 6s linear infinite} @keyframes nav-flow{ 0%,100%{background-position:0% 50%} 50%{background-position:200% 50%} } .nav-item{position:relative} .nav-dropdown{position:absolute;top:calc(100% + 10px);left:50%; transform:translateX(-50%) translateY(-6px); min-width:270px;background:rgba(253,253,253,.97); backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5); border:1px solid var(--hair);border-radius:16px;padding:8px; box-shadow:0 22px 60px -22px rgba(20,50,44,.22), 0 2px 6px rgba(20,50,44,.05); opacity:0;pointer-events:none;transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1); z-index:55} .nav-dropdown::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px} .nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown, .nav-item.open .nav-dropdown{ opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)} .nav-dropdown a{display:flex;align-items:center;justify-content:space-between;gap:14px; font-size:13px;font-weight:400; padding:10px 16px;border-radius:10px;color:var(--body);white-space:nowrap; background-image:linear-gradient(110deg, var(--logo-teal) 0%, var(--turq-deep) 22%, var(--purple) 48%, var(--pink) 68%, var(--turq-deep) 86%, var(--logo-teal) 100%); background-size:220% 100%; background-position:0% 50%; -webkit-background-clip:text;background-clip:text; transition:color .55s ease} .nav-dropdown a:hover{color:transparent;animation:nav-flow 3.2s ease-in-out infinite} .nav-dropdown a.is-soon{color:var(--muted)} .nav-dropdown a.is-soon em{font-style:normal;font-size:9.5px;letter-spacing:.14em; text-transform:uppercase;font-weight:500;color:var(--muted);flex-shrink:0; padding:3px 9px;border-radius:99px;background:rgba(140,140,135,.14); -webkit-background-clip:padding-box;background-clip:padding-box} .nav-dropdown a.is-soon:hover{color:transparent;animation:nav-flow 3.2s ease-in-out infinite} @media (max-width:1000px){ .nav-in{padding-left:32px;padding-right:32px} .nav-links{display:none} } @media (max-width:600px){ .nav-dropdown{position:fixed;left:22px;right:22px;transform:none;min-width:0;top:calc(100% - 4px)} .nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown, .nav-item.open .nav-dropdown{transform:none} } @media (max-width:560px){ .nav-in{padding-left:20px;padding-right:20px} } /* ------------------------------------------------------------ MOBILE NAV — burger + full-screen drawer. The drawer markup is generated in js/site.js from the existing .nav-links, so it stays in sync with the desktop nav on every page. Shown only where the inline .nav-links collapse (<=1000px). Calm white sheet, light display type, hairline groups — the same quiet voice as the page. ------------------------------------------------------------ */ .nav-burger{display:none;margin-left:auto;width:44px;height:44px; align-items:center;justify-content:center;background:none;border:none;cursor:pointer; color:var(--ink);-webkit-tap-highlight-color:transparent;padding:0} .nav-burger .bars{position:relative;display:block;width:23px;height:13px} .nav-burger .bars i{position:absolute;left:0;right:0;height:1.5px;border-radius:2px; background:currentColor;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .25s ease,width .4s ease} .nav-burger .bars i:nth-child(1){top:0} .nav-burger .bars i:nth-child(2){top:50%;transform:translateY(-50%);width:70%} .nav-burger .bars i:nth-child(3){bottom:0} .nav-burger:hover .bars i:nth-child(2){width:100%} /* Show the burger only where the desktop links collapse. Declared after the base display:none so it wins on source order at equal specificity. */ @media (max-width:1000px){.nav-burger{display:inline-flex}} /* Lock page scroll while the drawer is open */ html.mnav-lock,html.mnav-lock body{overflow:hidden} .mnav{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column; background:rgba(253,253,253,.97); -webkit-backdrop-filter:blur(26px) saturate(1.4);backdrop-filter:blur(26px) saturate(1.4); opacity:0;visibility:hidden;transform:translateY(-10px); transition:opacity .4s ease,transform .55s cubic-bezier(.2,.8,.2,1),visibility 0s linear .55s} .mnav.open{opacity:1;visibility:visible;transform:none; transition:opacity .4s ease,transform .55s cubic-bezier(.2,.8,.2,1)} .mnav:focus{outline:none} .mnav-bar{display:flex;align-items:center;justify-content:space-between; min-height:60px;padding:15px 32px;border-bottom:1px solid var(--hair)} .mnav-bar .brand img{display:block;height:22px;width:auto} .mnav-close{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center; background:none;border:none;cursor:pointer;color:var(--ink); -webkit-tap-highlight-color:transparent;position:relative} .mnav-close i{position:absolute;width:21px;height:1.5px;border-radius:2px;background:currentColor} .mnav-close i:nth-child(1){transform:rotate(45deg)} .mnav-close i:nth-child(2){transform:rotate(-45deg)} .mnav-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch; padding:18px 32px calc(28px + env(safe-area-inset-bottom,0px))} .mnav-group{padding:8px 0;border-bottom:1px solid var(--hair); opacity:0;transform:translateY(12px); transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--i,0) * 55ms + 120ms)} .mnav.open .mnav-group{opacity:1;transform:none} .mnav-link{display:flex;align-items:center;gap:12px; font-size:27px;font-weight:200;letter-spacing:-.025em;line-height:1.1; color:var(--ink);padding:12px 0} .mnav-link.is-disabled{color:var(--muted)} .mnav-soon{font-style:normal;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase; font-weight:500;color:var(--muted);padding:3px 9px;border-radius:99px; background:rgba(140,140,135,.14);align-self:center} .mnav-sub{display:flex;flex-direction:column;padding:0 0 8px 2px} .mnav-sublink{display:flex;align-items:center;gap:10px; font-size:15px;font-weight:300;color:var(--body);padding:8px 0} .mnav-sublink.is-soon{color:var(--muted)} .mnav-foot{padding:22px 32px calc(24px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--hair); font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:500; color:var(--muted);text-align:center} @media (min-width:1001px){.mnav{display:none}} @media (max-width:560px){ .mnav-bar{padding-left:20px;padding-right:20px} .mnav-body{padding-left:20px;padding-right:20px} .mnav-link{font-size:24px} } @media (prefers-reduced-motion:reduce){ .mnav,.mnav.open{transition:opacity .25s ease,visibility 0s} .mnav{transform:none} .mnav-group{transition:none;transform:none} .nav-burger .bars i{transition:none} } /* ------------------------------------------------------------ CURSOR SHINE — a pearl sheen following the cursor. js/site.js injects a .shine div into each .block-white and .block-colour and drives --mx/--my with an eased rAF loop. On white, a white glow is invisible by definition — presence comes from the *pearl halo*: a hot core wrapped in a barely- tinted mother-of-pearl ring that supplies the luminance contrast, then a wide soft falloff. Sheen, not colour. ------------------------------------------------------------ */ .shine{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0; transition:opacity 1.1s ease; background: /* broad satin sheen — no defined core; the light is an area, not a point */ radial-gradient(ellipse 1500px 950px at var(--mx,-9999px) var(--my,-9999px), rgba(252,255,254,.42) 0%, rgba(240,250,247,.26) 30%, rgba(224,238,234,.13) 58%, transparent 84%), radial-gradient(ellipse 2300px 1500px at var(--mx,-9999px) var(--my,-9999px), rgba(212,231,226,.12) 18%, transparent 94%)} .block-white.is-shining .shine{opacity:1} /* Coloured sections — same satin idea, plain white veil at low amplitude */ .block-colour .shine{z-index:1; background: radial-gradient(ellipse 1400px 900px at var(--mx,-9999px) var(--my,-9999px), rgba(255,255,255,.28) 0%, rgba(255,255,255,.13) 38%, transparent 76%), radial-gradient(ellipse 2200px 1400px at var(--mx,-9999px) var(--my,-9999px), rgba(255,255,255,.09) 15%, transparent 92%)} .block-colour.is-shining .shine{opacity:1} /* Wash sections (PDP) — near-white pastel fields; the pearl shine reads there too */ .shine-wash .shine{z-index:1} .shine-wash.is-shining .shine{opacity:1} @media (prefers-reduced-motion:reduce){.shine{display:none}} /* ------------------------------------------------------------ GLASS ORB — radial gloss icon container + aurora hover glow. Used by the homepage closing-trust items and the PDP trust strip. ------------------------------------------------------------ */ .ue-orb, .pdp-trust-icon{position:relative;width:62px;height:62px;border-radius:50%; color:var(--col-ink);display:grid;place-items:center;isolation:isolate;flex-shrink:0; background:radial-gradient(125% 125% at 30% 24%,rgba(255,255,255,.94),rgba(224,240,236,.6) 54%,rgba(176,212,205,.45)); border:1px solid rgba(255,255,255,.78); box-shadow:0 10px 22px rgba(40,90,84,.16), inset 0 2px 3px rgba(255,255,255,.95), inset 0 -9px 16px rgba(120,168,160,.18); transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,color .35s ease} .pdp-trust-icon{flex:0 0 62px} .ue-orb::after, .pdp-trust-icon::after{content:"";position:absolute;z-index:2;pointer-events:none; top:8px;left:12px;width:26px;height:13px;border-radius:50%; background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,0))} .ue-orb svg, .pdp-trust-icon svg{position:relative;z-index:1;width:28px;height:28px; fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} .closing-trust-item:hover .ue-orb, .pdp-trust-item:hover .pdp-trust-icon{transform:translateY(-3px);color:var(--turq); box-shadow:0 16px 36px rgba(40,90,84,.22), inset 0 2px 3px rgba(255,255,255,.98), inset 0 -9px 16px rgba(120,168,160,.22), 0 0 0 1px rgba(23,187,176,.22), 0 0 30px rgba(23,187,176,.34), 0 0 56px rgba(210,185,221,.26)} /* ------------------------------------------------------------ CENTRED EYEBROW — .eyebrow.ctr gets a mirrored right-hand dash so the label sits truly on the centre axis (a single left dash read visibly off-centre against centred headings/forms). ------------------------------------------------------------ */ .eyebrow.ctr::after{content:"";width:26px;height:1px;background:var(--turq);display:block} .block-colour .eyebrow.ctr::after{background:var(--col-ink)} /* ------------------------------------------------------------ EMAIL-CAPTURE SUCCESS — shared by every form[data-capture]. On success js/site.js hides the input + button and mounts .capture-done inside the form: the pill itself becomes a calm confirmation. No email echo, no button-label swap. ------------------------------------------------------------ */ form[data-capture].is-done input, form[data-capture].is-done button{display:none} form[data-capture].is-done{justify-content:center} .capture-done{display:flex;align-items:center;justify-content:center;gap:12px; padding:8px 16px;text-align:left;min-height:40px; animation:ueCaptureIn .6s cubic-bezier(.2,.8,.2,1) both} .capture-done .cd-check{width:26px;height:26px;flex-shrink:0;fill:none; stroke:var(--turq-deep);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .capture-done .cd-check circle{stroke-dasharray:67;stroke-dashoffset:67; animation:ueCaptureDraw .7s cubic-bezier(.4,.1,.3,1) .15s forwards} .capture-done .cd-tick{stroke-dasharray:14;stroke-dashoffset:14; animation:ueCaptureDraw .45s cubic-bezier(.2,.8,.2,1) .6s forwards} .capture-done .cd-copy{display:flex;flex-direction:column;gap:1px;min-width:0} .capture-done b{font-size:13.5px;font-weight:500;color:var(--ink);letter-spacing:-.005em} .capture-done em{font-style:normal;font-size:12px;line-height:1.45;color:var(--body);font-weight:300} @keyframes ueCaptureIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @keyframes ueCaptureDraw{to{stroke-dashoffset:0}} @media (prefers-reduced-motion:reduce){ .capture-done{animation:none} .capture-done .cd-check circle,.capture-done .cd-tick{animation:none;stroke-dashoffset:0} } /* ------------------------------------------------------------ IUBENDA CONSENT BANNER — the held reveal ------------------------------------------------------------ The widget renders as lit components in shadow DOM, unreachable from page CSS. Its brand dressing lives in js/site.js, injected into the shadow roots at runtime — which is exactly the problem this rule solves. iubenda mounts already painted in its stock styling (a 500x590 card), and our sheet lands a beat later and snaps it to 400x463. The visitor saw the banner twice: a large rough one, then the real one. The shadow internals are out of reach, but the HOST element is ordinary page CSS. So we hold the host invisible and fade it in once, past the restyle. Three things this must never do: - never display:none or visibility:hidden — iubenda measures the card's layout, and a hidden host measures as nothing; - never touch pointer-events — the pass-through is set inside the shadow root and a page-level override would outlive the reveal; - never depend on JS to appear. The animation is the guarantee: if the dressing is slow or never runs at all, the banner still becomes visible when the delay elapses. The delay is ~2.5x the measured dress latency (~100ms poll in js/site.js), so the snap always happens under the cover. [data-ue-dressed] is the early-out: js/site.js sets it in the same task as the dressing, which drops the wait and makes a re-opened banner appear at once instead of waiting the hold out again. Scoped to the type selector `tb-banner-wrapper` — the banner host and nothing else. Not `.tb-banner-wrapper` (a class used INSIDE the shadow root), not the cookie-preferences widget, and not the inline policy embeds on /datenschutz and /cookie-richtlinie, which mount as .iub-* / iframe content and never match an element named that. position + z-index are load-bearing, and they are here BECAUSE of the fade. Animating opacity makes the host a stacking context, and that traps the banner's own painting order inside it: the card is fixed and sits high inside the shadow root, but the shadow root can only ever paint as high as its host does. The host is an ordinary static element in body flow, so the first page section with any elevation paints over the top of the banner — measured live: the homepage hero grid came out above the card and cut through the consent text. Lifting the host lifts the whole shadow tree with it. z-index does nothing on a static element, so `position:relative` is not decoration — remove it and the burial comes straight back, silently. It is safe here: the host is a 0x0 inline box with no offsets, and `relative` does not become a containing block for the fixed card. The value sits just under the 2147483647 iubenda uses for its own layers, so iubenda still wins over us where it wants to; the site's own highest z-index is 80, so nothing of ours comes close. */ tb-banner-wrapper{opacity:0;animation:ue-iub-reveal .22s ease .4s forwards;position:relative;z-index:2147483600} tb-banner-wrapper[data-ue-dressed]{animation-delay:0s} @keyframes ue-iub-reveal{to{opacity:1}} /* Reduced motion keeps the hold — it is the whole point — and drops the fade to a cut. Opacity alone carries no motion, so this is a courtesy. */ @media (prefers-reduced-motion:reduce){ tb-banner-wrapper{animation-duration:.01s} } /* ------------------------------------------------------------ FOOTER ------------------------------------------------------------ */ /* .foot.block-white doubles specificity so the footer padding wins over the page-level .block-white padding even though this sheet loads first. */ .foot, .foot.block-white{padding:84px 0 36px;border-top:1px solid var(--hair);background:var(--snow)} .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:56px} /* 5-column footer that mirrors the top-nav sitemap (Shop · Routines · Knowledge · About us · Support) */ .foot-grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:36px;margin-bottom:56px} .foot-col h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--ink);margin-bottom:16px} /* Footer column links — same flowing brand-gradient text-clip as the top-nav. */ .foot-col a{display:block;font-size:13.5px;color:var(--body);padding:5px 0; background-image:linear-gradient(110deg, var(--logo-teal) 0%, var(--turq-deep) 22%, var(--purple) 48%, var(--pink) 68%, var(--turq-deep) 86%, var(--logo-teal) 100%); background-size:220% 100%; background-position:0% 50%; -webkit-background-clip:text; background-clip:text; transition:color .55s ease} .foot-col a:hover{color:transparent;animation:nav-flow 3.2s ease-in-out infinite} .foot-col a.active{color:transparent;animation:nav-flow 6s linear infinite} .foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap; padding-top:28px;border-top:1px solid var(--hair)} .foot-legal{display:flex;gap:20px;flex-wrap:wrap} /* Legal links share the gradient treatment too — smaller scale, same family */ .foot-legal a{font-size:12px;color:var(--muted); background-image:linear-gradient(110deg, var(--logo-teal) 0%, var(--turq-deep) 22%, var(--purple) 48%, var(--pink) 68%, var(--turq-deep) 86%, var(--logo-teal) 100%); background-size:220% 100%; background-position:0% 50%; -webkit-background-clip:text; background-clip:text; transition:color .55s ease} .foot-legal a:hover{color:transparent;animation:nav-flow 3.2s ease-in-out infinite} .foot-copy{font-size:12px;color:var(--muted)} /* Unbuilt destinations — links without href carry aria-disabled="true": no pointer, no gradient tease, nothing jumps to top. */ a[aria-disabled="true"]{cursor:default} .nav-links a[aria-disabled="true"]:hover, .foot-col a[aria-disabled="true"]:hover, .foot-legal a[aria-disabled="true"]:hover{color:var(--muted);animation:none} a[onclick]{cursor:pointer} @media (max-width:1000px){ .foot-grid{grid-template-columns:1fr 1fr;gap:32px} .foot-grid-5{grid-template-columns:1fr 1fr 1fr;gap:28px} } @media (max-width:560px){ .foot-grid,.foot-grid-5{grid-template-columns:1fr 1fr;gap:24px} }