/* ========================================================================== Advatar — design system Near-black canvas, warm amber light, hairline architectural grid, liquid-glass panels, film grain. ========================================================================== */ /* --------------------------------------------------------------- Tokens --- */ /* Two themes. Dark is the base declaration; `:root[data-theme="light"]` swaps the same token names. An inline script in stamps the attribute from localStorage before first paint, so there is no flash of the wrong theme. Light is the default when nothing is stored. */ :root { /* Palette — dark */ --bg: #0A0908; --bg-elevated: #131110; --gold-1: #F2A93B; --gold-2: #C97A2E; --text-hi: #F5F1E8; --text-lo: #A79E90; --glass-fill: rgba(255, 255, 255, 0.05); --glass-border: rgba(255, 255, 255, 0.10); /* Derived */ --hairline: rgba(255, 255, 255, 0.07); --hairline-soft: rgba(255, 255, 255, 0.045); /* Solid, not a low alpha: 5.3:1 on --bg, so 11px labels still clear AA. */ --text-faint: #8B8377; --gold-glow: rgba(242, 169, 59, 0.30); /* --gold-1 is the accent; --gold-text is the accent that is safe on TEXT. They are identical on dark, where --gold-1 already reaches ~10:1. */ --gold-text: #F2A93B; /* Grain reads stronger on dark, so each theme sets its own weight + blend. */ --grain-opacity: 0.30; --grain-blend: overlay; /* Ambient texture strength behind sections. */ --ambient-a: 0.30; --texture-a: 0.16; --glow-scale: 1; --scrim: rgba(10, 9, 8, 0.85); --nav-scrim: rgba(10, 9, 8, 0.72); --surface-1: rgba(19, 17, 16, 0.92); --overlay: rgba(6, 5, 4, 0.75); --shadow-card: 0 18px 50px -30px rgba(0, 0, 0, 0.9); /* ---- Theme-independent below: type, rhythm, motion, layers ------------- */ /* Type */ --font-display: 'General Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Rhythm */ --gutter: clamp(1.25rem, 5vw, 5.5rem); --section-y: clamp(5rem, 12vw, 11rem); --max-w: 1440px; /* Motion — 150–300ms for state changes; 400–600ms for scroll reveals */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --fast: 150ms; --mid: 220ms; --slow: 300ms; --reveal: 560ms; /* Layers */ --z-grid: -1; --z-grain: -2; --z-nav: 60; --z-modal: 100; --z-toast: 120; color-scheme: dark; } :root[data-theme='light'] { color-scheme: light; --bg: #FAF7F1; --bg-elevated: #F1EBDE; --gold-1: #C97A2E; --gold-2: #8F5620; --text-hi: #1B1712; --text-lo: #6E6558; --glass-fill: rgba(20, 16, 10, 0.045); --glass-border: rgba(20, 16, 10, 0.09); --hairline: rgba(20, 16, 10, 0.10); --hairline-soft: rgba(20, 16, 10, 0.06); /* 4.6:1 on --bg. */ --text-faint: #767061; --gold-glow: rgba(201, 122, 46, 0.22); /* #C97A2E is only 3.1:1 here — fine for large display text and accents, but small text needs the deeper tone (5.6:1). */ --gold-text: #8F5620; /* Soft-light + lower opacity, or grain reads as dirt on a warm near-white. */ --grain-opacity: 0.075; --grain-blend: multiply; --ambient-a: 0.55; --texture-a: 0.10; /* Warmth rather than a glow effect. */ --glow-scale: 0.42; --scrim: rgba(250, 247, 241, 0.85); --nav-scrim: rgba(250, 247, 241, 0.78); --surface-1: rgba(252, 250, 246, 0.95); --overlay: rgba(38, 29, 18, 0.38); --shadow-card: 0 18px 40px -32px rgba(60, 40, 15, 0.45); } /* ----------------------------------------------------------------- Base --- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; overflow-x: clip; } /* Decorative glows extend past the section; clip them so no page can scroll sideways. `clip` rather than `hidden`, which would break position: sticky. */ .section { overflow-x: clip; } body { margin: 0; background: var(--bg); color: var(--text-hi); font-family: var(--font-ui); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* clip, not hidden. `hidden` makes the body a scroll container once isn't overflow:visible — a container that never scrolls — and every position: sticky inside it silently stops sticking. */ overflow-x: clip; } img, video, iframe { max-width: 100%; display: block; } img, video { height: auto; } /* figure/blockquote carry a 40px UA inline margin that breaks the grid. */ figure, blockquote { margin: 0; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } /* Visible focus everywhere — never removed, only restyled. */ :focus-visible { outline: 2px solid var(--gold-1); outline-offset: 3px; border-radius: 4px; } .skip-link { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 200; padding: 0.75rem 1.25rem; background: var(--gold-1); color: #17120A; font-weight: 600; border-radius: 999px; transform: translateY(-160%); transition: transform var(--mid) var(--ease); } .skip-link:focus-visible { transform: translateY(0); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .noscript { padding: 4rem var(--gutter); } /* ----------------------------------------------------------- Typography --- */ .display { font-family: var(--font-display); font-weight: 300; letter-spacing: -0.035em; line-height: 1.02; margin: 0; text-wrap: balance; } /* Hero-scale */ .display--xl { font-size: clamp(2.6rem, 7.2vw, 6rem); } /* Section-scale */ .display--lg { font-size: clamp(2rem, 4.6vw, 3.75rem); } .display--md { font-size: clamp(1.5rem, 2.8vw, 2.25rem); letter-spacing: -0.025em; } /* The small uppercase label used for nav items, eyebrows, tags. */ .micro { font-family: var(--font-ui); font-size: 0.75rem; /* 11px — labels only, never body copy */ font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-lo); } /* Section eyebrow: monoline glyph + label, as in the reference. */ .eyebrow { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 clamp(1.75rem, 4vw, 3rem); } .eyebrow .icon { color: var(--text-lo); flex: none; } .eyebrow span { font-size: 0.8125rem; letter-spacing: 0.02em; text-transform: none; color: var(--text-hi); font-weight: 500; } /* Two-tone lede — the reference fades a sentence from bright into muted mid-way through. Wrap the trailing half in . */ .lede { font-size: clamp(0.9375rem, 1.15vw, 1.0625rem); line-height: 1.55; color: var(--text-hi); max-width: 46ch; margin: 0; } .lede .dim { color: var(--text-lo); } .muted { color: var(--text-lo); } .tiny { font-size: 0.8125rem; line-height: 1.5; color: var(--text-lo); } /* Inline link inside a sentence — underlined so it doesn't rely on colour. */ .text-link { color: var(--gold-text); text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1px; transition: color var(--mid) var(--ease); } .text-link:hover { color: var(--gold-2); } /* The Arabic word set inline, sized up so it stays prominent in the sentence. */ .ihsan-inline { font-size: 1.5em; line-height: 1; vertical-align: -0.12em; color: var(--gold-1); margin-inline: 0.12em; } /* ------------------------------------------------------- Grain + grid ----- */ .grain-defs { position: absolute; width: 0; height: 0; } /* Real scanned film grain (Texture Fabrik), tiled at 1:1 so the grain keeps its native size rather than being stretched. Fixed to the viewport, so it sits over every pixel of every page and doesn't scroll with content — that's what makes it read as film rather than as a background pattern. */ /* Film grain. Two things make it read as baked-in film rather than a texture laid on top: 1. It sits BELOW everything in .app (z-index -2), so it grains the page and the ambient wash but never the photos, Drive embeds or video. Media stays clean, which is what you want — grain over a video looks like a dirty screen. 2. It jumps position on every "frame". Real grain is re-exposed each frame; a motionless tile is the thing that reads as a static picture. steps(1) makes each position hold rather than slide, which is what film actually does. The element is oversized so the jumps never expose an edge. */ .grain { position: fixed; top: -60%; left: -60%; width: 220%; height: 220%; z-index: var(--z-grain); pointer-events: none; background-image: url('/assets/grain.png'); background-repeat: repeat; background-size: 512px 512px; opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend); animation: grain-flicker 0.7s steps(1) infinite; will-change: transform; } @keyframes grain-flicker { 0% { transform: translate3d(0, 0, 0); } 12% { transform: translate3d(-7%, 4%, 0); } 25% { transform: translate3d(5%, -8%, 0); } 37% { transform: translate3d(-4%, -6%, 0); } 50% { transform: translate3d(8%, 3%, 0); } 62% { transform: translate3d(-6%, 7%, 0); } 75% { transform: translate3d(3%, -5%, 0); } 87% { transform: translate3d(-8%, -3%, 0); } 100% { transform: translate3d(0, 0, 0); } } /* Ambient texture. Nothing on the site sits on flat colour — this fixed layer carries a soft warm gradient mesh across the whole page, behind everything. When settings.textureUrl is set, a blurred, dimmed still from real work is layered over the mesh instead. */ .ambient { position: fixed; inset: -10%; z-index: -3; pointer-events: none; opacity: var(--ambient-a); background: radial-gradient(38% 44% at 12% 18%, rgba(242, 169, 59, 0.18), transparent 70%), radial-gradient(44% 40% at 86% 30%, rgba(201, 122, 46, 0.20), transparent 72%), radial-gradient(50% 46% at 62% 82%, rgba(180, 104, 40, 0.16), transparent 74%), radial-gradient(36% 38% at 26% 70%, rgba(242, 169, 59, 0.12), transparent 72%); filter: blur(70px); } .ambient-still { position: fixed; inset: -8%; z-index: -4; pointer-events: none; width: auto; height: auto; min-width: 116%; min-height: 116%; object-fit: cover; opacity: var(--texture-a); filter: blur(48px) saturate(120%); } .grid-rules { position: fixed; inset: 0; z-index: var(--z-grid); pointer-events: none; } /* A hairline vertical rule with a small × marker near each end. */ .grid-rule { position: absolute; top: 0; bottom: 0; left: var(--rule-x); width: 1px; background: var(--hairline-soft); } .grid-rule::before, .grid-rule::after { content: ''; position: absolute; left: 50%; width: 9px; height: 9px; transform: translateX(-50%); background: linear-gradient(to right, transparent 4px, var(--hairline) 4px 5px, transparent 5px), linear-gradient(to bottom, transparent 4px, var(--hairline) 4px 5px, transparent 5px); } .grid-rule::before { top: 18vh; } .grid-rule::after { bottom: 12vh; } @media (max-width: 900px) { .grid-rules { display: none; } } /* --------------------------------------------------------------- Layout --- */ .app { position: relative; z-index: 1; } .shell { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); position: relative; } .section + .section { padding-top: 0; } /* Inner pages: clear the fixed nav, then tighten the first section so the page doesn't open on a screenful of nothing. */ .page { padding-top: 7.5rem; } .page > .section:first-of-type { padding-top: clamp(1.5rem, 4vw, 3rem); } .section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); } .section-head .lede { text-align: right; margin-left: auto; } @media (max-width: 720px) { .section-head .lede { text-align: left; margin-left: 0; } } .stack { display: grid; gap: 1rem; } .stack-2 { display: grid; gap: 2rem; } /* ------------------------------------------------------------ Glow ------- */ /* The warm light source. Absolutely positioned, heavily blurred, sits behind content. Position/size set inline per use via the custom properties. */ .glow { position: absolute; z-index: -1; pointer-events: none; width: var(--glow-w, 40rem); height: var(--glow-h, 40rem); /* --glow-scale tones the whole effect down in light mode, where it should read as warmth rather than as a dark-mode glow. */ background: radial-gradient( circle at center, rgba(242, 169, 59, calc(var(--glow-a, 0.45) * var(--glow-scale))) 0%, rgba(201, 122, 46, calc(var(--glow-a, 0.45) * var(--glow-scale) * 0.5)) 38%, transparent 70% ); filter: blur(80px); border-radius: 50%; /* Continuous slow drift so the page is never completely static (R10). */ animation: glow-drift 19s ease-in-out infinite alternate; } @keyframes glow-drift { from { transform: translate3d(-2%, -1.5%, 0) scale(1); } to { transform: translate3d(2.5%, 2%, 0) scale(1.08); } } /* --------------------------------------------------------------- Icons --- */ .icon { width: 1em; height: 1em; stroke: currentColor; stroke-width: 1.25; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; } .icon--lg { width: 1.25em; height: 1.25em; } /* -------------------------------------------------------------- Buttons --- */ .btn { --btn-bg: var(--glass-fill); --btn-fg: var(--text-hi); --btn-border: var(--glass-border); display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 44px; /* touch target floor */ padding: 0.75rem 1.6rem; border-radius: 999px; border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-fg); font-family: var(--font-ui); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); transition: background var(--mid) var(--ease), border-color var(--mid) var(--ease), color var(--mid) var(--ease), transform var(--fast) var(--ease); } .btn:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.18); } .btn:active { transform: translateY(1px); } .btn[disabled] { opacity: 0.45; cursor: not-allowed; } .btn--gold { --btn-bg: linear-gradient(135deg, var(--gold-1), var(--gold-2)); --btn-fg: #17120A; --btn-border: transparent; font-weight: 600; box-shadow: 0 0 40px -8px var(--gold-glow); } .btn--gold:hover { --btn-bg: linear-gradient(135deg, #F7B855, var(--gold-1)); border-color: transparent; } .btn--ghost { --btn-bg: transparent; --btn-border: rgba(255, 255, 255, 0.14); } .btn--sm { min-height: 40px; padding: 0.5rem 1.1rem; font-size: 0.75rem; } /* Text link with a trailing arrow that nudges on hover. Also used on