/* ============================================================= ORACULUMINUS — GLOBAL THEME & VARIABLES ============================================================= */ :root { /* -------------------------------------------------------- BASE THEME (DARK MODE - DEFAULT) -------------------------------------------------------- */ /* Backgrounds */ --bg: #06060e; --bg2: #12121a; --bg-primary: #0a0a0f; --bg-secondary: #12121a; --bg-dark: #0a0a0f; /* Cards & Surfaces */ --card: rgba(255, 255, 255, 0.025); --bg-card: rgba(255, 255, 255, 0.03); --bg-card-h: rgba(255, 255, 255, 0.055); --bg-card-hover: rgba(26, 26, 36, 0.9); /* Borders */ --border: rgba(255, 255, 255, 0.07); --border-color: rgba(255, 255, 255, 0.08); --border-h: rgba(212, 175, 55, 0.35); --border-hover: rgba(212, 175, 55, 0.3); /* Text & Typography */ --txt: #f0f0f5; --txt2: #9ca3af; --txt3: #6b7280; --text-primary: #f0f0f0; --text-secondary: #a0a0a0; --text-muted: #666; /* Fonts */ --fd: 'Cormorant Garamond', Georgia, serif; --fb: 'DM Sans', system-ui, sans-serif; --r: 1rem; --e: cubic-bezier(.4, 0, .2, 1); /* Colors - Brand Gold */ --gold: #d4af37; --gold-l: #f4e4a6; --gold-light: #f4e4a6; --gold-d: rgba(212, 175, 55, 0.12); --gold-dim: rgba(212, 175, 55, 0.15); --gold-glow: rgba(212, 175, 55, 0.4); /* Colors - Purple (Used as default accent in some places) */ --purple: #a78bfa; --purple-d: rgba(167, 139, 250, 0.12); } /* -------------------------------------------------------- LIGHT THEME OVERRIDES (FROST / PEARL AESTHETIC) -------------------------------------------------------- Note: only neutral tokens (bg, surface, text, border) are overridden globally. Per-page accents live in [data-page] maps further below so that each service keeps its identity colour in both themes. */ html.light-theme, body.light-theme { /* Backgrounds: Soft pearl/silver with a very subtle warmth */ --bg: #f8f9fa; --bg2: #ffffff; --bg-primary: #f8f9fa; --bg-secondary: #ffffff; --bg-dark: #f0f2f5; /* Cards & Surfaces: Premium Frosted Glass (White) */ --card: rgba(255, 255, 255, 0.6); --bg-card: rgba(255, 255, 255, 0.65); --bg-card-h: rgba(255, 255, 255, 0.85); --bg-card-hover: rgba(255, 255, 255, 1); --glass-bg: rgba(255, 255, 255, 0.7); /* Borders: subtle slate lines that read on white without going cheap */ --border: rgba(15, 23, 42, 0.08); --border-color: rgba(15, 23, 42, 0.1); --border-h: rgba(15, 23, 42, 0.18); --border-hover: rgba(15, 23, 42, 0.18); /* Text & Typography: Rich Charcoal and Soft Slate */ --txt: #1a1a24; --txt2: #4a5568; --txt3: #718096; --text-primary: #1a1a24; --text-secondary: #4a5568; --text-muted: #718096; /* Brand Gold — used by sh-logo gradient and a few neutral chrome elements */ --gold: #b8860b; --gold-l: #d4a017; --gold-light: #d4a017; --gold-d: rgba(184, 134, 11, 0.12); --gold-dim: rgba(184, 134, 11, 0.18); --gold-glow: rgba(184, 134, 11, 0.25); /* Default accent (gold) — overridden per [data-page] below */ --accent: #b8860b; --accent-light: #d4a017; --accent-dark: #8e6808; --accent-glow: rgba(184, 134, 11, 0.25); --accent-subtle: rgba(184, 134, 11, 0.08); } /* -------------------------------------------------------- PER-PAGE ACCENT MAP — preserves service identity colour in light mode. Each overrides the accent tokens that the local :root cannot reach when light theme rewrites them. -------------------------------------------------------- */ html.light-theme body[data-page="tarot"] { --accent: #c026d3; --accent-light: #e879f9; --accent-dark: #86198f; --accent-glow: rgba(192, 38, 211, 0.22); --accent-subtle: rgba(192, 38, 211, 0.08); } html.light-theme body[data-page="horoscopo"] { --accent: #7c3aed; --accent-light: #a78bfa; --accent-dark: #5b21b6; --accent-glow: rgba(124, 58, 237, 0.22); --accent-subtle: rgba(124, 58, 237, 0.08); } html.light-theme body[data-page="sonhos"] { --accent: #2563eb; --accent-light: #60a5fa; --accent-dark: #1d4ed8; --accent-glow: rgba(37, 99, 235, 0.22); --accent-subtle: rgba(37, 99, 235, 0.08); } html.light-theme body[data-page="pet"] { --accent: #059669; --accent-light: #34d399; --accent-dark: #047857; --accent-glow: rgba(5, 150, 105, 0.22); --accent-subtle: rgba(5, 150, 105, 0.08); } html.light-theme body[data-page="mapa-astral"] { --accent: #c2410c; --accent-light: #f97316; --accent-dark: #9a3412; --accent-glow: rgba(194, 65, 12, 0.22); --accent-subtle: rgba(194, 65, 12, 0.08); } html.light-theme body[data-page="grimorio"] { --accent: #7e22ce; --accent-light: #c084fc; --accent-dark: #6b21a8; --accent-glow: rgba(126, 34, 206, 0.22); --accent-subtle: rgba(126, 34, 206, 0.08); } html.light-theme body[data-page="conta"] { --accent: #475569; --accent-light: #94a3b8; --accent-dark: #334155; --accent-glow: rgba(71, 85, 105, 0.22); --accent-subtle: rgba(71, 85, 105, 0.08); } html.light-theme body[data-page="compatibilidade"] { --accent: #be185d; --accent-light: #f472b6; --accent-dark: #9d174d; --accent-glow: rgba(190, 24, 93, 0.22); --accent-subtle: rgba(190, 24, 93, 0.08); } html.light-theme body[data-page="login"] { --accent: #6d28d9; --accent-light: #8b5cf6; --accent-dark: #5b21b6; --accent-glow: rgba(109, 40, 217, 0.22); --accent-subtle: rgba(109, 40, 217, 0.08); } /* ========================================================= PREMIUM LIGHT MODE EFFECTS Keep the same magical depth in light — soft pearl base with subtle accent-tinted orbs + visible "ink" stars. ========================================================= */ /* Soft pearl backdrop with depth gradient — multi-layer premium */ html.light-theme .bg-effects, html.light-theme .atm { background: radial-gradient(ellipse 90% 50% at 50% -10%, var(--accent-subtle) 0%, transparent 55%), radial-gradient(ellipse 70% 40% at 100% 100%, var(--accent-subtle) 0%, transparent 55%), radial-gradient(circle at 15% 85%, rgba(184, 134, 11, .035) 0%, transparent 45%), conic-gradient(from 220deg at 50% 50%, #ffffff 0%, #f6f7fa 25%, #eef0f5 50%, #f6f7fa 75%, #ffffff 100%) !important; background-attachment: fixed !important; } /* For pages with body-level background (no .bg-effects/.atm) */ html.light-theme body { background: radial-gradient(ellipse 90% 50% at 50% -10%, var(--accent-subtle) 0%, transparent 55%), radial-gradient(ellipse 70% 40% at 100% 100%, var(--accent-subtle) 0%, transparent 55%), linear-gradient(135deg, #fafbfc 0%, #f4f5f8 50%, #eef0f5 100%) fixed; } /* Subtle paper grain — only on light theme, behind everything */ html.light-theme body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.4; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: multiply; } /* Re-tint orbs so they remain visible without burning the eye */ html.light-theme .orb, html.light-theme .orb1, html.light-theme .orb2, html.light-theme .orb3 { opacity: .55; filter: blur(100px) saturate(.85); } html.light-theme .orb1 { background: radial-gradient(circle, var(--accent-glow), transparent 70%) !important; } html.light-theme .orb2 { background: radial-gradient(circle, var(--accent-subtle), transparent 70%) !important; } html.light-theme .orb3 { background: radial-gradient(circle, rgba(184, 134, 11, .12), transparent 70%) !important; } /* Stars: become subtle "ink" specks instead of white dots */ html.light-theme .star { background: var(--accent) !important; box-shadow: 0 0 4px var(--accent-glow); } /* Soft glow halos (used by some pages) */ html.light-theme .bg-glow { opacity: 0.35 !important; background: radial-gradient(circle, var(--accent-subtle) 0%, transparent 70%) !important; } /* AGGRESSIVE LIGHT THEME OVERRIDES (To combat hardcoded inline styles in legacy files) */ html.light-theme body, html.light-theme .page-wrapper, html.light-theme main { background: var(--bg) !important; color: var(--txt) !important; } /* Navbar Fixes */ html.light-theme .site-header, html.light-theme nav, html.light-theme header { background: rgba(248, 249, 250, 0.9) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; } html.light-theme .site-header .sh-nav-link, html.light-theme .site-header .sh-user-name, html.light-theme .sh-theme-toggle, html.light-theme .nav-a a, html.light-theme .u-nm { color: var(--txt2) !important; } html.light-theme .site-header .sh-nav-link:hover, html.light-theme .sh-theme-toggle:hover, html.light-theme .nav-a a:hover { color: var(--accent) !important; background: rgba(0, 0, 0, 0.05) !important; } /* Chat Input Areas & Textboxes */ html.light-theme .input-area { background: rgba(255, 255, 255, 0.85) !important; border-top: 1px solid rgba(0, 0, 0, 0.08) !important; border-color: rgba(0, 0, 0, 0.08) !important; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.03) !important; } html.light-theme textarea, html.light-theme input, html.light-theme .question-input { background: rgba(0, 0, 0, 0.03) !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; color: var(--txt) !important; } html.light-theme textarea:focus, html.light-theme input:focus { background: #fff !important; border-color: var(--accent) !important; } /* Button Contrast Fixes — page-level primary CTAs use a dark pill in light mode to avoid the gold-on-white legibility trap. `.gcm-cta` is intentionally excluded so the guest modal keeps the per-page service accent. */ html.light-theme .btn-primary, html.light-theme .btn-consult, html.light-theme .sh-upgrade-btn { background: #1a1a24 !important; color: #f8f9fa !important; border: 1px solid #0a0a0f !important; } html.light-theme .btn-primary:hover, html.light-theme .btn-consult:hover, html.light-theme .sh-upgrade-btn:hover { background: #000 !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important; } html.light-theme h1, html.light-theme h2, html.light-theme h3, html.light-theme h4, html.light-theme h5, html.light-theme h6 { color: var(--txt); } html.light-theme .page-title { color: var(--accent); } html.light-theme p, html.light-theme .page-subtitle { color: var(--txt2); } html.light-theme strong, html.light-theme b { color: var(--txt); } html.light-theme .card, html.light-theme [class$="-card"], html.light-theme [class*="-card "], html.light-theme [class*="modal-content"], html.light-theme .gcm-card, html.light-theme .history-card, html.light-theme .history-item { background: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--txt) !important; } html.light-theme .history-item { background: rgba(255, 255, 255, 0.8) !important; } html.light-theme .history-q { color: var(--txt) !important; } html.light-theme .history-a { color: var(--txt2) !important; } /* Oráculo / Tarot Specific Chat & Content Overrides */ html.light-theme #chatArea, html.light-theme .chat-container, html.light-theme .ritual-overlay { background: transparent !important; } html.light-theme .chat-message.user { background: rgba(26, 26, 36, 0.05) !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; color: var(--txt) !important; } html.light-theme .chat-message.oracle { background: rgba(255, 255, 255, 0.9) !important; border: 1px solid rgba(212, 175, 55, 0.3) !important; color: var(--txt) !important; } html.light-theme .welcome-message { background: rgba(255, 255, 255, 0.8) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; color: var(--txt) !important; } html.light-theme .typing-indicator span { background-color: var(--accent) !important; } /* Force inline styles that use white to use dark in light mode */ html.light-theme *[style*="color:rgba(255,255,255"] { color: var(--txt2) !important; } html.light-theme *[style*="color:#fff"], html.light-theme *[style*="color: #fff"] { color: var(--txt) !important; } /* Global utility classes for micro-animations & layout improvements */ .sh-theme-toggle { background: none; border: none; color: var(--txt2, #9ca3af); cursor: pointer; padding: 6px; margin-right: 5px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: color 0.2s, background 0.2s; } .sh-theme-toggle:hover { color: var(--gold, #d4af37); background: rgba(255, 255, 255, 0.05); } .light-theme .sh-theme-toggle:hover { background: rgba(0, 0, 0, 0.05); } @media (max-width: 600px) { .logo-t { font-size: 1.1rem !important; /* Reduce size instead of hiding */ margin-left: 4px !important; } .logo svg { width: 28px !important; height: 28px !important; } .sh-theme-toggle { padding: 2px !important; margin-right: 0 !important; } .sh-theme-toggle svg { width: 16px !important; height: 16px !important; } } .smooth-transition { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .hover-lift:hover { transform: translateY(-2px); } /* ========================================================= 1. TYPOGRAPHY REFINEMENTS ========================================================= */ h1, h2, h3, h4, h5, h6, .page-title, .section-title { font-family: var(--fd); letter-spacing: 0.03em; line-height: 1.25; } p { line-height: 1.7; letter-spacing: 0.01em; } /* ========================================================= 2. GLASSMORPHISM ENHANCEMENTS (BEM card containers only) ========================================================= */ div.card, div[class$="-card"], div[class*="-card "], div.panel, div[class$="-panel"], div[class*="-panel "] { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease; } /* Refined hover state for anything that looks like a card */ div.card:hover:not(.sh-card), div[class$="-card"]:hover:not(.sh-card), div[class*="-card "]:hover:not(.sh-card) { border-color: var(--border-h, rgba(212, 175, 55, 0.4)); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 0 20px rgba(212, 175, 55, 0.05); } .light-theme div.card:hover:not(.sh-card), .light-theme div[class$="-card"]:hover:not(.sh-card), .light-theme div[class*="-card "]:hover:not(.sh-card) { box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05), 0 0 20px rgba(184, 150, 46, 0.1); } /* ========================================================= 3. MICRO-INTERACTIONS (Auto-applied to buttons) ========================================================= */ /* Give all buttons a uniform, silky transition */ button, a[class*="btn"], .gcm-cta { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease !important; } /* Lift effect on hover */ button:not(:disabled):hover, a[class*="btn"]:not(.sh-btn-login):hover, .gcm-cta:hover { transform: translateY(-3px) scale(1.02); } /* Add a subtle glow to primary CTA buttons on hover */ .btn-primary:hover, .btn-consult:hover, .gcm-cta:hover, .sh-upgrade-btn:hover { box-shadow: 0 10px 25px var(--gold-d, rgba(212, 175, 55, 0.25)); filter: brightness(1.05); } .light-theme .btn-primary:hover, .light-theme .btn-consult:hover, .light-theme .gcm-cta:hover { box-shadow: 0 10px 25px rgba(184, 150, 46, 0.2); } /* Active state for buttons (when clicked) */ button:not(:disabled):active, a[class*="btn"]:active, .gcm-cta:active { transform: translateY(1px) scale(0.98); } /* ========================================================= 4. PREMIUM GLASSMORPHISM (LIGHT) Frosted cards with luminous accent border. Matches the dark mode's gradient-edge feel without losing legibility. ========================================================= */ /* Match BEM "card" containers but NOT their children (-name, -desc, -head, etc.) */ html.light-theme div.card, html.light-theme div[class$="-card"], html.light-theme div[class*="-card "], html.light-theme div[class*="panel"]:not([class*="-panel-"]), html.light-theme .gcm-card { background: linear-gradient(135deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .6) 100%) !important; backdrop-filter: blur(24px) saturate(1.25); -webkit-backdrop-filter: blur(24px) saturate(1.25); border: 1px solid rgba(15, 23, 42, .06) !important; position: relative; box-shadow: 0 1px 1px rgba(255, 255, 255, 1) inset, 0 -1px 0 rgba(15, 23, 42, .02) inset, 0 12px 32px -10px rgba(15, 23, 42, .08), 0 2px 8px -2px rgba(15, 23, 42, .04), 0 0 0 1px rgba(15, 23, 42, .02); } /* Luminous accent edge — runs along the top of the card */ html.light-theme div.card::after, html.light-theme div[class$="-card"]::after, html.light-theme div[class*="-card "]::after, html.light-theme .gcm-card::after { content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-glow, rgba(184, 134, 11, .35)), transparent); opacity: .6; pointer-events: none; transition: opacity .4s ease, left .6s ease, right .6s ease; } html.light-theme div.card:hover:not(.sh-card), html.light-theme div[class$="-card"]:hover:not(.sh-card), html.light-theme div[class*="-card "]:hover:not(.sh-card) { border-color: var(--accent-glow, rgba(184, 134, 11, .3)) !important; transform: translateY(-1px); box-shadow: 0 1px 1px rgba(255, 255, 255, 1) inset, 0 -1px 0 rgba(15, 23, 42, .02) inset, 0 20px 42px -10px rgba(15, 23, 42, .14), 0 4px 16px -4px rgba(15, 23, 42, .08), 0 0 32px var(--accent-subtle); } html.light-theme div.card:hover:not(.sh-card)::after, html.light-theme div[class$="-card"]:hover:not(.sh-card)::after, html.light-theme div[class*="-card "]:hover:not(.sh-card)::after { opacity: 1; left: 2%; right: 2%; } /* Premium gradient text for hero/page titles in light mode */ html.light-theme .page-title, html.light-theme .hero-title, html.light-theme h1.legal-title, html.light-theme .hero h1:not(.no-gradient), html.light-theme .hero-seo h1 { background: linear-gradient(135deg, var(--accent, #b8860b) 0%, var(--accent-dark, #8e6808) 45%, var(--accent, #b8860b) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); filter: drop-shadow(0 4px 12px var(--accent-subtle, rgba(184, 134, 11, .15))); } /* Shimmer on primary CTAs — a soft light sweeps across on hover */ html.light-theme .btn-primary, html.light-theme .btn-consult, html.light-theme .btn-cta, html.light-theme .btn-submit, html.light-theme .nl-btn, html.light-theme .sh-upgrade-btn, html.light-theme .gcm-cta { position: relative; overflow: hidden; isolation: isolate; } html.light-theme .btn-primary::before, html.light-theme .btn-consult::before, html.light-theme .btn-cta::before, html.light-theme .btn-submit::before, html.light-theme .nl-btn::before, html.light-theme .sh-upgrade-btn::before, html.light-theme .gcm-cta::before { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, .25) 50%, transparent 100%); transform: skewX(-20deg); transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; z-index: 1; } html.light-theme .btn-primary:hover::before, html.light-theme .btn-consult:hover::before, html.light-theme .btn-cta:hover::before, html.light-theme .btn-submit:hover::before, html.light-theme .nl-btn:hover::before, html.light-theme .sh-upgrade-btn:hover::before, html.light-theme .gcm-cta:hover::before { left: 180%; } /* Refined input focus — subtle radiating glow */ html.light-theme input:focus, html.light-theme textarea:focus, html.light-theme select:focus, html.light-theme .form-control:focus, html.light-theme .fi:focus, html.light-theme .nl-input:focus, html.light-theme .nl-select:focus { box-shadow: 0 0 0 3px var(--accent-glow, rgba(184, 134, 11, .18)), 0 0 24px var(--accent-subtle) !important; } /* Section dividers more elegant in light */ html.light-theme hr, html.light-theme .divider { border: none; height: 1px; background: linear-gradient(90deg, transparent, rgba(15, 23, 42, .12), transparent); } /* Selection colour follows the page accent */ html.light-theme ::selection { background: var(--accent-glow); color: var(--txt); } ::selection { background: var(--accent-glow, rgba(212, 175, 55, .35)); color: #fff; } /* ========================================================= 5. RESPONSIVE MOBILE — universal fluid system Targets every smartphone width (320 → 480 → 768). ========================================================= */ /* Honor iOS safe areas so content never hides under notch */ body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } /* Prevent text inflation on landscape rotation */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Avoid horizontal scroll caused by stray full-bleed elements */ html, body { overflow-x: hidden; max-width: 100vw; } /* Buttons must be tappable — WCAG min 44x44 */ button, a[class*="btn"], .gcm-cta, input[type="submit"], input[type="button"], .pass-toggle { min-height: 44px; touch-action: manipulation; } /* Tiny phones (≤ 360px) — squeeze padding, never overflow */ @media (max-width: 360px) { :root { font-size: 15px; } .ctn, .container, .page-wrapper { padding-left: .9rem !important; padding-right: .9rem !important; } .card, div[class$="-card"]:not(.kpi-card):not(.sh-card), div[class*="-card "]:not(.kpi-card):not(.sh-card) { padding: 1.25rem !important; border-radius: 1rem !important; } } /* Standard phones (361–480) */ @media (max-width: 480px) { h1, .page-title { font-size: clamp(1.6rem, 7vw, 2.1rem) !important; line-height: 1.2 !important; } h2, .section-title { font-size: clamp(1.25rem, 5.5vw, 1.6rem) !important; } h3 { font-size: clamp(1.05rem, 4.8vw, 1.25rem) !important; } p, li { font-size: .92rem !important; } } /* Phablets / small tablets (≤ 768) */ @media (max-width: 768px) { .hero-seo, .hero { padding-top: clamp(2rem, 8vw, 3rem) !important; padding-bottom: clamp(1.5rem, 6vw, 2.25rem) !important; } /* Grids collapse to single column on small screens */ .features-grid, .signs-grid, .temas-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; gap: .65rem !important; } /* Inputs and selects expand full width and stay tap-friendly */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], select, textarea { width: 100%; font-size: 16px !important; /* prevent iOS auto-zoom */ } /* Header/nav: condense */ .site-header { padding: .5rem 1rem !important; } } /* ========================================================= 6. FLOATING THEME TOGGLE (auto-injected on standalone pages) ========================================================= */ #themeFloatBtn { position: fixed; bottom: calc(1rem + env(safe-area-inset-bottom)); right: calc(1rem + env(safe-area-inset-right)); width: 48px; height: 48px; border-radius: 50%; background: rgba(26, 26, 36, 0.85); color: #f0f0f5; border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 9999; transition: transform 0.25s var(--e, cubic-bezier(.4,0,.2,1)), background 0.25s, color 0.25s, box-shadow 0.25s; } #themeFloatBtn:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45); } html.light-theme #themeFloatBtn { background: rgba(255, 255, 255, 0.92); color: var(--accent, #1a1a24); border: 1px solid rgba(15, 23, 42, 0.1); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); } html.light-theme #themeFloatBtn:hover { box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18); } /* Reduced motion: kill orb/star animations for users who ask */ @media (prefers-reduced-motion: reduce) { .orb, .orb1, .orb2, .orb3, .star, .stars *, .card::before { animation: none !important; } * { transition-duration: .01ms !important; } } /* ========================================================= 8. LIGHT THEME — MOBILE PERFORMANCE OPTIMIZATIONS On phones, expensive paint operations (blend modes, conic gradients, backdrop-filter saturate, multi-layer shadows) cause scroll stutters. Strip them down on small screens while keeping the visual identity. ========================================================= */ @media (max-width: 768px) { /* Drop the paper grain texture — mix-blend-mode + position:fixed is the worst scroll killer */ html.light-theme body::before { display: none !important; } /* Simplify background — kill conic gradient + fixed attachment, use plain linear */ html.light-theme body { background: radial-gradient(ellipse 90% 50% at 50% 0%, var(--accent-subtle) 0%, transparent 55%) no-repeat, linear-gradient(135deg, #fafbfc 0%, #f4f5f8 100%) !important; background-attachment: scroll !important; } html.light-theme .bg-effects, html.light-theme .atm { background: radial-gradient(ellipse 90% 50% at 50% 0%, var(--accent-subtle) 0%, transparent 55%), linear-gradient(135deg, #f8f9fa 0%, #eef0f5 100%) !important; background-attachment: scroll !important; } /* Cards — keep glass look but cheaper: reduced blur, no saturate, simpler shadow */ html.light-theme div.card, html.light-theme div[class$="-card"], html.light-theme div[class*="-card "], html.light-theme .gcm-card { backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; background: rgba(255, 255, 255, .82) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 4px 14px -4px rgba(15, 23, 42, .08) !important; } html.light-theme div.card:hover:not(.sh-card), html.light-theme div[class$="-card"]:hover:not(.sh-card), html.light-theme div[class*="-card "]:hover:not(.sh-card) { transform: none !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 8px 20px -6px rgba(15, 23, 42, .1) !important; } /* Disable the luminous top-edge pseudo on mobile — extra paint layer */ html.light-theme div.card::after, html.light-theme div[class$="-card"]::after, html.light-theme div[class*="-card "]::after { display: none !important; } /* Disable the diagonal mirror sweep on grimorio cards (paint expensive on scroll) */ html.light-theme .g-card:not(.open)::before { display: none !important; } /* Site header — already opaque from previous fix; ensure no blur cost during scroll */ @supports (backdrop-filter: blur(1px)) { html.light-theme .site-header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } /* Newsletter widget — drop double-blur+saturate */ html.light-theme .nl-widget { backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; background: rgba(255, 255, 255, .9) !important; } /* Float button — simpler shadow */ html.light-theme #themeFloatBtn { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #fff !important; } } /* For users who really hate jank, even on tablets+phones */ @media (hover: none) and (pointer: coarse) { /* Force GPU acceleration on body to keep scroll on its own layer */ html.light-theme body { will-change: scroll-position; } }