/* ═══════════════════════════════════════════════════════════════ VERACORPUS — styles.css Warm Ivory · Antique Bronze · Verdigris · Deep Velvet ═══════════════════════════════════════════════════════════════ */ /* ── FONTS ────────────────────────────────────────────────────── Loaded via Google Fonts CDN in . ─────────────────────────────────────────────────────────────── */ /* ── DESIGN TOKENS ───────────────────────────────────────────── */ :root { /* Core palette — Oxbridge Library */ --ivory: #FAF8F3; --ivory-alt: #FBF6ED; --white-soft: #FCFCFB; /* near-white for the scrollytelling→"Evidence First" run */ --charcoal: #2C2A26; --bronze: #9E7C38; --bronze-dark: #7D6228; --bronze-light: rgba(158, 124, 56, 0.12); --verdigris: #2B5940; --verdigris-dk: #1F4430; --velvet: #1B2E22; --velvet-mid: #243828; --error: #9B2626; --error-light: #E89A9A; --success-light:#8FC2B5; --bridge-gold: #C9A84C; --ink: #000; /* Confidence flags for the examination report (traffic-light semantics) */ --conf-red: #9B2626; --conf-amber: #C9962B; /* Layout */ --nav-height: 72px; /* Typography */ --font-serif: 'EB Garamond', Georgia, 'Times New Roman', serif; --font-sans: 'Source Sans 3', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* Dimensions */ --max-width: 1100px; --content-pad: clamp(1.25rem, 5vw, 3rem); --section-pad: clamp(4rem, 9vw, 7.5rem); /* Shadows */ --shadow-sm: 0 2px 12px rgba(44, 42, 38, 0.08); --shadow-md: 0 6px 28px rgba(44, 42, 38, 0.13); --shadow-lg: 0 12px 48px rgba(44, 42, 38, 0.18); /* Transitions */ --transition: 0.2s ease; --transition-slow: 0.38s cubic-bezier(0.4, 0, 0.2, 1); } /* ── RESET & BASE ────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: 80px; } body { background-color: var(--ivory); color: var(--charcoal); font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.75; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } ul, ol { list-style: none; } a { color: inherit; } /* ── ACCESSIBILITY: SKIP LINK ────────────────────────────────── */ .skip-link { position: absolute; top: -100%; left: 1rem; z-index: 9999; background: var(--charcoal); color: var(--ivory); padding: 0.6rem 1.2rem; font-family: var(--font-sans); font-size: 0.875rem; letter-spacing: 0.04em; text-decoration: none; border-radius: 0 0 3px 3px; transition: top var(--transition); } .skip-link:focus { top: 0; } /* ── FOCUS STYLES ─────────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; } :focus:not(:focus-visible) { outline: none; } /* ── LAYOUT UTILITY ──────────────────────────────────────────── */ .container { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--content-pad); } /* ══════════════════════════════════════════════════════════════ SCROLL-REVEAL ANIMATION SYSTEM Elements start invisible; JS adds .in-view when they enter the viewport. Gracefully degrades without JS. ══════════════════════════════════════════════════════════════ */ .js-loaded .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.65s ease, transform 0.65s ease; } .js-loaded .reveal.in-view { opacity: 1; transform: none; } /* ══════════════════════════════════════════════════════════════ HEADER / NAV ══════════════════════════════════════════════════════════════ */ .site-header { position: sticky; top: 0; z-index: 100; background-color: rgba(250, 248, 243, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(44, 42, 38, 0.1); transition: box-shadow var(--transition), transform 0.4s ease, opacity 0.35s ease; } .site-header.is-scrolled { box-shadow: var(--shadow-sm); } .site-header.header-hidden { transform: translateY(-100%); pointer-events: none; opacity: 0; } .nav-inner { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--content-pad); height: var(--nav-height); display: flex; align-items: center; gap: 2rem; } /* Wordmark ™ superscript */ .wordmark-tm { font-variant: normal; font-size: 0.52em; font-weight: 400; vertical-align: super; letter-spacing: 0; opacity: 0.65; margin-left: 0.05em; } /* Wordmark */ .wordmark { font-family: var(--font-serif); font-size: 0.9375rem; font-variant: small-caps; font-weight: 600; letter-spacing: 0.25em; color: var(--charcoal); text-decoration: none; flex-shrink: 0; transition: color var(--transition); } .wordmark:hover { color: var(--bronze); } /* Header wordmark logo — Vera / Corpus lockup */ .site-header .wordmark { display: inline-flex; align-items: flex-start; font-family: var(--font-serif); font-variant: normal; font-weight: 400; font-size: clamp(1.375rem, 2.4vw, 1.75rem); letter-spacing: 0.005em; line-height: 1; white-space: nowrap; } .wordmark-vera { font-weight: 400; } .wordmark-corpus { font-weight: 600; color: var(--bronze); } .wordmark-sup { font-family: var(--font-sans); /* Mockup used 0.26em at a 64px logo; at 22–28px header scale that renders illegibly small, so the ratio is opened up to hold at real size. */ font-size: 0.32em; font-weight: 600; letter-spacing: 0; line-height: 1; margin-left: 0.14em; position: relative; top: -0.02em; } /* Base .wordmark:hover tints the whole lockup bronze; keep Corpus steady */ .site-header .wordmark:hover .wordmark-corpus { color: var(--bronze-dark); } /* Nav links — desktop */ .nav-links { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; } .nav-links li { display: flex; align-items: center; } .nav-links a { font-family: var(--font-sans); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--charcoal); padding: 0.4rem 0.75rem; opacity: 0.7; transition: opacity var(--transition); position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0.75rem; right: 0.75rem; height: 1px; background: var(--bronze); transform: scaleX(0); transform-origin: left; transition: transform 0.22s ease; } .nav-links a:hover { opacity: 1; } .nav-links a:hover::after { transform: scaleX(1); } /* Language switcher */ .nav-lang-item { margin-left: 0.75rem; } .lang-switcher { display: flex; align-items: center; gap: 0.2rem; font-size: 0.75rem; color: rgba(44, 42, 38, 0.4); } .lang-btn { background: none; border: none; font-family: var(--font-sans); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.1em; color: var(--charcoal); cursor: pointer; /* Roomier hit area — the glyph is tiny, so padding carries the target */ padding: 0.6rem 0.65rem; opacity: 0.45; transition: opacity var(--transition); line-height: 1; } .lang-btn[aria-pressed="true"] { opacity: 1; font-weight: 700; border-bottom: 1.5px solid var(--bronze); } .lang-btn:hover { opacity: 0.9; } /* Hamburger button — hidden on desktop */ .nav-toggle { display: none; /* Sized so the tap target clears the 44px minimum even though the hamburger glyph itself is only 22×16 — the padding does the work. */ align-items: center; justify-content: center; min-width: 44px; min-height: 44px; background: none; border: none; cursor: pointer; padding: 0.5rem; margin-left: auto; color: var(--charcoal); } .hamburger { display: block; position: relative; width: 22px; height: 2px; background: currentColor; transition: background 0.25s ease; } .hamburger::before, .hamburger::after { content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), top 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.2s ease; } .hamburger::before { top: -7px; } .hamburger::after { top: 7px; } /* Animated X on open */ .nav-toggle[aria-expanded="true"] .hamburger { background: transparent; } .nav-toggle[aria-expanded="true"] .hamburger::before { top: 0; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .hamburger::after { top: 0; transform: rotate(-45deg); } /* ══════════════════════════════════════════════════════════════ TYPOGRAPHY SCALE ══════════════════════════════════════════════════════════════ */ h1, h2, h3 { font-family: var(--font-serif); font-weight: 400; line-height: 1.2; color: var(--charcoal); } h1 { font-size: clamp(2.2rem, 5vw, 3.75rem); } h2 { font-size: clamp(1.75rem, 3.5vw, 2.6rem); } h3 { font-size: 1.25rem; font-weight: 600; } p { margin-bottom: 0; } .section-label { font-family: var(--font-serif); font-size: 0.8125rem; letter-spacing: 0.3em; color: var(--bronze); text-transform: uppercase; margin-bottom: 0.875rem; display: block; } /* ══════════════════════════════════════════════════════════════ BUTTON ══════════════════════════════════════════════════════════════ */ .btn-primary { position: relative; display: inline-flex; align-items: center; gap: 0; overflow: hidden; padding: 0.9rem 2.4rem; background-color: var(--bronze); color: var(--ivory); font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; border: none; cursor: pointer; transition: background-color 0.22s ease, transform 0.18s ease, box-shadow 0.22s ease, gap 0.22s ease, padding-right 0.22s ease; -webkit-appearance: none; } /* Shimmer sweep on hover */ .btn-primary::before { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.15), transparent); transform: skewX(-20deg); transition: left 0.5s ease; pointer-events: none; } /* Arrow character */ .btn-primary::after { content: '→'; display: inline-block; opacity: 0; transform: translateX(-6px); transition: opacity 0.2s ease, transform 0.2s ease; font-size: 1em; line-height: 1; margin-left: 0; } .btn-primary:hover { background-color: var(--bronze-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(158, 124, 56, 0.3); gap: 0.55em; padding-right: 2rem; } .btn-primary:hover::before { left: 125%; } .btn-primary:hover::after { opacity: 1; transform: translateX(0); } .btn-primary:active { transform: translateY(0); box-shadow: none; } /* ══════════════════════════════════════════════════════════════ HERO ══════════════════════════════════════════════════════════════ */ .hero { position: relative; overflow: hidden; /* Own the whole first screen so none of the Examination Room shows until the user scrolls. 100vh (large viewport) intentionally over-fills on mobile while the address bar is showing, keeping the room below the fold. */ min-height: 100vh; display: flex; align-items: center; padding-block: var(--section-pad); /* Clean, even ivory that ends uniformly at the bottom edge — no warm corner or hairline bleeding into the section below. */ background: linear-gradient(165deg, #FEFDFB 0%, var(--ivory) 60%, var(--ivory) 100%); } /* Decorative SVG — positioned right, visible on large screens */ .hero-graphic { position: absolute; right: -2%; top: 0; bottom: 0; width: 46%; display: flex; align-items: center; justify-content: flex-end; pointer-events: none; opacity: 0.55; user-select: none; } .hero-graphic svg { width: 100%; max-width: 520px; height: auto; } .hero-inner { position: relative; z-index: 1; max-width: 820px; } .hero h1 { margin-bottom: 1.25rem; white-space: nowrap; } @media (max-width: 700px) { /* Cap the width (in em, so it tracks the font size) so the headline breaks as "The Data Layer for" / "Fine Art" instead of orphaning "Art". */ .hero h1 { white-space: normal; max-width: 8.3em; } } .tagline { font-family: var(--font-serif); font-size: clamp(1.2rem, 2.5vw, 1.5rem); font-style: italic; /* Darker bronze so this brand line clears WCAG AA on ivory (~5.1:1); the lighter --bronze reads at only ~3.4:1 at this weight. */ color: var(--bronze-dark); margin-bottom: 1.75rem; } .value-prop { max-width: 58ch; margin-bottom: 2.75rem; display: flex; flex-direction: column; gap: 1.25rem; } .value-prop p { font-size: 1.125rem; line-height: 1.78; color: rgba(44, 42, 38, 0.85); } .hero-sign-off { font-family: var(--font-sans); font-size: 0.875rem !important; font-weight: 600; letter-spacing: 0.08em; color: var(--verdigris) !important; } /* ══════════════════════════════════════════════════════════════ HERO CONTINUED (value-prop after scrollytelling) ══════════════════════════════════════════════════════════════ */ .hero-continued { padding: clamp(3rem, 6vw, 5rem) 0 var(--section-pad); background: var(--white-soft); } .post-scrolly-heading { font-family: var(--font-serif); font-size: clamp(1.5rem, 3.4vw, 2.05rem); font-weight: 600; line-height: 1.4; color: var(--charcoal); max-width: 38ch; margin-bottom: 2.5rem; } /* ── Value-prop ⇄ examination bridge ────────────────────────────── The payoff after the scrollytelling, staged as an examination "specimen sheet". MOBILE (default): a lean vertical stack — verdict, specimen, the reading, body. DESKTOP (≥769px): a full-width verdict bar over a two-column dossier — an evidence rail (specimen + the seven layers examined) beside the reading column. ── */ /* Verdict hand-off bar — echoes the examination report as it recedes */ .vp-handoff { display: flex; align-items: center; gap: 0.9rem; margin: 0 0 2rem; padding-bottom: 1.1rem; border-bottom: 1px solid rgba(43, 89, 64, 0.18); opacity: 0.75; } .vp-handoff__label { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--verdigris); } .vp-handoff__label svg { width: 14px; height: 14px; } .vp-handoff__bar { flex: 1; height: 4px; border-radius: 2px; background: rgba(43, 89, 64, 0.15); overflow: hidden; } .vp-handoff__bar i { display: block; width: 76%; height: 100%; background: var(--verdigris); } .vp-handoff__pct { flex: 0 0 auto; font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600; color: var(--verdigris); } /* Specimen crop — a face-centred portrait (4:5) */ .vp-specimen { margin: 0 0 1.25rem; } .vp-specimen img { display: block; width: 108px; height: 135px; object-fit: cover; object-position: 50% 50%; border: 1px solid rgba(158, 124, 56, 0.5); border-radius: 2px; background: var(--ivory-alt); } .vp-specimen figcaption { margin-top: 0.45rem; font-family: var(--font-sans); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze); } /* The reading — eyebrow */ .vp-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 0.9rem; font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--verdigris); } .vp-eyebrow svg { width: 15px; height: 15px; } /* Layers examined — a ticked checklist; shown in the desktop rail only */ .vp-layers { display: none; } .vp-layers__label { font-family: var(--font-sans); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--bronze); margin: 0 0 0.7rem; } .vp-layers__list { list-style: none; margin: 0; padding: 0; } .vp-layers__list li { position: relative; padding-left: 1.3rem; font-family: var(--font-sans); font-size: 0.82rem; line-height: 2; color: rgba(44, 42, 38, 0.82); } .vp-layers__list li::before { content: '\2713'; position: absolute; left: 0; color: var(--verdigris); font-size: 0.72rem; font-weight: 700; } .vp-layers__more { color: var(--bronze); font-style: italic; } .vp-layers__more::before { content: '\002B'; color: var(--bronze); } /* ── Desktop: two-column specimen-sheet layout ── */ @media (min-width: 769px) { .hero-continued .hero-inner.vp-inner { max-width: 960px; display: grid; grid-template-columns: 200px 1fr; column-gap: 3.75rem; align-items: start; } .vp-handoff { grid-column: 1 / -1; } .vp-rail { grid-column: 1; grid-row: 2; } .vp-main { grid-column: 2; grid-row: 2; } .vp-specimen { margin: 0; } .vp-specimen img { width: 100%; height: auto; aspect-ratio: 4 / 5; } .vp-layers { display: block; margin-top: 1.9rem; padding-top: 1.6rem; border-top: 1px solid rgba(44, 42, 38, 0.1); } .vp-main .post-scrolly-heading { margin-bottom: 1.6rem; } .vp-main .value-prop { max-width: 56ch; margin-bottom: 2.25rem; } } /* ── Mobile (≤768px): nest the specimen into the reading as a dossier lead. Flatten the rail/main wrappers, then float the specimen to the TOP-RIGHT of the heading — the eyebrow + heading wrap down its left, so the heading's left edge stays pristine (ragged wrap falls on the right), and the body clears to full width below. ── */ @media (max-width: 768px) { /* A tidy specimen sheet: the verdict bar, then the reading with the specimen top-aligned beside the heading, then the body — clean columns, no ragged wrap and no orphaned last line. */ .hero-continued .hero-inner.vp-inner { display: grid; grid-template-columns: 1fr auto; column-gap: 1.4rem; align-items: start; } .vp-rail, .vp-main { display: contents; } .vp-handoff { grid-column: 1 / -1; grid-row: 1; } .vp-eyebrow { grid-column: 1 / -1; grid-row: 2; margin: 0 0 0.9rem; } .post-scrolly-heading { grid-column: 1; grid-row: 3; margin: 0; } .vp-specimen { grid-column: 2; grid-row: 3; align-self: start; margin: 0; text-align: center; } .value-prop { grid-column: 1 / -1; grid-row: 4; margin: 1.7rem 0 2rem; } .hero-continued .btn-primary { grid-column: 1 / -1; grid-row: 5; justify-self: start; } .vp-specimen img { width: 104px; height: 130px; } .vp-specimen figcaption { margin-top: 0.5rem; } } /* ══════════════════════════════════════════════════════════════ EXAMINATION ROOM — OBJECT ANALYSIS (scrollytelling) Pinned bronze bust + seven annotation stages. The bust image is served through an asset-index layer (initScrollytelling in main.js) so a future frame-sequence scrub or multi-photo swap is a config change. Desktop: sticky pin, annotations reveal per step in the side gutters. Mobile (<768px): no pin — image on top, stages stacked below. ══════════════════════════════════════════════════════════════ */ .scrolly { position: relative; /* Starts on the hero's ivory so the join is seamless, then eases into a clean near-white "examination room". */ background: linear-gradient(180deg, var(--ivory) 0%, var(--white-soft) 8%, var(--white-soft) 100%); } .scrolly-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; z-index: 1; overflow: hidden; } /* Figure box = spotlight + image + annotation gutters, centered. The box is wider than the image so annotations sit in the side gutters without overlapping the bust or overflowing at any width ≥ 768px. The image is sized by a DEFINITE height so its large intrinsic width can't throw off flex centering. */ .exam-figure { position: relative; width: min(960px, 94vw); height: min(74vh, 640px); display: flex; align-items: center; justify-content: center; /* Shared 3D space so the bust can twist/turn on scroll */ perspective: 1400px; perspective-origin: 50% 42%; } /* Radial examination spotlight behind the bust */ .exam-spotlight { position: absolute; left: 50%; top: 48%; width: min(520px, 52%); height: 98%; transform: translate(-50%, -50%); background: radial-gradient( ellipse at center, rgba(255, 251, 240, 0.85) 0%, rgba(158, 124, 56, 0.10) 34%, rgba(43, 89, 64, 0.05) 56%, rgba(245, 241, 232, 0) 72% ); z-index: 0; pointer-events: none; } /* Image stage — shrink-wraps the image; positioning context for shadow */ .exam-stage { position: relative; z-index: 1; margin: 0; display: flex; align-items: center; justify-content: center; } /* Definite viewport-length height → width resolves proportionally, so the image can't blow out to its large intrinsic width. */ .exam-img { display: block; height: min(66vh, 560px); width: auto; max-width: 100%; filter: drop-shadow(0 14px 22px rgba(44, 42, 38, 0.24)); } /* Soft contact shadow grounding the floating cutout */ .exam-shadow { position: absolute; left: 50%; bottom: -2%; width: min(240px, 62%); height: 20px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(44, 42, 38, 0.30) 0%, rgba(44, 42, 38, 0) 70%); filter: blur(4px); z-index: 0; pointer-events: none; } /* Scroll spacer steps */ .scrolly-steps { position: relative; z-index: 0; } .scrolly-step { height: 42vh; pointer-events: none; } .scrolly-step:first-child { height: 26vh; } /* Final spacer holds the fully accumulated analysis on screen a beat longer */ .scrolly-step--final { height: 84vh; } /* WebGL 2.5D depth turntable canvas (mounted by main.js when supported). Covers the figure; the flat CSS-3D layer is hidden while it's active. */ .exam-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } /* Interactive 3D bust: accepts pointer drag to rotate. touch-action:pan-y keeps vertical swipes as page scroll — only horizontal drags rotate, so scrolling is never hijacked (see exam-model.js drag handling). */ .exam-canvas--interactive { pointer-events: auto; touch-action: pan-y; cursor: grab; } .exam-canvas--interactive:active { cursor: grabbing; } .scrolly.gl-active .exam-transform { visibility: hidden; } /* ── 3D twist/turn layer + feature anchors ────────────────────── */ .exam-transform { position: relative; z-index: 1; transform-origin: center center; transform-style: preserve-3d; /* No CSS transition — main.js interpolates the transform every frame so the 3D rotation tracks scroll smoothly. */ will-change: transform; } .exam-anchors { position: absolute; inset: 0; pointer-events: none; transform-style: preserve-3d; } .exam-anchor { position: absolute; width: 0; height: 0; } /* Creative leader connectors (curved paths + targeting reticle), drawn in JS. Sits above the image, below the cards. */ .exam-leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 2; pointer-events: none; } /* Curved connector — draws itself on reveal (length-independent via pathLength="1"). */ .exam-leader-path { fill: none; stroke: var(--verdigris); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 0.7s ease, opacity 0.4s ease; } .exam-leader-path.is-shown { opacity: 0.45; stroke-dashoffset: 0; } .exam-leader-path.is-active { opacity: 0.9; stroke-width: 1.3; } /* Targeting reticle at the feature */ .exam-reticle { opacity: 0; transition: opacity 0.4s ease; } .exam-reticle.is-shown { opacity: 1; } .exam-reticle__ring { fill: none; stroke: var(--verdigris); stroke-width: 1; transform-box: fill-box; transform-origin: center; } .exam-reticle__cross { stroke: var(--verdigris); stroke-width: 1; } .exam-reticle__dot { fill: var(--verdigris); } .exam-reticle.is-active .exam-reticle__ring { animation: reticlePulse 2s ease-in-out infinite; } .exam-reticle.is-active .exam-reticle__cross, .exam-reticle.is-active .exam-reticle__dot { opacity: 1; } .exam-reticle:not(.is-active) .exam-reticle__cross { opacity: 0.5; } @keyframes reticlePulse { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.5); opacity: 0.2; } } @media (prefers-reduced-motion: reduce) { .exam-reticle.is-active .exam-reticle__ring { animation: none; } } /* ── Annotation overlay ───────────────────────────────────────── */ .exam-annotations { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .exam-anno { position: absolute; width: clamp(140px, 22vw, 190px); display: flex; flex-direction: column; opacity: 0; transform: translateY(10px); transition: opacity 0.6s ease, transform 0.6s ease; } .exam-anno--right { right: 0; align-items: flex-start; text-align: left; } .exam-anno--left { left: 0; align-items: flex-end; text-align: right; } /* Detail crop — hidden on desktop, shown in the mobile stacked list */ .exam-anno__crop { display: none; width: 108px; height: 108px; object-fit: contain; margin-bottom: 0.5rem; } /* Provenance — a chain-of-custody timeline: a connecting spine with a node per entry, years in the data font, places in the serif. */ .exam-anno__chain { position: relative; display: flex; flex-direction: column; gap: 0.62rem; margin-top: 0.35rem; } /* the lineage spine, running through the node column on the bust side */ .exam-anno__chain::before { content: ''; position: absolute; right: 3px; top: 7px; bottom: 9px; width: 1px; background: linear-gradient(to bottom, rgba(158, 124, 56, 0.5) 0%, rgba(43, 89, 64, 0.75) 100%); } .exam-prov { display: grid; grid-template-columns: 1fr 7px; gap: 0 9px; align-items: start; opacity: 0; transform: translateX(7px); transition: opacity 0.55s ease, transform 0.55s ease; } .exam-prov__text { grid-column: 1; text-align: right; } .exam-prov__year { display: block; font-family: var(--font-sans); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.16em; color: var(--bronze-dark); } .exam-prov__place { display: block; font-family: var(--font-serif); font-size: 0.78rem; font-style: italic; line-height: 1.3; color: var(--charcoal); opacity: 0.82; } .exam-prov__node { grid-column: 2; margin-top: 4px; width: 7px; height: 7px; border-radius: 50%; background: #F5F1E8; border: 1.5px solid var(--bronze); box-sizing: border-box; } /* verified endpoint — the culmination of the chain */ .exam-prov--verified .exam-prov__year { color: var(--verdigris); } .exam-prov--verified .exam-prov__place { font-style: normal; font-weight: 500; color: var(--verdigris); opacity: 1; } .exam-prov--verified .exam-prov__node { background: var(--verdigris); border-color: var(--verdigris); box-shadow: 0 0 0 3px rgba(43, 89, 64, 0.16); } .exam-tm { font-size: 0.6em; vertical-align: super; } /* Staggered reveal — the lineage builds one entry at a time */ .scrolly.step-1 .anno-1 .exam-prov, .scrolly.all-lit .anno-1 .exam-prov { opacity: 1; transform: none; } .scrolly.step-1 .anno-1 .exam-prov:nth-child(1) { transition-delay: 0.12s; } .scrolly.step-1 .anno-1 .exam-prov:nth-child(2) { transition-delay: 0.24s; } .scrolly.step-1 .anno-1 .exam-prov:nth-child(3) { transition-delay: 0.36s; } .scrolly.step-1 .anno-1 .exam-prov:nth-child(4) { transition-delay: 0.48s; } .scrolly.step-1 .anno-1 .exam-prov:nth-child(5) { transition-delay: 0.60s; } .exam-anno__index { font-family: var(--font-sans); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.2em; color: var(--verdigris); opacity: 0.7; } .exam-anno__tag { font-family: var(--font-sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--verdigris); margin: 0.1rem 0 0.35rem; } .exam-anno__detail { font-family: var(--font-serif); font-size: 0.85rem; line-height: 1.55; color: var(--charcoal); opacity: 0.82; } /* Vertical placement — each card sits near its anchor so the leader line stays short. Left gutter: 01, 02, 03. Right gutter: 04–07. */ .anno-1 { top: 54%; } /* Provenance → base (taller: 5-entry timeline) */ .anno-2 { top: 3%; } /* Proportion → crown */ .anno-3 { top: 26%; } /* Surface → cheek */ .anno-4 { top: 37%; } /* Casting → shoulder */ .anno-5 { top: 82%; } /* Foundry → base */ .anno-6 { top: 62%; } /* Dimensions → side */ .anno-7 { top: 13%; } /* Attribution → face */ /* Reveal each stage at its step. The observer accumulates step-N classes, so once a step is reached its annotation stays lit. */ .scrolly.step-1 .anno-1, .scrolly.step-2 .anno-2, .scrolly.step-3 .anno-3, .scrolly.step-4 .anno-4, .scrolly.step-5 .anno-5, .scrolly.step-6 .anno-6, .scrolly.step-7 .anno-7 { opacity: 1; transform: translateY(0); } /* Full illumination once scrolled past the final step (safety) */ .scrolly.all-lit .exam-anno { opacity: 1; transform: translateY(0); } /* ── Examination Report — desktop finale dossier ────────────────────── Built in JS, injected into .scrolly-sticky, hidden until .exam-final: at the end of the scroll the scene recedes and the computed result takes over (mirrors the mobile recap). Confidence colour flags below are shared with the mobile report. ── */ @keyframes examBarFill { from { width: 0; } } @keyframes examRowIn { from { opacity: 0; transform: translateY(8px); } } .exam-bar.is-low > i { background: var(--conf-red); } .exam-bar.is-mid > i { background: var(--conf-amber); } .exam-report { position: absolute; top: 50%; left: 50%; width: min(600px, 86%); max-height: 88vh; overflow-y: auto; transform: translate(-50%, calc(-50% + 14px)); z-index: 4; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.6s ease, visibility 0.6s ease, transform 0.6s ease; } .scrolly.exam-final .exam-report { opacity: 1; visibility: visible; transform: translate(-50%, -50%); pointer-events: auto; } /* Scene recedes so the report reads cleanly. */ .exam-figure { transition: opacity 0.55s ease; } .scrolly.exam-final .exam-figure { opacity: 0; pointer-events: none; } .exam-report__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.85rem; border-bottom: 1px solid rgba(43, 89, 64, 0.18); } .exam-report__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--verdigris); } .exam-report__eyebrow-ic { width: 16px; height: 16px; } .exam-report__count { font-family: var(--font-mono); font-size: 0.9rem; letter-spacing: 0.06em; color: #726B5E; } .exam-report__overall { margin-top: 0.9rem; } .exam-report__ov-row { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-sans); font-size: 0.92rem; color: #726B5E; } .exam-report__ov-pct { font-family: var(--font-mono); font-weight: 600; font-size: 1.3rem; font-variant-numeric: tabular-nums; color: var(--verdigris); } .exam-report__list { margin-top: 1.35rem; display: flex; flex-direction: column; gap: 0.9rem; } .exam-report__line { display: flex; align-items: center; gap: 9px; } .exam-report__tick { flex: none; width: 16px; height: 16px; color: var(--verdigris); } .exam-report__name { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--verdigris); } .exam-report__pct { margin-left: auto; font-family: var(--font-mono); font-weight: 600; font-size: 0.92rem; font-variant-numeric: tabular-nums; color: var(--verdigris); } .exam-report__detail { margin: 0.3rem 0 0; font-family: var(--font-serif); font-size: 0.82rem; line-height: 1.5; color: var(--charcoal); opacity: 0.72; } /* Bars: base .exam-bar is unstyled outside the mobile block, so style the desktop report's bars here. */ .exam-report .exam-bar { display: block; height: 3px; margin-top: 6px; border-radius: 2px; background: rgba(43, 89, 64, 0.14); overflow: hidden; } .exam-report .exam-bar--big { height: 5px; margin-top: 8px; } .exam-report .exam-bar > i { display: block; height: 100%; width: var(--w); border-radius: 2px; background: var(--verdigris); } .exam-report .exam-bar.is-low > i { background: var(--conf-red); } .exam-report .exam-bar.is-mid > i { background: var(--conf-amber); } .exam-report__pct.is-low, .exam-report__ov-pct.is-low { color: var(--conf-red); } .exam-report__pct.is-mid, .exam-report__ov-pct.is-mid { color: var(--conf-amber); } /* "Computing" reveal: bars fill + rows rise, staggered. */ .scrolly.exam-final .exam-report .exam-bar > i { animation: examBarFill 1s cubic-bezier(0.2, 0.75, 0.25, 1) both; } .scrolly.exam-final .exam-report__row { animation: examRowIn 0.5s ease both; } .scrolly.exam-final .exam-report__row:nth-child(1) { animation-delay: 0.05s; } .scrolly.exam-final .exam-report__row:nth-child(2) { animation-delay: 0.11s; } .scrolly.exam-final .exam-report__row:nth-child(3) { animation-delay: 0.17s; } .scrolly.exam-final .exam-report__row:nth-child(4) { animation-delay: 0.23s; } .scrolly.exam-final .exam-report__row:nth-child(5) { animation-delay: 0.29s; } .scrolly.exam-final .exam-report__row:nth-child(6) { animation-delay: 0.35s; } .scrolly.exam-final .exam-report__row:nth-child(7) { animation-delay: 0.41s; } @media (prefers-reduced-motion: reduce) { .exam-report { transition: opacity 0.01ms; } .exam-report .exam-bar > i, .exam-report__row { animation: none; } } /* ── Mobile (<768px): pinned bust that twists (light CSS-3D), with the annotations revealing ONE AT A TIME as a caption beneath it; the final stage shows them ALL together as a compact summary. ── */ @media (max-width: 768px) { .scrolly { overflow-x: clip; } /* Pin the viewport; the bust is centred and fully visible, the caption overlays the lower third on a scrim so the bust never gets shoved up. */ .scrolly-sticky { position: sticky; top: 0; height: 100svh; display: block; padding: 0; box-sizing: border-box; z-index: 1; } .exam-spotlight, .exam-shadow, .exam-canvas { display: none; } /* When the interactive 3D bust mounts on mobile, show its canvas (it fills the figure; the model is framed into the upper area, above the caption scrim). The flat image is hidden by the base .gl-active rule. */ .scrolly.gl-active .exam-canvas--interactive { display: block; z-index: 1; } /* Figure fills the pin; bust centred, clear of the nav and the caption. */ .exam-figure { position: absolute; inset: 0; width: 100%; height: 100%; padding: calc(var(--nav-height) + 5vh) 1rem 0; display: flex; align-items: flex-start; justify-content: center; perspective: none; /* mobile is 2D only → keep the image box axis-aligned so the leader/reticle land exactly on the bust */ } .exam-transform { flex: 0 0 auto; visibility: visible; transform-style: flat; will-change: transform; } .exam-stage { height: auto; } .exam-img { height: auto; width: auto; max-height: 42vh; max-width: 80%; margin: 0 auto; filter: drop-shadow(0 10px 20px rgba(44, 42, 38, 0.22)); } /* Mobile pointer = big "focus brackets" (built in JS) sitting on the active feature. No leader line. The inner group carries the pulse. */ .exam-anchors { display: block; } .exam-anchor { position: absolute; width: 0; height: 0; } .exam-leaders { display: block; z-index: 2; overflow: visible; } .exam-focus { opacity: 0; transition: opacity 0.5s ease; } .exam-focus.is-shown { opacity: 1; } .exam-focus__bracket { fill: none; stroke: var(--verdigris); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; /* soft ivory halo so the mark reads on the dark bronze */ filter: drop-shadow(0 0 2px rgba(250, 248, 243, 0.9)); } .exam-focus__dot { fill: var(--verdigris); filter: drop-shadow(0 0 1.6px rgba(250, 248, 243, 0.9)); } .exam-focus__inner { transform-box: fill-box; transform-origin: center; } .exam-focus.is-active .exam-focus__inner { animation: examFocusPulse 2.6s ease-in-out infinite; } @keyframes examFocusPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.07); opacity: 0.78; } } @media (prefers-reduced-motion: reduce) { .exam-focus.is-active .exam-focus__inner { animation: none; } } /* Caption zone — overlays the lower viewport on an ivory scrim so the bust behind stays readable and uncropped. */ .exam-annotations { position: absolute; left: 0; right: 0; bottom: 0; top: 52vh; height: auto; max-width: none; margin: 0; padding: 5vh 1.25rem 3vh; z-index: 3; pointer-events: none; background: linear-gradient( to top, var(--ivory) 80%, rgba(250, 248, 243, 0) 100% ); } .exam-anno, .exam-anno--left, .exam-anno--right { position: absolute; inset: 0; width: 100%; max-width: none; margin: 0; padding: 0 0.5rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; opacity: 0; transform: none; transition: opacity 0.45s ease; pointer-events: none; } /* No detail crop on mobile — the pinned bust above already shows it. */ .exam-anno__crop { display: none; } .exam-anno__detail { text-align: center; } /* Reveal only the current stage's caption */ .scrolly.cur-1 .anno-1, .scrolly.cur-2 .anno-2, .scrolly.cur-3 .anno-3, .scrolly.cur-4 .anno-4, .scrolly.cur-5 .anno-5, .scrolly.cur-6 .anno-6, .scrolly.cur-7 .anno-7 { opacity: 1; } /* Provenance timeline: left-aligned + centered block in the caption */ .exam-anno__chain { align-self: center; } .exam-prov { opacity: 1; transform: none; grid-template-columns: 7px 1fr; gap: 0 9px; } .exam-prov__node { grid-column: 1; } .exam-prov__text { grid-column: 2; text-align: left; } /* Nudge the provenance year up from 9.6px so the date reads on a phone */ .exam-prov__year { font-size: 0.7rem; } .exam-anno__chain::before { right: auto; left: 3px; } /* ── FINAL STAGE — the findings dossier. The bust has already had its moment, so drop it here and give the 7 findings the FULL height: this stops the list being clipped (it was cut off mid-"Casting") and leaves clear space before the value-prop section below. ── */ .scrolly.mob-all .exam-figure { align-items: flex-start; padding: 0; } .scrolly.mob-all .exam-transform { display: none; } /* The 3D bust canvas must also go on the recap — otherwise it renders over the findings report. Use visibility (not display) because three.js sets an inline display:block on the canvas that would otherwise win the cascade. */ .scrolly.mob-all .exam-canvas--interactive { visibility: hidden; } .scrolly.mob-all .exam-leaders { display: none; } .scrolly.mob-all .exam-annotations { top: calc(var(--nav-height) + 2vh); bottom: 0; height: auto; display: flex; flex-direction: column; justify-content: flex-start; gap: 0.6rem; padding: 0 1.4rem 5vh; /* breathing room below the last finding */ overflow-y: auto; background: none; } .scrolly.mob-all .exam-anno { position: static; inset: auto; padding: 0; opacity: 1; align-items: stretch; justify-content: flex-start; text-align: left; } .scrolly.mob-all .exam-anno__crop { display: none; } .scrolly.mob-all .exam-anno__index { display: none; } .scrolly.mob-all .exam-anno__tag { margin: 0 0 0.15rem; } .scrolly.mob-all .exam-anno__detail { text-align: left; font-size: 0.78rem; line-height: 1.4; } .scrolly.mob-all .exam-anno__chain { align-self: flex-start; } .scrolly.mob-all .exam-prov__place { font-size: 0.72rem; } .scrolly.mob-all .exam-prov { gap: 0 8px; } .scrolly.mob-all .exam-anno__chain { gap: 0.28rem; } /* ── "Verified Report" chrome — only shown in the final recap; hidden while one finding shows at a time (the single-stage captions). ── */ .exam-report-head { display: none; } .exam-anno__meta { display: contents; } .exam-anno__tick, .exam-anno__pct, .exam-bar, .exam-anno__prov-sum { display: none; } /* Recap swaps the tall provenance timeline for one condensed data line. */ .scrolly.mob-all .exam-anno__prov-sum { display: block; } .scrolly.mob-all .anno-1 .exam-anno__chain { display: none; } .scrolly.mob-all .exam-report-head { display: block; margin-bottom: 0.15rem; padding-bottom: 0.7rem; border-bottom: 1px solid rgba(43, 89, 64, 0.16); animation: examRowIn 0.55s ease both; } .scrolly.mob-all .erh-top { display: flex; justify-content: space-between; align-items: center; } .scrolly.mob-all .erh-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--verdigris); } .scrolly.mob-all .erh-eyebrow__ic { width: 14px; height: 14px; } .scrolly.mob-all .erh-count { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: #726B5E; } .scrolly.mob-all .erh-ov { margin-top: 0.55rem; } .scrolly.mob-all .erh-ov-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: #726B5E; } .scrolly.mob-all .erh-pct { font-family: var(--font-mono); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--verdigris); } .scrolly.mob-all .exam-anno__meta { display: flex; align-items: center; gap: 7px; } .scrolly.mob-all .exam-anno__meta .exam-anno__tag { margin: 0; } .scrolly.mob-all .exam-anno__tick { display: inline-block; flex: none; width: 15px; height: 15px; color: var(--verdigris); } .scrolly.mob-all .exam-anno__pct { display: inline; margin-left: auto; font-family: var(--font-mono); font-weight: 600; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--verdigris); } .scrolly.mob-all .exam-bar { display: block; height: 3px; margin-top: 5px; border-radius: 2px; background: rgba(43, 89, 64, 0.14); overflow: hidden; } .scrolly.mob-all .exam-bar--big { height: 4px; margin-top: 6px; } .scrolly.mob-all .exam-bar > i { display: block; height: 100%; width: var(--w); border-radius: 2px; background: var(--verdigris); animation: examBarFill 1s cubic-bezier(0.2, 0.75, 0.25, 1) both; } /* Confidence colour flags (higher specificity than the verdigris defaults) */ .scrolly.mob-all .exam-bar.is-low > i { background: var(--conf-red); } .scrolly.mob-all .exam-bar.is-mid > i { background: var(--conf-amber); } .scrolly.mob-all .exam-anno__pct.is-low, .scrolly.mob-all .erh-pct.is-low { color: var(--conf-red); } .scrolly.mob-all .exam-anno__pct.is-mid, .scrolly.mob-all .erh-pct.is-mid { color: var(--conf-amber); } .scrolly.mob-all .exam-anno__detail { margin-top: 5px; } /* Staggered "computing" reveal of each finding row */ .scrolly.mob-all .exam-anno { animation: examRowIn 0.55s ease both; } .scrolly.mob-all .anno-1 { animation-delay: 0.06s; } .scrolly.mob-all .anno-2 { animation-delay: 0.12s; } .scrolly.mob-all .anno-3 { animation-delay: 0.18s; } .scrolly.mob-all .anno-4 { animation-delay: 0.24s; } .scrolly.mob-all .anno-5 { animation-delay: 0.30s; } .scrolly.mob-all .anno-6 { animation-delay: 0.36s; } .scrolly.mob-all .anno-7 { animation-delay: 0.42s; } @keyframes examBarFill { from { width: 0; } } @keyframes examRowIn { from { opacity: 0; transform: translateY(6px); } } @media (prefers-reduced-motion: reduce) { .scrolly.mob-all .exam-bar > i, .scrolly.mob-all .exam-anno, .scrolly.mob-all .exam-report-head { animation: none; } } /* Spacers give the pin its scroll length */ .scrolly-steps { display: block; } .scrolly-step { height: 58vh; } .scrolly-step:first-child { height: 46vh; } .scrolly-step--final { height: 96vh; } } /* ══════════════════════════════════════════════════════════════ THE NAME — ETYMOLOGY SECTION (marginalia layout) ══════════════════════════════════════════════════════════════ */ /* ── The Architecture of Our Name — lexicon (two-column dictionary) ── */ /* The name reads as an equation — Corpus + Vera = VeraCorpus — sized to fill a single screen rather than scroll past it. */ .name-section { min-height: 100vh; display: flex; align-items: center; padding-block: clamp(5rem, 11vh, 7.5rem) clamp(2.5rem, 6vh, 4rem); background: var(--white-soft); } .name-section > .container { width: 100%; } .name-section h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin-bottom: 0.85rem; } .name-intro { max-width: 48ch; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.55; color: rgba(44, 42, 38, 0.7); margin-bottom: clamp(2rem, 5vh, 3.25rem); } .name-lexicon { max-width: 1080px; } /* ── The equation: two roots · two operators · one result ───── */ .lex-equation { display: grid; grid-template-columns: 1fr auto 1fr auto 1.2fr; align-items: start; gap: 0 clamp(0.9rem, 2.4vw, 2.4rem); padding-top: clamp(1.5rem, 4vh, 2.75rem); border-top: 1px solid rgba(158, 124, 56, 0.26); } .lex-entry { display: flex; flex-direction: column; align-items: flex-start; } /* Sequence the equation left→right as the reader arrives */ .lex-op--plus.reveal { transition-delay: 0.08s; } .lex-entry--vera.reveal { transition-delay: 0.16s; } .lex-op--eq.reveal { transition-delay: 0.24s; } .lex-entry--compound.reveal{ transition-delay: 0.32s; } /* Operators — light serif, vertically centred between the terms */ .lex-op { align-self: center; font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1; color: rgba(158, 124, 56, 0.5); } .lex-op--eq { color: rgba(43, 89, 64, 0.6); } /* Headword identity block */ .lex-head { display: flex; flex-direction: column; align-items: flex-start; } .lex-word { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.7rem, 2.7vw, 2.25rem); line-height: 1; color: var(--charcoal); margin: 0; } /* Root headwords carry their accent — the two colours that fuse in the result */ .lex-entry--corpus .lex-word { color: var(--bronze); } .lex-entry--vera .lex-word { color: var(--verdigris); } .lex-pron { font-family: var(--font-serif); font-style: italic; font-size: 0.95rem; letter-spacing: 0.01em; color: rgba(44, 42, 38, 0.4); margin-top: 0.55rem; } .lex-pos { font-family: var(--font-sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(44, 42, 38, 0.42); margin-top: 0.4rem; } /* Sense gloss, keyed by a short colour swatch — the entry's accent */ .lex-sense { position: relative; margin-top: 1.1rem; padding-top: 0.95rem; font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase; color: var(--bronze); } .lex-sense::before { content: ""; position: absolute; top: 0; left: 0; width: 2.1rem; height: 2px; background: currentColor; } .lex-entry--vera .lex-sense { color: var(--verdigris); } .lex-def { margin-top: 1.15rem; } .lex-def p { margin: 0; max-width: 32ch; font-family: var(--font-serif); font-size: clamp(0.98rem, 1.15vw, 1.08rem); line-height: 1.58; color: rgba(44, 42, 38, 0.88); } /* ── The result — VeraCorpus, the resolved synthesis ────────── */ .lex-word--compound { font-size: clamp(1.85rem, 3vw, 2.55rem); letter-spacing: 0.005em; line-height: 1.02; } .lex-word--compound .lw-v { color: var(--verdigris); } .lex-word--compound .lw-c { color: var(--bronze-dark); } .lex-sense--result { color: var(--verdigris); } .lex-def--compound { margin-top: 1.15rem; } .lex-coda { margin: 0; } .lex-coda p { margin: 0; max-width: 30ch; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.1rem, 1.5vw, 1.32rem); line-height: 1.42; color: var(--charcoal); } .lex-coda p + p { margin-top: 0.55rem; max-width: 32ch; font-family: var(--font-sans); font-style: normal; font-size: 0.82rem; letter-spacing: 0.03em; line-height: 1.5; color: rgba(44, 42, 38, 0.6); } /* ══════════════════════════════════════════════════════════════ SECTIONS — GENERIC ══════════════════════════════════════════════════════════════ */ .section { padding-block: var(--section-pad); } /* "Evidence First. Conclusion Second." — end of the white run. */ #how-it-works { background: var(--white-soft); } /* Alternate sections: flat colour + faint archival dot grid */ .section--alt { background-color: var(--ivory-alt); background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' r='0.85' fill='%232C2A26' fill-opacity='0.055'/%3E%3C/svg%3E"); background-size: 32px 32px; } /* ══════════════════════════════════════════════════════════════ WHAT WE DO — PROSE ══════════════════════════════════════════════════════════════ */ .prose-section h2 { margin-bottom: 2rem; } .prose { max-width: 68ch; display: flex; flex-direction: column; gap: 1.4rem; } .prose p { font-size: 1.0625rem; line-height: 1.8; color: rgba(44, 42, 38, 0.9); } /* Problem section — positioned context for offset SVG */ .problem-section { position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center; padding-block: clamp(5rem, 11vh, 7.5rem) clamp(3rem, 7vh, 5rem); /* White base; the faint dot grid from .section--alt stays on top. */ background-color: var(--white-soft); } .problem-section > .container { width: 100%; } /* Split: the narrative on the left, the live consolidation instrument on the right */ .problem-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2.5rem, 6vw, 5.5rem); } .problem-text { max-width: 34rem; } .problem-section h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.12; margin-bottom: 1.35rem; } .problem-prose { display: flex; flex-direction: column; gap: 1.05rem; max-width: none; } .problem-prose p { font-size: clamp(0.97rem, 1.1vw, 1.05rem); line-height: 1.66; color: rgba(44, 42, 38, 0.88); } .problem-viz { display: flex; justify-content: center; } .problem-graphic { position: absolute; top: 0; right: -2%; width: clamp(220px, 28vw, 380px); height: 100%; pointer-events: none; opacity: 0.7; } .problem-graphic svg { width: 100%; height: 100%; } /* Typographic rule — thin bronze hairline divider */ .prose-rule { border: none; border-top: 1px solid rgba(158, 124, 56, 0.2); max-width: 12rem; margin: 0.5rem 0; } /* Lede — prominent opening paragraph */ .prose-lede { font-size: 1.18rem; line-height: 1.75; color: var(--charcoal); } /* Failure list — numbered marginalia */ .failure-list { display: flex; flex-direction: column; gap: 1.75rem; margin-block: 0.25rem; } .failure-entry { display: grid; grid-template-columns: 10rem 1fr; gap: 0 2.5rem; align-items: start; } .failure-margin { padding-top: 0.1rem; border-right: 1px solid rgba(158, 124, 56, 0.22); padding-right: 1.5rem; } .failure-num { display: block; font-family: var(--font-serif); font-style: italic; font-size: 0.8rem; color: var(--bronze); opacity: 0.55; margin-bottom: 0.3rem; letter-spacing: 0.08em; } .failure-label { display: block; font-family: var(--font-serif); font-size: 1.15rem; font-weight: 500; color: var(--charcoal); line-height: 1.3; } .failure-body p { font-size: 1rem; line-height: 1.8; color: rgba(44, 42, 38, 0.88); } /* ══════════════════════════════════════════════════════════════ WHAT WE DO — CONSOLIDATION SCRUBBER Drag the fragmented archive into one VeraCorpus record. ══════════════════════════════════════════════════════════════ */ .consolidator { display: flex; flex-direction: column; align-items: center; width: 100%; margin: 0; } /* The interaction, presented as one centered instrument: stage → slider → readout, vertically stacked and centered. */ .cons-stage, .cons-panel { width: 100%; max-width: 470px; } .cons-stage { margin-top: 0; } .cons-panel { margin-top: 1.4rem; text-align: center; } /* Live state line — narrates the reconciliation */ .cons-state { font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; color: rgba(44, 42, 38, 0.6); margin-bottom: 1rem; min-height: 1.6em; transition: color 0.4s ease; } .cons-state.is-working { color: var(--bronze); } .cons-state.is-complete { color: var(--verdigris); } /* Slider control */ .cons-control { width: 100%; } .cons-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; background: rgba(158, 124, 56, 0.3); border-radius: 2px; outline: none; cursor: pointer; } .cons-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--bronze); border: 3px solid var(--ivory-alt); box-shadow: var(--shadow-sm); cursor: grab; } .cons-slider::-webkit-slider-thumb:active { cursor: grabbing; } .cons-slider::-moz-range-thumb { width: 17px; height: 17px; border-radius: 50%; background: var(--bronze); border: 3px solid var(--ivory-alt); cursor: grab; } .cons-slider:focus-visible { outline: 2px solid var(--verdigris); outline-offset: 6px; border-radius: 4px; } .cons-ends { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.6rem; font-family: var(--font-serif); font-style: italic; font-size: 0.85rem; color: rgba(158, 124, 56, 0.75); } .cons-ends__hint { font-size: 0.78rem; letter-spacing: 0.04em; opacity: 0.72; } /* Metric readouts — editorial stat callouts, centered beneath the slider */ .cons-metrics { display: flex; justify-content: center; gap: clamp(2rem, 6vw, 3.5rem); margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(158, 124, 56, 0.2); width: 100%; } .cons-metric { text-align: center; } .cons-metric__label { display: block; font-size: 0.72rem; letter-spacing: 0.11em; text-transform: uppercase; color: rgba(44, 42, 38, 0.5); } .cons-metric__val { display: block; font-family: var(--font-serif); font-size: 1.6rem; color: var(--charcoal); margin-top: 0.2rem; } /* Stage — the viewport where the six fragments converge into one record. The card is absolutely centered; fragments scatter around it (JS reads this box's live width/height). */ .cons-stage { position: relative; min-height: 360px; } .cons-streams { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* Fragment paper chips (injected by JS) */ .cons-frag { position: absolute; width: 104px; height: 62px; background: #FFF; border: 1px solid var(--charcoal); /* Offset ink shadow — hard-edged, no blur, so the chips read as loose paper */ box-shadow: 3px 3px 0 var(--charcoal); border-radius: 2px; padding: 7px 9px; overflow: hidden; transform-origin: center; will-change: transform, opacity; } .cons-frag__label { display: block; font-family: var(--font-serif); font-style: italic; font-size: 0.72rem; color: var(--charcoal); white-space: nowrap; margin-bottom: 5px; } .cons-frag__line { display: block; height: 2px; background: rgba(44, 42, 38, 0.22); border-radius: 2px; margin-bottom: 4px; } /* The VeraCorpus record — the resolved, data-backed reference */ .cons-record { position: absolute; left: 50%; top: 50%; width: 268px; transform: translate(-50%, -50%) scale(0.9); background: #FEFCF8; border: 1px solid rgba(158, 124, 56, 0.45); border-radius: 5px; padding: 1.1rem 1.3rem 1rem; box-shadow: 0 14px 44px rgba(44, 42, 38, 0.16), 0 2px 8px rgba(44, 42, 38, 0.06); z-index: 20; opacity: 0; } .cons-record__head { display: flex; align-items: center; justify-content: space-between; } .cons-record__mark { font-family: var(--font-serif); letter-spacing: 0.18em; font-size: 0.82rem; color: var(--charcoal); } .cons-record__seal { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; letter-spacing: 0.02em; color: var(--verdigris); opacity: 0; } .cons-record__seal em { font-style: normal; } .cons-ico { width: 14px; height: 14px; flex: none; } .cons-record__seal .cons-ico { width: 15px; height: 15px; } .cons-record__title { font-family: var(--font-serif); font-size: 1.05rem; color: var(--charcoal); margin: 0.15rem 0 0.55rem; padding-bottom: 0.55rem; border-bottom: 1px solid rgba(158, 124, 56, 0.2); } .cons-record__row { display: flex; align-items: center; justify-content: space-between; padding: 0.28rem 0; } .cons-record__field { font-size: 0.9rem; color: rgba(44, 42, 38, 0.85); } .cons-record__chk { display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem; color: var(--verdigris); opacity: 0; transition: opacity 0.3s ease; } .cons-record__chk em { font-style: normal; } .cons-record__meter { height: 4px; background: rgba(158, 124, 56, 0.18); border-radius: 3px; margin-top: 0.7rem; overflow: hidden; } .cons-record__meter > i { display: block; height: 100%; width: 0; background: var(--bronze); border-radius: 3px; } .cons-record__foot { font-family: var(--font-serif); font-style: italic; font-size: 0.78rem; color: rgba(44, 42, 38, 0.5); margin-top: 0.55rem; } /* Static fallback (no JS) — present the consolidated record as the resolved state */ .consolidator:not([data-consolidator-live]) .cons-record { opacity: 1; transform: translate(-50%, -50%) scale(1); } .consolidator:not([data-consolidator-live]) .cons-record__seal, .consolidator:not([data-consolidator-live]) .cons-record__chk { opacity: 1; } .consolidator:not([data-consolidator-live]) .cons-record__meter > i { width: 100%; } .consolidator:not([data-consolidator-live]) .cons-control, .consolidator:not([data-consolidator-live]) .cons-metrics, .consolidator:not([data-consolidator-live]) .cons-state { display: none; } /* Split collapses to a single column: narrative first, instrument below */ @media (max-width: 900px) { .problem-section { min-height: 0; padding-block: clamp(3.5rem, 9vh, 5rem); } .problem-split { grid-template-columns: 1fr; gap: clamp(2.25rem, 6vw, 3rem); } .problem-text { max-width: none; } } @media (max-width: 768px) { .cons-stage, .cons-panel { max-width: 420px; } .cons-stage { min-height: 320px; } .cons-ends__hint { display: none; } } /* ══════════════════════════════════════════════════════════════ HOW IT WORKS — STEPS + DIMENSIONS ══════════════════════════════════════════════════════════════ */ /* ── Forensic registration plate ───────────── */ .hiw-plate { position: relative; padding: clamp(1.75rem, 4vw, 3rem); } .hiw-plate::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(158, 124, 56, 0.22); pointer-events: none; } /* Paired plates: methodology, then dimensions — two contained units */ .hiw-plate + .hiw-plate { margin-top: clamp(1.5rem, 3vw, 2.75rem); } /* Crop marks */ .hiw-cm { position: absolute; width: 15px; height: 15px; z-index: 2; } .hiw-cm::before, .hiw-cm::after { content: ""; position: absolute; background: var(--bronze); } .hiw-cm::before { width: 15px; height: 1.5px; } .hiw-cm::after { width: 1.5px; height: 15px; } .hiw-cm-tl { top: -1px; left: -1px; } .hiw-cm-tr { top: -1px; right: -1px; } .hiw-cm-tr::before, .hiw-cm-tr::after { right: 0; } .hiw-cm-bl { bottom: -1px; left: -1px; } .hiw-cm-bl::before, .hiw-cm-bl::after { bottom: 0; } .hiw-cm-br { bottom: -1px; right: -1px; } .hiw-cm-br::before, .hiw-cm-br::after { bottom: 0; right: 0; } /* Scan line (animated on reveal) */ .hiw-scan { position: absolute; top: 0; bottom: 0; left: 2%; width: 1px; background: linear-gradient(180deg, transparent, rgba(43, 89, 64, 0.6), transparent); opacity: 0; pointer-events: none; z-index: 1; } /* Header */ .hiw-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.5rem; } .hiw-head { max-width: 46ch; } .hiw-kick { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); font-weight: 700; margin: 0; } .hiw-plate h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 2.5rem); line-height: 1.08; color: var(--charcoal); margin: 0.5rem 0 0.7rem; } .hiw-intro { font-family: var(--font-serif); font-size: 1.08rem; line-height: 1.6; color: rgba(44, 42, 38, 0.72); max-width: 44ch; margin: 0; } .hiw-coord { font-family: var(--font-sans); font-size: 0.62rem; letter-spacing: 0.16em; color: rgba(44, 42, 38, 0.55); text-align: right; line-height: 1.85; white-space: nowrap; margin: 0; } /* Measured baseline */ .hiw-baseline { display: flex; align-items: center; gap: 0.6rem; margin: 0.4rem 0 2.2rem; } .hiw-tick { width: 1px; height: 9px; background: rgba(158, 124, 56, 0.35); } .hiw-line { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, rgba(158,124,56,0.3), rgba(158,124,56,0.3) 4px, transparent 4px, transparent 10px); } /* Three steps */ .hiw-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6rem; margin-bottom: 0; } .hiw-plno { font-family: var(--font-sans); font-size: 0.62rem; letter-spacing: 0.18em; color: var(--bronze); font-weight: 700; margin: 0; } .hiw-step h3 { font-family: var(--font-serif); font-weight: 500; font-size: 1.18rem; color: var(--charcoal); margin: 0.7rem 0 0.7rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(158, 124, 56, 0.15); } .hiw-step p { font-size: 0.9375rem; line-height: 1.78; color: rgba(44, 42, 38, 0.82); margin: 0; } /* Evidence report — signature + axes (its own plate) */ .hiw-report { padding-top: 0; } .hiw-report-head { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1.8rem; } .hiw-report-title { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze); font-weight: 700; } .hiw-report-tag { font-family: var(--font-sans); font-size: 0.62rem; letter-spacing: 0.14em; color: rgba(44, 42, 38, 0.55); } .hiw-grid { display: grid; grid-template-columns: 360px 1fr; gap: 2.8rem; align-items: start; } .hiw-sigbox { position: relative; padding: 1.1rem; } .hiw-sigbox .hiw-cm { width: 12px; height: 12px; } .hiw-sig { display: block; width: 100%; height: auto; } .hiw-axlbl { font-family: var(--font-serif); font-size: 11px; fill: var(--bronze-dark); } .hiw-legend { display: flex; justify-content: center; gap: 1.5rem; margin-top: 0.7rem; font-size: 0.72rem; color: rgba(44, 42, 38, 0.72); } .hiw-leg-item { display: inline-flex; align-items: center; gap: 0.45rem; } .hiw-legend i { width: 16px; border-top: 2px solid var(--bronze); } .hiw-legend i.hiw-solid { border-top-color: var(--verdigris); } .hiw-legend i.hiw-dash { border-top-style: dashed; } .hiw-cap { text-align: center; font-family: var(--font-serif); font-style: italic; font-size: 0.82rem; /* 0.72 lifts this reading caption to ~5.4:1 (AA); 0.55 was ~3.3:1 */ color: rgba(44, 42, 38, 0.72); margin: 0.6rem 0 0; } .hiw-axis { display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.9rem; align-items: baseline; padding: 0.9rem 0; border-top: 1px solid rgba(158, 124, 56, 0.13); } .hiw-axis:first-child { border-top: none; } .hiw-co { font-family: var(--font-sans); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--bronze); font-weight: 700; padding-top: 0.15rem; } .hiw-axis strong { display: block; font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.3rem; } .hiw-axis p { font-size: 0.9rem; line-height: 1.6; color: rgba(44, 42, 38, 0.75); margin: 0; } .hiw-obj { fill: rgba(43, 89, 64, 0.08); stroke: var(--verdigris); stroke-width: 1.7; stroke-linejoin: round; } /* Motion — introduced only when the reader hasn't asked for reduced motion */ @media (prefers-reduced-motion: no-preference) { .js-loaded .hiw-sig .hiw-obj { stroke-dasharray: 560; stroke-dashoffset: 560; } .js-loaded .hiw-plate.in-view .hiw-sig .hiw-obj { stroke-dashoffset: 0; transition: stroke-dashoffset 1.7s ease 0.55s; } .js-loaded .hiw-sig .hiw-vx, .js-loaded .hiw-sig .hiw-dot { opacity: 0; } .js-loaded .hiw-plate.in-view .hiw-sig .hiw-vx, .js-loaded .hiw-plate.in-view .hiw-sig .hiw-dot { opacity: 1; transition: opacity 0.5s ease 2.1s; } .js-loaded .hiw-plate.in-view .hiw-scan { animation: hiw-scan 2.1s cubic-bezier(0.5, 0, 0.5, 1) 0.15s 1 both; } } @keyframes hiw-scan { 0% { left: 2%; opacity: 0; } 12% { opacity: 0.9; } 88% { opacity: 0.9; } 100% { left: 98%; opacity: 0; } } /* ══════════════════════════════════════════════════════════════ NEWSLETTER — compact subscribe band Sits visually between the dark .bridge-section above and the darker .site-footer below: a deliberate mid-tone of velvet/charcoal. ══════════════════════════════════════════════════════════════ */ .newsletter-section { position: relative; background: var(--velvet-mid); color: var(--ivory); padding: 4rem 0; overflow: hidden; } .newsletter-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 18% 30%, rgba(158, 124, 56, 0.10), transparent 55%), radial-gradient(circle at 82% 70%, rgba(43, 89, 64, 0.10), transparent 55%); pointer-events: none; } .newsletter-container { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2.5rem; } .newsletter-text { max-width: 36ch; } .newsletter-text h2 { color: var(--ivory); margin-bottom: 0.5rem; font-size: clamp(1.5rem, 2.5vw, 1.875rem); } .newsletter-text p { color: rgba(250, 248, 243, 0.7); font-size: 1rem; line-height: 1.6; } .newsletter-form { flex: 1 1 380px; max-width: 480px; } .newsletter-field { display: flex; gap: 0.75rem; border: 1px solid rgba(250, 248, 243, 0.22); background: var(--velvet-mid); padding: 0.4rem 0.4rem 0.4rem 1.25rem; transition: border-color var(--transition), box-shadow var(--transition); } .newsletter-field:focus-within { border-color: var(--bronze); box-shadow: 0 0 0 3px rgba(158, 124, 56, 0.18); } .newsletter-field input[type="email"] { flex: 1; width: auto; background: var(--velvet-mid); background-color: var(--velvet-mid); -webkit-appearance: none; appearance: none; border: none; padding: 0.65rem 0; color: var(--ivory); font-family: var(--font-sans); font-size: 1rem; } /* Suppress browser autofill white background */ .newsletter-field input[type="email"]:-webkit-autofill, .newsletter-field input[type="email"]:-webkit-autofill:hover, .newsletter-field input[type="email"]:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #243828 inset; -webkit-text-fill-color: var(--ivory); caret-color: var(--ivory); } .newsletter-field input[type="email"]::placeholder { color: rgba(250, 248, 243, 0.45); } .newsletter-field input[type="email"]:focus { outline: none; } .newsletter-field input[aria-invalid="true"] { box-shadow: none; } .newsletter-submit { flex-shrink: 0; padding: 0.75rem 1.5rem; white-space: nowrap; } .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; } .field-error { display: block; font-size: 0.8125rem; color: var(--error-light); font-family: var(--font-sans); margin-top: 0.5rem; } .field-error[hidden] { display: none; } .form-feedback { margin-top: 1rem; padding: 0.85rem 1.1rem; font-size: 0.9375rem; border-left: 3px solid; } .form-feedback--success { border-color: var(--verdigris); background: rgba(43, 89, 64, 0.12); color: var(--success-light); } .form-feedback--error { border-color: var(--error); background: rgba(155, 38, 38, 0.12); color: var(--error-light); } @media (max-width: 700px) { .newsletter-container { flex-direction: column; align-items: stretch; gap: 1.5rem; } .newsletter-form { flex: none; width: 100%; max-width: 100%; } .newsletter-field { flex-direction: column; align-items: stretch; gap: 0.5rem; padding: 0.75rem 1rem; } .newsletter-submit { width: 100%; margin-top: 0.25rem; } .newsletter-section { padding: 3rem 0; } } /* ══════════════════════════════════════════════════════════════ BRIDGING THE ERAS — DARK RESEARCH SECTION ══════════════════════════════════════════════════════════════ */ .bridge-section { position: relative; overflow: hidden; background: var(--ink); color: #fff; } /* Layered ambient glows */ .bridge-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 60% at 12% 40%, rgba(158, 124, 56, 0.10) 0%, transparent 70%), radial-gradient(ellipse 45% 55% at 85% 55%, rgba(43, 89, 64, 0.12) 0%, transparent 70%), radial-gradient(ellipse 30% 30% at 50% 30%, rgba(201, 168, 76, 0.05) 0%, transparent 60%); pointer-events: none; z-index: 0; } /* Subtle dot grid overlay */ .bridge-section::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; z-index: 0; mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 75%); } /* Decorative background SVG */ .bridge-graphic { position: absolute; inset: 0; pointer-events: none; user-select: none; opacity: 0.3; } .bridge-graphic svg { width: 100%; height: 100%; object-fit: cover; } /* Animated pulse on digital nodes */ @keyframes node-pulse { 0%, 100% { r: 6; opacity: 0.75; } 50% { r: 8; opacity: 0.5; } } @keyframes node-pulse-lg { 0%, 100% { r: 7; opacity: 0.75; } 50% { r: 9.5; opacity: 0.5; } } @keyframes node-glow { 0%, 100% { stroke-opacity: 0.3; } 50% { stroke-opacity: 0.6; } } /* Ensure content sits above background layers */ .bridge-section > .container { position: relative; z-index: 1; } /* Override section-label and headings for dark background */ .bridge-section .section-label { color: var(--bridge-gold); } .bridge-section h2 { color: #fff; margin-bottom: 0.5rem; } .bridge-subheading { font-family: var(--font-serif); font-size: clamp(1rem, 2vw, 1.2rem); font-style: italic; color: rgba(255, 255, 255, 0.45); margin-bottom: 2.25rem; } .bridge-intro { max-width: 64ch; font-size: 1.0625rem; line-height: 1.8; color: rgba(255, 255, 255, 0.72); margin-bottom: 4rem; position: relative; z-index: 1; } /* Block: The New Knowledge / Creating Opportunities */ .bridge-block { position: relative; z-index: 1; margin-bottom: 4rem; } .bridge-block h3 { color: #fff; font-size: 1.45rem; font-weight: 400; margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(201, 168, 76, 0.35); display: inline-block; min-width: 260px; } .bridge-block-lead { font-size: 1rem; line-height: 1.75; color: rgba(255, 255, 255, 0.6); max-width: 62ch; margin-bottom: 2.25rem; } /* Cards grid */ .bridge-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .bridge-card { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px; padding: 2rem 1.75rem; display: flex; flex-direction: column; gap: 0.75rem; transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease; cursor: pointer; position: relative; } .bridge-card::before { content: ''; position: absolute; inset: -1px; border-radius: 13px; padding: 1px; background: linear-gradient( 160deg, rgba(201, 168, 76, 0.0) 0%, rgba(201, 168, 76, 0.08) 40%, rgba(43, 89, 64, 0.08) 60%, rgba(43, 89, 64, 0.0) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; } .bridge-card:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(201, 168, 76, 0.3); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(201, 168, 76, 0.12), 0 0 60px -10px rgba(201, 168, 76, 0.08); } .bridge-card:hover::before { opacity: 1; } /* Directional "open" cue — a hairline arrow in the top-right, aligned to the icon row. Faint by default (a quiet click affordance, also on touch), then brightens to gold and nudges right on hover. No underlines. */ .bridge-card::after { content: ""; position: absolute; top: 2rem; right: 1.75rem; width: 18px; height: 44px; /* span the icon so the arrow centres to it */ background-color: rgba(255, 255, 255, 0.3); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12.5 6l6.5 6-6.5 6'/%3E%3C/svg%3E") center / 18px 18px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12.5 6l6.5 6-6.5 6'/%3E%3C/svg%3E") center / 18px 18px no-repeat; transition: transform 0.4s ease, background-color 0.4s ease; pointer-events: none; } .bridge-card:hover::after { background-color: var(--bridge-gold); transform: translateX(3px); } .bridge-card-icon { flex-shrink: 0; margin-bottom: 0.25rem; } .bridge-card strong { display: block; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; } .bridge-card:hover strong { color: var(--bridge-gold); } .bridge-card p { font-size: 0.9375rem; line-height: 1.72; color: rgba(255, 255, 255, 0.55); margin: 0; } /* Closing line */ .bridge-closing { position: relative; z-index: 1; font-family: var(--font-serif); font-size: clamp(1.5rem, 3.5vw, 2.4rem); font-style: italic; color: rgba(255, 255, 255, 0.9); text-align: center; padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid rgba(201, 168, 76, 0.2); text-shadow: 0 0 40px rgba(201, 168, 76, 0.12); } .bridge-closing::after { content: ''; display: block; width: 3rem; height: 1px; background: var(--bronze); margin: 1.25rem auto 0; opacity: 0.5; } /* Bridge section responsive */ @media (max-width: 900px) { .bridge-cards { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .bridge-cards { grid-template-columns: 1fr; } .bridge-block h3 { min-width: unset; display: block; } } /* Mobile: drop the scroll-reveal fade/slide for this section only — its content appears immediately, fully visible. Desktop keeps the reveal. JS still toggles .in-view; these !important rules override it, same as the reduced-motion block above. */ @media (max-width: 768px) { .js-loaded .bridge-section .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ══════════════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════════════ */ .site-footer { background: var(--ink); color: var(--ivory); padding-block: clamp(3rem, 6vw, 5rem); } .footer-inner { display: grid; grid-template-columns: 1fr auto auto; grid-template-rows: auto auto; gap: 2.5rem 3rem; align-items: start; } .footer-brand { grid-column: 1; grid-row: 1; } .footer-contact { grid-column: 2; grid-row: 1; } .footer-nav { grid-column: 3; grid-row: 1; } .footer-copyright { grid-column: 1 / -1; grid-row: 2; } .footer-contact-line { font-size: 0.8125rem; line-height: 1.8; } .footer-contact-label { display: block; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.45; font-size: 0.6875rem; margin-bottom: 0.15rem; } .footer-contact-line a { display: inline-block; padding: 0.35rem 0; color: var(--ivory); text-decoration: none; opacity: 0.8; transition: opacity var(--transition), color var(--transition); } .footer-contact-line a:hover { opacity: 1; color: var(--bronze); } .footer-contact-line + .footer-contact-line { margin-top: 0.85rem; } .wordmark--footer { display: block; margin-bottom: 0.75rem; color: var(--bronze); text-decoration: none; } .footer-brand p { font-size: 0.9375rem; line-height: 1.5; opacity: 0.65; } .footer-location { margin-top: 0.4rem; font-size: 0.8125rem !important; opacity: 0.45 !important; } .footer-nav ul { display: flex; flex-direction: column; gap: 0.2rem; } .footer-nav a { /* Padding turns each nav item into a comfortable ~44px touch row */ display: inline-block; padding: 0.6rem 0; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--ivory); opacity: 0.55; transition: opacity var(--transition); } .footer-nav a:hover { opacity: 1; } .footer-nav a[aria-current="page"] { opacity: 1; color: var(--bronze); } .footer-copyright { font-size: 0.8125rem; line-height: 1.5; opacity: 0.35; } /* ── 404 / ERROR PAGE ────────────────────────────────────────── Moved here from an inline