/* ============================================================ Digital Discovery Group — Core Tokens (Miami) colors_and_type.css Link this from any surface to get tokens, fonts, and semantic type classes (.t-display, .t-eyebrow, etc.) LIGHT-FIRST. Dark mode via [data-theme="dark"] on . ============================================================ */ /* -- Fonts ----------------------------------------------------- Three-face system: 1. Display — ITALIANA. Tall thin all-caps Didone. The album-cover title face. Use for H1/H2 and poster moments. 2. Script — CAVEAT. Handwritten signature for flourishes, names, personal marks. Never body copy. 3. UI/Body — GEIST. Vercel's modern geometric grotesk. Clean, humanist, built for software. All product UI and long-form. 4. Mono — GEIST MONO. Metadata, captions, filenames. -------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Italiana&family=Caveat:wght@400;500;600;700&family=Dancing+Script:wght@400;500;600;700&family=Kaushan+Script&family=Homemade+Apple&family=Sacramento&family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap'); :root { /* == Colors =================================================== MIAMI — the palette lifted from the reference album covers. Warm off-white canvas, saturated sunset gradients, soft spheres, twilight navy for after-dark. Refined, not retro-cheesy. Light-first. Each named color has light + dark variants so semantic tokens swap predictably. ============================================================ */ /* --- Brand accents (same in both modes) ------------------- */ --coral: #FF7A8A; /* primary warm — coral/pink */ --coral-soft: #FFB3BF; --coral-deep: #E85D6F; --peach: #FFA98A; /* secondary warm — peach/apricot */ --peach-soft: #FFD4BF; --peach-deep: #E88762; --amber: #FFC56B; /* tertiary warm — amber/gold */ --amber-soft: #FFE0A8; --amber-deep: #E8A13E; --teal: #78D4D9; /* primary cool — teal/aqua */ --teal-soft: #B3E7EA; --teal-deep: #4FB0B6; --periwinkle: #9AB3E8; /* secondary cool — blue/lavender */ --periwinkle-soft: #C4D3F0; --periwinkle-deep: #6E8CC9; --mauve: #B89AC8; /* tertiary cool — violet/mauve */ --mauve-soft: #D9C7E3; --mauve-deep: #8F6EA8; /* --- Canvas (light mode defaults) -------------------------- */ --paper: #F5EFE6; /* primary canvas — warm off-white */ --paper-soft: #FAF6EF; /* elevated / card */ --paper-deep: #EDE5D6; /* shadow / gradient transitions */ --bone: #E8DFCD; /* framed mat, dividers */ /* --- Ink (text on paper) ----------------------------------- */ --ink: #1A1F2E; /* primary body — twilight navy */ --ink-soft: #3A4254; /* secondary body */ --ink-faint: #6B7384; /* captions, metadata */ --ink-line: #C9BFAE; /* hairlines on paper */ /* --- Dark canvas (always available for cross-mode cards) --- */ --twilight: #1A1F2E; /* primary dark canvas — twilight navy */ --twilight-deep: #0F1420; /* true-dark, hero vignettes */ --twilight-card: #252B3D; /* elevated card surface */ --twilight-line: #343A4E; /* hairline on dark */ /* --- Ink inverted (text on twilight) ----------------------- */ --chalk: #F5EFE6; /* body on dark */ --chalk-soft: #C9C2B3; --chalk-faint: #8F8878; /* --- Semantic tokens (auto-swap in dark mode) -------------- */ --bg: var(--paper); --bg-soft: var(--paper-soft); --bg-deep: var(--paper-deep); --bg-mat: var(--bone); --fg: var(--ink); --fg-soft: var(--ink-soft); --fg-faint: var(--ink-faint); --fg-line: var(--ink-line); --accent: var(--coral); --accent-cool: var(--teal); --accent-violet: var(--mauve); /* --- Gradients — core Miami moments ------------------------- */ --grad-sunset: linear-gradient(135deg, #FFC56B 0%, #FF7A8A 50%, #B89AC8 100%); --grad-pacific: linear-gradient(135deg, #78D4D9 0%, #9AB3E8 55%, #B89AC8 100%); --grad-coral: linear-gradient(180deg, #FFD4BF 0%, #FF7A8A 100%); --grad-teal: linear-gradient(180deg, #B3E7EA 0%, #78D4D9 50%, #6E8CC9 100%); --grad-peachcoral:linear-gradient(135deg, #FFA98A 0%, #FF7A8A 100%); --grad-twilight: linear-gradient(180deg, #2A2342 0%, #1A1F2E 100%); /* Soft 3D sphere gradient — used for signature planet accents */ --grad-sphere-coral: radial-gradient(circle at 30% 25%, #FFD4BF 0%, #FF7A8A 55%, #C04959 100%); --grad-sphere-teal: radial-gradient(circle at 30% 25%, #D4F0F2 0%, #78D4D9 55%, #3A8D92 100%); --grad-sphere-mauve: radial-gradient(circle at 30% 25%, #E8D8F0 0%, #B89AC8 55%, #7A5A92 100%); --grad-sphere-peach: radial-gradient(circle at 30% 25%, #FFE3D1 0%, #FFA98A 55%, #C46F4E 100%); /* -- Type scale (body) ------------------------------------- */ --font-display: 'Italiana', 'Playfair Display', Georgia, serif; --font-serif: 'Italiana', Georgia, serif; --font-script: 'Caveat', 'Brush Script MT', cursive; --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'Geist Mono', ui-monospace, monospace; /* -- Spacing scale (8pt) ----------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 40px; --s-8: 48px; --s-9: 64px; --s-10: 80px; --s-11: 96px; --s-12: 128px; /* -- Radius ------------------------------------------------ */ --r-sm: 2px; --r-md: 4px; --r-lg: 8px; --r-xl: 16px; --r-pill: 999px; /* -- Motion ------------------------------------------------ */ --ease: cubic-bezier(0.2, 0, 0, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); /* -- Shadow ------------------------------------------------ */ --shadow-soft: 0 2px 12px rgba(26, 31, 46, 0.06); --shadow-card: 0 12px 40px rgba(26, 31, 46, 0.08); --shadow-lift: 0 24px 60px rgba(26, 31, 46, 0.14); } /* ============ DARK MODE ========================================== Add data-theme="dark" to to swap. Same accents, flipped canvas + ink. Accents lift slightly for contrast. ================================================================ */ [data-theme="dark"] { --bg: var(--twilight); --bg-soft: var(--twilight-card); --bg-deep: var(--twilight-deep); --bg-mat: var(--twilight-line); --fg: var(--chalk); --fg-soft: var(--chalk-soft); --fg-faint: var(--chalk-faint); --fg-line: var(--twilight-line); --shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.3); --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.4); --shadow-lift: 0 24px 60px rgba(0, 0, 0, 0.55); } /* ============ Base ================================================ */ html, body { background: var(--bg); color: var(--fg); } body { font-family: var(--font-sans); font-weight: 400; -webkit-font-smoothing: antialiased; } /* ============ Semantic Type Utility Classes ======================= */ /* Display — hero titles. Tall thin Didone, all-caps by default for section titles; set .t-display--mixed for mixed case. */ .t-display { font-family: var(--font-display); font-weight: 400; font-size: clamp(72px, 10vw, 180px); line-height: 0.92; letter-spacing: 0.02em; text-transform: uppercase; color: var(--fg); } .t-display--mixed { text-transform: none; letter-spacing: -0.01em; } .t-display em { font-style: italic; font-family: var(--font-script); color: var(--coral-deep); text-transform: none; font-size: 0.88em; letter-spacing: -0.02em; } /* Headline — section headers */ .t-headline { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 5vw, 80px); line-height: 0.98; letter-spacing: 0.04em; text-transform: uppercase; } /* Serif — editorial body, pull quotes */ .t-serif { font-family: var(--font-serif); font-size: 28px; line-height: 1.25; letter-spacing: -0.005em; } /* Script — signatures, personal marks */ .t-script { font-family: var(--font-script); font-weight: 500; font-size: 42px; line-height: 1; color: var(--coral-deep); } /* Body — default Geist paragraph */ .t-body { font-family: var(--font-sans); font-weight: 400; font-size: 17px; line-height: 1.55; color: var(--fg-soft); } .t-body--lg { font-size: 20px; font-weight: 300; line-height: 1.5; } .t-body--sm { font-size: 14px; line-height: 1.55; } /* Eyebrow — tiny all-caps label */ .t-eyebrow { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-faint); } .t-eyebrow--accent { color: var(--coral-deep); } .t-eyebrow--cool { color: var(--teal-deep); } /* Caption — mono metadata */ .t-caption { font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: 0.04em; color: var(--fg-faint); } /* ============ Utilities ============================================ */ .mat { border: 1.5px solid var(--fg); border-radius: var(--r-sm); } .mat-thin { border: 1px solid var(--fg-line); } /* Horizontal line-set punctuation — the 5-line signature element */ .line-set { display: flex; flex-direction: column; gap: 4px; } .line-set > span { display: block; height: 1.5px; background: currentColor; width: 100%; opacity: 0.8; } .line-set > span:nth-child(1) { width: 100%; } .line-set > span:nth-child(2) { width: 92%; } .line-set > span:nth-child(3) { width: 100%; } .line-set > span:nth-child(4) { width: 88%; } .line-set > span:nth-child(5) { width: 100%; }