/* ========================================================= Zest Mavericks - css/style.css Plain CSS, no build step. Organised as: 1 Tokens, 2 Base, 3 Layout, 4 Type, 5 Buttons, 6 Header, 7 Theme toggle, 8 Hero, 9 Showcase, 10 Pricing, 11 Form, 12 Legal, 13 Footer, 14 Motion and print Colour rule for this file, in one line: a component never hardcodes a colour, and any element that paints its own background also declares the text tokens that belong on it. That is what stops white-on-white text. ========================================================= */ /* ---------- 1. Tokens ---------- */ :root { color-scheme: light; /* Invariants. These mean the same thing in both themes and must never be redefined, because dark sections rely on them. */ --white: #ffffff; --cyan: #03ffff; --ink-static: #091057; /* text that sits on an always-white chip */ /* Surfaces */ --sky: #b7e0ff; /* page background */ --surface: #ffffff; /* cards, plans, form */ --surface-soft: rgba(255, 255, 255, 0.62); --surface-line: rgba(9, 16, 87, 0.12); --field-bg: #f4f6ff; /* Text on the page background */ --ink: #091057; --ink-70: rgba(9, 16, 87, 0.72); --ink-55: rgba(9, 16, 87, 0.56); --on-ink: #ffffff; /* text on a solid --ink fill */ --focus: #091057; /* Text on a card surface. Components that paint a surface reset the four tokens above to these, so they stay legible no matter what the surrounding section did. */ --ink-card: #091057; --ink-card-70: rgba(9, 16, 87, 0.72); --ink-card-55: rgba(9, 16, 87, 0.56); --on-ink-card: #ffffff; --focus-card: #091057; /* Section washes */ --yellow: #ffeb00; --cream: #fff5cd; --lavender: #cdc1ff; --navy: #384b70; --crimson: #b8001f; --mist: #f4f6ff; --smoke: #f7f7f7; --night: #181c14; /* Status. Separate from --crimson on purpose: one is a section background, the other is error text, and they need to move independently in dark mode. */ --danger: #b8001f; --ok: #0a7a4f; /* Chrome */ --nav-bg: rgba(255, 255, 255, 0.6); --nav-bg-solid: rgba(255, 255, 255, 0.92); --nav-line: rgba(255, 255, 255, 0.7); --nav-hover: rgba(255, 255, 255, 0.9); --hero-glow: rgba(255, 255, 255, 0.9); /* Fluid type scale */ --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem); --text-sm: clamp(0.875rem, 0.84rem + 0.2vw, 1rem); --text-base: clamp(1rem, 0.96rem + 0.25vw, 1.125rem); --text-lg: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem); --text-xl: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem); --text-2xl: clamp(1.75rem, 1.35rem + 1.9vw, 2.75rem); --text-3xl: clamp(2.25rem, 1.6rem + 3.2vw, 4rem); /* Space */ --gutter: clamp(1.25rem, 4vw, 2.5rem); --section-y: clamp(3.5rem, 9vw, 7rem); --container: 1180px; --measure: 68ch; /* Shape */ --radius-sm: 12px; --radius: 18px; --radius-lg: 28px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(9, 16, 87, 0.06), 0 6px 16px rgba(9, 16, 87, 0.07); --shadow-md: 0 12px 32px rgba(9, 16, 87, 0.12); --shadow-lg: 0 28px 64px rgba(9, 16, 87, 0.2); --nav-h: 56px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* Dark theme. js/theme.js sets data-theme on before first paint, from the saved choice or, failing that, the operating system. */ :root[data-theme="dark"] { color-scheme: dark; --sky: #0d131c; --surface: #161d29; --surface-soft: rgba(255, 255, 255, 0.06); --surface-line: rgba(233, 238, 251, 0.14); --field-bg: rgba(255, 255, 255, 0.05); --ink: #e9eefb; --ink-70: rgba(233, 238, 251, 0.74); --ink-55: rgba(233, 238, 251, 0.58); --on-ink: #0d131c; --focus: #e9eefb; --ink-card: #e9eefb; --ink-card-70: rgba(233, 238, 251, 0.74); --ink-card-55: rgba(233, 238, 251, 0.58); --on-ink-card: #0d131c; --focus-card: #e9eefb; /* The washes keep their hue and lose their brightness, so the page still reads as the same site with the lights off. */ --yellow: #2b2405; --cream: #241d0c; --lavender: #1c1a2b; --navy: #131c2a; --crimson: #2b0a12; --mist: #0f1621; --smoke: #101722; --night: #080b10; --danger: #ff8a94; --ok: #45d39a; --nav-bg: rgba(22, 29, 41, 0.62); --nav-bg-solid: rgba(22, 29, 41, 0.94); --nav-line: rgba(255, 255, 255, 0.1); --nav-hover: rgba(255, 255, 255, 0.12); --hero-glow: rgba(96, 150, 255, 0.14); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.36); --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45); --shadow-lg: 0 28px 64px rgba(0, 0, 0, 0.55); } /* ---------- 2. Base ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { min-height: 100dvh; background-color: var(--sky); color: var(--ink); font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: var(--text-base); font-weight: 400; line-height: 1.65; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, picture, video { display: block; max-width: 100%; height: auto; } a { color: inherit; } button, input, textarea, select { font: inherit; color: inherit; } /* Outline only. No border-radius here: setting one squared off the pill buttons and rounded cards the moment they took focus. */ :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } ::selection { background: var(--ink); color: var(--on-ink); } /* Inline SVG. Carries a class so it beats any bare `svg` rule left in an old stylesheet that a browser may still have cached, and resets every property such a rule sets. */ .icon { position: static; left: auto; bottom: auto; display: block; width: 20px; height: 20px; max-height: none; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ---------- 3. Layout utilities ---------- */ .container { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; } .container--narrow { width: min(100% - (var(--gutter) * 2), 760px); } .section { padding-block: var(--section-y); } /* A dark section swaps the text tokens rather than restyling each child. Anything inside it inherits the right colour automatically, and light surfaces inside it swap them back (see .card, .plan, .form-card). */ .section--dark { --ink: var(--white); --ink-70: rgba(255, 255, 255, 0.82); --ink-55: rgba(255, 255, 255, 0.7); --on-ink: var(--ink-static); --focus: var(--cyan); color: var(--ink); } .bg-sky { background-color: var(--sky); } .bg-smoke { background-color: var(--smoke); } .bg-yellow { background-color: var(--yellow); } .bg-cream { background-color: var(--cream); } .bg-lavender { background-color: var(--lavender); } .bg-mist { background-color: var(--mist); } .bg-navy { background-color: var(--navy); } .bg-crimson { background-color: var(--crimson); } .center { text-align: center; } .center .lede, .center .quote { margin-inline: auto; } .stack > * + * { margin-top: 1rem; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: 0; left: 50%; transform: translate(-50%, -120%); z-index: 200; padding: 0.75rem 1.25rem; background: var(--ink); color: var(--on-ink); border-radius: 0 0 var(--radius-sm) var(--radius-sm); text-decoration: none; transition: transform 0.2s var(--ease); } .skip-link:focus, .skip-link:focus-visible { transform: translate(-50%, 0); } main { display: block; padding-top: calc(var(--nav-h) + 2rem); } /* Anchor targets clear the fixed navbar */ [id] { scroll-margin-top: calc(var(--nav-h) + 2rem); } [hidden] { display: none !important; } /* ---------- 4. Typography ---------- */ h1, h2, h3, h4 { font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; } h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); } h4 { font-size: var(--text-lg); } p { text-wrap: pretty; } .eyebrow { display: inline-block; margin-bottom: 0.75rem; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-55); } .lede { max-width: var(--measure); font-size: var(--text-lg); font-weight: 300; color: var(--ink-70); } .quote { font-size: var(--text-xl); font-weight: 300; font-style: italic; max-width: 26ch; margin-inline: auto; color: var(--ink); } .quote cite { display: block; margin-top: 1rem; font-size: var(--text-sm); font-style: normal; font-weight: 500; color: var(--ink-55); } /* ---------- 5. Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.75rem 1.75rem; border: 2px solid var(--ink); border-radius: var(--radius-pill); background: var(--ink); color: var(--on-ink); font-size: var(--text-sm); font-weight: 500; text-decoration: none; cursor: pointer; transition: transform 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease); } .btn:hover { background: transparent; color: var(--ink); box-shadow: var(--shadow-md); transform: translateY(-2px); } .btn--ghost { background: transparent; color: var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--on-ink); } .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2rem; } .center .btn-row { justify-content: center; } /* App Store badge keeps its own proportions */ .badge-link { display: inline-block; border-radius: var(--radius-sm); transition: transform 0.2s var(--ease); } .badge-link:hover { transform: translateY(-2px); } .badge-link img { width: 168px; height: auto; } /* ---------- 6. Header and navbar ---------- */ .site-header { position: fixed; top: max(12px, env(safe-area-inset-top, 12px)); left: 0; right: 0; z-index: 100; display: flex; align-items: center; gap: 0.5rem; padding-left: max(12px, env(safe-area-inset-left, 12px)); padding-right: max(12px, env(safe-area-inset-right, 12px)); pointer-events: none; /* clicks fall through the empty strip */ } .site-header > * { pointer-events: auto; } /* Balances the toggle on the right so the nav pill stays optically centred in the viewport rather than pushed off to the left. */ .site-header::before { content: ""; flex: 0 0 44px; } .site-nav { display: flex; align-items: center; justify-content: center; gap: 0.15rem; flex: 0 1 auto; width: min(660px, 100%); min-width: 0; margin-inline: auto; min-height: var(--nav-h); padding: 0.35rem; background: var(--nav-bg); border: 1px solid var(--nav-line); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); } @supports not (backdrop-filter: blur(4px)) { .site-nav { background: var(--nav-bg-solid); } } .site-nav a { flex: 0 1 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 clamp(0.45rem, 2.4vw, 1.1rem); border-radius: var(--radius-pill); color: var(--ink-70); font-size: clamp(0.8rem, 0.72rem + 0.4vw, 0.95rem); font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color 0.2s var(--ease), color 0.2s var(--ease); } .site-nav a:hover { background: var(--nav-hover); color: var(--ink); } .site-nav a[aria-current="page"] { background: var(--ink); color: var(--on-ink); } /* Below this width the balancer costs more than the centring is worth */ @media (max-width: 620px) { .site-header::before { display: none; } .site-header { gap: 0.35rem; } .site-nav { flex: 1 1 auto; margin-inline: 0; } } /* ---------- 7. Theme toggle ---------- */ .theme-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: var(--nav-bg); border: 1px solid var(--nav-line); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); color: var(--ink-70); cursor: pointer; -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease); } @supports not (backdrop-filter: blur(4px)) { .theme-toggle { background: var(--nav-bg-solid); } } .theme-toggle:hover { background: var(--nav-hover); color: var(--ink); transform: translateY(-1px); } .theme-toggle .icon--moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon--sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon--moon { display: block; } /* --- The wave --- */ /* Preferred path: the browser snapshots the page, we flip the theme, and the new page is wiped in on a circle growing out of the top right corner, right where the button sits. Scoped to data-wave so no other view transition on the site inherits this animation. */ :root[data-wave="on"]::view-transition-old(root), :root[data-wave="on"]::view-transition-new(root) { animation: none; mix-blend-mode: normal; } :root[data-wave="on"]::view-transition-old(root) { z-index: 1; } :root[data-wave="on"]::view-transition-new(root) { z-index: 2; animation: theme-wave 620ms var(--ease) both; } /* Fallback for browsers without view transitions: a plain overlay in the incoming background colour sweeps across from the same corner, and the theme flips underneath it while it covers the screen. */ .theme-wave { position: fixed; inset: 0; z-index: 300; pointer-events: none; animation: theme-wave 300ms var(--ease) forwards, theme-wave-clear 380ms var(--ease) 320ms forwards; } /* The incoming page background, so these are the one pair of literals in the file: each one is the other theme's --sky, by definition. */ .theme-wave[data-to="dark"] { background: #0d131c; } .theme-wave[data-to="light"] { background: #b7e0ff; } /* 150% covers the far corner: from a corner the longest reach is about 141% of the radius a percentage resolves to. */ @keyframes theme-wave { from { clip-path: circle(0% at 100% 0%); } to { clip-path: circle(150% at 100% 0%); } } @keyframes theme-wave-clear { to { opacity: 0; } } /* ---------- 8. Hero ---------- */ .hero { position: relative; isolation: isolate; padding-block: clamp(1.5rem, 5vw, 3rem) var(--section-y); text-align: center; overflow: hidden; } .hero::before { content: ""; position: absolute; z-index: -1; top: -30%; left: 50%; width: min(900px, 130vw); aspect-ratio: 1; transform: translateX(-50%); background: radial-gradient( circle, var(--hero-glow) 0%, transparent 62% ); } .app-icon { width: clamp(88px, 22vw, 128px); aspect-ratio: 1; margin-inline: auto; border-radius: 23%; box-shadow: var(--shadow-lg); } .hero h1 { margin-top: clamp(1.5rem, 4vw, 2.5rem); } .hero .lede { margin-inline: auto; margin-top: 1.25rem; max-width: 46ch; } .hero .btn-row { justify-content: center; } /* ---------- 9. Showcase ---------- */ .showcase__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 4.5rem); align-items: center; } @media (min-width: 880px) { .showcase__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } /* Media on the right, copy on the left */ .showcase--flip .showcase__media { order: 2; } } /* On small screens the screenshot always leads */ @media (max-width: 879px) { .showcase__media { order: -1; } } .showcase__media { display: flex; justify-content: center; } .shot { width: min(100%, 300px); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); transition: transform 0.4s var(--ease); } .shot:hover { transform: translateY(-6px); } .showcase__copy { max-width: var(--measure); } .showcase__copy h2 + p { margin-top: 1rem; } .feature-list { margin-top: 1.5rem; padding: 0; list-style: none; display: grid; gap: 0.6rem; } .feature-list li { position: relative; padding-left: 1.75rem; font-size: var(--text-sm); color: var(--ink-70); } .feature-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.55; } /* Values grid (About page) */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(1rem, 3vw, 1.75rem); margin-top: 2.5rem; } /* Every light surface resets the text tokens back to card values, so it stays readable inside a dark section and in dark mode alike. */ .card, .plan, .form-card, .legal .toc, .legal .summary, .legal .note { --ink: var(--ink-card); --ink-70: var(--ink-card-70); --ink-55: var(--ink-card-55); --on-ink: var(--on-ink-card); --focus: var(--focus-card); color: var(--ink); } .card { padding: clamp(1.5rem, 4vw, 2.25rem); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .card h3 { font-size: var(--text-lg); } .card p { margin-top: 0.75rem; font-size: var(--text-sm); color: var(--ink-70); } /* ---------- 10. Pricing ---------- */ .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(1.25rem, 3vw, 2rem); max-width: 780px; margin: 2.5rem auto 0; } .plan { position: relative; padding: clamp(1.75rem, 4vw, 2.25rem); background: var(--surface); border: 2px solid transparent; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); transition: transform 0.25s var(--ease); } .plan:hover { transform: translateY(-4px); } .plan--featured { border-color: var(--ink); } .plan__badge { position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%); padding: 0.25rem 1rem; background: var(--ink); color: var(--on-ink); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; } .plan__name { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-55); } .plan__price { margin-top: 0.5rem; font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem); font-weight: 700; letter-spacing: -0.03em; color: var(--ink); } .plan__price span { font-size: var(--text-base); font-weight: 400; color: var(--ink-55); } .plan__note { font-size: var(--text-sm); color: var(--ink-55); } .plan .feature-list { margin-top: 1.5rem; } .plan .feature-list li { color: var(--ink-70); } .plan .feature-list li::before { content: "✓"; top: 0; width: auto; height: auto; background: none; border-radius: 0; color: var(--ink); font-weight: 700; opacity: 1; } .plan-fineprint { max-width: 62ch; margin: 2rem auto 0; font-size: var(--text-sm); } /* ---------- 11. Form ---------- */ .form-card { max-width: 680px; margin: 2.5rem auto 0; padding: clamp(1.5rem, 5vw, 2.75rem); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); text-align: left; } .field + .field { margin-top: 1.25rem; } .field label { display: block; margin-bottom: 0.4rem; font-size: var(--text-sm); font-weight: 500; } .field input, .field textarea { width: 100%; padding: 0.85rem 1rem; background: var(--field-bg); border: 1.5px solid var(--surface-line); border-radius: var(--radius-sm); font-size: 16px; /* stops iOS Safari zooming on focus */ transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease); } .field input:focus, .field textarea:focus { background: var(--surface); border-color: var(--ink); outline: none; } .field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .field textarea { min-height: 150px; resize: vertical; } .field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--danger); } .field-error { display: block; margin-top: 0.35rem; min-height: 1.2em; font-size: var(--text-xs); color: var(--danger); } /* Honeypot: hidden from people, visible to naive bots */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-actions { margin-top: 1.75rem; } .form-status { margin-top: 1rem; font-size: var(--text-sm); } .form-status[data-state="error"] { color: var(--danger); } .form-status[data-state="success"] { color: var(--ok); } .form-done { padding: 2rem 0; text-align: center; } .form-done h3 { font-size: var(--text-lg); } .form-done p { margin-top: 0.5rem; color: var(--ink-70); } .contact-direct { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 2rem; margin-top: 1.5rem; font-size: var(--text-sm); } .contact-direct a { text-underline-offset: 4px; } /* ---------- 12. Legal pages ---------- */ .legal { width: min(100% - (var(--gutter) * 2), 72ch); margin-inline: auto; padding-bottom: var(--section-y); } .legal h1 { font-size: var(--text-2xl); } .legal h2 { margin-top: 3rem; font-size: var(--text-xl); } .legal h3 { margin-top: 2rem; font-size: var(--text-lg); } .legal p, .legal ul { margin-top: 1rem; font-size: var(--text-sm); line-height: 1.8; color: var(--ink-70); } .legal ul { padding-left: 1.25rem; } .legal li + li { margin-top: 0.5rem; } .legal hr { margin-top: 1.5rem; border: 0; border-top: 1px solid var(--surface-line); } .legal a { color: var(--ink); text-underline-offset: 3px; } .legal .updated { font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-55); } .legal .toc { margin-top: 2rem; padding: 1.25rem 1.5rem; background: var(--surface-soft); border-radius: var(--radius); list-style: none; } .legal .toc a { font-weight: 500; } .legal .summary { margin-top: 2.5rem; padding: clamp(1.25rem, 4vw, 2rem); background: var(--surface-soft); border-radius: var(--radius); } .legal .summary h2 { margin-top: 0; font-size: var(--text-lg); } .legal .summary p:first-of-type { margin-top: 0.75rem; } .legal .note { margin-top: 2.5rem; padding: 1.25rem 1.5rem; border-left: 3px solid var(--ink); background: var(--surface-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } /* Marks a value the studio still has to fill in before publishing. Search the HTML for "todo" and every one of them lights up. */ .todo { padding: 0.1em 0.4em; background: #ffeb00; border-radius: 4px; font-weight: 600; color: #091057; } /* ---------- 13. Footer ---------- */ site-footer { display: block; background: var(--night); color: var(--white); } /* Shown only when JavaScript is off, so the page never ends on nothing */ .footer-fallback { padding: 2.5rem var(--gutter); text-align: center; font-size: var(--text-sm); } .footer-fallback a { color: var(--white); text-underline-offset: 4px; } .site-footer { position: relative; isolation: isolate; background: var(--night); color: var(--white); text-align: center; padding: clamp(3rem, 8vw, 4.5rem) var(--gutter) clamp(7rem, 20vw, 11rem); overflow: hidden; } .site-footer :focus-visible { outline-color: var(--cyan); } .social-row { display: flex; justify-content: center; gap: 1rem; } .social-row a { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-pill); transition: background-color 0.2s var(--ease), transform 0.2s var(--ease); } .social-row a:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); } .social-row img { width: 28px; height: 28px; object-fit: contain; } .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; margin-top: 2rem; font-size: var(--text-sm); } .footer-links a { color: rgba(255, 255, 255, 0.78); text-decoration: none; padding: 0.25rem 0; transition: color 0.2s var(--ease); } .footer-links a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; } .footer-note { margin-top: 2rem; font-size: var(--text-sm); color: rgba(255, 255, 255, 0.8); } .footer-fine { margin-top: 0.5rem; font-size: var(--text-xs); color: rgba(255, 255, 255, 0.55); } .waves { position: absolute; z-index: -1; left: 0; bottom: 0; width: 100%; height: clamp(70px, 16vw, 170px); } .waves use { animation: wave-drift 12s linear infinite; } .waves use:nth-child(1) { animation-duration: 11s; animation-delay: -2s; } .waves use:nth-child(2) { animation-duration: 8s; animation-delay: -3s; } .waves use:nth-child(3) { animation-duration: 6s; animation-delay: -4s; } @keyframes wave-drift { 0% { transform: translateX(-90px); } 100% { transform: translateX(85px); } } /* ---------- 14. Motion and print ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .shot:hover, .btn:hover, .plan:hover, .badge-link:hover, .theme-toggle:hover, .social-row a:hover { transform: none; } } @media print { .site-header, .site-footer, .theme-toggle, .btn-row, .skip-link { display: none !important; } /* Printers drop background colours by default, so a dark section would otherwise print white text onto white paper. */ :root, :root[data-theme="dark"], .section--dark { --ink: #000000; --ink-70: #222222; --ink-55: #444444; --on-ink: #ffffff; --ink-card: #000000; --ink-card-70: #222222; --ink-card-55: #444444; } body { background: #fff; color: #000; } .section { background: none !important; } main { padding-top: 0; } }