/* Alien ME — Theme Bridge v3 (Refinement: depth + glass + hover polish) Additive. No HTML changes required. Scoped to :root[data-theme] so it only runs when theme runtime is active. */ :root[data-theme]{ /* v4 intensity controls (themes may override) */ --am-radius: 16px; --am-blur: 10px; --am-glow: 1; /* 0.6 subtle .. 1.4 loud */ --am-border: 1; /* Compatibility defaults */ --bg-2: color-mix(in srgb, var(--bg, #05070e) 78%, #000 22%); --accent-primary: var(--accent, #5cc6ff); --accent-secondary: color-mix(in srgb, var(--accent-primary) 55%, #ffffff 45%); --border-soft: color-mix(in srgb, var(--accent-primary) 22%, transparent); --border-strong: color-mix(in srgb, var(--accent-primary) 55%, transparent); /* Depth stack */ --depth-ambient: color-mix(in srgb, var(--accent-primary) 18%, transparent); --depth-panel: rgba(0,0,0,.45); --depth-focus: color-mix(in srgb, var(--accent-primary) 30%, transparent); /* Glass system */ --glass-bg: linear-gradient(180deg, color-mix(in srgb, var(--card, rgba(6,18,40,.55)) 92%, transparent), color-mix(in srgb, var(--card2, rgba(8,28,60,.42)) 92%, transparent)); --glass-border: color-mix(in srgb, var(--accent-primary) 26%, transparent); --glass-highlight: color-mix(in srgb, var(--accent-secondary) 18%, transparent); --glass-blur: 10px; /* Buttons */ --btn-bg: linear-gradient(135deg, color-mix(in srgb, var(--accent-primary) 22%, transparent), color-mix(in srgb, var(--accent-primary) 10%, transparent)); --btn-border: color-mix(in srgb, var(--accent-primary) 42%, transparent); --btn-hover: linear-gradient(135deg, color-mix(in srgb, var(--accent-primary) 40%, transparent), color-mix(in srgb, var(--accent-secondary) 14%, transparent)); --btn-text: var(--ink, rgba(219,233,255,.95)); /* Inputs */ --input-bg: color-mix(in srgb, var(--bg, #05070e) 60%, var(--card, rgba(6,18,40,.55)) 40%); --input-border: color-mix(in srgb, var(--accent-primary) 30%, transparent); /* Footer */ --footer-bg: color-mix(in srgb, var(--bg, #05070e) 55%, #000 45%); } /* Base page depth */ :root[data-theme] body{ color: var(--ink, rgba(219,233,255,.95)) !important; background: radial-gradient(1200px 600px at 18% -10%, var(--depth-ambient), transparent 58%), radial-gradient(900px 600px at 82% 26%, color-mix(in srgb, var(--accent-secondary) 14%, transparent), transparent 62%), radial-gradient(800px 520px at 22% 80%, color-mix(in srgb, var(--accent-primary) 12%, transparent), transparent 65%), linear-gradient(180deg, var(--bg, #05070e) 0%, var(--bg-2) 100%) !important; } /* Links */ :root[data-theme] a{ color: inherit; text-decoration-color: color-mix(in srgb, var(--accent-primary) 40%, transparent); } :root[data-theme] a:hover{ text-shadow: 0 0 calc(12px * var(--am-glow,1)) color-mix(in srgb, var(--accent-primary) 22%, transparent); } /* Ticker / command bar */ :root[data-theme] .updates-ticker, :root[data-theme] .ticker, :root[data-theme] [data-ticker]{ background: var(--glass-bg) !important; backdrop-filter: blur(var(--am-blur, var(--glass-blur))); box-shadow: inset 0 0 0 1px var(--glass-border), inset 0 0 calc(24px * var(--am-glow,1)) var(--glass-highlight), 0 16px 50px var(--depth-panel) !important; } /* Transmission button */ :root[data-theme] .transmission-btn, :root[data-theme] #transmissionBtn, :root[data-theme] [data-transmission], :root[data-theme] a[href*="transmission"], :root[data-theme] button[name*="transmission"]{ background: var(--btn-bg) !important; border: 1px solid var(--btn-border) !important; color: var(--btn-text) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 18%, transparent), 0 0 22px var(--depth-focus) !important; } :root[data-theme] .transmission-btn:hover, :root[data-theme] #transmissionBtn:hover, :root[data-theme] [data-transmission]:hover, :root[data-theme] a[href*="transmission"]:hover, :root[data-theme] button[name*="transmission"]:hover{ background: var(--btn-hover) !important; transform: translateY(-1px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 55%, transparent), 0 0 calc(34px * var(--am-glow,1)) color-mix(in srgb, var(--accent-primary) 30%, transparent) !important; } /* Panels / cards */ :root[data-theme] .panel, :root[data-theme] .card, :root[data-theme] .tile, :root[data-theme] .module, :root[data-theme] .feature-card, :root[data-theme] .update-card, :root[data-theme] .box, :root[data-theme] [class*="card"], :root[data-theme] [class*="panel"]{ background: var(--glass-bg) !important; backdrop-filter: blur(var(--am-blur, var(--glass-blur))); border: 1px solid var(--glass-border) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 16%, transparent), 0 18px 60px var(--depth-panel) !important; } /* Welcome inner box */ :root[data-theme] .welcome-copy, :root[data-theme] .welcome-inner, :root[data-theme] [class*="welcome"] [class*="inner"]{ background: linear-gradient(180deg, color-mix(in srgb, var(--accent-primary) 10%, transparent), color-mix(in srgb, var(--accent-primary) 6%, transparent) ), var(--glass-bg) !important; border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, transparent) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-secondary) 16%, transparent), inset 0 0 38px color-mix(in srgb, var(--accent-primary) 12%, transparent) !important; } /* Top overlay buttons */ :root[data-theme] .hero .btn, :root[data-theme] .hero a.btn, :root[data-theme] .hero .chip, :root[data-theme] .hero-cta a, :root[data-theme] a[href*="#merch"], :root[data-theme] a[href*="listen"]{ background: var(--btn-bg) !important; border: 1px solid var(--btn-border) !important; backdrop-filter: blur(calc(var(--am-blur, var(--glass-blur)) - 2px)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 18%, transparent), 0 0 calc(20px * var(--am-glow,1)) color-mix(in srgb, var(--accent-primary) 16%, transparent) !important; } /* Featured release / Explore hover glow */ :root[data-theme] .featured-release, :root[data-theme] [class*="featured"]{ border-color: color-mix(in srgb, var(--accent-primary) 24%, transparent) !important; } :root[data-theme] .featured-release:hover, :root[data-theme] [class*="featured"]:hover{ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 45%, transparent), 0 0 26px color-mix(in srgb, var(--accent-primary) 18%, transparent) !important; } :root[data-theme] .featured-release h2:hover, :root[data-theme] .explore h2:hover, :root[data-theme] .explore-title:hover{ text-shadow: 0 0 calc(14px * var(--am-glow,1)) color-mix(in srgb, var(--accent-secondary) 22%, transparent); } /* Social hover glow */ :root[data-theme] .social a:hover, :root[data-theme] a[href*="instagram"]:hover, :root[data-theme] a[href*="spotify"]:hover, :root[data-theme] a[href*="youtube"]:hover, :root[data-theme] a[href*="soundcloud"]:hover, :root[data-theme] a[href*="tiktok"]:hover, :root[data-theme] a[href*="twitter"]:hover, :root[data-theme] a[href*="x.com"]:hover{ filter: brightness(1.06); text-shadow: 0 0 calc(12px * var(--am-glow,1)) color-mix(in srgb, var(--accent-primary) 22%, transparent); } /* Inputs */ :root[data-theme] input, :root[data-theme] textarea, :root[data-theme] select{ background: var(--input-bg) !important; color: var(--ink) !important; border: 1px solid var(--input-border) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 12%, transparent); } :root[data-theme] input:focus, :root[data-theme] textarea:focus, :root[data-theme] select:focus{ outline: none; border-color: color-mix(in srgb, var(--accent-primary) 55%, transparent) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 35%, transparent), 0 0 calc(24px * var(--am-glow,1)) color-mix(in srgb, var(--accent-primary) 16%, transparent) !important; } /* Footer */ :root[data-theme] footer, :root[data-theme] .site-footer, :root[data-theme] .footer-strip, :root[data-theme] [class*="footer"]{ background: linear-gradient(180deg, color-mix(in srgb, var(--footer-bg) 92%, transparent), var(--footer-bg)) !important; border-top: 1px solid var(--glass-border) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent-primary) 12%, transparent); } /* Consent UI: do not touch */ :root[data-theme] #consent-banner, :root[data-theme] .consent, :root[data-theme] [data-consent]{ all: revert; } /* ------------------------------------------------------------ Ticker outer-wrapper guard (prevents regressions) Goal: - Keep the INNER ticker styling (updates-ticker) intact - Ensure NO extra "outer frame" appears from broad panel/card rules ------------------------------------------------------------ */ /* If any wrapper around the ticker accidentally matches broad panel/card selectors, force it to remain visually neutral. */ :root[data-theme] .ticker-wrap, :root[data-theme] .ticker-viewport{ background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Inner ticker remains the only framed surface. */ :root[data-theme] .updates-ticker{ border-radius: var(--am-radius, 16px) !important; } /* v4: global rounding + transitions */ :root[data-theme] .panel, :root[data-theme] .card, :root[data-theme] .tile, :root[data-theme] .module, :root[data-theme] .feature-card, :root[data-theme] .update-card, :root[data-theme] .box, :root[data-theme] [class*="card"], :root[data-theme] [class*="panel"], :root[data-theme] input, :root[data-theme] textarea, :root[data-theme] select, :root[data-theme] button, :root[data-theme] .transmission-btn, :root[data-theme] #transmissionBtn{ border-radius: var(--am-radius) !important; transition: background .18s ease, box-shadow .18s ease, border-color .18s ease, transform .18s ease, filter .18s ease; } /* ------------------------------------------------------------------ v4.1: hard-coded “signal blue” overrides These selectors exist in index.html inline CSS and core styles. We override them here to keep themes consistent. ------------------------------------------------------------------- */ /* Ticker separators + label */ :root[data-theme] .updates-ticker .ticker-dot{ background: color-mix(in srgb, var(--accent-primary) 75%, transparent) !important; box-shadow: 0 0 calc(12px * var(--am-glow,1)) color-mix(in srgb, var(--accent-primary) 28%, transparent) !important; } :root[data-theme] .updates-ticker{ border-color: color-mix(in srgb, var(--accent-primary) 30%, var(--glass-border)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 10%, transparent), 0 0 calc(24px * var(--am-glow,1)) color-mix(in srgb, var(--accent-primary) 10%, transparent) !important; } :root[data-theme] .updates-ticker .ticker-label, :root[data-theme] .updates-ticker .ticker-label:visited{ color: color-mix(in srgb, var(--accent-primary) 80%, var(--ink)) !important; border-color: color-mix(in srgb, var(--accent-primary) 55%, transparent) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--accent-primary) 16%, transparent), color-mix(in srgb, var(--card) 92%, transparent) ) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 12%, transparent), 0 0 calc(18px * var(--am-glow,1)) color-mix(in srgb, var(--accent-primary) 12%, transparent) !important; } :root[data-theme] .updates-ticker a, :root[data-theme] .updates-ticker .ticker-link{ color: color-mix(in srgb, var(--ink) 88%, var(--accent-primary)) !important; } :root[data-theme] .updates-ticker a:hover, :root[data-theme] .updates-ticker .ticker-link:hover{ color: var(--accent-primary) !important; text-shadow: 0 0 calc(14px * var(--am-glow,1)) color-mix(in srgb, var(--accent-primary) 28%, transparent) !important; } /* Primary action buttons (SHOP THE DROP, LISTEN, SUBSCRIBE, RELEASE NOTES, MORE MUSIC, VIEW LOOKBOOK, etc.) */ :root[data-theme] .btn--primary, :root[data-theme] .primary-btn, :root[data-theme] .cta.primary, :root[data-theme] a.btn--primary{ background: linear-gradient(180deg, color-mix(in srgb, var(--accent-secondary) 22%, transparent), color-mix(in srgb, var(--accent-primary) 12%, transparent) ) !important; border-color: color-mix(in srgb, var(--accent-primary) 62%, transparent) !important; color: color-mix(in srgb, var(--ink) 92%, white) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 14%, transparent), 0 0 calc(22px * var(--am-glow,1)) color-mix(in srgb, var(--accent-primary) 12%, transparent) !important; } :root[data-theme] .btn--primary:hover, :root[data-theme] a.btn--primary:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent-primary) 78%, transparent) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 18%, transparent), 0 0 calc(30px * var(--am-glow,1)) color-mix(in srgb, var(--accent-primary) 18%, transparent) !important; } /* “Transmission” button styles if present elsewhere */ :root[data-theme] .transmission-btn, :root[data-theme] #transmissionBtn{ border-color: color-mix(in srgb, var(--accent-primary) 55%, transparent) !important; color: color-mix(in srgb, var(--ink) 86%, var(--accent-primary)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 14%, transparent), 0 0 calc(18px * var(--am-glow,1)) color-mix(in srgb, var(--accent-primary) 12%, transparent) !important; } /* Hover glow on icon buttons / social row inside cards */ :root[data-theme] .icon-btn:hover, :root[data-theme] .social-icons a:hover, :root[data-theme] .feature-icons a:hover, :root[data-theme] .platform-icons a:hover{ box-shadow: 0 0 calc(18px * var(--am-glow,1)) color-mix(in srgb, var(--accent-primary) 18%, transparent) !important; border-color: color-mix(in srgb, var(--accent-primary) 45%, transparent) !important; } /* Ensure focus ring follows theme */ :root[data-theme] .btn:focus-visible, :root[data-theme] button:focus-visible, :root[data-theme] a:focus-visible{ outline-color: color-mix(in srgb, var(--accent-primary) 55%, transparent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 18%, transparent) !important; } /* --- Surgical: Featured Release buttons (Release Notes / More Music) theme-aware --- */ /* Targets existing Alien ME markup without touching other button systems */ .feature-card .release-actions .btn, .top-feature .release-actions .btn, .release-actions a.btn { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important; border-color: color-mix(in srgb, var(--accent-primary, var(--accent, #78ffd2)) 55%, rgba(255,255,255,.08)) !important; color: var(--ink, rgba(235,245,255,.92)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(0,0,0,.35), 0 8px 22px rgba(0,0,0,.35) !important; backdrop-filter: blur(10px); } .feature-card .release-actions .btn:hover, .top-feature .release-actions .btn:hover, .release-actions a.btn:hover { border-color: var(--accent-primary, var(--accent, #78ffd2)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(0,0,0,.35), 0 0 0 2px color-mix(in srgb, var(--accent-primary, var(--accent, #78ffd2)) 28%, transparent), 0 0 22px color-mix(in srgb, var(--accent-primary, var(--accent, #78ffd2)) 35%, transparent), 0 10px 26px rgba(0,0,0,.42) !important; } /* If those buttons use the secondary style, ensure it still tracks theme */ .feature-card .release-actions .btn.btn-secondary, .top-feature .release-actions .btn.btn-secondary, .release-actions a.btn.btn-secondary { border-color: color-mix(in srgb, var(--accent-primary, var(--accent, #78ffd2)) 55%, rgba(255,255,255,.08)) !important; } /* ========================== Enterprise polish layer - Uses theme vars, avoids altering layout. ========================== */ :root{ /* Subtle, consistent rounding (enterprise). */ --radius-card: 18px; --radius-tile: 14px; --radius-pill: 999px; /* Safe defaults if a theme omits newer vars */ --panelTint: var(--panelTint, rgba(255,255,255,.04)); --borderTint: var(--borderTint, rgba(255,255,255,.12)); --glow: var(--glow, rgba(0,0,0,0)); --shadow: var(--shadow, 0 18px 50px rgba(0,0,0,.55)); } /* Background depth (keeps the same art/hero, only adds subtle site-wide depth) */ html, body{ background-color: var(--bg) !important; } body{ /* gentle vertical depth + edge vignette */ background-image: radial-gradient(900px 420px at 50% -80px, rgba(255,255,255,.06), transparent 65%), radial-gradient(1000px 600px at 8% 70%, rgba(255,255,255,.035), transparent 70%), radial-gradient(1000px 600px at 92% 70%, rgba(255,255,255,.030), transparent 70%), linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.34)); background-blend-mode: screen, screen, screen, normal; } /* Panels / cards / glass containers */ .panel, .card, .glass, .hero-card, .release-card, .drop-card, .declassified-card, .welcome-card, .featured-card, .ticker-wrap, .subscribe-wrap, .contact-wrap, #drop001, #welcome, #featured, #explore, #contactLinks{ background: linear-gradient(180deg, var(--panelTint), rgba(0,0,0,.18)) !important; border: 1px solid var(--borderTint) !important; box-shadow: var(--shadow) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Keep the four Explore tiles visually crisp and consistent */ .tiles .tile, a.tile{ border-radius: var(--radius-tile) !important; background: linear-gradient(180deg, var(--panelTint), rgba(0,0,0,.20)) !important; border: 1px solid var(--borderTint) !important; box-shadow: 0 10px 35px rgba(0,0,0,.50) !important; } .tiles .tile:hover, a.tile:hover{ box-shadow: 0 14px 48px rgba(0,0,0,.58), 0 0 0 1px var(--borderTint), 0 0 22px var(--glow) !important; } /* Buttons - ensure all primary actions pick up theme accent */ .btn, button.btn, a.btn{ border-radius: var(--radius-pill) !important; border: 1px solid var(--borderTint) !important; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22)) !important; box-shadow: 0 10px 28px rgba(0,0,0,.42) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .btn:hover, button.btn:hover, a.btn:hover{ box-shadow: 0 14px 42px rgba(0,0,0,.56), 0 0 0 1px var(--borderTint), 0 0 18px var(--glow) !important; } /* Accent-stroked buttons (most of your CTAs are .btn-secondary) */ .btn-secondary, a.btn-secondary, button.btn-secondary, .btn-outline, a.btn-outline, button.btn-outline{ border-color: color-mix(in srgb, var(--accent) 55%, var(--borderTint)) !important; box-shadow: 0 10px 28px rgba(0,0,0,.44), 0 0 14px var(--glow) !important; } .btn-secondary:hover, a.btn-secondary:hover, button.btn-secondary:hover, .btn-outline:hover, a.btn-outline:hover, button.btn-outline:hover{ border-color: var(--accent) !important; box-shadow: 0 14px 46px rgba(0,0,0,.58), 0 0 0 1px var(--accent), 0 0 22px var(--glow) !important; } /* Inputs / pill fields */ input, .input, .field, .email, .subscribe input, .notify input{ border-radius: var(--radius-pill) !important; border: 1px solid var(--borderTint) !important; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.28)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } input:focus, .input:focus, .field:focus{ outline: none; border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(255,255,255,.06), 0 0 18px var(--glow) !important; } /* Hover glow for icon/social links */ .social a:hover, .social-btn:hover, .social-links a:hover, .platforms a:hover, .platform-icons a:hover{ box-shadow: 0 0 0 1px var(--accent), 0 0 18px var(--glow) !important; } /* Ticker dot + Transmission chip stay theme-aware */ .ticker-dot, .ticker .dot, .ticker-sep, .ticker__dot{ background: var(--accent) !important; box-shadow: 0 0 10px var(--glow) !important; } .ticker a:hover{ color: var(--accent) !important; text-shadow: 0 0 12px var(--glow); } /* Safety: if color-mix isn't supported, fall back */ @supports not (color-mix(in srgb, white 50%, black)){ .btn-secondary, a.btn-secondary, button.btn-secondary, .btn-outline, a.btn-outline, button.btn-outline{ border-color: var(--accent) !important; } } /* --- Precision override: ticker-wrap is a layout wrapper, not a glass panel --- */ .ticker-wrap{ border: 0 !important; background: transparent !important; box-shadow: none !important; } /* === v32: UNIFORM HOVER + CIRCLE BUTTONS (additive) === */ :root{ --amAccent: var(--accent, #5cc6ff); --amBorder: var(--borderTint, rgba(255,255,255,.22)); --amGlow: var(--glow, rgba(92,198,255,.22)); } /* Make ALL icon circles behave the same (left social + right platform) */ a.platform-circle, a.social-circle{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:999px; border:1px solid var(--amBorder); background: rgba(0,0,0,.18); color: rgba(219,233,255,.92); text-decoration:none; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, filter .16s ease; -webkit-tap-highlight-color: transparent; } a.platform-circle svg, a.social-circle svg{ width:18px; height:18px; display:block; fill: currentColor; opacity:.92; } /* Hover / focus glow (matches the “right side” feel) */ a.platform-circle:hover, a.social-circle:hover{ transform: translateY(-1px); border-color: var(--amAccent); background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.18)); box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 12px 28px rgba(0,0,0,.45), 0 0 26px var(--amGlow); filter: drop-shadow(0 0 10px var(--amGlow)); } a.platform-circle:focus-visible, a.social-circle:focus-visible{ outline: 2px solid color-mix(in srgb, var(--amAccent) 70%, #ffffff 30%); outline-offset: 3px; } /* Subscribe + primary buttons: consistent hover depth */ .btn, button.btn{ border-radius:999px; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease; } .btn:hover, button.btn:hover{ transform: translateY(-1px); border-color: var(--amAccent); box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 14px 34px rgba(0,0,0,.45), 0 0 24px var(--amGlow); } /* === end v32 === */ /* ALIENME_THEME_TEXT_LINK_ENFORCER_V1 */ /* Add-only: enforce ink/link usage across the public site. Theme vars update, but some components hard-code blue. This block maps text + links back to theme variables without touching layout. Opt-out: add class .am-keep-color or attribute [data-keep-color] on elements that should keep custom colors. */ :root[data-theme] :where(h1,h2,h3,h4,h5,h6,p,li,dt,dd,blockquote,figcaption,small,label,legend,code,pre,span,strong,em,i,b,u,s){ color: var(--ink, rgba(219,233,255,.95)) !important; } :root[data-theme] a, :root[data-theme] a:visited{ color: var(--link, var(--accent-primary, var(--accent, #5cc6ff))) !important; text-decoration-color: color-mix(in srgb, var(--link, var(--accent-primary, var(--accent, #5cc6ff))) 40%, transparent) !important; } :root[data-theme] a:hover{ filter: saturate(1.08); } /* Common offenders (nav/menus) */ :root[data-theme] :where(nav, header, footer, main, section, article, aside) :where(a, .nav a, .menu a, .links a){ color: var(--link, var(--accent-primary, var(--accent, #5cc6ff))) !important; } /* Buttons keep readable */ :root[data-theme] :where(button, .btn, [role="button"], input[type="button"], input[type="submit"]){ color: var(--btn-text, var(--ink, rgba(219,233,255,.95))) !important; } /* Generic containers that were painting fixed colors */ :root[data-theme] :where(.am-shell, .am-page, .page, .panel, .card, .glass, .modal, .drawer, .sheet, .overlay, .hero, .section, .content, .wrap, .container){ color: var(--ink, rgba(219,233,255,.95)) !important; } /* Opt-out hooks */ :root[data-theme] .am-keep-color, :root[data-theme] [data-keep-color], :root[data-theme] .am-keep-color *{ color: unset !important; } /* Patch 26 — semantic template token bridge */ :root[data-theme]{ --am-color-bg: var(--bg, #05070e); --am-color-text: var(--ink, rgba(219,233,255,.95)); --am-color-text-muted: color-mix(in srgb, var(--am-color-text) 74%, transparent); --am-color-accent: var(--accent-primary, var(--accent, #8b5cf6)); --am-panel-bg: var(--glass-bg); --am-panel-border: var(--glass-border); --am-btn-bg: var(--btn-bg); --am-btn-bg-strong: var(--btn-hover); }