/* ================================================================= THEME: "cookout" — backyard summer cookout poster --------------------------------------------------------------- Everything in this file is THEME-SPECIFIC and should be the only place you need to touch when changing the visual palette / fonts / sky mood. Anything structural (card layouts, button shapes, typography rules, dialog mechanics) lives in styles.css and shouldn't need to change between themes. To add a new theme: copy this file to themes/.css, change the values below, and update the tag in index.html + host.html to point at the new file. See themes/README.md for a walkthrough. ================================================================= */ /* Note: Google Fonts URL lives in cookout.js as `fontsHref` and is injected as a into on theme load. CSS @import is unreliable across browser/proxy combinations and silently falls back to system fonts when it fails. */ :root { /* ---- Surface tokens (these usually stay close to this across themes) ---- */ --ink: #0c0a14; /* deep page background (a warm dark sky) */ --ink-deep: #06050d; --ink-haze: #1a1820; --ink-glaze: rgba(12, 10, 20, 0.78); --paper: #f4ead0; /* card backgrounds (a warm cream "paper") */ --paper-warm: #ead7a8; --paper-edge: #c8b380; --paper-shadow: rgba(80, 60, 30, 0.18); /* ---- Accent colors ---- Three accent families. Names are historical (the original theme was patriotic red/navy/gold); treat them semantically: - --red = "warm" accent (this theme: watermelon pink) - --navy = "cool" accent (this theme: grass green) - --gold = "bright" accent (this theme: lemonade yellow) Each has -deep / -bright / -ink variants for shadows + glows. */ --red: #e8456c; --red-deep: #b8395f; --red-bright: #ff6691; --red-ink: #6e1f3a; --navy: #5a8a3a; --navy-deep: #406a2a; --navy-bright: #a8d068; --gold: #efb830; --gold-soft: #f4cf5a; --gold-bright: #fff09a; /* Tertiary accents (used in spark colors, twinkles, etc.) */ --ember: #f08246; --mint: #7eddc8; --sky: #7eb6ff; /* ---- Text on each surface (rarely changes) ---- */ --cream: #faf2da; --on-ink-soft: #a39378; --on-paper: #2a1f10; --on-paper-soft: #6b5a36; /* ---- Semantic ---- */ --danger: #b82c3f; /* ---- Shadows (rarely changes) ---- */ --shadow-card: 0 12px 28px rgba(0, 0, 0, 0.55), 0 2px 0 rgba(0, 0, 0, 0.4); --stamp-press: 3px 3px 0 var(--red-deep); /* ---- Grain noise (SVG data URLs) Keep both light + dark variants. Theme can tint them by editing the feColorMatrix RGB inside the data URL — for now both themes use the same neutral grain. */ --paper-grain: 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.85' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.42 0 0 0 0 0.18 0 0 0 0.20 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); --ink-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.85 0 0 0 0 0.65 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); /* ---- Theme font stacks ---- Used by styles.css selectors. Override the families here for new themes; sizes/weights are handled in styles.css. */ --font-display: 'Lilita One', 'Bowlby One', 'Impact', system-ui, sans-serif; --font-body: 'Karla', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-script: 'Caveat', cursive; --font-marker: 'Permanent Marker', cursive; } body { font-family: var(--font-body); /* Warm dusk over a backyard — watermelon haze low, lemonade glow upper-left, grass-green tint upper-right. Grain sits on top of the gradients as the body's background paint stack (NOT a positioned pseudo, which Firefox flattens the canvas behind). */ background: var(--ink-grain), radial-gradient(ellipse 90% 55% at 50% 105%, rgba(232, 69, 108, 0.20), transparent 60%), radial-gradient(ellipse 60% 40% at 15% -5%, rgba(239, 184, 48, 0.16), transparent 65%), radial-gradient(ellipse 60% 40% at 85% 10%, rgba(168, 208, 104, 0.10), transparent 65%), linear-gradient(180deg, #06050d 0%, #0c0a14 35%, #0c0a14 70%, #1a1820 100%); background-attachment: fixed; }