/* ============================================================================ LOREMANA — Design Tokens & Component Styles (v2 "premium") Plain CSS. No build step, no framework. Drop into any vanilla page: Fonts (load in your ): Cinzel (display / wordmark) + EB Garamond (body / reading) https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap ---------------------------------------------------------------------------- v3 · reconciled with Design System v2 (approved 6-point call). Canonical = numeric scale (--gold-400, --ink-700, --text-*). Legacy names (--gold, --ink2, --parchment3 …) are kept as ALIASES so existing markup keeps working — migrate gradually. Card component colours are intentionally left as-is per direction (no --type-* applied to any card rule here). ---------------------------------------------------------------------------- Section 1 = your existing token NAMES with refined, premium values. Section 2 = new tokens you invited (type, spacing, radius, shadow, gradients). Section 3 = component classes (lm- prefixed). Rename to match your markup. ========================================================================== */ :root { /* ===== CANONICAL SCALE (Design System v2) — prefer in new markup ===== */ /* ── GOLD — primary accent (brand #E9C45F) ── Decision 3: primary lifted to brand gold; old antique #CDA24A retained as a darker line/border tone (--gold-line / --border). */ --gold-200: #f9e3a8; /* glow / gradient top / hover-bright */ --gold-300: #f3d488; /* hover */ --gold-400: #e9c45f; /* ★ PRIMARY · brand gold */ --gold-500: #d4a843; /* labels / lit lines */ --gold-600: #b3862c; /* borders / deep edge */ --gold-line: #cda24a; /* retained antique tone for hairlines */ /* ── INK — dark surfaces (floor = brand #15110A) ── */ --ink-400: #5c4a29; /* hairline / divider */ --ink-500: #43361f; /* border */ --ink-600: #352a18; /* raised / input */ --ink-700: #2a2114; /* panel */ --ink-800: #221b10; /* sunken */ --ink-900: #15110a; /* page floor · brand Ink */ /* ── TEXT on dark ── */ --text-hi: #f6ecd4; /* titles */ --text: #e2d3b0; /* body */ --text-mid: #c2ad84; /* secondary */ --text-low: #9d8a64; /* tertiary (min AA) */ --text-faint: #6f6044; /* decorative only */ /* ── PARCHMENT surfaces + ink riding on them (Decision 4 split) ── */ --surface-100: #f5ecd6; /* lightest card */ --surface-200: #ece0c4; /* card body */ --surface-300: #dccba4; /* action strip */ --ink-on-p-hi: #2c2012; /* names on parchment */ --ink-on-p: #473721; /* body on parchment */ /* ── REDS — generate / spend-create (Decision 6) ── */ --generate: #cf3f37; /* red action base (≈ Artist red) */ --generate-hi: #e0524d; /* gradient top / glow */ --crimson-deep: #9c1e1e; /* retained deep red for deep accents */ /* ── TEAL — reference / select-to-generate-from ── */ --teal-base: #3fa896; --teal-hi: #54c2b0; /* ── AI TOOL COLORS (Decision 5 · brand) ── */ --scribe: #ece6d4; --scribe-ink: #362f24; /* off-white · prose */ --artist: #cf4a3b; --artist-dim: #9c382d; /* dark red · images */ --caster: #a17ce0; --caster-dim: #7a5cb0; /* purple · animation */ /* ── CARD-TYPE COLORS (Decision 5) — tokens only; NOT applied to cards, which keep their current live colours per direction. ── */ --type-character: #74a85c; --type-character-ink: #46702f; /* green */ --type-item: #9aa6ad; --type-item-ink: #5a6970; /* pewter */ --type-location: #5d8fc4; --type-location-ink: #356291; /* blue */ /* ── ACTION / SELECTION / STATUS (Decision 5) ── */ --select-teal: var(--teal-base); /* image selected to generate from */ --select-gold: var(--gold-400); /* in-site select (e.g. set cover) */ --ok: #4fb98a; --warn: #e9b04f; /* ===== LEGACY ALIASES — existing markup keeps working, values reconciled ===== */ --gold: var(--gold-400); /* was #cda24a → brand primary */ --gold2: var(--gold-300); /* was #ecc766 */ --gold3: var(--gold-200); /* was #f8e6ac */ --parchment: var(--text-hi); /* was #f6f1e4 */ --parchment2: var(--text); /* was #e3d8bf */ --parchment3: var(--text-mid); /* was #b6a57e */ --ink: var(--ink-900); /* was #0b0805 */ --ink2: var(--ink-800); /* was #161009 */ --ink3: var(--ink-700); /* was #261b0f */ --crimson: var(--generate); /* was #9c1e1e → brighter generate red */ --crimson2: var(--generate-hi); /* was #d23f30 */ --teal: var(--teal-base); /* was #2d8678 */ --teal2: var(--teal-hi); /* was #46c8ad */ /* ── BORDERS — thin gold lines (antique tone retained, Decision 3) ── */ --border: rgba(205,162,74,.16); /* hairline default */ --border2: rgba(205,162,74,.36); /* emphasis / hover / focus*/ /* ════════════════════════════════════════════════════════════════════════ 2 · NEW TOKENS (proposed — wire in as you like) ════════════════════════════════════════════════════════════════════════ */ /* Typography */ --font-display: "Cinzel", "Trajan Pro", Georgia, serif; --font-body: "EB Garamond", "Crimson Pro", Georgia, serif; /* Decision 1 */ /* Modular type scale (~1.25). Display uses Cinzel; body uses Crimson Pro. */ --fs-xs: 0.75rem; /* 12px — eyebrows, cost chips */ --fs-sm: 0.875rem; /* 14px — captions, meta */ --fs-base: 1.0625rem; /* 17px — body */ --fs-md: 1.25rem; /* 20px — lead / large body */ --fs-lg: 1.5rem; /* 24px — card titles */ --fs-xl: 2rem; /* 32px — section heads */ --fs-2xl: 2.75rem; /* 44px — page heads */ --fs-3xl: 4rem; /* 64px — hero / price display */ --lh-tight: 1.12; --lh-snug: 1.35; --lh-body: 1.62; /* Cinzel all-caps wants air. Use these for letter-spacing. */ --track-display: 0.06em; --track-eyebrow: 0.28em; --track-button: 0.14em; /* Spacing scale (4px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* Corner radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; /* cards & modals (matches current shells) */ --radius-xl: 22px; --radius-pill: 999px; /* Elevation — warm-tinted shadows + the signature gold glow. Premium depth = a tight contact shadow + a soft ambient one + a 1px inset highlight that catches the candlelight along the top edge. */ --shadow-1: 0 1px 2px rgba(0,0,0,.5); --shadow-2: 0 4px 14px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.6); --shadow-3: 0 18px 50px rgba(0,0,0,.6), 0 6px 18px rgba(0,0,0,.5); --edge-hi: inset 0 1px 0 rgba(255,247,224,.06); /* top-edge highlight */ --glow-gold: 0 0 0 1px rgba(236,199,102,.25), 0 8px 30px rgba(205,162,74,.22); --glow-crimson: 0 0 0 1px rgba(210,63,48,.30), 0 10px 34px rgba(156,30,30,.40); --ring: 0 0 0 3px rgba(236,199,102,.30); /* focus ring */ /* Signature gradients */ --grad-page: radial-gradient(120% 80% at 50% -8%, #20160c 0%, transparent 55%), var(--ink); --grad-panel: linear-gradient(180deg, #1b140b 0%, #120d07 100%); --grad-gold: linear-gradient(180deg, var(--gold3) 0%, var(--gold2) 42%, var(--gold) 100%); --grad-crimson: linear-gradient(180deg, var(--crimson2) 0%, var(--crimson) 100%); --grad-hairline: linear-gradient(90deg, transparent, var(--border2), transparent); /* Per-tier accents (pricing) — each tier owns a hue, gold is the "popular" spine */ --tier-free: #b6a57e; --tier-merchant: var(--teal2); --tier-noble: #5fbf7a; --tier-sovereign: var(--gold2); --tier-emperor: #e0607a; color-scheme: dark; } /* ============================================================================ 3 · COMPONENTS (lm- prefix — safe to rename to your existing classes) ========================================================================== */ /* Base reading surface ----------------------------------------------------- */ .lm-root, body.lm { margin: 0; background: var(--grad-page); background-attachment: fixed; color: var(--parchment); font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Display headings — gold gradient, the premium move ------------------------ */ .lm-display, .lm-h1, .lm-h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--track-display); line-height: var(--lh-tight); background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 1px 0 rgba(0,0,0,.25); margin: 0; } .lm-h1 { font-size: var(--fs-2xl); } .lm-h2 { font-size: var(--fs-xl); } .lm-h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); letter-spacing: var(--track-display); color: var(--gold2); margin: 0; } /* Eyebrow / section label — letterspaced uppercase Cinzel ------------------- */ .lm-eyebrow { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xs); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: var(--space-3); } /* Hairline divider --------------------------------------------------------- */ .lm-divider { height: 1px; border: 0; background: var(--grad-hairline); margin: var(--space-5) 0; } /* Panels & cards ----------------------------------------------------------- */ .lm-card { background: var(--grad-panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--edge-hi), var(--shadow-2); padding: var(--space-6); } .lm-card--hover { transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .lm-card--hover:hover { border-color: var(--border2); box-shadow: var(--edge-hi), var(--shadow-3); transform: translateY(-2px); } /* Modal — bigger radius, deeper shadow, gold header rule -------------------- */ .lm-modal { background: var(--grad-panel); border: 1px solid var(--border2); border-radius: var(--radius-lg); box-shadow: var(--edge-hi), var(--shadow-3); overflow: hidden; } .lm-modal__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border); } .lm-modal__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); letter-spacing: var(--track-display); text-transform: uppercase; color: var(--gold2); margin: 0; } .lm-modal__body { padding: var(--space-6); } .lm-modal__footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-top: 1px solid var(--border); } /* Buttons ------------------------------------------------------------------ */ .lm-btn { --_bg: var(--ink3); --_fg: var(--parchment); --_bd: var(--border2); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); letter-spacing: var(--track-button); text-transform: uppercase; color: var(--_fg); background: var(--_bg); border: 1px solid var(--_bd); border-radius: var(--radius-md); padding: 12px 22px; cursor: pointer; box-shadow: var(--edge-hi), var(--shadow-1); transition: transform .12s ease, box-shadow .2s ease, filter .2s ease, background .2s ease; } .lm-btn:hover { transform: translateY(-1px); filter: brightness(1.06); } .lm-btn:active { transform: translateY(0); filter: brightness(.97); } .lm-btn:focus-visible { outline: none; box-shadow: var(--edge-hi), var(--ring); } .lm-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; filter: none; } /* Primary gold (INSCRIBE / UPDATE / key CTA) */ .lm-btn--gold { background: var(--grad-gold); color: var(--ink); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), var(--shadow-2); } .lm-btn--gold:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), var(--glow-gold); } /* AI generate (crimson — the "spend a generation" trigger) */ .lm-btn--generate { background: var(--grad-crimson); color: #fbeede; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--shadow-2); } .lm-btn--generate:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), var(--glow-crimson); } /* Ghost (CANCEL / secondary) */ .lm-btn--ghost { background: transparent; border-color: var(--border2); color: var(--parchment2); } .lm-btn--ghost:hover { background: var(--ink3); color: var(--parchment); } /* Teal (reference / non-generation actions) */ .lm-btn--teal { background: linear-gradient(180deg, var(--teal2), var(--teal)); color: #04201b; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), var(--shadow-2); } .lm-btn--pill { border-radius: var(--radius-pill); padding-inline: 28px; } .lm-btn--lg { font-size: var(--fs-base); padding: 16px 30px; } .lm-btn--icon { padding: 10px; border-radius: var(--radius-sm); } /* Inputs ------------------------------------------------------------------- */ .lm-label { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xs); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-3); } /* Underline field (the NAME style) */ .lm-input { width: 100%; box-sizing: border-box; background: transparent; border: 0; border-bottom: 1.5px solid var(--border2); color: var(--parchment); font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg); letter-spacing: .02em; padding: 8px 2px; transition: border-color .2s ease, box-shadow .2s ease; } .lm-input::placeholder { color: var(--parchment3); } .lm-input:focus { outline: none; border-bottom-color: var(--gold2); box-shadow: 0 1px 0 0 var(--gold2); } /* Boxed field / textarea / select */ .lm-field, .lm-select { width: 100%; box-sizing: border-box; background: rgba(0,0,0,.28); border: 1px solid var(--border2); border-radius: var(--radius-md); color: var(--parchment); font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-body); padding: 14px 16px; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } .lm-field::placeholder { color: var(--parchment3); font-style: italic; } .lm-field:focus, .lm-select:focus { outline: none; border-color: var(--gold2); background: rgba(0,0,0,.35); box-shadow: var(--ring); } .lm-select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 20px) 1.25em, calc(100% - 14px) 1.25em; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } /* Chips / pills / badges --------------------------------------------------- */ .lm-chip { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--parchment2); background: rgba(0,0,0,.25); border: 1px solid var(--border2); border-radius: var(--radius-pill); padding: 6px 14px; } .lm-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold2); } .lm-chip--removable { padding-right: 10px; } .lm-badge { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs); letter-spacing: var(--track-button); text-transform: uppercase; color: var(--ink); background: var(--grad-gold); border-radius: var(--radius-pill); padding: 5px 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), var(--shadow-1); } /* Cost chip (the "-1 SCRIBE" token meter) */ .lm-cost { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.05; font-family: var(--font-display); border: 1px solid var(--border2); border-radius: var(--radius-md); padding: 8px 14px; color: var(--parchment2); background: rgba(0,0,0,.25); } .lm-cost b { font-size: var(--fs-md); color: var(--gold2); font-weight: 700; } .lm-cost span { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--parchment3); } /* Tabs (SCRIBE / ARTIST / CASTER) ------------------------------------------ */ .lm-tabs { display: flex; gap: var(--space-7); border-bottom: 1px solid var(--border); } .lm-tab { appearance: none; background: none; border: 0; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base); letter-spacing: var(--track-button); text-transform: uppercase; color: var(--parchment3); padding: var(--space-4) var(--space-1) var(--space-4); position: relative; transition: color .2s ease; } .lm-tab:hover { color: var(--parchment2); } .lm-tab[aria-selected="true"] { color: var(--gold2); } .lm-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--grad-gold); border-radius: 2px; } /* Tier card accent hook (set --tier on the element) ------------------------ */ .lm-tier { --tier: var(--gold2); } .lm-tier__name { color: var(--tier); } .lm-tier__price { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-3xl); color: var(--tier); line-height: 1; } .lm-tier--popular { border-color: color-mix(in srgb, var(--tier) 45%, transparent); box-shadow: var(--edge-hi), 0 0 40px -10px var(--tier), var(--shadow-3); } /* Reduced-motion: drop the lifts/transitions */ @media (prefers-reduced-motion: reduce) { .lm-btn, .lm-card--hover { transition: none; } .lm-btn:hover, .lm-card--hover:hover { transform: none; } } /* ============================================================================ SECONDARY-GLOVE GENERATE BUTTON COMPONENT (centralized) Canonical home for .btn-gen-secondary + .gen-cost-chip + .gen-btn-row, so pages beyond app.php (e.g. realm.php / Realm Overview) get the real button. Extracted verbatim from app.php. NOTE: app.php still carries an inline copy; loremana.css loads after it, so this wins redundantly with no cascade change. ============================================================================ */ .btn-generate-orb,.btn-gen-orb{ font-size:14px;line-height:1;display:inline-block;transition:transform .2s;flex-shrink:0; } .btn-generate.generating .btn-generate-orb, .btn-gen-secondary.generating .btn-gen-orb, .btn-gen-micro.generating .btn-gen-orb{ animation:orb-orbit 1.2s ease-in-out infinite; } @keyframes orb-orbit{ 0% { transform:translate(0,0) rotate(0deg) scale(1); } 25% { transform:translate(3px,-4px) rotate(90deg) scale(1.15); } 50% { transform:translate(0,-6px) rotate(180deg) scale(1.2); } 75% { transform:translate(-3px,-4px)rotate(270deg) scale(1.15); } 100% { transform:translate(0,0) rotate(360deg) scale(1); } } .btn-gen-secondary{ /* Claude Design "glove" (slim ~75%, micro-ish): concave right-edge orb; label hidden via font-size:0 */ width:48px;height:34px;padding:0 21px 0 0; display:inline-flex;align-items:center;justify-content:center; border:1px solid #7d2421;color:#f7f2e8;border-radius:9px; font-family:'Cinzel',serif;font-size:0;letter-spacing:0;line-height:1; cursor:pointer;transition:background .18s,box-shadow .18s,transform .12s,border-color .18s,filter .18s; flex-shrink:0;position:relative;overflow:visible; box-shadow:0 2px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.18); -webkit-mask:radial-gradient(circle 21px at 100% 50%,transparent 0 20.5px,#000 21px); mask:radial-gradient(circle 21px at 100% 50%,transparent 0 20.5px,#000 21px); } .btn-gen-secondary .btn-gen-orb{font-size:14px;line-height:1;color:inherit;} /* instant hover tooltip (no native title delay) — label supplied via data-tip */ .gen-btn-row[data-tip]:hover::after{ content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%); background:#1a1208;color:var(--gold2,#e8b84b);font-family:'Cinzel',serif;font-size:10px; letter-spacing:1.5px;text-transform:uppercase;padding:5px 9px;border:1px solid var(--border2,rgba(200,151,42,.36)); border-radius:6px;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.55);z-index:60;pointer-events:none; } .gen-btn-row[data-tip]:hover::before{ content:"";position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%); border:5px solid transparent;border-top-color:#1a1208;z-index:60;pointer-events:none; } /* Archetype colour variants — tier-3 micro gradient (150° tool→red), orb tinted */ .btn-gen-secondary.btn-gen-scribe{ background:linear-gradient(150deg,#ecdfca,#cf3f37 72%); color:#f7f2e8; } .btn-gen-secondary.btn-gen-scribe:hover:not(:disabled){ filter:brightness(1.1); box-shadow:0 3px 14px rgba(207,63,55,.45),inset 0 1px 0 rgba(255,255,255,.2); } .btn-gen-secondary.btn-gen-artist{ background:linear-gradient(150deg,#7c211a,#cf3f37 78%); color:#41100c; } .btn-gen-secondary.btn-gen-artist:hover:not(:disabled){ filter:brightness(1.1); box-shadow:0 3px 14px rgba(140,15,15,.5); } .btn-gen-secondary.btn-gen-caster{ background:linear-gradient(150deg,#7a3aa6,#cf3f37 76%); border-color:#7a2a7e;color:#a17ce0; } .btn-gen-secondary.btn-gen-caster:hover:not(:disabled){ filter:brightness(1.1); box-shadow:0 3px 14px rgba(100,30,160,.5); } .btn-gen-secondary:hover:not(:disabled){ transform:translateY(-1px); } .btn-gen-secondary:active:not(:disabled){ transform:translateY(0); } .btn-gen-secondary:disabled{ opacity:.4;cursor:not-allowed;transform:none; } /* ── Generation cost chip ──────────────────────────────────────────────────── Matches the topbar quota box style: rounded rect, cost number on top, archetype label (SCRIBE / ARTIST / CASTER) below in small caps. Static display — live count lives only in the topbar quota boxes. */ .gen-cost-chip{ display:inline-flex;flex-direction:column;align-items:center;justify-content:center; width:44px;min-height:30px;border-radius:6px;border:1px solid transparent; padding:3px 5px;flex-shrink:0;pointer-events:none; transition:opacity .15s; } .gen-cost-chip-num{ font-family:'Cinzel',serif;font-size:13px;font-weight:700; line-height:1;letter-spacing:.5px; } .gen-cost-chip-label{ font-family:'Cinzel',serif;font-size:6px;letter-spacing:1.5px; line-height:1;margin-top:2px;text-transform:uppercase; } /* ── INVERTED chips: filled background, dark text ── */ /* Scribe — blue-white fill */ .gen-cost-chip.chip-scribe{ background:#ece6d4; border-color:transparent; box-shadow:0 1px 4px rgba(0,0,0,.25); } .gen-cost-chip.chip-scribe .gen-cost-chip-num { color:#362f24; } .gen-cost-chip.chip-scribe .gen-cost-chip-label{ color:#362f24; } /* Artist — red fill */ .gen-cost-chip.chip-artist{ background:#7c211a; border-color:transparent; box-shadow:0 1px 4px rgba(0,0,0,.3); } .gen-cost-chip.chip-artist .gen-cost-chip-num { color:#ffd9c0; } .gen-cost-chip.chip-artist .gen-cost-chip-label{ color:#ffd9c0; } /* Caster — purple fill */ .gen-cost-chip.chip-caster{ background:#6a3a9e; border-color:transparent; box-shadow:0 1px 4px rgba(0,0,0,.3); } .gen-cost-chip.chip-caster .gen-cost-chip-num { color:#eed7ff; } .gen-cost-chip.chip-caster .gen-cost-chip-label{ color:#eed7ff; } /* Flash animation when topbar quota box decrements */ @keyframes quota-flash{ 0% { transform:scale(1); opacity:1; } 20% { transform:scale(1.25);opacity:1; } 60% { transform:scale(.95); opacity:.7; } 100%{ transform:scale(1); opacity:1; } } .quota-box.quota-flash{ animation:quota-flash .4s ease-out; } /* Row wrapper so button + chip sit inline */ .gen-btn-row{ display:inline-flex;align-items:center;gap:6px; } /* PRIMARY interlock — chip nests into the pill on a torn-ticket seam */ .gen-btn-row:has(.btn-generate){ gap:0; align-items:stretch; } .gen-btn-row:has(.btn-generate) .gen-cost-chip{ align-self:stretch;width:auto;min-width:54px;border:none;border-radius:999px; margin-left:-26px;padding:0 16px 0 35px;justify-content:center; -webkit-mask:radial-gradient(circle 31.25px at 0px center,transparent 0 31px,#000 31.25px); mask:radial-gradient(circle 31.25px at 0px center,transparent 0 31px,#000 31.25px); } /* SECONDARY glove — convex chip nests into the concave orb button */ .gen-btn-row:has(.btn-gen-secondary){ gap:0; align-items:center; position:relative; } .gen-btn-row:has(.btn-gen-secondary) .gen-cost-chip{ position:relative;z-index:1;width:auto;min-width:42px;height:34px;margin-left:-17px; padding:0 9px 0 14px;border:none;border-radius:17px 8px 8px 17px;justify-content:center; -webkit-mask:none;mask:none; } .gen-btn-row:has(.btn-gen-secondary) .gen-cost-chip-num{ font-size:11px; } .gen-btn-row:has(.btn-gen-secondary) .gen-cost-chip-label{ font-size:6px; } /* Realm bar + Library/Gallery switcher — per-realm accent ----------------------- Ground rebalance (warm vignette) lives on #realms-topbar / #lbp-topbar / #gallery-topbar in app.php. --realm-accent is stamped on each .ws-tab by renderWorkspaceTabs() (Realm) and renderRealmBar() (Library + Gallery) from workspaces.accent (fallback wsDefaults(), % 10 for Domain II). Both containers share the .ws-tab class, so the look is identical across the three views. Selectors are container-scoped so they win over the inline .ws-tab rules. */ #workspace-tabs .ws-tab, .realm-switcher-bar .ws-tab{ --realm-accent: var(--gold-400); gap: 8px; } /* Resting dot: muted — hue preserved but desaturated + darkened so inactive realms read as calm. Stored workspaces.accent hex is never mutated. */ #workspace-tabs .ws-tab .ws-tab-dot, .realm-switcher-bar .ws-tab .ws-tab-dot{ width: 8px; height: 8px; border-radius: 50%; flex: none; transition: background .2s ease, box-shadow .2s ease, transform .2s ease; background: var(--realm-accent); /* fallback */ background: oklch(from var(--realm-accent) calc(l - 0.12) calc(c * 0.45) h); opacity: 0.5; } /* Active realm: strong tinted label, accent underline, pronounced top gradient, full-saturation dot with generous glow — clear 'you are here' signal. */ #workspace-tabs .ws-tab.active, .realm-switcher-bar .ws-tab.active{ color: color-mix(in srgb, var(--realm-accent) 80%, var(--text-hi)); border-bottom-color: var(--realm-accent); background: linear-gradient(180deg, color-mix(in srgb, var(--realm-accent) 28%, transparent) 0%, color-mix(in srgb, var(--realm-accent) 8%, transparent) 55%, transparent 100%); } #workspace-tabs .ws-tab.active .ws-tab-dot, .realm-switcher-bar .ws-tab.active .ws-tab-dot{ background: oklch(from var(--realm-accent) calc(l + 0.18) calc(c * 2.2) h); box-shadow: 0 0 7px 1px color-mix(in srgb, var(--realm-accent) 90%, transparent), 0 0 16px 3px color-mix(in srgb, var(--realm-accent) 45%, transparent); opacity: 1; transform: scale(1.25); } @media (prefers-reduced-motion: reduce){ #workspace-tabs .ws-tab, .realm-switcher-bar .ws-tab{ transition: none; } #workspace-tabs .ws-tab .ws-tab-dot, .realm-switcher-bar .ws-tab .ws-tab-dot{ transition: none; } } /* ───────────────────────────────────────────────────────────────────── Realm bar tab component (integrated from Claude Design reference). Additive — no existing selectors touched. Set --realm-accent per tab. ───────────────────────────────────────────────────────────────────── */ .lm-realmbar { background: radial-gradient(140% 180% at 50% -60%, #241809 0%, transparent 52%), linear-gradient(180deg, #1a140b 0%, #141009 100%); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); overflow: hidden; } .lm-realmbar__realms, .lm-realmbar__toolbar { background: #100c07; border-top: 1px solid var(--border); } .lm-realmbar__realms { display: flex; align-items: stretch; } /* Per-realm tab. Set --realm-accent on the element (defaults to brand gold). */ .lm-realm-tab { --realm-accent: var(--gold-400); appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); letter-spacing: var(--track-button); text-transform: uppercase; white-space: nowrap; padding: 0 26px; background: none; color: var(--text-low); border: 0; border-bottom: 2px solid transparent; transition: color .18s ease, background .18s ease; } .lm-realm-tab:hover { color: var(--text-mid); } /* Dot: resting state — hue preserved, chroma lifted at render time so adjacent muted Realm colours separate. Stored workspaces.accent hex is never mutated. */ .lm-realm-tab__dot { width: 8px; height: 8px; border-radius: 50%; background: oklch(from var(--realm-accent) calc(l + 0.05) calc(c * 1.75) h); /* Fallback for engines without relative-color oklch() */ background: var(--realm-accent); background: oklch(from var(--realm-accent) calc(l + 0.05) calc(c * 1.75) h); } /* Active realm owns its colour: tinted label, accent underline, top wash, lit dot. */ .lm-realm-tab.is-active { color: color-mix(in srgb, var(--realm-accent) 62%, var(--text-hi)); border-bottom-color: var(--realm-accent); background: linear-gradient(180deg, color-mix(in srgb, var(--realm-accent) 18%, transparent) 0%, transparent 70%); } .lm-realm-tab.is-active .lm-realm-tab__dot { background: oklch(from var(--realm-accent) calc(l + 0.14) calc(c * 1.9) h); box-shadow: 0 0 9px 1px color-mix(in srgb, var(--realm-accent) 70%, transparent); } @media (prefers-reduced-motion: reduce){ .lm-realm-tab{ transition:none; } }