/* * Vella Access — shared design tokens + base craft. * Palette: antique bronze (metal brown) on near-black; this file centralises it and adds * spacing / radius / shadow / motion scales used across pages. * * Public pages override --font-* in type.css with self-hosted faces. * Vella Intelligence loads Jost + Bodoni from Google in intelligence.css. */ :root { /* Palette */ --bg: #08090B; --bg-soft: #101114; --card: #15171A; --gold: #B8946A; --gold-light: #DCC4A0; --gold-deep: #8F6A44; --text: #FFFFFF; --text-on-gold: #111111; --muted: #A9ADB4; --muted-soft: #D2D5DA; --border: rgba(255, 255, 255, .08); --gold-border: rgba(184, 148, 106, .35); --gold-border-strong: rgba(184, 148, 106, .5); --header-height: 82px; --header-height-compact: 72px; /* Typography */ --font-display: "Bodoni Moda", Georgia, "Times New Roman", serif; --font-body: Jost, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px; /* Radius scale */ --radius-sm: 14px; --radius-md: 18px; --radius-lg: 26px; --radius-pill: 999px; /* Shadow steps */ --shadow-1: 0 12px 32px rgba(0, 0, 0, .3); --shadow-2: 0 24px 60px rgba(0, 0, 0, .38); --shadow-3: 0 34px 80px rgba(0, 0, 0, .55); --shadow-gold: 0 12px 32px rgba(184, 148, 106, .22); --shadow-gold-strong: 0 18px 42px rgba(184, 148, 106, .32); /* Motion */ --motion-fast: 150ms; --motion-base: 280ms; --motion-slow: 450ms; --ease-out: cubic-bezier(.22, .61, .36, 1); } body { margin: 0; font-family: var(--font-body); } /* --------------------------------------------------------------------- * Atmosphere: fine film grain over the whole page (very low opacity). * Sits above content but below sticky header (z 20) and modals (z 999+). * ------------------------------------------------------------------- */ body::after { content: ""; position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; } /* --------------------------------------------------------------------- * Accessibility craft: consistent gold focus rings + pointer cursors. * ------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; } /* Text fields signal focus via gold border + soft ring (page CSS), so they are excluded from the hard outline treatment. */ input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: var(--gold-border-strong); box-shadow: 0 0 0 3px rgba(184, 148, 106, .12); } button:not(:disabled) { cursor: pointer; } .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; } /* --------------------------------------------------------------------- * Scroll reveal (progressive enhancement; requires reveal.js). * Hidden state only applies once JS has tagged , * so content stays visible without JavaScript. * ------------------------------------------------------------------- */ html.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } html.js [data-reveal].is-revealed { opacity: 1; transform: none; } /* --------------------------------------------------------------------- * Reduced motion: collapse animations and transitions site-wide. * ------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } html.js [data-reveal] { opacity: 1; transform: none; } } .vella-mark { width: 0.78em; height: 0.86em; flex-shrink: 0; display: block; color: inherit; } .vella-speak { display: inline-flex; align-items: center; gap: 0.45em; }