/* =================================================================== SHARED STYLES — design system for redesigned site Loaded first on every page; page CSS layers on top. ================================================================== */ /* Fonts loaded via in each HTML for non-render-blocking delivery. Don't @import here. */ /* ---------- DESIGN TOKENS ---------- */ :root { --beige: #dcd9ce; --cream: #eeece3; --cream-deep: #d7d2be; --ink: #2f271f; --ink-soft: #554a3e; --muted: #7a6f62; --indigo: #32428f; --indigo-deep: #1e2b6c; --warm-mid: #bbb4aa; --white: #ffffff; --green: #2d8a56; --green-soft: rgba(45, 138, 86, 0.08); --red: #c0392b; --red-soft: rgba(192, 57, 43, 0.08); --amber: #d4a017; --amber-soft: rgba(212, 160, 23, 0.08); --radius: 16px; --radius-lg: 24px; --shadow-md: 0 4px 18px rgba(47, 39, 31, 0.08); --shadow-lg: 0 20px 50px -20px rgba(47, 39, 31, 0.25); --transition: 200ms ease; --z-nav: 100; --z-lang: 120; --z-modal: 200; --z-toast: 9999; } /* ---------- RESET ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; background: var(--cream); } body { font-family: "Inter", sans-serif; color: var(--ink); overflow-x: hidden; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: "Archivo Black", sans-serif; font-weight: 400; letter-spacing: -0.03em; } a { color: inherit; } img { max-width: 100%; } button { font-family: inherit; } /* The HTML `hidden` attribute should always win over component CSS that sets display (badges, flex rows, etc.). Without this, `` stays visible because `.badge { display: inline-block }` outranks the user-agent stylesheet. */ [hidden] { display: none !important; } /* ---------- REVEAL ANIMATIONS ---------- */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-left { opacity: 0; transform: translateX(-60px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); } .reveal-left.visible { opacity: 1; transform: translateX(0); } .reveal-right { opacity: 0; transform: translateX(60px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); } .reveal-right.visible { opacity: 1; transform: translateX(0); } .reveal-scale { opacity: 0; transform: scale(0.92); transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); } .reveal-scale.visible { opacity: 1; transform: scale(1); } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ---------- NAVBAR ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(1.5rem, 5vw, 4rem); height: 72px; background: rgba(238, 236, 227, 0.7); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border-bottom: 1px solid rgba(47, 39, 31, 0.06); transition: all 0.4s ease; } .nav.scrolled { background: rgba(238, 236, 227, 0.92); box-shadow: 0 1px 24px rgba(47, 39, 31, 0.08); } .nav-logo a { display: inline-block; } .nav-logo img { height: 44px; display: block; } .nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; } .nav-links a { text-decoration: none; color: var(--ink-soft); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.02em; transition: color 0.3s ease; position: relative; background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; display: inline-flex; align-items: center; } .nav-links a::after { content: ""; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--indigo); transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .nav-links a:hover { color: var(--indigo); } .nav-links a:hover::after { width: 100%; } .nav-links a.active-link { color: var(--indigo); } .nav-links a.active-link::after { width: 100%; } .nav-icon-img { width: 1.4rem; filter: brightness(0) saturate(100%) invert(15%) sepia(8%) saturate(1200%) hue-rotate(350deg); } .nav-cta { padding: 0.6rem 1.4rem !important; background: var(--ink) !important; color: var(--cream) !important; border-radius: 100px !important; font-size: 0.85rem !important; font-weight: 600 !important; transition: all 0.3s ease !important; } .nav-cta::after { display: none !important; } .nav-cta:hover { background: var(--indigo) !important; color: #fff !important; transform: scale(1.04); } /* Hamburger button — three bars that animate into an X when the menu is open. Sits above the overlay (z-index higher than `.nav-links.open`) so the user can always see the close affordance. */ .nav-hamburger { display: none; background: transparent; border: 0; cursor: pointer; width: 44px; height: 44px; position: relative; border-radius: 100px; z-index: calc(var(--z-nav) + 5); transition: background 200ms ease; } .nav-hamburger:hover { background: rgba(47, 39, 31, 0.06); } .nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; position: absolute; left: 11px; transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1), top 220ms cubic-bezier(0.4, 0, 0.2, 1) 40ms, opacity 180ms ease; } .nav-hamburger span:nth-child(1) { top: 15px; } .nav-hamburger span:nth-child(2) { top: 21px; } .nav-hamburger span:nth-child(3) { top: 27px; } /* X state — top + bottom bars meet in the middle and rotate, middle fades. */ .nav-hamburger.is-open span:nth-child(1) { top: 21px; transform: rotate(45deg); transition-delay: 0ms, 0ms, 0ms; } .nav-hamburger.is-open span:nth-child(2) { opacity: 0; } .nav-hamburger.is-open span:nth-child(3) { top: 21px; transform: rotate(-45deg); transition-delay: 0ms, 0ms, 0ms; } /* ---------- LANGUAGE MENU ---------- */ .language-menu { position: fixed; top: 80px; right: clamp(1.5rem, 5vw, 4rem); background: var(--white); border: 1px solid rgba(47, 39, 31, 0.08); border-radius: 12px; box-shadow: var(--shadow-md); z-index: var(--z-lang); padding: 0.4rem; display: flex; flex-direction: column; gap: 0.2rem; min-width: 160px; } .language-menu.hidden { display: none; } .language-menu button { background: none; border: none; padding: 0.55em 0.85em; font: inherit; font-size: 0.88rem; text-align: left; cursor: pointer; color: var(--ink); border-radius: 8px; transition: background-color var(--transition); } .language-menu button:hover { background-color: rgba(50, 66, 143, 0.08); color: var(--indigo); } /* The inline language list is injected into `.nav-links` by shared.js and only ever visible inside the mobile overlay (`.nav-links.open`). On desktop it stays hidden so the dropdown remains the entry point. */ .nav-lang-inline { display: none; } .nav-lang-btn { background: transparent; border: 0; font: inherit; cursor: pointer; padding: 0.4rem 0.6rem; border-radius: 100px; color: var(--ink-soft); transition: color 200ms ease, background 200ms ease; } .nav-lang-btn:hover { color: var(--indigo); } .nav-lang-btn.is-active { color: var(--indigo); font-weight: 600; } /* ---------- PAGE HERO (about/services/reservations) ---------- */ .page-hero { position: relative; min-height: 60vh; display: flex; align-items: flex-end; padding: 0 clamp(2rem, 8vw, 8rem) clamp(4rem, 8vh, 8rem); background: url("../images/road.jpg") center/cover no-repeat; isolation: isolate; } .page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(47, 39, 31, 0.2) 0%, rgba(47, 39, 31, 0.6) 100% ); z-index: 0; } .page-hero-content { position: relative; z-index: 1; max-width: 720px; } .page-hero-kicker { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); margin-bottom: 1rem; opacity: 0; } .page-hero-title { font-family: "Archivo Black", sans-serif; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.08; color: #fff; margin: 0 0 0.75rem; opacity: 0; } .page-hero-text { font-size: 1.05rem; line-height: 1.6; color: rgba(255, 255, 255, 0.8); max-width: 52ch; opacity: 0; } .page-hero-credit { margin-top: 1.25rem; font-size: 0.92rem; font-weight: 500; color: rgba(255, 255, 255, 0.7); letter-spacing: 0.02em; max-width: 60ch; opacity: 0; } body.page-loaded .page-hero-kicker { animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; } body.page-loaded .page-hero-title { animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; } body.page-loaded .page-hero-text { animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both; } body.page-loaded .page-hero-credit { animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both; } /* ---------- SECTION SHARED ---------- */ .section { padding: clamp(5rem, 10vw, 9rem) clamp(1.5rem, 8vw, 8rem); } .section-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--indigo); margin-bottom: 1rem; } .section-title { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.1; margin-bottom: 1.5rem; color: var(--ink); } .section-text { font-size: clamp(1rem, 1.5vw, 1.1rem); line-height: 1.75; color: var(--ink-soft); max-width: 58ch; } /* ---------- BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.4rem; border-radius: 100px; font-family: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer; border: none; text-decoration: none; transition: all 0.3s ease; } .btn-primary { background: var(--ink); color: var(--cream); } .btn-primary:hover { background: var(--indigo); color: #fff; } .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid rgba(47, 39, 31, 0.15); } .btn-ghost:hover { background: var(--cream); } .btn-secondary { background: var(--cream); color: var(--ink); border: 1px solid rgba(47, 39, 31, 0.1); } .btn-secondary:hover { background: var(--beige); } .book-cta { display: inline-flex; align-items: center; gap: 0.6rem; padding: 1rem 2.2rem; background: var(--ink); color: var(--cream); font-family: "Archivo Black", sans-serif; font-size: 0.95rem; text-decoration: none; border-radius: 100px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); width: fit-content; } .book-cta:hover { background: var(--indigo); color: #fff; transform: translateY(-3px); box-shadow: 0 12px 40px rgba(47, 39, 31, 0.18); } .book-cta svg { transition: transform 0.3s ease; } .book-cta:hover svg { transform: translateX(4px); } /* ---------- LINKEDIN STRIP ---------- */ .linkedin-strip { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 1.25rem 2rem; background: var(--cream-deep); text-decoration: none; color: var(--indigo); font-family: "Archivo Black", sans-serif; font-weight: 400; font-size: 1.05rem; transition: all 0.3s ease; position: relative; z-index: 2; } .linkedin-strip:hover { background: var(--beige); } .linkedin-strip img { width: 1.5rem; height: 1.5rem; } /* ---------- FOOTER ---------- */ .footer { background: var(--beige); padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 8vw, 8rem) 1rem; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; align-items: start; } .footer-brand img { width: 200px; height: 200px; object-fit: contain; margin-bottom: 1rem; display: block; } .footer-brand p { font-size: 0.85rem; line-height: 1.6; color: var(--muted); max-width: 28ch; } .footer h4 { font-family: "Archivo Black", sans-serif; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1rem; color: var(--ink); } .footer ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; } .footer a, .footer .cookie-reopen { text-decoration: none; color: var(--muted); font-size: 0.9rem; font-weight: 400; line-height: inherit; transition: color 0.3s ease; } .footer a:hover, .footer .cookie-reopen:hover { color: var(--indigo); } .footer-bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(47, 39, 31, 0.1); font-size: 0.8rem; color: var(--muted); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; } .footer-credit { font-size: 0.75rem; color: var(--warm-mid); text-decoration: none; letter-spacing: 0.02em; transition: color 0.2s ease; } .footer-credit:hover { color: var(--indigo); } /* Accreditation / membership badges, injected below the phone number. */ .footer-badges { display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 1.15rem; margin-top: 1.2rem; } .footer-badge { width: auto; flex: 0 0 auto; opacity: 1; filter: none; transition: transform 0.25s ease; } .footer-badge:hover { transform: translateY(-1px); } /* Solution Surfers is a JPG (no transparency), so its white background would show as a box on the beige footer. multiply blends that white into the backdrop, leaving only the logo. The PNG badges keep normal compositing so the ICF badge's intentional white circle is preserved. */ .footer-badge-ss { height: 62px; mix-blend-mode: multiply; } .footer-badge-icf { height: 108px; } .footer-badge-imd { height: 98px; } @media (max-width: 600px) { .footer-badges { justify-content: center; gap: 1rem; } .footer-badge-ss { height: 52px; } .footer-badge-icf { height: 91px; } .footer-badge-imd { height: 82px; } } /* ---------- TOAST ---------- */ .toast { position: fixed; top: 90px; right: 1.5rem; padding: 1rem 1.5rem; border-radius: 12px; font-size: 0.9rem; font-weight: 500; z-index: var(--z-toast); animation: fadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; background: var(--indigo); color: #fff; box-shadow: var(--shadow-md); max-width: 360px; } .toast.error { background: var(--red); } .toast.success { background: var(--green); } /* ---------- RESPONSIVE ---------- */ @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } /* Disable backdrop-filter on the navbar at this breakpoint. The filter creates a new containing block for fixed-positioned descendants, so `.nav-links.open { position: fixed; inset: 0 }` ends up bounded by the navbar's 72px height instead of the viewport. Solid fallback keeps the bar legible. */ .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(238, 236, 227, 0.96); } /* Below 900px we no longer have room for the full link row + the language picker + the booking CTA, so collapse the nav into the hamburger overlay. */ .nav-links { display: none; } .nav-hamburger { display: block; } /* The standalone globe icon is replaced inside the overlay by the inline language picker — hide it so we don't ship two language UIs. */ .nav-lang-icon-li { display: none !important; } /* Full-viewport overlay. Solid cream (no translucency) — looks cleaner than blur, also avoids browsers without backdrop-filter leaving the menu see-through. */ .nav-links.open { display: flex; position: fixed; inset: 0; margin: 0; padding: 6rem 2rem 3rem; background: var(--cream); flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; list-style: none; overflow-y: auto; z-index: calc(var(--z-nav) + 1); animation: lfwMenuFadeIn 220ms ease-out; } .nav-links.open li { width: 100%; max-width: 360px; text-align: center; list-style: none; } .nav-links.open a { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; font-family: "Archivo Black", sans-serif; font-size: 1.35rem; color: var(--ink); letter-spacing: 0.005em; padding: 0.55rem 1rem; text-decoration: none; transition: color 200ms ease; } /* Underline accent doesn't fit big stacked link style. */ .nav-links.open a::after { display: none !important; } .nav-links.open a:hover, .nav-links.open a.active-link { color: var(--indigo); } /* Icons in the open menu render bigger so they read clearly. */ .nav-links.open .nav-icon-img { width: 1.55rem; height: 1.55rem; } /* CTA pill: keep the on-brand look but bump padding so it feels like the primary action in the stack. */ .nav-links.open .nav-cta { padding: 0.95rem 2rem !important; font-size: 0.95rem !important; margin-top: 0.5rem; font-family: "Inter", sans-serif !important; } /* Lock the page behind the overlay so swipes don't scroll content while the menu is open. Toggled by shared.js. */ body.menu-open { overflow: hidden; } /* Inline language picker — reveal it as a row of pill buttons at the bottom of the overlay so changing language is one tap. */ .nav-links.open .nav-lang-inline { display: flex; justify-content: center; gap: 0.4rem; padding-top: 1.5rem; margin-top: 0.5rem; border-top: 1px solid rgba(47, 39, 31, 0.12); width: 100%; max-width: 360px; } .nav-links.open .nav-lang-btn { font-family: "Inter", sans-serif; font-size: 0.95rem; font-weight: 500; padding: 0.55rem 1rem; border: 1px solid transparent; } .nav-links.open .nav-lang-btn.is-active { border-color: var(--indigo); background: rgba(50, 66, 143, 0.08); } } @keyframes lfwMenuFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* Tight phones (~320px) — squeeze the open menu's vertical rhythm so all seven items + CTA fit without scrolling. */ @media (max-width: 380px) { .nav-links.open { padding: 5rem 1.25rem 2rem; gap: 1rem; } .nav-links.open li { max-width: 100%; } .nav-links.open a { font-size: 1.15rem; padding: 0.4rem 0.6rem; } .nav-links.open .nav-cta { padding: 0.8rem 1.6rem !important; font-size: 0.9rem !important; } } /* Phones (<500px): inner pages' hero needs to be the full viewport height so the multi-line title (especially in French/German where words like "accompagner" force a tall stack) doesn't overflow above the hero box and slip behind the fixed navbar. `100dvh` adapts to browsers whose URL bar shrinks/grows; `100vh` is the older fallback. With the box now full-height, anchor the content in the middle of the viewport (vertically + horizontally) so the title doesn't sit at the bottom of an otherwise empty road photo. Only `.page-hero` (about / services / reservations / blog / blog-post) — the home `.hero` keeps its own layout. */ @media (max-width: 500px) { .page-hero { min-height: 100vh; min-height: 100dvh; padding-top: clamp(5rem, 14vh, 7rem); align-items: center; justify-content: center; text-align: center; } .page-hero-content { margin-inline: auto; } .page-hero-text, .page-hero-credit { margin-left: auto; margin-right: auto; } } @media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; text-align: center; } .footer-brand { display: flex; flex-direction: column; align-items: center; } .footer ul { align-items: center; } } /* =================================================================== ACCESSIBILITY UTILITY — visually hidden but readable by AT and crawlers ================================================================== */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* =================================================================== SKELETON LOADER UTILITY Used by any page that wants a placeholder shimmer while data loads. Wrap text-line-shaped placeholders in .skel; .skel-line .skel-short .skel-title give common dimensions. Honours prefers-reduced-motion. ================================================================== */ .skel { background: linear-gradient( 90deg, rgba(47, 39, 31, 0.06) 0%, rgba(47, 39, 31, 0.12) 50%, rgba(47, 39, 31, 0.06) 100% ); background-size: 200% 100%; animation: skel-pulse 1.4s ease-in-out infinite; border-radius: 6px; display: block; } .skel-line { height: 0.85rem; margin-bottom: 0.7rem; } .skel-title { height: 1.2rem; width: 70%; margin-bottom: 1rem; } .skel-short { width: 60%; } @keyframes skel-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .skel { animation: none; } } /* =================================================================== COOKIE CONSENT BANNER Injected on every page by shared.js so the styles MUST live here, not in any per-page CSS. Themed against the design tokens (cream / ink / indigo) so it visually belongs to the rest of the site. ================================================================== */ .cookie-banner { position: fixed; inset: auto 1rem 1rem 1rem; z-index: var(--z-toast, 9999); max-width: 540px; margin-left: auto; background: var(--white); color: var(--ink); border: 1px solid rgba(47, 39, 31, 0.08); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 1.4rem 1.5rem 1.25rem; font-family: "Inter", system-ui, sans-serif; font-size: 0.92rem; line-height: 1.55; transform: translateY(140%); opacity: 0; transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 240ms ease; } .cookie-banner.visible { transform: translateY(0); opacity: 1; } .cookie-banner h3 { margin: 0 0 0.4rem; font-family: "Archivo Black", sans-serif; font-size: 1rem; letter-spacing: 0.005em; color: var(--ink); } .cookie-banner p { margin: 0 0 0.85rem; color: var(--ink-soft); } .cookie-banner a { color: var(--indigo); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .cookie-banner a:hover { text-decoration: none; } .cookie-banner-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.95rem; } .cookie-btn { appearance: none; border: 1px solid transparent; border-radius: 999px; padding: 0.6rem 1.2rem; font-size: 0.85rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease; } .cookie-btn-primary { background: var(--ink); color: var(--cream); } .cookie-btn-primary:hover { background: var(--indigo); color: var(--white); transform: translateY(-1px); } .cookie-btn-secondary { background: transparent; color: var(--ink); border-color: rgba(47, 39, 31, 0.2); } .cookie-btn-secondary:hover { border-color: var(--ink); background: rgba(47, 39, 31, 0.03); } .cookie-btn-ghost { background: transparent; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; padding: 0.6rem 0.6rem; } .cookie-btn-ghost:hover { color: var(--ink); } .cookie-prefs { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(47, 39, 31, 0.08); display: none; } .cookie-prefs.open { display: block; } .cookie-pref-row { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.6rem 0; } .cookie-pref-row + .cookie-pref-row { border-top: 1px dashed rgba(47, 39, 31, 0.1); } .cookie-pref-row input[type="checkbox"] { margin-top: 0.25rem; width: 1.05rem; height: 1.05rem; accent-color: var(--indigo); cursor: pointer; } .cookie-pref-row input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.55; } .cookie-pref-row label { display: block; font-weight: 600; color: var(--ink); cursor: pointer; } .cookie-pref-row small { display: block; color: var(--muted); font-size: 0.83rem; margin-top: 0.2rem; line-height: 1.5; } @media (max-width: 540px) { .cookie-banner { inset: auto 0.7rem 0.7rem 0.7rem; padding: 1.1rem 1.1rem 1rem; max-width: none; } .cookie-banner-actions { flex-direction: column; } .cookie-btn { width: 100%; } } /* "Cookie settings" reopen link in footer + legal pages */ .cookie-reopen { background: none; border: none; font: inherit; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .cookie-reopen:hover { text-decoration: none; } .footer .cookie-reopen { text-decoration: none; }