/* ============================================================================ AhuraIntel — shared stylesheet Source of truth: ../aesthetics/2026.07.23_ahuraintel-visual-brand-guidelines.md - Tokens (§12) reproduced verbatim; six production tokens UNCHANGED. - Written with LOGICAL PROPERTIES throughout so Phase-4 Farsi/RTL is free. - Motion is enhancement only (Phase 5); this file ships the accessible baseline. ========================================================================== */ /* ───────────────────────────────────────────────────────────── 1. DESIGN TOKENS (brand guidelines §12 — additive; existing unchanged) ───────────────────────────────────────────────────────────── */ :root { /* ─── EXISTING — DO NOT CHANGE (production source of truth) ─── */ --bg-color: #030303; /* near-black page background */ --card-bg: #0a0a0a; /* slightly-lifted surface */ --text-primary: #e0e0e0; --text-secondary: #707070; /* ⚠ large/decorative text only — 4.16:1, fails AA for body */ --accent-blue: #00f3ff; /* The Light / Defender */ --accent-red: #ff003c; /* The Shadow / Attacker */ --font-mono: "Courier New", Courier, monospace; --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* ─── NEW: text ─── */ --text-secondary-strong: #a0a0a0; /* 7.89:1 — use for BODY-SIZE secondary text */ /* ─── NEW: accent states ─── */ --accent-blue-hover: #5cf7ff; --accent-blue-active: #00c4d4; --accent-red-hover: #ff3d68; --accent-red-active: #cc0030; /* large text / borders / fills only */ /* ─── NEW: semantic (distinct from Attacker red) ─── */ --color-success: #3ddc84; /* "Clearance Verified" */ --color-warning: #ffb300; --color-error: #ff7043; /* warm orange-red — NOT the neon Attacker red */ --color-info: #00f3ff; /* ─── NEW: surfaces, borders, states ─── */ --border-subtle: #2a2a36; --surface-input: #111118; --state-disabled-fg: #707070; --state-disabled-bg: #111118; --focus-ring: #00f3ff; --focus-ring-width: 2px; --focus-ring-offset: 2px; /* ─── NEW: system-readout mono (JetBrains Mono, OFL, self-hosted; Courier New base unchanged) ─── */ --font-readout: "JetBrains Mono", "Courier New", Courier, monospace; /* ─── NEW: Farsi (L2/) font tracks ─── */ --font-fa: "Vazirmatn", "Estedad", "Segoe UI", Tahoma, sans-serif; --font-fa-mono: "Courier New", "Vazirmatn", monospace; /* ─── NEW: type scale ─── */ --fs-display: 3.052rem; /* 48.8px */ --fs-h1: 2.441rem; /* 39.1px */ --fs-h2: 1.953rem; /* 31.3px */ --fs-h3: 1.563rem; /* 25.0px */ --fs-h4: 1.25rem; /* 20.0px */ --fs-h5: 1.125rem; /* 18.0px */ --fs-h6: 1rem; /* 16.0px */ --fs-lead: 1.125rem; /* 18.0px */ --fs-body: 1rem; /* 16.0px */ --fs-small: 0.875rem; /* 14.0px */ --fs-caption: 0.8rem; /* 12.8px */ --fs-readout: 0.875rem; /* 14.0px, mono, uppercase */ --lh-tight: 1.1; --lh-heading: 1.2; --lh-body: 1.6; --lh-fa-body: 1.8; /* Farsi runs taller */ --tracking-tight: -0.01em; --tracking-readout: 0.08em; --tracking-wordmark: 0.1em; /* ─── NEW: spacing scale (4px base) ─── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; /* ─── NEW: radii, glow, motion ─── */ --radius-sm: 4px; --radius-md: 6px; --glow-blue: 0 0 15px rgba(0, 243, 255, 0.40); --glow-blue-soft: 0 0 20px rgba(0, 243, 255, 0.15); --glow-red: 0 0 15px rgba(255, 0, 60, 0.40); --motion-fast: 150ms; --motion-med: 200ms; --motion-reveal: 500ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --measure: 65ch; } /* Farsi track: applied on — harmless on EN pages */ :root:lang(fa) { --font-main: var(--font-fa); --lh-body: var(--lh-fa-body); } /* ───────────────────────────────────────────────────────────── 2. RESET / BASE ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-block-size: 100vh; background-color: var(--bg-color); /* Subtle grid — carried over from the production index.html, kept faint */ background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 30px 30px; color: var(--text-primary); font-family: var(--font-main); font-size: var(--fs-body); line-height: var(--lh-body); display: flex; flex-direction: column; } img, svg, video { max-inline-size: 100%; block-size: auto; display: block; } a { color: var(--accent-blue); text-decoration: none; } a:hover { color: var(--accent-blue-hover); text-decoration: underline; } hr { border: 0; border-block-start: 1px solid var(--border-subtle); margin-block: var(--space-8); } /* Focus: never removed without a visible replacement (§12) */ :where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); border-radius: 2px; } /* Skip link (a11y) */ .skip-link { position: absolute; inset-inline-start: var(--space-4); inset-block-start: -3rem; z-index: 100; background: var(--accent-blue); color: #030303; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); font-family: var(--font-readout); font-size: var(--fs-small); transition: inset-block-start var(--motion-fast) var(--ease-standard); } .skip-link:focus { inset-block-start: var(--space-4); color: #030303; text-decoration: none; } /* ───────────────────────────────────────────────────────────── 3. TYPOGRAPHY ───────────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-main); color: var(--text-primary); margin-block: 0 var(--space-4); line-height: var(--lh-heading); text-wrap: balance; } h1 { font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); } h2 { font-size: var(--fs-h2); font-weight: 700; } h3 { font-size: var(--fs-h3); font-weight: 600; } h4 { font-size: var(--fs-h4); font-weight: 600; } h5 { font-size: var(--fs-h5); font-weight: 600; } h6 { font-size: var(--fs-h6); font-weight: 700; } p { margin-block: 0 var(--space-4); max-inline-size: var(--measure); } /* The "system readout" voice — mono, tracked caps, semantic (says "verified fact") */ .readout { font-family: var(--font-readout); font-size: var(--fs-readout); letter-spacing: var(--tracking-readout); text-transform: uppercase; color: var(--accent-blue); } /* ───────────────────────────────────────────────────────────── 4. LAYOUT PRIMITIVES ───────────────────────────────────────────────────────────── */ .wrap { inline-size: 100%; max-inline-size: 72rem; margin-inline: auto; padding-inline: var(--space-6); } .wrap--narrow { max-inline-size: 46rem; } main { flex: 1 0 auto; } .section { padding-block: var(--space-16); } .section--tight { padding-block: var(--space-12); } /* ───────────────────────────────────────────────────────────── 5. HEADER / NAV ───────────────────────────────────────────────────────────── */ .site-header { position: sticky; inset-block-start: 0; z-index: 50; background: rgba(3, 3, 3, 0.85); backdrop-filter: blur(8px); border-block-end: 1px solid var(--border-subtle); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); flex-wrap: wrap; } .brand { font-family: var(--font-main); font-weight: 700; font-size: var(--fs-h6); letter-spacing: var(--tracking-wordmark); text-transform: uppercase; white-space: nowrap; } .brand:hover { text-decoration: none; } .brand .ahura { color: var(--text-primary); } .brand .intel { color: var(--accent-blue); text-shadow: 0 0 15px var(--accent-blue); } .nav { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; } .nav a { font-family: var(--font-readout); font-size: var(--fs-small); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary-strong); padding-block-end: 2px; border-block-end: 1px solid transparent; } .nav a:hover, .nav a[aria-current="page"] { color: var(--accent-blue); border-block-end-color: var(--accent-blue); text-decoration: none; } /* ───────────────────────────────────────────────────────────── 6. BUTTONS ───────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-readout); font-size: var(--fs-small); letter-spacing: var(--tracking-readout); text-transform: uppercase; padding: var(--space-3) var(--space-6); border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard); } .btn:hover { text-decoration: none; } /* Primary = Defender (blue outline) — the default CTA */ .btn--primary { background: transparent; border-color: var(--accent-blue); color: var(--accent-blue); } .btn--primary:hover { border-color: var(--accent-blue-hover); color: var(--accent-blue-hover); box-shadow: var(--glow-blue); } .btn--primary:active { border-color: var(--accent-blue-active); color: var(--accent-blue-active); box-shadow: none; } /* Filled = high-emphasis CTA (dark text on blue; ~14.99:1) */ .btn--filled { background: var(--accent-blue); border-color: var(--accent-blue); color: #030303; } .btn--filled:hover { background: var(--accent-blue-hover); border-color: var(--accent-blue-hover); color: #030303; box-shadow: var(--glow-blue); } .btn--filled:active { background: var(--accent-blue-active); border-color: var(--accent-blue-active); } /* Attacker variant — ONLY for adversary-POV actions (semantic, not a generic secondary) */ .btn--attacker { background: transparent; border-color: var(--accent-red); color: var(--accent-red); } .btn--attacker:hover { border-color: var(--accent-red-hover); color: var(--accent-red-hover); box-shadow: var(--glow-red); } .btn[aria-disabled="true"], .btn:disabled { border-color: var(--state-disabled-fg); color: var(--state-disabled-fg); background: var(--state-disabled-bg); cursor: not-allowed; box-shadow: none; pointer-events: none; } /* ───────────────────────────────────────────────────────────── 7. HERO ───────────────────────────────────────────────────────────── */ .hero { position: relative; overflow: hidden; border-block-end: 1px solid var(--border-subtle); } .hero__bg { position: absolute; inset: 0; object-fit: cover; inline-size: 100%; block-size: 100%; opacity: 0.42; /* +20% relative to the original 0.35, per operator request 2026-07-23 */ z-index: 0; } .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,3,3,0.55), rgba(3,3,3,0.92)); z-index: 1; } .hero__inner { position: relative; z-index: 2; padding-block: var(--space-24); } .hero__eyebrow { margin-block-end: var(--space-3); } .hero__title { font-size: var(--fs-h1); max-inline-size: 22ch; margin-block-end: var(--space-4); } .hero--lg .hero__title { font-size: var(--fs-display); } @media (max-width: 40rem) { .hero--lg .hero__title { font-size: var(--fs-h1); } } /* ~20% smaller on mobile, per operator */ .hero__lead { font-size: var(--fs-lead); color: var(--text-secondary-strong); max-inline-size: var(--measure); margin-block-end: var(--space-8); } .hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; } /* Split hero: copy + operator portrait badge (used on the homepage) */ .hero__split { display: grid; grid-template-columns: 1fr auto; gap: var(--space-16); align-items: center; } @media (max-width: 56rem) { .hero__split { grid-template-columns: 1fr; justify-items: center; text-align: center; } .hero__split .hero__copy { order: 2; } .hero__split .portrait { order: 1; } } .hero__copy .hero__actions { justify-content: flex-start; } @media (max-width: 56rem) { .hero__copy .hero__actions { justify-content: center; } } .hero__copy--roomy { max-inline-size: 34rem; } /* keeps text clear of a bleeding side portrait */ /* ─── Operator portrait badge — the split-lens duality made into a frame ─── */ .portrait { position: relative; inline-size: clamp(180px, 20vw, 260px); aspect-ratio: 1; flex-shrink: 0; margin-block-end: var(--space-4); } .portrait__ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 135deg, var(--accent-blue) 0deg, var(--accent-blue) 170deg, var(--accent-red) 190deg, var(--accent-red) 360deg); padding: 3px; /* ring thickness */ } .portrait__frame { position: relative; inline-size: 100%; block-size: 100%; border-radius: 50%; overflow: hidden; background: var(--card-bg); box-shadow: var(--glow-blue-soft), 0 0 24px rgba(255, 0, 60, 0.12); } .portrait__frame img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transform: scale(1.3); transform-origin: 50% 32%; /* zooms toward the glasses/upper-face, cropping the headroom above the hair */ } .portrait__tag { position: absolute; inset-block-end: -0.7rem; inset-inline-start: 50%; transform: translateX(-50%); background: var(--bg-color); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 0.3rem 0.9rem; font-family: var(--font-readout); font-size: var(--fs-caption); letter-spacing: var(--tracking-readout); text-transform: uppercase; color: var(--accent-blue); white-space: nowrap; } /* ─── Cyberframe — full-picture HUD-style portrait frame (used on /contact) ─── */ .cyberframe { position: relative; inline-size: clamp(220px, 26vw, 340px); aspect-ratio: 1820 / 1397; /* matches the source photo exactly — full picture, zero crop */ flex-shrink: 0; margin-block-end: var(--space-6); } .cyberframe__panel { position: relative; inline-size: 100%; block-size: 100%; background: var(--card-bg); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--glow-blue-soft), 0 0 24px rgba(255, 0, 60, 0.10); } .cyberframe__panel img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; /* the whole picture, never cropped */ } /* faint scanline texture — subordinate, never competes with the subject (brand §6.0) */ .cyberframe__panel::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px); pointer-events: none; } /* HUD corner brackets — diagonal Defender/Attacker duality (blue TL+BR, red TR+BL) */ .cyberframe__corner { position: absolute; inline-size: 22px; block-size: 22px; } .cyberframe__corner--tl { inset-block-start: -1px; inset-inline-start: -1px; border-block-start: 2px solid var(--accent-blue); border-inline-start: 2px solid var(--accent-blue); } .cyberframe__corner--tr { inset-block-start: -1px; inset-inline-end: -1px; border-block-start: 2px solid var(--accent-red); border-inline-end: 2px solid var(--accent-red); } .cyberframe__corner--bl { inset-block-end: -1px; inset-inline-start: -1px; border-block-end: 2px solid var(--accent-red); border-inline-start: 2px solid var(--accent-red); } .cyberframe__corner--br { inset-block-end: -1px; inset-inline-end: -1px; border-block-end: 2px solid var(--accent-blue); border-inline-end: 2px solid var(--accent-blue); } /* Large bleeding variant — used on the homepage hero, deliberately breaks the grid and hangs off the viewport edge. LTR-specific (translateX, not logical) — this is a decorative homepage flourish, not yet evaluated for a future Farsi homepage (Phase 4); re-check direction when that's built. */ /* Homepage hero figure — the transparent cutout, no frame, anchored bottom-right and scaled past the hero so it bleeds off the edge (LTR-specific: translateX). */ .hero__figure { position: absolute; inset-block-end: 0; inset-inline-end: 0; block-size: 100%; /* spans exactly between the hero's top & bottom lines */ inline-size: auto; max-inline-size: none; object-fit: contain; object-position: bottom right; transform: translateX(12%); /* nudge off the right edge, clipped by overflow:hidden */ z-index: 2; /* above .hero::after dark overlay */ opacity: 0.7; /* dimmed 30% per operator request 2026-07-24 */ pointer-events: none; } /* Narrow viewports: no room to bleed beside the text — fade the figure into the background behind the copy so it's present but never competes for legibility. */ @media (max-width: 56rem) { .hero__figure { block-size: auto; inline-size: 88%; inset-block-end: auto; inset-block-start: 0; object-position: top center; transform: none; opacity: 0.22; z-index: 0; /* sits under the dark overlay + text on mobile */ } } .cyberframe__tag { position: absolute; inset-block-end: var(--space-3); inset-inline-start: 50%; transform: translateX(-50%); background: rgba(3, 3, 3, 0.75); backdrop-filter: blur(4px); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 0.3rem 0.9rem; font-family: var(--font-readout); font-size: var(--fs-caption); letter-spacing: var(--tracking-readout); text-transform: uppercase; color: var(--accent-blue); white-space: nowrap; } /* ─── Bold standalone statement (no supporting paragraph) ─── */ .statement { text-align: center; } .statement h2 { font-size: var(--fs-display); max-inline-size: 20ch; margin-inline: auto; } @media (max-width: 40rem) { .statement h2 { font-size: var(--fs-h1); } } /* ─── Whisper — deliberately quiet, never competes with a page's one big headline ─── */ .whisper { font-size: var(--fs-small); font-style: italic; color: var(--text-secondary-strong); letter-spacing: 0.02em; max-inline-size: 34ch; margin-inline: auto; } /* ───────────────────────────────────────────────────────────── 8. PROSE (long-form: about, research, credentials, blog posts) ───────────────────────────────────────────────────────────── */ .prose { max-inline-size: var(--measure); } .prose > * { max-inline-size: var(--measure); } .prose h2 { font-size: var(--fs-h2); margin-block: var(--space-12) var(--space-4); padding-block-end: var(--space-2); border-block-end: 1px solid var(--border-subtle); } .prose h3 { font-size: var(--fs-h3); margin-block: var(--space-8) var(--space-3); } .prose h4 { font-size: var(--fs-h4); margin-block: var(--space-6) var(--space-2); } .prose p { color: var(--text-primary); } .prose ul, .prose ol { margin-block: 0 var(--space-4); padding-inline-start: var(--space-6); max-inline-size: var(--measure); } .prose li { margin-block-end: var(--space-2); } .prose li::marker { color: var(--accent-blue); } .prose strong { color: var(--text-primary); font-weight: 700; } .prose a { border-block-end: 1px solid rgba(0, 243, 255, 0.35); } .prose a:hover { border-block-end-color: var(--accent-blue-hover); text-decoration: none; } .prose blockquote { margin-inline: 0; margin-block: var(--space-6); padding-inline-start: var(--space-6); border-inline-start: 3px solid var(--accent-blue); color: var(--text-secondary-strong); font-size: var(--fs-lead); } .prose code { font-family: var(--font-readout); font-size: 0.9em; background: var(--surface-input); padding: 0.1em 0.35em; border-radius: var(--radius-sm); color: var(--text-primary); } /* ASCII figures (diagrams — the _doc/ascii/ house style, per template-007) */ .ascii-figure { margin-block: var(--space-8); margin-inline: 0; max-inline-size: 100%; } .ascii-figure pre { overflow-x: auto; background: var(--card-bg); border: 1px solid var(--border-subtle); border-inline-start: 3px solid var(--accent-blue); border-radius: var(--radius-md); padding: var(--space-6); margin: 0; font-family: var(--font-readout); font-size: var(--fs-small); line-height: 1.5; color: var(--text-primary); white-space: pre; /* diagrams are LTR-structured even on RTL pages */ direction: ltr; text-align: start; } .ascii-figure figcaption { margin-block-start: var(--space-2); font-family: var(--font-readout); font-size: var(--fs-caption); letter-spacing: var(--tracking-readout); text-transform: uppercase; color: var(--text-secondary-strong); } /* Tables (blog posts use them) */ .prose table { inline-size: 100%; max-inline-size: 100%; border-collapse: collapse; margin-block: var(--space-6); font-size: var(--fs-small); } .prose th, .prose td { text-align: start; padding: var(--space-3); border: 1px solid var(--border-subtle); vertical-align: top; } .prose th { color: var(--accent-blue); font-family: var(--font-readout); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--tracking-readout); } .table-scroll { overflow-x: auto; } /* Page intro lead line (the 80/20 first-screen sentence on prose pages) */ .lead { font-size: var(--fs-lead); color: var(--text-secondary-strong); max-inline-size: var(--measure); margin-block-end: var(--space-8); } /* ───────────────────────────────────────────────────────────── 9. CARDS + GRIDS ───────────────────────────────────────────────────────────── */ .card { background: var(--card-bg); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-6); } .card-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); } /* Blog index list */ .post-card { display: flex; flex-direction: column; gap: var(--space-3); background: var(--card-bg); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-6); transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); } a.post-card:hover { border-color: var(--accent-blue); box-shadow: var(--glow-blue-soft); transform: translateY(-2px); text-decoration: none; } .post-card__meta { display: flex; gap: var(--space-3); align-items: baseline; flex-wrap: wrap; font-family: var(--font-readout); font-size: var(--fs-caption); letter-spacing: var(--tracking-readout); text-transform: uppercase; color: var(--text-secondary-strong); } .post-card__order { color: var(--accent-blue); } .post-card__title { font-size: var(--fs-h4); font-weight: 600; color: var(--text-primary); margin: 0; } a.post-card:hover .post-card__title { color: var(--accent-blue); } .post-card__summary { font-size: var(--fs-small); color: var(--text-secondary-strong); margin: 0; } /* Upcoming (not yet published) — visibly distinct, not a link */ .post-card--upcoming { opacity: 0.72; border-style: dashed; } .post-card--upcoming .post-card__order { color: var(--text-secondary); } .tag-scheduled { font-family: var(--font-readout); font-size: var(--fs-caption); letter-spacing: var(--tracking-readout); text-transform: uppercase; color: var(--text-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 0 var(--space-2); } /* ───────────────────────────────────────────────────────────── 10. ARTICLE (single blog post) ───────────────────────────────────────────────────────────── */ .article__header { margin-block-end: var(--space-8); } .article__meta { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: baseline; margin-block-end: var(--space-4); } .article__title { font-size: var(--fs-display); max-inline-size: 24ch; } @media (max-width: 40rem) { .article__title { font-size: var(--fs-h1); } } .series-box { background: var(--card-bg); border: 1px solid var(--border-subtle); border-inline-start: 3px solid var(--accent-blue); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); margin-block: var(--space-8); } .series-box__label { margin-block-end: var(--space-2); } .series-box ul { margin: 0; padding-inline-start: var(--space-6); } /* ───────────────────────────────────────────────────────────── 11. RECORD BLOCKS (credentials) ───────────────────────────────────────────────────────────── */ .record { margin-block-end: var(--space-6); max-inline-size: var(--measure); } .record__title { font-size: var(--fs-h5); font-weight: 600; color: var(--text-primary); margin-block-end: var(--space-1); } .record__org { font-family: var(--font-readout); font-size: var(--fs-small); color: var(--accent-blue); letter-spacing: 0.03em; } .record__dates { font-family: var(--font-readout); font-size: var(--fs-caption); color: var(--text-secondary-strong); text-transform: uppercase; letter-spacing: var(--tracking-readout); } .record__body { margin-block-start: var(--space-2); color: var(--text-secondary-strong); font-size: var(--fs-small); } .record__body strong { color: var(--text-primary); } /* ───────────────────────────────────────────────────────────── 12. CONTACT METHODS + FORMS (forms included for future use) ───────────────────────────────────────────────────────────── */ .contact-methods { list-style: none; margin: 0 0 var(--space-8); padding: 0; display: grid; gap: var(--space-3); } .contact-methods li { display: flex; gap: var(--space-3); align-items: baseline; } .contact-methods .k { font-family: var(--font-readout); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--tracking-readout); color: var(--text-secondary-strong); min-inline-size: 7rem; } .field { display: grid; gap: var(--space-2); margin-block-end: var(--space-4); max-inline-size: 32rem; } .field label { font-size: var(--fs-small); color: var(--text-secondary-strong); } .field input, .field textarea { font-family: var(--font-main); font-size: var(--fs-body); background: var(--surface-input); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-primary); padding: 0.625rem 0.875rem; text-align: start; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 2px rgba(0, 243, 255, 0.35); } /* ───────────────────────────────────────────────────────────── 13. CALLOUT (dual-ledger / key insight) ───────────────────────────────────────────────────────────── */ .callout { background: var(--card-bg); border: 1px solid var(--border-subtle); border-inline-start: 3px solid var(--accent-blue); border-radius: var(--radius-md); padding: var(--space-6); margin-block: var(--space-8); max-inline-size: var(--measure); } .callout__label { margin-block-end: var(--space-2); } .callout p:last-child { margin-block-end: 0; } /* Feature list (audit "what you get") */ .feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); } .feature-list li { padding-inline-start: var(--space-6); position: relative; max-inline-size: var(--measure); } .feature-list li::before { content: "▸"; position: absolute; inset-inline-start: 0; color: var(--accent-blue); } /* Numbered process steps */ .steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: var(--space-6); } .steps li { counter-increment: step; padding-inline-start: var(--space-12); position: relative; max-inline-size: var(--measure); } .steps li::before { content: counter(step, decimal-leading-zero); position: absolute; inset-inline-start: 0; font-family: var(--font-readout); color: var(--accent-blue); font-size: var(--fs-h4); } .steps__title { font-weight: 600; color: var(--text-primary); } /* ───────────────────────────────────────────────────────────── 14. FOOTER ───────────────────────────────────────────────────────────── */ .site-footer { border-block-start: 1px solid var(--border-subtle); background: var(--bg-color); margin-block-start: var(--space-16); } .site-footer__inner { padding-block: var(--space-12); display: grid; gap: var(--space-6); } .site-footer .capability { font-family: var(--font-readout); font-size: var(--fs-readout); letter-spacing: var(--tracking-readout); text-transform: uppercase; color: var(--text-secondary-strong); } .site-footer nav { display: flex; gap: var(--space-6); flex-wrap: wrap; } .site-footer nav a { font-family: var(--font-readout); font-size: var(--fs-small); color: var(--text-secondary-strong); text-transform: uppercase; letter-spacing: 0.03em; } .site-footer nav a:hover { color: var(--accent-blue); } .site-footer__meta { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; font-size: var(--fs-small); color: var(--text-secondary-strong); } .site-footer__meta .status b { position: relative; color: var(--accent-blue); font-weight: 400; padding-inline-start: 0.9em; } .site-footer__meta .status b::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 50%; transform: translateY(-50%); inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--accent-blue); box-shadow: 0 0 0 0 rgba(0, 243, 255, 0.6); animation: status-live 2.2s ease-out infinite; } @keyframes status-live { 0% { box-shadow: 0 0 0 0 rgba(0, 243, 255, 0.55); } 70% { box-shadow: 0 0 0 6px rgba(0, 243, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 243, 255, 0); } } /* ───────────────────────────────────────────────────────────── 15. UTILITIES ───────────────────────────────────────────────────────────── */ .stack > * + * { margin-block-start: var(--space-4); } .stack-lg > * + * { margin-block-start: var(--space-8); } .text-secondary { color: var(--text-secondary-strong); } .visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ───────────────────────────────────────────────────────────── 16. RESPONSIVE ───────────────────────────────────────────────────────────── */ @media (max-width: 48rem) { .site-header__inner { gap: var(--space-3); } .nav { gap: var(--space-4); inline-size: 100%; } .hero__inner { padding-block: var(--space-16); } .section { padding-block: var(--space-12); } } /* ───────────────────────────────────────────────────────────── 17. MOTION IS ENHANCEMENT ONLY (§12) ───────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }