@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Bitter:ital,wght@0,400;0,600;0,700;1,400&display=swap'); /* ============================================================ THEME SYSTEM Three independent axes, each set via a data-attribute on : data-mode: "light" | "dark" | (absent = follow OS) data-intensity: "muted" | "vivid" (default: muted) data-hue: "crimson" | "blue" | "green" | "red" (default: crimson) Cascade order below matters: surfaces < hue (muted) < hue+vivid < mode overrides. Mode is declared LAST so light/dark always wins the header-color/on-primary/rule-end tug-of-war regardless of hue. ============================================================ */ :root { /* Surfaces — dark is the default/fallback */ --bg-outer: #0d0c0b; --card-bg: #1c1714; --card-border: #3f332a; --ink: #ece3d2; --ink-soft: #b7a888; color-scheme: dark; /* Secondary accent (only meaningful for the crimson hue — see below) */ --gold: #c9a227; --gold-soft: #8f7625; /* Primary accent — crimson/muted, i.e. the original default look */ --primary: #9c2b2e; --primary-strong: #c6393c; --primary-deep: #6e1f22; --on-primary: var(--ink); /* Dark mode default: crimson keeps its signature gold header/rule. Non-crimson hues override these two below. */ --header-color: var(--gold); --rule-end: var(--gold); } /* ---- Intensity: vivid gold (hue-independent) ---- */ [data-intensity="vivid"] { --gold: #f0c040; --gold-soft: #d4a017; } /* ---- Hue, muted (default intensity) ---- */ [data-hue="blue"] { --primary: #2f5f8f; --primary-strong: #3d78b3; --primary-deep: #1c4f77; --header-color: var(--primary-strong); --rule-end: var(--primary-strong); } [data-hue="green"] { --primary: #2f7d4f; --primary-strong: #3a9560; --primary-deep: #1f7a44; --header-color: var(--primary-strong); --rule-end: var(--primary-strong); } [data-hue="red"] { --primary: #a23b2e; --primary-strong: #c0392b; --primary-deep: #7a2a20; --header-color: var(--primary-strong); --rule-end: var(--primary-strong); } /* ---- Hue, vivid ---- */ [data-hue="crimson"][data-intensity="vivid"] { --primary: #e0303a; --primary-strong: #ff4550; } [data-hue="blue"][data-intensity="vivid"] { --primary: #2176c9; --primary-strong: #378adf; } [data-hue="green"][data-intensity="vivid"] { --primary: #1fa84a; --primary-strong: #34d058; } [data-hue="red"][data-intensity="vivid"] { --primary: #d8432f; --primary-strong: #ff5b3d; } /* ---- Mode: explicit dark (re-declared for clarity/override safety) ---- */ [data-mode="dark"] { --bg-outer: #0d0c0b; --card-bg: #1c1714; --card-border: #3f332a; --ink: #ece3d2; --ink-soft: #b7a888; color-scheme: dark; --on-primary: var(--ink); } /* ---- Mode: explicit light ---- */ [data-mode="light"] { --bg-outer: #eeece3; --card-bg: #ffffff; --card-border: #e0dbcb; --ink: #262019; --ink-soft: #756d5c; color-scheme: light; --on-primary: #ffffff; --header-color: var(--primary-deep); --rule-end: var(--primary-deep); } /* ---- Mode: system (no data-mode attribute at all) — follow OS ---- */ @media (prefers-color-scheme: light) { :root:not([data-mode]) { --bg-outer: #eeece3; --card-bg: #ffffff; --card-border: #e0dbcb; --ink: #262019; --ink-soft: #756d5c; color-scheme: light; --on-primary: #ffffff; --header-color: var(--primary-deep); --rule-end: var(--primary-deep); } } /* ============================================================ LAYOUT ============================================================ */ * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg-outer); padding: 32px 16px; font-family: 'Bitter', serif; font-size: 17px; color: var(--ink); } #card { width: 100%; max-width: 760px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 10px; box-shadow: 0 24px 50px rgba(0,0,0,0.35); padding: 22px 36px 32px; } /* ---- Theme toolbar ---- */ #theme-toolbar { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; } .pill { display: flex; align-items: center; background: var(--bg-outer); border: 1px solid var(--card-border); border-radius: 999px; padding: 3px; gap: 2px; } .pill.swatch-pill { padding: 6px 8px; gap: 6px; } .pill-btn { width: 26px; height: 26px; border-radius: 999px; border: none; background: none; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); cursor: pointer; opacity: 0.7; transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease; } .pill-btn svg { width: 14px; height: 14px; } .pill-btn:hover { opacity: 1; } .pill-btn[aria-pressed="true"] { opacity: 1; background: color-mix(in srgb, var(--header-color) 18%, transparent); color: var(--header-color); } .pill-btn:focus-visible { outline: 1px solid var(--header-color); outline-offset: 1px; } .swatch-btn { width: 15px; height: 15px; border-radius: 999px; border: none; cursor: pointer; padding: 0; } .swatch-btn[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 3px var(--ink-soft); } .swatch-btn:focus-visible { outline: 1px solid var(--header-color); outline-offset: 2px; } .swatch-crimson { background: #9c2b2e; } .swatch-blue { background: #2f5f8f; } .swatch-green { background: #2f7d4f; } .swatch-red { background: #a23b2e; } h1 { font-family: 'Cinzel', serif; font-size: 2rem; font-weight: 700; letter-spacing: 0.02em; text-align: center; margin: 0 0 10px; color: var(--ink); } .title-rule { width: 64px; height: 3px; margin: 0 auto 18px; background: linear-gradient(90deg, var(--primary), var(--rule-end)); border-radius: 2px; } #subtitle { font-size: 1.05rem; color: var(--ink-soft); text-align: center; margin: 0 0 26px; } #generateBtn { font-family: 'Cinzel', serif; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.03em; padding: 15px 22px; background: linear-gradient(180deg, var(--primary-strong), var(--primary)); color: var(--on-primary); border: 1px solid var(--primary-strong); border-radius: 6px; cursor: pointer; display: block; width: 100%; box-shadow: 0 3px 8px rgba(0,0,0,0.4); transition: box-shadow 0.15s ease, transform 0.15s ease; } #generateBtn:hover { box-shadow: 0 3px 16px color-mix(in srgb, var(--header-color) 40%, transparent); } #generateBtn:focus-visible { outline: 2px solid var(--header-color); outline-offset: 2px; } @keyframes stamp { 0% { transform: scale(1); box-shadow: 0 3px 8px rgba(0,0,0,0.4); } 35% { transform: scale(0.96); box-shadow: 0 0 22px color-mix(in srgb, var(--header-color) 55%, transparent); } 100% { transform: scale(1); box-shadow: 0 3px 8px rgba(0,0,0,0.4); } } #generateBtn.stamp { animation: stamp 0.28s ease; } @media (prefers-reduced-motion: reduce) { #generateBtn.stamp { animation: none; } } #result { margin-top: 28px; } .section { margin-bottom: 22px; } .section:last-child { margin-bottom: 0; } .section-label { font-family: 'Cinzel', serif; font-size: 1.15rem; font-weight: 600; font-variant: small-caps; letter-spacing: 0.04em; color: var(--header-color); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--card-border); } .field { margin: 0 0 10px; font-size: 1.05rem; line-height: 1.5; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .field:last-child { margin-bottom: 0; } .field-label { font-weight: 700; color: var(--ink-soft); flex-shrink: 0; } .field-select { flex: 1; min-width: 140px; font-family: 'Bitter', serif; font-size: 1.05rem; color: var(--ink); background: transparent; border: none; border-bottom: 1px solid var(--card-border); padding: 0 0 2px; cursor: pointer; appearance: auto; } .field-select:hover { border-bottom-color: var(--primary-strong); } .field-select:focus-visible { outline: 1px solid var(--header-color); outline-offset: 2px; } .field-static { flex: 1; min-width: 140px; font-size: 1.05rem; color: var(--ink); } .lock-btn { flex-shrink: 0; background: none; border: none; cursor: pointer; font-size: 1rem; line-height: 1; padding: 2px 5px; border-radius: 3px; opacity: 0.55; transition: opacity 0.15s ease, background 0.15s ease; } .lock-btn:hover { opacity: 1; } .lock-btn.locked { opacity: 1; background: color-mix(in srgb, var(--header-color) 18%, transparent); } .lock-btn:focus-visible { outline: 1px solid var(--header-color); outline-offset: 1px; } @media (max-width: 600px) { body { font-size: 16px; } #card { padding: 20px 20px 22px; } h1 { font-size: 1.7rem; } #subtitle { font-size: 0.95rem; margin-bottom: 20px; } .section-label { font-size: 1.05rem; } #theme-toolbar { gap: 8px; margin-bottom: 18px; } /* Force the label onto its own row so the dropdown gets full width on the line below, instead of squeezing (and truncating) next to the label and lock icon. */ .field-label { flex-basis: 100%; } .field-select { min-width: 0; } .field-static { min-width: 0; } }