/* ═══════════════════════════════════════════════════ SCARS — global.css Design tokens, reset, cursor, curtain, theme toggle. Loaded first on every page. ═══════════════════════════════════════════════════ */ /* ── DESIGN TOKENS ── */ :root { --bg: #07070a; --bg2: #0d0d11; --bg3: #111116; --text: #ece8e0; --dim: #8a857e; --dim2: #bcb8b2; --gold: #c9a55c; --amber: #f0a830; --gold-a: rgba(201,165,92,.10); --border: rgba(255,255,255,.10); --border-gold: rgba(201,165,92,.25); --green: #3ecf6e; --red: #e05a5a; --blue: #507fff; /* Vertical palette — reference from any page */ --clr-edu: #50c864; --clr-tech: #507fff; --clr-food: #ff8c3c; --clr-pharma: #c850ff; --clr-orders: #3cc8dc; --clr-vent: #ff3cb4; --clr-invest: #f0a830; /* Override per vertical: */ --accent: var(--amber); --accent-a: rgba(240,168,48,.08); --accent-b: rgba(240,168,48,.18); } /* ── LIGHT THEME — warm editorial paper ── */ body.light { /* Backgrounds: aged parchment, layered */ --bg: #f8f4ee; --bg2: #f0ebe1; --bg3: #e8e1d4; /* Typography: rich espresso, not pure black */ --text: #1c1814; --dim: #9c9590; --dim2: #5c5550; /* Gold shifts warmer and darker for contrast on cream */ --gold: #9a6c1e; --amber: #b87d1c; --gold-a: rgba(154,108,30,.10); /* Borders: warm ink lines */ --border: rgba(28,24,20,.13); --border-gold: rgba(154,108,30,.28); /* Greens + colours stay readable on cream */ --green: #22883a; --red: #c0392b; --blue: #2c5fcc; } /* Light-mode surface elevations */ body.light #curtain { background: var(--bg); } body.light #theme-toggle { background: var(--bg2); box-shadow: 0 4px 24px rgba(0,0,0,.08); border-color: var(--border); } /* Make grain slightly more visible on light — gives paper texture */ body.light::after { opacity:.028; } /* ── OLED THEME — true black for AMOLED screens ── */ body.oled { --bg: #000000; --bg2: #0a0a0a; --bg3: #111111; --text: #f0ece4; --dim: #4a4846; --dim2: #8a8680; --gold: #c9a55c; --amber: #f0a830; --border: rgba(255,255,255,.08); } body.oled #curtain { background: #000; } body.oled #theme-toggle { background: #0a0a0a; } /* OLED makes glow effects pop harder */ body.oled .blk:hover { background: #050505 !important; } body.oled #search-overlay { background: rgba(0,0,0,.97); } body.oled #notif-menu, body.oled #profile-menu { background: #0a0a0a; } /* ── THE BRANDED "A" — italic, in the page's accent colour ── Wrap the A of any "SCARS" wordmark in A. --accent is set per page (amber on main pages, the vertical colour on coming-soon pages), so the A always matches that page's accent. */ .scars-a{ color: var(--accent, #f0a830); font-style: italic; } /* ── FONT STYLE OVERRIDES ── */ /* Applied via data-font-style on , set by shared.js from localStorage */ /* Modern: replace editorial serif with Inter */ body[data-font-style="modern"] h1, body[data-font-style="modern"] h2, body[data-font-style="modern"] h3, body[data-font-style="modern"] .h-big, body[data-font-style="modern"] .h-sub, body[data-font-style="modern"] .ht-manifesto, body[data-font-style="modern"] .blk-title, body[data-font-style="modern"] .feat-title, body[data-font-style="modern"] .nc-title, body[data-font-style="modern"] .nc-desc, body[data-font-style="modern"] .sf-d-title, body[data-font-style="modern"] .sf-tagline, body[data-font-style="modern"] .hero-h1, body[data-font-style="modern"] [style*="Cormorant Garamond"] { font-family: 'Inter', sans-serif !important; } /* Editorial: Playfair Display */ body[data-font-style="editorial"] h1,body[data-font-style="editorial"] h2,body[data-font-style="editorial"] h3, body[data-font-style="editorial"] .h-big,body[data-font-style="editorial"] .h-sub, body[data-font-style="editorial"] .blk-title,body[data-font-style="editorial"] .feat-title, body[data-font-style="editorial"] .nc-title,body[data-font-style="editorial"] .nc-desc, body[data-font-style="editorial"] .sf-d-title,body[data-font-style="editorial"] .sf-tagline, body[data-font-style="editorial"] [style*="Cormorant Garamond"] { font-family: 'Playfair Display', serif !important; } /* Times New Roman */ body[data-font-style="times"] h1,body[data-font-style="times"] h2,body[data-font-style="times"] h3, body[data-font-style="times"] .h-big,body[data-font-style="times"] .h-sub, body[data-font-style="times"] .blk-title,body[data-font-style="times"] .feat-title, body[data-font-style="times"] .nc-title,body[data-font-style="times"] .nc-desc, body[data-font-style="times"] .sf-d-title,body[data-font-style="times"] .sf-tagline, body[data-font-style="times"] p, body[data-font-style="times"] [style*="Cormorant Garamond"] { font-family: 'Times New Roman', Times, serif !important; } /* Comic Sans */ body[data-font-style="comic"] h1,body[data-font-style="comic"] h2,body[data-font-style="comic"] h3, body[data-font-style="comic"] .h-big,body[data-font-style="comic"] .h-sub, body[data-font-style="comic"] .blk-title,body[data-font-style="comic"] .feat-title, body[data-font-style="comic"] .nc-title,body[data-font-style="comic"] .nc-desc, body[data-font-style="comic"] p, body[data-font-style="comic"] [style*="Cormorant Garamond"] { font-family: 'Comic Sans MS', 'Comic Sans', cursive !important; letter-spacing: 0.3px; } /* Mono — JetBrains Mono */ body[data-font-style="mono"] h1,body[data-font-style="mono"] h2,body[data-font-style="mono"] h3, body[data-font-style="mono"] .h-big,body[data-font-style="mono"] .h-sub, body[data-font-style="mono"] .blk-title,body[data-font-style="mono"] .feat-title, body[data-font-style="mono"] .nc-title,body[data-font-style="mono"] .nc-desc, body[data-font-style="mono"] p, body[data-font-style="mono"] [style*="Cormorant Garamond"] { font-family: 'JetBrains Mono', Consolas, 'Courier New', monospace !important; letter-spacing: -0.5px; font-size: .92em; } /* Rounded — Nunito */ body[data-font-style="rounded"] h1,body[data-font-style="rounded"] h2,body[data-font-style="rounded"] h3, body[data-font-style="rounded"] .h-big,body[data-font-style="rounded"] .h-sub, body[data-font-style="rounded"] .blk-title,body[data-font-style="rounded"] .feat-title, body[data-font-style="rounded"] .nc-title,body[data-font-style="rounded"] .nc-desc, body[data-font-style="rounded"] p, body[data-font-style="rounded"] [style*="Cormorant Garamond"] { font-family: 'Nunito', sans-serif !important; font-weight: 600 !important; } /* Lora serif */ body[data-font-style="lora"] h1,body[data-font-style="lora"] h2,body[data-font-style="lora"] h3, body[data-font-style="lora"] .h-big,body[data-font-style="lora"] .h-sub, body[data-font-style="lora"] .blk-title,body[data-font-style="lora"] .feat-title, body[data-font-style="lora"] .nc-title,body[data-font-style="lora"] .nc-desc, body[data-font-style="lora"] p, body[data-font-style="lora"] [style*="Cormorant Garamond"] { font-family: 'Lora', Georgia, serif !important; } /* ── RESET ── */ *,*::before,*::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; } body { background: var(--bg); color: var(--text); font-family: 'Barlow Condensed', sans-serif; font-weight: 400; cursor: none; overflow-x: hidden; } /* ── GRAIN TEXTURE ── */ body::after { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); background-size: 180px; opacity: .032; pointer-events: none; z-index: 8000; } body.light::after { opacity: .015; } /* ── CURSOR ── */ #trail-canvas { position:fixed; inset:0; z-index:50; pointer-events:none; will-change:contents; } #cd { position:fixed; width:8px; height:8px; background:var(--accent,var(--gold)); border-radius:50%; pointer-events:none; z-index:9999; top:0; left:0; will-change:transform; transition:width .25s,height .25s,background .25s; } #cr { position:fixed; width:40px; height:40px; border:1px solid var(--accent-ring, rgba(201,165,92,.3)); border-radius:50%; pointer-events:none; z-index:9998; top:0; left:0; will-change:transform; transition:width .3s,height .3s,border-color .3s,border-radius .3s; } body.ch #cd { width:12px; height:12px; } body.ch #cr { width:64px; height:64px; border-color:var(--accent-ring-hover, rgba(201,165,92,.5)); } body.ach #cd { width:6px; height:6px; background:#fff; opacity:.6; } body.ach #cr { width:96px; height:96px; border-color:rgba(201,165,92,.7); border-width:1.5px; border-radius:0; } /* ── PAGE CURTAIN ── */ #curtain { position:fixed; inset:0; background:var(--bg); z-index:7000; transform:scaleY(1); transform-origin:top; transition:transform .8s cubic-bezier(.77,0,.18,1); } #curtain.open { transform:scaleY(0); pointer-events:none; } body.light #curtain { background:#f4f0e8; } /* ── THEME TOGGLE ── */ #theme-toggle { position:fixed; bottom:36px; right:36px; z-index:400; width:48px; height:48px; border-radius:50%; background:var(--bg2,#111); border:1px solid var(--border); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .4s,border-color .4s,transform .3s; box-shadow:0 4px 24px rgba(0,0,0,.3); } #theme-toggle:hover { transform:scale(1.1); } #theme-toggle svg { width:20px; height:20px; transition:opacity .3s,transform .4s; } #t-moon { position:absolute; } #t-sun { position:absolute; opacity:0; transform:rotate(90deg); } body.light #t-moon { opacity:0; transform:rotate(-90deg); } body.light #t-sun { opacity:1; transform:rotate(0deg); } body.light #theme-toggle { background:#ede8dc; box-shadow:0 4px 24px rgba(0,0,0,.12); } /* ── CHATBOT LAUNCHER (placeholder — coming soon) ── */ #chatbot-toggle { position:fixed; bottom:100px; right:36px; z-index:401; width:48px; height:48px; border-radius:50%; background:var(--bg2,#111); border:1px solid var(--border); color:var(--accent, var(--amber)); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .4s, border-color .4s, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; box-shadow:0 4px 24px rgba(0,0,0,.3); } #chatbot-toggle svg { width:21px; height:21px; } #chatbot-toggle:hover{ transform:scale(1.1); box-shadow:0 0 0 8px color-mix(in srgb, var(--accent, var(--amber)) 12%, transparent), 0 4px 24px rgba(0,0,0,.3); } #chatbot-toggle.active{ transform:scale(.92); } body.light #chatbot-toggle{ background:#ede8dc; box-shadow:0 4px 24px rgba(0,0,0,.12); } #chatbot-toggle .cb-dot{ position:absolute; top:7px; right:7px; width:8px; height:8px; border-radius:50%; background:var(--accent, var(--amber)); animation: cbPulse 2.4s ease-out infinite; } #chatbot-toggle .cb-badge{ position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 4px; border-radius:50%; background:var(--accent, var(--amber)); color:#0b0b0e; font-style:normal; font-size:10px; font-weight:700; line-height:18px; text-align:center; box-shadow:0 2px 10px rgba(0,0,0,.35); transform:scale(1); transition:transform .3s cubic-bezier(.16,1,.3,1), opacity .3s ease; animation: cbBadgeBounce 2.6s ease-in-out infinite; } #chatbot-toggle .cb-badge.hide{ transform:scale(0); opacity:0; } #chatbot-toggle .cb-tip{ position:absolute; right:60px; top:50%; transform:translateY(-50%) translateX(6px); background:var(--bg2,#111); border:1px solid var(--border); color:var(--text); font-size:10.5px; letter-spacing:2px; text-transform:uppercase; white-space:nowrap; padding:8px 15px; border-radius:8px; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; box-shadow:0 8px 24px rgba(0,0,0,.3); } #chatbot-toggle:hover .cb-tip{ opacity:1; transform:translateY(-50%) translateX(0); } /* ── CHAT PANEL ── */ #chatbot-panel{ position:fixed; bottom:164px; right:36px; z-index:402; width:336px; max-width:calc(100vw - 48px); max-height:440px; background:var(--bg2,#111); border:1px solid var(--border); border-radius:18px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 64px rgba(0,0,0,.45); transform-origin:bottom right; transform:scale(.4) translateY(36px); opacity:0; pointer-events:none; transition:transform .45s cubic-bezier(.16,1,.3,1), opacity .25s ease; } #chatbot-panel.open{ transform:scale(1) translateY(0); opacity:1; pointer-events:auto; } #chatbot-panel .cb-head{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--border); background:linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--amber)) 14%, transparent), transparent); } #chatbot-panel .cb-avatar{ flex:none; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--accent, var(--amber)) 16%, var(--bg)); color:var(--accent, var(--amber)); } #chatbot-panel .cb-avatar svg{ width:19px; height:19px; } #chatbot-panel .cb-id{ flex:1; min-width:0; } #chatbot-panel .cb-name{ font-size:14px; letter-spacing:.5px; font-weight:600; color:var(--text); } #chatbot-panel .cb-name .a{ color:var(--accent, var(--amber)); font-style:italic; } #chatbot-panel .cb-status{ display:flex; align-items:center; gap:6px; font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--dim2); margin-top:3px; } #chatbot-panel .cb-status i{ width:6px; height:6px; border-radius:50%; background:#50c864; box-shadow:0 0 8px #50c864; display:inline-block; animation: cbBlink 1.8s ease-in-out infinite; } #chatbot-panel .cb-close{ flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--border); background:transparent; color:var(--dim2); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s ease, color .2s ease, transform .35s cubic-bezier(.16,1,.3,1); } #chatbot-panel .cb-close svg{ width:14px; height:14px; } #chatbot-panel .cb-close:hover{ background:var(--border); color:var(--text); transform:rotate(90deg); } #chatbot-panel .cb-body{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:10px; scroll-behavior:smooth; } #chatbot-panel .cb-msg{ display:flex; } #chatbot-panel .cb-msg-user{ justify-content:flex-end; } #chatbot-panel .cb-bubble{ max-width:82%; padding:11px 15px; border-radius:14px 14px 14px 4px; background:var(--bg3, rgba(255,255,255,.05)); border:1px solid var(--border); color:var(--text); font-size:12.5px; line-height:1.65; animation: cbRise .4s cubic-bezier(.16,1,.3,1) backwards; } #chatbot-panel .cb-msg-user .cb-bubble{ background:color-mix(in srgb, var(--accent, var(--amber)) 20%, var(--bg3, rgba(255,255,255,.05))); border-color:color-mix(in srgb, var(--accent, var(--amber)) 35%, var(--border)); border-radius:14px 14px 4px 14px; color:var(--text); } #chatbot-panel .cb-bubble strong{ color:var(--accent, var(--amber)); font-weight:600; } #chatbot-panel .cb-typing{ display:flex; gap:4px; align-items:center; padding:14px 17px; } #chatbot-panel .cb-typing i{ width:6px; height:6px; border-radius:50%; background:var(--dim2); animation: cbTyping 1.2s ease-in-out infinite; } #chatbot-panel .cb-typing i:nth-child(2){ animation-delay:.15s; } #chatbot-panel .cb-typing i:nth-child(3){ animation-delay:.3s; } /* quick-reply suggestion chips */ #chatbot-panel .cb-quick{ display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 12px; } #chatbot-panel .cb-chip{ border:1px solid var(--border); background:var(--bg3, rgba(255,255,255,.04)); color:var(--dim2); font-size:11px; font-family:inherit; letter-spacing:.3px; padding:7px 13px; border-radius:99px; cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s cubic-bezier(.16,1,.3,1); animation: cbRise .4s cubic-bezier(.16,1,.3,1) backwards; } #chatbot-panel .cb-chip:nth-child(1){ animation-delay:.15s; } #chatbot-panel .cb-chip:nth-child(2){ animation-delay:.25s; } #chatbot-panel .cb-chip:nth-child(3){ animation-delay:.35s; } #chatbot-panel .cb-chip:hover{ color:var(--text); border-color:color-mix(in srgb, var(--accent, var(--amber)) 50%, var(--border)); background:color-mix(in srgb, var(--accent, var(--amber)) 12%, transparent); transform:translateY(-1px); } /* "Notify me" subscribe CTA */ #chatbot-panel .cb-notify{ position:relative; overflow:visible; margin-top:8px; display:inline-flex; align-items:center; gap:6px; border:1px solid color-mix(in srgb, var(--accent, var(--amber)) 45%, var(--border)); background:color-mix(in srgb, var(--accent, var(--amber)) 14%, transparent); color:var(--accent, var(--amber)); font-family:inherit; font-size:11.5px; font-weight:600; letter-spacing:.3px; padding:9px 16px; border-radius:10px; cursor:pointer; transition:transform .25s cubic-bezier(.16,1,.3,1), background .25s ease, color .3s ease, border-color .3s ease; } #chatbot-panel .cb-notify:hover{ transform:translateY(-1px); background:color-mix(in srgb, var(--accent, var(--amber)) 22%, transparent); } #chatbot-panel .cb-notify.done{ color:#50c864; border-color:rgba(80,200,100,.45); background:rgba(80,200,100,.12); cursor:default; transform:none; } #chatbot-panel .cb-confetti{ position:absolute; left:50%; top:50%; width:6px; height:6px; border-radius:2px; pointer-events:none; opacity:1; animation: cbConfetti .9s cubic-bezier(.21,.84,.5,1) forwards; } #chatbot-panel .cb-input{ display:flex; gap:8px; padding:14px 16px; border-top:1px solid var(--border); margin:0; } #chatbot-panel .cb-input input{ flex:1; background:var(--bg3, rgba(255,255,255,.04)); border:1px solid var(--border); border-radius:10px; padding:10px 14px; color:var(--text); font-size:12.5px; font-family:inherit; transition:border-color .2s ease, background .2s ease; } #chatbot-panel .cb-input input::placeholder{ color:var(--dim); } #chatbot-panel .cb-input input:focus{ outline:none; border-color:color-mix(in srgb, var(--accent, var(--amber)) 50%, var(--border)); background:color-mix(in srgb, var(--accent, var(--amber)) 6%, var(--bg3, rgba(255,255,255,.04))); } #chatbot-panel .cb-input button{ flex:none; width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:transparent; color:var(--accent, var(--amber)); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s ease, transform .2s cubic-bezier(.16,1,.3,1), border-color .2s ease; } #chatbot-panel .cb-input button:hover{ background:color-mix(in srgb, var(--accent, var(--amber)) 14%, transparent); border-color:color-mix(in srgb, var(--accent, var(--amber)) 40%, var(--border)); transform:scale(1.06); } #chatbot-panel .cb-input button:active{ transform:scale(.92); } #chatbot-panel .cb-input button svg{ width:16px; height:16px; } @media (max-width: 560px){ #chatbot-toggle{ bottom:92px; right:22px; } #theme-toggle{ bottom:28px; right:22px; } #chatbot-panel{ bottom:152px; right:14px; } } /* ── CURSOR DESIGNS — applied via body[data-cursor] ── */ /* dot only */ body[data-cursor="dot"] #cr { display:none; } /* ring only */ body[data-cursor="ring"] #cd { display:none; } /* glow */ body[data-cursor="glow"] #cd { width:16px; height:16px; background:var(--amber); box-shadow:0 0 18px 6px rgba(240,168,48,.5); } body[data-cursor="glow"] #cr { display:none; } /* crosshair */ body[data-cursor="crosshair"] #cd { width:1px; height:24px; border-radius:0; background:var(--amber); box-shadow:none; } body[data-cursor="crosshair"] #cr { width:24px; height:1px; border-radius:0; border:none; background:var(--amber); transform:translate(calc(VAR_X - 50%), calc(VAR_Y - 50%)); } body[data-cursor="crosshair"] #cr { width:1px; height:0; border:none; border-bottom:24px solid var(--amber); } /* Crosshair via cr as horizontal bar */ body[data-cursor="crosshair"] #cr { width:24px; height:1px; border-radius:0; border:none; background:var(--amber); } /* arrow */ body[data-cursor="arrow"] { cursor:default!important; } body[data-cursor="arrow"] * { cursor:default!important; } body[data-cursor="arrow"] #cd { display:none; } body[data-cursor="arrow"] #cr { width:0; height:0; border:none; border-radius:0; border-left:12px solid transparent; border-top:18px solid var(--amber); background:transparent; box-shadow:none; transition:none; } /* block */ body[data-cursor="block"] #cd { display:none; } body[data-cursor="block"] #cr { width:20px; height:20px; border-radius:0; border:2px solid var(--amber); background:rgba(240,168,48,.08); } /* system — hide custom cursor entirely */ body[data-cursor="none"] { cursor:default!important; } body[data-cursor="none"] * { cursor:default!important; } body[data-cursor="none"] #cd, body[data-cursor="none"] #cr, body[data-cursor="none"] #trail-canvas { display:none!important; } /* Custom Cursor toggle OFF — set by the "Custom Cursor" accessibility switch. Restored on every page by shared.js (body class), so it carries across the site. */ body.no-custom-cursor { cursor:auto!important; } body.no-custom-cursor * { cursor:auto!important; } body.no-custom-cursor #cd, body.no-custom-cursor #cr, body.no-custom-cursor #trail-canvas { display:none!important; } /* Touch devices: there's no persistent mouse pointer, so the custom dot/ring just jumps to wherever the user last tapped. Fall back to the native (invisible) touch cursor and hide the dot/ring/chalk trail entirely. */ @media (hover:none), (pointer:coarse) { body, body * { cursor:auto!important; } #cd, #cr, #trail-canvas { display:none!important; } } /* ── PRINT CSS — Education notes become clean printable docs ── */ @media print { #page-loader, nav, .snav, .ticker-band, #scars-footer-root, footer, #trail-canvas, #cd, #cr, #curtain, #theme-toggle, #chatbot-toggle, #chatbot-panel, #search-overlay, #notif-menu, #profile-menu, #mob-menu, #mob-btn, .ni-btn, .feat-card, .hero, .edu-insight, .h-pills, .hero-r, .hero-stats, .connect-section, #connect, .sc-float, .hero-shapes { display: none !important; } body { background: #fff !important; color: #000 !important; cursor: default !important; font-size: 12pt; } .snav ~ * { margin-top: 0; } #videos { padding: 0; } .sec-title { font-size: 18pt; color: #000; } .sec-kicker { font-size: 8pt; color: #666; letter-spacing: 4px; } .lesson-card { border: 1px solid #ccc; break-inside: avoid; page-break-inside: avoid; } .lesson-title { color: #000; } a { color: #000; text-decoration: none; } a[href]::after { content: none; } @page { margin: 2cm; } h1, h2, h3 { page-break-after: avoid; } } /* ── HIGH CONTRAST MODE ── */ body.high-contrast { --text: #ffffff; --dim2: #d0ccc8; --dim: #a0a0a0; --border: rgba(255,255,255,.3); --bg2: #0a0a0a; } body.high-contrast.light { --text: #000000; --dim2: #222222; --border: rgba(0,0,0,.4); } /* ── GLOBAL HOVER FEEL — smooth, premium ── */ /* All interactive elements get smooth transitions */ button, a, [onclick], [role="button"] { transition: color .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease, transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease; } /* Nav buttons */ .ni-btn:hover { box-shadow: 0 0 0 6px rgba(201,165,92,.08); } .ni-btn:active { transform: scale(.92)!important; } /* Links in footer and nav */ .sf-lnk:hover { letter-spacing: 3.5px; } /* Back link hover */ .n-back:hover svg { transform: translateX(-5px) scale(1.1); } /* Block hover elevation */ .blk { transition: border-color .4s, background .4s, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s; } .blk:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,.4); } .blk.live:hover { box-shadow: 0 12px 40px rgba(0,0,0,.4); } /* Cursor ring smooth spring */ #cr { transition: width .28s cubic-bezier(.16,1,.3,1), height .28s cubic-bezier(.16,1,.3,1), border-color .25s ease, border-radius .28s cubic-bezier(.16,1,.3,1), background .25s ease, border-width .2s ease; } /* Theme toggle hover */ #theme-toggle { transition: background .3s ease, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease; } #theme-toggle:hover { box-shadow: 0 0 0 8px rgba(201,165,92,.08), 0 4px 24px rgba(0,0,0,.3); } /* Input focus feel */ input:focus, textarea:focus, select:focus { outline: none; box-shadow: 0 0 0 2px rgba(240,168,48,.2); } /* OLED — sharper glows */ body.oled .blk:hover { box-shadow: 0 16px 48px rgba(0,0,0,.8); } body.oled .opt-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.6); } body.oled #theme-toggle:hover { box-shadow: 0 0 0 8px rgba(201,165,92,.12); }