/* ============================================================ HOMELANDER — AMERICA THEME Loaded dead-last in . Modern premium patriotic: deep navy field, true flag red + gold + white, stars pattern, stars-and- stripes accent bar, recolored eagle hero. Dark-first navy with a working light mode. FX retuned to flag colors (token-driven). The 3D figures (baked textures) are hidden. Accent tokens use !important so accent.js's runtime injection can't override. Purely additive — remove the single in index.html to revert. No JS is edited. ============================================================ */ /* ============================================================ §1 — PALETTE (both themes). Flag red + gold + navy + white. ============================================================ */ /* ---- DARK (default) ---- Covers dark theme + every accent palette (so accent.js can't bring non-flag colors). The bare :root[data-accent] entries ensure the default crimson accent also resolves to flag red. */ [data-theme="dark"], :root[data-accent="crimson"], :root[data-accent="cobalt"], :root[data-accent="emerald"], :root[data-accent="violet"], :root[data-accent="amber"], :root[data-accent="mono"], [data-theme="dark"][data-accent="crimson"], [data-theme="dark"][data-accent="cobalt"], [data-theme="dark"][data-accent="emerald"], [data-theme="dark"][data-accent="violet"], [data-theme="dark"][data-accent="amber"], [data-theme="dark"][data-accent="mono"] { --bg: #0a1428; --bg-raised: #0f1c36; --bg-raised-2: #13233f; --bg-raised-solid: #0f1c36; --bg-overlay: #162a47; --bg-input: #0d1a31; --line: #1e3358; --line-soft: #162a47; --ink: #f4f6fb; --ink-dim: #aebbd2; --ink-faint: #6f819f; /* flag red accent — !important beats accent.js runtime injection */ --ember: #d6213a !important; --ember-bright: #ee2b4a !important; --ember-dim: rgba(214, 33, 58, 0.16) !important; --ember-glow: rgba(214, 33, 58, 0.42) !important; /* gold */ --gold: #f0b429 !important; --gold-bright: #ffd75e !important; --gold-dim: rgba(240, 180, 41, 0.18) !important; /* Old Glory blue */ --blue: #2f6fd6; --blue-deep: #1f4ea1; --user-bubble: linear-gradient(165deg, #16294a, #101e38); --danger: #ee2b4a; --ok: #5bbd6a; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 4px 14px -4px rgba(0, 0, 0, 0.45); --shadow: 0 18px 48px -16px rgba(0, 0, 0, 0.6); --shadow-lg: 0 30px 70px -22px rgba(0, 0, 0, 0.7); --scrim: rgba(4, 9, 20, 0.72); --glass-border: rgba(255, 255, 255, 0.09); --glass-hi: rgba(255, 255, 255, 0.05); } /* ---- LIGHT (working alt) ---- */ [data-theme="light"] { --bg: #eef2f9; --bg-raised: #ffffff; --bg-raised-2: #ffffff; --bg-raised-solid: #ffffff; --bg-overlay: #e2e8f3; --bg-input: #ffffff; --line: #c7d2e4; --line-soft: #dde4f0; --ink: #14233f; --ink-dim: #46566c; --ink-faint: #6b7a90; --ember: #c41e36 !important; --ember-bright: #a8192e !important; --ember-dim: rgba(196, 30, 54, 0.1) !important; --ember-glow: rgba(196, 30, 54, 0.2) !important; --gold: #c8901a !important; --gold-bright: #e0aa2e !important; --gold-dim: rgba(200, 144, 26, 0.14) !important; --blue: #1f4ea1; --blue-deep: #173c7e; --user-bubble: linear-gradient(165deg, #eaf0fa, #dbe3f1); --danger: #b3252b; --ok: #3f7a45; --shadow-xs: 0 1px 2px rgba(20, 35, 63, 0.06); --shadow-sm: 0 4px 14px -4px rgba(20, 35, 63, 0.12); --shadow: 0 18px 48px -18px rgba(20, 35, 63, 0.22); --shadow-lg: 0 30px 70px -22px rgba(20, 35, 63, 0.28); --scrim: rgba(20, 30, 48, 0.4); --glass-border: rgba(20, 35, 63, 0.1); --glass-hi: rgba(255, 255, 255, 0.7); } /* ============================================================ §2 — FX LAYER (selective) Keep: fxbg WebGL aurora (recolors to navy/gold/red via tokens), spice sparks, streaming glow, per-token ignite. Hide: 3D figures (baked textures), intro curtain, custom cursor. ============================================================ */ /* 3D figures — un-recolorable baked textures → hidden */ #voughtbg-canvas, #voughtbg-scrim, .hl-heromodel-canvas { display: none !important; } /* intro.js cold-open replays every load → never paint */ #intro-curtain { display: none !important; } /* native cursor restored (hide custom cursor.js overlay) */ #cursor-root { display: none !important; } html.cursor-active, html.cursor-active * { cursor: auto !important; } html.cursor-active input, html.cursor-active textarea, html.cursor-active [contenteditable] { cursor: text !important; } /* fxbg aurora: visible, but tuned a touch so the navy field dominates */ #fxbg-canvas { opacity: 0.5 !important; } /* the grain from the base theme is gone; aurora stays */ .grain { display: none !important; } /* ============================================================ §3 — STARS PATTERN (sidebar header, subtle texture) A tiled 5-point star field, low opacity. Navy-on-navy in dark, blue-tint in light. ============================================================ */ .sidebar-head { position: relative; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Cpath d='M14 6l1.8 4.7L20.5 12l-3.8 3.3 1.2 4.9L14 17.4 10.1 20.2l1.2-4.9L7.5 12l4.7-1.3z'/%3E%3Cpath d='M42 30l1.4 3.6 3.8.3-2.9 2.5.9 3.7L42 38.4l-3.2 1.7.9-3.7-2.9-2.5 3.8-.3z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 56px 56px; } [data-theme="light"] .sidebar-head { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='%231f4ea1' fill-opacity='0.05'%3E%3Cpath d='M14 6l1.8 4.7L20.5 12l-3.8 3.3 1.2 4.9L14 17.4 10.1 20.2l1.2-4.9L7.5 12l4.7-1.3z'/%3E%3Cpath d='M42 30l1.4 3.6 3.8.3-2.9 2.5.9 3.7L42 38.4l-3.2 1.7.9-3.7-2.9-2.5 3.8-.3z'/%3E%3C/g%3E%3C/svg%3E"); } /* ============================================================ §4 — STARS-AND-STRIPES ACCENT BAR The stripes element under the wordmark = red/white/blue. The active-conversation rail = a thin striped flag bar. ============================================================ */ .stripes { margin-top: 14px; height: 4px; border-radius: 2px; background: repeating-linear-gradient( 180deg, var(--ember) 0 1px, #ffffff 1px 2px, var(--blue-deep) 2px 4px ); opacity: 0.95; animation: none; } /* active conversation: striped flag rail */ .convo-item.active { position: relative; } .convo-item.active::before { background: repeating-linear-gradient( 180deg, var(--ember) 0 3px, #ffffff 3px 5px, var(--blue-deep) 5px 9px ) !important; border-radius: 0 3px 3px 0 !important; box-shadow: 0 0 10px var(--ember-glow) !important; animation: none !important; } /* ============================================================ §5 — RECOLORED EAGLE (unhide — voughtbg/heromodel force-hide it) The SVG colors are recolored in index.html; here we just make sure the stage is visible and tone the glow to the flag field. ============================================================ */ .eagle-stage, .eagle-stage .eagle { display: block !important; } .eagle-stage::before { background: radial-gradient(ellipse at center, var(--gold-dim), transparent 66%) !important; animation: none !important; opacity: 0.7 !important; } .eagle { animation: none !important; } /* calm, not soaring */ /* ============================================================ §6 — SURFACES (modern premium patriotic) ============================================================ */ body { background: var(--bg); font-feature-settings: "cv01"; letter-spacing: 0; } .app { background: var(--bg); } ::selection { background: var(--ember); color: #fff; } :focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; } /* ---- sidebar ---- */ .sidebar { background: linear-gradient(180deg, var(--bg-raised), var(--bg)); border-right: 1px solid var(--glass-border); box-shadow: inset -1px 0 0 var(--glass-hi), 1px 0 30px rgba(0, 0, 0, 0.3); } .sidebar-foot { background: linear-gradient(0deg, var(--glass-hi), transparent); border-top: 1px solid var(--line-soft); } /* wordmark: gold + white */ .wordmark { font-family: var(--font-body); font-weight: 700; font-size: 22px; letter-spacing: 0.06em; text-transform: uppercase; color: #ffffff; animation: none; filter: none; text-shadow: none; } .wordmark .amp { color: var(--gold); text-shadow: 0 0 16px var(--gold-dim); -webkit-text-stroke: 0; } .wordmark-sub { font-style: normal; color: var(--ink-faint); font-size: 11px; } .wordmark-sub .badge { color: var(--blue); border: 1px solid color-mix(in srgb, var(--blue) 55%, transparent); background: linear-gradient(160deg, rgba(47, 111, 214, 0.18), transparent); box-shadow: none; } /* new-conversation: red-tinted premium button */ .btn-new { background: linear-gradient(160deg, var(--ember-dim), transparent 72%); border: 1px solid var(--line); box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-hi); } .btn-new:hover { border-color: var(--ember); background: linear-gradient(160deg, var(--ember-dim), transparent 55%); box-shadow: 0 8px 24px -8px var(--ember-glow), inset 0 1px 0 var(--glass-hi); } .btn-new svg { color: var(--ember); filter: drop-shadow(0 0 5px var(--ember-glow)); } /* search */ .search-wrap input { background: var(--bg-input); border: 1px solid var(--line-soft); } .search-wrap input:focus { border-color: var(--ember); box-shadow: 0 0 0 3px var(--ember-dim); } /* conversation items */ .convo-item { border: 1px solid transparent; border-radius: 9px; } .convo-item:hover { background: var(--bg-overlay); border-color: var(--line-soft); } .convo-item.active { background: linear-gradient(100deg, var(--ember-dim), var(--bg-overlay) 60%); border-color: var(--line); } .convo-actions button:hover { color: var(--ember); background: var(--ember-dim); } /* footer buttons */ .foot-btn { border: 1px solid var(--line-soft); background: none; color: var(--ink-dim); } .foot-btn:hover { color: var(--ink); border-color: var(--ember); background: var(--ember-dim); box-shadow: inset 0 1px 0 var(--glass-hi); } /* ---- chat header ---- */ .chat-head { background: linear-gradient(180deg, var(--glass-hi), transparent); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-bottom: 1px solid var(--glass-border); box-shadow: 0 10px 28px -20px rgba(0, 0, 0, 0.7); animation: none; } .main::before { content: ""; position: absolute; top: -180px; left: 50%; transform: translateX(-50%); width: 720px; height: 420px; background: radial-gradient(ellipse at center, var(--gold-dim), transparent 65%); pointer-events: none; opacity: 0.6; } .chat-title { font-family: var(--font-body); font-weight: 600; font-size: 17px; letter-spacing: 0; } /* icon buttons */ .icon-btn { background: none; border: 1px solid transparent; } .icon-btn:hover { color: var(--ember); border-color: var(--line); background: var(--bg-overlay); } /* connect button: flag red */ .connect-btn { border: 1px solid var(--ember); background: var(--ember-dim); color: var(--ember-bright); box-shadow: none; animation: none; } .connect-btn:hover { background: var(--ember); color: #fff; box-shadow: 0 6px 18px var(--ember-glow); } .connect-btn svg { filter: drop-shadow(0 0 4px var(--ember-glow)); } /* ---- empty / welcome ---- */ .empty-state { margin: auto; max-width: 620px; padding: 4vh 28px 2vh; animation: none; } .hero-title { font-family: var(--font-body); font-weight: 700; font-size: 40px; letter-spacing: 0.04em; text-transform: uppercase; margin: 14px 0 4px; background: linear-gradient(180deg, #ffffff 0%, var(--gold-bright) 35%, var(--gold) 65%, #9a6c12 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)); } [data-theme="light"] .hero-title { background: linear-gradient(180deg, var(--blue-deep) 0%, var(--gold) 55%, #8a3a22 120%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-quote { font-family: var(--font-body); font-weight: 400; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ink-dim); margin: 0 auto 30px; padding-top: 14px; max-width: 440px; } .hero-quote::before { background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.7; } .starter-grid { gap: 12px; max-width: 560px; margin: 0 auto; } .starter { background: var(--bg-raised); border: 1px solid var(--glass-border); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-hi); font-weight: 500; } .starter:hover { border-color: var(--ember); color: var(--ink); box-shadow: 0 14px 34px -8px var(--ember-glow), inset 0 1px 0 var(--glass-hi); } /* ---- messages ---- */ .msg-row:last-child { animation: none; } .msg-label { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; } .msg-row.assistant .msg-label { color: var(--ember); animation: none; } .msg-label .model-tag { background: var(--bg-overlay); border: 1px solid var(--line-soft); color: var(--ink-faint); padding: 1px 7px; border-radius: 5px; } .msg-row.assistant .msg-body { font-size: 15.5px; line-height: 1.7; color: var(--ink); } .msg-row.user .msg-body { background: var(--user-bubble); border: 1px solid var(--glass-border); border-radius: 18px 18px 18px 5px; padding: 13px 18px; box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-hi); } /* markdown: premium patriotic */ .msg-body h1, .msg-body h2, .msg-body h3, .msg-body h4 { font-family: var(--font-body); letter-spacing: -0.01em; } .msg-body h2::before { background: linear-gradient(180deg, var(--ember), var(--gold)); } .msg-body a { color: var(--ember); } .msg-body strong { color: var(--ink); } .msg-body blockquote { border-left: 3px solid var(--ember); background: linear-gradient(90deg, var(--ember-dim), transparent 72%); } .msg-body li::marker { color: var(--ember); } .msg-body table { box-shadow: var(--shadow-sm); } .msg-body th { background: var(--bg-overlay); } .msg-body tbody tr:nth-child(even) { background: var(--ember-dim); } .msg-body code { background: var(--bg-overlay); border: 1px solid var(--line-soft); color: var(--gold); } [data-theme="light"] .msg-body code { color: var(--ember); } .msg-body pre { background: #0a1428; border: 1px solid var(--line); box-shadow: var(--shadow-sm); } [data-theme="light"] .msg-body pre { background: #0f1c36; } .code-head { background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); } .code-head::before { background: var(--ember); box-shadow: 14px 0 0 var(--gold), 28px 0 0 var(--line); } .code-copy:hover { color: var(--ember-bright); background: var(--ember-dim); } /* thinking box */ .thinking-box { background: linear-gradient(170deg, var(--ember-dim), transparent 42%); border: 1px dashed var(--line); } .thinking-box[open] { border-color: color-mix(in srgb, var(--ember) 35%, var(--line)); border-style: solid; } .thinking-box summary::before { color: var(--ember); } /* streaming caret + glow kept (flag red) */ .cursor { background: var(--ember); box-shadow: 0 0 10px var(--ember-glow); } /* notices */ .notice-inner { box-shadow: none; } /* ---- composer ---- */ .composer-wrap { animation: none; } .composer { background: var(--bg-input); backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25); border: 1px solid var(--glass-border); border-radius: 22px; box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi); animation: none; } .composer:hover { border-color: var(--line); } .composer:focus-within { border-color: color-mix(in srgb, var(--ember) 45%, var(--glass-border)); box-shadow: 0 18px 56px -16px rgba(0,0,0,0.6), 0 0 0 3px var(--ember-dim), inset 0 1px 0 var(--glass-hi); transform: translateY(-1px); } .composer-wrap::after { display: none; } /* send button: flag red */ .send-btn { background: linear-gradient(155deg, var(--ember-bright), var(--ember)); border-radius: 14px; box-shadow: 0 6px 16px var(--ember-glow), inset 0 1px 0 rgba(255,255,255,0.28); } .send-btn:hover { box-shadow: 0 10px 28px var(--ember-glow), inset 0 1px 0 rgba(255,255,255,0.32); } .send-btn:disabled { background: var(--line); box-shadow: none; } .send-btn.stop { background: none; border: 1px solid var(--danger); color: var(--danger); } /* model chip / build toggle (build = gold) */ .model-chip, .build-toggle { background: var(--bg-raised); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-hi); } .model-chip:hover { border-color: var(--ember); box-shadow: 0 6px 16px var(--ember-dim), inset 0 1px 0 var(--glass-hi); } .model-chip::before { background: var(--ember); box-shadow: 0 0 10px var(--ember-glow); } .build-toggle:hover { border-color: var(--gold); color: var(--ink); } .build-toggle.on { background: linear-gradient(155deg, var(--gold-bright), var(--gold)); border-color: var(--gold); color: #1a1208; box-shadow: 0 6px 18px var(--gold-dim); } .build-toggle.on svg { color: #1a1208; } .attach-chip img { border: 1px solid var(--line); } .attach-chip button { background: var(--bg-overlay); } /* ---- settings drawer & modal ---- */ .drawer, .modal { background: var(--bg-raised); backdrop-filter: blur(20px) saturate(1.25); -webkit-backdrop-filter: blur(20px) saturate(1.25); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-hi); } .drawer { border-left: 1px solid var(--glass-border); } .modal { border: 1px solid var(--glass-border); } .drawer-head, .modal-head { background: linear-gradient(180deg, var(--glass-hi), transparent); border-bottom: 1px solid var(--line-soft); } .drawer-head h3, .modal-head h3 { font-family: var(--font-body); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; } .set-group h4::before { background: linear-gradient(180deg, var(--gold), var(--gold-dim)); } .model-card { background: var(--bg-input); border: 1px solid var(--line); box-shadow: none; } .model-card:hover { border-color: var(--ink-faint); box-shadow: var(--shadow-sm); } .model-card.active { border-color: var(--ember); background: linear-gradient(150deg, var(--ember-dim), var(--bg-input) 72%); box-shadow: 0 0 0 1px var(--ember-dim), 0 8px 24px -10px var(--ember-glow); } .model-card.active .mc-name { color: var(--ember-bright); } .model-card.active::after { background: linear-gradient(180deg, var(--ember-bright), var(--ember)); box-shadow: 0 0 10px var(--ember-glow); } .seg { background: var(--bg-input); border: 1px solid var(--line-soft); } .seg button.active { color: var(--ember-bright); background: var(--ember-dim); border-color: color-mix(in srgb, var(--ember) 45%, transparent); } .toggle { background: var(--line); } .toggle-row input:checked + .toggle { background: var(--ember-dim); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ember) 40%, transparent); } .toggle-row input:checked + .toggle::after { background: var(--ember); box-shadow: 0 0 10px var(--ember-glow); } input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--ember) var(--fill, 0%), var(--bg-input) var(--fill, 0%)); border: 1px solid var(--line-soft); } input[type="range"]::-webkit-slider-thumb { background: linear-gradient(155deg, var(--ember-bright), var(--ember)); border: 2px solid var(--bg-raised-solid); box-shadow: 0 2px 8px var(--ember-glow); } .set-group textarea, .set-group input[type="password"], .set-group input[type="url"] { background: var(--bg-input); border: 1px solid var(--line); } .set-group textarea:focus, .set-group input:focus { border-color: var(--ember); box-shadow: 0 0 0 3px var(--ember-dim); } .preset { background: var(--bg-input); border: 1px solid var(--line); } .preset:hover { border-color: var(--ember); color: var(--ember-bright); } .preset.active { border-color: var(--ember); color: var(--ember-bright); background: var(--ember-dim); } .key-save { background: var(--ember-dim); border: 1px solid var(--ember); color: var(--ember-bright); } .key-save:hover { background: var(--ember); color: #fff; } .step-n { background: linear-gradient(155deg, var(--ember-bright), var(--ember)); box-shadow: 0 0 14px var(--ember-glow); } .snippet { background: var(--bg-input); border: 1px solid var(--line); } .snippet code { color: var(--gold); } .snip-copy:hover { color: var(--ember-bright); background: var(--ember-dim); } .modal-warn { border: 1px solid var(--gold); background: var(--gold-dim); } /* ---- caret + scrollbars ---- */ textarea, input { caret-color: var(--ember); } ::-webkit-scrollbar-thumb { background: var(--line); } ::-webkit-scrollbar-thumb:hover { background: var(--ember); }