/* Grid Signal shared base styles — see DESIGN.md. Loaded by every page. */ :root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-inout: cubic-bezier(0.77, 0, 0.175, 1); --dur-fast: 150ms; --dur-base: 300ms; --dur-reveal: 650ms; --space-section: clamp(5rem, 4rem + 6vw, 8rem); --space-section-tight: clamp(3rem, 2.5rem + 3vw, 4.5rem); } /* --------------------------------------------------------------------------- Reveal system (DESIGN.md §8) — content is visible by default. A pre-paint head script adds .js-motion to only when the visitor has IntersectionObserver and no reduced-motion preference; only then do hidden states exist. No-JS, crawlers, print, and reduced-motion all see everything. --------------------------------------------------------------------------- */ .reveal { transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); } .js-motion .reveal:not(.active) { opacity: 0; } .js-motion .reveal-up:not(.active) { transform: translateY(14px); } .js-motion .reveal-left:not(.active) { transform: translateX(-14px); } .js-motion .reveal-scale:not(.active) { transform: scale(0.97); } .reveal.active { opacity: 1; transform: none; } .stagger-1 { transition-delay: 60ms; } .stagger-2 { transition-delay: 120ms; } .stagger-3 { transition-delay: 180ms; } .stagger-4 { transition-delay: 240ms; } /* Hero photo settle: slow scale-down + fade on load, container only so the image keeps its own opacity utilities */ .js-motion .hero-photo { animation: gs-photo-settle 2.2s var(--ease-out) both; } @keyframes gs-photo-settle { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } } /* Hero accent underline: draws in left-to-right after the headline lands */ .hero-accent { position: relative; } .hero-accent::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(200, 155, 60, 0.45); } .js-motion .hero-accent::after { animation: gs-underline-draw 0.9s var(--ease-out) 0.7s both; transform-origin: left center; } @keyframes gs-underline-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Card hover lift, hover-capable pointers only */ .premium-card { transition: transform 0.35s var(--ease-out), border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); } @media (hover: hover) and (pointer: fine) { .premium-card:hover { transform: translateY(-4px); border-color: rgba(200, 155, 60, 0.4); box-shadow: 0 2px 4px rgba(125, 90, 28, 0.06), 0 12px 32px rgba(125, 90, 28, 0.10); } .dark .premium-card:hover { box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5); } } /* Keyboard focus — DESIGN.md §7. Gold-ink ring, visible on every theme. */ :focus-visible { outline: 2px solid #8A6420; outline-offset: 2px; } .dark :focus-visible { outline-color: #C89B3C; } /* Anchored sections clear the fixed 80px nav */ [id] { scroll-margin-top: 6rem; } ::selection { background: rgba(200, 155, 60, 0.25); } /* Registry label — the rationed mono eyebrow (max 1 per 3 sections) */ .registry-label { font-family: "JetBrains Mono", monospace; font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: #8A6420; } .dark .registry-label { color: #C89B3C; } /* Balanced headings, tidy prose */ h1, h2, h3 { text-wrap: balance; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }