/* ============================================================ apple-glass-ui — foundation A light, airy Apple/iOS design language: frosted glass, generous radii, soft layered shadows, SF-style type, spring motion. Brand-agnostic. Set --brand and --brand-2 per project; everything else derives from the token layer below. Light theme by default; a dark variant is provided at the bottom (toggle with data-theme="dark" on ). ============================================================ */ :root { /* ---- Brand accents (OVERRIDE THESE PER PROJECT) ---- */ --brand: #8B1A1A; /* primary accent */ --brand-2: #C9A84C; /* secondary accent */ --brand-tint: color-mix(in srgb, var(--brand) 10%, white); /* ---- Surfaces (light theme) ---- */ --canvas: #F5F5F7; /* page background — Apple's signature grey */ --surface: #FFFFFF; /* cards, panels */ --surface-2: #FBFBFD; /* subtle alt panels */ /* ---- Ink (text) ---- */ --ink: #1D1D1F; /* near-black, Apple's text colour */ --ink-soft: #515154; /* secondary text */ --ink-faint: #86868B; /* tertiary / captions */ /* ---- Hairlines & borders ---- */ --hairline: rgba(0,0,0,0.08); --hairline-strong: rgba(0,0,0,0.14); /* ---- Glass (frosted) ---- */ --glass-bg: rgba(255,255,255,0.72); --glass-bg-strong: rgba(255,255,255,0.85); --glass-border: rgba(255,255,255,0.55); --glass-blur: 20px; --glass-saturate: 180%; /* ---- Radii (Apple is generous) ---- */ --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; --r-pill: 980px; /* full pill, Apple button style */ /* ---- Soft layered shadows ---- */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 2px 6px rgba(0,0,0,0.05); --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 12px 28px rgba(0,0,0,0.07); --shadow-lg: 0 8px 24px rgba(0,0,0,0.08), 0 24px 56px rgba(0,0,0,0.10); --shadow-brand: 0 8px 24px color-mix(in srgb, var(--brand) 22%, transparent); /* ---- Type ---- */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-serif: "New York", "SF Pro Display", Georgia, "Times New Roman", serif; /* ---- Spacing scale (8pt-ish) ---- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-8: 3rem; --sp-10: 4rem; --sp-12: 5rem; --sp-16: 7rem; /* ---- Motion (Apple spring-ish) ---- */ --ease-spring: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 180ms; --dur: 320ms; --dur-slow: 600ms; } /* ============================================================ GLASS — the signature material ============================================================ */ .ag-glass { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm); } /* Fallback when backdrop-filter is unsupported: solid-ish surface */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ag-glass { background: var(--glass-bg-strong); } } /* Sticky frosted nav. Add .is-scrolled via JS once the page scrolls. */ .ag-nav { position: sticky; top: 0; z-index: 1000; background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .ag-nav.is-scrolled { border-bottom-color: var(--hairline); background: var(--glass-bg-strong); box-shadow: var(--shadow-sm); } /* ============================================================ CARDS ============================================================ */ .ag-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out); will-change: transform; } .ag-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } /* ============================================================ BUTTONS — Apple pill style ============================================================ */ .ag-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; padding: 0.7em 1.5em; border-radius: var(--r-pill); font: inherit; font-weight: 600; letter-spacing: -0.01em; border: 1px solid transparent; cursor: pointer; transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur) var(--ease-out), background var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .ag-btn:active { transform: scale(0.96); } .ag-btn--primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-brand); } .ag-btn--primary:hover { filter: brightness(1.06); transform: translateY(-1px); } .ag-btn--secondary { background: rgba(0,0,0,0.05); color: var(--ink); } .ag-btn--secondary:hover { background: rgba(0,0,0,0.08); } .ag-btn--ghost { background: transparent; color: var(--brand); border-color: color-mix(in srgb, var(--brand) 30%, transparent); } /* ============================================================ TYPOGRAPHY helpers ============================================================ */ .ag-display { font-family: var(--font-serif); font-weight: 700; letter-spacing: -0.022em; line-height: 1.05; } .ag-eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; font-weight: 600; color: var(--brand); } .ag-lede { color: var(--ink-soft); font-size: 1.15rem; line-height: 1.5; } /* ============================================================ MOTION — scroll reveal (pairs with ios-glass.js) ============================================================ */ .ag-reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .ag-reveal.is-visible { opacity: 1; transform: none; } /* ============================================================ ACCESSIBILITY — honour reduced-motion ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .ag-reveal { opacity: 1; transform: none; } } /* ============================================================ DARK VARIANT — set ============================================================ */ [data-theme="dark"] { --canvas: #0B0B0C; --surface: #161618; --surface-2: #1C1C1F; --ink: #F5F5F7; --ink-soft: #B8B8BE; --ink-faint: #86868B; --hairline: rgba(255,255,255,0.10); --hairline-strong: rgba(255,255,255,0.18); --glass-bg: rgba(28,28,31,0.62); --glass-bg-strong: rgba(28,28,31,0.82); --glass-border: rgba(255,255,255,0.10); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.5); --shadow-md: 0 4px 14px rgba(0,0,0,0.5); --shadow-lg: 0 12px 40px rgba(0,0,0,0.6); }