/* ========================================================================== TGAI Platform — Master CSS Extracted from index.html — DO NOT EDIT index.html for styles. Edit this file instead. Sections maintain original cascade order. @vz-player styles: look for '/* VZ-PLAYER */' section @hero styles: look for '/* HERO */' section @base tokens: look for '/* BASE */' section ========================================================================== */ /* ── Text Selection: gold background + white text ──────────────────────── Fixes: 反白黑底黑字 issue — applies to ALL text in ALL sections Both day and night mode benefit from explicit selection color. ────────────────────────────────────────────────────────────────────────── */ ::selection { background-color: rgba(200, 148, 26, 0.55); color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } ::-moz-selection { background-color: rgba(200, 148, 26, 0.55); color: #FFFFFF !important; } /* Dark sections (footer, KD, hero): slightly brighter gold selection */ #site-footer ::selection, #knowledge-directory ::selection, .hero-bg ::selection, html[data-theme="night"] ::selection { background-color: rgba(200, 148, 26, 0.65); color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } #site-footer ::-moz-selection, #knowledge-directory ::-moz-selection, html[data-theme="night"] ::-moz-selection { background-color: rgba(200, 148, 26, 0.65); color: #FFFFFF !important; } /* ======================================================================== BLOCK 01 / 12 — original position ~line 1935 ======================================================================== */ @font-face { font-family: "TGAI-Round"; /* jf open 粉圓 */ src: url("https://cdn.jsdelivr.net/gh/justfont/open-huninn-font@main/font/jf-openhuninn-2.0.ttf") format("truetype"), local("Noto Sans TC"); font-weight: 100 900; font-display: swap; } /* ======================================================================== BLOCK 02 / 12 — original position ~line 1974 ======================================================================== */ @font-face { font-family: "TGAI-Round"; /* local fallback */ src: url("https://cdn.jsdelivr.net/gh/justfont/open-huninn-font@main/font/jf-openhuninn-2.0.ttf") format("truetype"), local("Noto Sans TC"); font-weight: 100 900; font-display: swap; } /* ── GLOBAL: 圓體字 — apply jf 粉圓 (TGAI-Round) to ALL text ───────── Fallback chain: Noto Sans TC (Google, CJK coverage) → PingFang TC (macOS) → Microsoft JhengHei (Windows) → sans-serif ──────────────────────────────────────────────────────────────────── */ html, body, * { font-family: "TGAI-Round", 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Noto Sans KR', sans-serif; } /* Keep monospace where explicitly needed */ code, pre, kbd, samp, .font-mono, [class*="mono"], [class*="jetbrains"] { font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace !important; } /* ══════════════════════════════════════════════════════ SILVER NEUMORPHIC CRYSTAL TAB Reference: 水晶按鈕 (616pic) + neumorphic metal CSS Light-silver gradient + directional convex shadows Tiffany blue text + Tiffany blue silver border accent ══════════════════════════════════════════════════════ */ .crystal-tab-blueprint { display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative !important; border-radius: 9999px !important; white-space: nowrap !important; /* Silver gradient: bright top-left → deep silver-blue bottom-right */ /* Deeper silver — contrasts clearly on white navbar */ background: linear-gradient(145deg, #E2E3E7 0%, #C0C1C6 30%, #A8A9AD 60%, #909398 100%) !important; /* Neumorphic convex shadow: top-left = bright (light source) bottom-right = dark (depth) */ box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.12), inset 0 2px 4px rgba(255, 255, 255, 0.72), inset 0 -1.5px 3px rgba(50, 80, 105, 0.30) !important; /* Tiffany silver edge — top catches light */ border: none !important; border-top: 2px solid rgba(255, 255, 255, 0.85) !important; border-left: 1.5px solid rgba(175, 215, 235, 0.72) !important; border-right: 1.5px solid rgba(80, 120, 148, 0.55) !important; border-bottom: 2px solid rgba(55, 95, 125, 0.72) !important; color: #141210 !important; /* dark navy — max contrast on silver */ font-weight: 900 !important; letter-spacing: 0.04em !important; transition: all 0.20s ease !important; } .crystal-tab-blueprint:hover { background: linear-gradient(145deg, #e0eef8 0%, #bcceda 35%, #9eb8ca 65%, #82a4b8 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.12), inset 0 2px 4px rgba(255, 255, 255, 0.78), 0 0 12px rgba(10, 186, 181, 0.20) !important; color: #141210 !important; border-bottom-color: rgba(10, 186, 181, 0.60) !important; transform: translateY(-1.5px) !important; } .crystal-tab-blueprint:active { /* Concave pressed effect */ box-shadow: inset 0 2px 4px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.06); transform: translateY(0) !important; } /* ══════════════════════════════════════════════════════ ORANGE NEUMORPHIC CRYSTAL (primary CTA) ══════════════════════════════════════════════════════ */ /* ══ cta-primary — IMAC Metallic Gold neumorphic ══ Design: deep copper-brown edges → bright champagne gold center Convex highlight: top=bright, bottom=deep copper shadow NO fluorescent glow. Pure satin metal texture. ════════════════════════════════════════════════════ */ .cta-primary { display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative !important; border-radius: 9999px !important; white-space: nowrap !important; /* Satin gold: dark copper edges → bright champagne center */ background: linear-gradient(145deg, #3A1E00 0%, #7A4A06 8%, #C8920A 20%, #C8941A 35%, #F5E6B2 48%, #D4AF37 62%, #C8920A 76%, #7A4A06 88%, #3A1E00 100%) !important; /* Neumorphic convex: top=bright highlight, bottom=deep copper */ box-shadow: inset 0 2px 0 rgba(255,248,200,0.65), inset 0 -2px 0 rgba(60,30,0,0.60), inset 2px 0 6px rgba(255,240,160,0.25), inset -2px 0 6px rgba(40,18,0,0.35) !important; border: none !important; border-top: 1.5px solid rgba(255,248,180,0.80) !important; border-left: 1px solid rgba(220,180,80,0.55) !important; border-right: 1px solid rgba(80,40,0,0.50) !important; border-bottom: 2px solid rgba(60,25,0,0.75) !important; /* Always black — gold button needs dark text for contrast */ color: #1A0800 !important; -webkit-text-fill-color: #1A0800 !important; font-weight: 900 !important; text-shadow: 0 1px 0 rgba(255,240,160,0.55) !important; transition: all 0.22s ease !important; } /* Override any text-white / Tailwind white class on cta-primary */ .cta-primary, .cta-primary *, .cta-primary span, .cta-primary svg { color: #1A0800 !important; -webkit-text-fill-color: #1A0800 !important; } .cta-primary:hover { background: linear-gradient(145deg, #4A2800 0%, #9A6010 10%, #D4A820 22%, #D4AF37 36%, #FFF8B8 48%, #D4AF37 62%, #D4A820 76%, #9A6010 88%, #4A2800 100%) !important; box-shadow: inset 0 2px 0 rgba(255,255,210,0.75), inset 0 -2px 0 rgba(60,30,0,0.55), inset 2px 0 6px rgba(255,250,180,0.30), inset -2px 0 6px rgba(40,18,0,0.28) !important; transform: translateY(-1.5px) !important; } .cta-primary:active { background: linear-gradient(145deg, #2C1600 0%, #7A4806 15%, #C08008 30%, #D4A020 50%, #C08008 70%, #7A4806 85%, #2C1600 100%) !important; box-shadow: inset 0 2px 4px rgba(40,18,0,0.50), inset 0 -1px 0 rgba(255,240,160,0.20) !important; transform: translateY(0) !important; } /* ══ cta-secondary — Metallic Silver + black text ══ Design: dark steel edges → bright silver-white center Convex: top=white highlight, bottom=dark steel ════════════════════════════════════════════════════ */ .cta-secondary { display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative !important; border-radius: 9999px !important; white-space: nowrap !important; font-weight: 900 !important; transition: all 0.20s ease !important; /* Satin silver: dark steel edges → bright silver center */ background: linear-gradient(145deg, #0C0A08 0%, #4A4E58 10%, #9AA0AC 22%, #D8DCE4 36%, #F0F4F8 48%, #C8CCD6 60%, #808490 74%, #252118 88%, #0C0A08 100%) !important; /* Neumorphic convex */ box-shadow: inset 0 2px 0 rgba(255,255,255,0.60), inset 0 -2px 0 rgba(0,0,0,0.50), inset 2px 0 6px rgba(255,255,255,0.18), inset -2px 0 6px rgba(0,0,0,0.25) !important; border: none !important; border-top: 1.5px solid rgba(255,255,255,0.75) !important; border-left: 1px solid rgba(200,210,225,0.55) !important; border-right: 1px solid rgba(20,24,32,0.45) !important; border-bottom: 2px solid rgba(10,12,18,0.75) !important; color: #0C0A08 !important; font-weight: 900 !important; text-shadow: 0 1px 0 rgba(255,255,255,0.70) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .cta-secondary:hover { background: linear-gradient(145deg, #141210 0%, #606470 10%, #A8B0BC 22%, #E0E4EC 36%, #F8FCFF 48%, #D0D4DC 60%, #888C98 74%, #2E2A24 88%, #141210 100%) !important; box-shadow: inset 0 2px 0 rgba(255,255,255,0.75), inset 0 -2px 0 rgba(0,0,0,0.45), inset 2px 0 6px rgba(255,255,255,0.22), inset -2px 0 6px rgba(0,0,0,0.20) !important; color: #0C0A08 !important; transform: translateY(-1px) !important; } .cta-secondary:active { box-shadow: inset 0 2px 4px rgba(0,0,0,0.40), inset 0 -1px 0 rgba(255,255,255,0.20) !important; transform: translateY(0) !important; } /* ══════════════════════════════════════════════════════ SILVER NEUMORPHIC NEWS TABS (compact) ══════════════════════════════════════════════════════ */ .news-tab-btn { position: relative !important; border-radius: 9999px !important; background: linear-gradient(145deg, #ecf4f9 0%, #c5d8e5 50%, #aec4d2 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.12), inset 0 1.5px 3px rgba(255, 255, 255, 0.70) !important; border: none !important; border-top: 1px solid rgba(255, 255, 255, 0.80) !important; border-bottom: 1px solid rgba(100, 140, 165, 0.55) !important; color: #0C0A08 !important; font-weight: 700 !important; transition: all 0.18s ease !important; } .news-tab-btn.active, .news-tab-btn[aria-selected="true"] { /* Active: orange neumorphic */ background: linear-gradient(145deg, #F5E6B2 0%, #f0a858 50%, #d86818 100%) !important; box-shadow: inset 0 2px 4px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.06); border-top-color: rgba(255, 240, 205, 0.70) !important; border-bottom-color: rgba(150, 65, 8, 0.60) !important; color: #fff !important; text-shadow: none; } .news-tab-btn:hover:not(.active):not([aria-selected="true"]) { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.12); transform: translateY(-1px) !important; } /* ══════════════════════════════════════════════════════ CRYSTAL BLACK CARD — GOLD NEUMORPHIC FRAME Reference: 水晶按鈕 gem quality + metallic gold border Dark crystal body + directional gold shadow = premium frame ══════════════════════════════════════════════════════ */ .glass-morphism-card-blueprint, .glass-morphism-panel { position: relative !important; isolation: isolate !important; overflow: hidden !important; /* Crystal black — very dark, near opaque */ background: linear-gradient(145deg, rgba(8, 14, 28, 0.92) 0%, rgba(3, 6, 14, 0.96) 100%) !important; backdrop-filter: blur(22px) saturate(170%) !important; -webkit-backdrop-filter: blur(22px) saturate(170%) !important; border-radius: 20px !important; /* Gold neumorphic frame: top-left = bright gold (light source) bottom-right = deep dark gold (depth shadow) */ box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.12), 0 0 0 1.5px rgba(200, 160, 40, 0.55), inset 0 2px 0 rgba(255, 225, 100, 0.18), inset 0 -1px 0 rgba(80, 50, 2, 0.30) !important; transition: all 0.28s ease !important; } .glass-morphism-card-blueprint::before, .glass-morphism-panel::before { content: "" !important; position: absolute !important; top: 0; left: 0; right: 0; height: 50% !important; background: linear-gradient(to bottom, rgba(255, 220, 90, 0.07) 0%, transparent 100%) !important; border-radius: 20px 20px 0 0 !important; pointer-events: none !important; z-index: -1 !important; } .glass-morphism-card-blueprint:hover, .glass-morphism-panel:hover { transform: translateY(-5px) !important; box-shadow: 10px 12px 28px rgba(55, 35, 2, 0.95), -5px -5px 16px rgba(255, 225, 90, 0.38), 0 0 0 1.5px rgba(212, 175, 55, 0.70), inset 0 2px 0 rgba(255, 230, 110, 0.24) !important; } /* ══════════════════════════════════════════════════════ METALLIC SILVER MONITOR — neumorphic bevel ══════════════════════════════════════════════════════ */ .metallic-hardware-monitor, .metallic-brushed-monitor { background: linear-gradient(180deg, #141210 0%, #0C0A08 100%) !important; border: none !important; border-radius: 20px !important; box-shadow: /* outer frame */ 0 0 0 2px rgba(255,255,255,0.55), 0 0 0 5px #3A3E4A, 0 32px 80px rgba(0,0,0,0.75), /* glass inner reflections */ inset 0 2px 10px rgba(255,255,255,0.55), inset 0 -3px 10px rgba(0,0,0,0.80), inset 3px 0 8px rgba(255,255,255,0.18), inset -3px 0 8px rgba(0,0,0,0.30) !important; padding: 16px !important; } /* drawer CSS removed — replaced by inline union iframe */ /* Neon play button */ .neon-crystal-play { background: rgba(5, 20, 36, 0.95) !important; border: 2px solid rgba(10,186,181,0.75) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.12) !important; transition: all 0.3s ease !important; } .neon-crystal-play:hover { border-color: rgba(10, 186, 181, 0.85) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.12) !important; transform: scale(1.05) !important; } /* ── METALLIC GOLD TEXT — for secondary/accent text on white sections ── */ /* Gold gradient text for shimmer headings */ .metallic-gold-text { background: linear-gradient(135deg, #c8941a 0%, #C8941A 30%, #f5e090 50%, #d4a820 70%, #9a6810 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 900; } /* Flat metallic gold (solid, for body text) */ .text-gold, .text-metallic-gold { color: #C8941A !important; } /* Section label / badge text that appears on white */ .section-label-gold { color: #C8941A !important; font-weight: 900 !important; letter-spacing: 0.06em !important; } /* precision-light class used in video zone labels */ .text-precision-light { color: #C8941A !important; } /* ======================================================================== BLOCK 03 / 12 — original position ~line 2319 ======================================================================== */ /* ════ NIGHT MODE (default) ════════════════════════════════ */ html[data-theme="night"] { background-color: #0C0A08 !important; } html[data-theme="night"] body { background-color: #0C0A08 !important; color: #E0EAF4 !important; } /* White/light sections → deep dark */ html[data-theme="night"] .bg-white, html[data-theme="night"] section.bg-white, html[data-theme="night"] #video-zone, html[data-theme="night"] #governance, html[data-theme="night"] #news, html[data-theme="night"] #onboard, html[data-theme="night"] .hero-bg { background: #0A0A0A !important; } html[data-theme="night"] .navbar { background: rgba(5,10,20,1.0) !important; border-bottom: 1px solid rgba(200,148,26,0.40) !important; box-shadow: 0 2px 16px rgba(0,0,0,0.60) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* White inline bg-white divs */ html[data-theme="night"] .relative.z-10.border-t.border-precision\/20.bg-white, html[data-theme="night"] [class~="bg-white"]:not(.cta-primary):not(.cta-secondary):not(button):not(a) { background: #0C0A08 !important; } /* Night text: headings in white sections */ html[data-theme="night"] #governance h2, html[data-theme="night"] #governance h3, html[data-theme="night"] #onboard h2, html[data-theme="night"] #video-zone h2, html[data-theme="night"] #news h2 { color: #F0F4F8 !important; -webkit-text-fill-color: initial; } html[data-theme="night"] #governance p, html[data-theme="night"] #onboard p, html[data-theme="night"] #news p, html[data-theme="night"] #video-zone p { color: rgba(210,228,248,0.80) !important; } html[data-theme="night"] #governance .section-label, html[data-theme="night"] #onboard .section-label, html[data-theme="night"] #news .section-label { color: #0ABAB5 !important; } /* Night navbar status badge */ html[data-theme="night"] .status-badge { color: #0ABAB5 !important; } html[data-theme="day"] .status-badge, .status-badge { color: #0ABAB5 !important; background: rgba(10,186,181,0.12) !important; border-color: rgba(10,186,181,0.30) !important; } /* Night form labels */ html[data-theme="night"] .eng-input { background: #141210 !important; color: #E0EAF4 !important; } html[data-theme="night"] label { color: #0ABAB5 !important; } /* 4200 body bg */ html[data-theme="night"] .blueprint-grid-bg { background-color: #0C0A08 !important; } html[data-theme="night"] .bg-navyDark { background-color: #0C0A08 !important; } /* 4200 cards */ html[data-theme="night"] .glass-morphism-card, html[data-theme="night"] .glass-card-gold { background: linear-gradient(145deg,rgba(5,10,22,0.96),rgba(2,5,14,0.99)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.12); } html[data-theme="night"] .double-metallic-silver, html[data-theme="night"] .metallic-hardware-monitor { /* Already metallic — works for both themes */ } html[data-theme="night"] nav .text-navyDark { color: #E0EAF4 !important; } html[data-theme="night"] .text-navyDark { color: #C8D8E8 !important; } html[data-theme="night"] .text-carbonDark { color: #B8CCE0 !important; } /* ════ DAY MODE ════════════════════════════════════════════ */ html[data-theme="day"] { background-color: #F0F4F8 !important; } html[data-theme="day"] body { background-color: #F0F4F8 !important; color: #141210 !important; } /* Light sections stay light */ html[data-theme="day"] .hero-bg, html[data-theme="day"] #hero { background: #F2F6FA !important; } html[data-theme="day"] .navbar { background: #FFFFFF !important; box-shadow: 0 1px 0 rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.06) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Day mode: hamburger button always dark-pill so white bars are visible */ html[data-theme="day"] #mobile-menu-btn { background: rgba(10,15,40,0.90) !important; border-color: rgba(100,150,220,0.4) !important; } /* Night mode: lighter pill so bars visible on dark navbar */ html[data-theme="night"] #mobile-menu-btn { background: rgba(255,255,255,0.16) !important; border-color: rgba(200,220,255,0.45) !important; } /* Hamburger bars — explicit styles (Tailwind NOT loaded in this file) */ #mobile-menu-btn .mobile-bar, #mbar1, #mbar2, #mbar3 { display: block !important; width: 20px !important; height: 2px !important; background-color: #FFFFFF !important; border-radius: 2px; transition: all 0.3s ease; flex-shrink: 0; } #mbar3 { width: 14px !important; } html[data-theme="day"] .blueprint-grid-bg { background-color: #F0F4F8 !important; } /* ── Talent card header: deep dark — works in both day & night ── */ .talent-card-hdr { background: linear-gradient(145deg, rgba(8,14,28,0.96), rgba(3,6,14,0.99)); border-bottom: 2px solid #C8941A; } /* KPI stat boxes inside card body — day mode: light bg, dark text */ html[data-theme="day"] .talent-card .rounded-3xl[style*="background:#111111"] { background: rgba(240,246,255,0.90) !important; border-color: #C8941A !important; } html[data-theme="day"] .talent-card .rounded-3xl[style*="background:#111111"] [style*="color:#F0F6FF"] { color: #1A1614 !important; } /* Progress bar track — day mode visible */ html[data-theme="day"] .talent-card [style*="background:rgba(255,255,255,0.08)"] { background: rgba(10,36,64,0.10) !important; } /* ── Day: Cards → white glass + gold neumorphic ── */ html[data-theme="day"] .eng-card, html[data-theme="day"] .gov-step { background: linear-gradient(145deg, rgba(255,255,255,0.94) 0%, rgba(245,249,255,0.98) 100%) !important; backdrop-filter: blur(20px) saturate(140%) !important; -webkit-backdrop-filter: blur(20px) saturate(140%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.12); } html[data-theme="day"] .kpi-card { background: linear-gradient(145deg, rgba(255,255,255,0.94) 0%, rgba(248,252,255,0.98) 100%) !important; backdrop-filter: blur(20px) saturate(140%) !important; -webkit-backdrop-filter: blur(20px) saturate(140%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.12); } html[data-theme="day"] .news-card, html[data-theme="day"] .news-card-dark { background: linear-gradient(145deg, rgba(255,255,255,0.94) 0%, rgba(248,252,255,0.98) 100%) !important; backdrop-filter: blur(20px) saturate(140%) !important; -webkit-backdrop-filter: blur(20px) saturate(140%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.12); } /* 4200 day cards */ html[data-theme="day"] .glass-morphism-card, html[data-theme="day"] .glass-card-gold { background: linear-gradient(145deg, rgba(255,255,255,0.92) 0%, rgba(248,252,255,0.97) 100%) !important; backdrop-filter: blur(20px) saturate(140%) !important; -webkit-backdrop-filter: blur(20px) saturate(140%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.12); } html[data-theme="day"] .glass-card-gold { border-top: 2px solid rgba(200,148,26,0.70) !important; border-left: 1.5px solid rgba(212,175,55,0.55) !important; border-right: 1px solid rgba(140,100,15,0.35) !important; border-bottom: 2px solid rgba(130,85,5,0.50) !important; } /* ── Day: Card text overrides (replace neon green) ── */ /* Primary headings → dark navy */ html[data-theme="day"] .eng-card h1,html[data-theme="day"] .eng-card h2, html[data-theme="day"] .eng-card h3,html[data-theme="day"] .eng-card h4, html[data-theme="day"] .kpi-card h1,html[data-theme="day"] .kpi-card h2, html[data-theme="day"] .kpi-card h3,html[data-theme="day"] .kpi-card h4, html[data-theme="day"] .news-card h1,html[data-theme="day"] .news-card h2, html[data-theme="day"] .news-card h3,html[data-theme="day"] .news-card h4, html[data-theme="day"] .gov-step h3,html[data-theme="day"] .gov-step h4, html[data-theme="day"] #matrix .eng-card h1, html[data-theme="day"] #matrix .eng-card h2, html[data-theme="day"] #matrix .eng-card h3, html[data-theme="day"] #matrix .eng-card h4, html[data-theme="day"] #governance .eng-card h3, html[data-theme="day"] #blueprint .eng-card h3 { color: #141210 !important; -webkit-text-fill-color: #141210 !important; } /* Body text → dark gray */ html[data-theme="day"] .eng-card p, html[data-theme="day"] .kpi-card p, html[data-theme="day"] .news-card p, html[data-theme="day"] .gov-step p, html[data-theme="day"] #matrix .eng-card p, html[data-theme="day"] #governance .eng-card p, html[data-theme="day"] #blueprint .eng-card p { color: #374151 !important; } /* neon green spans/divs in cards → Tiffany blue (still punchy but readable) */ html[data-theme="day"] .eng-card [style*="color:#0ABAB5"], html[data-theme="day"] .kpi-card [style*="color:#0ABAB5"], html[data-theme="day"] .gov-step [style*="color:#0ABAB5"], html[data-theme="day"] .news-card [style*="color:#0ABAB5"] { color: #0ABAB5 !important; } /* Step numbers on day → metallic gold text */ html[data-theme="day"] .step-num { color: #FFFFFF !important; } /* Dark inline styles on matrix/governance cards */ html[data-theme="day"] #matrix .eng-card [style*="color:#111"], html[data-theme="day"] #matrix .eng-card [style*="color:#374"], html[data-theme="day"] #governance .eng-card [style*="color:#111"], html[data-theme="day"] #governance .eng-card [style*="color:#374"], html[data-theme="day"] #blueprint .eng-card [style*="color:#111"], html[data-theme="day"] #blueprint .eng-card [style*="color:#374"] { color: #141210 !important; } /* Light gray dim text in day → readable medium gray */ html[data-theme="day"] .eng-card [style*="color:#6A"], html[data-theme="day"] .kpi-card [style*="color:#6A"], html[data-theme="day"] .gov-step [style*="color:#6A"] { color: #6B7280 !important; } /* Day section backgrounds */ html[data-theme="day"] #matrix, html[data-theme="day"] #blueprint { background: #F0F4F8 !important; } html[data-theme="day"] #matrix h2, html[data-theme="day"] #blueprint h2, html[data-theme="day"] #matrix .section-label, html[data-theme="day"] #blueprint .section-label { color: #141210 !important; -webkit-text-fill-color: #141210 !important; } /* Day shimmer text → static gold (shimmer won't work well on light bg) */ html[data-theme="day"] .shimmer-text { background: linear-gradient(135deg, #141210 0%, #C8941A 50%, #141210 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: none; } /* Day navbar logo text */ html[data-theme="day"] .navbar .font-black { color: #111111 !important; } html[data-theme="day"] nav .text-navyDark { color: #141210 !important; } html[data-theme="day"] .text-navyDark { color: #141210 !important; } /* Day 4200 bar */ html[data-theme="day"] .bg-navyDark { background: #141210 !important; } /* Day form elements */ html[data-theme="day"] .eng-input { background: #FFFFFF !important; color: #141210 !important; border-color: #C8941A !important; } /* ── Day/Night: Tab overrides by theme ── */ /* Tabs look identical on both — silver neumorphic works for both */ /* Night: nav tabs text can be white/light if nav is dark */ html[data-theme="night"] .crystal-tab-blueprint { color: #E0EAF4 !important; } html[data-theme="night"] .crystal-tab-blueprint:hover { color: #F0F4F8 !important; } /* Day: nav tabs text stays dark navy */ html[data-theme="day"] .crystal-tab-blueprint { color: #141210 !important; } /* ── Day: Progress bar tracks ── */ html[data-theme="day"] [style*="rgba(255,255,255,0.08)"] { background: rgba(0,0,0,0.08) !important; } /* ── KD section: dark for both modes (already dark) ── */ html[data-theme="day"] #knowledge-directory { /* Keep its own gradient background */ filter: brightness(1.08) !important; } /* ======================================================================== BLOCK 04 / 12 — original position ~line 2624 ======================================================================== */ /* ════════════════════════════════════════════════════════════ /* ── Hero h1 line 2: adapts to day/night theme ─────────────── */ .hero-adaptive-text { color: #111111; } html[data-theme="night"] .hero-adaptive-text { color: #F0F6FF; } /* 0. GLOBAL RESET — Remove OUTER shadows/glows ONLY. DO NOT remove backdrop-filter (it IS the crystal effect). ════════════════════════════════════════════════════════════ */ .eng-card, .kpi-card, .news-card, .news-card-dark, .glass-card-gold, .glass-morphism-card, .gov-step, .onboard-box, .crystal-tab-blueprint, .lang-btn, #theme-toggle-pill, .double-metallic-silver, .double-metallic-gold, .metallic-hardware-monitor { box-shadow: none !important; /* outer shadow = FORBIDDEN */ filter: none !important; /* outer glow = FORBIDDEN */ text-shadow: none; } /* Remove sweep animations (they cause glow) */ .eng-card::before { display: none !important; animation: none !important; } /* [style*="box-shadow"] reset removed — was stripping 3D button shadows */ /* ════════════════════════════════════════════════════════════ 1. PAGE BACKGROUNDS Crystal glass REQUIRES an interesting background behind it. The backdrop-filter blurs whatever is behind the element. ════════════════════════════════════════════════════════════ */ html[data-theme="night"] body, html[data-theme="night"] .blueprint-grid-bg { background: radial-gradient(ellipse 80% 60% at 20% 10%, rgba(10,186,181,0.14) 0%, transparent 55%), radial-gradient(ellipse 60% 70% at 80% 85%, rgba(212,175,55,0.10) 0%, transparent 50%), radial-gradient(ellipse 50% 50% at 50% 40%, rgba(243,112,33,0.07) 0%, transparent 60%), linear-gradient(160deg, #0C0A08 0%, #0C0A08 30%, #0C0A08 60%, #0C0A08 100%) !important; } html[data-theme="day"] body, html[data-theme="day"] .blueprint-grid-bg { background: radial-gradient(ellipse 70% 50% at 15% 20%, rgba(10,186,181,0.10) 0%, transparent 50%), radial-gradient(ellipse 60% 60% at 85% 80%, rgba(212,175,55,0.08) 0%, transparent 50%), linear-gradient(160deg, #D8EDF8 0%, #EAF4FC 35%, #F0F8FF 65%, #E0EEF8 100%) !important; } /* ════════════════════════════════════════════════════════════ 2. ENG-CARDS — Gold border crystal panels ════════════════════════════════════════════════════════════ */ html[data-theme="night"] .eng-card { background: rgba(255, 255, 255, 0.07) padding-box, linear-gradient(135deg, #2C1600 0%, #9A6010 8%, #D4AF37 18%, #D4AF37 28%, #F5E6B2 35%, #C8941A 44%, #C8920A 55%, #6A3800 65%, #C8920A 75%, #D4AF37 86%, #D4AF37 92%, #3A1E00 100%) border-box !important; border: 2px solid transparent !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 40px rgba(255,255,255,0.025) !important; border-radius: 20px !important; } html[data-theme="day"] .eng-card { background: rgba(255, 255, 255, 0.52) padding-box, linear-gradient(135deg, #2C1600 0%, #9A6010 8%, #D4AF37 18%, #D4AF37 28%, #F5E6B2 35%, #C8941A 44%, #C8920A 55%, #6A3800 65%, #C8920A 75%, #D4AF37 86%, #D4AF37 92%, #3A1E00 100%) border-box !important; border: 2px solid transparent !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.70), inset 0 0 40px rgba(255,255,255,0.10) !important; border-radius: 20px !important; } /* ════════════════════════════════════════════════════════════ 3. KPI CARDS — Silver border crystal ════════════════════════════════════════════════════════════ */ html[data-theme="night"] .kpi-card { background: rgba(255, 255, 255, 0.07) padding-box, linear-gradient(135deg, #1A1614 0%, #686C70 10%, #B8C0C8 20%, #E8ECF0 30%, #FFFFFF 38%, #D4D8DC 48%, #909498 58%, #252118 68%, #909498 76%, #D0D4D8 86%, #F8FAFC 93%, #1A1614 100%) border-box !important; border: 2px solid transparent !important; backdrop-filter: blur(20px) saturate(160%) !important; -webkit-backdrop-filter: blur(20px) saturate(160%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 40px rgba(255,255,255,0.025) !important; border-radius: 16px !important; } html[data-theme="day"] .kpi-card { background: rgba(255, 255, 255, 0.52) padding-box, linear-gradient(135deg, #1A1614 0%, #686C70 10%, #B8C0C8 20%, #E8ECF0 30%, #FFFFFF 38%, #D4D8DC 48%, #909498 58%, #252118 68%, #909498 76%, #D0D4D8 86%, #F8FAFC 93%, #1A1614 100%) border-box !important; border: 2px solid transparent !important; backdrop-filter: blur(20px) saturate(160%) !important; -webkit-backdrop-filter: blur(20px) saturate(160%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.70), inset 0 0 40px rgba(255,255,255,0.10) !important; border-radius: 16px !important; } /* ════════════════════════════════════════════════════════════ 4. NEWS CARDS — Gold border crystal ════════════════════════════════════════════════════════════ */ html[data-theme="night"] .news-card, html[data-theme="night"] .news-card-dark { background: rgba(255, 255, 255, 0.07) padding-box, linear-gradient(135deg, #2C1600 0%, #9A6010 8%, #D4AF37 18%, #D4AF37 28%, #F5E6B2 35%, #C8941A 44%, #C8920A 55%, #6A3800 65%, #C8920A 75%, #D4AF37 86%, #D4AF37 92%, #3A1E00 100%) border-box !important; border: 2px solid transparent !important; backdrop-filter: blur(20px) saturate(160%) !important; -webkit-backdrop-filter: blur(20px) saturate(160%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 40px rgba(255,255,255,0.025) !important; border-radius: 16px !important; } html[data-theme="day"] .news-card, html[data-theme="day"] .news-card-dark { background: rgba(255, 255, 255, 0.52) padding-box, linear-gradient(135deg, #2C1600 0%, #9A6010 8%, #D4AF37 18%, #D4AF37 28%, #F5E6B2 35%, #C8941A 44%, #C8920A 55%, #6A3800 65%, #C8920A 75%, #D4AF37 86%, #D4AF37 92%, #3A1E00 100%) border-box !important; border: 2px solid transparent !important; backdrop-filter: blur(20px) saturate(160%) !important; -webkit-backdrop-filter: blur(20px) saturate(160%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.70), inset 0 0 40px rgba(255,255,255,0.10) !important; border-radius: 16px !important; } /* ════════════════════════════════════════════════════════════ 5. GLASS-CARD-GOLD — Stronger crystal (featured cards) ════════════════════════════════════════════════════════════ */ html[data-theme="night"] .glass-card-gold { background: rgba(255, 255, 255, 0.11) padding-box, linear-gradient(135deg, #2C1600 0%, #9A6010 8%, #D4AF37 18%, #D4AF37 28%, #F5E6B2 35%, #C8941A 44%, #C8920A 55%, #6A3800 65%, #C8920A 75%, #D4AF37 86%, #D4AF37 92%, #3A1E00 100%) border-box !important; border: 2px solid transparent !important; backdrop-filter: blur(28px) saturate(200%) !important; -webkit-backdrop-filter: blur(28px) saturate(200%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 40px rgba(255,255,255,0.025) !important; border-radius: 20px !important; } html[data-theme="day"] .glass-card-gold { background: rgba(255, 255, 255, 0.68) padding-box, linear-gradient(135deg, #2C1600 0%, #9A6010 8%, #D4AF37 18%, #D4AF37 28%, #F5E6B2 35%, #C8941A 44%, #C8920A 55%, #6A3800 65%, #C8920A 75%, #D4AF37 86%, #D4AF37 92%, #3A1E00 100%) border-box !important; border: 2px solid transparent !important; backdrop-filter: blur(28px) saturate(200%) !important; -webkit-backdrop-filter: blur(28px) saturate(200%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.70), inset 0 0 40px rgba(255,255,255,0.10) !important; border-radius: 20px !important; } /* ════════════════════════════════════════════════════════════ 6. GLASS-MORPHISM-CARD — Silver border crystal ════════════════════════════════════════════════════════════ */ html[data-theme="night"] .glass-morphism-card { background: rgba(255, 255, 255, 0.07) padding-box, linear-gradient(135deg, #1A1614 0%, #686C70 10%, #B8C0C8 20%, #E8ECF0 30%, #FFFFFF 38%, #D4D8DC 48%, #909498 58%, #252118 68%, #909498 76%, #D0D4D8 86%, #F8FAFC 93%, #1A1614 100%) border-box !important; border: 2px solid transparent !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 40px rgba(255,255,255,0.025) !important; border-radius: 20px !important; } html[data-theme="day"] .glass-morphism-card { background: rgba(255, 255, 255, 0.52) padding-box, linear-gradient(135deg, #1A1614 0%, #686C70 10%, #B8C0C8 20%, #E8ECF0 30%, #FFFFFF 38%, #D4D8DC 48%, #909498 58%, #252118 68%, #909498 76%, #D0D4D8 86%, #F8FAFC 93%, #1A1614 100%) border-box !important; border: 2px solid transparent !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.70), inset 0 0 40px rgba(255,255,255,0.10) !important; border-radius: 20px !important; } /* ════════════════════════════════════════════════════════════ 7. GOV STEPS — Alternating border crystal ════════════════════════════════════════════════════════════ */ html[data-theme="night"] .gov-step { background: rgba(255, 255, 255, 0.07) padding-box, linear-gradient(135deg, #1A1614 0%, #686C70 10%, #B8C0C8 20%, #E8ECF0 30%, #FFFFFF 38%, #D4D8DC 48%, #909498 58%, #252118 68%, #909498 76%, #D0D4D8 86%, #F8FAFC 93%, #1A1614 100%) border-box !important; border: 2px solid transparent !important; backdrop-filter: blur(20px) saturate(160%) !important; -webkit-backdrop-filter: blur(20px) saturate(160%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 40px rgba(255,255,255,0.025) !important; } html[data-theme="day"] .gov-step { background: rgba(255, 255, 255, 0.52) padding-box, linear-gradient(135deg, #1A1614 0%, #686C70 10%, #B8C0C8 20%, #E8ECF0 30%, #FFFFFF 38%, #D4D8DC 48%, #909498 58%, #252118 68%, #909498 76%, #D0D4D8 86%, #F8FAFC 93%, #1A1614 100%) border-box !important; border: 2px solid transparent !important; backdrop-filter: blur(20px) saturate(160%) !important; -webkit-backdrop-filter: blur(20px) saturate(160%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.70), inset 0 0 40px rgba(255,255,255,0.10) !important; } /* ════════════════════════════════════════════════════════════ 8. ONBOARD BOX — Gold border crystal ════════════════════════════════════════════════════════════ */ html[data-theme="night"] .onboard-box { /* ── Night: Tiffany Blue glassmorphism ── */ background: rgba(10,186,181,0.08) padding-box, linear-gradient(135deg, #022820 0%, #046858 12%, #0ABAB5 28%, #40D4D0 44%, #90EEEC 52%, #40D4D0 60%, #0ABAB5 74%, #046858 88%, #022820 100% ) border-box !important; border: 1.5px solid transparent !important; backdrop-filter: blur(28px) saturate(200%) brightness(1.05) !important; -webkit-backdrop-filter: blur(28px) saturate(200%) brightness(1.05) !important; box-shadow: inset 0 1px 0 rgba(144,238,236,0.35), inset 0 -1px 0 rgba(0,0,0,0.30), inset 0 0 48px rgba(10,186,181,0.06) !important; } html[data-theme="night"] #onboard-quick-form *, html[data-theme="night"] .onboard-box .floating-label, html[data-theme="night"] .onboard-box p, html[data-theme="night"] .onboard-box label, html[data-theme="night"] .onboard-box span:not(.role-btn):not(.btn-icon), html[data-theme="night"] .onboard-box .role-btn { color: #0ABAB5 !important; -webkit-text-fill-color: #0ABAB5 !important; } html[data-theme="day"] .onboard-box { /* 日光模式：半透明冰沽Tiffany藍，讓卡片浮現於白色底 */ background: rgba(225, 248, 248, 0.82) padding-box, linear-gradient(135deg, #2C1600 0%, #9A6010 8%, #D4AF37 18%, #D4AF37 28%, #F5E6B2 35%, #C8941A 44%, #C8920A 55%, #6A3800 65%, #C8920A 75%, #D4AF37 86%, #D4AF37 92%, #3A1E00 100%) border-box !important; border: 2px solid transparent !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.90), 0 4px 24px rgba(10,186,181,0.12), 0 2px 8px rgba(0,0,0,0.08) !important; } /* ════════════════════════════════════════════════════════════ 9. NAV TABS — Crystal glass + gold border + Tiffany text ════════════════════════════════════════════════════════════ */ html[data-theme="night"] .crystal-tab-blueprint { background: rgba(255,255,255,0.06) padding-box, linear-gradient(135deg, #2C1600 0%, #9A6010 8%, #D4AF37 18%, #D4AF37 28%, #F5E6B2 35%, #C8941A 44%, #C8920A 55%, #6A3800 65%, #C8920A 75%, #D4AF37 86%, #D4AF37 92%, #3A1E00 100%) border-box !important; border: 1.5px solid transparent !important; backdrop-filter: blur(16px) saturate(160%) !important; -webkit-backdrop-filter: blur(16px) saturate(160%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18) !important; color: #000000 !important; font-weight: 900 !important; border-radius: 9999px !important; transition: background 0.2s, color 0.2s !important; } html[data-theme="night"] .crystal-tab-blueprint:hover { background: rgba(212,175,55,0.14) padding-box, linear-gradient(135deg, #2C1600 0%, #9A6010 10%, #D4AF37 22%, #D4AF37 35%, #F5E6B2 45%, #C8941A 55%, #C8920A 70%, #6A3800 82%, #3A1E00 100%) border-box !important; color: #D4AF37 !important; } html[data-theme="day"] .crystal-tab-blueprint { background: rgba(255,255,255,0.60) padding-box, linear-gradient(135deg, #2C1600 0%, #9A6010 8%, #D4AF37 18%, #D4AF37 28%, #F5E6B2 35%, #C8941A 44%, #C8920A 55%, #6A3800 65%, #C8920A 75%, #D4AF37 86%, #D4AF37 92%, #3A1E00 100%) border-box !important; border: 1.5px solid transparent !important; backdrop-filter: blur(16px) saturate(160%) !important; -webkit-backdrop-filter: blur(16px) saturate(160%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.80) !important; color: #000000 !important; font-weight: 900 !important; border-radius: 9999px !important; } html[data-theme="day"] .crystal-tab-blueprint:hover { background: rgba(10,186,181,0.15) padding-box, linear-gradient(135deg, #022820 0%, #046858 12%, #0ABAB5 24%, #40D4D0 36%, #90EEEC 46%, #40D4D0 56%, #0ABAB5 68%, #046858 80%, #022820 100%) border-box !important; color: #F0F6FF !important; } /* ════════════════════════════════════════════════════════════ 10. LANG BUTTON — Gold metallic fill ════════════════════════════════════════════════════════════ */ .lang-btn { background: linear-gradient(135deg, #2C1600 0%, #C8920A 18%, #D4AF37 34%, #D4AF37 48%, #C8941A 60%, #C8920A 78%, #2C1600 100% ) !important; border: none !important; color: #141210 !important; font-weight: 900 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.30) !important; } /* ════════════════════════════════════════════════════════════ 11. THEME TOGGLE PILL — Silver metallic fill ════════════════════════════════════════════════════════════ */ #theme-toggle-pill { background: linear-gradient(135deg, #252118 0%, #585C60 22%, #909498 44%, #585C60 66%, #252118 100% ) !important; border: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.20) !important; } html[data-theme="night"] #theme-toggle-pill .toggle-opt.active { background: rgba(10,186,181,0.22) !important; color: #F0F6FF !important; } html[data-theme="day"] #theme-toggle-pill .toggle-opt.active { background: linear-gradient(135deg, #D4AF37, #D4AF37) !important; color: #141210 !important; } /* ════════════════════════════════════════════════════════════ 12. TEXT CONTRAST — Night vs Day inside crystal panels ════════════════════════════════════════════════════════════ */ /* Night: crystal is very transparent → text needs to be LIGHT */ html[data-theme="night"] .eng-card h2, html[data-theme="night"] .eng-card h3, html[data-theme="night"] .eng-card h4, html[data-theme="night"] .kpi-card h2, html[data-theme="night"] .kpi-card h3, html[data-theme="night"] .glass-card-gold h2, html[data-theme="night"] .glass-card-gold h3, html[data-theme="night"] .glass-morphism-card h2, html[data-theme="night"] .glass-morphism-card h3, html[data-theme="night"] .gov-step h2, html[data-theme="night"] .gov-step h3, html[data-theme="night"] .news-card h2, html[data-theme="night"] .news-card h3, html[data-theme="night"] .news-card-dark h2, html[data-theme="night"] .news-card-dark h3 { color: #F0F6FF !important; -webkit-text-fill-color: #F0F6FF !important; } /* ── Featured news metadata panel: day mode fix (text-white on bg-white = invisible) ── */ html[data-theme="day"] #news-card-featured .bg-white span, html[data-theme="day"] #news-card-featured .bg-white div:not(.news-featured-badge) { color: #374151 !important; -webkit-text-fill-color: #374151 !important; } /* ── KD section cards: add full border (not just top line) ── */ #knowledge-directory .eng-card, #knowledge-directory .kpi-card, #knowledge-directory .glass-morphism-card { border: 1px solid rgba(180,190,210,0.20) !important; border-top: 2px solid rgba(200,148,26,0.70) !important; } html[data-theme="day"] #knowledge-directory .eng-card, html[data-theme="day"] #knowledge-directory .kpi-card { border: 1px solid rgba(100,120,160,0.22) !important; border-top: 2px solid rgba(180,130,20,0.60) !important; } /* ── kd CTA buttons day mode text contrast ── */ html[data-theme="day"] #knowledge-directory button[class*="text-white"], html[data-theme="day"] #knowledge-directory a[class*="text-white"] { color: #141210 !important; -webkit-text-fill-color: #141210 !important; } html[data-theme="night"] .eng-card p, html[data-theme="night"] .kpi-card p, html[data-theme="night"] .glass-card-gold p, html[data-theme="night"] .glass-morphism-card p, html[data-theme="night"] .gov-step p, html[data-theme="night"] .news-card p, html[data-theme="night"] .news-card .card-body, html[data-theme="night"] .news-card .card-date, html[data-theme="night"] .news-card span { color: rgba(200,218,245,0.88) !important; } /* Day: crystal has white fill → text needs to be DARK */ html[data-theme="day"] .eng-card h2, html[data-theme="day"] .eng-card h3, html[data-theme="day"] .eng-card h4, html[data-theme="day"] .kpi-card h2, html[data-theme="day"] .kpi-card h3, html[data-theme="day"] .glass-card-gold h2, html[data-theme="day"] .glass-card-gold h3, html[data-theme="day"] .glass-morphism-card h2, html[data-theme="day"] .glass-morphism-card h3, html[data-theme="day"] .gov-step h2, html[data-theme="day"] .gov-step h3, html[data-theme="day"] .news-card h2, html[data-theme="day"] .news-card h3 { color: #141210 !important; -webkit-text-fill-color: #141210 !important; } html[data-theme="day"] .eng-card p, html[data-theme="day"] .kpi-card p, html[data-theme="day"] .glass-card-gold p, html[data-theme="day"] .glass-morphism-card p, html[data-theme="day"] .gov-step p, html[data-theme="day"] .news-card p { color: #1A1614 !important; } /* ════════════════════════════════════════════════════════════ 13. 4200 CARDS — Crystal glass panels ════════════════════════════════════════════════════════════ */ html[data-theme="night"] .double-metallic-silver, html[data-theme="night"] .metallic-hardware-monitor { background: rgba(255, 255, 255, 0.11) padding-box, linear-gradient(135deg, #1A1614 0%, #686C70 10%, #B8C0C8 20%, #E8ECF0 30%, #FFFFFF 38%, #D4D8DC 48%, #909498 58%, #252118 68%, #909498 76%, #D0D4D8 86%, #F8FAFC 93%, #1A1614 100%) border-box !important; border: 2px solid transparent !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 40px rgba(255,255,255,0.025) !important; border-radius: 20px !important; } html[data-theme="day"] .double-metallic-silver, html[data-theme="day"] .metallic-hardware-monitor { background: rgba(255, 255, 255, 0.52) padding-box, linear-gradient(135deg, #1A1614 0%, #686C70 10%, #B8C0C8 20%, #E8ECF0 30%, #FFFFFF 38%, #D4D8DC 48%, #909498 58%, #252118 68%, #909498 76%, #D0D4D8 86%, #F8FAFC 93%, #1A1614 100%) border-box !important; border: 2px solid transparent !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.70), inset 0 0 40px rgba(255,255,255,0.10) !important; border-radius: 20px !important; } html[data-theme="night"] .double-metallic-gold { background: rgba(255, 255, 255, 0.11) padding-box, linear-gradient(135deg, #2C1600 0%, #9A6010 8%, #D4AF37 18%, #D4AF37 28%, #F5E6B2 35%, #C8941A 44%, #C8920A 55%, #6A3800 65%, #C8920A 75%, #D4AF37 86%, #D4AF37 92%, #3A1E00 100%) border-box !important; border: 2px solid transparent !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 40px rgba(255,255,255,0.025) !important; border-radius: 20px !important; } html[data-theme="day"] .double-metallic-gold { background: rgba(255, 255, 255, 0.52) padding-box, linear-gradient(135deg, #2C1600 0%, #9A6010 8%, #D4AF37 18%, #D4AF37 28%, #F5E6B2 35%, #C8941A 44%, #C8920A 55%, #6A3800 65%, #C8920A 75%, #D4AF37 86%, #D4AF37 92%, #3A1E00 100%) border-box !important; border: 2px solid transparent !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.70), inset 0 0 40px rgba(255,255,255,0.10) !important; border-radius: 20px !important; } /* Text inside 4200 crystal cards */ html[data-theme="night"] .double-metallic-silver h1, html[data-theme="night"] .double-metallic-silver h2, html[data-theme="night"] .double-metallic-silver h3, html[data-theme="night"] .double-metallic-silver h4, html[data-theme="night"] .double-metallic-gold h1, html[data-theme="night"] .double-metallic-gold h2, html[data-theme="night"] .double-metallic-gold h3, html[data-theme="night"] .metallic-hardware-monitor h1, html[data-theme="night"] .metallic-hardware-monitor h2 { color: #F0F6FF !important; -webkit-text-fill-color: #F0F6FF !important; } html[data-theme="night"] .double-metallic-silver p, html[data-theme="night"] .double-metallic-gold p, html[data-theme="night"] .metallic-hardware-monitor p { color: rgba(200,218,245,0.88) !important; } html[data-theme="day"] .double-metallic-silver h1, html[data-theme="day"] .double-metallic-silver h2, html[data-theme="day"] .double-metallic-silver h3, html[data-theme="day"] .double-metallic-silver h4, html[data-theme="day"] .double-metallic-gold h1, html[data-theme="day"] .double-metallic-gold h2, html[data-theme="day"] .double-metallic-gold h3 { color: #141210 !important; -webkit-text-fill-color: #141210 !important; } html[data-theme="day"] .double-metallic-silver p, html[data-theme="day"] .double-metallic-gold p { color: #1A1614 !important; } /* Kill inner bg-pureWhite overlays in night (let crystal bg show through) */ html[data-theme="night"] [class*="bg-pureWhite"] { background-color: transparent !important; background: transparent !important; } /* 4200 alliance cards */ html[data-theme="night"] #alliances >div > div { background: rgba(255, 255, 255, 0.07) padding-box, linear-gradient(135deg, #022820 0%, #046858 12%, #0ABAB5 24%, #40D4D0 36%, #90EEEC 46%, #40D4D0 56%, #0ABAB5 68%, #046858 80%, #022820 100%) border-box !important; border: 2px solid transparent !important; backdrop-filter: blur(20px) saturate(160%) !important; -webkit-backdrop-filter: blur(20px) saturate(160%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 40px rgba(255,255,255,0.025) !important; } html[data-theme="night"] #alliances h3, html[data-theme="night"] #alliances h4 { color: #F0F6FF !important; } html[data-theme="night"] #alliances p, html[data-theme="night"] #alliances span { color: rgba(200,218,245,0.88) !important; } /* 4200 form in night */ html[data-theme="night"] #interconnect input, html[data-theme="night"] #interconnect textarea, html[data-theme="night"] #interconnect select { background: rgba(6,10,22,0.85) !important; color: #E8F0FF !important; border-color: rgba(10,186,181,0.50) !important; backdrop-filter: blur(8px) !important; } html[data-theme="night"] #interconnect label { color: #F0F6FF !important; } html[data-theme="night"] #interconnect h3 { color: #F0F6FF !important; } html[data-theme="night"] #interconnect p { color: rgba(200,218,245,0.88) !important; } /* ════════════════════════════════════════════════════════════ 14. SECTION BACKGROUNDS — White sections need bg for blur ════════════════════════════════════════════════════════════ */ html[data-theme="night"] #video-zone, html[data-theme="night"] #governance, /* ── Night mode: news/governance white-background sections → near-black ── */ html[data-theme="night"] #news, html[data-theme="night"] #governance, html[data-theme="night"] #onboard { background: #0A0A0A !important; } /* ── Night mode: news card black text → Tiffany Blue ── */ html[data-theme="night"] .news-card .text-navy, html[data-theme="night"] .news-card h2, html[data-theme="night"] .news-card h3, html[data-theme="night"] .news-card h4, html[data-theme="night"] .news-card [style*="color:#051"], html[data-theme="night"] .news-card [style*="color:#111"], html[data-theme="night"] .news-card [style*="color:#374"], html[data-theme="night"] .news-card .font-bold:not(.news-badge) { color: #0ABAB5 !important; -webkit-text-fill-color: #0ABAB5 !important; } /* News card body text → light for readability on dark bg */ html[data-theme="night"] .news-card p, html[data-theme="night"] .news-card .text-carbon-light, html[data-theme="night"] .news-card .text-carbon { color: rgba(180,210,240,0.80) !important; } /* News card bg → deep dark to contrast with near-black section */ html[data-theme="night"] .news-card, html[data-theme="night"] .news-card-dark { background: rgba(255,255,255,0.04) !important; border-color: rgba(10,186,181,0.15) !important; } html[data-theme="night"] #onboard, html[data-theme="night"] section.bg-white { background: transparent !important; } html[data-theme="day"] #video-zone, html[data-theme="day"] #governance, html[data-theme="day"] #news, html[data-theme="day"] #onboard { background: transparent !important; } /* Day mode: keep white sections readable */ html[data-theme="day"] #video-zone h2, html[data-theme="day"] #governance h2, html[data-theme="day"] #news h2, html[data-theme="day"] #onboard h2 { color: #141210 !important; } html[data-theme="day"] #video-zone p, html[data-theme="day"] #governance p, html[data-theme="day"] #news p, html[data-theme="day"] #onboard p { color: #1A1614 !important; } /* ======================================================================== BLOCK 05 / 12 — original position ~line 3292 ======================================================================== */ /* ════════════════════════════════════════════════════════ 0. GLOBAL GLOW KILLER — surgical, not nuclear Targets only glow-producing properties ════════════════════════════════════════════════════════ */ * { text-shadow: none; } /* Kill outer box-shadow glows on specific known glow-bearing classes */ .bg-neonGreen, [class*="neon"], [class*="glow"], .eng-card, .kpi-card, .news-card, .news-card-dark, .glass-card-gold, .glass-morphism-card, .gov-step, .onboard-box, .crystal-tab-blueprint, .lang-btn, #theme-toggle-pill, .double-metallic-silver, .double-metallic-gold, .metallic-hardware-monitor, button, a { filter: none !important; } /* Remove outer box-shadows globally, but allow inset (inner specular only) */ /* Strategy: override to inset-only on card-level */ /* ════════════════════════════════════════════════════════ 1. NAV TABS — White text, gold border, more opaque crystal ════════════════════════════════════════════════════════ */ html[data-theme="night"] .crystal-tab-blueprint { color: #F0F6FF !important; -webkit-text-fill-color: #F0F6FF !important; font-weight: 700 !important; /* More opaque so tabs are visible against dark bg */ background: rgba(255,255,255,0.11) padding-box, linear-gradient(135deg, #2C1600 0%, #9A6010 8%, #D4AF37 18%, #D4AF37 28%, #F5E6B2 35%, #C8941A 44%, #C8920A 55%, #6A3800 65%, #C8920A 75%, #D4AF37 86%, #D4AF37 92%, #3A1E00 100%) border-box !important; border: 2px solid transparent !important; backdrop-filter: blur(16px) saturate(160%) !important; -webkit-backdrop-filter: blur(16px) saturate(160%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22) !important; } html[data-theme="night"] .crystal-tab-blueprint:hover { color: #D4AF37 !important; -webkit-text-fill-color: #D4AF37 !important; background: rgba(212,175,55,0.14) padding-box, linear-gradient(135deg, #2C1600 0%, #9A6010 8%, #D4AF37 18%, #D4AF37 28%, #F5E6B2 35%, #C8941A 44%, #C8920A 55%, #6A3800 65%, #C8920A 75%, #D4AF37 86%, #D4AF37 92%, #3A1E00 100%) border-box !important; } html[data-theme="day"] .crystal-tab-blueprint { color: #141210 !important; -webkit-text-fill-color: #141210 !important; font-weight: 700 !important; } html[data-theme="day"] .crystal-tab-blueprint:hover { color: #141210 !important; -webkit-text-fill-color: #141210 !important; } /* ════════════════════════════════════════════════════════ 2. TIFFANY TEXT → BANNED everywhere Force ALL tiffany-colored text to white or neon green ════════════════════════════════════════════════════════ */ /* Any element using inline tiffany color styles */ [style*="color:#F0F6FF"], [style*="color: #F0F6FF"], [style*="color:#50D8D4"], [style*="color: #50D8D4"], [style*="color:#40D4D0"], [style*="color: #40D4D0"], [style*="color:#90EEEC"], [style*="color: #90EEEC"], [style*="color:tiffany"], .text-\\#0ABAB5\, .text-\\#50D8D4\, .text-\\#40D4D0\ { color: #F0F6FF !important; -webkit-text-fill-color: #F0F6FF !important; } /* ════════════════════════════════════════════════════════ 3. CARD HEADING HIERARCHY — Night mode h1/h2/h3: White | subtext: White 85% | labels: Neon Green Stats/KPI: Metallic Gold | Alerts/Status: Hermes Orange ════════════════════════════════════════════════════════ */ /* Main headings → White */ html[data-theme="night"] .eng-card h1, html[data-theme="night"] .eng-card h2, html[data-theme="night"] .eng-card h3, html[data-theme="night"] .eng-card h4, html[data-theme="night"] .kpi-card h2, html[data-theme="night"] .kpi-card h3, html[data-theme="night"] .kpi-card h4, html[data-theme="night"] .glass-card-gold h2, html[data-theme="night"] .glass-card-gold h3, html[data-theme="night"] .glass-morphism-card h2, html[data-theme="night"] .glass-morphism-card h3, html[data-theme="night"] .gov-step h2, html[data-theme="night"] .gov-step h3, html[data-theme="night"] .double-metallic-silver h2, html[data-theme="night"] .double-metallic-silver h3, html[data-theme="night"] .double-metallic-gold h2, html[data-theme="night"] .double-metallic-gold h3 { color: #F0F6FF !important; -webkit-text-fill-color: #F0F6FF !important; } /* ── Night mode: news-card headings → Tiffany Blue (NOT white) ── */ html[data-theme="night"] .news-card h2, html[data-theme="night"] .news-card h3, html[data-theme="night"] .news-card h4 { color: #0ABAB5 !important; -webkit-text-fill-color: #0ABAB5 !important; } /* Body/description text → White 85% */ html[data-theme="night"] .eng-card p, html[data-theme="night"] .eng-card li, html[data-theme="night"] .kpi-card p, html[data-theme="night"] .glass-card-gold p, html[data-theme="night"] .glass-morphism-card p, html[data-theme="night"] .gov-step p, html[data-theme="night"] .news-card p, html[data-theme="night"] .double-metallic-silver p, html[data-theme="night"] .double-metallic-gold p { color: rgba(240,246,255,0.82) !important; -webkit-text-fill-color: rgba(240,246,255,0.82) !important; } /* KPI/Stat numbers → Metallic Gold */ html[data-theme="night"] .kpi-card .text-3xl, html[data-theme="night"] .kpi-card .text-4xl, html[data-theme="night"] .kpi-card .text-2xl, html[data-theme="night"] .eng-card .text-3xl, html[data-theme="night"] .eng-card .text-4xl { color: #D4AF37 !important; -webkit-text-fill-color: #D4AF37 !important; } /* Status/Live indicators → Hermes Orange */ html[data-theme="night"] .status-live, html[data-theme="night"] [class*="status"], html[data-theme="night"] .badge-orange, html[data-theme="night"] .text-orange { color: #F37021 !important; -webkit-text-fill-color: #F37021 !important; } /* Day mode text */ html[data-theme="day"] .eng-card h1, html[data-theme="day"] .eng-card h2, html[data-theme="day"] .eng-card h3, html[data-theme="day"] .eng-card h4, html[data-theme="day"] .kpi-card h2, html[data-theme="day"] .kpi-card h3, html[data-theme="day"] .glass-card-gold h2, html[data-theme="day"] .glass-morphism-card h2, html[data-theme="day"] .gov-step h2, html[data-theme="day"] .news-card h2 { color: #141210 !important; -webkit-text-fill-color: #141210 !important; } html[data-theme="day"] .eng-card p, html[data-theme="day"] .kpi-card p, html[data-theme="day"] .glass-card-gold p, html[data-theme="day"] .glass-morphism-card p, html[data-theme="day"] .gov-step p, html[data-theme="day"] .news-card p { color: #1A1614 !important; -webkit-text-fill-color: #1A1614 !important; } /* ════════════════════════════════════════════════════════ 4. MATRIX CARDS — Kill all inner glow badges The node-badge / category labels should be FLAT metallic ════════════════════════════════════════════════════════ */ /* Node ID tags → Flat, metallic gold or neon green, NO glow */ html[data-theme="night"] .eng-card [class*="node"], html[data-theme="night"] .eng-card [class*="badge"], html[data-theme="night"] .eng-card [class*="tag"], html[data-theme="night"] .eng-card [class*="label"], html[data-theme="night"] .eng-card .font-mono { box-shadow: none !important; filter: none !important; text-shadow: none; } /* Category badge text (基礎軟能層 etc.) → Neon green (works for identifiers) */ html[data-theme="night"] .eng-card [class*="text-neon"], html[data-theme="night"] .eng-card [class*="text-green"], html[data-theme="night"] .eng-card [class*="neonGreen"], html[data-theme="night"] .eng-card .text-\\#0ABAB5\, html[data-theme="night"] .eng-card .text-\\#00FF41\ { color: #0ABAB5 !important; -webkit-text-fill-color: #0ABAB5 !important; text-shadow: none; } /* NODE: AI-NATIVE-001 style identifiers → Neon green */ html[data-theme="night"] .eng-card [class*="tracking"], html[data-theme="night"] .eng-card [class*="uppercase"][class*="mono"] { color: #0ABAB5 !important; } /* ════════════════════════════════════════════════════════ 5. FORM DRAWER / MODAL — Neon green labels, white text ════════════════════════════════════════════════════════ */ /* Drawer/sliding panel */ html[data-theme="night"] #mobile-nav-drawer nav, html[data-theme="night"] [id*="drawer"], html[data-theme="night"] [id*="modal"] { background: rgba(5,10,22,0.92) !important; backdrop-filter: blur(28px) saturate(180%) !important; -webkit-backdrop-filter: blur(28px) saturate(180%) !important; } /* Drawer border → gold metallic */ html[data-theme="night"] [id*="drawer"], html[data-theme="night"] [id*="modal"] { background: rgba(5,10,22,0.92) padding-box, linear-gradient(180deg, #2C1600 0%, #C8920A 18%, #D4AF37 34%, #F5E6B2 50%, #C8941A 66%, #C8920A 82%, #2C1600 100%) border-box !important; border-left: 2px solid transparent !important; box-shadow: none !important; } /* Form LABELS inside drawer → Neon Green (identifiers) */ html[data-theme="night"] [id*="drawer"] label, html[data-theme="night"] [id*="modal"] label, html[data-theme="night"] .onboard-box label, html[data-theme="night"] #hero .onboard-box label, html[data-theme="night"] [class*="floating-label"], html[data-theme="night"] [class*="form-label"] { color: #0ABAB5 !important; -webkit-text-fill-color: #0ABAB5 !important; font-weight: 700 !important; } /* Form HEADINGS → White */ html[data-theme="night"] [id*="drawer"] h1, html[data-theme="night"] [id*="drawer"] h2, html[data-theme="night"] [id*="drawer"] h3, html[data-theme="night"] [id*="drawer"] h4, html[data-theme="night"] [id*="modal"] h1, html[data-theme="night"] [id*="modal"] h2, html[data-theme="night"] [id*="modal"] h3 { color: #F0F6FF !important; -webkit-text-fill-color: #F0F6FF !important; } /* Form body text → White 82% */ html[data-theme="night"] [id*="drawer"] p, html[data-theme="night"] [id*="drawer"] span, html[data-theme="night"] [id*="modal"] p { color: rgba(240,246,255,0.82) !important; } /* Form INPUT FIELDS → Dark crystal background */ html[data-theme="night"] [id*="drawer"] input, html[data-theme="night"] [id*="drawer"] textarea, html[data-theme="night"] [id*="drawer"] select, html[data-theme="night"] [id*="modal"] input, html[data-theme="night"] [id*="modal"] textarea { background: rgba(6,12,28,0.85) !important; color: #F0F6FF !important; border: 1px solid rgba(212,175,55,0.40) !important; box-shadow: none !important; } html[data-theme="night"] [id*="drawer"] input:focus, html[data-theme="night"] [id*="drawer"] textarea:focus, html[data-theme="night"] [id*="modal"] input:focus { border-color: rgba(212,175,55,0.80) !important; outline: none !important; } /* QUICK ONBOARD form inline */ html[data-theme="night"] .onboard-box .floating-label, html[data-theme="night"] .onboard-box [class*="label"] { color: #0ABAB5 !important; -webkit-text-fill-color: #0ABAB5 !important; background: #0C0A08 !important; /* pill bg that holds the label */ } html[data-theme="night"] .onboard-box h2, html[data-theme="night"] .onboard-box h3 { color: #F0F6FF !important; } html[data-theme="night"] .onboard-box p { color: rgba(240,246,255,0.80) !important; } /* ════════════════════════════════════════════════════════ 6. SECONDARY CTA BUTTON — Crystal glass + gold border (The "Explore" button next to primary orange CTA) ════════════════════════════════════════════════════════ */ html[data-theme="night"] a[data-i18n="cta.learn"], html[data-theme="night"] button[data-i18n="cta.learn"], html[data-theme="night"] [class*="btn-secondary"], html[data-theme="night"] [class*="outline-gold"], html[data-theme="night"] a[class*="border"][class*="rounded"] { background: rgba(255,255,255,0.09) padding-box, linear-gradient(135deg, #2C1600 0%, #D4AF37 30%, #F5E6B2 50%, #D4AF37 70%, #2C1600 100%) border-box !important; border: 2px solid transparent !important; color: #0ABAB5 !important; -webkit-text-fill-color: #0ABAB5 !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18) !important; } /* ════════════════════════════════════════════════════════ 7. ROLE BUTTONS (AI Native / Career / SME) — Crystal glass ════════════════════════════════════════════════════════ */ html[data-theme="night"] button[data-i18n^="role."], html[data-theme="night"] [class*="role-btn"], html[data-theme="night"] .onboard-box button:not([class*="cta"]):not([class*="submit"]) { background: rgba(255,255,255,0.08) padding-box, linear-gradient(135deg, #1A1614 0%, #C8CCCE 30%, #FFFFFF 50%, #C8CCCE 70%, #1A1614 100%) border-box !important; border: 1.5px solid transparent !important; color: #F0F6FF !important; -webkit-text-fill-color: #F0F6FF !important; backdrop-filter: blur(12px) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.20) !important; } html[data-theme="night"] button[data-i18n^="role."]:hover, html[data-theme="night"] .onboard-box button:hover { background: rgba(212,175,55,0.12) padding-box, linear-gradient(135deg, #2C1600 0%, #D4AF37 30%, #F5E6B2 50%, #D4AF37 70%, #2C1600 100%) border-box !important; color: #D4AF37 !important; -webkit-text-fill-color: #D4AF37 !important; } /* ════════════════════════════════════════════════════════ 8. SECTION HEADINGS (outside cards) — White / Gold accents ════════════════════════════════════════════════════════ */ html[data-theme="night"] section h2, html[data-theme="night"] section h3 { color: #F0F6FF !important; -webkit-text-fill-color: #F0F6FF !important; } /* Section subheadings: hex-in-class removed (invalid CSS) */ /* Gradient text headings that use tiffany in gradient */ html[data-theme="night"] [class*="bg-gradient"][class*="text-transparent"], html[data-theme="night"] [class*="bg-clip-text"] { background-image: linear-gradient(135deg, #F0F6FF 0%, #D4AF37 50%, #F37021 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; } /* ════════════════════════════════════════════════════════ 9. KNOWLEDGE DIRECTORY — Section link text ════════════════════════════════════════════════════════ */ html[data-theme="night"] #knowledge-directory h2, html[data-theme="night"] #knowledge-directory h3 { color: #F0F6FF !important; } html[data-theme="night"] #knowledge-directory p { color: rgba(240,246,255,0.82) !important; } html[data-theme="night"] #knowledge-directory a { color: #D4AF37 !important; -webkit-text-fill-color: #D4AF37 !important; } html[data-theme="night"] #knowledge-directory a:hover { color: #D4AF37 !important; } /* ════════════════════════════════════════════════════════ 10. NEWS SECTION text ════════════════════════════════════════════════════════ */ html[data-theme="night"] #news h2 { color: #F0F6FF !important; } html[data-theme="night"] #news .news-date, html[data-theme="night"] #news [class*="text-sm"], html[data-theme="night"] #news time { color: #D4AF37 !important; -webkit-text-fill-color: #D4AF37 !important; } /* ════════════════════════════════════════════════════════ 11. NAVIGATION HERO AREA — Logo tagline text ════════════════════════════════════════════════════════ */ html[data-theme="night"] header [class*="tagline"], html[data-theme="night"] header .site-subtitle, html[data-theme="night"] header [data-i18n="nav.tagline"], html[data-theme="night"] header [data-i18n="logo.subtitle"] { color: rgba(240,246,255,0.75) !important; -webkit-text-fill-color: rgba(240,246,255,0.75) !important; } /* Logo text "TGAI PLATFORM" */ html[data-theme="night"] header [class*="logo-text"], html[data-theme="night"] header [class*="brand-name"] { color: #D4AF37 !important; } /* ════════════════════════════════════════════════════════ 12. VIDEO ZONE heading ════════════════════════════════════════════════════════ */ html[data-theme="night"] #video-zone h2, html[data-theme="night"] #video-zone h3 { color: #F0F6FF !important; } html[data-theme="night"] #video-zone p { color: rgba(240,246,255,0.82) !important; } /* ════════════════════════════════════════════════════════ 13. STATUS "LIVE" badge → Hermes Orange ════════════════════════════════════════════════════════ */ html[data-theme="night"] [class*="status"], html[data-theme="night"] .live-indicator, html[data-theme="night"] [class*="LIVE"] { color: #F37021 !important; } /* ════════════════════════════════════════════════════════ 14. Matrix card — specific content rules ════════════════════════════════════════════════════════ */ /* Node ID font-mono tag */ html[data-theme="night"] .eng-card .font-mono { color: #0ABAB5 !important; -webkit-text-fill-color: #0ABAB5 !important; text-shadow: none; box-shadow: none !important; } /* Category badge text (基礎軟能層/核心動能層/產業加速層) */ html[data-theme="night"] .eng-card [class*="bg-"] >span, html[data-theme="night"] .eng-card [class*="rounded-full"] span { text-shadow: none; } /* EVIDENCE LINK VERIFIED text */ html[data-theme="night"] [class*="evidence"], html[data-theme="night"] [class*="verified"] { color: #0ABAB5 !important; -webkit-text-fill-color: #0ABAB5 !important; text-shadow: none; } /* Metric numbers inside eng-cards */ html[data-theme="night"] .eng-card [class*="text-2xl"], html[data-theme="night"] .eng-card [class*="text-3xl"] { color: #D4AF37 !important; -webkit-text-fill-color: #D4AF37 !important; } /* Negative metric (e.g. -62%) → Hermes orange */ html[data-theme="night"] .eng-card [class*="text-red"], html[data-theme="night"] .eng-card [class*="negative"], html[data-theme="night"] .eng-card [class*="decline"] { color: #F37021 !important; -webkit-text-fill-color: #F37021 !important; } /* ════════════════════════════════════════════════════════ 15. FOOTER text ════════════════════════════════════════════════════════ */ html[data-theme="night"] footer, html[data-theme="night"] footer p, html[data-theme="night"] footer span, html[data-theme="night"] footer a { color: rgba(240,246,255,0.55) !important; -webkit-text-fill-color: rgba(240,246,255,0.55) !important; text-shadow: none; } html[data-theme="night"] footer a:hover { color: #D4AF37 !important; } /* ════════════════════════════════════════════════════════ 16. DAY MODE: equivalent overrides ════════════════════════════════════════════════════════ */ html[data-theme="day"] .crystal-tab-blueprint { color: #141210 !important; -webkit-text-fill-color: #141210 !important; } html[data-theme="day"] section h2, html[data-theme="day"] section h3 { color: #141210 !important; -webkit-text-fill-color: #141210 !important; } html[data-theme="day"] section p { color: #1A1614 !important; } html[data-theme="day"] [id*="drawer"] label, html[data-theme="day"] .onboard-box label { color: #1F7A78 !important; /* dark tiffany = readable on white bg */ font-weight: 700 !important; } html[data-theme="day"] [id*="drawer"] h2, html[data-theme="day"] [id*="drawer"] h3 { color: #141210 !important; } html[data-theme="day"] .eng-card .font-mono { color: #1F7A78 !important; } html[data-theme="day"] .eng-card [class*="text-2xl"], html[data-theme="day"] .eng-card [class*="text-3xl"], html[data-theme="day"] .kpi-card .text-3xl { color: #8B5010 !important; /* dark gold readable on white */ } /* ======================================================================== BLOCK 06 / 12 — original position ~line 3800 ======================================================================== */ /* ── Crystal tabs: stronger border visibility ── */ html[data-theme="night"] .crystal-tab-blueprint { background: rgba(255,255,255,0.12) padding-box, linear-gradient(135deg, #1A0C00 0%, #8A5008 8%, #C8940A 16%, #C8941A 22%, #F5E6B2 30%, #D4AF37 38%, #D4AF37 46%, #C8940A 55%, #8A5008 64%, #4A2800 72%, #C8940A 82%, #F5E6B2 90%, #2C1600 100%) border-box !important; border: 2px solid transparent !important; color: #F0F6FF !important; -webkit-text-fill-color: #F0F6FF !important; font-weight: 800 !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25) !important; filter: none !important; text-shadow: none; } html[data-theme="night"] .crystal-tab-blueprint:hover { background: rgba(212,175,55,0.16) padding-box, linear-gradient(135deg, #1A0C00 0%, #8A5008 8%, #C8940A 16%, #C8941A 22%, #F5E6B2 30%, #D4AF37 38%, #D4AF37 46%, #C8940A 55%, #8A5008 64%, #4A2800 72%, #C8940A 82%, #F5E6B2 90%, #2C1600 100%) border-box !important; color: #D4AF37 !important; -webkit-text-fill-color: #D4AF37 !important; } html[data-theme="day"] .crystal-tab-blueprint { background: rgba(255,255,255,0.65) padding-box, linear-gradient(135deg, #1A0C00 0%, #C8940A 20%, #F5E6B2 40%, #D4AF37 60%, #C8940A 80%, #2C1600 100%) border-box !important; border: 2px solid transparent !important; color: #141210 !important; -webkit-text-fill-color: #141210 !important; font-weight: 800 !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.80) !important; } /* ── Global glow removal: catch any remaining outer box-shadows ── */ .crystal-tab-blueprint, .cta-secondary, .eng-card, .kpi-card, .news-card, .news-card-dark, .glass-card-gold, .glass-morphism-card, .gov-step, .onboard-box, .double-metallic-silver, .double-metallic-gold { filter: none !important; text-shadow: none; } /* ── Section KPI numbers: gold ── */ html[data-theme="night"] #hero ~ * .text-3xl, html[data-theme="night"] #hero ~ * .text-4xl, html[data-theme="night"] #hero ~ * .text-5xl { text-shadow: none; } /* KPI ticker values on hero section bottom bar */ html[data-theme="night"] #hero .text-3xl, html[data-theme="night"] #hero .text-4xl { color: #D4AF37 !important; -webkit-text-fill-color: #D4AF37 !important; text-shadow: none; } /* LIVE indicator */ html[data-theme="night"] .live-indicator, html[data-theme="night"] [class*="LIVE"], html[data-theme="night"] .text-\\#0ABAB5\, html[data-theme="night"] .text-neon { text-shadow: none; filter: none !important; } /* ======================================================================== BLOCK 07 / 12 — original position ~line 3879 ======================================================================== */ /* Language dropdown — hidden by default, shown when .open added by JS */ #lang-switcher-wrap { position: relative; display: inline-flex; align-items: center; } .lang-dropdown { display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; z-index: 9999; border-radius: 12px; overflow: hidden; /* Crystal glass panel */ background: rgba(5, 12, 28, 0.92); border: 1.5px solid rgba(212,175,55,0.5); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); } html[data-theme="day"] .lang-dropdown { background: rgba(255, 255, 255, 0.95); border: 1.5px solid rgba(212,175,55,0.6); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 4px 20px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.9); } .lang-dropdown.open { display: block; } .lang-dropdown-item { display: flex; align-items: center; gap: 8px; padding: 9px 14px; cursor: pointer; font-size: 13px; font-weight: 600; color: rgba(240,246,255,0.85); transition: background 0.15s; border-bottom: 1px solid rgba(212,175,55,0.12); } html[data-theme="day"] .lang-dropdown-item { color: #1A1614; } .lang-dropdown-item:last-child { border-bottom: none; } .lang-dropdown-item:hover { background: rgba(212,175,55,0.15); color: #D4AF37; } html[data-theme="day"] .lang-dropdown-item:hover { background: rgba(212,175,55,0.12); color: #8A5008; } .lang-dropdown-item.active { background: rgba(212,175,55,0.1); color: #D4AF37; } html[data-theme="day"] .lang-dropdown-item.active { color: #8A5008; } .lang-flag { font-size: 16px; } .lang-name { flex: 1; } .lang-code { font-size: 11px; opacity: 0.6; font-family: 'JetBrains Mono', monospace; } /* Lang button — same height/shape as crystal-tab-blueprint, gold background */ .lang-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 0.625rem 1.5rem !important; /* matches px-6 py-2.5 */ border-radius: 9999px !important; font-size: 0.875rem !important; /* text-sm */ font-weight: 900 !important; cursor: pointer !important; white-space: nowrap !important; line-height: 1 !important; /* Gold metallic gradient */ background: linear-gradient(135deg, #2C1600 0%, #C8920A 20%, #D4AF37 38%, #D4AF37 50%, #C8941A 62%, #C8920A 80%, #2C1600 100% ) !important; border: none !important; border-top: 2px solid rgba(255,235,120,0.70) !important; border-bottom: 2px solid rgba(120,60,0,0.60) !important; color: #141210 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.30) !important; text-shadow: none !important; filter: none !important; transition: all 0.20s ease !important; } .lang-btn:hover { opacity: 0.88; transform: translateY(-1.5px); } #lang-switcher-wrap { position: relative; display: inline-flex; align-items: center; } /* ══════════════════════════════════════════════════════════════ COMPREHENSIVE NIGHT MODE COLOR OVERRIDES All inline style="color:#..." on dark-bg sections ══════════════════════════════════════════════════════════════ */ /* Hero section — all dark inline text → light in night */ html[data-theme="night"] #hero [style*="color:#111111"], html[data-theme="night"] #hero [style*="color:#555555"] { color: #F0F6FF !important; } html[data-theme="night"] #hero [style*="color:#6A6D7A"], html[data-theme="night"] #hero [style*="color:#374151"] { color: rgba(210,228,248,0.80) !important; } /* Video zone — div labels and captions in night */ html[data-theme="night"] #video-zone [style*="color:#111111"] { color: #F0F4F8 !important; } html[data-theme="night"] #video-zone [style*="color:#6A6D7A"] { color: rgba(210,228,248,0.70) !important; } /* Governance section — div descriptions */ html[data-theme="night"] #governance [style*="color:#111111"] { color: #F0F4F8 !important; } html[data-theme="night"] #governance [style*="color:#374151"], html[data-theme="night"] #governance [style*="color:#6A6D7A"] { color: rgba(210,228,248,0.75) !important; } /* Matrix section is ALWAYS dark — override for BOTH day & night */ #matrix [style*="color:#111111"] { color: #F0F6FF !important; } #matrix [style*="color:#6A6D7A"] { color: rgba(200,220,248,0.80) !important; } /* Blueprint section — always dark */ #blueprint [style*="color:#111111"] { color: #F0F6FF !important; } #blueprint [style*="color:#6A6D7A"] { color: rgba(200,220,248,0.80) !important; } /* Ensure #F0F6FF elements in DAY hero are readable via .hero-adaptive-text */ /* (handled by existing .hero-adaptive-text rule) */ /* Mobile nav: text-blue-200 is invisible on bg-white in day mode */ html[data-theme="day"] #mobile-nav-drawer a { color: #141210 !important; } html[data-theme="day"] #mobile-nav-drawer a:hover { color: #F37021 !important; } /* ======================================================================== BLOCK 08 / 12 — original position ~line 4038 ======================================================================== */ .wp-logo { width: 100px; height: 100px; object-fit: contain; margin: 0 auto 20px; display: block; filter: drop-shadow(0 0 18px rgba(200,148,26,0.55)); border-radius: 50%; } /* ── White Paper Modal ─────────────────────────────── */ @keyframes wpFadeIn { from { opacity:0; } to { opacity:1; } } #wp-modal-box { display: flex; flex-direction: column; height: 100vh; width: 100%; font-family: 'Noto Sans TC', 'PingFang TC', sans-serif; } /* Header */ #wp-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; flex-shrink: 0; background: rgba(6,10,22,0.98); border-bottom: 1px solid rgba(200,148,26,0.30); } .wp-hdr-left { display:flex; flex-direction:column; gap:2px; } .wp-hdr-tag { font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:700; letter-spacing:0.20em; color:rgba(200,148,26,0.65); text-transform:uppercase; } .wp-hdr-title { font-size: 15px; font-weight: 900; color: #F0F6FF; font-family:'jf-openhuninn','Noto Sans TC',sans-serif; } #wp-close-btn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 50%; width:36px; height:36px; cursor:pointer; color:#F0F6FF; font-size:16px; display:flex; align-items:center; justify-content:center; transition: background 0.2s; flex-shrink:0; } #wp-close-btn:hover { background: rgba(200,148,26,0.25); border-color: rgba(200,148,26,0.5); } /* Body: sidebar + content */ #wp-modal-body { display: flex; flex: 1; overflow: hidden; } /* Sidebar TOC */ #wp-sidebar { width: 220px; flex-shrink: 0; overflow-y: auto; padding: 24px 16px; border-right: 1px solid rgba(200,148,26,0.15); background: rgba(4,7,16,0.80); } @media(max-width:768px){ #wp-sidebar { display:none; } } .wp-toc-title { font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:700; letter-spacing:0.18em; color:rgba(200,148,26,0.60); text-transform:uppercase; margin-bottom:16px; } .wp-toc-link { display:block; padding:6px 10px; border-radius:6px; margin-bottom:2px; font-size:12px; color:rgba(160,185,215,0.75); text-decoration:none; cursor:pointer; transition: all 0.15s; border-left:2px solid transparent; background:none; border-right:none; border-top:none; border-bottom:none; text-align:left; width:100%; font-family:'Noto Sans TC',sans-serif; } .wp-toc-link:hover { color:#F0F6FF; background:rgba(200,148,26,0.08); border-left-color:rgba(200,148,26,0.4); } .wp-toc-link.active { color:#C8941A; background:rgba(200,148,26,0.10); border-left-color:#C8941A; font-weight:700; } .wp-toc-part { font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:0.15em; color:rgba(200,148,26,0.45); text-transform:uppercase; padding:10px 10px 4px; margin-top:6px; } /* Content scroll area */ #wp-content-scroll { flex:1; overflow-y:auto; padding:40px 56px; } @media(max-width:768px){ #wp-content-scroll { padding:24px 20px; } } /* Content styles */ .wp-cover { text-align:center; padding:40px 0 32px; } .wp-cover-tag { font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:700; letter-spacing:0.22em; color:rgba(200,148,26,0.65); text-transform:uppercase; margin-bottom:20px; } .wp-cover-title { font-family:'jf-openhuninn','Noto Sans TC',sans-serif; font-size:clamp(28px,5vw,48px); font-weight:900; color:#F0F6FF; line-height:1.2; margin-bottom:12px; } .wp-cover-sub { font-family:'JetBrains Mono',monospace; font-size:13px; color:rgba(200,148,26,0.80); letter-spacing:0.10em; margin-bottom:8px; } .wp-cover-tagline { font-size:18px; font-weight:700; color:#C8941A; margin-bottom:8px; } .wp-cover-desc { font-size:14px; color:rgba(160,185,215,0.80); margin-bottom:24px; } .wp-cover-meta { font-family:'JetBrains Mono',monospace; font-size:10px; color:rgba(120,145,175,0.60); border-top:1px solid rgba(200,148,26,0.20); padding-top:16px; margin-top:8px; } .wp-divider { height:1px; background:linear-gradient(90deg,transparent,rgba(200,148,26,0.4),transparent); margin:36px 0; } .wp-part-label { font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; letter-spacing:0.22em; color:rgba(200,148,26,0.60); text-transform:uppercase; margin-bottom:6px; } .wp-part-title { font-family:'jf-openhuninn','Noto Sans TC',sans-serif; font-size:clamp(22px,3.5vw,30px); font-weight:900; color:#F0F6FF; margin:0 0 6px; line-height:1.3; } .wp-part-lead { font-size:14px; color:rgba(200,148,26,0.75); margin-bottom:28px; font-style:italic; } .wp-chapter { margin-bottom:40px; } .wp-ch-num { font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:700; letter-spacing:0.18em; color:rgba(200,148,26,0.55); text-transform:uppercase; margin-bottom:4px; } .wp-ch-title { font-family:'jf-openhuninn','Noto Sans TC',sans-serif; font-size:clamp(18px,2.8vw,24px); font-weight:900; color:#E8F0FC; margin:0 0 18px; line-height:1.35; } .wp-ch-title small { font-size:0.65em; font-weight:400; color:rgba(160,185,215,0.70); display:block; margin-top:4px; } .wp-section-h4 { font-size:15px; font-weight:700; color:#C8941A; margin:22px 0 10px; font-family:'Noto Sans TC',sans-serif; } .wp-stage-block { background:rgba(255,255,255,0.03); border-left:3px solid rgba(200,148,26,0.35); border-radius:0 12px 12px 0; padding:18px 20px; margin-bottom:18px; } .wp-stage-highlight { border-left-color:#C8941A; background:rgba(200,148,26,0.06); } .wp-stage-label { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; color:#C8941A; letter-spacing:0.05em; margin-bottom:10px; } #wp-content-scroll p { font-size:14px; line-height:1.85; color:rgba(190,210,235,0.85); margin-bottom:14px; } .wp-list { list-style:none; padding:0; margin:0 0 16px; } .wp-list li { font-size:14px; line-height:1.80; color:rgba(190,210,235,0.82); padding:6px 0 6px 20px; position:relative; border-bottom:1px solid rgba(255,255,255,0.04); } .wp-list li::before { content:'▸'; position:absolute; left:0; color:#C8941A; font-weight:900; } .wp-table-wrap { overflow-x:auto; margin-bottom:20px; } .wp-table { width:100%; border-collapse:collapse; font-size:13px; } .wp-table th { background:rgba(200,148,26,0.12); color:#C8941A; font-weight:700; padding:10px 14px; text-align:left; border-bottom:1px solid rgba(200,148,26,0.25); font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.05em; } .wp-table td { padding:9px 14px; border-bottom:1px solid rgba(255,255,255,0.05); color:rgba(190,210,235,0.82); } .wp-table tr:hover td { background:rgba(200,148,26,0.04); } .wp-stack-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-top:16px; margin-bottom:8px; } .wp-stack-item { background:rgba(255,255,255,0.04); border:1.5px solid rgba(200,148,26,0.25); border-radius:14px; padding:18px 16px; transition: border-color 0.2s; } .wp-stack-item:hover { border-color:rgba(200,148,26,0.55); } .wp-stack-code { font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:900; color:#C8941A; margin-bottom:6px; } .wp-stack-name { font-size:13px; font-weight:700; color:#F0F6FF; margin-bottom:8px; } .wp-stack-desc { font-size:12px; color:rgba(160,185,215,0.75); line-height:1.7; } .wp-milestone-list { list-style:none; padding:0; margin:0 0 16px; counter-reset:mile; } .wp-milestone-list li { font-size:14px; line-height:1.80; color:rgba(190,210,235,0.82); padding:10px 0 10px 36px; position:relative; border-bottom:1px solid rgba(255,255,255,0.04); counter-increment:mile; } .wp-milestone-list li::before { content:counter(mile,'0') ''; position:absolute; left:0; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:900; color:#C8941A; background:rgba(200,148,26,0.12); width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; top:8px; } .wp-final-chapter { text-align:center; padding:20px 0; } .wp-final-lead { font-size:clamp(18px,2.5vw,24px); font-weight:900; color:#C8941A; margin-bottom:20px; font-family:'jf-openhuninn','Noto Sans TC',sans-serif; } .wp-quote { border:1px solid rgba(200,148,26,0.35); border-radius:16px; padding:24px 32px; margin:28px auto; max-width:520px; font-size:15px; font-weight:700; color:#C8941A; font-style:italic; line-height:1.75; background:rgba(200,148,26,0.06); } .wp-final-cta { font-size:14px; color:rgba(160,185,215,0.85); margin:20px 0; font-weight:700; } .wp-final-sig { margin-top:32px; font-family:'JetBrains Mono',monospace; font-size:11px; color:rgba(200,148,26,0.65); letter-spacing:0.10em; border-top:1px solid rgba(200,148,26,0.20); padding-top:18px; } /* ======================================================================== BLOCK 09 / 12 — original position ~line 4280 ======================================================================== */ @keyframes introPulse { 0%,100%{opacity:0.5;} 50%{opacity:1;} } body.intro-playing { overflow:hidden; } /* ══════════════════════════════════════════════════ MOBILE LAYOUT FIXES (max-width: 640px) - Theme toggle: smaller pill so it doesn't cover VZ bar - Role buttons: uniform height, no text deformation - Onboard box: reduced padding so submit btn fits ══════════════════════════════════════════════════ */ @media (max-width: 640px) { /* 1. Theme toggle — reduce size & lift above bottom edge */ #theme-toggle-pill { bottom: max(16px, env(safe-area-inset-bottom, 0px) + 8px) !important; right: 12px !important; padding: 4px !important; } #theme-toggle-pill button { padding: 6px 10px !important; font-size: 10px !important; gap: 4px !important; letter-spacing: 0 !important; } /* 2. Footer: pad bottom so theme-pill doesn't cover Privacy/Terms links */ /* Pill height ~44px + 16px bottom + 12px clearance = ~72px */ #site-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; } /* Footer bottom row: left-align so it clears right-side pill */ #site-footer .footer-bottom-row, #site-footer > div:last-child { padding-right: 80px !important; } /* 2. Role selector — 3 equal-height columns, no overflow */ #role-selector { gap: 6px !important; } .role-btn { padding: 8px 4px !important; font-size: 10px !important; line-height: 1.25 !important; min-height: 52px !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; word-break: break-word !important; } /* 3. Onboard box — reduce padding so row fits without overflow */ .onboard-box { padding: 14px !important; } /* 4. Email input row — prevent submit button overflow */ #onboard-quick-form .flex.gap-2 { gap: 6px !important; } #onboard-email { min-width: 0 !important; } #onboard-submit { padding-left: 12px !important; padding-right: 12px !important; font-size: 10px !important; flex-shrink: 0 !important; } /* 5. Hero heading: prevent overflow on small screens */ #hero-heading span { font-size: clamp(1.75rem, 8vw, 3rem) !important; word-break: break-word !important; } } /* ══════════════════════════════════════════════════ FIXED HEADER CLEARANCE header h-20 = 80px mobile / h-32 = 128px desktop Body needs matching padding-top so content is never hidden behind the sticky navbar. ══════════════════════════════════════════════════ */ body { padding-top: 80px; /* h-20 on mobile */ } @media (min-width: 640px) { body { padding-top: 128px; /* h-32 on sm+ */ } } /* Sections: scroll-margin so anchor links clear the header */ section[id] { scroll-margin-top: 84px; } @media (min-width: 640px) { section[id] { scroll-margin-top: 136px; } } /* ── News tab fix: wider spacing, smaller font ── */ .news-tab-btn { padding: 8px 20px !important; font-size: 10px !important; letter-spacing: 0.12em !important; white-space: nowrap !important; min-width: fit-content !important; } .news-tab-btn.active, .news-tab-btn[aria-selected="true"] { padding: 8px 20px !important; } /* ── Nav tabs: day=black, night=white ── */ [data-theme="day"] #nav-matrix, [data-theme="day"] #nav-governance, [data-theme="day"] #nav-blueprint, [data-theme="day"] #nav-knowledge, [data-theme="day"] #nav-news { color: #141210 !important; } [data-theme="night"] #nav-matrix, [data-theme="night"] #nav-governance, [data-theme="night"] #nav-blueprint, [data-theme="night"] #nav-knowledge, [data-theme="night"] #nav-news { color: #F0F6FF !important; -webkit-text-fill-color: #F0F6FF !important; } [data-theme="day"] #nav-matrix:hover, [data-theme="day"] #nav-governance:hover, [data-theme="day"] #nav-blueprint:hover, [data-theme="day"] #nav-knowledge:hover, [data-theme="day"] #nav-news:hover { color: #141210 !important; opacity: 0.7; } [data-theme="night"] #nav-governance:hover, [data-theme="night"] #nav-blueprint:hover, [data-theme="night"] #nav-knowledge:hover, [data-theme="night"] #nav-news:hover { color: #ffffff !important; opacity: 0.85; } /* 人才矩陣 — 奈視指定黑色文字 */ [data-theme="night"] #nav-matrix { color: #141210 !important; -webkit-text-fill-color: #141210 !important; } [data-theme="night"] #nav-matrix:hover { color: #000000 !important; -webkit-text-fill-color: #000000 !important; opacity: 1; } /* 奈視：新聞卡首句黑底黑字 → 白色 */ html[data-theme="night"] .news-card .text-navy, html[data-theme="night"] .news-card-dark .text-navy, html[data-theme="night"] .news-card h3.text-navy { color: #E0EDF8 !important; -webkit-text-fill-color: #E0EDF8 !important; } html[data-theme="night"] .news-card .text-carbon-light, html[data-theme="night"] .news-card-dark .text-carbon-light, html[data-theme="night"] .news-card p.text-carbon-light, html[data-theme="night"] .news-card p.text-carbon-light span { color: rgba(200,218,240,0.90) !important; -webkit-text-fill-color: rgba(200,218,240,0.90) !important; } /* 奈視：新聞卡 p 首句通用 */ html[data-theme="night"] .news-card p span, html[data-theme="night"] .news-card-dark p span { color: rgba(200,218,240,0.88) !important; -webkit-text-fill-color: rgba(200,218,240,0.88) !important; } /* 奈視： featured card 右欄 metadata 面板白底白字 → 深色 */ html[data-theme="night"] #news-card-featured .bg-white { background: rgba(10,20,40,0.85) !important; border-color: rgba(200,148,26,0.30) !important; } html[data-theme="night"] #news-card-featured .bg-white span, html[data-theme="night"] #news-card-featured .bg-white div { color: rgba(200,218,240,0.85) !important; -webkit-text-fill-color: rgba(200,218,240,0.85) !important; } /* ══════════════════════════════════════════════════ OVERFLOW-X FIX: prevent right-side content cutoff ══════════════════════════════════════════════════ */ body { overflow-x: hidden !important; } /* ══════════════════════════════════════════════════ MODAL SHIELD: payment-modal and cs-backdrop must NEVER be overridden by day/night theme !important. They are fixed overlays with their own dark styling. ══════════════════════════════════════════════════ */ #payment-modal, #cs-backdrop { background-color: unset !important; /* block theme override */ color: unset !important; /* block theme override */ } /* Restore the actual dark overlay colors explicitly */ #payment-modal { background: rgba(0,0,0,0.82) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } #cs-backdrop { background: rgba(0,0,0,0.88) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } /* Payment modal inner card: always white with dark text */ #payment-modal > div { background: #ffffff !important; color: #141210 !important; } #payment-modal > div * { /* do NOT blanket override here — let inline styles win */ } /* Header inside modal: always dark */ #payment-modal [style*="background:linear-gradient(135deg,#0C0A08"] { background: linear-gradient(135deg,#0C0A08,#141210) !important; color: #ffffff !important; } /* comingSoon inner box: always dark */ #cs-backdrop > div { background: linear-gradient(135deg,#141210 0%,#141210 100%) !important; color: #C8941A !important; } /* ── Fix 6a: Day mode — invisible light texts → black ── */ [data-theme="day"] .text-carbon-light, [data-theme="day"] .text-blue-300, [data-theme="day"] .text-blue-400, [data-theme="day"] .text-precision-light, [data-theme="day"] .text-sunset-light, [data-theme="day"] [style*="color:#6A6D7A"], [data-theme="day"] [style*="color: #6A6D7A"], [data-theme="day"] [style*="color:rgba(255,255,255,0.5)"], [data-theme="day"] [style*="color:rgba(255,255,255,.5)"], [data-theme="day"] [style*="color:rgba(240,246,255,0.7)"], [data-theme="day"] .font-mono.text-xs:not(.news-tab-btn):not([class*="badge"]) { color: #1A1614 !important; } [data-theme="day"] .section-label { color: #1A1614 !important; } /* ── Fix 6b: Night mode — news card text → metallic silver ── */ [data-theme="night"] .news-card p, [data-theme="night"] .news-card span:not(.news-badge):not([class*="cat-"]), [data-theme="night"] .news-card .text-carbon-light, [data-theme="night"] .news-card .font-normal { color: #C8C8C8 !important; } html[data-theme="night"] .news-card h3, html[data-theme="night"] .news-card .font-bold:not(.news-badge) { color: #0ABAB5 !important; -webkit-text-fill-color: #0ABAB5 !important; } /* Day mode news cards — dark text on white/light bg */ [data-theme="day"] .news-card p, [data-theme="day"] .news-card .font-normal, [data-theme="day"] .news-card .text-carbon-light { color: #1A1614 !important; } [data-theme="day"] .news-card h3 { color: #141210 !important; } /* ── Live news card body text ── */ /* Night mode: neon green for the live news description paragraph */ html[data-theme="night"] .news-live-desc { color: #0ABAB5 !important; -webkit-text-fill-color: #0ABAB5 !important; } /* Day mode: dark readable text */ html[data-theme="day"] .news-live-desc { color: #1A1614 !important; -webkit-text-fill-color: #1A1614 !important; } /* ── News badge text: always black regardless of theme ── */ .news-badge, .news-badge.cat-news, .news-badge.cat-news-dk, .news-badge.cat-activity, .news-badge.cat-policy, [data-theme="day"] .news-card .news-badge, [data-theme="night"] .news-card .news-badge { color: #000000 !important; font-weight: 700 !important; } /* ═══════════════════════════════════════════════════════ MATERIAL SYSTEM v2 — Clean · No outer glow/shadow Inner reflection + gradient depth expression Crystal/Metallic aesthetic ═══════════════════════════════════════════════════════ */ /* ── Remove ALL outer glows and colored outer shadows ── */ *, *::before, *::after { text-shadow: none; } /* ── Global card material: clean border + inner highlight ── */ .glass-morphism-card-blueprint, .crystal-card, [class*="glass-morphism"] { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.12), inset 1px 0 0 rgba(255,255,255,0.06) !important; background: linear-gradient( 160deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 40%, rgba(0,0,0,0.04) 100% ), rgba(10,20,40,0.55) !important; backdrop-filter: blur(12px) !important; border: 1px solid rgba(255,255,255,0.10) !important; } /* ── Neumorphic button states → flat metallic ── */ .crystal-btn-primary, .crystal-tab-blueprint:not(#nav-matrix):not(#nav-governance):not(#nav-blueprint):not(#nav-knowledge):not(#nav-news) { box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.20) !important; } .crystal-btn-primary:active, .crystal-tab-blueprint:active { box-shadow: inset 0 2px 4px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.10) !important; } /* ── Orange/gradient CTAs — inner highlight only ── */ .cta-join-btn, button[style*="background:linear-gradient(135deg,#F37021"], button[style*="background: linear-gradient(135deg, #F37021"], a[style*="background:linear-gradient(135deg,#F37021"] { box-shadow: inset 0 1px 0 rgba(255,200,100,0.40), inset 0 -1px 0 rgba(0,0,0,0.20) !important; } /* ── Gold/D4AF37 accent buttons ── */ [style*="background:linear-gradient(135deg,#D4AF37"], [style*="background: linear-gradient(135deg, #D4AF37"] { box-shadow: inset 0 1px 0 rgba(255,240,150,0.45), inset 0 -1px 0 rgba(80,50,0,0.25) !important; } /* ── Neon indicator dot (PWR ON) — keep minimal ── */ .inline-block[style*="box-shadow:0 0 6px #0ABAB5"], .inline-block[style*="box-shadow: 0 0 6px #0ABAB5"] { box-shadow: none !important; } /* ── Knowledge hub section — clean card border ── */ #knowledge-directory .glass-morphism-card-blueprint { box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } /* ── Matrix node cards — metallic gradient + inner highlight ── */ .matrix-card, #matrix-grid > div, [id*="node-"] { box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.10) !important; background: linear-gradient( 150deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 50%, rgba(0,0,0,0.03) 100% ), rgba(8,18,36,0.70) !important; } /* ── Nav bar — clean, no glow ── */ nav, header[class*="nav"], [class*="navbar"], #main-nav { z-index: 9000 !important; box-shadow: none !important; } /* ── Remove glow on news tab active state ── */ .news-tab-btn.active, .news-tab-btn[aria-selected="true"] { box-shadow: inset 0 1px 0 rgba(255,255,255,0.30) !important; } /* ── Remove neon PWR glow ── */ #vz-counter-mon, .status-badge, .status-active { box-shadow: none !important; text-shadow: none; } /* ── Governance stage cards — flat metallic ── */ .gov-stage-card, [id*="stage-"], [class*="stage-card"] { box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.12) !important; } /* ── Lang switcher — no outer glow ── */ .lang-btn, #lang-btn { box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } /* ── Section container shadow — clean, no colored glow ── */ section.relative, section[style*="box-shadow"] { box-shadow: none !important; } /* ── Play button — metallic ── */ .vz-play-btn { box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.25) !important; } /* ── Knowledge hub section container ── */ #knowledge-directory { box-shadow: none !important; } /* ── Blueprint/pilot cards ── */ [class*="blueprint-card"], [class*="pilot-card"] { box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.08) !important; } /* ═══════════════════════════════════════════════════════ COMPREHENSIVE VISIBILITY FIX Day mode: light text → dark | Night mode: dark text → silver Rule: if bg is light → text dark. If bg is dark → text light. Fixed dark sections always use light text regardless of theme. ═══════════════════════════════════════════════════════ */ /* ── DAY MODE: onboard section (bg-white) ── */ [data-theme="day"] #onboard .section-label, [data-theme="day"] #onboard .text-precision-light, [data-theme="day"] #onboard .text-carbon-light, [data-theme="day"] #onboard .text-blue-300, [data-theme="day"] #onboard .text-blue-400, [data-theme="day"] #onboard .text-blue-200, [data-theme="day"] #onboard label, [data-theme="day"] #onboard p, [data-theme="day"] #onboard h2, [data-theme="day"] #onboard h3 { color: #1A1614 !important; } /* ── DAY MODE: role buttons — text-blue-200 invisible on white ── */ [data-theme="day"] .main-role-btn, [data-theme="day"] .main-role-btn span, [data-theme="day"] .role-btn, [data-theme="day"] .role-btn span { color: #141210 !important; border-color: rgba(10,20,40,0.25) !important; } [data-theme="day"] .main-role-btn.selected, [data-theme="day"] .role-btn.selected, [data-theme="day"] .main-role-btn[aria-pressed="true"], [data-theme="day"] .role-btn[aria-pressed="true"] { color: #fff !important; background: #141210 !important; border-color: #141210 !important; } /* ── DAY MODE: section-label everywhere on light bg ── */ [data-theme="day"] .section-label { color: #2A3550 !important; } /* ── DAY MODE: eng-card (form card) texts ── */ [data-theme="day"] .eng-card .text-blue-300, [data-theme="day"] .eng-card label, [data-theme="day"] .eng-card .font-mono, [data-theme="day"] .eng-card p { color: #1A1614 !important; } /* ── DAY MODE: blueprint section ── */ [data-theme="day"] #blueprint .text-carbon-light, [data-theme="day"] #blueprint .text-precision-light, [data-theme="day"] #blueprint p { color: #2A3550 !important; } /* ── DAY MODE: global fallback for light text on light bg ── */ [data-theme="day"] .text-blue-200 { color: #1A3060 !important; } [data-theme="day"] .text-blue-300 { color: #1A3060 !important; } [data-theme="day"] .text-blue-400 { color: #1A3060 !important; } [data-theme="day"] .text-precision-light { color: #2A3550 !important; } [data-theme="day"] .text-carbon-light { color: #2A3550 !important; } [data-theme="day"] .text-sunset-light { color: #C04000 !important; } /* ── FIXED DARK SECTIONS — always light text, day OR night ── */ /* These sections have hardcoded dark gradient backgrounds */ #knowledge-directory, #knowledge-directory * { /* force light text unless overridden by badge/button */ } #knowledge-directory h2, #knowledge-directory h4 { color: #F0F6FF !important; } #knowledge-directory .mb-12 p, #knowledge-directory > div > p { color: rgba(200,200,200,0.9) !important; } #knowledge-directory .glass-morphism-card-blueprint p { color: #C8C8C8 !important; } #knowledge-directory .glass-morphism-card-blueprint h4 { color: #F0F6FF !important; } /* font-mono sub-labels in cards */ #knowledge-directory .font-mono { color: rgba(10,186,181,0.9) !important; } /* ── Night mode: card body text → metallic silver ── */ [data-theme="night"] .eng-card p, [data-theme="night"] .eng-card .text-carbon-light, [data-theme="night"] .eng-card label { color: #C8C8C8 !important; } /* ── Night mode: main-role-btn needs visible text ── */ [data-theme="night"] .main-role-btn, [data-theme="night"] .main-role-btn span { color: #E0E8FF !important; } [data-theme="night"] .main-role-btn.selected, [data-theme="night"] .main-role-btn[style*="background"] { color: #fff !important; } /* ── Day mode: KPI stats section ── */ [data-theme="day"] #kpi-section .text-carbon-light, [data-theme="day"] [id*="kpi"] label, [data-theme="day"] [id*="kpi"] div { color: #1A1614 !important; } /* ── Onboard form: "ONBOARD :: FORM-002" HUD label ── */ [data-theme="day"] #onboard .section-label[class*="text-precision"] { color: #2A3550 !important; } /* ── Day mode: news section headings/labels ── */ [data-theme="day"] #news .section-label, [data-theme="day"] #news .text-carbon-light { color: #1A1614 !important; } /* ════ FINAL COMPREHENSIVE CSS FIX ════ */ /* ── Knowledge hub: card text wrap (no truncation) ── */ #knowledge-directory .glass-morphism-card-blueprint p, #knowledge-directory .glass-morphism-card-blueprint h4 { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: break-word !important; } #knowledge-directory .glass-morphism-card-blueprint a, #knowledge-directory .glass-morphism-card-blueprint button { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: break-word !important; height: auto !important; } /* ── Knowledge hub heading: always bright on dark bg ── */ #knowledge-directory h2 { color: #F0F6FF !important; font-weight: 900 !important; } #knowledge-directory .mb-12 p { color: rgba(210,215,225,0.9) !important; } #knowledge-directory .font-mono.text-xs { color: #0ABAB5 !important; } /* ── Matrix subtitle night mode visibility ── */ [data-theme="night"] #matrix p, [data-theme="night"] #matrix .text-carbon-light, [data-theme="night"] #matrix-grid p { color: #C0C8D8 !important; } /* ── Blueprint section: description + KPI sublabels ── */ [data-theme="night"] #blueprint .text-carbon-light, [data-theme="night"] #blueprint p:not(.font-black) { color: #B8C4D4 !important; } [data-theme="night"] #blueprint .font-mono.text-\9px\, [data-theme="night"] #blueprint .font-mono.text-xs { color: #8A9AB8 !important; } /* ── Blueprint roadmap timeline items ── */ [data-theme="night"] .roadmap-item, [data-theme="night"] [class*="timeline"] { color: #C0C8D8 !important; } [data-theme="night"] .roadmap-item .text-gray-400, [data-theme="night"] .roadmap-item .opacity-60 { color: #8A9AB8 !important; opacity: 1 !important; } /* ── News section: right panel metric text ── */ [data-theme="night"] .news-meta-panel *, [data-theme="night"] #news-right-panel * { color: #C0C8D8 !important; } /* ── Video section header bar: day mode → dark text ── */ [data-theme="day"] #vz-section .font-mono, [data-theme="day"] #vz-section .text-\\#C0C0C0\, [data-theme="day"] [id*="vz"] .font-mono { color: #1A1614 !important; } /* ── Section label visibility: night mode ── */ [data-theme="night"] .section-label { color: #7DD3DA !important; } [data-theme="night"] .news-live-badge { color: #7DD3DA !important; } [data-theme="day"] .section-label { color: #0ABAB5 !important; } /* ── Onboard section form card: ensure ALL text dark in day mode ── */ [data-theme="day"] #onboard * { color: #1A1614 !important; } /* cta-primary always black — gold button needs dark text */ .cta-primary, .cta-primary * { color: #1A0800 !important; -webkit-text-fill-color: #1A0800 !important; } [data-theme="day"] #onboard .news-badge, [data-theme="day"] #onboard [class*="badge"] { color: #fff !important; } /* ── Footer: both modes ── */ /* Note: #site-footer has DARK background — exclude it from the light-text rule */ [data-theme="day"] footer:not(#site-footer) *, [data-theme="day"] [id="footer"] * { color: #1A1614 !important; } [data-theme="night"] footer *, [data-theme="night"] [id="footer"] * { color: #B0BAC8 !important; } /* ── #site-footer: always dark background, always light text ── */ #site-footer { background: linear-gradient(180deg,#0C0A08 0%,#0C0A08 100%) !important; } /* ════ FOOTER THEMED VISIBILITY FIX ════ */ /* Footer always has bg-white — ensure text is dark in day, adapt in night */ [data-theme="day"] footer .footer-platform-name { color: #141210 !important; } [data-theme="day"] footer .footer-mono-text { color: #3A4A6A !important; } [data-theme="day"] footer .footer-build-id { color: #20639B !important; } [data-theme="day"] footer a#footer-privacy, [data-theme="day"] footer a#footer-terms, [data-theme="day"] footer a#footer-contact { color: #20639B !important; } [data-theme="day"] footer a#footer-privacy:hover, [data-theme="day"] footer a#footer-terms:hover, [data-theme="day"] footer a#footer-contact:hover { color: #141210 !important; } [data-theme="night"] footer { background: #0C0A08 !important; border-color: #0ABAB5 !important; } [data-theme="night"] footer .footer-platform-name { color: #F0F6FF !important; } [data-theme="night"] footer .footer-mono-text { color: #8899BB !important; } [data-theme="night"] footer .footer-build-id { color: #4DB8B5 !important; } [data-theme="night"] footer a#footer-privacy, [data-theme="night"] footer a#footer-terms, [data-theme="night"] footer a#footer-contact { color: #C0D0E8 !important; } [data-theme="night"] footer a:hover { color: #F0F6FF !important; } /* ════ USER DESIGN UPDATE — 2026-06-02 ════ */ /* ─── Nav tabs: night mode Governance/Blueprint/KnowledgeHub/News → BLACK ─── */ /* (inline style removed from HTML, now CSS controls these 4 tabs) */ [data-theme="night"] #nav-governance, [data-theme="night"] #nav-blueprint, [data-theme="night"] #nav-knowledge, [data-theme="night"] #nav-news { color: #0A0A0A !important; -webkit-text-fill-color: #0A0A0A !important; /* Brighter white-silver pill so black text is readable in night mode */ background: rgba(240,246,255,0.82) padding-box, linear-gradient(135deg, #1A0C00 0%, #8A5008 8%, #C8940A 16%, #C8941A 22%, #F5E6B2 30%, #D4AF37 38%, #D4AF37 46%, #C8940A 55%, #8A5008 64%, #4A2800 72%, #C8940A 82%, #F5E6B2 90%, #2C1600 100%) border-box !important; } [data-theme="night"] #nav-governance:hover, [data-theme="night"] #nav-blueprint:hover, [data-theme="night"] #nav-knowledge:hover, [data-theme="night"] #nav-news:hover { color: #000000 !important; -webkit-text-fill-color: #000000 !important; background: rgba(255,255,255,0.92) padding-box, linear-gradient(135deg, #1A0C00 0%, #C8940A 20%, #F5E6B2 40%, #D4AF37 60%, #C8940A 80%, #2C1600 100%) border-box !important; } /* ─── Knowledge Hub section: Tiffany glass in day mode ─── */ [data-theme="day"] #knowledge-directory { background: linear-gradient(145deg, rgba(10,186,181,0.10) 0%, rgba(129,216,208,0.14) 35%, rgba(0,165,160,0.09) 65%, rgba(10,186,181,0.12) 100% ) !important; backdrop-filter: blur(18px) saturate(1.5) !important; -webkit-backdrop-filter: blur(18px) saturate(1.5) !important; border: 1.5px solid rgba(10,186,181,0.32) !important; box-shadow: inset 0 1px 0 rgba(200,246,244,0.50), inset 0 -1px 0 rgba(0,140,140,0.12) !important; } /* KD inner cards: Tiffany frosted */ [data-theme="day"] #knowledge-directory .glass-morphism-card-blueprint { background: linear-gradient(145deg, rgba(255,255,255,0.55) 0%, rgba(200,242,240,0.35) 50%, rgba(165,232,228,0.25) 100% ) !important; border: 1px solid rgba(10,186,181,0.28) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), inset 0 -1px 0 rgba(10,186,181,0.08) !important; backdrop-filter: blur(8px) !important; } /* KD texts in day: darker silver metallic */ [data-theme="day"] #knowledge-directory h2 { color: #1A3A5C !important; font-weight: 900 !important; } [data-theme="day"] #knowledge-directory h4 { color: #2A4A6A !important; } [data-theme="day"] #knowledge-directory p, [data-theme="day"] #knowledge-directory .glass-morphism-card-blueprint p { color: #546E7A !important; } [data-theme="day"] #knowledge-directory .font-mono:not([class*="btn"]) { color: #0ABAB5 !important; } [data-theme="day"] #knowledge-directory .mb-12 p, [data-theme="day"] #knowledge-directory > div > p { color: #5A6E80 !important; } /* ─── Pilot Blueprint section: white glass (not flat white) ─── */ [data-theme="day"] #blueprint { background: linear-gradient(145deg, rgba(255,255,255,0.88) 0%, rgba(240,248,255,0.92) 35%, rgba(230,243,250,0.85) 65%, rgba(245,252,255,0.90) 100% ) !important; backdrop-filter: blur(24px) saturate(1.6) !important; -webkit-backdrop-filter: blur(24px) saturate(1.6) !important; border-top: 1px solid rgba(255,255,255,0.80) !important; border-bottom: 1px solid rgba(10,186,181,0.12) !important; box-shadow: inset 0 2px 0 rgba(255,255,255,0.95), inset 0 -2px 0 rgba(200,218,230,0.25), 0 0 60px rgba(10,186,181,0.04) !important; } /* ─── Matrix layer labels: light metallic silver in day mode ─── */ /* Matrix section always has dark background, so these need to be lighter */ [data-theme="day"] #matrix p[data-i18n="matrix.layer1"], [data-theme="day"] #matrix p[data-i18n="matrix.layer2"], [data-theme="day"] #matrix p[data-i18n="matrix.layer3"] { color: #A8B8C8 !important; opacity: 1 !important; } /* Also target by inline style */ [data-theme="day"] #matrix [style*="color:#6A6D7A"], [data-theme="day"] #matrix .text-sunset-light { color: #A8B8C8 !important; opacity: 1 !important; } /* ─── KD section day mode: dark silver/gray metallic text (maximum specificity) ─── */ /* Overrides all #knowledge-directory h2 { color:#F0F6FF } earlier rules */ html[data-theme="day"] #knowledge-directory h2, html[data-theme="day"] #knowledge-directory h2.text-white, html[data-theme="day"] #knowledge-directory .text-white { color: #2A3A4C !important; -webkit-text-fill-color: #2A3A4C !important; } html[data-theme="day"] #knowledge-directory h4, html[data-theme="day"] #knowledge-directory h4.text-white { color: #3A4E62 !important; -webkit-text-fill-color: #3A4E62 !important; } html[data-theme="day"] #knowledge-directory p, html[data-theme="day"] #knowledge-directory .glass-morphism-card-blueprint p, html[data-theme="day"] #knowledge-directory .text-white\/60 { color: #4A6070 !important; } html[data-theme="day"] #knowledge-directory [class*="text-white"] { color: #3A4E62 !important; } html[data-theme="day"] #knowledge-directory .mb-12 p, html[data-theme="day"] #knowledge-directory > div > p { color: #4A5E70 !important; } /* svg icons: keep tiffany accent color */ html[data-theme="day"] #knowledge-directory svg.text-\\#0ABAB5\ { color: #0ABAB5 !important; } /* ─── KD section label "// ASIA PACIFIC ..." — dark in day mode ─── */ /* #0ABAB5 teal on teal glass bg = invisible. Override to dark silver. */ html[data-theme="day"] #knowledge-directory .font-mono.text-xs, html[data-theme="day"] #knowledge-directory .font-mono.text-xs.text-\\#0ABAB5\ { color: #2E4055 !important; -webkit-text-fill-color: #2E4055 !important; } /* Keep card inner font-mono labels slightly different (teal accent ok on frosted card) */ html[data-theme="day"] #knowledge-directory .glass-morphism-card-blueprint .font-mono { color: #0A8A88 !important; } /* ════ VIDEO PLAYER CONTROLS REDESIGN ════ */ /* ── Control bar: dark metallic ── */ #vz-control-bar { background: linear-gradient(180deg, #141210 0%, #141210 100%); border-top: 1px solid rgba(10,186,181,0.35); padding: 10px 20px; display: flex; align-items: center; gap: 12px; } /* ── Play/Pause button ── */ #vz-ctrl-play { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 9999px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; background: linear-gradient(135deg, #F37021 0%, #E25800 100%); color: #fff !important; border: none; cursor: pointer; transition: opacity 0.15s; flex-shrink: 0; } #vz-ctrl-play:hover { opacity: 0.88; } /* ── Prev / Next buttons ── */ #vz-ctrl-prev, #vz-ctrl-next { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 9999px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; background: rgba(255,255,255,0.08); color: #C8D8E8 !important; border: 1px solid rgba(10,186,181,0.30); cursor: pointer; transition: all 0.15s; flex-shrink: 0; } #vz-ctrl-prev:hover, #vz-ctrl-next:hover { background: rgba(10,186,181,0.18); color: #fff !important; border-color: rgba(10,186,181,0.65); } #vz-ctrl-prev:disabled, #vz-ctrl-next:disabled { opacity: 0.30; cursor: not-allowed; } /* ── Counter ── */ #vz-ctrl-counter { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 900; color: #C8941A !important; min-width: 52px; text-align: center; flex-shrink: 0; } /* ── Mute button ── */ #vz-ctrl-mute { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 9999px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; background: rgba(255,255,255,0.06); color: #C8D8E8 !important; border: 1px solid rgba(255,255,255,0.15); cursor: pointer; transition: all 0.15s; flex-shrink: 0; margin-left: auto; } #vz-ctrl-mute:hover { background: rgba(200,148,26,0.20); color: #C8941A !important; border-color: rgba(200,148,26,0.50); } #vz-ctrl-mute.is-muted { color: #F97316 !important; border-color: rgba(249,115,22,0.40); background: rgba(249,115,22,0.10); } /* ── Chapter strip ── */ #vz-chapter-strip { display: flex; gap: 6px; padding: 10px 20px 12px; background: #0C0A08; border-top: 1px solid rgba(255,255,255,0.05); overflow-x: auto; scrollbar-width: none; } #vz-chapter-strip::-webkit-scrollbar { display: none; } .vz-ch-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); cursor: pointer; transition: all 0.18s; flex: 1; min-width: 120px; text-align: left; } .vz-ch-btn:hover { background: rgba(10,186,181,0.12); border-color: rgba(10,186,181,0.40); } .vz-ch-btn.active { background: rgba(10,186,181,0.16); border-color: #0ABAB5; box-shadow: inset 0 1px 0 rgba(200,246,244,0.25); } .vz-ch-num { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; color: rgba(10,186,181,0.65); letter-spacing: 0.12em; text-transform: uppercase; } .vz-ch-btn.active .vz-ch-num { color: #0ABAB5; } .vz-ch-title { font-family: 'Noto Sans TC', sans-serif; font-size: 11px; font-weight: 700; color: rgba(200,220,240,0.60); white-space: nowrap; } .vz-ch-btn.active .vz-ch-title { color: #F0F6FF; } .vz-ch-prog { width: 100%; height: 2px; border-radius: 1px; background: rgba(255,255,255,0.08); margin-top: 4px; overflow: hidden; } .vz-ch-prog-bar { height: 100%; background: #0ABAB5; border-radius: 1px; transition: width 0.4s linear; width: 0%; } .vz-ch-btn.active .vz-ch-prog-bar { background: #F37021; } /* ── vz-dot: keep small dots but make active more obvious ── */ .vz-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.25); cursor: pointer; transition: all 0.2s; border: 1px solid rgba(255,255,255,0.20); } .vz-dot.active { background: #0ABAB5; border-color: #0ABAB5; width: 24px; border-radius: 4px; box-shadow: 0 0 6px rgba(10,186,181,0.50); } /* ════════════════════════════════════════════════════════════ iMAC GLASS BEZEL SYSTEM Outer frame → polished Space Gray aluminum Inner screen → deep glossy black glass + specular rim ════════════════════════════════════════════════════════════ */ /* ── Outer monitor chrome: Space Gray aluminum ── */ #video-anchor.metallic-hardware-monitor { /* Brushed-aluminium depth gradient */ background: /* Top-surface gloss sweep */ linear-gradient(180deg, rgba(200,210,225,0.18) 0%, rgba(160,168,182,0.06) 8%, transparent 25% ), /* Main aluminum body */ linear-gradient(175deg, #252118 0%, #1A1614 18%, #141210 50%, #1A1614 80%, #252118 100% ) !important; border: none !important; border-radius: 28px !important; padding: 22px !important; position: relative; overflow: visible !important; /* Multi-layer lift shadow + surface specular */ box-shadow: /* top-rim bright specular */ 0 -1px 0 rgba(255,255,255,0.22), /* thin ring of the bezel edge */ 0 0 0 1px rgba(255,255,255,0.08), 0 0 0 2px rgba(0,0,0,0.60), /* deep lift */ 0 36px 90px rgba(0,0,0,0.60), 0 12px 32px rgba(0,0,0,0.40), 0 4px 10px rgba(0,0,0,0.25), /* inner top glass highlight */ inset 0 1px 0 rgba(255,255,255,0.30), inset 0 2px 10px rgba(255,255,255,0.06), /* inner bottom shadow depth */ inset 0 -3px 8px rgba(0,0,0,0.50) !important; } /* Top-rim light streak (simulates studio light catching the aluminum edge) */ #video-anchor.metallic-hardware-monitor::before { content: ''; position: absolute; top: 0; left: 40px; right: 40px; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 15%, rgba(255,255,255,0.80) 50%, rgba(255,255,255,0.45) 85%, transparent 100% ); border-radius: 1px; z-index: 3; } /* Bottom Apple chin mark */ #video-anchor.metallic-hardware-monitor::after { content: ''; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 32%; height: 2px; border-radius: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10) 30%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.10) 70%, transparent ); z-index: 3; } /* ── Inner screen bezel: deep glossy black glass ── */ #vz-main-player-region { /* Override inline border */ border: 2.5px solid transparent !important; /* Glass gradient body + iridescent rim */ background: linear-gradient(145deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.02) 25%, rgba(0,0,0,0.10) 60%, rgba(0,0,0,0.25) 100% ) padding-box, linear-gradient(145deg, rgba(255,255,255,0.55) 0%, rgba(200,215,235,0.35) 20%, rgba(100,115,140,0.20) 45%, rgba(15,20,30,0.70) 70%, rgba(255,255,255,0.18) 100% ) border-box !important; border-radius: 20px !important; overflow: hidden !important; /* Deep inset glass shadow */ box-shadow: /* outer glow rim */ 0 0 0 1px rgba(255,255,255,0.05), /* lift shadow */ 0 8px 28px rgba(0,0,0,0.50), /* glass inset depth */ inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 3px 16px rgba(0,0,0,0.65), inset 0 -1px 5px rgba(0,0,0,0.30) !important; /* Glass top-reflection line inside screen */ position: relative !important; } /* Inner glass top reflection streak */ #vz-main-player-region::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 60px; background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, transparent 100% ); border-radius: 20px 20px 0 0; z-index: 30; pointer-events: none; } /* ── Day mode: slight warmth on aluminum (lighter environment) ── */ html[data-theme="day"] #video-anchor.metallic-hardware-monitor { box-shadow: 0 -1px 0 rgba(255,255,255,0.30), 0 0 0 1px rgba(255,255,255,0.10), 0 0 0 2px rgba(0,0,0,0.30), 0 28px 70px rgba(0,0,0,0.40), 0 10px 28px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 2px 10px rgba(255,255,255,0.08), inset 0 -2px 6px rgba(0,0,0,0.30) !important; } /* ── Night mode: add subtle ambient blue rim ── */ html[data-theme="night"] #video-anchor.metallic-hardware-monitor { box-shadow: 0 -1px 0 rgba(255,255,255,0.20), 0 0 0 1px rgba(10,186,181,0.12), 0 0 0 2px rgba(0,0,0,0.80), 0 36px 90px rgba(0,0,0,0.75), 0 12px 36px rgba(0,0,0,0.55), 0 0 60px rgba(10,186,181,0.06), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 2px 10px rgba(255,255,255,0.04), inset 0 -3px 8px rgba(0,0,0,0.60) !important; } /* ════ iMAC CHIN — controls panel ════ */ #vz-chin { margin-top: 10px; border-radius: 12px; overflow: hidden; } /* Control row */ #vz-control-bar { background: linear-gradient(180deg, rgba(60,68,80,0.95) 0%, rgba(38,44,54,0.98) 100% ); border-bottom: 1px solid rgba(255,255,255,0.05); padding: 9px 16px; display: flex; align-items: center; gap: 10px; } .vz-chin-divider { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent); } /* Play button: orange metallic */ #vz-ctrl-play { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 9999px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; background: linear-gradient(135deg, #F37021 0%, #D45800 100%); color: #fff !important; border: none; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,200,100,0.35), inset 0 -1px 0 rgba(0,0,0,0.25); flex-shrink: 0; transition: opacity 0.15s; } #vz-ctrl-play:hover { opacity: 0.85; } /* Prev/Next: metallic silver outline */ #vz-ctrl-prev, #vz-ctrl-next { display: inline-flex; align-items: center; gap: 5px; padding: 5px 13px; border-radius: 9999px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; background: linear-gradient(145deg, rgba(200,210,225,0.14) 0%, rgba(160,175,195,0.08) 100% ); color: #B8C8D8 !important; border: 1px solid rgba(180,200,225,0.25); cursor: pointer; flex-shrink: 0; transition: all 0.15s; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); } #vz-ctrl-prev:hover, #vz-ctrl-next:hover { background: rgba(10,186,181,0.15); color: #F0F6FF !important; border-color: rgba(10,186,181,0.55); } #vz-ctrl-prev:disabled, #vz-ctrl-next:disabled { opacity: 0.25; cursor: not-allowed; } /* Counter: gold */ #vz-ctrl-counter { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 900; color: #C8941A !important; min-width: 50px; text-align: center; flex-shrink: 0; } /* Mute: silver outline, is-muted = orange tint */ #vz-ctrl-mute { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 9999px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; background: rgba(255,255,255,0.05); color: #B8C8D8 !important; border: 1px solid rgba(180,200,225,0.20); cursor: pointer; flex-shrink: 0; transition: all 0.15s; } #vz-ctrl-mute.is-muted { color: #F97316 !important; border-color: rgba(249,115,22,0.40); background: rgba(249,115,22,0.08); } #vz-ctrl-mute:hover { background: rgba(200,148,26,0.15); color: #C8941A !important; border-color: rgba(200,148,26,0.45); } /* Chapter strip */ #vz-chapter-strip { display: flex; gap: 0; background: linear-gradient(180deg, #1A1614 0%, #141210 100%); padding: 8px 12px; border-top: 1px solid rgba(255,255,255,0.04); overflow-x: auto; scrollbar-width: none; } #vz-chapter-strip::-webkit-scrollbar { display: none; } .vz-ch-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 7px 12px; border-radius: 8px; border: 1px solid transparent; background: transparent; cursor: pointer; transition: all 0.18s; flex: 1; min-width: 100px; text-align: left; } .vz-ch-btn:hover { background: rgba(10,186,181,0.10); border-color: rgba(10,186,181,0.30); } .vz-ch-btn.active { background: rgba(10,186,181,0.14); border-color: rgba(10,186,181,0.65); box-shadow: inset 0 1px 0 rgba(200,246,244,0.20); } .vz-ch-num { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; color: rgba(10,186,181,0.55); letter-spacing: 0.12em; text-transform: uppercase; } .vz-ch-btn.active .vz-ch-num { color: #0ABAB5; } .vz-ch-title { font-family: 'Noto Sans TC', sans-serif; font-size: 11px; font-weight: 700; color: rgba(190,210,230,0.55); white-space: nowrap; } .vz-ch-btn.active .vz-ch-title { color: #E8F2FF; } .vz-ch-prog { width: 100%; height: 2px; border-radius: 1px; background: rgba(255,255,255,0.06); margin-top: 4px; } .vz-ch-prog-bar { height: 100%; background: rgba(10,186,181,0.5); border-radius: 1px; transition: width 0.4s linear; width: 0%; } .vz-ch-btn.active .vz-ch-prog-bar { background: #F37021; } /* Top info bar: "媒體區 · TGAI 簡介" adaptive label */ .vz-info-label { color: #4A5568 !important; } html[data-theme="night"] .vz-info-label { color: rgba(190,210,230,0.70) !important; } /* dot: pill shape for active */ .vz-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(100,120,140,0.35); cursor: pointer; transition: all 0.2s; border: 1px solid rgba(150,175,200,0.20); } .vz-dot.active { background: #0ABAB5; border-color: #0ABAB5; width: 22px; border-radius: 3.5px; } /* ======================================================================== BLOCK 10 / 12 — original position ~line 6010 ======================================================================== */ /* ── 所有選擇器限定在 #partner-teaser 內，零外洩 ── */ #partner-teaser { position:relative; padding:72px 24px 80px; background:linear-gradient(180deg,#0C0A08 0%,#0C0A08 50%,#0C0A08 100%); overflow:hidden; } #partner-teaser::before { content:''; position:absolute; inset:0; pointer-events:none; background: radial-gradient(ellipse 60% 50% at 50% 0%,rgba(200,148,26,.07) 0%,transparent 70%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Ccircle cx='1' cy='1' r='.4' fill='rgba(200,148,26,.06)'/%3E%3C/svg%3E"); } #partner-teaser .pt-inner { position:relative; max-width:920px; margin:0 auto; text-align:center; } #partner-teaser .pt-badge { display:inline-flex; align-items:center; gap:7px; padding:5px 14px; border-radius:100px; margin-bottom:24px; border:1px solid rgba(10,186,181,.28); background:rgba(10,186,181,.05); font-family:"JetBrains Mono",monospace; font-size:.6rem; letter-spacing:.14em; color:#0ABAB5; } #partner-teaser .pt-badge .pt-dot { width:7px; height:7px; border-radius:50%; background:#0ABAB5; animation:pt-pulse 2s infinite; } @keyframes pt-pulse {0%,100%{opacity:1}50%{opacity:.3}} #partner-teaser h2 { font-size:clamp(1.7rem,3.5vw,2.6rem); font-weight:900; color:#FFD966; margin-bottom:10px; line-height:1.15; letter-spacing:-.02em; display:flex; flex-wrap:wrap; justify-content:center; gap:0 .4em; } #partner-teaser h2 span { display:inline; } #partner-teaser .pt-gold { background:linear-gradient(135deg,#C8941A,#FFD966 45%,#C8941A); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } #partner-teaser .pt-sub { font-family:"JetBrains Mono",monospace; font-size:.8rem; color:rgba(200,148,26,.8); letter-spacing:.08em; margin-bottom:32px; } #partner-teaser .pt-stats { display:flex; flex-wrap:wrap; justify-content:center; gap:12px 32px; margin-bottom:32px; } #partner-teaser .pt-stat { text-align:center; } #partner-teaser .pt-stat .val { font-family:"JetBrains Mono",monospace; font-size:1.9rem; font-weight:700; color:#FFD966; line-height:1; } #partner-teaser .pt-stat .lbl { font-size:.72rem; color:rgba(200,218,240,.6); margin-top:4px; } #partner-teaser .pt-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin-bottom:36px; } #partner-teaser .pt-chip { padding:3px 11px; border-radius:100px; border:1px solid rgba(200,148,26,.25); font-family:"JetBrains Mono",monospace; font-size:.58rem; color:rgba(255,215,100,.75); background:rgba(200,148,26,.06); letter-spacing:.06em; } #partner-teaser .pt-cta { display:inline-flex; align-items:center; gap:9px; padding:13px 32px; border-radius:100px; text-decoration:none; background:linear-gradient(135deg,#6A3800,#C8941A 30%,#FFD966 60%,#C8941A 80%,#6A3800); color:#0C0A08 !important; font-weight:900; font-size:.95rem; font-family:"Noto Sans TC","Inter",sans-serif; box-shadow:0 0 36px rgba(200,148,26,.28); transition:transform .2s,box-shadow .2s; } #partner-teaser .pt-cta:hover { transform:translateY(-2px); box-shadow:0 0 56px rgba(200,148,26,.45); } #partner-teaser .pt-cta svg { width:16px; height:16px; fill:currentColor; } /* ======================================================================== BLOCK 11 / 12 — original position ~line 10504 ======================================================================== */ .pay-item-card:hover { border-color:#0ABAB5 !important; box-shadow:0 4px 20px rgba(10,186,181,0.15); transform:translateY(-1px); } .pay-method-btn.selected { border-color:#0ABAB5 !important; background:#f0fafa !important; } .pay-amount-btn.selected { background:linear-gradient(135deg,#0ABAB5,#0080A0) !important; color:#fff !important; border-color:#0ABAB5 !important; } /* ======================================================================== BLOCK 12 / 12 — original position ~line 10686 ======================================================================== */ .pay-btn-gold, .pay-btn-teal, .pay-btn-green { display: inline-flex !important; align-items: center !important; gap: 8px; padding: 12px 24px; border-radius: 999px; font-size: 15px; font-weight: 900 !important; cursor: pointer; letter-spacing: 0.04em; transition: background 0.2s, color 0.2s; -webkit-appearance: none; border: 2px solid transparent; white-space: nowrap; } /* Gold — 繳年度會費 */ .pay-btn-gold { background: linear-gradient(135deg, #1A0800, #3A1E00) !important; color: #C8941A !important; border-color: #C8941A !important; } .pay-btn-gold:hover, .pay-btn-gold:active { background: linear-gradient(135deg, #C8941A, #C8941A) !important; color: #1A0800 !important; } /* Teal — AI 課程 */ .pay-btn-teal { background: linear-gradient(135deg, #001A1A, #003A3A) !important; color: #0ABAB5 !important; border-color: #0ABAB5 !important; } .pay-btn-teal:hover, .pay-btn-teal:active { background: linear-gradient(135deg, #0ABAB5, #0080A0) !important; color: #fff !important; } /* Green — 捐款 */ .pay-btn-green { background: linear-gradient(135deg, #001A00, #003A00) !important; color: #39b54a !important; border-color: #39b54a !important; } .pay-btn-green:hover, .pay-btn-green:active { background: linear-gradient(135deg, #39b54a, #006600) !important; color: #fff !important; } /* Mobile: slightly smaller, hide English metadata note */ @media (max-width: 767px) { .pay-btn-gold, .pay-btn-teal, .pay-btn-green { font-size: 13px; padding: 10px 18px; } /* Hide English-only decorative/metadata text on mobile */ [data-i18n="form.note"] { display: none !important; } .font-mono[data-i18n], p[data-i18n="form.note"] { display: none !important; } } /* ── Night mode gov-step 01~05: ALL text → white ──────────────────────── Covers h2, h3, h4, p, span, div text inside governance stage cards. Keeps neon status badge colors intact. ────────────────────────────────────────────────────────────────────────── */ html[data-theme="night"] .gov-step h2, html[data-theme="night"] .gov-step h3, html[data-theme="night"] .gov-step h4, html[data-theme="night"] .gov-step > p, html[data-theme="night"] .gov-step .card-body, html[data-theme="night"] .gov-step .step-title, html[data-theme="night"] .gov-step .step-sub { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } html[data-theme="night"] .gov-step p { color: rgba(230, 240, 255, 0.90) !important; } /* Keep neon green for status badges */ html[data-theme="night"] .gov-step [style*="color:#0ABAB5"], html[data-theme="night"] .gov-step [style*="color: #0ABAB5"] { color: #0ABAB5 !important; -webkit-text-fill-color: #0ABAB5 !important; } /* Keep Tiffany blue for metric labels */ html[data-theme="night"] .gov-step [style*="color:#0ABAB5"], html[data-theme="night"] .gov-step [style*="color: #0ABAB5"] { color: #0ABAB5 !important; -webkit-text-fill-color: #0ABAB5 !important; } /* ── RSS News Section — locale-aware live news feed ──────────────────────── Independent of existing #news section. Skeleton pulse animation while fetching. ────────────────────────────────────────────────────────────────────────── */ #rss-news-section { padding: 4rem 2.5rem 5rem; /* left/right breathing space */ max-width: 1400px; margin-left: auto; margin-right: auto; box-sizing: border-box; transition: opacity 0.3s ease; } #rss-news-section .rss-section-label { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; color: #0ABAB5; text-transform: uppercase; margin-bottom: 0.5rem; } #rss-news-section h2.rss-heading { font-size: 1.6rem; font-weight: 900; color: #141210; margin-bottom: 0.4rem; } html[data-theme="night"] #rss-news-section h2.rss-heading { color: #F0F6FF !important; } #rss-news-section .rss-source-badge { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; background: rgba(10,186,181,0.12); color: #0ABAB5; border: 1px solid rgba(10,186,181,0.30); border-radius: 999px; padding: 2px 10px; display: inline-block; margin-left: 0.5rem; vertical-align: middle; } #rss-news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; margin-top: 2rem; /* fallback — overridden by RSS featured card layout below */ } /* RSS card */ .rss-card { background: rgba(255,255,255,0.06); border: 1.5px solid rgba(10,186,181,0.20); border-radius: 18px; padding: 1.25rem 1.25rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; transition: transform 0.2s ease, border-color 0.2s ease; text-decoration: none !important; } .rss-card:hover { transform: translateY(-3px); border-color: rgba(10,186,181,0.50); } html[data-theme="day"] .rss-card { background: rgba(255,255,255,0.92); border-color: rgba(10,186,181,0.25); box-shadow: 0 2px 16px rgba(10,186,181,0.06); } .rss-card .rss-meta { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: #0ABAB5; letter-spacing: 0.06em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; } .rss-card .rss-title { font-size: 0.92rem; font-weight: 800; line-height: 1.4; color: #F0F6FF; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } html[data-theme="day"] .rss-card .rss-title { color: #141210 !important; } .rss-card .rss-desc { font-size: 0.78rem; color: rgba(200,218,245,0.70); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; } html[data-theme="day"] .rss-card .rss-desc { color: #6B7280 !important; } .rss-card .rss-read-more { font-size: 0.72rem; font-weight: 700; color: #C8941A; letter-spacing: 0.04em; margin-top: auto; padding-top: 0.5rem; border-top: 1px solid rgba(200,148,26,0.15); } /* Skeleton loading */ .rss-skeleton { background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.06); border-radius: 18px; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; } .rss-skeleton .sk-line { border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.04) 100%); background-size: 200% 100%; animation: sk-pulse 1.4s ease-in-out infinite; } html[data-theme="day"] .rss-skeleton .sk-line { background: linear-gradient(90deg, #f0f4f8 0%, #e0e8f0 50%, #f0f4f8 100%); background-size: 200% 100%; animation: sk-pulse 1.4s ease-in-out infinite; } @keyframes sk-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .rss-skeleton .sk-line.sk-sm { height: 10px; width: 40%; } .rss-skeleton .sk-line.sk-md { height: 14px; width: 85%; } .rss-skeleton .sk-line.sk-md2 { height: 14px; width: 70%; } .rss-skeleton .sk-line.sk-lg { height: 12px; width: 95%; } .rss-skeleton .sk-line.sk-lg2 { height: 12px; width: 80%; } /* RSS error state */ .rss-error { text-align: center; padding: 2rem; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: rgba(200,218,245,0.40); letter-spacing: 0.06em; } html[data-theme="day"] .rss-error { color: #9CA3AF; } @media (max-width: 640px) { #rss-news-grid { grid-template-columns: 1fr; } } /* ── FIX #7: Night mode news-card-wrap text always light ──────── */ html[data-theme="night"] .news-card-wrap article h3, html[data-theme="night"] .news-card-wrap article h4, html[data-theme="night"] .news-card-wrap article p, html[data-theme="night"] .news-card-wrap article span:not(.news-badge):not([class*="cat-"]), html[data-theme="night"] .news-card-wrap article .news-date, html[data-theme="night"] .news-card-wrap article .text-navy, html[data-theme="night"] .news-card-wrap article .text-carbon, html[data-theme="night"] .news-card-wrap article .text-carbon-light, html[data-theme="night"] .news-card-wrap article [class*="text-"] { color: #E8F0FE !important; } html[data-theme="night"] .news-card-wrap article .news-badge { color: #fff !important; } html[data-theme="night"] .news-card-wrap article { background: #141210 !important; border-color: rgba(200,148,26,0.15) !important; } /* ── FIX #8: Green-circle area day mode readable ─────────────── */ html[data-theme="day"] .section-label, html[data-theme="day"] .news-live-badge { color: #141210 !important; } /* ── FIX #11: Right side overflow global ─────────────────────── */ html { overflow-x: hidden !important; max-width: 100vw; } body { overflow-x: hidden !important; max-width: 100vw; } /* ── FIX #3: WP modal — ensure visible and centered ──────────── */ #wp-modal-overlay { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; display: none; align-items: center !important; justify-content: center !important; z-index: 99999 !important; } #wp-modal-overlay.active { display: flex !important; } #wp-modal-box { position: relative !important; top: auto !important; left: auto !important; transform: none !important; max-width: 960px !important; width: 95vw !important; max-height: 90vh !important; margin: auto !important; background: #141210 !important; border-radius: 16px !important; overflow-y: auto !important; flex-shrink: 0 !important; } /* ── FIX #10: RSS section visibility in both modes ───────────── */ #rss-news-section { min-height: 200px; padding-left: 2.5rem; padding-right: 2.5rem; } .rss-skeleton { display: block !important; padding: 20px; } .rss-error { grid-column: 1/-1; padding: 24px; text-align: center; font-size: 13px; color: #C8941A; opacity: 0.8; } html[data-theme="night"] .rss-skeleton { color: #C0C8D8 !important; } html[data-theme="night"] .rss-error { color: #C8941A !important; } html[data-theme="day"] #rss-news-section h2, html[data-theme="day"] #rss-news-section .rss-heading { color: #141210 !important; } html[data-theme="day"] #rss-news-section { background: transparent !important; } /* ── FIX #9: vz chapter button size consistency ───────────────── */ .vz-ch-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11px !important; line-height: 1.3 !important; max-width: 80px; } /* ── FIX #1/#2: Ensure news card body shows i18n text correctly */ html[data-theme="day"] .news-card-wrap article h3 span, html[data-theme="day"] .news-card-wrap article p span { color: inherit; } /* ══════════════════════════════════════════════════════════════ COLOR CONTRAST FIXES — WCAG AA (4.5:1 normal text) Problematic: #C8941A (2.7:1 on white), #0ABAB5 (2.4:1 on white) Fix: darken ONLY for text elements in day mode ════════════════════════════════════════════════════════════════ */ /* Day mode: amber/teal text → darkened for WCAG AA compliance */ html[data-theme="day"] .news-readmore, html[data-theme="day"] a.news-readmore, html[data-theme="day"] .rss-read-more, html[data-theme="day"] .rss-card .rss-read-more { color: #8B6414 !important; /* darkened amber: 5.3:1 on white ✅ */ } html[data-theme="day"] .news-readmore.text-precision, html[data-theme="day"] .news-readmore[class*="text-precision"] { color: #076B69 !important; /* darkened teal: 6.3:1 on white ✅ */ } html[data-theme="day"] .news-readmore.text-green-600, html[data-theme="day"] .news-readmore[class*="text-green"] { color: #146F30 !important; /* darkened green: 5.5:1 on white ✅ */ } /* Day mode: .text-gold / .text-precision-light as text → darken */ html[data-theme="day"] .text-precision-light, html[data-theme="day"] .text-gold, html[data-theme="day"] .text-metallic-gold { color: #8B6414 !important; /* 5.3:1 on white ✅ */ } /* Night mode: amber/teal on dark bg is FINE (already 6.7/7.6:1) */ html[data-theme="night"] .text-gold, html[data-theme="night"] .text-metallic-gold, html[data-theme="night"] .text-precision-light { color: #C8941A !important; } /* Active news tab: white text on orange gradient → dark for contrast */ /* Orange gradient mid-point ~#f0a858 → white = 1.6:1 (FAIL) */ /* Fix: use dark text #1A0800 (same as cta-primary) */ html[data-theme="day"] .news-tab-btn.active, html[data-theme="day"] .news-tab-btn[aria-selected="true"] { color: #1A0800 !important; text-shadow: 0 1px 0 rgba(255,240,160,0.40) !important; } /* Badge: white text on colored badge bg → dark text for day mode */ html[data-theme="day"] .news-badge.cat-activity, html[data-theme="day"] .news-badge.cat-policy, html[data-theme="day"] .news-badge.cat-press, html[data-theme="day"] .news-badge.cat-news { color: #1A0800 !important; /* 7.1:1 on amber, very readable */ } /* Day mode: amber/teal border/decorative usage untouched (only text color is darkened, NOT backgrounds/borders) */ /* ══════════════════════════════════════════════════════════════ RSS FEATURED CARD (Card 1 — full-width hero highlight) ════════════════════════════════════════════════════════════════ */ #rss-news-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; min-height: 120px; } @media (min-width: 768px) { #rss-news-grid { grid-template-columns: repeat(3, 1fr); } } /* ── Featured card (idx=0) — original gold-accent design ── */ .rss-card.rss-featured { grid-column: 1 / -1; /* full width */ display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; padding: 1.5rem 2rem; min-height: 200px; border: 2px solid rgba(200,148,26,0.55) !important; background: linear-gradient(135deg, rgba(200,148,26,0.12) 0%, rgba(10,186,181,0.08) 50%, rgba(200,148,26,0.06) 100%) !important; position: relative; overflow: visible; } /* ════════════════════════════════════════════════════════════════ NEWS GRID — ORANGE CARD CONTROL .rss-editorial (div, nth-child(2)) gets orange from .rss-editorial rule. All news cards (nth-child(1) featured + nth-child(3+) small) → NO orange. ════════════════════════════════════════════════════════════════ */ /* Guarantee NO orange bleed onto normal news cards. EXCLUDE .rss-editorial so the Today's Highlight card stays orange. */ #rss-news-grid > a.rss-card:not(.rss-featured):not(.rss-editorial), html[data-theme="day"] #rss-news-grid > a.rss-card:not(.rss-featured):not(.rss-editorial), html[data-theme="night"] #rss-news-grid > a.rss-card:not(.rss-featured):not(.rss-editorial) { background: rgba(255,255,255,0.06) !important; border-color: rgba(200,148,26,0.28) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.18) !important; } html[data-theme="day"] #rss-news-grid > a.rss-card:not(.rss-featured):not(.rss-editorial) { background: rgba(255,255,255,0.76) !important; border-color: rgba(10,186,181,0.22) !important; } .rss-card.rss-featured::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #C8941A, #C8941A, #0ABAB5, #C8941A); background-size: 200% 100%; animation: rss-featured-shimmer 3s linear infinite; border-radius: 0; } /* editorial shimmer is in .rss-editorial::before */ @keyframes rss-featured-shimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } } @media (max-width: 639px) { .rss-card.rss-featured { grid-template-columns: 1fr; padding: 1.25rem; } } .rss-featured-badge { display: inline-flex; align-items: center; gap: 0.4rem; background: linear-gradient(135deg, #C8941A, #C8941A); color: #1A0800; font-size: 0.65rem; font-weight: 900; letter-spacing: 0.1em; padding: 0.25rem 0.75rem; border-radius: 9999px; margin-bottom: 0.75rem; grid-column: 1 / -1; } .rss-featured-icon { font-size: 0.7rem; } .rss-featured-meta { font-size: 0.7rem; opacity: 0.60; display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; letter-spacing: 0.04em; } .rss-featured-title { font-size: 1.15rem; font-weight: 900; line-height: 1.4; margin-bottom: 0.75rem; color: inherit; } .rss-featured-desc { font-size: 0.82rem; line-height: 1.65; opacity: 0.78; margin-bottom: 1rem; } .rss-featured-cta { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 700; color: #C8941A; letter-spacing: 0.06em; margin-top: auto; padding-top: 0.75rem; border-top: 1px solid rgba(200,148,26,0.20); } html[data-theme="day"] .rss-featured-cta { color: #8B6414; } /* ══════════════════════════════════════════════════════════════ RSS ANALYSIS CARD (Card 8 — Editorial Digest) ════════════════════════════════════════════════════════════════ */ #rss-analysis-container { margin-top: 3.5rem; /* breathing space between news grid and radar card */ padding: 0 0 2rem; } .rss-analysis-card { border-radius: 24px; overflow: hidden; border: 1.5px solid rgba(200,148,26,0.40); background: linear-gradient(145deg, rgba(8,14,28,0.95) 0%, rgba(4,8,20,0.98) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } html[data-theme="day"] .rss-analysis-card { background: linear-gradient(145deg, rgba(255,255,255,0.96) 0%, rgba(248,252,255,0.99) 100%); border-color: rgba(200,148,26,0.35); } /* Header */ .rss-analysis-hdr { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1.5rem; background: linear-gradient(90deg, rgba(200,148,26,0.20) 0%, rgba(10,186,181,0.10) 100%); border-bottom: 1px solid rgba(200,148,26,0.25); flex-wrap: wrap; /* allow sig card to wrap on narrow screens */ } /* Mobile: hide sig stamp card from header — too wide for small screens */ @media (max-width: 600px) { .rss-analysis-hdr { padding: 0.65rem 1rem; gap: 0.5rem; } .rss-analysis-hdr .rss-analysis-sig { display: none !important; } } .rss-analysis-hdr-left { display: flex; flex-direction: column; gap: 0.2rem; } .rss-analysis-tag { font-size: 0.7rem; font-weight: 900; letter-spacing: 0.12em; color: #C8941A; text-transform: uppercase; } html[data-theme="day"] .rss-analysis-tag { color: #8B6414; } .rss-analysis-edition { font-size: 0.72rem; opacity: 0.60; letter-spacing: 0.05em; } .rss-analysis-date { font-size: 0.68rem; font-family: 'JetBrains Mono', monospace; opacity: 0.55; } /* Body */ .rss-analysis-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; } .rss-analysis-theme { padding: 1rem 1.25rem; border-radius: 12px; border-left: 3px solid #C8941A; background: rgba(200,148,26,0.06); } html[data-theme="day"] .rss-analysis-theme { background: rgba(200,148,26,0.05); border-left-color: #8B6414; } .rss-analysis-theme-title { font-size: 0.85rem; font-weight: 900; letter-spacing: 0.03em; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; } .rss-analysis-num { font-size: 0.6rem; font-family: 'JetBrains Mono', monospace; background: rgba(200,148,26,0.25); color: #C8941A; padding: 0.1rem 0.45rem; border-radius: 4px; font-weight: 700; } html[data-theme="day"] .rss-analysis-num { background: rgba(139,100,20,0.15); color: #8B6414; } .rss-analysis-theme-body { font-size: 0.82rem; line-height: 1.75; opacity: 0.85; } /* Conclusion */ .rss-analysis-conclusion { padding: 1rem 1.25rem; border-radius: 12px; border: 1px solid rgba(10,186,181,0.25); background: rgba(10,186,181,0.05); } .rss-analysis-conclusion-label { font-size: 0.72rem; font-weight: 900; letter-spacing: 0.10em; color: #0ABAB5; margin-bottom: 0.5rem; } html[data-theme="day"] .rss-analysis-conclusion-label { color: #076B69; } .rss-analysis-conclusion-text { font-size: 0.85rem; line-height: 1.8; font-style: italic; opacity: 0.90; } /* Signature — standalone Hermès orange card */ .rss-analysis-sig { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; /* Orange piano lacquer card */ background: radial-gradient(ellipse at 22% 18%, rgba(255,255,255,0.30) 0%, transparent 52%), radial-gradient(ellipse at 80% 85%, rgba(0,0,0,0.30) 0%, transparent 48%), linear-gradient(148deg, #FF7E30 0%, #E85F0A 28%, #CB4500 58%, #882000 100%); border: 2px solid rgba(255,255,255,0.50) !important; border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 6px 20px rgba(120,30,0,0.30); } /* Force same in both themes */ html[data-theme="day"] .rss-analysis-sig, html[data-theme="night"] .rss-analysis-sig { background: radial-gradient(ellipse at 22% 18%, rgba(255,255,255,0.30) 0%, transparent 52%), radial-gradient(ellipse at 80% 85%, rgba(0,0,0,0.30) 0%, transparent 48%), linear-gradient(148deg, #FF7E30 0%, #E85F0A 28%, #CB4500 58%, #882000 100%) !important; border-color: rgba(255,255,255,0.50) !important; } /* avatar removed — text-only signature */ .rss-analysis-sig-avatar { display: none; } .rss-analysis-sig-info { flex: 1; } .rss-analysis-sig-name { font-size: 1.05rem; font-weight: 900; letter-spacing: 0.05em; /* Metallic gold (used outside orange card) */ background: linear-gradient(135deg, #B8860B 0%, #FFD700 35%, #DAA520 55%, #FFD700 75%, #B8860B 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } html[data-theme="day"] .rss-analysis-sig-name { background: linear-gradient(135deg, #7A5800 0%, #C8941A 40%, #E8A800 60%, #C8941A 80%, #7A5800 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Sig card (standalone orange) → white */ .rss-analysis-sig .rss-analysis-sig-name, html[data-theme="day"] .rss-analysis-sig .rss-analysis-sig-name { background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; -webkit-text-fill-color: rgba(255,255,255,0.98) !important; color: rgba(255,255,255,0.98) !important; font-size: 1.1rem; letter-spacing: 0.06em; } .rss-analysis-sig-title { font-size: 0.78rem; font-weight: 600; color: rgba(240,220,160,0.90); /* golden-cream, clearly readable */ margin-top: 0.15rem; } html[data-theme="day"] .rss-analysis-sig-title { color: rgba(40,25,0,0.82); } .rss-analysis-sig-org { font-size: 0.7rem; font-weight: 500; color: rgba(200,180,120,0.80); /* visible, not invisible */ margin-top: 0.12rem; font-family: 'JetBrains Mono', monospace; } html[data-theme="day"] .rss-analysis-sig-org { color: rgba(60,40,0,0.72); } /* Sig card (standalone orange) → white */ .rss-analysis-sig .rss-analysis-sig-title, html[data-theme="day"] .rss-analysis-sig .rss-analysis-sig-title { color: rgba(255,255,255,0.95) !important; -webkit-text-fill-color: rgba(255,255,255,0.95) !important; font-weight: 700; } .rss-analysis-sig .rss-analysis-sig-org, html[data-theme="day"] .rss-analysis-sig .rss-analysis-sig-org { color: rgba(255,255,255,0.82) !important; -webkit-text-fill-color: rgba(255,255,255,0.82) !important; } .rss-analysis-sig-stamp { /* ── Hexagonal Diamond-Facet Stamp ── */ position: relative; flex-shrink: 0; width: 82px; height: 72px; /* Flat-top hexagon */ clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); background: /* Top-left gem highlight */ linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.18) 30%, rgba(255,255,255,0.00) 55%), /* Bottom-right gem shadow */ linear-gradient(315deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.00) 45%), /* Inner facet mid-tone */ rgba(255,255,255,0.13); /* Glow outline following hex shape */ filter: drop-shadow(0 0 1.5px rgba(255,255,255,0.95)) drop-shadow(0 0 5px rgba(255,255,255,0.28)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; text-align: center; line-height: 1.35; transform: none; padding: 0 12px; } .rss-analysis-sig-stamp .stamp-brand { font-size: 0.60rem; font-weight: 900; letter-spacing: 0.25em; color: rgba(255,255,255,0.98) !important; -webkit-text-fill-color: rgba(255,255,255,0.98) !important; text-transform: uppercase; display: block; } .rss-analysis-sig-stamp .stamp-rule { width: 30px; height: 1px; background: rgba(255,255,255,0.65); display: block; margin: 3px auto; } .rss-analysis-sig-stamp .stamp-sub { font-size: 0.42rem; font-weight: 800; letter-spacing: 0.20em; color: rgba(255,255,255,0.88) !important; -webkit-text-fill-color: rgba(255,255,255,0.88) !important; text-transform: uppercase; display: block; } /* ── Partner teaser dot: ensure teal on both themes ── */ html[data-theme="day"] #partner-teaser .pt-badge .pt-dot { background: #0ABAB5 !important; } html[data-theme="night"] #partner-teaser .pt-badge .pt-dot { background: #0ABAB5 !important; } /* ── RSS news section visibility fix ── */ #rss-news-grid .rss-error { color: #C8941A !important; padding: 24px; text-align: center; font-weight: 700; } #rss-analysis-container { margin-top: 56px; /* consistent with main block — breathing room above radar */ } /* ── Day mode: nav tab text always dark for readability ── */ html[data-theme="day"] .crystal-tab-blueprint { color: #111111 !important; } html[data-theme="day"] #nav-whitepaper { color: #111111 !important; } /* ── RSS Analysis Card: Article Reference List ── */ .rss-analysis-refs { margin: 0.75rem 0 1.25rem; padding: 0.75rem 1rem; background: rgba(10,186,181,0.06); border-left: 3px solid rgba(10,186,181,0.45); border-radius: 0 10px 10px 0; } html[data-theme="day"] .rss-analysis-refs { background: rgba(10,186,181,0.08); border-left-color: #0ABAB5; } .rss-analysis-refs-label { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; color: #0ABAB5; text-transform: uppercase; margin-bottom: 0.5rem; } .rss-analysis-refs-list { margin: 0; padding-left: 1.1rem; list-style: decimal; } .rss-analysis-refs-list li { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.3rem; font-size: 11px; line-height: 1.5; } .rss-ref-src { flex-shrink: 0; font-weight: 700; color: #C8941A; font-size: 10px; white-space: nowrap; } .rss-ref-src em { font-style: normal; font-size: 9px; background: rgba(10,186,181,0.18); color: #0ABAB5; border-radius: 4px; padding: 1px 4px; margin-left: 3px; font-weight: 700; } html[data-theme="day"] .rss-ref-src em { background: rgba(10,186,181,0.15); } .rss-ref-title { color: rgba(255,255,255,0.80); font-size: 11px; } html[data-theme="day"] .rss-ref-title { color: rgba(10,20,40,0.75); } /* ════════════════════════════════════════════════════════════════ CARD 8 — MARKETING INFOGRAPHIC CARD ════════════════════════════════════════════════════════════════ */ /* Base card override */ /* .rss-card8-marketing uses .rss-analysis-card defaults */ /* ── Infographic block ── */ .rss-infographic { margin: 1rem 0 1.25rem; padding: 1rem 1.25rem 1.25rem; background: rgba(0,0,0,0.28); border-radius: 16px; border: 1px solid rgba(10,186,181,0.20); } html[data-theme="day"] .rss-infographic { background: rgba(10,186,181,0.06); border-color: rgba(10,186,181,0.25); } /* ── Inside orange card: single Tiffany glass card ── */ .rss-card8-marketing .rss-infographic { background: linear-gradient(140deg, rgba(255,255,255,0.80) 0%, rgba(240,252,252,0.70) 55%, rgba(220,248,248,0.65) 100%) !important; border: 2px solid #0ABAB5 !important; border-radius: 20px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(10,186,181,0.10), 0 12px 40px rgba(0,80,80,0.20) !important; padding: 1rem 1rem 0.5rem !important; } .rss-infographic-header { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 1rem; } .rss-infographic-icon { font-size: 1.4rem; flex-shrink: 0; } .rss-card8-marketing .rss-infographic-icon { font-size: 1.8rem; } .rss-infographic-title { font-size: 13px; font-weight: 800; color: #0ABAB5; letter-spacing: 0.08em; text-transform: uppercase; } .rss-card8-marketing .rss-infographic-title { color: #007A76 !important; -webkit-text-fill-color: #007A76 !important; font-size: 14px !important; letter-spacing: 0.12em !important; } .rss-infographic-source { font-size: 10px; color: rgba(255,255,255,0.40); margin-top: 2px; } html[data-theme="day"] .rss-infographic-source { color: rgba(10,20,40,0.50); } .rss-card8-marketing .rss-infographic-source { color: rgba(0,80,80,0.62) !important; -webkit-text-fill-color: rgba(0,80,80,0.62) !important; } .rss-infographic-svg { width: 100%; height: auto; display: block; font-family: inherit; overflow: visible; } /* Bar animation */ .rss-infographic-bar { animation: infoBarGrow 1.0s cubic-bezier(0.34,1.56,0.64,1) both; } @keyframes infoBarGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ── Dennis Leo Pullquote ── */ .rss-card8-quote { margin: 1.25rem 0; padding: 1rem 1.25rem 1rem 1.5rem; border-left: 4px solid #C8941A; background: linear-gradient(90deg, rgba(200,148,26,0.10), transparent); border-radius: 0 12px 12px 0; } html[data-theme="day"] .rss-card8-quote { background: linear-gradient(90deg, rgba(200,148,26,0.12), transparent); } .rss-card8-quote-text { font-size: 14px; font-weight: 700; font-style: normal; color: rgba(255,255,255,0.90); line-height: 1.7; margin: 0; } html[data-theme="day"] .rss-card8-quote-text { color: rgba(10,20,40,0.85); } /* ── Footer: sig + CTAs ── */ .rss-card8-footer { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(200,148,26,0.20); } @media (min-width: 640px) { .rss-card8-footer { flex-direction: row; align-items: center; justify-content: space-between; } } /* ── Sig card in header (compact 75%) ── */ .rss-sig-compact { padding: 0.55rem 0.75rem !important; gap: 0.6rem !important; border-radius: 10px !important; flex-shrink: 0; } .rss-sig-compact .rss-analysis-sig-name { font-size: 0.78rem !important; } .rss-sig-compact .rss-analysis-sig-title { font-size: 0.60rem !important; } .rss-sig-compact .rss-analysis-sig-org { font-size: 0.52rem !important; } .rss-sig-compact .rss-analysis-sig-stamp { width: 52px !important; height: 46px !important; } .rss-sig-compact .stamp-brand { font-size: 0.44rem !important; } .rss-sig-compact .stamp-sub { font-size: 0.32rem !important; } /* Footer when only CTAs remain — no top border gap */ .rss-card8-footer-ctas-only { flex-direction: row !important; justify-content: center !important; /* horizontal centre */ align-items: center !important; /* vertical centre */ padding: 1rem 1.5rem 1.25rem !important; border-top: 1px solid rgba(10,186,181,0.18) !important; } /* ── CTA buttons ── */ .rss-card8-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; align-items: center; } .rss-cta { padding: 9px 18px; border-radius: 99px; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; cursor: pointer; border: none; transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s; white-space: nowrap; font-family: inherit; } .rss-cta:hover { transform: translateY(-2px); opacity: 0.92; } .rss-cta:active { transform: translateY(0); } /* ── All CTA buttons: Tiffany Blue fill, black text ── */ .rss-cta-primary, .rss-cta-secondary, .rss-cta-tertiary { background: #0ABAB5 !important; color: #000 !important; -webkit-text-fill-color: #000 !important; border: none !important; box-shadow: 0 4px 16px rgba(10,186,181,0.30) !important; } .rss-cta-primary:hover, .rss-cta-secondary:hover, .rss-cta-tertiary:hover { background: #09CDC8 !important; box-shadow: 0 6px 20px rgba(10,186,181,0.45) !important; } /* ── Talent layer badge readability ─────────────────── */ .talent-layer-label, .talent-badge, .layer-badge, [class*="layer"] .badge, .talent-card .badge, .talent-card [class*="badge"], .talent-card [class*="label"] { background: rgba(255,255,255,0.12) !important; color: #E0EAF4 !important; border: 1px solid rgba(255,255,255,0.25) !important; border-radius: 4px !important; padding: 2px 8px !important; } html[data-theme="day"] .talent-layer-label, html[data-theme="day"] .talent-badge, html[data-theme="day"] .layer-badge { background: rgba(10,22,40,0.85) !important; color: #E0EAF4 !important; border-color: rgba(10,186,181,0.4) !important; } /* ── Partner section h2 explicit span colors ─────────── */ #partner-teaser h2 > span:first-child { color: #FFD966 !important; -webkit-text-fill-color: #FFD966 !important; } /* ── Prevent right-side clip in blueprint/form sections ─ */ #blueprint, #onboard, #knowledge-directory, #matrix, .governance-section { overflow-x: visible !important; } /* ════════════════════════════════════════════════════════ TGAI Daily Lens Editorial Card — Hermès Orange Piano Lacquer Identical in ALL themes (day/night) and ALL locales. Uses #rss-news-grid ID (specificity 110+) to WIN over any html[data-theme="day"] .rss-card white override. ════════════════════════════════════════════════════════ */ /* ── Today's Highlight orange card — or
, day & night ── */ #rss-news-grid .rss-editorial, .rss-editorial { max-height: 360px; overflow: hidden; display: flex; flex-direction: column; background: radial-gradient(ellipse at 22% 18%, rgba(255,255,255,0.28) 0%, transparent 52%), radial-gradient(ellipse at 80% 85%, rgba(0,0,0,0.30) 0%, transparent 48%), linear-gradient(148deg, #FF7E30 0%, #E85F0A 28%, #CB4500 58%, #882000 100%) !important; border: 2px solid rgba(255,255,255,0.35) !important; border-radius: 20px; padding: 20px 22px; position: relative; box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(0,0,0,0.20), 0 12px 40px rgba(100,20,0,0.35) !important; /* Force white text & remove link underline when element is */ color: #fff !important; text-decoration: none !important; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease; } #rss-news-grid .rss-editorial:hover, .rss-editorial:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), inset 0 -1px 0 rgba(0,0,0,0.22), 0 18px 48px rgba(100,20,0,0.48) !important; } .rss-editorial::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 30%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0.55) 70%, transparent 100%); pointer-events: none; } .rss-editorial-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .rss-editorial-icon { font-size: 16px; color: rgba(255,255,255,0.90) !important; line-height: 1; } .rss-editorial-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: rgba(255,255,255,0.90) !important; text-transform: uppercase; } .rss-editorial-meta { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.60) !important; margin: 0 0 8px 0; } .rss-editorial-title { font-size: 15px; font-weight: 800; line-height: 1.45; color: #fff !important; margin: 0 0 10px 0; letter-spacing: -0.01em; } .rss-editorial-body { font-size: 13px; line-height: 1.70; color: rgba(255,255,255,0.90) !important; margin: 0 0 10px 0; font-style: normal !important; font-weight: 400; flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; /* compact — title + meta take space */ -webkit-box-orient: vertical; } .rss-editorial-read { font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,0.85) !important; letter-spacing: 0.03em; white-space: nowrap; } .rss-editorial-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid rgba(255,255,255,0.20); padding-top: 10px; flex-shrink: 0; /* always visible, never squeezed */ margin-top: auto; } .rss-editorial-date { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #A8A9AD; } .rss-editorial-brand { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #A8A9AD; font-weight: 700; } /* Day mode: editorial keeps orange + white text (same as night) */ html[data-theme="day"] .rss-editorial-body, html[data-theme="day"] .rss-editorial-label, html[data-theme="day"] .rss-editorial-icon, html[data-theme="day"] .rss-editorial-date, html[data-theme="day"] .rss-editorial-brand { color: rgba(255,255,255,0.92) !important; } /* ── News tab filter ── */ .hidden-card { display: none !important; } /* ════════════════════════════════════════════════════════════════ BUILD 19 — High-Tech Intelligence Brief Visual Components ════════════════════════════════════════════════════════════════ */ /* ── Theme Signal Chips ────────────────────────────────────────── */ .rss-analysis-signals-label { font-size: 9px; font-weight: 800; letter-spacing: 0.15em; color: rgba(255,255,255,0.30); text-transform: uppercase; margin: 20px 0 10px; } .rss-theme-chip-row { display: flex; gap: 10px; margin-bottom: 18px; } .rss-theme-chip { flex: 1; border-radius: 12px; padding: 12px 11px; border: 1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.04); min-width: 0; } .rss-chip-HIGH { border-color: rgba(243,112,33,0.32); background: rgba(243,112,33,0.06); } .rss-chip-MED { border-color: rgba(200,148,26,0.32); background: rgba(200,148,26,0.06); } .rss-chip-LOW { border-color: rgba(57,181,74,0.25); background: rgba(57,181,74,0.04); } .rss-chip-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; } .rss-chip-icon { font-size: 15px; } .rss-chip-badge { font-size: 7.5px; font-weight: 900; letter-spacing: 0.12em; padding: 2px 6px; border-radius: 4px; } .rss-badge-HIGH { background: #F37021; color: #fff; } .rss-badge-MED { background: #C8941A; color: #1A0800; } .rss-badge-LOW { background: #39B54A; color: #0C0A08; } .rss-chip-name { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.88); margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rss-chip-dots { font-size: 10px; color: rgba(255,255,255,0.38); letter-spacing: 0.01em; margin-bottom: 7px; } .rss-chip-insight { font-size: 10px; color: rgba(255,255,255,0.55); line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* ── Dennis Leo Insight Card ───────────────────────────────────── */ .rss-dl-card { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; background: rgba(200,148,26,0.07); border: 1px solid rgba(200,148,26,0.28); border-radius: 12px; margin-top: 4px; } .rss-dl-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #2A1200, #C8941A); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; color: #FFD580; flex-shrink: 0; font-family: 'JetBrains Mono','SF Mono',monospace; border: 1.5px solid rgba(200,148,26,0.45); box-shadow: 0 0 12px rgba(200,148,26,0.20); } .rss-dl-content { flex: 1; min-width: 0; } .rss-dl-insight { font-size: 12.5px; line-height: 1.65; color: rgba(255,255,255,0.88); font-style: italic; margin-bottom: 7px; } .rss-dl-byline { font-size: 9px; color: rgba(200,148,26,0.65); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } /* ── Intel Brief Card (in news grid, from Gemini) ─────────────── */ .rss-intel-brief { border: 1px solid rgba(10,186,181,0.22) !important; background: linear-gradient(145deg, rgba(10,186,181,0.05) 0%, rgba(0,0,0,0.18) 100%) !important; } .rss-brief-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.07); } .rss-brief-pulse { width: 8px; height: 8px; border-radius: 50%; background: #0ABAB5; flex-shrink: 0; animation: briefPulse 2s ease-in-out infinite; } @keyframes briefPulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(10,186,181,0.55); } 50% { opacity: 0.65; box-shadow: 0 0 0 7px rgba(10,186,181,0); } } .rss-brief-title { font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; color: rgba(255,255,255,0.80); text-transform: uppercase; flex: 1; } .rss-brief-date { font-size: 9px; color: rgba(255,255,255,0.30); font-family: 'JetBrains Mono','SF Mono',monospace; } .rss-brief-section-label { font-size: 8.5px; font-weight: 900; letter-spacing: 0.16em; color: rgba(255,255,255,0.27); text-transform: uppercase; margin: 15px 0 9px; } /* Stat row inside intel brief */ .rss-stat-row { display: flex; gap: 9px; } .rss-stat-card { flex: 1; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: 10px; padding: 12px 10px; text-align: center; } .rss-stat-icon { font-size: 15px; margin-bottom: 5px; } .rss-stat-value { font-size: 17px; font-weight: 900; color: #C8941A; font-family: 'JetBrains Mono','SF Mono',monospace; line-height: 1.1; margin-bottom: 5px; } .rss-stat-label { font-size: 8px; color: rgba(255,255,255,0.42); text-transform: uppercase; letter-spacing: 0.07em; line-height: 1.35; } /* Signal list inside intel brief */ .rss-signals { display: flex; flex-direction: column; gap: 7px; } .rss-signal { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; border-left: 3px solid transparent; } .signal-HIGH { background: rgba(243,112,33,0.08); border-left-color: #F37021; } .signal-WATCH { background: rgba(200,148,26,0.08); border-left-color: #C8941A; } .signal-RISK { background: rgba(231,76,60,0.10); border-left-color: #E74C3C; } .signal-LOW { background: rgba(57,181,74,0.06); border-left-color: #39B54A; } .signal-badge { font-size: 7.5px; font-weight: 900; letter-spacing: 0.12em; padding: 2px 6px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; } .signal-HIGH .signal-badge { background: #F37021; color: #fff; } .signal-WATCH .signal-badge { background: #C8941A; color: #1A0800; } .signal-RISK .signal-badge { background: #E74C3C; color: #fff; } .signal-LOW .signal-badge { background: #39B54A; color: #0C0A08; } .signal-text { font-size: 11.5px; color: rgba(255,255,255,0.80); flex: 1; line-height: 1.3; } .signal-ref { font-size: 9px; color: rgba(255,255,255,0.25); font-family: 'JetBrains Mono',monospace; flex-shrink: 0; } /* Dennis Leo inside intel brief */ .rss-insight-dl { display: flex; align-items: flex-start; gap: 12px; padding: 14px; background: rgba(200,148,26,0.07); border: 1px solid rgba(200,148,26,0.22); border-radius: 10px; margin-top: 14px; } .rss-insight-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg,#2A1200,#C8941A); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; color: #FFD580; flex-shrink: 0; font-family: 'JetBrains Mono',monospace; border: 1px solid rgba(200,148,26,0.40); } .rss-insight-text { font-size: 11.5px; line-height: 1.6; color: rgba(255,255,255,0.85); font-style: italic; margin-bottom: 5px; } .rss-insight-byline { font-size: 9px; color: rgba(200,148,26,0.60); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; } /* Day-mode overrides for intel brief + chips */ html[data-theme="day"] .rss-intel-brief { border-color: rgba(10,186,181,0.30) !important; background: linear-gradient(145deg,rgba(10,186,181,0.06),rgba(255,255,255,0.04)) !important; } html[data-theme="day"] .rss-theme-chip { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); } html[data-theme="day"] .rss-chip-HIGH { background: rgba(243,112,33,0.07); } html[data-theme="day"] .rss-chip-MED { background: rgba(200,148,26,0.07); } html[data-theme="day"] .rss-chip-name { color: #1A0800; } html[data-theme="day"] .rss-chip-insight { color: #3A2800; } html[data-theme="day"] .rss-chip-dots { color: rgba(0,0,0,0.45); } html[data-theme="day"] .rss-dl-insight { color: #2A1600; } html[data-theme="day"] .rss-stat-value { color: #9A6A08; } html[data-theme="day"] .rss-signal { background-color: rgba(0,0,0,0.04); } html[data-theme="day"] .signal-text { color: #1A0800; } html[data-theme="day"] .rss-insight-text { color: #1A0800; } /* ════════════════════════════════════════════════════════════════ BUILD 19b — Glass Card Unification + Radar Professional ════════════════════════════════════════════════════════════════ */ /* ── RSS Card: full glassmorphism ─────────────────────────────── */ .rss-card { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.11) !important; border-radius: 18px !important; backdrop-filter: blur(18px) saturate(160%) !important; -webkit-backdrop-filter: blur(18px) saturate(160%) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.28), inset 0 1.5px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.08) !important; transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease !important; } .rss-card:hover { transform: translateY(-4px) !important; border-color: rgba(10,186,181,0.45) !important; box-shadow: 0 12px 36px rgba(0,0,0,0.38), inset 0 1.5px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.10) !important; } html[data-theme="day"] .rss-card { background: rgba(255,255,255,0.76) !important; border: 1px solid rgba(255,255,255,0.92) !important; box-shadow: 0 2px 20px rgba(0,0,0,0.07), inset 0 1.5px 0 rgba(255,255,255,1.0), inset 0 -1px 0 rgba(0,0,0,0.04) !important; } html[data-theme="day"] .rss-card:hover { border-color: rgba(10,186,181,0.35) !important; box-shadow: 0 6px 28px rgba(10,186,181,0.10), inset 0 1.5px 0 rgba(255,255,255,1.0) !important; } /* ── Featured card: gold glass ───────────────────────────────── */ .rss-card.rss-featured { background: linear-gradient(135deg, rgba(200,148,26,0.10) 0%, rgba(10,186,181,0.06) 50%, rgba(200,148,26,0.04) 100%) !important; border: 1.5px solid rgba(200,148,26,0.42) !important; backdrop-filter: blur(24px) saturate(170%) !important; -webkit-backdrop-filter: blur(24px) saturate(170%) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.32), inset 0 1.5px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(200,148,26,0.08) !important; } /* ── Analysis card (editorial + radar): premium glass ─────────── */ .rss-analysis-card { border-radius: 24px !important; overflow: hidden !important; position: relative !important; border: 1.5px solid rgba(200,148,26,0.32) !important; background: linear-gradient(145deg, rgba(8,14,28,0.88) 0%, rgba(4,8,18,0.94) 100%) !important; backdrop-filter: blur(28px) saturate(180%) !important; -webkit-backdrop-filter: blur(28px) saturate(180%) !important; box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 4px 14px rgba(0,0,0,0.30), inset 0 1.5px 0 rgba(255,255,255,0.09), inset 0 -1px 0 rgba(0,0,0,0.18) !important; } html[data-theme="day"] .rss-analysis-card { background: linear-gradient(145deg, rgba(255,255,255,0.86) 0%, rgba(248,252,255,0.92) 100%) !important; border-color: rgba(200,148,26,0.28) !important; box-shadow: 0 8px 36px rgba(0,0,0,0.10), inset 0 1.5px 0 rgba(255,255,255,0.98), inset 0 -1px 0 rgba(200,148,26,0.08) !important; } /* ── Infographic panel: glass inner panel ─────────────────────── */ .rss-infographic { margin: 1rem 0 1.25rem !important; padding: 1rem 1.25rem 1.25rem !important; background: rgba(255,255,255,0.04) !important; border-radius: 16px !important; border: 1px solid rgba(255,255,255,0.10) !important; backdrop-filter: blur(10px) saturate(140%) !important; -webkit-backdrop-filter: blur(10px) saturate(140%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 20px rgba(0,0,0,0.18) !important; } html[data-theme="day"] .rss-infographic { background: rgba(255,255,255,0.55) !important; border-color: rgba(10,186,181,0.18) !important; box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.95), 0 4px 16px rgba(10,186,181,0.06) !important; } /* ── Intel brief card: teal glass ────────────────────────────── */ .rss-intel-brief { border: 1px solid rgba(10,186,181,0.22) !important; background: linear-gradient(145deg, rgba(10,186,181,0.05) 0%, rgba(255,255,255,0.03) 100%) !important; backdrop-filter: blur(18px) saturate(160%) !important; -webkit-backdrop-filter: blur(18px) saturate(160%) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.22), inset 0 1px 0 rgba(10,186,181,0.12), inset 0 -1px 0 rgba(0,0,0,0.06) !important; } html[data-theme="day"] .rss-intel-brief { background: rgba(255,255,255,0.78) !important; border-color: rgba(10,186,181,0.28) !important; box-shadow: 0 2px 16px rgba(10,186,181,0.08), inset 0 1.5px 0 rgba(255,255,255,1.0) !important; } /* ── Theme signal chips: subtle glass ────────────────────────── */ .rss-theme-chip { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.12) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important; } .rss-chip-HIGH { background: rgba(243,112,33,0.07) !important; border-color: rgba(243,112,33,0.28) !important; } .rss-chip-MED { background: rgba(200,148,26,0.07) !important; border-color: rgba(200,148,26,0.28) !important; } .rss-chip-LOW { background: rgba(57,181,74,0.05) !important; border-color: rgba(57,181,74,0.22) !important; } html[data-theme="day"] .rss-theme-chip { background: rgba(255,255,255,0.72) !important; border-color: rgba(0,0,0,0.10) !important; box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.9), 0 2px 8px rgba(0,0,0,0.06) !important; } html[data-theme="day"] .rss-chip-HIGH { border-color: rgba(243,112,33,0.30) !important; } html[data-theme="day"] .rss-chip-MED { border-color: rgba(200,148,26,0.30) !important; } html[data-theme="day"] .rss-chip-LOW { border-color: rgba(57,181,74,0.25) !important; } /* ── DL card glass ───────────────────────────────────────────── */ .rss-dl-card { background: rgba(200,148,26,0.06) !important; border: 1px solid rgba(200,148,26,0.22) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; box-shadow: inset 0 1px 0 rgba(255,215,100,0.08) !important; } html[data-theme="day"] .rss-dl-card { background: rgba(255,255,255,0.72) !important; border-color: rgba(200,148,26,0.30) !important; box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.95), 0 2px 12px rgba(200,148,26,0.06) !important; } /* Day mode: text inside glass cards must remain readable */ html[data-theme="day"] .rss-chip-name { color: #1A0800 !important; } html[data-theme="day"] .rss-chip-insight { color: #3A2800 !important; } html[data-theme="day"] .rss-chip-dots { color: rgba(0,0,0,0.40) !important; } html[data-theme="day"] .rss-dl-insight { color: #1A0800 !important; } html[data-theme="day"] .rss-dl-byline { color: rgba(139,100,20,0.85) !important; } html[data-theme="day"] .rss-brief-title { color: rgba(0,0,0,0.80) !important; } html[data-theme="day"] .rss-stat-value { color: #8B6414 !important; } html[data-theme="day"] .rss-stat-label { color: rgba(0,0,0,0.48) !important; } html[data-theme="day"] .signal-text { color: #1A0800 !important; } html[data-theme="day"] .rss-insight-text { color: #1A0800 !important; } html[data-theme="day"] .rss-analysis-tag { color: #8B6414 !important; } /* ════════════════════════════════════════════════════════════════ BUILD 20 — Day-mode dark-section contrast fix + Footer i18n ════════════════════════════════════════════════════════════════ */ /* Fix: html[data-theme="day"] section h2/h3/p applies dark text to ALL sections, including permanently-dark ones (#whitepaper, #site-footer). Explicitly restore the correct light text colours for dark sections. */ /* ── #whitepaper section — always dark bg ─────────────────────── */ html[data-theme="day"] #whitepaper h2, html[data-theme="day"] #whitepaper h3 { color: #F0F6FF !important; -webkit-text-fill-color: #F0F6FF !important; } html[data-theme="day"] #whitepaper p, html[data-theme="day"] #whitepaper span { color: rgba(160,185,215,0.80) !important; } html[data-theme="day"] #whitepaper [style*="color:rgba(200,148,26"] { color: rgba(200,148,26,0.80) !important; } html[data-theme="day"] #whitepaper [style*="color:#F0F6FF"] { color: #F0F6FF !important; -webkit-text-fill-color: #F0F6FF !important; } html[data-theme="day"] #whitepaper [style*="color:rgba(160,185,215"], html[data-theme="day"] #whitepaper [style*="color:rgba(200,190,170"] { color: rgba(160,185,215,0.80) !important; } /* ── #partner-teaser — always dark bg ────────────────────────── */ html[data-theme="day"] #partner-teaser h2, html[data-theme="day"] #partner-teaser h3 { color: #FFD966 !important; -webkit-text-fill-color: #FFD966 !important; } html[data-theme="day"] #partner-teaser p { color: rgba(200,218,240,0.80) !important; } /* ── #site-footer — always dark bg (#0C0A08) ─────────────────── */ html[data-theme="day"] #site-footer { background: linear-gradient(180deg,#0C0A08 0%,#0C0A08 100%) !important; } html[data-theme="day"] #site-footer, html[data-theme="day"] #site-footer div, html[data-theme="day"] #site-footer p, html[data-theme="day"] #site-footer span, html[data-theme="day"] #site-footer li { /* Reset the broad section p/h2/h3 dark override */ } html[data-theme="day"] #site-footer [style*="color:#F0F6FF"] { color: #F0F6FF !important; -webkit-text-fill-color: #F0F6FF !important; } html[data-theme="day"] #site-footer [style*="color:rgba(200,148,26"] { color: rgba(200,148,26,0.72) !important; } html[data-theme="day"] #site-footer [style*="color:rgba(160,185,215"] { color: rgba(160,185,215,0.80) !important; } html[data-theme="day"] #site-footer [style*="color:rgba(150,175,210"] { color: rgba(150,175,210,0.85) !important; } html[data-theme="day"] #site-footer [style*="color:rgba(120,145,175"] { color: rgba(120,145,175,0.70) !important; } html[data-theme="day"] #site-footer [style*="color:rgba(110,135,165"] { color: rgba(110,135,165,0.75) !important; } html[data-theme="day"] #site-footer a[style*="color:#0ABAB5"] { color: #0ABAB5 !important; } html[data-theme="day"] #site-footer a[data-i18n="footer.privacy"], html[data-theme="day"] #site-footer a[data-i18n="footer.terms"] { color: rgba(110,135,165,0.75) !important; } html[data-theme="day"] #site-footer a[data-i18n="footer.privacy"]:hover, html[data-theme="day"] #site-footer a[data-i18n="footer.terms"]:hover { color: #0ABAB5 !important; } /* Footer nav links */ html[data-theme="day"] #site-footer a[data-i18n^="nav."] { color: rgba(150,175,210,0.85) !important; } html[data-theme="day"] #site-footer a[data-i18n^="nav."]:hover { color: #0ABAB5 !important; } /* Footer copyright */ html[data-theme="day"] #footer-copyright { color: rgba(110,135,165,0.72) !important; } /* ════════════════════════════════════════════════════════════════ BUILD 22 — Compact radar card + collision-free labels ════════════════════════════════════════════════════════════════ */ /* ── Infographic panel: compact card, not full-width ─────────── */ .rss-infographic { max-width: 360px !important; margin: 1rem auto 1.25rem !important; padding: 0.85rem 1rem 1rem !important; } /* ── SVG: constrain height so it never dominates ──────────────── */ .rss-infographic-svg { display: block; width: 100%; max-height: 240px; overflow: visible; } /* ════════════════════════════════════════════════════════════════ BUILD 24 — Radar LEFT + Analysis RIGHT two-column layout ════════════════════════════════════════════════════════════════ */ /* ── Two-column grid: radar card left, insights right ─────────── */ .rss-analysis-main { display: grid; grid-template-columns: 320px 1fr; gap: 1rem 1.25rem; align-items: stretch; /* radar card stretches to match right column height */ margin: 0.5rem 0 1rem; padding: 0 1.5rem; box-sizing: border-box; } /* ── Infographic col: fill right-column height exactly */ .rss-analysis-main .rss-infographic { max-width: none !important; margin: 0 !important; width: 100%; height: 100%; /* stretch to match right column */ box-sizing: border-box; display: flex; flex-direction: column; position: static; /* sticky conflicted with stretch; disabled */ } /* Radar SVG grows to fill available vertical space */ .rss-analysis-main .rss-infographic .rss-infographic-svg { flex: 1; max-height: none !important; } /* ── Analysis body col: scrollable, no extra padding ─────────── */ .rss-analysis-main .rss-analysis-body { min-width: 0; /* prevent grid blowout */ padding-right: 0; /* outer padding already from .rss-analysis-main */ padding-left: 0.25rem; } /* ── Mobile: stack vertically ─────────────────────────────────── */ @media (max-width: 700px) { .rss-analysis-main { grid-template-columns: 1fr; padding: 0 0.75rem; /* reduce side padding on mobile */ gap: 0.75rem 0; } .rss-analysis-main .rss-infographic { position: static; max-width: 100% !important; height: auto !important; /* don't stretch on single-col layout */ margin: 0 0 0.75rem !important; } .rss-analysis-main .rss-analysis-body { padding-left: 0; padding-right: 0; } } /* ════════════════════════════════════════════════════════════════ BUILD 25 — Theme cards: Tiffany blue border / Conclusion: Hermès orange glass Radar: stretches to match right column height ════════════════════════════════════════════════════════════════ */ /* ── Theme insight cards: transparent + Tiffany blue full border ── */ .rss-analysis-theme { padding: 0.875rem 1.1rem !important; border-radius: 14px !important; border: 1.5px solid rgba(10,186,181,0.55) !important; border-left: 1.5px solid rgba(10,186,181,0.55) !important; /* override the 3px left */ background: transparent !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } html[data-theme="day"] .rss-analysis-theme { background: rgba(255,255,255,0.10) !important; border-color: rgba(10,186,181,0.60) !important; } /* Badge colour: Tiffany to match card border */ .rss-analysis-num { background: rgba(10,186,181,0.20) !important; color: #0ABAB5 !important; } html[data-theme="day"] .rss-analysis-num { background: rgba(10,186,181,0.15) !important; color: #076B69 !important; } /* ── Dennis Leo conclusion: Hermès orange glass + white text, NO italic ── */ .rss-analysis-conclusion { padding: 1rem 1.25rem !important; border-radius: 14px !important; border: 1.5px solid rgba(243,112,33,0.65) !important; background: rgba(243,112,33,0.22) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } html[data-theme="day"] .rss-analysis-conclusion { background: rgba(243,112,33,0.26) !important; border-color: rgba(243,112,33,0.70) !important; } .rss-analysis-conclusion-label { color: #fff !important; font-size: 0.74rem !important; font-weight: 900 !important; letter-spacing: 0.08em !important; } html[data-theme="day"] .rss-analysis-conclusion-label { color: #fff !important; } .rss-analysis-conclusion-text { font-style: normal !important; /* NO italic */ color: rgba(255,255,255,0.92) !important; opacity: 1 !important; font-size: 0.85rem !important; line-height: 1.80 !important; } html[data-theme="day"] .rss-analysis-conclusion-text { color: rgba(255,255,255,0.92) !important; } /* ── Radar: stretch to full right-column height ─────────────────── */ .rss-analysis-main { align-items: stretch !important; /* was 'start' */ } .rss-analysis-main .rss-infographic { display: flex !important; flex-direction: column !important; max-width: none !important; margin: 0 !important; /* sticky removed — let it fill naturally */ position: static !important; height: 100% !important; } .rss-analysis-main .rss-infographic .rss-infographic-header { flex-shrink: 0; } .rss-analysis-main .rss-infographic .rss-infographic-svg { flex: 1 !important; width: 100% !important; max-height: none !important; /* remove the 240px cap */ min-height: 220px; height: auto !important; overflow: visible; } /* ── Mobile: restore reasonable max-height on small screens ─────── */ @media (max-width: 700px) { .rss-analysis-main .rss-infographic .rss-infographic-svg { max-height: 260px !important; } } /* ════════════════════════════════════════════════════════════════ BUILD 26 — Dennis Leo card: solid Hermès orange + glass finish ════════════════════════════════════════════════════════════════ */ /* ── Solid Hermès orange with glass-sheen layering ────────────── */ .rss-analysis-conclusion { /* * Glass finish: solid base + bright gloss stripe on top third, * subtle depth on lower two-thirds. No transparency in the orange. */ background: linear-gradient( 160deg, rgba(255,255,255,0.22) 0%, /* gloss highlight at top-left */ rgba(255,255,255,0.06) 38%, /* fade out */ rgba(0,0,0,0.04) 100% /* subtle depth at bottom */ ), #F37021 !important; /* solid Hermès orange base */ border: 1.5px solid rgba(255,255,255,0.30) !important; /* Inner glass highlights */ box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), /* top edge gloss */ inset 0 -1px 0 rgba(0,0,0,0.12), /* bottom depth */ 0 6px 28px rgba(243,112,33,0.30), /* warm outer glow */ 0 1px 3px rgba(0,0,0,0.15) !important; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-radius: 14px !important; padding: 1rem 1.25rem !important; } html[data-theme="day"] .rss-analysis-conclusion { background: linear-gradient( 160deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.08) 38%, rgba(0,0,0,0.04) 100% ), #F37021 !important; border-color: rgba(255,255,255,0.35) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(0,0,0,0.10), 0 6px 28px rgba(243,112,33,0.25), 0 1px 3px rgba(0,0,0,0.12) !important; } /* Text always white on solid orange ──────────────────────────── */ .rss-analysis-conclusion-label, html[data-theme="day"] .rss-analysis-conclusion-label, html[data-theme="night"] .rss-analysis-conclusion-label { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.20); } .rss-analysis-conclusion-text, html[data-theme="day"] .rss-analysis-conclusion-text, html[data-theme="night"] .rss-analysis-conclusion-text { color: rgba(255,255,255,0.95) !important; font-style: normal !important; text-shadow: 0 1px 2px rgba(0,0,0,0.18); } /* ════════════════════════════════════════════════════════════════ BUILD 26 — Mobile nav: fix invisible buttons on both themes BUILD 70 — Fixed dead zone: hamburger now shows on tablet too ════════════════════════════════════════════════════════════════ */ /* ── Hamburger button: show on mobile + tablet (<1024px) ─────── */ #mobile-menu-btn { display: flex !important; /* visible by default on all screens */ } @media (min-width: 1024px) { #mobile-menu-btn { display: none !important; /* hide only on desktop (≥1024px) where inline nav shows */ } } /* ── Mobile drawer: allow block display at tablet so JS maxHeight works */ @media (min-width: 768px) and (max-width: 1023px) { #mobile-nav-drawer { display: block !important; /* override Tailwind md:hidden so JS toggle works */ } } /* ── Drawer nav background: always dark so text is visible ────── */ #mobile-nav-drawer nav { background: linear-gradient(180deg, #0C0A08 0%, #141210 100%) !important; } html[data-theme="day"] #mobile-nav-drawer nav { background: linear-gradient(180deg, #0E0C0A 0%, #181410 100%) !important; } /* ── Nav links: solid white/cream — visible on dark drawer bg ─── */ #mobile-nav-drawer a { color: #F0ECDE !important; font-weight: 700 !important; } html[data-theme="day"] #mobile-nav-drawer a { color: #F0ECDE !important; /* override the dark color from earlier */ } /* ── Payment buttons: always legible ─────────────────────────── */ #mobile-nav-drawer button { font-size: 13px !important; } /* ════════════════════════════════════════════════════════════════ BUILD 27 — Dennis Leo card: premium glass on table 大R角 + 玻璃表面光澤 + 桌面下沈反光，無邊框 ════════════════════════════════════════════════════════════════ */ .rss-analysis-conclusion { position: relative !important; overflow: hidden !important; border-radius: 22px !important; border: none !important; padding: 1.1rem 1.3rem !important; isolation: isolate !important; /* ── Card face: warm gradient depth ─────────────────────────── */ background: linear-gradient( 168deg, #FF8B3D 0%, /* warmer orange at top (light hits face) */ #F37021 44%, /* pure Hermès orange core */ #D95A0F 100% /* deeper amber at bottom-right (shadow) */ ) !important; /* ── Shadows: top-rim light + table reflection below ─────────── */ box-shadow: /* glass top-rim — catches overhead light */ inset 0 2px 0 rgba(255,255,255,0.52), /* bottom inner shadow — adds thickness illusion */ inset 0 -2px 6px rgba(0,0,0,0.14), /* card lift off surface */ 0 4px 8px rgba(0,0,0,0.22), /* 桌面下沈反光 — orange light bleeds into surface below */ 0 16px 40px rgba(243,112,33,0.48), 0 32px 72px rgba(230,80,10,0.28), /* warm ambient halo */ 0 48px 96px rgba(243,112,33,0.14) !important; } /* ── Glass surface sheen — upper diffuse glow across card face ── */ .rss-analysis-conclusion::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient( 160deg, rgba(255,255,255,0.22) 0%, /* bright gloss top-left */ rgba(255,255,255,0.07) 35%, rgba(255,255,255,0.00) 55%, rgba(0,0,0,0.05) 100% /* subtle shadow at bottom-right */ ); border-radius: inherit; pointer-events: none; } /* ── Diagonal specular streak — single glint across surface ──── */ .rss-analysis-conclusion::after { content: ''; position: absolute; top: -30%; left: -15%; width: 55%; height: 75%; background: linear-gradient( 115deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.00) 65% ); transform: rotate(-15deg); border-radius: 50%; pointer-events: none; z-index: 0; } /* ── Content above glass layers ─────────────────────────────────── */ .rss-analysis-conclusion-label, .rss-analysis-conclusion-text { position: relative; z-index: 1; } .rss-analysis-conclusion-label, html[data-theme="day"] .rss-analysis-conclusion-label, html[data-theme="night"] .rss-analysis-conclusion-label { color: #fff !important; font-style: normal !important; text-shadow: 0 1px 3px rgba(0,0,0,0.25) !important; } .rss-analysis-conclusion-text, html[data-theme="day"] .rss-analysis-conclusion-text, html[data-theme="night"] .rss-analysis-conclusion-text { color: rgba(255,255,255,0.94) !important; font-style: normal !important; text-shadow: 0 1px 2px rgba(0,0,0,0.20) !important; } /* ════════════════════════════════════════════════════════════════ BUILD 28 — Radar card 2× larger: column 320px → 600px SVG viewBox 340×270 R84 → 560×460 R140 ════════════════════════════════════════════════════════════════ */ /* ── Left column: 600px (was 320px) ─────────────────────────────── */ .rss-analysis-main { grid-template-columns: 600px 1fr !important; gap: 1rem 1.5rem !important; } /* ── SVG: no height cap, fills column naturally ──────────────────── */ .rss-analysis-main .rss-infographic .rss-infographic-svg { max-height: none !important; height: auto !important; min-height: 300px; } /* ── Responsive: at narrow viewports collapse earlier ───────────── */ @media (max-width: 900px) { .rss-analysis-main { grid-template-columns: 1fr !important; } .rss-analysis-main .rss-infographic .rss-infographic-svg { max-height: 360px !important; } } /* ════════════════════════════════════════════════════════════════ BUILD 29 — Hermès orange: flat colour, inset-only reflections No gradient, no outer glow. Glass lives inside the card only. ════════════════════════════════════════════════════════════════ */ .rss-analysis-conclusion { position: relative !important; overflow: hidden !important; isolation: isolate !important; border-radius: 22px !important; border: none !important; padding: 1.1rem 1.3rem !important; /* ── Flat solid Hermès orange — no gradient ───────────────────── */ background: #F37021 !important; /* ── Inset reflections only — no outer glow ───────────────────── */ box-shadow: inset 0 2px 0 rgba(255,255,255,0.55), /* top-rim glass highlight */ inset 0 1px 12px rgba(255,255,255,0.12), /* soft inner top diffusion */ inset 0 -2px 8px rgba(0,0,0,0.18) !important; /* bottom inner depth */ } html[data-theme="day"] .rss-analysis-conclusion { background: #F37021 !important; box-shadow: inset 0 2px 0 rgba(255,255,255,0.60), inset 0 1px 14px rgba(255,255,255,0.15), inset 0 -2px 8px rgba(0,0,0,0.16) !important; } /* ── Glass surface sheen (::before) — stays inside via overflow:hidden */ .rss-analysis-conclusion::before { content: '' !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; background: linear-gradient( 158deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.00) 55% ) !important; border-radius: inherit !important; pointer-events: none !important; } /* ── Specular glint (::after) — single diagonal streak, inside only */ .rss-analysis-conclusion::after { content: '' !important; position: absolute !important; top: -25% !important; left: -10% !important; width: 50% !important; height: 70% !important; background: linear-gradient( 115deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.00) 60% ) !important; transform: rotate(-12deg) !important; border-radius: 50% !important; pointer-events: none !important; z-index: 0 !important; } /* ── Text above glass layers ─────────────────────────────────────── */ .rss-analysis-conclusion-label, .rss-analysis-conclusion-text { position: relative !important; z-index: 1 !important; } /* ════════════════════════════════════════════════════════════════ BUILD 30 — Hermès luxury glass card 精品感 = 剋制 + 精準光物理 + 無外暈 光源：左上45°，所有反光從內部生成 ════════════════════════════════════════════════════════════════ */ .rss-analysis-conclusion { position: relative !important; overflow: hidden !important; isolation: isolate !important; border-radius: 20px !important; border: none !important; padding: 1.2rem 1.4rem !important; background: #F37021 !important; /* ── 精準內部光學分層 ───────────────────────────────────────── 1. 頂緣：玻璃邊緣截光，razor-thin 高亮 2. 頂部二次暈：玻璃上表面漫射（帶橙暖色，非純白） 3. 左側緣：側面光入射 4. 右側緣：對側陰影 5. 底緣：玻璃厚度底面陰影 6. 底部深化：空氣接觸面深色 以上全部 inset — 無任何外射光 ──────────────────────────── */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), /* ①頂緣精準截光 */ inset 0 4px 10px rgba(255, 210, 160, 0.18), /* ②頂面暖色漫射 */ inset 1px 0 0 rgba(255, 255, 255, 0.18), /* ③左側入射 */ inset -1px 0 0 rgba(0, 0, 0, 0.10), /* ④右側陰影 */ inset 0 -1px 0 rgba(0, 0, 0, 0.32), /* ⑤底緣玻璃截面 */ inset 0 -5px 12px rgba(140, 40, 0, 0.18) !important; /* ⑥底部深色 */ } html[data-theme="day"] .rss-analysis-conclusion { background: #F37021 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), inset 0 4px 10px rgba(255, 215, 170, 0.20), inset 1px 0 0 rgba(255, 255, 255, 0.20), inset -1px 0 0 rgba(0, 0, 0, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.28), inset 0 -5px 12px rgba(140, 40, 0, 0.15) !important; } /* ── 上半面漫射層：光源從左上打入玻璃表面 ──────────────────── */ .rss-analysis-conclusion::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 54% !important; background: linear-gradient( 172deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 230, 195, 0.07) 45%, rgba(255, 255, 255, 0.00) 100% ) !important; /* 底邊橢圓形，模擬玻璃曲面截止線 */ border-radius: 20px 20px 60% 60% / 20px 20px 14px 14px !important; pointer-events: none !important; z-index: 0 !important; } /* ── 斜向精準折射：單一光源，窄而銳利 ─────────────────────── */ .rss-analysis-conclusion::after { content: '' !important; position: absolute !important; top: -20% !important; left: 2% !important; width: 32% !important; height: 85% !important; background: linear-gradient( 108deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0.04) 45%, transparent 65% ) !important; transform: rotate(-6deg) !important; border-radius: 0 0 50% 50% / 0 0 30% 30% !important; pointer-events: none !important; z-index: 0 !important; } /* ── 文字層浮於玻璃效果之上 ──────────────────────────────────── */ .rss-analysis-conclusion > *, .rss-analysis-conclusion-label, .rss-analysis-conclusion-text { position: relative !important; z-index: 2 !important; } .rss-analysis-conclusion-label, html[data-theme="day"] .rss-analysis-conclusion-label, html[data-theme="night"] .rss-analysis-conclusion-label { color: #fff !important; font-style: normal !important; letter-spacing: 0.04em !important; text-shadow: 0 1px 2px rgba(100, 30, 0, 0.30) !important; /* 暖底色文字陰影 */ } .rss-analysis-conclusion-text, html[data-theme="day"] .rss-analysis-conclusion-text, html[data-theme="night"] .rss-analysis-conclusion-text { color: rgba(255, 255, 255, 0.95) !important; font-style: normal !important; text-shadow: 0 1px 3px rgba(100, 30, 0, 0.25) !important; } /* ════════════════════════════════════════════════════════════════ BUILD 31 — Convex lacquer dome (like the reference photo) 凸面漆器效果：中心亮、四邊暗、右上點光、底緣回光 ════════════════════════════════════════════════════════════════ */ .rss-analysis-conclusion { position: relative !important; overflow: hidden !important; isolation: isolate !important; border-radius: 26px !important; border: none !important; padding: 1.3rem 1.5rem !important; /* ── Stacked radial gradients simulate convex lacquer surface ── Layer order (top → bottom): 1. Edge vignette — corners & edges dark 2. Upper-right corner glint — bright point light 3. Central dome highlight — large convex bright zone 4. Bottom-edge bounce light — reflective surface below 5. Base: deep Hermès orange (shadow areas) ──── */ background: radial-gradient(ellipse 130% 130% at 50% 50%, transparent 38%, rgba(100, 18, 0, 0.58) 100%), /* ①角落暗角 */ radial-gradient(ellipse 38% 28% at 90% 4%, rgba(255, 235, 170, 0.70) 0%, rgba(255, 190, 80, 0.22) 40%, transparent 65%), /* ②右上角點光 */ radial-gradient(ellipse 78% 70% at 36% 32%, rgba(255, 210, 120, 0.72) 0%, rgba(255, 150, 50, 0.28) 38%, rgba(255, 100, 10, 0.06) 60%, transparent 75%), /* ③中心凸面主光 */ radial-gradient(ellipse 80% 30% at 50% 108%, rgba(255, 150, 40, 0.50) 0%, rgba(230, 90, 10, 0.18) 40%, transparent 65%), /* ④底緣回光 */ #C84C00 !important; /* ⑤深橙底色（暗部） */ /* ── Box-shadow: rim precision only (no outer glow) ─────────── */ box-shadow: inset 0 1px 0 rgba(255, 210, 120, 0.55), /* top rim warm highlight */ inset 0 -1px 0 rgba(80, 10, 0, 0.50), /* bottom rim dark */ inset 1px 0 0 rgba(255, 180, 80, 0.20), /* left rim light */ inset -1px 0 0 rgba(60, 5, 0, 0.25) !important; /* right rim dark */ } html[data-theme="day"] .rss-analysis-conclusion { background: radial-gradient(ellipse 130% 130% at 50% 50%, transparent 38%, rgba(100,18,0,0.55) 100%), radial-gradient(ellipse 38% 28% at 90% 4%, rgba(255,235,170,0.72) 0%, rgba(255,190,80,0.22) 40%, transparent 65%), radial-gradient(ellipse 78% 70% at 36% 32%, rgba(255,210,120,0.70) 0%, rgba(255,150,50,0.28) 38%, rgba(255,100,10,0.06) 60%, transparent 75%), radial-gradient(ellipse 80% 30% at 50% 108%, rgba(255,150,40,0.50) 0%, rgba(230,90,10,0.18) 40%, transparent 65%), #C84C00 !important; box-shadow: inset 0 1px 0 rgba(255,210,120,0.60), inset 0 -1px 0 rgba(80,10,0,0.48), inset 1px 0 0 rgba(255,180,80,0.22), inset -1px 0 0 rgba(60,5,0,0.22) !important; } /* ── No pseudo-elements needed — all via background stack ─────── */ .rss-analysis-conclusion::before, .rss-analysis-conclusion::after { display: none !important; } /* ── Text: warm white, sits above gradients ──────────────────── */ .rss-analysis-conclusion-label, .rss-analysis-conclusion-text, html[data-theme="day"] .rss-analysis-conclusion-label, html[data-theme="day"] .rss-analysis-conclusion-text, html[data-theme="night"] .rss-analysis-conclusion-label, html[data-theme="night"] .rss-analysis-conclusion-text { position: relative !important; z-index: 2 !important; color: rgba(255, 255, 255, 0.96) !important; font-style: normal !important; text-shadow: 0 1px 4px rgba(80, 10, 0, 0.45) !important; } /* ════════════════════════════════════════════════════════════════ BUILD 32 — Hermès card: photorealistic lacquer texture image Replaces all CSS gradient approximations with the real thing ════════════════════════════════════════════════════════════════ */ .rss-analysis-conclusion { position: relative !important; overflow: hidden !important; isolation: isolate !important; border-radius: 22px !important; border: none !important; padding: 1.25rem 1.5rem !important; /* ── Real photorealistic lacquer texture ─────────────────────── */ background: /* Subtle dark overlay at bottom so text is readable */ linear-gradient( to top, rgba(80, 15, 0, 0.45) 0%, rgba(80, 15, 0, 0.10) 45%, transparent 70% ), url('/images/hermes-lacquer.png') center / cover no-repeat !important; box-shadow: inset 0 1px 0 rgba(255, 210, 150, 0.35), inset 0 -1px 0 rgba(50, 5, 0, 0.40) !important; } html[data-theme="day"] .rss-analysis-conclusion { background: linear-gradient( to top, rgba(80, 15, 0, 0.45) 0%, rgba(80, 15, 0, 0.10) 45%, transparent 70% ), url('/images/hermes-lacquer.png') center / cover no-repeat !important; } /* ── Disable gradient pseudo-elements (image handles it all) ─── */ .rss-analysis-conclusion::before, .rss-analysis-conclusion::after { display: none !important; } /* ── Text: high-contrast white + warm shadow for readability ─── */ .rss-analysis-conclusion-label, .rss-analysis-conclusion-text, html[data-theme="day"] .rss-analysis-conclusion-label, html[data-theme="day"] .rss-analysis-conclusion-text, html[data-theme="night"] .rss-analysis-conclusion-label, html[data-theme="night"] .rss-analysis-conclusion-text { position: relative !important; z-index: 2 !important; color: #fff !important; font-style: normal !important; text-shadow: 0 1px 3px rgba(60, 8, 0, 0.60), 0 2px 8px rgba(60, 8, 0, 0.40) !important; } /* ════════════════════════════════════════════════════════════════ BUILD 35 — Radar night contrast + Hermès card pure CSS dome ════════════════════════════════════════════════════════════════ */ /* ── Hermès card: back to pure CSS (zero grain, zero image) ───── 5-layer radial gradient: dome → glint → vignette → bounce → base Monochromatic orange only — all same hue, only lightness varies */ .rss-analysis-conclusion { position: relative !important; overflow: hidden !important; isolation: isolate !important; border-radius: 20px !important; border: none !important; padding: 1.2rem 1.4rem !important; background: /* ① Corner/edge vignette — deepens edges to burnt orange */ radial-gradient(ellipse 148% 148% at 50% 50%, transparent 36%, rgba(130, 28, 0, 0.68) 100%), /* ② Upper-right precise glint — lighter orange catch */ radial-gradient(ellipse 22% 18% at 90% 6%, rgba(255, 165, 70, 0.65) 0%, rgba(255, 130, 35, 0.18) 40%, transparent 60%), /* ③ Central convex dome — the main brightness, monochromatic */ radial-gradient(ellipse 70% 62% at 32% 34%, rgba(255, 178, 80, 0.80) 0%, rgba(255, 140, 42, 0.42) 30%, rgba(255, 108, 14, 0.10) 55%, transparent 70%), /* ④ Bottom edge bounce — surface below reflects up */ radial-gradient(ellipse 78% 28% at 50% 112%, rgba(255, 140, 42, 0.55) 0%, rgba(230, 88, 12, 0.18) 40%, transparent 65%), /* ⑤ Solid base: deep Hermès orange at the dark edges */ #C74A00 !important; box-shadow: inset 0 1px 0 rgba(255, 180, 80, 0.45), /* top warm rim */ inset 0 -1px 0 rgba(60, 8, 0, 0.55), /* bottom dark rim */ inset 1px 0 0 rgba(255, 160, 60, 0.18), /* left subtle */ inset -1px 0 0 rgba(40, 4, 0, 0.22) !important; /* right dark */ } html[data-theme="day"] .rss-analysis-conclusion { background: radial-gradient(ellipse 148% 148% at 50% 50%, transparent 36%, rgba(130,28,0,0.65) 100%), radial-gradient(ellipse 22% 18% at 90% 6%, rgba(255,165,70,0.65) 0%, rgba(255,130,35,0.18) 40%, transparent 60%), radial-gradient(ellipse 70% 62% at 32% 34%, rgba(255,178,80,0.78) 0%, rgba(255,140,42,0.40) 30%, rgba(255,108,14,0.08) 55%, transparent 70%), radial-gradient(ellipse 78% 28% at 50% 112%, rgba(255,140,42,0.52) 0%, rgba(230,88,12,0.15) 40%, transparent 65%), #C74A00 !important; } /* Disable image-based background (built in prev builds) */ .rss-analysis-conclusion::before, .rss-analysis-conclusion::after { display: none !important; } /* Text: warm white with orange undertone shadow */ .rss-analysis-conclusion-label, .rss-analysis-conclusion-text, html[data-theme="day"] .rss-analysis-conclusion-label, html[data-theme="day"] .rss-analysis-conclusion-text, html[data-theme="night"] .rss-analysis-conclusion-label, html[data-theme="night"] .rss-analysis-conclusion-text { position: relative !important; z-index: 2 !important; color: rgba(255,255,255,0.97) !important; font-style: normal !important; text-shadow: 0 1px 3px rgba(80,10,0,0.55), 0 2px 8px rgba(80,10,0,0.30) !important; } /* ── Also remove the image from background shorthand if browser cached it */ /* (image URL override no longer needed — CSS gradients handle everything) */ /* ════════════════════════════════════════════════════════════════ BUILD 37 — Hermès card: enamel image via ::before + blur(1px) Grain is softened at render level; text stays sharp above ════════════════════════════════════════════════════════════════ */ .rss-analysis-conclusion { position: relative !important; overflow: hidden !important; isolation: isolate !important; border-radius: 20px !important; border: none !important; padding: 1.2rem 1.4rem !important; /* transparent so ::before image shows through */ background: transparent !important; box-shadow: inset 0 1px 0 rgba(255,195,100,0.45), inset 0 -1px 0 rgba(50,5,0,0.50) !important; } /* ── ::before: enamel image + blur to eliminate grain ────────── */ .rss-analysis-conclusion::before { content: '' !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; background: url('/images/hermes-lacquer.png') center / cover no-repeat !important; filter: blur(1.2px) saturate(1.08) !important; /* Compensate blur edge bleed */ margin: -4px !important; border-radius: 24px !important; display: block !important; } /* ── ::after: dark overlay at bottom for text legibility ─────── */ .rss-analysis-conclusion::after { content: '' !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; background: linear-gradient( to top, rgba(70,10,0,0.52) 0%, rgba(70,10,0,0.18) 40%, transparent 70% ) !important; border-radius: inherit !important; display: block !important; } /* ── Text z-index above both layers ─────────────────────────── */ .rss-analysis-conclusion > *, .rss-analysis-conclusion-label, .rss-analysis-conclusion-text { position: relative !important; z-index: 2 !important; } html[data-theme="day"] .rss-analysis-conclusion, html[data-theme="night"] .rss-analysis-conclusion { background: transparent !important; } /* ════════════════════════════════════════════════════════════════ BUILD 38 — Hermès orange: pure CSS monochromatic glass 一切顏色從 #F37021 出發： · 亮部 = rgba(255,175,55,x) 疊加 → 同色相較亮橙 · 暗部 = rgba(0,0,0,x) 疊加 → 同色相較暗橙（非褐色） · 無白色、無奶油色、無任何異色 ════════════════════════════════════════════════════════════════ */ .rss-analysis-conclusion { position: relative !important; overflow: hidden !important; isolation: isolate !important; border-radius: 22px !important; border: none !important; padding: 1.2rem 1.4rem !important; background: /* ④ 四角暗角 — pure black overlay → orange stays orange */ radial-gradient(ellipse 148% 148% at 50% 50%, transparent 28%, rgba(0,0,0,0.48) 100%), /* ③ 右上角光點 — lighter orange catch */ radial-gradient(ellipse 20% 16% at 88% 6%, rgba(255,165,50,0.60) 0%, rgba(255,145,30,0.18) 40%, transparent 60%), /* ② 中心凸面穹頂 — warm lighter orange dome */ radial-gradient(ellipse 70% 62% at 34% 33%, rgba(255,178,58,0.78) 0%, rgba(255,150,38,0.38) 30%, rgba(255,120,20,0.08) 55%, transparent 70%), /* ① 底緣回光 — reflected orange from below */ radial-gradient(ellipse 80% 28% at 50% 112%, rgba(255,150,40,0.52) 0%, rgba(255,120,20,0.16) 40%, transparent 65%), /* ⓪ 純 Hermès 橙底色 */ #F37021 !important; /* Inset rim — pure orange variations only */ box-shadow: inset 0 1.5px 0 rgba(255,190,80,0.55), /* top rim: lighter orange */ inset 0 -1.5px 0 rgba(0,0,0,0.38), /* bottom rim: darkened orange */ inset 1.5px 0 0 rgba(255,170,60,0.18), /* left rim */ inset -1.5px 0 0 rgba(0,0,0,0.18) !important; /* right rim */ } html[data-theme="day"] .rss-analysis-conclusion { background: radial-gradient(ellipse 148% 148% at 50% 50%, transparent 28%, rgba(0,0,0,0.48) 100%), radial-gradient(ellipse 20% 16% at 88% 6%, rgba(255,165,50,0.62) 0%, rgba(255,145,30,0.20) 40%, transparent 60%), radial-gradient(ellipse 70% 62% at 34% 33%, rgba(255,178,58,0.80) 0%, rgba(255,150,38,0.40) 30%, rgba(255,120,20,0.08) 55%, transparent 70%), radial-gradient(ellipse 80% 28% at 50% 112%, rgba(255,150,40,0.54) 0%, rgba(255,120,20,0.18) 40%, transparent 65%), #F37021 !important; } /* Kill image-based approach completely */ .rss-analysis-conclusion::before, .rss-analysis-conclusion::after { display: none !important; } /* Text: white with warm amber shadow — always above gradients */ .rss-analysis-conclusion > *, .rss-analysis-conclusion-label, .rss-analysis-conclusion-text, html[data-theme="day"] .rss-analysis-conclusion-label, html[data-theme="day"] .rss-analysis-conclusion-text, html[data-theme="night"] .rss-analysis-conclusion-label, html[data-theme="night"] .rss-analysis-conclusion-text { position: relative !important; z-index: 2 !important; color: rgba(255,255,255,0.97) !important; font-style: normal !important; text-shadow: 0 1px 2px rgba(0,0,0,0.40), 0 2px 6px rgba(0,0,0,0.20) !important; } /* ════════════════════════════════════════════════════════════════ BUILD 40 — Hermès card: split day / night behaviour · Day = solid opaque convex lacquer (Build 38 unchanged) · Night = 橘色玻璃 / orange glass with backdrop-filter blur ════════════════════════════════════════════════════════════════ */ /* NIGHT: orange glass — semi-transparent + blurred bg */ html[data-theme="night"] .rss-analysis-conclusion { background: /* Edge darkening: keeps edges deep orange even through glass */ radial-gradient(ellipse 148% 148% at 50% 50%, transparent 28%, rgba(0,0,0,0.38) 100%), /* Upper-right glint on glass surface */ radial-gradient(ellipse 22% 18% at 88% 6%, rgba(255,175,70,0.55) 0%, rgba(255,150,40,0.15) 40%, transparent 60%), /* Central convex dome highlight — still orange, lighter */ radial-gradient(ellipse 72% 64% at 33% 32%, rgba(255,185,70,0.65) 0%, rgba(255,155,45,0.28) 32%, transparent 62%), /* Bottom bounce */ radial-gradient(ellipse 80% 28% at 50% 112%, rgba(255,155,45,0.42) 0%, transparent 62%), /* Semi-transparent orange base — this is what makes it GLASS */ rgba(243, 112, 33, 0.42) !important; /* Glass finish */ backdrop-filter: blur(18px) saturate(1.5) !important; -webkit-backdrop-filter: blur(18px) saturate(1.5) !important; /* Glass border: inner top highlight + subtle orange outer glow */ box-shadow: inset 0 1.5px 0 rgba(255, 195, 90, 0.55), /* top rim: bright orange */ inset 0 -1.5px 0 rgba(0, 0, 0, 0.35), /* bottom rim: dark */ inset 1.5px 0 0 rgba(255, 175, 65, 0.15), /* left rim */ inset -1.5px 0 0 rgba(0, 0, 0, 0.20), /* right rim */ 0 0 0 1px rgba(255, 155, 50, 0.28) !important; /* outer border glow */ } /* Night mode: text needs stronger shadow since bg is now transparent */ html[data-theme="night"] .rss-analysis-conclusion-label, html[data-theme="night"] .rss-analysis-conclusion-text, html[data-theme="night"] .rss-analysis-conclusion > * { color: rgba(255, 255, 255, 0.97) !important; text-shadow: 0 1px 3px rgba(0,0,0,0.65), 0 2px 8px rgba(0,0,0,0.45), 0 0 16px rgba(0,0,0,0.25) !important; } /* ════════════════════════════════════════════════════════════════ BUILD 46 — Border-radius standardisation System: cards=16px · buttons=12px · badges=8px · special=20-22px ════════════════════════════════════════════════════════════════ */ /* VZ channel buttons: 8px → 12px */ .vz-ch-btn { border-radius: 12px !important; } /* News category badges */ .news-badge { border-radius: 8px !important; } .news-featured-badge { border-radius: 8px !important; } /* Form inputs keep pill shape (24px) — intentional, no change */ /* Hermès conclusion card: 22px — intentional accent, no change */ /* Video zone / monitor bezel consistency */ .vz-monitor { border-radius: 16px !important; } /* RSS / analysis cards */ .rss-card, .rss-article-item { border-radius: 16px !important; } /* Tab buttons in analysis section */ .rss-tab-btn { border-radius: 10px !important; } /* Knowledge cards */ .knowledge-card, .gov-card { border-radius: 16px !important; } /* ════════════════════════════════════════════════════════════════ BUILD 96 — Mobile nav drawer: always-dark, clear button style ════════════════════════════════════════════════════════════════ */ /* Hamburger: always visible on mobile, hidden on lg+ desktop */ .mobile-hamburger-btn { display: flex !important; /* always show on mobile */ } @media (min-width: 1024px) { .mobile-hamburger-btn { display: none !important; } } /* Mobile nav drawer: always dark bg so text is readable in both modes */ #mobile-nav-drawer { position: relative; z-index: 49; width: 100%; } #mobile-nav-drawer nav { background: linear-gradient(180deg, #0C0A08 0%, #141210 100%) !important; } #mobile-nav-drawer a, #mobile-nav-drawer button { color: #E8F0FF !important; -webkit-text-fill-color: #E8F0FF !important; } /* Highlight row on tap */ #mobile-nav-drawer a:active, #mobile-nav-drawer button:active { background: rgba(200,148,26,0.20) !important; } /* Section divider between nav links and CTAs */ #mobile-nav-drawer .mobile-nav-divider { border-top: 1px solid rgba(200,148,26,0.18); margin: 8px 0; } /* Pay buttons in drawer: Tiffany Blue */ #mobile-nav-drawer button[onclick*="openPayment"] { background: #0ABAB5 !important; color: #000 !important; -webkit-text-fill-color: #000 !important; border: none !important; } /* ════════════════════════════════════════════════════════════════ BUILD 97 — Mobile viewport fix: no horizontal overflow ════════════════════════════════════════════════════════════════ */ /* ── Global: prevent horizontal scroll on mobile ──────────────── */ html, body { overflow-x: hidden; max-width: 100%; } * { box-sizing: border-box; } /* ── News grid: force 1-column on phones (overrides repeat(2,1fr)) */ @media (max-width: 640px) { #rss-news-grid { grid-template-columns: 1fr !important; gap: 0.75rem !important; } /* Featured card: single column inside too */ .rss-card.rss-featured { grid-template-columns: 1fr !important; padding: 1rem !important; } /* Editorial (orange) card: full width, fixed height */ #rss-news-grid .rss-editorial { width: 100% !important; min-height: 180px !important; max-height: none !important; } /* News section: reduce side padding on small phones */ #rss-news-section { padding-left: 0.875rem !important; padding-right: 0.875rem !important; } } /* ── Analysis card: collapse at 900px, no overflow ────────────── */ @media (max-width: 900px) { .rss-analysis-main { grid-template-columns: 1fr !important; padding: 0 0.75rem !important; } .rss-analysis-main .rss-infographic { height: auto !important; max-width: 100% !important; } } /* ── Analysis card outer: no overflow on narrow screens ───────── */ @media (max-width: 768px) { #rss-analysis-container { margin-left: 0 !important; margin-right: 0 !important; overflow: hidden; } .rss-analysis-card { border-radius: 16px !important; } .rss-analysis-hdr { padding: 0.65rem 1rem !important; } } /* ── All sections: prevent child overflow ─────────────────────── */ @media (max-width: 768px) { section, .section-wrapper, #rss-news-section, #rss-analysis-container, .rss-analysis-card { max-width: 100% !important; overflow-x: hidden !important; } } /* ════════════════════════════════════════════════════════════════ BUILD 98 — Emoji-free: professional SVG icons for day/night toggle ════════════════════════════════════════════════════════════════ */ /* Day/Night toggle: SVG sun + moon via mask-image (crisp, no emoji) */ #btn-theme-day::before { content: ''; display: inline-block; width: 13px; height: 13px; flex-shrink: 0; background: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cg stroke='currentColor' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='12' y1='1' x2='12' y2='4'/%3E%3Cline x1='12' y1='20' x2='12' y2='23'/%3E%3Cline x1='1' y1='12' x2='4' y2='12'/%3E%3Cline x1='20' y1='12' x2='23' y2='12'/%3E%3Cline x1='4.22' y1='4.22' x2='6.34' y2='6.34'/%3E%3Cline x1='17.66' y1='17.66' x2='19.78' y2='19.78'/%3E%3Cline x1='4.22' y1='19.78' x2='6.34' y2='17.66'/%3E%3Cline x1='17.66' y1='6.34' x2='19.78' y2='4.22'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cg stroke='currentColor' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='12' y1='1' x2='12' y2='4'/%3E%3Cline x1='12' y1='20' x2='12' y2='23'/%3E%3Cline x1='1' y1='12' x2='4' y2='12'/%3E%3Cline x1='20' y1='12' x2='23' y2='12'/%3E%3Cline x1='4.22' y1='4.22' x2='6.34' y2='6.34'/%3E%3Cline x1='17.66' y1='17.66' x2='19.78' y2='19.78'/%3E%3Cline x1='4.22' y1='19.78' x2='6.34' y2='17.66'/%3E%3Cline x1='17.66' y1='6.34' x2='19.78' y2='4.22'/%3E%3C/g%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; vertical-align: middle; } #btn-theme-night::before { content: ''; display: inline-block; width: 12px; height: 12px; flex-shrink: 0; background: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; vertical-align: middle; } /* Remove any leftover emoji via font-family forcing on common emoji containers */ .lang-flag { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; font-size: 1.1em; } /* ── Fix: nav-whitepaper night-mode -webkit-text-fill-color inconsistency ── */ /* All crystal-tab-blueprint tabs must have identical text fill in all modes */ html[data-theme="night"] .crystal-tab-blueprint, html[data-theme="night"] #nav-whitepaper { color: #E8F0FF !important; -webkit-text-fill-color: #E8F0FF !important; } html[data-theme="day"] .crystal-tab-blueprint, html[data-theme="day"] #nav-whitepaper { color: #141210 !important; -webkit-text-fill-color: #141210 !important; } /* ════════════════════════════════════════════════════════════════════════ BUILD 99 — Talent Matrix Cards: Fix prog-bar + conclusion strip design ════════════════════════════════════════════════════════════════════════ */ /* ── 1. Progress bar fill (was missing — bars showed transparent) ── */ .prog-bar { background: linear-gradient(90deg, #0ABAB5 0%, #08D4CE 100%); transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1); } /* ── 2. Talent conclusion strip — replaces status-badge pill design ── */ .talent-conclusion { display: flex; align-items: center; gap: 11px; padding: 11px 16px 15px; margin: 10px -20px -20px; /* bleed to card edges */ border-top: 1px solid rgba(255, 255, 255, 0.07); background: rgba(0, 0, 0, 0.22); border-radius: 0 0 22px 22px; font-family: 'JetBrains Mono', 'Courier New', monospace; color: #C8D8EE; } .talent-conclusion-bar { width: 3px; height: 36px; border-radius: 2px; background: var(--acc, #0ABAB5); flex-shrink: 0; } .talent-conclusion-content { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; } .talent-conclusion-label { font-size: 8px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.42; } .talent-conclusion-text { font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #E0ECFF; } .talent-conclusion-icon { flex-shrink: 0; opacity: 0.65; color: var(--acc, #0ABAB5); } /* Pulsing active dot — Card 3 only */ .talent-conclusion-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc, #0ABAB5); flex-shrink: 0; animation: tc-pulse 2.4s ease-in-out infinite; } @keyframes tc-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.25; transform: scale(0.7); } } /* Day mode overrides */ html[data-theme="day"] .talent-conclusion { background: rgba(0, 0, 0, 0.05); border-top-color: rgba(0, 0, 0, 0.08); color: #3A3E4A; } html[data-theme="day"] .talent-conclusion-text { color: #1A1E2A; } html[data-theme="day"] .talent-conclusion-label { opacity: 0.38; } /* Mobile: prevent text overflow on narrower cards */ @media (max-width: 480px) { .talent-conclusion { gap: 8px; padding: 10px 12px 13px; margin: 8px -12px -12px; } .talent-conclusion-text { font-size: 9.5px; } } /* ═══════════════════════════════════════════════════════════════════════ BUILD 107 — 3D BUTTON UPGRADE All interactive buttons get either 立體玻璃鏡面 or 立體金屬 treatment. Rules appended at EOF to win cascade over earlier definitions. ═══════════════════════════════════════════════════════════════════════ */ /* ── rss-cta: 3D Metallic Teal (立體金屬) ─────────────────────────── */ .rss-cta-primary, .rss-cta-secondary, .rss-cta-tertiary { background: linear-gradient(145deg, #003330 0%, #006660 12%, #0ABAB5 35%, #0CDBD5 50%, #0ABAB5 68%, #006660 85%, #003330 100%) !important; border: none !important; border-top: 1.5px solid rgba(12,255,252,0.65) !important; border-left: 1px solid rgba(10,220,215,0.45) !important; border-right: 1px solid rgba(2,60,58,0.50) !important; border-bottom: 2px solid rgba(2,40,38,0.80) !important; box-shadow: inset 0 2px 0 rgba(12,255,252,0.50), inset 0 -2px 0 rgba(2,40,38,0.65), inset 2px 0 6px rgba(12,255,252,0.15) !important; color: #001A18 !important; -webkit-text-fill-color: #001A18 !important; text-shadow: 0 1px 0 rgba(12,255,252,0.35) !important; font-weight: 900 !important; } .rss-cta-primary:hover, .rss-cta-secondary:hover, .rss-cta-tertiary:hover { background: linear-gradient(145deg, #004440 0%, #008880 12%, #0CDBD5 35%, #10F5F0 50%, #0CDBD5 68%, #008880 85%, #004440 100%) !important; transform: translateY(-1.5px) !important; box-shadow: inset 0 2px 0 rgba(16,245,240,0.65), inset 0 -2px 0 rgba(2,40,38,0.55) !important; } .rss-cta-primary:active, .rss-cta-secondary:active, .rss-cta-tertiary:active { transform: translateY(0) !important; box-shadow: inset 0 2px 4px rgba(0,0,0,0.25), inset 0 -1px 0 rgba(12,255,252,0.20) !important; } /* ── vz-ch-btn: 3D Glass (立體玻璃鏡面) ──────────────────────────── */ .vz-ch-btn { background: linear-gradient(145deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 100%) !important; border: none !important; border-top: 1px solid rgba(255,255,255,0.30) !important; border-left: 0.5px solid rgba(255,255,255,0.18) !important; border-right: 0.5px solid rgba(0,0,0,0.18) !important; border-bottom: 1px solid rgba(0,0,0,0.28) !important; box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.15) !important; transition: all 0.18s ease !important; } .vz-ch-btn:hover:not(.active) { background: linear-gradient(145deg, rgba(10,186,181,0.20) 0%, rgba(10,186,181,0.08) 100%) !important; border-top-color: rgba(12,255,252,0.35) !important; transform: none !important; } .vz-ch-btn.active { background: linear-gradient(145deg, rgba(10,186,181,0.32) 0%, rgba(10,186,181,0.16) 100%) !important; border: none !important; border-top: 1px solid rgba(12,255,252,0.55) !important; border-left: 0.5px solid rgba(10,220,215,0.35) !important; border-right: 0.5px solid rgba(2,60,58,0.35) !important; border-bottom: 1px solid rgba(2,60,58,0.55) !important; box-shadow: inset 0 2px 0 rgba(12,255,252,0.30), inset 0 -1px 0 rgba(3,80,78,0.35) !important; } /* ── partner-teaser pt-cta: Full Neumorphic Gold (立體金屬) ─────── */ #partner-teaser .pt-cta { box-shadow: inset 0 2px 0 rgba(255,248,200,0.65), inset 0 -2px 0 rgba(60,30,0,0.60), inset 2px 0 6px rgba(255,240,160,0.20), inset -2px 0 6px rgba(40,18,0,0.30) !important; border: none !important; border-top: 1.5px solid rgba(255,248,180,0.80) !important; border-left: 1px solid rgba(220,180,80,0.55) !important; border-right: 1px solid rgba(80,40,0,0.50) !important; border-bottom: 2px solid rgba(60,25,0,0.75) !important; text-shadow: 0 1px 0 rgba(255,240,160,0.50) !important; transition: all 0.22s ease !important; } #partner-teaser .pt-cta:hover { transform: translateY(-2px) !important; box-shadow: inset 0 2px 0 rgba(255,255,210,0.75), inset 0 -2px 0 rgba(60,30,0,0.55) !important; } #partner-teaser .pt-cta:active { transform: translateY(0) !important; box-shadow: inset 0 2px 4px rgba(40,18,0,0.50), inset 0 -1px 0 rgba(255,240,160,0.20) !important; } /* ── pay-btn-*: 3D Metallic (立體金屬) ─────────────────────────── */ /* Gold — 繳年度會費 */ .pay-btn-gold { background: linear-gradient(145deg, #3A1E00 0%, #7A4A06 8%, #C8920A 22%, #C8941A 36%, #F5E6B2 48%, #D4AF37 62%, #C8920A 76%, #7A4A06 88%, #3A1E00 100%) !important; border: none !important; border-top: 1.5px solid rgba(255,248,180,0.80) !important; border-left: 1px solid rgba(220,180,80,0.55) !important; border-right: 1px solid rgba(80,40,0,0.50) !important; border-bottom: 2px solid rgba(60,25,0,0.75) !important; box-shadow: inset 0 2px 0 rgba(255,248,200,0.65), inset 0 -2px 0 rgba(60,30,0,0.60) !important; color: #1A0800 !important; -webkit-text-fill-color: #1A0800 !important; text-shadow: 0 1px 0 rgba(255,240,160,0.55) !important; } .pay-btn-gold:hover { background: linear-gradient(145deg, #4A2800 0%, #9A6010 10%, #D4A820 22%, #D4AF37 36%, #FFF8B8 48%, #D4AF37 62%, #D4A820 76%, #9A6010 88%, #4A2800 100%) !important; transform: translateY(-1.5px) !important; } .pay-btn-gold:active { transform: translateY(0) !important; box-shadow: inset 0 2px 4px rgba(40,18,0,0.50), inset 0 -1px 0 rgba(255,240,160,0.20) !important; } /* Teal — AI 課程報名 */ .pay-btn-teal { background: linear-gradient(145deg, #003330 0%, #006660 12%, #0ABAB5 35%, #0CDBD5 50%, #0ABAB5 68%, #006660 85%, #003330 100%) !important; border: none !important; border-top: 1.5px solid rgba(12,255,252,0.65) !important; border-left: 1px solid rgba(10,220,215,0.45) !important; border-right: 1px solid rgba(2,60,58,0.50) !important; border-bottom: 2px solid rgba(2,40,38,0.80) !important; box-shadow: inset 0 2px 0 rgba(12,255,252,0.50), inset 0 -2px 0 rgba(2,40,38,0.65) !important; color: #001A18 !important; -webkit-text-fill-color: #001A18 !important; text-shadow: 0 1px 0 rgba(12,255,252,0.35) !important; } .pay-btn-teal:hover { background: linear-gradient(145deg, #004440 0%, #008880 12%, #0CDBD5 35%, #10F5F0 50%, #0CDBD5 68%, #008880 85%, #004440 100%) !important; transform: translateY(-1.5px) !important; } .pay-btn-teal:active { transform: translateY(0) !important; } /* Green — 捐款支持 */ .pay-btn-green { background: linear-gradient(145deg, #001A00 0%, #004400 12%, #1A8C2A 32%, #2DBB3A 50%, #1A8C2A 68%, #004400 85%, #001A00 100%) !important; border: none !important; border-top: 1.5px solid rgba(80,255,100,0.60) !important; border-left: 1px solid rgba(60,200,80,0.45) !important; border-right: 1px solid rgba(0,40,0,0.50) !important; border-bottom: 2px solid rgba(0,30,0,0.75) !important; box-shadow: inset 0 2px 0 rgba(80,255,100,0.45), inset 0 -2px 0 rgba(0,30,0,0.60) !important; color: #001800 !important; -webkit-text-fill-color: #001800 !important; text-shadow: 0 1px 0 rgba(80,255,100,0.35) !important; } .pay-btn-green:hover { background: linear-gradient(145deg, #002200 0%, #006600 12%, #22AA32 32%, #38D048 50%, #22AA32 68%, #006600 85%, #002200 100%) !important; transform: translateY(-1.5px) !important; } .pay-btn-green:active { transform: translateY(0) !important; } /* ── main-role-btn: 3D Glass (立體玻璃鏡面) ───────────────────── */ .main-role-btn { background: linear-gradient(145deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 100%) !important; border-top: 1px solid rgba(255,255,255,0.35) !important; border-left: 0.5px solid rgba(255,255,255,0.20) !important; border-right: 0.5px solid rgba(0,0,0,0.15) !important; border-bottom: 1px solid rgba(0,0,0,0.22) !important; box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.12) !important; transition: all 0.20s ease !important; } .main-role-btn:hover:not(.selected):not([aria-pressed="true"]) { background: linear-gradient(145deg, rgba(255,255,255,0.22) 0%, rgba(200,148,26,0.10) 100%) !important; border-top-color: rgba(255,255,255,0.50) !important; transform: translateY(-1px) !important; } .main-role-btn.selected, .main-role-btn[aria-pressed="true"] { background: linear-gradient(145deg, rgba(200,148,26,0.35) 0%, rgba(200,148,26,0.18) 100%) !important; border-top-color: rgba(255,248,180,0.65) !important; border-bottom-color: rgba(80,40,0,0.50) !important; box-shadow: inset 0 2px 0 rgba(255,248,200,0.40), inset 0 -1px 0 rgba(60,30,0,0.40) !important; } html[data-theme="day"] .main-role-btn { background: linear-gradient(145deg, rgba(255,255,255,0.90) 0%, rgba(240,246,255,0.96) 100%) !important; border-top-color: rgba(255,255,255,0.95) !important; border-bottom-color: rgba(120,140,160,0.30) !important; } /* ── KD Section Buttons: 3D Glass (立體玻璃鏡面) ───────────────── */ .kd-cta-glass { display: block !important; width: 100% !important; text-align: center !important; padding: 10px 16px !important; border-radius: 12px !important; font-size: 12px !important; font-weight: 900 !important; letter-spacing: 0.04em !important; white-space: nowrap !important; cursor: pointer !important; font-family: inherit !important; text-decoration: none !important; /* 立體玻璃鏡面 */ background: linear-gradient(145deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 100%) !important; border: none !important; border-top: 1px solid rgba(255,255,255,0.42) !important; border-left: 0.5px solid rgba(255,255,255,0.28) !important; border-right: 0.5px solid rgba(0,0,0,0.20) !important; border-bottom: 1px solid rgba(0,0,0,0.30) !important; box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.30), inset 0 -1px 0 rgba(0,0,0,0.18) !important; color: rgba(255,255,255,0.90) !important; -webkit-text-fill-color: rgba(255,255,255,0.90) !important; transition: all 0.20s ease !important; } .kd-cta-glass:hover { background: linear-gradient(145deg, rgba(10,186,181,0.28) 0%, rgba(10,186,181,0.12) 100%) !important; border-top-color: rgba(12,255,252,0.50) !important; transform: translateY(-1.5px) !important; } .kd-cta-glass:active { transform: translateY(0) !important; } /* KD Primary (Hermes orange) — 啟動跨組織水平聯防 */ .kd-cta-hermes { display: block !important; width: 100% !important; text-align: center !important; padding: 10px 16px !important; border-radius: 12px !important; font-size: 12px !important; font-weight: 900 !important; letter-spacing: 0.04em !important; white-space: nowrap !important; cursor: pointer !important; font-family: inherit !important; /* 立體金屬 — Hermes Orange */ background: linear-gradient(145deg, #5A1800 0%, #B03A08 12%, #E86010 35%, #F37021 50%, #E86010 68%, #B03A08 85%, #5A1800 100%) !important; border: none !important; border-top: 1.5px solid rgba(255,180,100,0.70) !important; border-left: 1px solid rgba(240,140,60,0.55) !important; border-right: 1px solid rgba(60,15,0,0.55) !important; border-bottom: 2px solid rgba(50,10,0,0.80) !important; box-shadow: inset 0 2px 0 rgba(255,200,130,0.55), inset 0 -2px 0 rgba(50,10,0,0.60) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; text-shadow: 0 1px 0 rgba(255,160,80,0.45) !important; transition: all 0.22s ease !important; } .kd-cta-hermes:hover { background: linear-gradient(145deg, #701E00 0%, #C84A10 12%, #F07030 35%, #FF8030 50%, #F07030 68%, #C84A10 85%, #701E00 100%) !important; transform: translateY(-1.5px) !important; } .kd-cta-hermes:active { transform: translateY(0) !important; } /* KD link buttons (GitHub, arXiv) */ .kd-link-glass { display: block !important; width: 100% !important; text-align: center !important; padding: 8px 14px !important; border-radius: 12px !important; font-size: 12px !important; font-weight: 700 !important; white-space: nowrap !important; text-decoration: none !important; background: linear-gradient(145deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 100%) !important; border: none !important; border-top: 1px solid rgba(255,255,255,0.30) !important; border-bottom: 1px solid rgba(0,0,0,0.22) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.14) !important; color: rgba(255,255,255,0.85) !important; -webkit-text-fill-color: rgba(255,255,255,0.85) !important; transition: all 0.18s ease !important; } .kd-link-glass:hover { background: linear-gradient(145deg, rgba(10,186,181,0.22) 0%, rgba(10,186,181,0.08) 100%) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; transform: translateY(-1px) !important; } /* ═══════════════════════════════════════════════════════════════════════ BUILD 110 — SECTION SHADING SYSTEM 以「頁」為單位，用灰階底色差異直覺表達頁面起始 Night mode: subtle warm/cool/neutral alternation on near-black palette Day mode: corresponding warm/cool/neutral light grays Separator: 1px gold gradient line at each section top ═══════════════════════════════════════════════════════════════════════ */ /* ── SECTION START SEPARATOR (gold hairline — universal) ──────────── */ /* Each major section gets a gold hairline at its top via CSS */ #matrix::before, #governance::before, #blueprint::before, #video-zone::before, #news::before, #partner-teaser::before, #onboard::before { content: ''; display: block; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(200,148,26,0.20) 20%, rgba(200,148,26,0.45) 50%, rgba(200,148,26,0.20) 80%, transparent 100%); margin-bottom: 0; } /* ── NIGHT MODE SECTION PALETTE ───────────────────────────────────── */ /* Band A — warm black (sections: matrix, blueprint, partner-teaser) */ html[data-theme="night"] #matrix, html[data-theme="night"] #blueprint, html[data-theme="night"] #partner-teaser { background: #100E0C !important; /* very slightly warm-lighter */ } /* Band B — cool slate-black (sections: governance, news + rss) */ html[data-theme="night"] #governance, html[data-theme="night"] #news { background: #0C0C10 !important; /* very slightly cool-blue tint */ } /* Band C — pure neutral-grey (sections: video-zone, onboard) */ html[data-theme="night"] #video-zone, html[data-theme="night"] #onboard { background: #0F0F0F !important; /* neutral mid-dark */ } /* RSS News section follows #news — same cool shade */ html[data-theme="night"] #rss-news-section { background: #0C0C10 !important; } /* Hero stays at absolute-black base (page origin) */ html[data-theme="night"] #hero, html[data-theme="night"] .hero-bg { background: #0C0A08 !important; } /* ── DAY MODE SECTION PALETTE ─────────────────────────────────────── */ /* Band A — warm white (matrix, blueprint, partner-teaser) */ html[data-theme="day"] #matrix, html[data-theme="day"] #blueprint, html[data-theme="day"] #partner-teaser { background: #F6F3F0 !important; /* very slightly warm light */ } /* Band B — cool light gray (governance, news + rss) */ html[data-theme="day"] #governance, html[data-theme="day"] #news { background: #EDF1F8 !important; /* very slightly blue-cool */ } /* Band C — neutral off-white (video-zone, onboard) */ html[data-theme="day"] #video-zone, html[data-theme="day"] #onboard { background: #F2F2F4 !important; /* neutral */ } html[data-theme="day"] #rss-news-section { background: #EDF1F8 !important; } /* Hero day: keep existing blue-tinted light */ html[data-theme="day"] #hero { background: #F2F6FA !important; } /* knowledge-directory & whitepaper keep their own distinct treatments */ /* ═══════════════════════════════════════════════════════════════════════ BUILD 111 — kd-cta-glass override: 螢光綠 + 黑字 (立體金屬) Replaces transparent glass (white text on teal card = low contrast) with opaque neon-green metallic + near-black text for full legibility. ═══════════════════════════════════════════════════════════════════════ */ .kd-cta-glass { /* 螢光綠 立體金屬 9-stop satin gradient */ background: linear-gradient(145deg, #001A00 0%, #004A12 8%, #00A830 22%, #00CC40 35%, #88FF88 50%, #00CC40 65%, #00A830 78%, #004A12 90%, #001A00 100%) !important; /* Directional edges — convex metallic bevel */ border: none !important; border-top: 1.5px solid rgba(160,255,160,0.85) !important; border-left: 1px solid rgba(100,220,120,0.55) !important; border-right: 1px solid rgba(0, 40, 10, 0.55) !important; border-bottom: 2px solid rgba(0, 20, 0, 0.85) !important; /* Inset neumorphic light/shadow */ box-shadow: inset 0 2px 0 rgba(180,255,180,0.70), inset 0 -2px 0 rgba(0, 20, 0, 0.70), 0 0 10px rgba(0,200,50,0.18) !important; /* Text */ color: #001A00 !important; -webkit-text-fill-color: #001A00 !important; text-shadow: 0 1px 0 rgba(160,255,160,0.50) !important; font-weight: 900 !important; transition: all 0.20s ease !important; } .kd-cta-glass:hover { background: linear-gradient(145deg, #002200 0%, #006618 8%, #00CC3C 22%, #00EE50 35%, #AAFFAA 50%, #00EE50 65%, #00CC3C 78%, #006618 90%, #002200 100%) !important; transform: translateY(-1.5px) !important; box-shadow: inset 0 2px 0 rgba(200,255,200,0.80), inset 0 -2px 0 rgba(0, 20, 0, 0.60), 0 0 16px rgba(0,220,60,0.30) !important; color: #001200 !important; -webkit-text-fill-color: #001200 !important; } .kd-cta-glass:active { transform: translateY(0) !important; box-shadow: inset 0 2px 4px rgba(0,20,0,0.50), inset 0 -1px 0 rgba(160,255,160,0.25) !important; } /* ═══════════════════════════════════════════════════════════════════════ BUILD 112 — kd-link-glass override: 螢光綠 + 黑字 Matches kd-cta-glass treatment for consistent first-card buttons (GitHub 核心 / arXiv 論文 links) ═══════════════════════════════════════════════════════════════════════ */ .kd-link-glass { background: linear-gradient(145deg, #001A00 0%, #004A12 8%, #00A830 22%, #00CC40 35%, #88FF88 50%, #00CC40 65%, #00A830 78%, #004A12 90%, #001A00 100%) !important; border: none !important; border-top: 1.5px solid rgba(160,255,160,0.85) !important; border-left: 1px solid rgba(100,220,120,0.55) !important; border-right: 1px solid rgba(0, 40, 10, 0.55) !important; border-bottom: 2px solid rgba(0, 20, 0, 0.85) !important; box-shadow: inset 0 2px 0 rgba(180,255,180,0.70), inset 0 -2px 0 rgba(0, 20, 0, 0.70), 0 0 10px rgba(0,200,50,0.18) !important; color: #001A00 !important; -webkit-text-fill-color: #001A00 !important; text-shadow: 0 1px 0 rgba(160,255,160,0.50) !important; font-weight: 900 !important; transition: all 0.20s ease !important; } .kd-link-glass:hover { background: linear-gradient(145deg, #002200 0%, #006618 8%, #00CC3C 22%, #00EE50 35%, #AAFFAA 50%, #00EE50 65%, #00CC3C 78%, #006618 90%, #002200 100%) !important; transform: translateY(-1.5px) !important; box-shadow: inset 0 2px 0 rgba(200,255,200,0.80), inset 0 -2px 0 rgba(0, 20, 0, 0.60), 0 0 16px rgba(0,220,60,0.30) !important; color: #001200 !important; -webkit-text-fill-color: #001200 !important; } .kd-link-glass:active { transform: translateY(0) !important; } /* ═══════════════════════════════════════════════════════════════════════ BUILD 113 — SECTION SHADING CORRECTION Fix B110 mistake: warm vs cool hue alternation is wrong. Rule: SAME color family, different grayscale lightness ONLY. Night: all in warm-neutral black family (no blue-black switching) Day: all in pure neutral gray (no warm/cool hue alternation) ═══════════════════════════════════════════════════════════════════════ */ /* ── NIGHT MODE: Uniform warm-neutral dark, lightness-only difference ─ */ html[data-theme="night"] #matrix, html[data-theme="night"] #blueprint, html[data-theme="night"] #partner-teaser { background: #0F0D0B !important; /* +3 steps lighter than base */ } html[data-theme="night"] #governance, html[data-theme="night"] #news, html[data-theme="night"] #rss-news-section { background: #121009 !important; /* +6 steps lighter than base */ } html[data-theme="night"] #video-zone, html[data-theme="night"] #onboard { background: #100E0C !important; /* +4 steps — between bands */ } /* ── DAY MODE: Pure neutral gray, no hue at all ──────────────────── */ html[data-theme="day"] #matrix, html[data-theme="day"] #blueprint, html[data-theme="day"] #partner-teaser { background: #F4F4F4 !important; /* neutral light gray */ } html[data-theme="day"] #governance, html[data-theme="day"] #news, html[data-theme="day"] #rss-news-section { background: #EBEBEB !important; /* neutral mid-gray */ } html[data-theme="day"] #video-zone, html[data-theme="day"] #onboard { background: #F0F0F0 !important; /* neutral between */ } html[data-theme="day"] #hero { background: #F2F2F2 !important; } /* ═══════════════════════════════════════════════════════════════════════ BUILD 114 — PURE GRAYSCALE SECTION SHADING (FINAL) Overrides B110 + B113 with simple 2-value alternation, ZERO hue. Day: #FFFFFF (white) ↔ #F2F2F2 (light gray) Night: #0D0D0D (pure black) ↔ #1C1C1C (charcoal gray) All other colors removed. ═══════════════════════════════════════════════════════════════════════ */ /* ── NIGHT MODE: black / charcoal alternation ─────────────────────── */ html[data-theme="night"] #hero { background: #0D0D0D !important; } html[data-theme="night"] #matrix { background: #1C1C1C !important; } html[data-theme="night"] #governance { background: #0D0D0D !important; } html[data-theme="night"] #blueprint { background: #1C1C1C !important; } html[data-theme="night"] #video-zone { background: #0D0D0D !important; } html[data-theme="night"] #news { background: #1C1C1C !important; } html[data-theme="night"] #rss-news-section { background: #1C1C1C !important; } html[data-theme="night"] #partner-teaser { background: #0D0D0D !important; } html[data-theme="night"] #onboard { background: #1C1C1C !important; } /* ── DAY MODE: white / light-gray alternation ─────────────────────── */ html[data-theme="day"] #hero { background: #FFFFFF !important; } html[data-theme="day"] #matrix { background: #F2F2F2 !important; } html[data-theme="day"] #governance { background: #FFFFFF !important; } html[data-theme="day"] #blueprint { background: #F2F2F2 !important; } html[data-theme="day"] #video-zone { background: #FFFFFF !important; } html[data-theme="day"] #news { background: #F2F2F2 !important; } html[data-theme="day"] #rss-news-section { background: #F2F2F2 !important; } html[data-theme="day"] #partner-teaser { background: #FFFFFF !important; } html[data-theme="day"] #onboard { background: #F2F2F2 !important; } /* knowledge-directory & whitepaper keep own distinct card treatments */ /* ═══════════════════════════════════════════════════════════════════════ BUILD 115 — #partner-teaser DAY MODE CONTRAST FIX All text/chip colors redesigned for white #F2F2F2 background. Night mode unchanged (original light-on-dark palette kept). ═══════════════════════════════════════════════════════════════════════ */ /* h2: gold-on-white is unreadable → use near-black + amber gradient */ html[data-theme="day"] #partner-teaser h2 { color: #1A1000 !important; } html[data-theme="day"] #partner-teaser .pt-gold { background: linear-gradient(135deg, #7A3E00, #C8941A 45%, #7A3E00) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* Subtitle: amber-translucent → dark amber */ html[data-theme="day"] #partner-teaser .pt-sub { color: #6B4400 !important; } /* Stats value: light gold → dark amber/brown */ html[data-theme="day"] #partner-teaser .pt-stat .val { color: #8B5E00 !important; } /* Stats label: near-invisible light-blue → dark neutral */ html[data-theme="day"] #partner-teaser .pt-stat .lbl { color: rgba(30, 20, 5, 0.65) !important; } /* Chips (hamburgers): invisible light-yellow border → visible dark amber */ html[data-theme="day"] #partner-teaser .pt-chip { border: 1px solid rgba(120, 80, 10, 0.55) !important; background: rgba(200, 148, 26, 0.10) !important; color: #5A3A08 !important; } /* Badge border: barely visible on white → slightly stronger */ html[data-theme="day"] #partner-teaser .pt-badge { border-color: rgba(10, 186, 181, 0.55) !important; background: rgba(10, 186, 181, 0.08) !important; color: #007570 !important; } html[data-theme="day"] #partner-teaser .pt-badge .pt-dot { background: #007570 !important; box-shadow: 0 0 6px rgba(0, 117, 112, 0.45) !important; }