/* * ═══════════════════════════════════════════════════════════════ * LaekkerDate — Editorial / New Yorker Aesthetic (globals.css) * ═══════════════════════════════════════════════════════════════ * * Inspired by The New Yorker, Audubon naturalist prints, and * fine magazine editorial design. Clean typography, generous * whitespace, thin rules instead of bubble cards, and restrained * ink-on-paper color. * * Color philosophy: * - Text is black or white — no colored text anywhere * - Backgrounds are aged paper (warm ivory), never pure white * - Dark mode is old black paper, never pure black * - Accent colors only for interactive elements (buttons, links) * - Audubon-style naturalist illustrations woven inline into content * (floated with text wrapping, fully opaque — not background overlays) * * Design principles: * - Serif headings (Playfair Display) + humanist sans body (DM Sans) * - No rounded bubble cards — flat panels with thin rules * - Generous whitespace, unhurried editorial pacing * - Apple HIG: 44px touch targets, 13px+ text sizes * - WCAG contrast: all text meets AAA readability */ /* ── Reset ────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } button { cursor: pointer; } a { color: inherit; text-decoration: none; } /* ── CSS Custom Properties (Color Tokens) ─────────────── */ /* Seasonal theme system with Audubon naturalist illustration backgrounds. Colors are muted and editorial — ink on aged paper. Accent colors are restrained, used only for interactive elements. Fall is the default (:root). Other seasons override via class on . */ /* ═══ FALL (default) — Black Stork: warm sepia, aged parchment ═══ */ :root { /* Blush = deep ink (primary — editorial black-green) */ --color-blush-50: #f2f3f2; --color-blush-100: #dce0dc; --color-blush-200: #b5bdb5; --color-blush-300: #889288; --color-blush-400: #5e6e5e; --color-blush-500: #3d4f3d; --color-blush-600: #2d3d2d; --color-blush-700: #243024; --color-blush-800: #1c261c; --color-blush-900: #141c14; /* Honey = warm sepia (secondary — like aged paper edges) */ --color-honey-50: #faf7f2; --color-honey-100: #f2ead9; --color-honey-200: #e5d4b3; --color-honey-300: #d4b888; --color-honey-400: #c49d62; --color-honey-500: #a88444; --color-honey-600: #8c6c34; --color-honey-700: #70562a; --color-honey-800: #584422; --color-honey-900: #46361b; /* Lavender = warm umber (tertiary — naturalist ink wash) */ --color-lavender-50: #f8f5f2; --color-lavender-100: #ede6dc; --color-lavender-200: #dccbb5; --color-lavender-300: #c5a888; --color-lavender-400: #ad8862; --color-lavender-500: #8f6d44; --color-lavender-600: #745838; --color-lavender-700: #5e472e; --color-lavender-800: #4c3a26; --color-lavender-900: #3e2f20; /* Sage = muted olive (success — naturalist botanical greens) */ --color-sage-50: #f4f5f2; --color-sage-100: #e2e5dc; --color-sage-200: #c5ccb9; --color-sage-300: #a3ad93; --color-sage-400: #838f72; --color-sage-500: #657355; --color-sage-600: #4f5c42; --color-sage-700: #3f4a36; --color-sage-800: #333c2d; --color-sage-900: #2a3125; /* Gray = aged paper / parchment tones */ --color-gray-50: #f5f2ec; --color-gray-100: #ece7de; --color-gray-200: #ddd6c9; --color-gray-300: #c8bfaf; --color-gray-400: #a69d8d; --color-gray-500: #857c6e; --color-gray-600: #665e52; --color-gray-700: #4e4840; --color-gray-800: #3a3530; --color-gray-900: #282420; --color-gray-950: #1c1a17; /* Fonts */ --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'DM Sans', system-ui, -apple-system, sans-serif; /* Theme vars */ --theme-bg: #f5f2ec; --theme-bg-image: url('/static/img/themes/fall.png'); --theme-glow-1: rgba(61,79,61,0.08); --theme-glow-2: rgba(168,132,68,0.05); --theme-accent-rgb: 61,79,61; --theme-secondary-rgb: 143,109,68; } /* ═══ WINTER — Concourse of Birds: cool slate, deep blue-gray ═══ */ .theme-winter { --color-blush-50: #f0f1f3; --color-blush-100: #d8dbe2; --color-blush-200: #aeb5c4; --color-blush-300: #7f8a9f; --color-blush-400: #586580; --color-blush-500: #3c4a62; --color-blush-600: #2d394e; --color-blush-700: #242e3f; --color-blush-800: #1c2433; --color-blush-900: #151c28; --color-honey-50: #f5f4f2; --color-honey-100: #e8e5de; --color-honey-200: #d4cec2; --color-honey-300: #b8b0a0; --color-honey-400: #9d9280; --color-honey-500: #827766; --color-honey-600: #6a6050; --color-honey-700: #554d40; --color-honey-800: #443e34; --color-honey-900: #38322b; --color-lavender-50: #f5f2f2; --color-lavender-100: #e8dede; --color-lavender-200: #d4bcbc; --color-lavender-300: #bb9696; --color-lavender-400: #a07474; --color-lavender-500: #825858; --color-lavender-600: #6a4646; --color-lavender-700: #563a3a; --color-lavender-800: #463030; --color-lavender-900: #3a2828; --color-sage-50: #f2f4f2; --color-sage-100: #dce2dc; --color-sage-200: #b8c8b8; --color-sage-300: #8fa88f; --color-sage-400: #6e8c6e; --color-sage-500: #547254; --color-sage-600: #425c42; --color-sage-700: #364a36; --color-sage-800: #2d3d2d; --color-sage-900: #253225; --color-gray-50: #f3f2f0; --color-gray-100: #e8e6e2; --color-gray-200: #d8d4ce; --color-gray-300: #c2bcb2; --color-gray-400: #9e9688; --color-gray-500: #807870; --color-gray-600: #645e58; --color-gray-700: #4c4844; --color-gray-800: #383432; --color-gray-900: #262320; --color-gray-950: #1a1816; --theme-bg: #f3f2f0; --theme-bg-image: url('/static/img/themes/winter.png'); --theme-glow-1: rgba(60,74,98,0.08); --theme-glow-2: rgba(130,88,88,0.05); --theme-accent-rgb: 60,74,98; --theme-secondary-rgb: 130,88,88; } /* ═══ SPRING — Study of a Bird: soft warm tones, botanical greens ═══ */ .theme-spring { --color-blush-50: #f4f2f0; --color-blush-100: #e2dbd4; --color-blush-200: #c5b3a5; --color-blush-300: #a08774; --color-blush-400: #7e6450; --color-blush-500: #604a38; --color-blush-600: #4c3b2c; --color-blush-700: #3d3024; --color-blush-800: #30261d; --color-blush-900: #251e18; --color-honey-50: #f8f6f0; --color-honey-100: #eeead8; --color-honey-200: #ddd4b2; --color-honey-300: #c6b886; --color-honey-400: #b09d60; --color-honey-500: #948446; --color-honey-600: #7a6c38; --color-honey-700: #62572e; --color-honey-800: #4e4525; --color-honey-900: #40381e; --color-lavender-50: #f6f4f2; --color-lavender-100: #e8e2da; --color-lavender-200: #d2c4b4; --color-lavender-300: #b8a088; --color-lavender-400: #9c7e64; --color-lavender-500: #80644a; --color-lavender-600: #68503c; --color-lavender-700: #544130; --color-lavender-800: #443528; --color-lavender-900: #382b22; --color-sage-50: #f2f5f0; --color-sage-100: #dde4d6; --color-sage-200: #b8ccae; --color-sage-300: #8eac80; --color-sage-400: #6c8e5c; --color-sage-500: #527444; --color-sage-600: #415d36; --color-sage-700: #354b2c; --color-sage-800: #2c3d24; --color-sage-900: #24321e; --color-gray-50: #f6f4f0; --color-gray-100: #ece8e0; --color-gray-200: #ddd7cc; --color-gray-300: #c8c0b2; --color-gray-400: #a49c8c; --color-gray-500: #847c70; --color-gray-600: #686258; --color-gray-700: #504c44; --color-gray-800: #3c3834; --color-gray-900: #2a2622; --color-gray-950: #1c1a18; --theme-bg: #f6f4f0; --theme-bg-image: url('/static/img/themes/spring.png'); --theme-glow-1: rgba(96,74,56,0.08); --theme-glow-2: rgba(82,116,68,0.05); --theme-accent-rgb: 96,74,56; --theme-secondary-rgb: 82,116,68; } /* ═══ SUMMER — Flowers in a Vase: rich earth, warm amber ═══ */ .theme-summer { --color-blush-50: #f4f2f0; --color-blush-100: #e0d8d0; --color-blush-200: #c0b0a0; --color-blush-300: #988470; --color-blush-400: #766050; --color-blush-500: #5a4638; --color-blush-600: #48382c; --color-blush-700: #3a2d24; --color-blush-800: #2e241c; --color-blush-900: #241c16; --color-honey-50: #faf6ee; --color-honey-100: #f0e6d0; --color-honey-200: #e0caa2; --color-honey-300: #ccaa70; --color-honey-400: #b89048; --color-honey-500: #9a7838; --color-honey-600: #7e622c; --color-honey-700: #664e24; --color-honey-800: #503e1c; --color-honey-900: #423218; --color-lavender-50: #f4f4f2; --color-lavender-100: #e4e0da; --color-lavender-200: #ccc4b6; --color-lavender-300: #aea28e; --color-lavender-400: #92826c; --color-lavender-500: #766852; --color-lavender-600: #605440; --color-lavender-700: #4e4434; --color-lavender-800: #40382c; --color-lavender-900: #342e24; --color-sage-50: #f4f6f0; --color-sage-100: #e0e6d6; --color-sage-200: #beceae; --color-sage-300: #96b080; --color-sage-400: #749460; --color-sage-500: #5a7a48; --color-sage-600: #48623a; --color-sage-700: #3a4e2e; --color-sage-800: #304026; --color-sage-900: #283420; --color-gray-50: #f6f4f0; --color-gray-100: #eae6dc; --color-gray-200: #dcd6c8; --color-gray-300: #c6bead; --color-gray-400: #a49a8a; --color-gray-500: #847a6e; --color-gray-600: #685e54; --color-gray-700: #504a42; --color-gray-800: #3c3632; --color-gray-900: #2a2622; --color-gray-950: #1c1a16; --theme-bg: #f6f4f0; --theme-bg-image: url('/static/img/themes/summer.png'); --theme-glow-1: rgba(90,70,56,0.08); --theme-glow-2: rgba(154,120,56,0.05); --theme-accent-rgb: 90,70,56; --theme-secondary-rgb: 154,120,56; } /* ── Base Typography & Body ────────────────────────────── */ /* Background color on html — parchment color. */ html { background: var(--theme-bg); min-height: 100%; } body { background: transparent; min-height: 100vh; color: var(--color-gray-900); font-family: var(--font-body); font-size: 1rem; line-height: 1.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 0.01em; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); letter-spacing: -0.025em; font-weight: 600; color: var(--color-gray-900); line-height: 1.1; } /* Editorial small-caps for labels and meta text */ .font-display { font-family: var(--font-display); } .font-body { font-family: var(--font-body); } .tracking-tight { letter-spacing: -0.025em; } .tracking-wide { letter-spacing: 0.05em; } .tracking-widest { letter-spacing: 0.15em; } .uppercase { text-transform: uppercase; } .leading-relaxed { line-height: 1.8; } .leading-tight { line-height: 1.15; } /* Dark mode base — old black paper, not pure black. */ .dark { background: var(--color-gray-950); } .dark body, body.dark { background: transparent; color: #e8e4dc; } .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 { color: #ede9e2; } /* Dark mode inversion for dimension line-art illustrations */ .dark { --dim-illustration-filter: invert(0.85) sepia(0.1); } /* ── Inline Audubon Illustrations ──────────────────────── Full-color Audubon prints fill the page like a naturalist's journal. Text wraps organically around the image contour using shape-outside, not just the bounding box. */ .audubon-float { display: block; max-width: 400px; width: 45%; height: auto; margin: 0.5rem 0 2rem; /* shape-outside set inline per-image via Rust helper for contour wrapping */ shape-margin: 1rem; shape-image-threshold: 0.05; } .audubon-float-right { float: right; margin-left: 1.5rem; } .audubon-float-left { float: left; margin-right: 1.5rem; } /* Smaller variant for secondary illustrations */ .audubon-float-sm { max-width: 240px; width: 30%; shape-margin: 0.75rem; } /* Larger variant — hero anchor illustrations */ .audubon-float-lg { max-width: 500px; width: 55%; shape-margin: 1.25rem; } /* Questions page — small decorative drawings */ .audubon-inline { display: inline-block; width: 80px; height: auto; vertical-align: middle; margin: 0 0.75rem; } /* Clear floats after sections with images */ .clearfix::after { content: ''; display: table; clear: both; } /* Structured content that needs full width must clear floats. Grids and match cards can't render properly squeezed beside a floated image. Prose paragraphs still wrap naturally. */ .grid, [data-match-id] { clear: both; } @media (max-width: 640px) { .audubon-float { max-width: 180px; width: 42%; margin-left: 0.75rem; margin-right: 0.75rem; } .audubon-float-lg { max-width: 240px; width: 50%; } .audubon-float-sm { max-width: 130px; width: 32%; } } .dark .audubon-float, .dark .audubon-inline { filter: brightness(0.85); } /* ── Journal Text Flow ──────────────────────────────────── Subtle indentation on body paragraphs gives that hand-written journal feel. Cards separated by whitespace, not borders. */ body:not([data-page="questions"]) section p { text-indent: 1em; } body:not([data-page="questions"]) section p.editorial-label, body:not([data-page="questions"]) section p:first-child, body:not([data-page="questions"]) section .text-center p { text-indent: 0; } /* Dissolved cards get generous whitespace separation */ body:not([data-page="questions"]) .card + .card, body:not([data-page="questions"]) .card-interactive + .card-interactive { margin-top: 1.5rem; } /* Suppress inline border styles on non-question pages */ body:not([data-page="questions"]) .card, body:not([data-page="questions"]) .card-interactive { border: none !important; background: transparent !important; } /* ── Buttons ───────────────────────────────────────────── */ /* Editorial buttons: solid dark fills, barely rounded. Text is always black or white. No gradients, no colored text, no bouncy animations. */ .btn-primary { background: var(--color-gray-900); color: var(--color-gray-50); padding: 0.75rem 1.75rem; border-radius: 0.1875rem; font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.04em; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; text-align: center; border: none; min-height: 2.75rem; transition: background 0.2s; } .btn-primary:hover { background: var(--color-gray-800); } .btn-primary:active { background: var(--color-gray-700); } .btn-secondary { background: transparent; color: var(--color-gray-900); padding: 0.75rem 1.5rem; border-radius: 0.1875rem; font-weight: 500; font-size: 0.9375rem; display: inline-flex; align-items: center; justify-content: center; text-align: center; border: 1px solid var(--color-gray-900); min-height: 2.75rem; transition: all 0.2s; } .btn-secondary:hover { background: var(--color-gray-900); color: var(--color-gray-50); } .btn-ghost { color: var(--color-gray-600); padding: 0.5rem 0.75rem; border-radius: 0.1875rem; font-size: 0.9375rem; font-weight: 500; min-height: 2.75rem; transition: color 0.15s; display: inline-flex; align-items: center; justify-content: center; } .btn-ghost:hover { color: var(--color-gray-900); } .btn-danger { background: #6b2020; color: #f5f2ec; padding: 0.75rem 1.5rem; border-radius: 0.1875rem; font-weight: 600; font-size: 1rem; min-height: 2.75rem; transition: background 0.2s; border: none; } .btn-danger:hover { background: #4a1515; } .dark .btn-primary { background: var(--color-gray-100); color: var(--color-gray-950); text-shadow: none; } .dark .btn-primary:hover { background: var(--color-gray-200); } .dark .btn-secondary { background: transparent; color: #e8e4dc; border-color: var(--color-gray-400); } .dark .btn-secondary:hover { background: var(--color-gray-400); color: var(--color-gray-950); } .dark .btn-ghost { color: var(--color-gray-400); } .dark .btn-ghost:hover { color: #e8e4dc; } /* ── Cards — Naturalist Journal Mode ───────────────────── Cards dissolve into the page like entries in a naturalist's journal. No borders, no backgrounds — text lives directly on parchment. Questions page is the exception: it keeps structured cards for the answering flow. */ .card { background: transparent; border-radius: 0; padding: 1.5rem; border: none; transition: none; } .card:hover { border-color: transparent; } .card-interactive { background: transparent; border-radius: 0; padding: 1.5rem; border: none; transition: opacity 0.2s; cursor: pointer; } .card-interactive:hover { border: none; background: transparent; opacity: 0.85; } .dark .card, .dark .card-interactive { background: transparent; border: none; } .dark .card:hover { border-color: transparent; } .dark .card-interactive:hover { border: none; background: transparent; opacity: 0.85; } /* ── Questions Page Exception — Keep Structured Cards ──── */ body[data-page="questions"] .card { background: var(--theme-bg); border: 1px solid var(--color-gray-300); border-radius: 2px; } body[data-page="questions"] .card:hover { border-color: var(--color-gray-400); } body.dark[data-page="questions"] .card, .dark body[data-page="questions"] .card { background: var(--color-gray-950); border-color: var(--color-gray-700); } body.dark[data-page="questions"] .card:hover, .dark body[data-page="questions"] .card:hover { border-color: var(--color-gray-600); } /* ── Form Inputs ───────────────────────────────────────── */ /* Clean editorial inputs — barely rounded, subtle borders. Focus uses a simple darkened border, no colored glow. */ .input-field { width: 100%; padding: 0.75rem 1rem; border-radius: 0.1875rem; border: 1px solid var(--color-gray-300); outline: none; font-size: 1rem; min-height: 2.75rem; transition: border-color 0.15s; background: var(--color-gray-50); color: var(--color-gray-900); } .input-field:focus { border-color: var(--color-gray-900); } .dark .input-field { background: var(--color-gray-900); border-color: var(--color-gray-700); color: #e8e4dc; text-shadow: none; } .dark .input-field::placeholder { color: var(--color-gray-500); } .dark select.input-field { color: #e8e4dc; } .dark .input-field:focus { border-color: var(--color-gray-400); } select.input-field { appearance: auto; } textarea.input-field { resize: vertical; min-height: 80px; } /* ── Badges ───────────────────────────────────────────── */ /* Monochrome editorial badges — differentiated by border/weight, not color. All text is dark on light, light on dark. */ .badge { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; border-radius: 0.125rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; border: 1px solid; } .badge-blush { background: var(--color-gray-100); color: var(--color-gray-800); border-color: var(--color-gray-300); } .badge-honey { background: var(--color-gray-100); color: var(--color-gray-800); border-color: var(--color-gray-300); } .badge-lavender { background: var(--color-gray-100); color: var(--color-gray-800); border-color: var(--color-gray-300); } .badge-sage { background: var(--color-gray-900); color: var(--color-gray-50); border-color: var(--color-gray-900); } .dark .badge-blush { background: var(--color-gray-800); color: #e8e4dc; border-color: var(--color-gray-600); } .dark .badge-honey { background: var(--color-gray-800); color: #e8e4dc; border-color: var(--color-gray-600); } .dark .badge-lavender { background: var(--color-gray-800); color: #e8e4dc; border-color: var(--color-gray-600); } .dark .badge-sage { background: var(--color-gray-200); color: var(--color-gray-950); border-color: var(--color-gray-200); } /* ── Progress Bars & Match Scores ──────────────────────── */ /* Monochrome — dark fills on light bg, light fills on dark bg. No gradients, no colored text. Clean editorial presentation. */ .progress-bar { height: 0.25rem; border-radius: 0; background: var(--color-gray-200); overflow: hidden; } .progress-bar-fill { height: 100%; border-radius: 0; background: var(--color-gray-900); transition: all 0.5s ease-out; } .dark .progress-bar { background: var(--color-gray-700); } .dark .progress-bar-fill { background: var(--color-gray-200); } .match-score { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.04em; font-family: var(--font-display); color: var(--color-gray-900); } .dark .match-score { color: #e8e4dc; } .dimension-bar { height: 0.5rem; border-radius: 0; background: var(--color-gray-800); transition: all 0.7s ease-out; } .dark .dimension-bar { background: var(--color-gray-300); } /* ── Layout ────────────────────────────────────────────── */ .page-container { max-width: 48rem; margin: 0 auto; padding: 1.5rem; } .section-title { font-size: 1.5rem; font-weight: 600; color: var(--color-gray-900); margin-bottom: 0.25rem; letter-spacing: -0.025em; font-family: var(--font-display); line-height: 1.15; } .section-subtitle { color: var(--color-gray-500); margin-bottom: 2.5rem; font-size: 1rem; } .dark .section-title { color: #ede9e2; } .dark .section-subtitle { color: var(--color-gray-400); } /* ── Header & Nav ──────────────────────────────────────── */ /* Magazine masthead — clean, authoritative, minimal. */ header { background: var(--theme-bg); border-bottom: 1px solid var(--color-gray-300); position: sticky; top: 0; z-index: 50; } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { header { background: color-mix(in srgb, var(--theme-bg) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } } .dark header { background: var(--color-gray-950); border-color: var(--color-gray-800); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .dark header { background: color-mix(in srgb, var(--color-gray-950) 92%, transparent); } } nav a { color: var(--color-gray-500); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.15s; padding: 0.5rem 0.625rem; font-family: var(--font-body); } nav a:hover { color: var(--color-gray-900); } nav a.active { color: var(--color-gray-900); font-weight: 600; } .dark nav a { color: var(--color-gray-400); } .dark nav a:hover { color: #e8e4dc; } .dark nav a.active { color: #e8e4dc; } /* Hide scrollbar on nav for clean mobile horizontal scroll */ #desktop-nav { -ms-overflow-style: none; scrollbar-width: none; } #desktop-nav::-webkit-scrollbar { display: none; } /* ── Scrollbar ─────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-gray-300); border-radius: 9999px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-gray-400); } .dark ::-webkit-scrollbar-thumb { background: var(--color-gray-700); } .dark ::-webkit-scrollbar-thumb:hover { background: var(--color-gray-600); } /* ── Animations ────────────────────────────────────────── */ /* heart-beat: Double-pulse animation for like buttons. float: Gentle vertical bobbing for decorative elements. sparkle: Opacity pulse for shimmering effects. fadeInUp: Entry animation for cards (12px upward slide + fade). spin: Continuous rotation for loading spinners. shimmer: Horizontal sweep for skeleton loading states. Stagger classes (.stagger-1 through .stagger-4) add progressive delays. */ @keyframes heart-beat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.3); } 28% { transform: scale(1); } 42% { transform: scale(1.3); } 70% { transform: scale(1); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes sparkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .animate-heart-beat { animation: heart-beat 1.5s ease-in-out infinite; } .animate-float { animation: float 3s ease-in-out infinite; } .animate-sparkle { animation: sparkle 2s ease-in-out infinite; } .animate-in { animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; } .animate-spin { animation: spin 0.8s linear infinite; } .animate-pulse { animation: sparkle 2s ease-in-out infinite; } .stagger-1 { animation-delay: 0.05s; } .stagger-2 { animation-delay: 0.1s; } .stagger-3 { animation-delay: 0.15s; } .stagger-4 { animation-delay: 0.2s; } /* ── Utility Classes ───────────────────────────────────── */ /* These mirror common Tailwind utilities for use in server-rendered HTML where the CDN Tailwind JIT compiler might not detect class usage in Leptos views. Includes: display, text, font-weight, color, background, border, border-radius, shadow, flexbox, grid, gap, spacing (padding/margin), sizing, positioning, overflow, transitions, opacity, cursor, transform, whitespace, and aspect-ratio. */ .hidden { display: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .font-bold { font-weight: 700; } .font-semibold { font-weight: 600; } .font-medium { font-weight: 500; } .italic { font-style: italic; } /* Apple HIG: minimum 11pt (≈0.6875rem) for any text, 17pt (≈1.0625rem) for body */ .text-xs { font-size: 0.8125rem; line-height: 1.125rem; } /* 13px — legible secondary text */ .text-sm { font-size: 0.9375rem; line-height: 1.375rem; } /* 15px — comfortable secondary */ .text-base { font-size: 1rem; line-height: 1.5rem; } /* 16px */ .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .text-5xl { font-size: 3rem; line-height: 1; } .text-white { color: #fff; } .text-gray-400 { color: var(--color-gray-400); } .text-gray-500 { color: var(--color-gray-500); } .text-gray-600 { color: var(--color-gray-600); } .text-gray-700 { color: var(--color-gray-700); } .text-gray-800 { color: var(--color-gray-800); } /* All "colored" text classes map to monochrome shades — no colored text in editorial design */ .text-blush-500 { color: var(--color-gray-900); } .text-blush-600 { color: var(--color-gray-900); } .text-blush-700 { color: var(--color-gray-900); } .text-lavender-500 { color: var(--color-gray-700); } .text-lavender-600 { color: var(--color-gray-800); } .text-honey-500 { color: var(--color-gray-600); } .text-honey-600 { color: var(--color-gray-700); } .text-sage-500 { color: var(--color-gray-600); } .text-sage-600 { color: var(--color-gray-700); } .dark .text-gray-400 { color: var(--color-gray-400); } .dark .text-gray-500 { color: var(--color-gray-400); } .dark .text-gray-600 { color: #c8c2b6; } .dark .text-gray-700 { color: #dcd8d0; } .dark .text-gray-800 { color: #e8e4dc; } .bg-white { background-color: var(--theme-bg); } .bg-gray-50 { background-color: var(--color-gray-50); } .bg-gray-100 { background-color: var(--color-gray-100); } .bg-gray-200 { background-color: var(--color-gray-200); } /* All colored bg classes map to neutral parchment shades */ .bg-blush-50 { background-color: var(--color-gray-50); } .bg-blush-100 { background-color: var(--color-gray-100); } .bg-blush-500 { background-color: var(--color-gray-900); } .bg-lavender-50 { background-color: var(--color-gray-50); } .bg-lavender-100 { background-color: var(--color-gray-100); } .bg-honey-50 { background-color: var(--color-gray-50); } .bg-honey-100 { background-color: var(--color-gray-100); } .bg-sage-50 { background-color: var(--color-gray-50); } .bg-sage-100 { background-color: var(--color-gray-100); } .dark .bg-white { background-color: var(--color-gray-900); } .dark .bg-gray-50 { background-color: var(--color-gray-950); } .dark .bg-gray-100 { background-color: var(--color-gray-900); } .border { border: 1px solid var(--color-gray-200); } .border-2 { border: 2px solid var(--color-gray-200); } .border-gray-200 { border-color: var(--color-gray-200); } .border-gray-300 { border-color: var(--color-gray-300); } .border-blush-200 { border-color: var(--color-blush-200); } .border-blush-500 { border-color: var(--color-blush-500); } .border-b { border-bottom: 1px solid var(--color-gray-200); } .border-t { border-top: 1px solid var(--color-gray-200); } .dark .border, .dark .border-b, .dark .border-t { border-color: var(--color-gray-800); } .rounded { border-radius: 0.125rem; } .rounded-lg { border-radius: 0.1875rem; } .rounded-xl { border-radius: 0.25rem; } .rounded-2xl { border-radius: 0.25rem; } .rounded-full { border-radius: 9999px; } .shadow { box-shadow: 0 1px 2px rgba(0,0,0,0.05); } .shadow-md { box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04); } .shadow-lg { box-shadow: 0 4px 12px rgba(0,0,0,0.06); } .shadow-xl { box-shadow: 0 8px 24px rgba(0,0,0,0.08); } /* Flexbox */ .flex { display: flex; } .inline-flex { display: inline-flex; } .flex-col { flex-direction: column; } .flex-row { flex-direction: row; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .flex-1 { flex: 1 1 0%; } .flex-shrink-0, .shrink-0 { flex-shrink: 0; } /* Grid */ .grid { display: grid; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Gap */ .gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } /* Spacing */ .p-1 { padding: 0.25rem; } .p-2 { padding: 0.5rem; } .p-3 { padding: 0.75rem; } .p-4 { padding: 1rem; } .p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; } .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } .pt-2 { padding-top: 0.5rem; } .pt-4 { padding-top: 1rem; } .pb-2 { padding-bottom: 0.5rem; } .pb-4 { padding-bottom: 1rem; } .m-0 { margin: 0; } .m-auto { margin: auto; } .mx-auto { margin-left: auto; margin-right: auto; } .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mr-2 { margin-right: 0.5rem; } .mr-3 { margin-right: 0.75rem; } .ml-2 { margin-left: 0.5rem; } .ml-auto { margin-left: auto; } /* Width & Height */ .w-full { width: 100%; } .w-auto { width: auto; } .w-5 { width: 1.25rem; } .w-8 { width: 2rem; } .w-10 { width: 2.5rem; } .w-12 { width: 3rem; } .w-16 { width: 4rem; } .w-20 { width: 5rem; } .w-24 { width: 6rem; } .w-32 { width: 8rem; } .w-48 { width: 12rem; } .w-64 { width: 16rem; } .max-w-md { max-width: 28rem; } .max-w-lg { max-width: 32rem; } .max-w-xl { max-width: 36rem; } .max-w-2xl { max-width: 42rem; } .max-w-4xl { max-width: 56rem; } .min-w-0 { min-width: 0; } .h-1 { height: 0.25rem; } .h-2 { height: 0.5rem; } .h-3 { height: 0.75rem; } .h-4 { height: 1rem; } .h-5 { height: 1.25rem; } .h-8 { height: 2rem; } .h-10 { height: 2.5rem; } .h-12 { height: 3rem; } .h-16 { height: 4rem; } .h-20 { height: 5rem; } .h-24 { height: 6rem; } .h-32 { height: 8rem; } .h-48 { height: 12rem; } .h-64 { height: 16rem; } .h-full { height: 100%; } .min-h-screen { min-height: 100vh; } /* Positioning */ .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .sticky { position: sticky; } .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } .top-0 { top: 0; } .right-0 { right: 0; } .bottom-0 { bottom: 0; } .left-0 { left: 0; } .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-50 { z-index: 50; } /* Overflow */ .overflow-hidden { overflow: hidden; } .overflow-auto { overflow: auto; } .overflow-y-auto { overflow-y: auto; } .overflow-x-hidden { overflow-x: hidden; } .overflow-x-auto { overflow-x: auto; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Transitions */ .transition { transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); } .transition-all { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .transition-colors { transition: color 0.15s, background-color 0.15s, border-color 0.15s; } .duration-200 { transition-duration: 0.2s; } .duration-300 { transition-duration: 0.3s; } /* Opacity */ .opacity-0 { opacity: 0; } .opacity-50 { opacity: 0.5; } .opacity-75 { opacity: 0.75; } .opacity-100 { opacity: 1; } /* Cursor */ .cursor-pointer { cursor: pointer; } .cursor-not-allowed { cursor: not-allowed; } .select-none { user-select: none; } .pointer-events-none { pointer-events: none; } /* Transform */ .transform { transform: translateZ(0); } .scale-95 { transform: scale(0.95); } .scale-100 { transform: scale(1); } /* Whitespace */ .whitespace-nowrap { white-space: nowrap; } .whitespace-pre-wrap { white-space: pre-wrap; } .break-words { word-break: break-word; overflow-wrap: break-word; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Aspect ratio */ .aspect-square { aspect-ratio: 1; } .object-cover { object-fit: cover; } /* ── Responsive Breakpoints ────────────────────────────── */ /* Mirrors Tailwind's default breakpoints: sm (640px), md (768px), lg (1024px). Provides responsive grid columns, flex direction, text sizes, padding, and display toggling. The md:hidden / md:flex classes control desktop vs mobile nav. */ @media (min-width: 640px) { .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm\:flex-row { flex-direction: row; } .sm\:text-lg { font-size: 1.125rem; } .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 768px) { .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:flex-row { flex-direction: row; } .md\:text-2xl { font-size: 1.5rem; } .md\:text-4xl { font-size: 2.25rem; } .md\:text-5xl { font-size: 3rem; } .md\:block { display: block; } .md\:flex { display: flex; } .md\:hidden { display: none; } .md\:px-8 { padding-left: 2rem; padding-right: 2rem; } .md\:w-1\/2 { width: 50%; } .md\:w-1\/3 { width: 33.333333%; } .md\:p-8 { padding: 2rem; } .md\:w-32 { width: 8rem; } .md\:h-32 { height: 8rem; } } @media (min-width: 1024px) { .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ── Modal / Overlay ───────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 100; } .modal-content { background: var(--color-gray-50); border-radius: 0.1875rem; padding: 2rem; max-width: 32rem; width: 90%; max-height: 90vh; overflow-y: auto; border: 1px solid var(--color-gray-300); } .dark .modal-content { background: var(--color-gray-900); border-color: var(--color-gray-700); } /* ── Loading spinner ───────────────────────────────────── */ .spinner { width: 1.5rem; height: 1.5rem; border: 2px solid var(--color-gray-200); border-top-color: var(--color-blush-500); border-radius: 50%; animation: spin 0.7s linear infinite; } .dark .spinner { border-color: var(--color-gray-700); border-top-color: var(--color-blush-500); } /* ── Tab System ───────────────────────────────────────── */ /* Underline tabs — monochrome. Active tab has dark underline. */ .tab-btn { padding: 0.5rem 1rem; font-weight: 500; font-size: 0.8125rem; color: var(--color-gray-400); letter-spacing: 0.03em; text-transform: uppercase; border-bottom: 2px solid transparent; transition: all 0.15s; cursor: pointer; } .tab-btn:hover { color: var(--color-gray-700); } .tab-btn.active { color: var(--color-gray-900); border-bottom-color: var(--color-gray-900); } .dark .tab-btn { color: var(--color-gray-500); } .dark .tab-btn:hover { color: var(--color-gray-300); } .dark .tab-btn.active { color: #e8e4dc; border-bottom-color: #e8e4dc; } /* ── Gradient text — disabled in editorial mode ──────── */ /* No gradient text — all text is monochrome */ .gradient-text { color: var(--color-gray-900); } .dark .gradient-text { color: #e8e4dc; } /* ── Alert / Toast ─────────────────────────────────────── */ .alert { padding: 0.875rem 1rem; border-radius: 0.625rem; margin-bottom: 1rem; font-size: 0.875rem; } .alert-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; } .alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; } .alert-info { background: var(--color-lavender-50); color: var(--color-lavender-800); border: 1px solid var(--color-lavender-200); } .dark .alert-error { background: rgba(153,27,27,0.15); color: #fca5a5; border-color: rgba(153,27,27,0.2); } .dark .alert-success { background: rgba(22,101,52,0.15); color: #86efac; border-color: rgba(22,101,52,0.2); } .dark .alert-info { background: rgba(var(--theme-secondary-rgb),0.15); color: var(--color-lavender-300); border-color: rgba(var(--theme-secondary-rgb),0.2); } /* ── Table ─────────────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; } th { text-align: left; font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.75rem; border-bottom: 1px solid var(--color-gray-200); color: var(--color-gray-500); } td { padding: 0.75rem; border-bottom: 1px solid var(--color-gray-100); font-size: 0.9375rem; } .dark th { border-color: var(--color-gray-800); color: #a8a295; } .dark td { border-color: var(--color-gray-800); color: #e5e2db; } /* ── Misc ──────────────────────────────────────────────── */ .backdrop-blur { backdrop-filter: blur(12px); } .line-through { text-decoration: line-through; } .underline { text-decoration: underline; } .no-underline { text-decoration: none; } .list-disc { list-style-type: disc; padding-left: 1.5rem; } .space-y-2 > * + * { margin-top: 0.5rem; } .space-y-3 > * + * { margin-top: 0.75rem; } .space-y-4 > * + * { margin-top: 1rem; } .space-y-6 > * + * { margin-top: 1.5rem; } .space-x-2 > * + * { margin-left: 0.5rem; } .space-x-3 > * + * { margin-left: 0.75rem; } .space-x-4 > * + * { margin-left: 1rem; } .divide-y > * + * { border-top: 1px solid var(--color-gray-100); } .dark .divide-y > * + * { border-color: var(--color-gray-800); } /* ── Mobile Navigation Menu ────────────────────────────── */ /* Collapsible menu toggled by the hamburger button (data-action="toggle-mobile-menu"). Uses max-height transition for smooth expand/collapse animation. The .open class is toggled by JS. Links are styled as full-width touch targets. */ .hamburger-icon { font-size: 1.5rem; line-height: 1; font-weight: bold; } #mobile-menu { transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease; max-height: 0; opacity: 0; overflow: hidden; background: var(--theme-bg); } .dark #mobile-menu { background: var(--color-gray-950); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { #mobile-menu { background: color-mix(in srgb, var(--theme-bg) 96%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } } #mobile-menu.open { max-height: 600px; opacity: 1; padding: 0.75rem 1rem 1rem; } #mobile-menu a, #mobile-menu button { display: block; width: 100%; text-align: left; padding: 0.75rem 1rem; border-radius: 0.5rem; font-size: 1rem; font-weight: 500; color: var(--color-gray-700); transition: background 0.15s; } #mobile-menu a:hover, #mobile-menu button:hover { background: var(--color-gray-100); } .dark #mobile-menu a, .dark #mobile-menu button { color: #e5e2db; } .dark #mobile-menu a:hover, .dark #mobile-menu button:hover { background: rgba(255,255,255,0.06); } #mobile-menu .mobile-logout { color: var(--color-blush-500); } .dark #mobile-menu .mobile-logout { color: var(--color-blush-400); } /* ── Editorial Ornaments ──────────────────────────────── */ /* Ornamental divider — centered thin rule with decorative endpoints. Used between major sections on the landing page. */ .ornament-rule { border: none; border-top: 1px solid var(--color-gray-300); max-width: 4rem; margin: 0 auto; position: relative; } .ornament-rule::after { content: '\00B7'; position: absolute; top: -0.6em; left: 50%; transform: translateX(-50%); background: var(--theme-bg); padding: 0 0.5rem; color: var(--color-gray-300); font-size: 1.25rem; } .dark .ornament-rule { border-color: var(--color-gray-700); } .dark .ornament-rule::after { background: var(--color-gray-950); color: var(--color-gray-600); } /* Editorial section label — small caps, wide tracking, thin line */ .editorial-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-gray-400); font-family: var(--font-body); } .dark .editorial-label { color: var(--color-gray-500); } /* ── Selection ─────────────────────────────────────────── */ ::selection { background: rgba(var(--theme-accent-rgb),0.15); color: inherit; } /* ── Questions Page — Category Picker ─────────────────── */ /* Compact