/* ========================================================================== Factum Investigations — Design System Minimal, monochrome, Swiss-influenced. Wordmark colour rules are never overridden here — logo files are used as supplied, black-on-light / white-on-dark only. ========================================================================== */ /* Montserrat is self-hosted (SIL OFL, see assets/fonts/OFL.txt) so no request leaves the site. */ @font-face{ font-family:'Montserrat'; font-style:normal; font-weight:300 600; font-display:swap; src:url('../fonts/montserrat-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root{ /* ---- Colour tokens (light) ---- */ --ink: #121210; --ink-soft: #514F48; --ink-faint: #85827A; --paper: #FBFAF6; --paper-alt: #F1EEE6; --surface: #FFFFFF; --line: #E2DED2; --line-strong:#C9C4B4; --black: #0A0A09; --white: #FFFFFF; --focus-ring: #121210; /* ---- Type ---- */ --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; /* ---- Spacing (8pt rhythm) ---- */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 3rem; --sp-6: 4rem; --sp-7: 6rem; --sp-8: 8rem; /* ---- Layout ---- */ --container: 1240px; --container-narrow: 780px; --radius: 2px; /* ---- Motion ---- */ --ease-out: cubic-bezier(.16,.8,.3,1); --dur-fast: 180ms; --dur-med: 420ms; --dur-slow: 700ms; } @media (prefers-color-scheme: dark){ :root{ --ink: #F4F2EA; --ink-soft: #C9C6BC; --ink-faint: #8B887F; --paper: #0E0E0C; --paper-alt: #171613; --surface: #151412; --line: #2B2A25; --line-strong:#3C3A32; --black: #000000; --white: #FFFFFF; --focus-ring: #F4F2EA; } } /* ---- Reset ---- */ *,*::before,*::after{ box-sizing: border-box; } /* overflow-x on only: putting it on turns body into a scroll container and silently breaks position:sticky on the header. */ html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *,*::before,*::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } body{ margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img,svg{ display:block; max-width:100%; } a{ color: inherit; text-decoration: none; } ul{ margin:0; padding:0; list-style:none; } h1,h2,h3,h4,p,figure{ margin:0; } button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input,textarea,select{ font: inherit; color: inherit; } ::selection{ background: var(--ink); color: var(--paper); } :focus-visible{ outline: 2px solid var(--focus-ring); outline-offset: 3px; } .icon{ width:1em; height:1em; flex-shrink:0; } /* ---- Typography ---- */ .eyebrow{ font-family: var(--font-display); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-faint); display:flex; align-items:center; gap: var(--sp-2); } .eyebrow::before{ content:''; width: 28px; height: 1px; background: var(--line-strong); flex-shrink:0; } h1,.h1{ font-family: var(--font-display); font-weight: 300; letter-spacing: -0.01em; line-height: 1.08; font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.4rem); } h2,.h2{ font-family: var(--font-display); font-weight: 300; letter-spacing: -0.005em; line-height: 1.15; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.85rem); } h3,.h3{ font-family: var(--font-display); font-weight: 500; line-height: 1.3; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); } .lede{ font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); color: var(--ink-soft); line-height: 1.7; max-width: 46ch; } .text-muted{ color: var(--ink-soft); } .text-faint{ color: var(--ink-faint); } p + p{ margin-top: var(--sp-2); } /* ---- Layout helpers ---- */ .container{ width:100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-3); } .container-narrow{ width:100%; max-width: var(--container-narrow); margin:0 auto; padding: 0 var(--sp-3); } .section{ padding: var(--sp-8) 0; } @media (max-width: 720px){ .section{ padding: var(--sp-6) 0; } } .section-alt{ background: var(--paper-alt); } .section-black{ background: var(--black); color: var(--white); } .section-head{ max-width: 640px; margin-bottom: var(--sp-6); } .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; } .section-head > .eyebrow{ margin-bottom: var(--sp-2); } .section-head.center > .eyebrow{ justify-content:center; } .section-head.center > .eyebrow::before, .section-black .eyebrow::before{ display:none; } .section-head h2{ margin-top: var(--sp-2); } /* Grid/flex items default to min-width:auto, which lets unbreakable content (nowrap buttons, long words) stretch the whole track past the viewport. Force them shrinkable so wrapping/truncation happens inside instead. */ .grid > *, .hero-grid > *, .contact-grid > *, .service-detail > *, .steps > *, .footer-top > *, .cta-row > *, .header-inner > *, .hero-trust > *, .nav-primary, .header-actions > *{ min-width: 0; } .grid{ display:grid; gap: var(--sp-5); } .grid-2{ grid-template-columns: repeat(2,1fr); } .grid-3{ grid-template-columns: repeat(3,1fr); } .grid-4{ grid-template-columns: repeat(4,1fr); } @media (max-width: 980px){ .grid-4{ grid-template-columns: repeat(2,1fr); } .grid-3{ grid-template-columns: repeat(2,1fr);} } @media (max-width: 620px){ .grid-2,.grid-3,.grid-4{ grid-template-columns: 1fr; } } .hr{ height:1px; background: var(--line); border:0; width:100%; } /* ---- Buttons ---- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap: 0.6em; font-family: var(--font-display); font-weight: 500; font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 1.05em 1.9em; border-radius: var(--radius); border: 1px solid var(--ink); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); text-align: center; } .btn:active{ transform: scale(0.97); } .btn-primary{ background: var(--ink); color: var(--paper); } .btn-primary:hover{ background: transparent; color: var(--ink); } .btn-ghost{ background: transparent; color: var(--ink); } .btn-ghost:hover{ background: var(--ink); color: var(--paper); } .section-black .btn-primary{ background: var(--white); color: var(--black); border-color: var(--white); } .section-black .btn-primary:hover{ background: transparent; color: var(--white); } .section-black .btn-ghost{ color: var(--white); border-color: rgba(255,255,255,0.4); } .section-black .btn-ghost:hover{ background: var(--white); color: var(--black); border-color: var(--white); } .btn .icon{ transition: transform var(--dur-fast) var(--ease-out); } .btn:hover .icon{ transform: translateX(3px); } .cta-row{ display:flex; gap: var(--sp-3); flex-wrap:wrap; align-items:center; } /* ---- Header ---- */ .site-header{ position: sticky; top:0; z-index: 100; border-bottom: 1px solid transparent; background: rgba(251,250,246,0.86); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } @media (prefers-color-scheme: dark){ .site-header{ background: rgba(14,14,12,0.86); } } .site-header.is-scrolled{ border-bottom-color: var(--line); } /* Wordmark centred on its own row, nav row beneath it. Header compacts once scrolled. */ .header-inner{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; row-gap: var(--sp-2); padding: var(--sp-3) 0 var(--sp-2); transition: padding var(--dur-med) var(--ease-out), row-gap var(--dur-med) var(--ease-out); } .brand{ grid-column:2; grid-row:1; justify-self:center; display:flex; align-items:center; } /* 60px tall ≈ 246px wide — matches the brand guide's sanctioned 260px on-screen size */ .brand img{ height: 60px; width:auto; transition: height var(--dur-med) var(--ease-out); } .site-header.is-scrolled .header-inner{ padding: var(--sp-1) 0; row-gap: var(--sp-1); } .site-header.is-scrolled .brand img{ height: 36px; } .logo-light{ display:block; } .logo-dark{ display:none; } @media (prefers-color-scheme: dark){ .logo-light{ display:none; } .logo-dark{ display:block; } } .nav-primary{ grid-column: 1 / -1; grid-row:2; display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; } .nav-links{ grid-column:2; justify-self:center; display:flex; gap: var(--sp-4); } .nav-links a{ position:relative; font-size:0.92rem; color: var(--ink-soft); padding: 0.3em 0; transition: color var(--dur-fast) var(--ease-out); } .nav-links a::after{ content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-med) var(--ease-out); } .nav-links a:hover, .nav-links a[aria-current="page"]{ color: var(--ink); } .nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ transform: scaleX(1); } .header-actions{ grid-column:3; justify-self:end; display:flex; align-items:center; gap: var(--sp-3); } .header-actions .btn{ white-space:nowrap; } .nav-toggle{ display:none; grid-column:3; grid-row:1; justify-self:end; padding:0.4em; } .nav-toggle .icon{ width:22px; height:22px; } .nav-close{ display:none; align-self:flex-end; padding:0.4em; margin-bottom: var(--sp-4); } .nav-close .icon{ width:20px; height:20px; } @media (max-width: 959px){ .header-inner{ padding: var(--sp-2) 0; } .brand img{ height: 40px; } .nav-primary{ position: fixed; top:0; right:0; left:auto; bottom:auto; height: 100vh; height: 100dvh; width: min(340px,86vw); background: var(--paper); border-left:1px solid var(--line); display:flex; flex-direction: column; align-items: stretch; justify-content:flex-start; gap: var(--sp-6); overflow-y:auto; padding: var(--sp-7) var(--sp-4) var(--sp-4); transform: translateX(100%); visibility:hidden; transition: transform var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med); box-shadow: -20px 0 60px rgba(0,0,0,0.08); } .nav-primary.is-open{ transform: translateX(0); visibility:visible; transition: transform var(--dur-med) var(--ease-out), visibility 0s; } .nav-links{ flex-direction:column; gap: var(--sp-3); } .nav-links a{ font-size:1.2rem; } .header-actions{ flex-direction:column; align-items:flex-start; gap: var(--sp-3); } .nav-toggle{ display:inline-flex; } .nav-close{ display:inline-flex; } .nav-scrim{ position:fixed; inset:0; background:rgba(10,10,9,0.4); opacity:0; pointer-events:none; transition: opacity var(--dur-med) var(--ease-out); z-index:90; } .nav-scrim.is-open{ opacity:1; pointer-events:auto; } } /* ---- Hero ---- */ .hero{ position:relative; padding: var(--sp-8) 0 var(--sp-7); overflow:hidden; } @media (max-width: 720px){ .hero{ padding: var(--sp-6) 0 var(--sp-6); } } .hero-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-7); align-items:center; } @media (max-width: 980px){ .hero-grid{ grid-template-columns:1fr; gap: var(--sp-6); } } .hero h1{ margin-top: var(--sp-3); } .hero .lede{ margin-top: var(--sp-3); max-width: 42ch; } .hero .cta-row{ margin-top: var(--sp-5); } .hero-trust{ margin-top: var(--sp-6); display:flex; flex-wrap:wrap; gap: var(--sp-4); } .hero-trust-item{ display:flex; align-items:center; gap:0.6em; font-size:0.82rem; letter-spacing:0.03em; color: var(--ink-soft); } .hero-trust-item .icon{ width:16px; height:16px; color: var(--ink); } .hero-art{ position:relative; aspect-ratio: 1/1; } /* decorative dossier/grid motif used across pages */ .motif-grid{ position:absolute; inset:0; opacity:0.55; } .motif-dot{ position:absolute; inset:0; background-image: radial-gradient(var(--line-strong) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(circle at 60% 40%, black 0%, transparent 72%); -webkit-mask-image: radial-gradient(circle at 60% 40%, black 0%, transparent 72%); } /* ---- Photography ---- All photos are pushed to monochrome in CSS so any source image sits in the black/white system without retouching. */ .photo{ display:block; position:relative; overflow:hidden; background: var(--paper-alt); border:1px solid var(--line); } .photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: grayscale(1) contrast(1.06); } .photo-panel{ position:relative; aspect-ratio: 1/1; } .photo-panel .panel{ position:absolute; top:12%; right:0; bottom:0; width:62%; background: var(--black); color: var(--white); z-index:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-end; text-align:right; padding: var(--sp-3); } /* keep the caption inside the strip of panel that the photo doesn't cover */ .photo-panel .panel > *{ max-width: 64%; } @media (prefers-color-scheme: dark){ .photo-panel .panel{ border:1px solid rgba(255,255,255,0.14); } } .photo-panel .panel .eyebrow{ color: rgba(255,255,255,0.55); justify-content:flex-end; font-size:0.68rem; letter-spacing:0.2em; } .photo-panel .panel .eyebrow::before{ display:none; } .photo-panel .panel strong{ display:block; font-family: var(--font-display); font-weight:500; font-size:0.92rem; letter-spacing:0.06em; line-height:1.35; margin-top:0.6em; } .photo-panel .panel span{ display:block; font-size:0.76rem; color: rgba(255,255,255,0.6); margin-top:0.5em; } .photo-panel .photo{ position:absolute; left:0; top:0; width:62%; height:86%; z-index:1; border:0; } @media (max-width: 560px){ .photo-panel{ aspect-ratio:auto; } .photo-panel .photo{ position:relative; width:100%; height:auto; aspect-ratio: 4/5; } .photo-panel .panel{ position:relative; top:auto; width:100%; align-items:flex-start; text-align:left; } .photo-panel .panel > *{ max-width:none; } .photo-panel .panel .eyebrow{ justify-content:flex-start; } } .photo-band{ aspect-ratio: 16/7; } @media (max-width: 720px){ .photo-band{ aspect-ratio: 4/3; } } /* ---- Trust strip ---- */ .trust-strip{ padding: var(--sp-5) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .trust-strip .grid{ gap: var(--sp-4); } .trust-item{ display:flex; align-items:flex-start; gap: var(--sp-2); } .trust-item .icon{ width:22px; height:22px; margin-top:0.15em; color: var(--ink); flex-shrink:0; } .trust-item h3{ font-size:0.95rem; } .trust-item p{ font-size:0.86rem; color: var(--ink-soft); margin-top:0.3em; } /* ---- Cards ---- */ .card{ background: var(--surface); border:1px solid var(--line); padding: var(--sp-4); transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .card:hover{ border-color: var(--line-strong); transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(18,18,16,0.25); } .card .icon-wrap{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line-strong); margin-bottom: var(--sp-3); } .card .icon-wrap .icon{ width:20px; height:20px; } .card h3{ margin-bottom: 0.6em; } .card p{ font-size:0.92rem; color: var(--ink-soft); } .card-link{ display:inline-flex; align-items:center; gap:0.4em; margin-top: var(--sp-3); font-size:0.82rem; letter-spacing:0.05em; text-transform:uppercase; font-family: var(--font-display); font-weight:500; } .card-link .icon{ width:14px; height:14px; transition: transform var(--dur-fast) var(--ease-out); } .card:hover .card-link .icon{ transform: translateX(3px); } /* ---- Process steps ---- */ .steps{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-4); position:relative; } @media (max-width: 900px){ .steps{ grid-template-columns: 1fr; gap: var(--sp-5); } } .step{ position:relative; padding-top: var(--sp-5); border-top: 1px solid var(--line-strong); } .step-num{ font-family: var(--font-display); font-weight:300; font-size:2rem; color: var(--ink-faint); } .step h3{ margin-top: var(--sp-2); } .step p{ margin-top:0.5em; font-size:0.9rem; color: var(--ink-soft); } /* ---- Triad / approach columns ---- */ .triad-item + .triad-item{ margin-top:0; } .triad-num{ font-family: var(--font-display); font-size:0.78rem; letter-spacing:0.2em; color: var(--ink-faint); } /* ---- Service detail sections ---- */ .service-detail{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-7); align-items:start; padding: var(--sp-7) 0; border-top:1px solid var(--line); } .service-detail:first-of-type{ border-top:0; } @media (max-width: 900px){ .service-detail{ grid-template-columns:1fr; gap: var(--sp-4); } } .service-detail.reverse .service-visual{ order:2; } .service-visual{ aspect-ratio: 4/3; background: var(--paper-alt); border:1px solid var(--line); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; } .service-visual .icon{ width:64px; height:64px; color: var(--line-strong); } .service-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: grayscale(1) contrast(1.06); } .service-visual .icon-badge{ position:absolute; left: var(--sp-3); bottom: var(--sp-3); width:44px; height:44px; display:flex; align-items:center; justify-content:center; background: var(--black); color: var(--white); } .service-visual .icon-badge .icon{ width:20px; height:20px; color: var(--white); } .service-list{ margin-top: var(--sp-3); } .service-list li{ display:flex; gap:0.7em; padding: 0.55em 0; border-top:1px solid var(--line); font-size:0.92rem; color: var(--ink-soft); } .service-list li:first-child{ border-top:0; } .service-list .icon{ width:16px; height:16px; margin-top:0.25em; color: var(--ink); flex-shrink:0; } .service-note{ margin-top: var(--sp-4); padding: var(--sp-3); border-left:2px solid var(--ink); font-size:0.86rem; color: var(--ink-soft); } /* ---- FAQ ---- */ .faq-group + .faq-group{ margin-top: var(--sp-6); } .faq-group h2{ margin-bottom: var(--sp-3); } .faq-item{ border-top:1px solid var(--line); } .faq-list{ border-bottom:1px solid var(--line); } .faq-item summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap: var(--sp-3); padding: 1.2em 0; font-family: var(--font-display); font-weight:500; font-size:1rem; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary .icon{ width:18px; height:18px; flex-shrink:0; transition: transform var(--dur-fast) var(--ease-out); } .faq-item[open] summary .icon{ transform: rotate(180deg); } .faq-answer{ padding: 0 0 1.5em; max-width: 68ch; color: var(--ink-soft); font-size:0.94rem; } /* ---- Contact ---- */ .contact-grid{ display:grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--sp-7); align-items:start; } @media (max-width: 900px){ .contact-grid{ grid-template-columns:1fr; gap: var(--sp-6); } } .field{ margin-bottom: var(--sp-3); } .field label{ display:flex; gap:0.3em; font-size:0.82rem; letter-spacing:0.03em; text-transform:uppercase; font-family: var(--font-display); font-weight:500; margin-bottom:0.6em; } .field .req{ color: var(--ink-faint); } .field input, .field select, .field textarea{ width:100%; background: var(--surface); border:1px solid var(--line-strong); border-radius: var(--radius); padding: 0.9em 1em; font-size:0.98rem; color: var(--ink); transition: border-color var(--dur-fast) var(--ease-out); } .field textarea{ min-height:140px; resize:vertical; } .field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--ink); outline:none; } .field-hint{ margin-top:0.5em; font-size:0.78rem; color: var(--ink-faint); } .field-hint.is-important{ font-size:0.85rem; line-height:1.55; color: var(--ink-soft); } .field-row{ display:grid; grid-template-columns:1fr 1fr; gap: var(--sp-3); } @media (max-width:560px){ .field-row{ grid-template-columns:1fr; } } .checkbox-row{ display:flex; align-items:flex-start; gap:0.7em; font-size:0.85rem; color: var(--ink-soft); } .checkbox-row input{ margin-top:0.3em; width:16px; height:16px; accent-color: var(--ink); flex-shrink:0; } .hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .contact-side .card{ margin-bottom: var(--sp-3); } .contact-line{ display:flex; align-items:center; gap:0.8em; padding: 0.9em 0; border-top:1px solid var(--line); } .contact-line:first-child{ border-top:0; } .contact-line .icon{ width:18px; height:18px; color: var(--ink); } .contact-line a{ font-size:1rem; } .badge-line{ display:inline-flex; align-items:center; gap:0.5em; font-size:0.78rem; letter-spacing:0.03em; color: var(--ink-faint); padding-top: var(--sp-3); border-top:1px solid var(--line); margin-top: var(--sp-3); } .badge-line .icon{ width:14px; height:14px; } .form-status{ margin-top: var(--sp-3); font-size:0.88rem; display:none; padding: 0.9em 1em; border:1px solid var(--line-strong); } .form-status.is-visible{ display:block; } .field-error{ margin-top:0.5em; font-size:0.8rem; color: var(--ink); } .field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"], .checkbox-row input[aria-invalid="true"]{ border-color: var(--ink); outline: 1px solid var(--ink); } .form-success{ padding: var(--sp-4); border:1px solid var(--line-strong); background: var(--surface); } .form-success:focus{ outline:none; } .form-success h3{ max-width: 30ch; } /* ---- Footer ---- */ .site-footer{ background: var(--black); color: rgba(255,255,255,0.86); padding: var(--sp-7) 0 var(--sp-4); } .footer-top{ display:grid; grid-template-columns: 1.3fr 0.8fr 0.8fr 1fr; gap: var(--sp-6); padding-bottom: var(--sp-6); border-bottom:1px solid rgba(255,255,255,0.12); } @media (max-width: 900px){ .footer-top{ grid-template-columns: 1fr 1fr; } } @media (max-width: 560px){ .footer-top{ grid-template-columns: 1fr; } } .footer-mark{ padding-bottom: var(--sp-6); margin-bottom: var(--sp-6); border-bottom:1px solid rgba(255,255,255,0.12); text-align:center; } .footer-mark img{ height: 90px; width:auto; margin: 0 auto; } @media (max-width: 720px){ .footer-mark img{ height: 64px; } } .footer-brand p{ font-size:0.88rem; color: rgba(255,255,255,0.6); max-width:32ch; } .footer-col h4{ font-family: var(--font-display); font-size:0.78rem; letter-spacing:0.18em; text-transform:uppercase; color: rgba(255,255,255,0.45); margin-bottom: var(--sp-3); } .footer-col ul li{ margin-bottom:0.75em; } .footer-col a{ font-size:0.9rem; color: rgba(255,255,255,0.78); transition: color var(--dur-fast) var(--ease-out); } .footer-col a:hover{ color: var(--white); } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: var(--sp-2); padding-top: var(--sp-4); font-size:0.78rem; color: rgba(255,255,255,0.45); } .footer-bottom a{ color: rgba(255,255,255,0.6); } .footer-bottom a:hover{ color: var(--white); } .footer-legal-links{ display:flex; gap: var(--sp-3); } /* ---- Reveal-on-scroll ---- */ [data-reveal]{ opacity:0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } [data-reveal].is-visible{ opacity:1; transform: translateY(0); } [data-reveal-group] > *{ transition-delay: calc(var(--i,0) * 70ms); } /* ---- Page hero (interior pages) ---- */ .page-hero{ padding: var(--sp-7) 0 var(--sp-6); border-bottom:1px solid var(--line); } .page-hero h1{ margin-top: var(--sp-3); } .page-hero .lede{ margin-top: var(--sp-3); } /* ---- Utility ---- */ .mt-1{ margin-top: var(--sp-1); } .mt-2{ margin-top: var(--sp-2); } .mt-3{ margin-top: var(--sp-3); } .mt-4{ margin-top: var(--sp-4); } .mt-5{ margin-top: var(--sp-5); } .mt-6{ margin-top: var(--sp-6); } .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; } .skip-link{ position:absolute; left:var(--sp-2); top:-60px; background:var(--ink); color:var(--paper); padding:0.8em 1.2em; z-index:200; transition: top var(--dur-fast) var(--ease-out); } .skip-link:focus{ top: var(--sp-2); }