/* ============================================================ SATVIK AVAAS — Green, Gold & White Shared design system. Loaded by all six pages. NO ANIMATION. This site deliberately has no scroll choreography, no entrance reveals and no parallax. Content is present and readable the moment it renders. The only motion permitted is a short colour/border change on hover, which is interface feedback rather than decoration. Two rules that keep this from cheapening: 1. Gold is NEVER a large fill. Hairlines, small caps, dividers and thin accents only. Gold used as a big fill is what makes a brand read cheap. 2. Gold does not meet contrast for small text on white, so small copy uses --gold-deep. See the light-band overrides. TOKEN NAMES ARE LEGACY. The palette moved from graphite to green, but the variable and class names (--graphite, --platinum, .on-graphite) were kept so that the per-page inline styles across all six pages keep resolving. Read --graphite as "deep green" and --platinum as "gold". NOTE ON THEMING: one committed art direction, deliberately NO prefers-color-scheme override of brand tokens. A previous build inverted its dark panels into unreadable pale-on-pale because tokens were redefined in a dark-mode query. Do not reintroduce one. ============================================================ */ :root{ /* Deep greens — dark surfaces (name kept, value now green) */ --graphite: #12332A; --graphite-raised: #1B4436; --graphite-deep: #0D2620; --slate: #2E7359; /* mid green, 5.66:1 on white */ /* Gold accents (name kept, value now gold) */ --platinum: #C9A227; /* 5.68:1 on deep green */ --platinum-dim: #CFC9B4; /* secondary text on green, 8.25:1 */ /* Small gold text. Must clear 4.5:1 on BOTH white and the ivory band; #8A6D1F passed on white (4.9) but only reached 4.38 on ivory. */ --gold-deep: #7E6219; /* 5.82:1 on white, 5.20:1 on ivory */ --gold-soft: #E3D6A8; /* Whites */ --paper: #FFFFFF; --paper-alt: #F5F2E9; /* warm ivory band */ --surface: #FDFCF8; --green-pale: #E9F1EC; --ink: #12332A; /* deep green text, 13.7:1 on white */ --ink-muted: #4A5A52; /* 7.31:1 on white */ --hairline-dark: rgba(255,255,255,.16); --hairline-light: rgba(18,51,42,.14); /* Fixed always-dark panel tokens. Never redefine these. */ --panel-bg: #12332A; --panel-bg-raised: #1B4436; --panel-fg: #FFFFFF; --panel-fg-muted: #CFC9B4; --panel-accent: #C9A227; --font-display: "Newsreader", Georgia, "Times New Roman", serif; --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif; --font-deva: "Noto Serif Devanagari", var(--font-display); --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 48px; --space-6: 72px; --space-7: 112px; --space-8: 160px; --radius: 3px; --radius-lg: 8px; --container: 1240px; --measure: 62ch; --ease-out-quart: cubic-bezier(.25,1,.5,1); --ease-out-expo: cubic-bezier(.16,1,.3,1); --nav-h: 76px; } *{ box-sizing: border-box; } html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body{ margin:0; /* White is now the base register; green bands are the accent. */ background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; /* MUST be clip, not hidden. overflow-x:hidden forces the browser to compute overflow-y:auto here, which turns into a scroll container. ScrollTrigger then reads body.scrollTop (permanently 0) instead of the real page offset, so every pin and scrub silently freezes at progress 0. clip contains overflow without creating a scroll container. */ overflow-x: clip; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } } img{ max-width:100%; display:block; } a{ color: inherit; text-decoration: none; } button{ font-family: inherit; cursor: pointer; border: none; background: none; } /* ---------- Layout ---------- */ .wrap{ width:100%; max-width: var(--container); margin:0 auto; padding: 0 var(--space-3); } @media (min-width: 768px){ .wrap{ padding: 0 var(--space-5); } } @media (min-width: 1280px){ .wrap{ padding: 0 var(--space-6); } } .band{ padding: var(--space-8) 0; position: relative; } .band--tight{ padding: var(--space-7) 0; } @media (max-width: 767px){ .band{ padding: var(--space-7) 0; } .band--tight{ padding: var(--space-6) 0; } } /* Tonal registers — open graphite, breathe to paper, close graphite */ .on-graphite{ background: var(--graphite); color: var(--paper); } .on-graphite-deep{ background: var(--graphite-deep); color: var(--paper); } .on-paper{ background: var(--paper); color: var(--ink); } .on-paper-alt{ background: var(--paper-alt); color: var(--ink); } .on-surface{ background: var(--surface); color: var(--ink); } /* Light is the default, so dark bands are what override. (Previously inverted: headings defaulted to white, which would now render invisible on the white base.) */ .on-graphite h1,.on-graphite h2,.on-graphite h3,.on-graphite h4, .on-graphite-deep h1,.on-graphite-deep h2,.on-graphite-deep h3,.on-graphite-deep h4, .enquiry h1,.enquiry h2,.enquiry h3,.enquiry h4, .foot h1,.foot h2,.foot h3,.foot h4{ color: var(--paper); } /* ---------- Type ---------- */ h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 400; letter-spacing: -0.021em; line-height: 1.04; margin: 0; color: var(--ink); text-wrap: balance; } .d1{ font-size: clamp(3rem, 8.2vw, 7.6rem); letter-spacing:-0.032em; } .d2{ font-size: clamp(2.4rem, 5.4vw, 4.6rem); letter-spacing:-0.028em; } .d3{ font-size: clamp(1.9rem, 3.4vw, 3rem); letter-spacing:-0.024em; } .d4{ font-size: clamp(1.45rem, 2.1vw, 2rem); line-height:1.16; } .serif-italic{ font-style: italic; } /* Gold: hairlines, small caps and dividers only. Never a large fill. On white it uses --gold-deep, which clears 4.5:1 for small text. */ .platinum{ color: var(--gold-deep); } .on-graphite .platinum, .on-graphite-deep .platinum, .enquiry .platinum, .foot .platinum{ color: var(--platinum); } p{ margin:0; } .lede{ font-size: clamp(1.08rem, 1.4vw, 1.3rem); line-height: 1.62; color: var(--ink-muted); max-width: var(--measure); font-weight: 400; } .on-graphite .lede, .on-graphite-deep .lede, .enquiry .lede, .foot .lede{ color: var(--platinum-dim); } .body-text{ max-width: var(--measure); color: var(--ink-muted); } .on-graphite .body-text, .on-graphite-deep .body-text, .enquiry .body-text, .foot .body-text{ color: var(--platinum-dim); } /* Eyebrow — small caps, used sparingly (about one section in three) */ .eyebrow{ font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); display: block; margin-bottom: var(--space-3); } .on-graphite .eyebrow, .on-graphite-deep .eyebrow, .enquiry .eyebrow, .foot .eyebrow{ color: var(--platinum); } .num{ font-variant-numeric: tabular-nums lining-nums; } .rule{ height:1px; background: var(--hairline-light); border:0; margin:0; } .on-graphite .rule, .on-graphite-deep .rule, .enquiry .rule, .foot .rule{ background: var(--hairline-dark); } /* Devanagari wordmark — a single refined mark, never body copy */ .deva{ font-family: var(--font-deva); font-weight:400; letter-spacing:0; } /* ---------- Buttons ---------- Dual CTA at equal weight: "Request a consultation" and "WhatsApp" use identical size and treatment, differentiated only by label and glyph. No saturated brand-green fill. */ .btn{ display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 54px; padding: 16px 30px; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; border-radius: var(--radius); border: 1px solid rgba(18,51,42,.28); color: var(--ink); background: transparent; /* Hover feedback only. Kept short and colour-only: this is interface affordance, not decoration. No entrance or scroll motion anywhere. */ transition: background 150ms linear, border-color 150ms linear, color 150ms linear; } .btn:hover{ border-color: var(--gold-deep); background: var(--green-pale); } .btn svg{ width:16px; height:16px; flex-shrink:0; } /* Inverted for dark green bands */ .on-graphite .btn, .on-graphite-deep .btn, .enquiry .btn, .foot .btn{ border-color: rgba(255,255,255,.28); color: var(--paper); } .on-graphite .btn:hover, .on-graphite-deep .btn:hover, .enquiry .btn:hover, .foot .btn:hover{ border-color: var(--platinum); background: rgba(255,255,255,.08); } .btn--sm{ min-height:44px; padding:12px 20px; font-size:11px; } .btn-pair{ display:flex; flex-wrap:wrap; gap: var(--space-2); } .btn-pair .btn{ flex: 1 1 auto; min-width: 232px; } @media (max-width: 560px){ .btn-pair .btn{ min-width:100%; } } /* Text link with hairline that draws on hover */ .link-line{ display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color: var(--gold-deep); position:relative; padding-bottom:7px; } .on-graphite .link-line, .on-graphite-deep .link-line, .enquiry .link-line, .foot .link-line{ color: var(--platinum); } /* Static underline. The previous scaleX draw-on-hover was decorative motion. */ .link-line::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background: currentColor; opacity:.4; transition: opacity 150ms linear; } .link-line:hover::after{ opacity:1; } .link-line svg{ width:14px; height:14px; } /* ---------- Nav ---------- */ .nav{ position: fixed; top:0; left:0; right:0; z-index: 200; height: var(--nav-h); display:flex; align-items:center; background: rgba(255,255,255,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--hairline-light); } /* Nav is solid from the start now. There is no scroll-driven state change, and no transition on it, because there is no motion on this site. */ .nav.is-stuck{ border-bottom-color: rgba(18,51,42,.2); } .nav__inner{ width:100%; max-width: var(--container); margin:0 auto; padding:0 var(--space-3); display:flex; align-items:center; justify-content:space-between; gap: var(--space-4); } @media (min-width:768px){ .nav__inner{ padding:0 var(--space-5); } } @media (min-width:1280px){ .nav__inner{ padding:0 var(--space-6); } } .brand{ font-family: var(--font-display); font-size: 24px; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; display:flex; align-items:baseline; gap:10px; } .brand__deva{ font-family: var(--font-deva); font-size:15px; color: var(--gold-deep); } .foot .brand{ color: var(--paper); } .foot .brand__deva{ color: var(--platinum); } @media (max-width: 520px){ .brand__deva{ display:none; } } .nav__links{ display:none; align-items:center; gap: var(--space-4); } @media (min-width:1120px){ .nav__links{ display:flex; } } .nav__links a{ font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color: var(--ink-muted); position:relative; padding: 6px 0; transition: color 150ms linear; } .nav__links a:hover{ color: var(--ink); } /* Active state is a static gold hairline. No draw-on animation. */ .nav__links a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background: var(--platinum); opacity:0; } .nav__links a:hover::after{ opacity:.5; } .nav__links a[aria-current="page"]{ color: var(--ink); } .nav__links a[aria-current="page"]::after{ opacity:1; } .nav__right{ display:flex; align-items:center; gap: var(--space-2); } .nav__cta{ display:none; } @media (min-width:1120px){ .nav__cta{ display:inline-flex; } } .nav__toggle{ width:46px; height:46px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(18,51,42,.28); border-radius: var(--radius); color: var(--ink); } @media (min-width:1120px){ .nav__toggle{ display:none; } } /* Opens and closes instantly. No fade. */ .menu{ position: fixed; inset: var(--nav-h) 0 0 0; z-index:199; background: var(--graphite-deep); display:none; flex-direction:column; justify-content:center; padding: var(--space-5) var(--space-3); overflow-y:auto; } .menu.is-open{ display:flex; } .menu a{ font-family: var(--font-display); font-size: clamp(1.8rem,6.4vw,2.6rem); color: var(--paper); padding: var(--space-2) 0; border-bottom: 1px solid var(--hairline-dark); } .menu a[aria-current="page"]{ color: var(--platinum); } .menu .btn{ margin-top: var(--space-4); } /* ---------- Hero shell ---------- */ .hero{ position: relative; min-height: 88svh; display:flex; align-items:flex-end; padding: calc(var(--nav-h) + var(--space-6)) 0 var(--space-7); overflow: hidden; background: var(--paper); } .hero--short{ min-height: 56svh; } /* Warm ivory wash with a soft green and gold bloom. Stands in for photography; static, never parallaxed. */ .hero__grade{ position:absolute; inset:0; background: radial-gradient(95% 80% at 82% 12%, rgba(201,162,39,.16) 0%, transparent 60%), radial-gradient(80% 70% at 6% 96%, rgba(46,115,89,.14) 0%, transparent 64%), linear-gradient(168deg, #FFFFFF 0%, #F9F6EC 52%, #EFF4EF 100%); } /* Grain removed: it muddied a white palette. */ .hero__grain{ display:none; } .hero__inner{ position:relative; width:100%; } /* ---------- Hero video ---------- The only moving element on the site. Muted and looping, so it reads as ambient footage rather than an animation. */ .hero--video, .hero--image{ background: var(--graphite-deep); } .hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; z-index:0; } /* Still-image hero. The page sets background-image inline on this element. It must NOT come through a custom property: a url() inside a custom property resolves against the stylesheet that consumes it, so url(assets/...) became /assets/css/assets/... and 404'd. An inline background-image resolves against the document, which is correct. */ .hero__media{ position:absolute; inset:0; z-index:0; background-color: var(--graphite-deep); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Type sits on footage, so it needs a scrim to stay legible. Green-tinted rather than plain black to hold the palette. */ .hero__scrim{ position:absolute; inset:0; z-index:1; background: linear-gradient(to top, rgba(13,38,32,.94) 0%, rgba(13,38,32,.72) 42%, rgba(13,38,32,.46) 100%), radial-gradient(80% 70% at 82% 12%, rgba(201,162,39,.20) 0%, transparent 62%); } .hero--video .hero__inner, .hero--image .hero__inner{ z-index:2; } /* Over footage the hero reverts to light-on-dark. */ .hero--video h1,.hero--video h2,.hero--video h3,.hero--image h1,.hero--image h2,.hero--image h3{ color: var(--paper); } .hero--video .lede, .hero--image .lede{ color: rgba(255,255,255,.86); } .hero--video .eyebrow, .hero--image .eyebrow{ color: var(--platinum); } .hero--video .hero__meta, .hero--image .hero__meta{ border-top-color: var(--hairline-dark); } .hero--video .hero__meta dt, .hero--image .hero__meta dt{ color: var(--platinum); } .hero--video .hero__meta dd, .hero--image .hero__meta dd{ color: rgba(255,255,255,.80); } .hero--video .btn, .hero--image .btn{ border-color: rgba(255,255,255,.34); color: var(--paper); } .hero--video .btn:hover, .hero--image .btn:hover{ border-color: var(--platinum); background: rgba(255,255,255,.10); } /* If the visitor asks for reduced motion, freeze it: poster only. */ @media (prefers-reduced-motion: reduce){ .hero__video{ display:none; } .hero--video{ background: var(--graphite-deep) url("../video/hero-poster.webp") center/cover no-repeat; } } /* Line wrapper kept so existing markup still resolves, but it no longer masks anything. Text renders in place. */ .line{ display:block; } .line > span{ display:block; } .hero__meta{ display:flex; flex-wrap:wrap; gap: var(--space-5); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--hairline-light); } .hero__meta > div{ min-width: 160px; } .hero__meta dt{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color: var(--gold-deep); margin-bottom:8px; } .hero__meta dd{ margin:0; font-size:14.5px; color: var(--ink-muted); } /* ---------- Editorial columns ---------- */ .split{ display:grid; gap: var(--space-6); align-items:start; } @media (min-width: 900px){ .split{ grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: var(--space-7); } .split--even{ grid-template-columns: 1fr 1fr; } .split--wide-left{ grid-template-columns: minmax(0,7fr) minmax(0,5fr); } } .sticky-col{ position: sticky; top: calc(var(--nav-h) + var(--space-5)); } /* ---------- Panel sequence (formerly a pinned sticky-stack) ---------- No pinning, no crossfade, no absolute stacking. The three practice panels simply read as three sections, one after another, each fully visible on arrival. */ .stack{ position: relative; } .stack__viewport{ width:100%; display:block; } .stack__panel{ position: relative; display:block; padding: var(--space-7) 0; border-top: 1px solid var(--hairline-light); } .stack__panel:first-child{ border-top: 0; } .on-graphite .stack__panel, .on-graphite-deep .stack__panel{ border-top-color: var(--hairline-dark); } .stack__panel .wrap{ width:100%; } /* Step markers are now a static position indicator, not an animated one. */ .stack__index{ display:flex; gap:10px; margin-bottom: var(--space-4); } .stack__index i{ width:28px; height:2px; background: rgba(18,51,42,.18); display:block; } .stack__index i.is-on{ background: var(--platinum); } .on-graphite .stack__index i, .on-graphite-deep .stack__index i{ background: rgba(255,255,255,.22); } .on-graphite .stack__index i.is-on, .on-graphite-deep .stack__index i.is-on{ background: var(--platinum); } /* ---------- Horizontal pinned gallery ---------- */ /* ---------- Development gallery (formerly a horizontal pinned pan) ---------- Now a plain responsive grid. Nothing pins, nothing translates. */ .hgal{ position: relative; background: var(--paper-alt); padding: var(--space-7) 0; } .hgal__viewport{ height:auto; display:block; overflow:visible; } .hgal__track{ display:grid; gap: var(--space-4); grid-template-columns: 1fr; width:100%; max-width: var(--container); margin:0 auto; padding: 0 var(--space-3); } @media (min-width: 768px){ .hgal__track{ grid-template-columns: repeat(2, 1fr); padding: 0 var(--space-5); } } @media (min-width: 1280px){ .hgal__track{ padding: 0 var(--space-6); } } .hgal__frame{ width: 100%; aspect-ratio: 4 / 3; height: auto; position: relative; overflow: hidden; border-radius: var(--radius); background: var(--graphite-raised); border: 1px solid rgba(18,51,42,.12); } /* Frames carry a still via an inline background-image. background-size and position must live here, or the inline image renders at natural size in the corner instead of filling the frame. */ .hgal__media{ position:absolute; inset:0; background-color: var(--graphite-raised); background-image: radial-gradient(75% 65% at 32% 22%, rgba(201,162,39,.20), transparent 62%), linear-gradient(158deg, #1B4436 0%, #12332A 100%); background-size: cover; background-position: center; background-repeat: no-repeat; } .hgal__caption{ position:absolute; left:0; right:0; bottom:0; padding: var(--space-4); background: linear-gradient(to top, rgba(13,38,32,.96) 18%, rgba(13,38,32,.72) 55%, transparent); } .hgal__caption h3{ color: var(--paper); } .hgal__caption h3{ font-size: clamp(1.4rem,2.2vw,2rem); } .hgal__caption p{ font-size:13.5px; color: var(--platinum-dim); margin-top:8px; max-width:46ch; } .hgal__caption .tag{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color: var(--platinum); display:block; margin-bottom:12px; } /* Mobile / reduced-motion fallback: vertical stack, no scroll trapping */ .hgal--static .hgal__viewport{ height:auto; display:block; overflow:visible; padding: var(--space-5) 0; } .hgal--static .hgal__track{ flex-direction:column; padding:0 var(--space-3); gap: var(--space-3); transform:none !important; } .hgal--static .hgal__frame{ width:100%; height: 62svh; } .hgal--static .hgal__media{ inset:0; transform:none !important; } /* ---------- Enquiry (shared, on every page) ---------- */ .enquiry{ background: var(--graphite-deep); color: var(--paper); padding: var(--space-8) 0; position:relative; overflow:hidden; } .enquiry__glow{ position:absolute; inset:auto -20% -60% -20%; height:120%; background: radial-gradient(50% 60% at 50% 100%, rgba(201,162,39,.16), transparent 70%); pointer-events:none; } .enquiry__inner{ position:relative; } .enquiry__actions{ margin-top: var(--space-5); max-width: 640px; } .enquiry__routes{ display:grid; gap: var(--space-4); margin-top: var(--space-6); padding-top: var(--space-5); border-top:1px solid var(--hairline-dark); } @media (min-width: 700px){ .enquiry__routes{ grid-template-columns: repeat(3, 1fr); } } .enquiry__routes dt{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color: var(--platinum); margin-bottom:10px; } .enquiry__routes dd{ margin:0; font-size:14.5px; color: var(--platinum-dim); } /* ---------- Footer ---------- */ .foot{ background: var(--graphite); color: var(--platinum-dim); padding: var(--space-7) 0 var(--space-5); border-top:1px solid var(--hairline-dark); } .foot__grid{ display:grid; gap: var(--space-5); } @media (min-width: 820px){ .foot__grid{ grid-template-columns: 1.7fr 1fr 1fr; gap: var(--space-6); } } .foot h4{ font-family: var(--font-body); font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color: var(--paper); margin:0 0 var(--space-3); } .foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; } .foot li a, .foot li span{ font-size:14px; color: var(--platinum-dim); transition: color 300ms var(--ease-out-quart); } .foot li a:hover{ color: var(--paper); } .compliance{ margin-top: var(--space-6); padding-top: var(--space-4); border-top:1px solid var(--hairline-dark); display:grid; gap: var(--space-2); } .compliance p{ font-size:12px; line-height:1.72; color: var(--platinum-dim); max-width: 96ch; } .compliance strong{ color: var(--paper); font-weight:600; } .pending{ color: var(--platinum); font-weight:600; } /* Platinum is a dark-panel accent: on light bands it drops to ~1.4:1. Same override the .platinum utility already carries. */ .on-paper .pending, .on-paper-alt .pending, .on-surface .pending{ color: var(--slate); } .foot__base{ margin-top: var(--space-5); padding-top: var(--space-3); border-top:1px solid var(--hairline-dark); display:flex; flex-wrap:wrap; gap: var(--space-2); justify-content:space-between; font-size:12px; color: var(--platinum-dim); } /* ---------- Bottom dock (replaces the green floating pill) ---------- Both actions at equal weight, graphite + platinum hairline. */ .dock{ position: fixed; left:0; right:0; bottom:0; z-index: 190; display:flex; background: rgba(25,28,31,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--hairline-dark); padding-bottom: env(safe-area-inset-bottom); transform: translateY(110%); transition: transform 560ms var(--ease-out-expo); } .dock.is-visible{ transform: translateY(0); } .dock a{ flex:1 1 0; min-height:58px; display:flex; align-items:center; justify-content:center; gap:9px; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color: var(--paper); transition: background 300ms var(--ease-out-quart); } .dock a:hover{ background: rgba(242,240,235,.06); } .dock a + a{ border-left:1px solid var(--hairline-dark); } .dock svg{ width:16px; height:16px; } @media (min-width: 1120px){ .dock{ display:none; } } /* ---------- Accessibility ---------- */ .skip{ position:absolute; left:-9999px; top:0; z-index:1000; background: var(--paper); color: var(--ink); padding: 14px 22px; font-weight:700; } .skip:focus{ left:0; } a:focus-visible, button:focus-visible{ outline: 2px solid var(--platinum); outline-offset: 3px; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ---------- NO REVEAL ANIMATION ---------- [data-reveal] attributes remain in the markup across all six pages but are now completely inert: content is present and readable the instant it renders. Leaving the attributes in place and neutralising them here is safer than stripping hundreds of them out of six files. */ [data-reveal]{ opacity:1 !important; transform:none !important; }