/* Lisa Ng — "Modern Clean" light theme Design language: near-black on white, oversized bold sans-serif, generous whitespace, one accent, alternating text/image rhythm. Legibility first — a large share of visitors are 45-65 on phones. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --ink: #10131a; /* headlines */ --ink-soft: #4a5261; /* body */ --ink-faint: #6d7585; /* meta — darkened from #8b93a3, which measured only 3.09:1 on white and failed WCAG AA for body text. This file's own note says many visitors are 45-65 on phones, and this is the smallest text we set. */ --paper: #ffffff; --paper-alt: #f5f6f8; /* section banding */ --line: #e4e7ec; --accent: #111318; /* near-black: monochrome, modern, timeless */ --accent-dk: #000000; --accent-tint:#f0f1f4; --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --radius: 10px; --shadow: 0 1px 2px rgba(16,19,26,.04), 0 8px 28px rgba(16,19,26,.07); --shadow-lg: 0 2px 4px rgba(16,19,26,.04), 0 20px 50px rgba(16,19,26,.12); --band-dark-bg: #10131a; /* the near-black stat/CTA bands */ --on-dark: #ffffff; } /* ---------- Dark theme ---------- Every colour here is derived from the light palette rather than inverted. A straight inversion turns the near-black accent into pure white, which glares on a dark page and loses the calm the monochrome look depends on. theme.js sets data-theme on before first paint, so there is no flash. It defaults to the device preference and remembers a manual choice. */ :root[data-theme="dark"] { /* Graphite, not black. A near-black page makes the photography look like it is floating in a void and the whole thing feels heavy; a lighter cool grey keeps the calm of the light theme and lets the images sit IN the page. Every value keeps the same slight blue bias as the light palette so the two themes read as one design rather than two. */ --ink: #f2f4f8; --ink-soft: #c3c9d6; --ink-faint: #959cac; --paper: #23272f; /* cards and surfaces */ --paper-alt: #2b303a; /* section banding */ --line: #3a404c; --accent: #f2f4f8; /* buttons invert: light pill on a grey page */ --accent-dk: #ffffff; --accent-tint:#313745; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.34); --shadow-lg: 0 2px 4px rgba(0,0,0,.3), 0 20px 50px rgba(0,0,0,.45); --band-dark-bg: #171a21; /* deeper than the page, so bands still read */ --on-dark: #f2f4f8; } :root[data-theme="dark"] body { background: #1c2027; } /* Buttons: the accent flips to light, so their text has to flip to dark. */ :root[data-theme="dark"] .btn-accent { color: #10131a; } :root[data-theme="dark"] .btn-accent:hover { color: #000; } /* The logo is a black monogram on transparent. Inverting is cleaner than swapping the file on fourteen pages, and it is monochrome so it inverts exactly to white. */ :root[data-theme="dark"] .brand-mark, :root[data-theme="dark"] .foot-in .brand-mark { filter: invert(1); } /* Photographs shouldn't be dimmed — they're the product. Only the decorative tint blocks get toned down. */ :root[data-theme="dark"] .hero-shot::after { opacity: .5; } /* ---------- Dark mode: fix everything that assumed a light page ---------- The real hazard, and the one Bill called out: several rules set `background: var(--ink)` with a hardcoded `color: #fff`. In dark mode --ink becomes near-WHITE, so those would render white text on a white pill and vanish. Every one of them is corrected here rather than left to chance. Rule of thumb applied throughout: anything filled with --ink or --accent gets DARK text in dark mode; anything hardcoded #fff as a surface becomes --paper. */ :root[data-theme="dark"] { /* filled pills, badges and buttons - text must go dark */ --on-fill: #10131a; } :root[data-theme="dark"] .btn-dark, :root[data-theme="dark"] .st b, :root[data-theme="dark"] .sv b, :root[data-theme="dark"] .done .tick, :root[data-theme="dark"] .nav-sub a[aria-current="page"], :root[data-theme="dark"] .lang-pick a[aria-current="true"], /* .feature-tag and .feature-cta are handled at their own definitions with literal colours — they sit on a photo, so they don't follow the theme. The only leftover here is .sound-toggle, which belongs to the removed background music and now exists solely for the archived navy.html. */ :root[data-theme="dark"] .sound-toggle { background: var(--paper); color: var(--ink); } /* .sold-badge has TWO forms needing opposite treatment. On a photo-less card it is transparent text sitting directly on the dark card, so it must be LIGHT. On a photo card it is a white pill, so it must be DARK. Lumping them together is what made "REPRESENTED BUYER" unreadable. General rule first, specific override second. */ :root[data-theme="dark"] .sold-badge { color: var(--ink-soft); } :root[data-theme="dark"] .sold-card.has-photo .sold-badge { color: var(--on-fill); } :root[data-theme="dark"] .btn-dark:hover { background: #fff; color: #000; } /* surfaces that were hardcoded white */ :root[data-theme="dark"] .nav-links, :root[data-theme="dark"] .sub-form input[type="email"], :root[data-theme="dark"] .sub-form input[type="text"], :root[data-theme="dark"] .sub-form select, :root[data-theme="dark"] .sub-ok { background: var(--paper); color: var(--ink); } :root[data-theme="dark"] input[type="range"]::-webkit-slider-thumb { border-color: var(--paper); } :root[data-theme="dark"] input[type="range"]::-moz-range-thumb { border-color: var(--paper); } :root[data-theme="dark"] .sold-card:hover { border-color: var(--ink-faint); } /* the amber "key point" notice was cream with dark text */ :root[data-theme="dark"] .notice-key { background: #2a2317; } :root[data-theme="dark"] .notice { color: var(--ink-soft); } /* form fields */ :root[data-theme="dark"] .fg input, :root[data-theme="dark"] .fg select, :root[data-theme="dark"] .fg textarea, :root[data-theme="dark"] .money input { background: var(--paper-alt); color: var(--ink); border-color: var(--line); } :root[data-theme="dark"] .fg input::placeholder, :root[data-theme="dark"] .money input::placeholder { color: var(--ink-faint); } /* the near-black bands stay dark in both themes, so their white text is fine — but they need to stay distinguishable from a dark page */ :root[data-theme="dark"] .band-dark { background: var(--band-dark-bg); } /* THE NAV BAR. It was rgba(255,255,255,.92) — a hardcoded translucent WHITE — so in dark mode the page went dark and the bar stayed light. That is what made the logo "disappear": I had inverted it to white, and white on a white bar is nothing. The brand name and phone number were invisible for the same reason. Fix the bar and all three come back. */ :root[data-theme="dark"] .nav { background: rgba(28,32,39,.9); } :root[data-theme="dark"] .lang-pick { background: var(--paper-alt); } :root[data-theme="dark"] .lang-pick a:hover { background: var(--line); } /* Turnstile renders its own widget; tell it to match */ :root[data-theme="dark"] .cf-turnstile { color-scheme: dark; } /* ---------- Photos fade in and blend into the page ---------- Two separate things Bill asked for: 1. Fade IN. Pure CSS animation rather than a JS load handler, so it always ends at opacity 1 — if anything fails, the image is simply visible. A JS approach that starts at 0 can leave a photo hidden forever. 2. Blend. The big Covina photo previously met the section above it with a hard horizontal edge, which is what the red line in Bill's screenshot points at. A mask feathers the top and bottom into the page colour so it melts rather than butts up against it. */ @keyframes photoIn { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: no-preference) { .hero-shot img, .row-media img, .sold-photo img, .strip img, .feature-sale-media img { animation: photoIn .9s ease-out both; } /* the feature photo already runs a slow Ken Burns zoom, so it needs both */ .feature-sale-media img { animation: photoIn 1.1s ease-out both, featureZoom 30s ease-in-out 1.1s infinite alternate; } } /* Feather the top and bottom edges of the feature photo into the page. */ .feature-sale-media { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%); } /* The dark scrim on top of the photo has to feather with it, or the scrim edge becomes the hard line instead. */ .feature-sale::before { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%); } /* Lisa's portrait gets a soft edge too, so it sits in the page rather than on it. */ .hero-shot img { transition: filter .4s; } /* the motto sheen was tuned for light grey text on white */ :root[data-theme="dark"] .reveal.in-view .motto-em { background-image: linear-gradient(100deg, var(--ink-faint) 38%, #9aa3b4 47%, #ffffff 50%, #9aa3b4 53%, var(--ink-faint) 62%); } /* ---------- Local temperature + city in the nav ---------- Typographic, not a coloured weather icon. A blue raincloud or a yellow sun would be the only chroma anywhere in a deliberately monochrome design, and it would read as a widget bolted on rather than part of the page. Hidden until the data actually arrives (the .on class), and hidden entirely below 900px — this nav has overflowed before and pushed the language switcher off-screen, and a nice-to-have must not be what breaks it again. */ .nav-wx { display: none; align-items: center; gap: 7px; white-space: nowrap; font-size: .8rem; color: var(--ink-faint); flex: none; } .nav-wx b { color: var(--ink); font-weight: 700; font-size: .88rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .nav-wx span::before { content: "·"; margin-right: 7px; opacity: .55; } /* Shown as soon as the data arrives, at every width. It was gated at 900px to protect the nav from overflowing, but that made "I can't see it" impossible to tell apart from a genuine failure. The city name is dropped on narrow screens instead, which saves the space without hiding the whole thing. */ .nav-wx.on { display: flex; } @media (max-width: 700px) { .nav-wx span { display: none; } /* keep the temperature, drop the city */ } @media (max-width: 420px) { .nav-wx.on { display: none; } } /* ---------- Theme toggle button ---------- */ .theme-toggle { display: grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0; background: none; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-soft); cursor: pointer; transition: border-color .18s, color .18s, background .18s; } .theme-toggle:hover { border-color: var(--ink); color: var(--ink); } .theme-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .theme-toggle svg { width: 17px; height: 17px; } /* One button, two icons: show the moon in light mode (what you'd switch TO), the sun in dark mode. */ .theme-toggle .i-moon { display: block; } .theme-toggle .i-sun { display: none; } :root[data-theme="dark"] .theme-toggle .i-moon { display: none; } :root[data-theme="dark"] .theme-toggle .i-sun { display: block; } @media (max-width: 380px) { .theme-toggle { width: 34px; height: 34px; } } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); font-size: 17px; line-height: 1.6; color: var(--ink-soft); background: var(--paper); overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } .hidden { display: none !important; } .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; } .narrow { max-width: 780px; } /* ---------- Type scale: big, tight, confident ---------- */ h1, h2, h3 { color: var(--ink); letter-spacing: -.025em; line-height: 1.08; font-weight: 700; } h1 { font-size: clamp(2.4rem, 6.2vw, 4.6rem); } h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); letter-spacing: -.028em; } h3 { font-size: 1.18rem; letter-spacing: -.015em; line-height: 1.3; } .lede { font-size: clamp(1.06rem, 1.7vw, 1.32rem); color: var(--ink-soft); } .eyebrow { display: inline-block; font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 18px; } /* ---------- Reveal ---------- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.75,.25,1); } .reveal.in-view { opacity: 1; transform: none; } .reveal-stagger > * { opacity: 0; transform: translateY(18px); } .reveal-stagger.in-view > * { animation: up .7s cubic-bezier(.2,.75,.25,1) both; animation-delay: calc(var(--i,0) * 90ms); } @keyframes up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 9px; padding: 15px 28px; border-radius: 100px; border: 0; cursor: pointer; font-family: var(--font); font-size: 1rem; font-weight: 600; text-decoration: none; transition: background .2s, transform .14s, box-shadow .2s, color .2s; } .btn-dark { background: var(--ink); color: #fff; } .btn-dark:hover { background: #000; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16,19,26,.22); } .btn-accent { background: var(--accent); color: #fff; } .btn-accent:hover { background: var(--accent-dk); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(17,19,24,.26); } .btn-line { background: transparent; color: var(--ink); border: 1.5px solid var(--line); } .btn-line:hover { border-color: var(--ink); } .btn svg { width: 17px; height: 17px; } .btn-full { width: 100%; justify-content: center; } /* ---------- Nav ---------- */ .nav { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .nav-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; } .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; } .brand svg { width: 30px; height: 30px; color: var(--accent); flex: none; } .brand b { display: block; color: var(--ink); font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; } .brand span { display: block; color: var(--ink-faint); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; } .nav-right { display: flex; align-items: center; gap: 10px; } .nav-phone { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap; } @media (max-width: 620px) { .nav-phone { display: none; } } /* ---------- Hero ---------- */ .hero { padding: clamp(48px, 8vw, 96px) 0 0; } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .hero h1 { margin-bottom: 20px; } .hero h1 .rot { color: var(--accent); display: inline-block; } .hero .lede { margin-bottom: 30px; max-width: 40ch; } .hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; } .hero-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; padding-top: 24px; border-top: 1px solid var(--line); } .hero-meta div { font-size: .9rem; color: var(--ink-soft); } .hero-meta b { color: var(--ink); font-weight: 700; } .hero-shot { position: relative; } .hero-shot img { width: 100%; border-radius: 18px; box-shadow: var(--shadow-lg); } .hero-shot::after { content: ""; position: absolute; inset: auto -18px -18px auto; width: 62%; height: 62%; background: var(--accent-tint); border-radius: 18px; z-index: -1; } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero .lede { max-width: none; } .hero-shot { order: -1; max-width: 460px; margin: 0 auto; } } /* ---------- Section rhythm ---------- */ section { padding: clamp(56px, 9vw, 116px) 0; } .band { background: var(--paper-alt); } .band-dark { background: var(--ink); color: rgba(255,255,255,.72); } .band-dark h2, .band-dark h3 { color: #fff; } .band-dark .eyebrow { color: rgba(255,255,255,.55); } /* These bands are near-black in BOTH themes, so a button filled with --accent disappears into them: in light mode --accent is #111318 and the band is #10131a, which made the primary call to action an invisible rectangle with a white label floating on it. On every page with a CTA band. Buttons inside a dark band are always light with dark text, in both themes. */ .band-dark .btn-accent, .band-dark .btn-dark { background: #fff; color: #10131a; border-color: #fff; } .band-dark .btn-accent:hover, .band-dark .btn-dark:hover { background: #e8eaef; color: #000; box-shadow: 0 10px 30px rgba(0,0,0,.35); } /* the secondary outline button needs a visible edge on a dark band too */ .band-dark .btn-line { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); } .band-dark .btn-line:hover { border-color: #fff; background: rgba(255,255,255,.08); } .head { max-width: 720px; margin-bottom: clamp(34px, 5vw, 60px); } .head.center { margin-left: auto; margin-right: auto; text-align: center; } .head h2 { margin-bottom: 14px; } /* ---------- Alternating feature rows ---------- */ .row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 76px); align-items: center; } .row + .row { margin-top: clamp(52px, 8vw, 104px); } .row.flip .row-media { order: -1; } .row-media img { border-radius: 18px; box-shadow: var(--shadow); } .row-text h2 { margin-bottom: 16px; } .row-text p { margin-bottom: 14px; } .checks { list-style: none; margin-top: 20px; } .checks li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .98rem; } .checks li:last-child { border-bottom: 0; } .checks svg { width: 20px; height: 20px; flex: none; color: var(--accent); margin-top: 2px; } @media (max-width: 860px) { .row { grid-template-columns: 1fr; } .row.flip .row-media { order: 0; } } /* ---------- Cards ---------- */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 26px); } .card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 32px 28px; transition: transform .25s, box-shadow .25s, border-color .25s; } .card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; } .card .ico { width: 46px; height: 46px; border-radius: 12px; margin-bottom: 18px; display: flex; align-items: center; justify-content: center; background: var(--accent-tint); color: var(--accent); } .card .ico svg { width: 22px; height: 22px; } .card h3 { margin-bottom: 9px; } .card p { font-size: .96rem; } @media (max-width: 860px) { .cards { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } } /* ---------- Steps ---------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3.4vw, 44px); counter-reset: st; } .st { position: relative; } .st b { counter-increment: st; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; margin-bottom: 16px; background: var(--ink); color: #fff; font-size: .95rem; font-weight: 700; } .st b::before { content: counter(st); } .st h3 { margin-bottom: 8px; } .st p { font-size: .96rem; } @media (max-width: 860px) { .steps { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } } /* ---------- Form ---------- */ .formcard { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: clamp(24px, 3.4vw, 40px); box-shadow: var(--shadow-lg); } .formcard h2 { font-size: 1.6rem; margin-bottom: 6px; } .formcard .kick { color: var(--ink-faint); font-size: .9rem; margin-bottom: 24px; } .hp { position: absolute; left: -9999px; } .fg { margin-bottom: 16px; } .fg label { display: block; font-size: .88rem; font-weight: 600; color: var(--ink); margin-bottom: 7px; } .fg input, .fg select { width: 100%; padding: 13px 15px; min-height: 50px; font-family: var(--font); font-size: 1rem; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius); transition: border-color .18s, box-shadow .18s; } .fg input:focus, .fg select:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); } .fg input::placeholder { color: #aeb5c1; } .fr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .consent { display: flex; gap: 11px; align-items: flex-start; font-size: .8rem; color: var(--ink-faint); margin: 6px 0 18px; cursor: pointer; line-height: 1.5; } .consent input { width: 19px; height: 19px; min-height: 0; flex: none; margin-top: 2px; accent-color: var(--accent); } .fine { font-size: .74rem; color: var(--ink-faint); text-align: center; margin-top: 15px; line-height: 1.55; } .fine a { color: var(--accent); } .err { margin-top: 12px; color: #c0392b; font-size: .9rem; text-align: center; } .done { text-align: center; padding: 44px 16px; } .done .tick { width: 60px; height: 60px; margin: 0 auto 20px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; } .done h3 { font-size: 1.55rem; margin-bottom: 12px; } .done .sig { color: var(--ink-faint); margin-top: 14px; } @media (max-width: 380px) { .fr { grid-template-columns: 1fr; } } /* ---------- Stats ---------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 20px; text-align: center; } .stats .n { font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 700; color: #fff; letter-spacing: -.03em; line-height: 1; margin-bottom: 8px; } .stats .l { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); } @media (max-width: 620px) { .stats { grid-template-columns: 1fr 1fr; } } /* ---------- Reviews ---------- */ .revs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(16px, 2.2vw, 24px); } .rev { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 28px 26px; display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; } .rev:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .rev .stars { color: #e8a33d; font-size: .95rem; letter-spacing: 2px; margin-bottom: 14px; } .rev p { font-size: .97rem; color: var(--ink-soft); flex: 1; margin-bottom: 18px; } .rev .who { font-size: .82rem; color: var(--ink-faint); font-weight: 600; padding-top: 14px; border-top: 1px solid var(--line); } /* ---------- Photo strip ---------- */ .strip { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; padding: 0; } .strip figure { position: relative; aspect-ratio: 1/1; overflow: hidden; } .strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.3,1); } .strip figure:hover img { transform: scale(1.06); } @media (max-width: 700px) { .strip { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } .strip figure:nth-child(5) { display: none; } } /* ---------- CTA ---------- */ .cta { text-align: center; } .cta .face { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: top center; margin: 0 auto 22px; border: 3px solid rgba(255,255,255,.16); } .cta h2 { margin-bottom: 14px; } .cta p { margin-bottom: 28px; } .cta .alt { display: block; margin-top: 20px; font-size: .92rem; color: rgba(255,255,255,.6); } .cta .alt a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* ---------- Footer ---------- */ .foot { background: var(--paper-alt); padding: 52px 0 40px; border-top: 1px solid var(--line); } .foot-in { text-align: center; } .foot svg { width: 30px; height: 30px; color: var(--accent); margin: 0 auto 18px; } .foot p { font-size: .88rem; color: var(--ink-soft); margin-bottom: 5px; } .foot p strong { color: var(--ink); } .foot a { color: var(--ink-soft); } .foot-links { margin: 20px 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; } .foot-links a { font-size: .88rem; text-decoration: none; font-weight: 500; } .foot-links a:hover { color: var(--accent); } .foot-legal { font-size: .76rem; color: var(--ink-faint); line-height: 1.7; margin-top: 16px; } .eho { border: 1px solid currentColor; border-radius: 2px; padding: 0 3px; font-size: .82em; } /* ---------- Sound toggle ---------- */ .sound-toggle { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px 10px 13px; border-radius: 100px; cursor: pointer; background: rgba(255,255,255,.94); border: 1px solid var(--line); color: var(--ink); font-family: var(--font); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; backdrop-filter: blur(10px); box-shadow: var(--shadow); transition: border-color .2s, transform .16s; } .sound-toggle:hover { border-color: var(--accent); transform: translateY(-2px); } .sound-bars { display: flex; align-items: flex-end; gap: 2.5px; height: 13px; } .sound-bars i { display: block; width: 2.5px; height: 3px; border-radius: 2px; background: var(--accent); transition: height .3s; } .sound-toggle.playing .sound-bars i { animation: eq 1.15s ease-in-out infinite; } .sound-toggle.playing .sound-bars i:nth-child(2) { animation-delay: .18s; } .sound-toggle.playing .sound-bars i:nth-child(3) { animation-delay: .36s; } .sound-toggle.playing .sound-bars i:nth-child(4) { animation-delay: .54s; } @keyframes eq { 0%,100% { height: 3px; } 50% { height: 13px; } } @media (max-width: 600px) { .sound-toggle { right: 12px; bottom: 12px; } .sound-label { display: none; } } /* ---------- Scroll progress ---------- */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--accent); z-index: 999; transition: width .1s linear; } /* ---------- A11y / motion ---------- */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; } } /* ============================================================ Headline: three fixed lines so the rotating city can never reflow the sentence, change the headline height, or shift the photo. The city sits OUT of layout flow inside a fixed-height line — its width is invisible to the layout. ============================================================ */ .hero h1 .hl { display: block; } .rot-line { position: relative; height: 1.06em; overflow: visible; } .rot-slot { position: absolute; left: 0; right: 0; top: 0; text-align: inherit; line-height: 1.06; } .rot { display: inline-block; white-space: nowrap; color: var(--accent); letter-spacing: -.025em; transition: opacity .32s cubic-bezier(.3,.7,.3,1), transform .32s cubic-bezier(.3,.7,.3,1); } .rot.swap-out { opacity: 0; transform: translateY(-34%); } .rot.swap-in { opacity: 0; transform: translateY(34%); } /* Photo can never move: the hero column reserves its own height */ @media (min-width: 901px) { .hero-shot img { aspect-ratio: 10 / 11; object-fit: cover; object-position: 50% 12%; } } @media (prefers-reduced-motion: reduce) { .rot { transition: none !important; } } /* ---------- Motto band ---------- */ .motto-band { padding: clamp(52px, 8vw, 96px) 0; background: var(--paper); text-align: center; position: relative; } .motto-band::before, .motto-band::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: min(420px, 60%); height: 1px; background: var(--line); } .motto-band::before { top: 0; } .motto-band::after { bottom: 0; } .motto-quote { font-size: clamp(1.65rem, 4.2vw, 3rem); font-weight: 700; color: var(--ink); letter-spacing: -.03em; line-height: 1.14; margin: 8px 0 18px; text-wrap: balance; } .motto-em { color: var(--ink-faint); } .motto-cite { font-style: normal; font-size: .92rem; color: var(--ink-faint); letter-spacing: .02em; } /* ---------- Motto reveal ---------- Each line rises from behind a hard edge, staggered, then a single slow sheen crosses the second line. Deliberately NOT a flash: rapidly flashing content is a photosensitivity risk and WCAG limits it, so this is one slow pass of light instead — same "expensive" feel, no strobing. Everything below is additive on top of the static design. If the animation never runs — reduced motion, old browser, JS blocked — the motto simply reads as it does now. */ .motto-line { display: block; overflow: hidden; padding-bottom: .08em; } .motto-line > span { display: inline-block; will-change: transform; } @media (prefers-reduced-motion: no-preference) { /* hidden only once we know the reveal can run */ .reveal:not(.in-view) .motto-line > span { transform: translateY(115%); } .reveal:not(.in-view) .motto-cite { opacity: 0; } .reveal.in-view .motto-line > span { animation: motto-rise 1s cubic-bezier(.16, 1, .3, 1) both; } .reveal.in-view .motto-line:nth-child(2) > span { animation-delay: .13s; } .reveal.in-view .motto-cite { animation: motto-fade .7s ease-out .55s both; } /* the sheen: one pass across the grey line, after it has landed */ .reveal.in-view .motto-em { background-image: linear-gradient(100deg, var(--ink-faint) 38%, #cfd3da 47%, #eef0f3 50%, #cfd3da 53%, var(--ink-faint) 62%); background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: motto-rise 1s cubic-bezier(.16, 1, .3, 1) .13s both, motto-sheen 1.9s ease-out 1s both; } /* the hairlines draw outward from the centre as the band arrives */ .motto-band:has(.in-view)::before, .motto-band:has(.in-view)::after { animation: motto-rule 1.1s ease-out both; } .motto-band:has(.reveal:not(.in-view))::before, .motto-band:has(.reveal:not(.in-view))::after { width: 0; } } @keyframes motto-rise { from { transform: translateY(115%); } to { transform: translateY(0); } } @keyframes motto-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes motto-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } } @keyframes motto-rule { from { width: 0; } to { width: min(420px, 60%); } } /* ---------- Calculators dropdown ---------- Five calculators would never fit as nav tabs, and the nav has already overflowed once and pushed the language switcher off-screen. Opens on hover for mouse users and on tap for touch; the button is a real