/* ── STATIC DESIGN TOKENS ─────────────────────────────────────── Converted from Tailwind v4 @theme into plain CSS custom properties (Tailwind Play CDN / v3 JIT doesn't support @theme). Mirrored into tailwind.config (see ) so utilities like text-accent, bg-accent2, font-editorial, rounded-radius-lg continue to work via Tailwind's JIT engine. ─────────────────── */ :root { --color-accent: #930205; --color-accent2: #c99a3c; --color-accent3: #f59e0b; --color-gold: #f59e0b; --color-danger: #ff4d6d; --color-success: #10d98e; --color-info: #930205; --grad-primary: linear-gradient(135deg, #930205 0%, #c99a3c 100%); --grad-hero: linear-gradient(135deg, #930205 0%, #7d1122 50%, #c99a3c 100%); --grad-warm: linear-gradient(135deg, #f59e0b 0%, #f97316 100%); --grad-success: linear-gradient(135deg, #10d98e 0%, #06b6d4 100%); --grad-card: linear-gradient(135deg, rgba(147,2,5,0.08) 0%, rgba(201,154,60,0.04) 100%); --shadow-glow: 0 0 48px rgba(147,2,5,0.18); --radius-radius: 14px; --radius-radius-sm: 9px; --radius-radius-lg: 22px; --radius-radius-xl: 32px; --font-editorial: "Playfair Display", Georgia, serif; --font-sans: "Inter", system-ui, sans-serif; --font-display: var(--font-editorial); --font-body: "Inter", system-ui, sans-serif; --font-ui: var(--font-sans); } /* ── RUNTIME THEME VARIABLES (selector-based dark/light) ──────── These live in a plain :root / body.light cascade — NOT inside @theme — so the JS theme toggle (adds/removes `.light` on instantly re-resolves every var(--bg), var(--text), var(--glass), etc. used across @layer components. @theme tokens are emitted once at the top and aren't intended to be re-overridden per-selector at runtime, which is why dark/light switching previously broke. ─────────────────────────────────────────────────────────────── */ :root { /* === PREMIUM DARK THEME (default) === */ --bg: #080c14; --bg2: #0d1220; --bg3: #121929; /* Glassmorphism surfaces */ --surface: rgba(255,255,255,0.03); --glass: rgba(255,255,255,0.055); --glass-border: rgba(255,255,255,0.09); --glass-border-hover: rgba(100,180,255,0.25); /* Text hierarchy */ --text: #eef2ff; --text2: #7a8caa; --text3: #3d4f6a; /* Theme-dependent shadows */ --shadow: 0 8px 40px rgba(0,0,0,0.55); --shadow-sm: 0 4px 16px rgba(0,0,0,0.35); --shadow-accent: 0 8px 40px rgba(147,2,5,0.28); /* Aliases — keep legacy generic var names working unchanged inside @layer components below */ --accent: var(--color-accent); --accent2: var(--color-accent2); --accent3: var(--color-accent3); --gold: var(--color-gold); --danger: var(--color-danger); --success: var(--color-success); --info: var(--color-info); --radius: var(--radius-radius); --radius-sm: var(--radius-radius-sm); --radius-lg: var(--radius-radius-lg); --radius-xl: var(--radius-radius-xl); } /* ── LIGHT MODE ────────────────────────────────────────────── body.light overrides the runtime tokens above via normal CSS cascade — every component using var(--bg)/var(--text)/etc. re-resolves the instant JS toggles the .light class. ──────── */ body.light { --bg: #f0f4fb; --bg2: #ffffff; --bg3: #e4eaf6; --surface: rgba(0,0,0,0.035); --glass: rgba(255,255,255,0.75); --glass-border: rgba(0,0,0,0.07); --glass-border-hover: rgba(147,2,5,0.3); --text: #0a1022; --text2: #4a5f80; --text3: #8fa0bb; --shadow: 0 8px 32px rgba(10,16,34,0.10); --shadow-accent: 0 8px 32px rgba(147,2,5,0.22); } /* ── ALPINE.JS TRANSITION SUPPORT ─────────────────────────────────── These utility classes power x-transition directives throughout the SPA — sidebar, announcement bar, dropdowns, modals. ──────────────────────────────────────────────────────────────────── */ /* CUSTOMIZATION CENTER - Accessibility & Layout Overrides */ :root { --font-scale: 1; } html { font-size: calc(16px * var(--font-scale, 1)); } body.cc-high-contrast { --text2: var(--text); --text3: var(--text2); } body.cc-high-contrast .glass { border-color: var(--accent) !important; } body.cc-reduced-motion *, body.cc-reduced-motion *::before, body.cc-reduced-motion *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } body.cc-compact .pdf-card { transform: scale(0.95); } body.cc-compact .me-stat-card { padding: 10px 12px; } body.cc-compact .cc-card { padding: 14px; } body.cc-dense .section { padding: 12px 0 !important; } body.cc-dense .me-section-title { margin-top: 12px; } body.cc-no-anim * { animation: none !important; transition: none !important; } @keyframes ccSpin { to { transform: rotate(360deg); } } /* ═══════════════════════════════════════════════════════════════ STUDYRIA PERFORMANCE CSS — Global GPU & Paint Optimizations ═══════════════════════════════════════════════════════════════ */ /* CSS containment — prevents card renders from triggering full-page layout */ .pdf-card { contain: layout style; } .ott-hero-card { contain: layout style; } .ottlib-card { contain: layout style; } .card { contain: layout style; } /* will-change only during active interaction (set via JS on hover) */ /* Avoid permanent will-change — creates memory-expensive composite layers */ /* content-visibility: auto for off-screen heavy sections */ #page-admin { content-visibility: visible; } /* FIX: was auto — blanked dynamic innerHTML on mobile */ #page-creator-register { content-visibility: auto; contain-intrinsic-size: 0 400px; } /* Reduce animation complexity on mobile */ @media (max-width: 768px) { /* Remove blur filters on mobile - GPU-expensive on low-end processors */ .pdf-card::after { display: none; } /* Reduce card hover effect on mobile (touch devices don't need hover) */ .pdf-card:hover { transform: translateY(-4px) scale(1.01); } /* Limit parallax / transform complexity */ .hero-orb { opacity: 0.3 !important; } } /* Prefers-reduced-motion: respect system accessibility setting */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* PERF: disable orb filter animations on mobile - major battery drain */ @media (max-width: 768px) { .hero-orb { display: none; } .ottlib-orb { display: none; } } [x-cloak] { display: none !important; } /* Announcement bar fade */ #announcementBar[x-show] { transition: opacity 0.3s ease, transform 0.3s ease; } /* ── PREMIUM HAMBURGER MENU ──────────────────────────────────── */ #hamburgerMenu[x-show] { transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34,1.15,0.64,1); transform-origin: top right; } @keyframes hmShine { 0% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(320%) skewX(-18deg); } } /* PERF: hmGlow, hmPulse, hmAdminGlow, hmCrownFloat, hmIconWiggle removed — all were continuous infinite animations causing battery drain on idle. Visual quality preserved via static box-shadow + CSS transitions on :hover */ @keyframes hmBadgePop { 0% { transform: scale(0.7); opacity:0; } 70% { transform: scale(1.1); } 100% { transform: scale(1); opacity:1; } } @keyframes hmSectionFadeIn { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform: translateY(0); } } /* ── GLOBAL RESET ────────────────────────────────────────────── */ html, body { width: 100%; max-width: 100%; overflow-x: clip; margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; max-width: 100%; margin: 0; padding: 0; } /* ══════════════════════════════════════════════════════════════ COMPONENT LAYER — all Studyria component classes Preserved 1:1 from production design system, restructured into Tailwind v4 @layer components for cascade-correct ordering with Tailwind's own utilities (utilities still win when both apply). ══════════════════════════════════════════════════════════════ */ /* PERF: scroll-behavior:smooth removed from html — causes composited layer overhead. Smooth scroll implemented via JS where needed (scrollIntoView with behavior option). */ html { } h1, h2, h3, h4, h5, h6 { font-family: var(--font-editorial); } body { font-family: var(--font-body); background: var(--bg); color: var(--text); transition: background .35s, color .35s; overflow-x: clip; /* PERF: background-attachment:fixed removed — causes layer repaint on every scroll pixel on mobile */ background-image: radial-gradient(ellipse at 20% 50%, rgba(147,2,5,0.05) 0%, transparent 60%), radial-gradient(ellipse at 80% 10%, rgba(201,154,60,0.04) 0%, transparent 55%); } body.light { background-image: radial-gradient(ellipse at 20% 50%, rgba(147,2,5,0.04) 0%, transparent 60%), radial-gradient(ellipse at 80% 10%, rgba(201,154,60,0.03) 0%, transparent 55%); } /* Premium scrollbar */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent), var(--accent2)); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } .app { min-height: 100vh; display: flex; flex-direction: column; } .container { max-width: 1280px; margin: 0 auto; padding: 0 20px; width: 100%; } /* ── LOGO ANIMATION ───────────────────────────────────────────── */ .logo { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; cursor: pointer; user-select: none; display: inline-flex; align-items: baseline; gap: 6px; position: relative; } .desktop-logo-img { height: 34px; width: auto; flex-shrink: 0; align-self: center; display: inline-block; vertical-align: middle; object-fit: contain; } .logo { display: flex !important; align-items: center !important; gap: 6px !important; } .logo .logo-letter, span.logo-letter { display: inline-block; font-family: var(--font-display) !important; font-weight: 800 !important; background: linear-gradient(135deg, #930205, #c99a3c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; /* PERF: only entrance animation; logoFloat removed (was running forever on every letter) */ animation: logoEntrance .6s cubic-bezier(0.34,1.56,0.64,1) calc(var(--i) * 0.07s) both; transition: transform .2s; } .logo .logo-letter.logo-light, span.logo-letter.logo-light { font-family: var(--font-display) !important; font-weight: 300 !important; background: linear-gradient(135deg, #e8d5a8, #c99a3c 60%, #930205); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Hover wave only — fires on user interaction, not continuous */ .logo:hover .logo-letter { animation: logoWave 0.5s cubic-bezier(0.34,1.56,0.64,1) calc(var(--i) * 0.05s) both; } @keyframes logoEntrance { from { opacity:0; transform: translateY(12px) scale(0.7); } to { opacity:1; transform: translateY(0) scale(1); } } @keyframes logoWave { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-6px) scale(1.1); } 100% { transform: translateY(0) scale(1); } } /* ── HERO SITE NAME (big Studyria above title) ─────────────────── */ .hero-site-name { display: flex; justify-content: center; align-items: baseline; gap: 2px; margin-bottom: 6px; line-height: 1; /* Stable container so dropping letters don't shift siblings */ overflow: visible; /* Reserve height based on the font-size clamp max so the block doesn't reflow when letters animate in from translateY(-50px) */ min-height: clamp(2.4rem, 5.5vw, 4.4rem); padding-top: 3px; /* small buffer to keep drop animation within view */ } .hero-site-name .hsn-letter, span.hsn-letter { display: inline-block; font-family: var(--font-display) !important; font-size: clamp(2.1rem, 5vw, 3.9rem); font-weight: 800 !important; background: linear-gradient(135deg, #930205 0%, #c99a3c 50%, #e8d5a8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 12px rgba(147,2,5,0.25)); /* PERF: hsnGlow infinite removed — drop-shadow is GPU-expensive per-letter */ animation: hsnDrop .7s cubic-bezier(0.34,1.56,0.64,1) calc(var(--j) * 0.08s) both; cursor: default; transition: transform .25s cubic-bezier(0.34,1.56,0.64,1), filter .25s; will-change: transform; flex-shrink: 0; } .hsn-letter:hover { transform: translateY(-10px) scale(1.15) rotate(-3deg); filter: drop-shadow(0 0 22px rgba(201,154,60,0.6)); } .hero-site-name .hsn-letter.hsn-light, span.hsn-letter.hsn-light { font-family: var(--font-display) !important; font-weight: 300 !important; background: linear-gradient(135deg, #e8d5a8 0%, #c99a3c 60%, #930205 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } @keyframes hsnDrop { from { opacity:0; transform: translateY(-50px) scale(0.5); } to { opacity:1; transform: translateY(0) scale(1); } } /* Reduced motion: skip all hero animations */ @media (prefers-reduced-motion: reduce) { .hsn-letter, .logo-letter { animation: none !important; } .logo .logo-letter { animation: none !important; } } /* ── TYPED TAGLINE ─────────────────────────────────────────────── */ .typed-tagline { font-size: clamp(.9rem, 2.5vw, 1.1rem); color: var(--text2); max-width: 580px; width: 100%; margin: 0 auto 40px; line-height: 1.75; font-weight: 300; animation: fadeIn .7s ease .2s both; min-height: 1.75em; position: relative; overflow-wrap: break-word; word-break: break-word; padding: 0 4px; } .typed-tagline::after { content: '|'; color: var(--accent); animation: blink .7s step-end infinite; margin-left: 1px; } @keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0; } } /* ── ANNOUNCEMENT BAR (Feature 5) ────────────────────────────── */ #announcementBar { position: sticky; top: 0; z-index: 200; /* PERF: static gradient instead of animated background-position */ background: linear-gradient(90deg, #080c14 0%, #0a1e52 40%, #080c14 100%); border-bottom: 1px solid rgba(147,2,5,0.25); overflow: hidden; transition: all .4s ease; } #announcementBar.hidden { display: none; } /* PERF: sweep runs once every 6s, not 3.5s — halved animation load */ #announcementBar::before { content: ''; position: absolute; top: 0; left: -60%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(147,2,5,0.12), transparent); animation: bannerSweep 6s ease-in-out infinite; } .ann-inner { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 48px 9px 20px; min-height: 40px; position: relative; z-index: 1; } /* PERF: pulse animation at 4s interval (was 2s) — same visual effect, half the frames */ .ann-pulse { width: 7px; height: 7px; border-radius: 50%; background: #c99a3c; box-shadow: 0 0 8px #c99a3c; animation: pulse 4s ease-in-out infinite; flex-shrink: 0; } .ann-text { font-size: .78rem; font-weight: 500; color: rgba(255,255,255,0.82); letter-spacing: .03em; text-align: center; } .ann-text .ann-hl { background: linear-gradient(90deg,#930205,#c99a3c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700; } .ann-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .75rem; transition: all .2s; line-height: 1; } .ann-close:hover { background: rgba(255,255,255,0.18); color: #fff; } body.light #announcementBar { background: linear-gradient(90deg,#dbeafe,#eff6ff,#dbeafe); border-bottom-color: rgba(147,2,5,0.15); } body.light .ann-text { color: rgba(10,16,34,0.70); } body.light .ann-close { background: rgba(0,0,0,0.06); color: rgba(10,16,34,0.45); } /* ── TOP BANNER ───────────────────────────────────────────────── */ /* ── PREMIUM BRANDING BANNER ──────────────────────────────────── */ .top-banner { position: relative; overflow: hidden; z-index: 101; background: linear-gradient(135deg, #2563EB 0%, #06B6D4 100%); border-bottom: 1px solid rgba(147, 2, 5, 0.2); box-shadow: 0 2px 12px rgba(147, 2, 5, 0.15); } /* PERF: single sweep every 8s (was brandSweep at 4s + glowLine at 3s) */ .top-banner::before { content:''; position:absolute; inset:0; pointer-events:none; background: linear-gradient(90deg, transparent 20%, rgba(255,255,255,0.06) 50%, transparent 80%); } /* Remove ::after glow-line animation entirely */ @keyframes brandSweep { 0%{opacity:0;transform:translateX(-100%)} 40%{opacity:1} 60%{opacity:1} 100%{opacity:0;transform:translateX(100%)} } .top-banner-inner { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 7px 20px; min-height: 36px; position: relative; z-index: 2; flex-wrap: wrap; } /* Title pill */ .brand-title { font-family: var(--font-editorial); font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: rgba(255,255,255,0.95); white-space: nowrap; animation: fadeUp .7s ease both; text-shadow: 0 1px 3px rgba(0,0,0,0.15); } .brand-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(147,2,5,0.5); flex-shrink: 0; } /* Subtitle "crafted by PKD" chip */ .brand-credit { display: inline-flex; align-items: center; gap: 5px; padding: 2px 12px 2px 8px; border-radius: 20px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: var(--font-body); font-size: .66rem; font-weight: 600; color: rgba(255,255,255,0.92); letter-spacing: .04em; white-space: nowrap; animation: fadeUp .7s ease .12s both; } /* PERF: chipGlow and heartbeat removed — both were infinite paint triggers */ .brand-credit-heart { font-size:.72rem; display:inline-block; } .brand-credit-name { color: #fff; font-weight: 800; } /* Light mode */ body.light .top-banner { background: linear-gradient(135deg, #2563EB 0%, #06B6D4 100%); border-bottom-color: rgba(147, 2, 5, 0.2); } body.light .brand-title { color: rgba(255,255,255,0.95); } body.light .brand-credit { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.92); } /* light mode top-banner::after removed — uniform blue gradient */ @media(max-width:540px) { .brand-dot { display:none; } .top-banner-inner { gap:8px; padding:6px 16px; } .brand-title { font-size:.74rem; } .brand-credit { font-size:.64rem; padding:2px 9px 2px 7px; } } /* ── NAV ──────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════ 📱 MOBILE HEADER — Premium Redesign (mobile-only, ≤640px) First Row: Blue gradient + logo + search + basket Second Row: White bg + download + theme + avatar + signout + burger ═══════════════════════════════════════════════════════════════ */ .mobile-header { display: none; } @media (max-width: 640px) { /* ── Hide desktop top-banner and nav, show mobile header ── */ .top-banner { display: none !important; } .nav { display: none !important; } .mobile-header { display: block; position: sticky; top: 0; z-index: 100; } /* ── FIRST ROW: Blue gradient ── */ .mh-row1 { background: linear-gradient(135deg, #2563EB 0%, #06B6D4 100%); padding: 6px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; box-shadow: 0 2px 12px rgba(147, 2, 5, 0.25); min-height: 48px; } .mh-left { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; min-width: 0; } .mh-tagline { font-size: 9px; font-weight: 600; color: rgba(255,255,255,0.85); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-body); } .mh-glass-pill { display: inline-flex; align-items: center; gap: 3px; padding: 2px 10px; border-radius: 20px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 8.5px; font-weight: 600; color: rgba(255,255,255,0.9); white-space: nowrap; width: fit-content; font-family: var(--font-body); } .mh-center { display: flex; align-items: center; gap: 6px; cursor: pointer; flex-shrink: 0; } .mh-logo-img { height: 28px; width: auto; flex-shrink: 0; display: inline-block; vertical-align: middle; margin-right: 0; object-fit: contain; } .mh-center { display: flex !important; align-items: center !important; justify-content: center !important; } .mh-center .logo { font-size: 1.25rem; display: flex !important; align-items: center !important; gap: 5px !important; } .mh-center .logo .logo-letter, .mh-center span.logo-letter { font-size: 1.25rem !important; background: linear-gradient(135deg, #930205, #c99a3c) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; animation: none !important; } .mh-center .logo .logo-letter.logo-light, .mh-center span.logo-letter.logo-light { background: linear-gradient(135deg, #e8d5a8, #c99a3c 60%, #930205) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; animation: none !important; } .mh-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .mh-icon-btn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; transition: all .2s; flex-shrink: 0; } .mh-icon-btn:active { transform: scale(0.92); } .mh-icon-btn svg { width: 17px; height: 17px; } /* ── SECOND ROW: White bg ── */ .mh-row2 { background: #ffffff; padding: 6px 10px; display: flex; align-items: center; justify-content: space-between; gap: 6px; border-bottom: 1px solid rgba(0,0,0,0.06); box-shadow: 0 1px 8px rgba(0,0,0,0.04); min-height: 44px; } body:not(.light) .mh-row2 { background: #1a1a2e; border-bottom-color: rgba(255,255,255,0.06); box-shadow: 0 1px 8px rgba(0,0,0,0.2); } .mh-row2-left { display: flex; align-items: center; gap: 4px; } .mh-row2-right { display: flex; align-items: center; gap: 4px; } .mh-action-btn { width: 34px; height: 34px; border-radius: 10px; border: none; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; flex-shrink: 0; color: #333; } body:not(.light) .mh-action-btn { color: #ccc; } .mh-action-btn:active { transform: scale(0.9); background: rgba(0,0,0,0.05); } body:not(.light) .mh-action-btn:active { background: rgba(255,255,255,0.05); } .mh-action-btn svg { width: 18px; height: 18px; } .mh-signout-btn { padding: 5px 12px; border-radius: 8px; background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.2); color: #ef4444; font-size: 11px; font-weight: 600; cursor: pointer; transition: all .15s; font-family: var(--font-body); white-space: nowrap; display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .mh-signout-btn:active { transform: scale(0.95); } body:not(.light) .mh-signout-btn { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.25); color: #f87171; } .mh-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent2)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; color: #fff; border: 2px solid rgba(255,255,255,0.3); cursor: pointer; overflow: hidden; flex-shrink: 0; font-family: var(--font-body); } .mh-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .mh-signin-btn { padding: 6px 14px; border-radius: 8px; background: linear-gradient(135deg, #2563EB, #06B6D4); color: #fff; font-size: 11px; font-weight: 700; border: none; cursor: pointer; transition: all .15s; font-family: var(--font-body); white-space: nowrap; box-shadow: 0 2px 8px rgba(147, 2, 5, 0.25); flex-shrink: 0; } .mh-signin-btn:active { transform: scale(0.95); } .mh-burger-btn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.08); background: rgba(0,0,0,0.03); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; flex-shrink: 0; color: #333; } body:not(.light) .mh-burger-btn { border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); color: #ccc; } .mh-burger-btn:active { transform: scale(0.92); } .mh-burger-btn svg { width: 18px; height: 18px; } /* ── Burger dropdown repositioning for mobile header ── */ #hamburgerMenu.hamburger-dropdown { top: calc(100% + 4px) !important; right: 0 !important; left: auto !important; position: absolute !important; } } /* Hide mobile-header on desktop */ @media (min-width: 641px) { .mobile-header { display: none !important; } } .nav { position: sticky; top: 0; z-index: 100; background: rgba(8,12,20,0.88); backdrop-filter: blur(12px) saturate(150%); border-bottom: 1px solid var(--glass-border); box-shadow: 0 1px 0 rgba(147,2,5,0.08), 0 4px 24px rgba(0,0,0,0.3); } body.light .nav { background: rgba(240,244,251,0.88); } .nav-inner { height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* NOTE: legacy duplicate .logo rule removed — letter-level .logo-letter / .logo-light rules above define the brand typography (Study = 800 weight, ria = 300 weight, Playfair Display) and must not be overridden by a flat .logo background. */ .nav-links { display: flex; align-items: center; gap: 4px; } .nav-link { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-sm); font-size: .875rem; font-weight: 500; color: var(--text2); cursor: pointer; transition: all .2s; border: none; background: none; font-family: var(--font-body); } .nav-link:hover { background: var(--surface); color: var(--text); } .nav-link.active { background: var(--surface); color: var(--accent); } .nav-actions { display: flex; align-items: center; gap: 10px; } .icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--glass-border); background: var(--glass); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text2); transition: all .2s; } .icon-btn:hover { color: var(--text); border-color: var(--accent); background: rgba(147,2,5,.1); } .avatar-btn { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent2)); display: flex; align-items: center; justify-content: center; cursor: pointer; font-weight: 700; font-size: .8rem; color: #fff; border: 2px solid transparent; transition: all .2s; } .avatar-btn:hover { border-color: var(--accent); box-shadow: var(--shadow-accent); } /* ── BUTTONS ─────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: var(--radius-sm); font-size: .875rem; font-weight: 600; letter-spacing: .01em; cursor: pointer; transition: all .25s cubic-bezier(0.25, 0.46, 0.45, 0.94); border: none; font-family: var(--font-body); position: relative; overflow: hidden; } .btn-primary { background: var(--grad-primary); color: #fff; box-shadow: 0 4px 20px rgba(147,2,5,0.35); } .btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%); opacity: 0; transition: opacity .2s; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(147,2,5,0.5); } .btn-primary:hover::after { opacity: 1; } .btn-primary:active { transform: translateY(0); } .btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--glass-border); } .btn-secondary:hover { border-color: var(--accent); color: var(--accent); background: rgba(147,2,5,.08); } body.light .btn-secondary { background: rgba(147,2,5,0.12); border-color: rgba(147,2,5,0.3); } body.light .btn-secondary:hover { background: rgba(147,2,5,0.2); border-color: var(--accent); } .btn-ghost { background: transparent; color: var(--text2); } .btn-ghost:hover { color: var(--text); background: var(--surface); } .btn-success { background: var(--grad-success); color: #fff; box-shadow: 0 4px 16px rgba(16,217,142,0.3); } .btn-danger { background: linear-gradient(135deg, var(--danger), #c0163a); color: #fff; } .btn-lg { padding: 15px 32px; font-size: 1rem; border-radius: var(--radius); } .btn-sm { padding: 6px 14px; font-size: .8rem; } .btn-full { width: 100%; justify-content: center; } /* ── CARDS ───────────────────────────────────────────────────── */ .card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); backdrop-filter: blur(8px) saturate(140%); transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; overflow: hidden; } .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(147,2,5,0.3), rgba(201,154,60,0.2), transparent); opacity: 0; transition: opacity .3s; } .card:hover::before { opacity: 1; } .card:hover { border-color: rgba(147,2,5,.22); box-shadow: 0 12px 48px rgba(0,0,0,0.45), 0 0 0 1px rgba(147,2,5,0.08); transform: translateY(-3px); } .card-no-hover:hover { transform: none; box-shadow: none; } .card-no-hover::before { display: none; } /* ══════════════════════════════════════════════════════════════ ── STUDYRIA PREMIUM CARD — 10/10 Design System ── Apple App Store × Netflix × Coursera × 2026 SaaS Premium ══════════════════════════════════════════════════════════════ */ /* ── CARD SHELL ─────────────────────────────────────────────── */ .pdf-card { display: flex; flex-direction: column; cursor: pointer; border-radius: 24px; overflow: hidden; position: relative; background: linear-gradient(160deg, rgba(255,255,255,0.065) 0%, rgba(255,255,255,0.018) 55%, rgba(147,2,5,0.025) 100%); border: 1px solid rgba(255,255,255,0.10); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); box-shadow: 0 2px 0 rgba(255,255,255,0.08) inset, 0 12px 48px rgba(0,0,0,0.52), 0 3px 12px rgba(0,0,0,0.32), 0 0 0 0.5px rgba(255,255,255,0.05); transition: transform 0.42s cubic-bezier(0.34,1.15,0.64,1), box-shadow 0.42s cubic-bezier(0.25,0.46,0.45,0.94), border-color 0.30s ease; /* will-change moved to :hover/:active only — see PERF comment above: a permanent will-change here was creating a composite layer that mobile Safari could lose and rebuild at the wrong size on scroll. */ contain: layout paint; } body.light .pdf-card { background: linear-gradient(160deg, rgba(255,255,255,1) 0%, rgba(248,251,255,0.97) 60%, rgba(235,244,255,0.95) 100%); border-color: rgba(147,2,5,0.12); box-shadow: 0 1px 0 rgba(255,255,255,1) inset, 0 10px 40px rgba(10,16,34,0.10), 0 2px 8px rgba(147,2,5,0.06); } /* Animated top-edge accent line — ultra thin, cinematic */ .pdf-card::before { content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(147,2,5,1) 25%, rgba(201,154,60,0.9) 55%, rgba(139,92,246,0.6) 80%, transparent 100%); opacity: 0; transition: opacity 0.35s ease; z-index: 5; } /* Lush ambient glow halo behind card on hover — PERF: simplified, no filter:blur on pseudo */ .pdf-card::after { content: ''; position: absolute; inset: -4px; border-radius: 30px; background: radial-gradient(ellipse at center, rgba(147,2,5,0.15), transparent 70%); opacity: 0; transition: opacity 0.4s ease; z-index: -1; } .pdf-card:hover { transform: translateY(-10px) scale(1.024); border-color: rgba(147,2,5,0.42); will-change: transform; box-shadow: 0 2px 0 rgba(255,255,255,0.10) inset, 0 32px 80px rgba(0,0,0,0.62), 0 0 0 1px rgba(147,2,5,0.20), 0 0 64px rgba(147,2,5,0.14); } .pdf-card:hover::before { opacity: 1; } .pdf-card:hover::after { opacity: 1; } .pdf-card:active { transform: translateY(-4px) scale(1.012); transition-duration: 0.10s; will-change: transform; } /* ── COVER IMAGE AREA — book-portrait aspect ratio ─────────────── */ .pdf-cover { position: relative; aspect-ratio: 2 / 3; width: 100%; max-width: 100%; overflow: hidden; flex-shrink: 0; background: linear-gradient(145deg, #060d1f 0%, #0b1740 40%, #0d2050 70%, #071526 100%); border-radius: 0; display: flex; align-items: center; justify-content: center; /* ── PDF THUMBNAIL FIX: Isolate cover from parent filters/blends ── */ isolation: isolate; /* translateZ(0) removed — forcing a GPU compositing layer here was the root cause of the mobile "zoomed/stretched after scroll" bug. contain: layout paint isolates layout/paint just as well, without the offscreen-layer-eviction risk that broke sizing on rescroll. */ contain: layout paint; filter: none !important; opacity: 1 !important; mix-blend-mode: normal !important; } .pdf-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; max-width: 100%; transition: transform 0.65s cubic-bezier(0.25,0.46,0.45,0.94); /* ── PDF THUMBNAIL FIX: Never apply any visual filter to cover art ── */ filter: none !important; opacity: 1 !important; mix-blend-mode: normal !important; isolation: isolate; image-rendering: auto; /* will-change removed from default state — only applied on hover (below), so mobile Safari never has to evict/rebuild a permanent composite layer for an image that isn't actively animating. */ } .pdf-card:hover .pdf-cover img { transform: scale(1.05); will-change: transform; /* No filter on hover either — cover must look exactly as uploaded */ filter: none !important; } /* Cinematic multi-layer scrim — depth + vignette ── PDF THUMBNAIL FIX: scrim removed (was causing dark overlay on cover art). The scrim is kept as a transparent placeholder so existing HTML markup (.pdf-cover-scrim elements) does not break, but it no longer paints any colour over the cover image. ── */ .pdf-cover-scrim { position: absolute; inset: 0; background: none; pointer-events: none; z-index: 2; } /* Fallback gradient cover (no image) */ .pdf-cover-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; } .pdf-cover-icon { opacity: 0.14; } /* ── FLOATING WISHLIST BUTTON ─────────────────────────────────── */ .wish-btn { position: absolute; top: 11px; right: 11px; z-index: 6; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.22); background: rgba(4,7,18,0.58); backdrop-filter: blur(8px) saturate(150%); -webkit-backdrop-filter: blur(8px) saturate(150%); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.22s ease, border-color 0.22s ease, transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease; color: rgba(255,255,255,0.78); flex-shrink: 0; padding: 0; box-shadow: 0 4px 14px rgba(0,0,0,0.45); } body.light .wish-btn { background: rgba(255,255,255,0.88); border-color: rgba(0,0,0,0.09); color: rgba(30,40,70,0.55); } .wish-btn.active { color: #ff3d68; border-color: rgba(255,61,104,0.65); background: rgba(14,3,8,0.75); box-shadow: 0 0 22px rgba(255,61,104,0.52), 0 0 8px rgba(255,61,104,0.30), 0 4px 14px rgba(0,0,0,0.45); } body.light .wish-btn.active { background: rgba(255,255,255,0.96); box-shadow: 0 0 18px rgba(255,61,104,0.38); } .wish-btn:hover { transform: scale(1.22); color: #ff3d68; border-color: rgba(255,61,104,0.60); background: rgba(22,3,11,0.72); box-shadow: 0 0 22px rgba(255,61,104,0.36), 0 4px 14px rgba(0,0,0,0.45); } .wish-btn:active { transform: scale(0.88); } /* ── PREMIUM FLOATING BADGES (top-left of cover) ─────────────── */ .pdf-tag { position: absolute; top: 11px; left: 11px; z-index: 4; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 30px; font-family: var(--font-ui); font-size: 0.60rem; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; backdrop-filter: blur(8px) saturate(150%); -webkit-backdrop-filter: blur(8px) saturate(150%); box-shadow: 0 3px 14px rgba(0,0,0,0.42); white-space: nowrap; line-height: 1; } .pdf-cover-icon { opacity: .14; } /* Tag variants — premium glow palette */ .tag-free { background: rgba(16,217,142,0.22); color: #05f0ac; border: 1px solid rgba(16,217,142,0.50); box-shadow: 0 3px 14px rgba(0,0,0,0.42), 0 0 14px rgba(16,217,142,0.20); } .tag-bestseller { background: rgba(245,158,11,0.22); color: #fdd049; border: 1px solid rgba(245,158,11,0.55); box-shadow: 0 3px 14px rgba(0,0,0,0.42), 0 0 14px rgba(245,158,11,0.22); } .tag-new { background: rgba(201,154,60,0.22); color: #22e8ff; border: 1px solid rgba(201,154,60,0.52); box-shadow: 0 3px 14px rgba(0,0,0,0.42), 0 0 14px rgba(201,154,60,0.20); } .tag-premium { background: rgba(139,92,246,0.22); color: #c4b5fd; border: 1px solid rgba(139,92,246,0.52); box-shadow: 0 3px 14px rgba(0,0,0,0.42), 0 0 14px rgba(139,92,246,0.22); } .tag-trending { background: rgba(147,2,5,0.22); color: #7ec4ff; border: 1px solid rgba(147,2,5,0.52); box-shadow: 0 3px 14px rgba(0,0,0,0.42), 0 0 14px rgba(147,2,5,0.20); } .tag-popular { background: rgba(255,77,109,0.22); color: #ff8fa8; border: 1px solid rgba(255,77,109,0.52); box-shadow: 0 3px 14px rgba(0,0,0,0.42), 0 0 14px rgba(255,77,109,0.22); } /* ── SALES / DOWNLOADS BADGE (bottom-left of cover) ──────────── */ .pdf-cover-sales { position: absolute; bottom: 10px; left: 11px; z-index: 4; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 20px; background: rgba(0,0,0,0.65); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.14); font-family: var(--font-ui); font-size: 0.62rem; font-weight: 700; color: rgba(255,255,255,0.90); letter-spacing: 0.04em; box-shadow: 0 2px 8px rgba(0,0,0,0.40); } .pdf-cover-sales svg { opacity: 0.80; flex-shrink: 0; } /* ── CARD BODY ───────────────────────────────────────────────── */ .pdf-card-body { padding: 14px 15px 5px; flex: 1; display: flex; flex-direction: column; gap: 0; min-height: 0; } /* Title — max 2 lines, Playfair Display */ .pdf-title { font-family: var(--font-display); font-size: 0.975rem; font-weight: 700; line-height: 1.34; color: var(--text); margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; letter-spacing: -0.018em; } body.light .pdf-title { color: #080e22; } /* Author — slim italic, secondary */ .pdf-author { font-family: var(--font-ui); font-size: 0.70rem; color: var(--text2); font-weight: 400; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.01em; font-style: italic; opacity: 0.78; } /* Rating row */ .pdf-meta { display: flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-size: 0.69rem; color: var(--text2); flex-wrap: nowrap; margin-bottom: 0; overflow: hidden; } .pdf-rating { display: inline-flex; align-items: center; gap: 2px; color: #f59e0b; font-weight: 700; font-size: 0.74rem; flex-shrink: 0; } /* ── META CHIP ROW — elegant compact info row ─────────────────── */ .pdf-meta-chips { display: flex; flex-wrap: nowrap; gap: 4px; margin-top: 8px; overflow: hidden; max-width: 100%; } .pdf-meta-chip { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 20px; font-family: var(--font-ui); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid; white-space: nowrap; line-height: 1; flex-shrink: 0; max-width: 72px; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.18s; } /* Dark chip colors */ .chip-cat { background: rgba(147,2,5,0.14); color: #82c5ff; border-color: rgba(147,2,5,0.28); } .chip-class { background: rgba(201,154,60,0.13); color: #55dff2; border-color: rgba(201,154,60,0.28); } .chip-stream { background: rgba(139,92,246,0.14); color: #cdbeff; border-color: rgba(139,92,246,0.28); } .chip-subject { background: rgba(245,158,11,0.13); color: #fdd049; border-color: rgba(245,158,11,0.28); } /* Light chip colors */ body.light .chip-cat { background: rgba(147,2,5,0.09); color: #930205; border-color: rgba(147,2,5,0.25); } body.light .chip-class { background: rgba(201,154,60,0.09); color: #0891b2; border-color: rgba(201,154,60,0.25); } body.light .chip-stream { background: rgba(139,92,246,0.09); color: #6d28d9; border-color: rgba(139,92,246,0.25); } body.light .chip-subject { background: rgba(245,158,11,0.09); color: #92400e; border-color: rgba(245,158,11,0.25); } /* ── INLINE BADGE (Bestseller tag in body) ───────────────────── */ .pdf-badge-inline { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 20px; font-family: var(--font-ui); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(249,115,22,0.10)); color: #fdd049; border: 1px solid rgba(245,158,11,0.36); width: fit-content; margin-top: 6px; box-shadow: 0 0 12px rgba(245,158,11,0.14); } /* ── PRICE ROW ───────────────────────────────────────────────── */ .pdf-price-row { display: flex; align-items: center; gap: 7px; margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,0.070); flex-wrap: nowrap; } body.light .pdf-price-row { border-top-color: rgba(0,0,0,0.08); } .price-current { font-family: 'Inter', var(--font-display), sans-serif; font-size: 1.28rem; font-weight: 800; background: linear-gradient(135deg, #58a8ff 0%, #00d4f0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.025em; line-height: 1; } .price-free { font-family: 'Inter', var(--font-display), sans-serif; font-size: 1.28rem; font-weight: 800; background: linear-gradient(135deg, #05f0ac 0%, #00c8d4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.025em; line-height: 1; } .price-original { font-family: var(--font-ui); font-size: 0.74rem; color: var(--text3); text-decoration: line-through; font-weight: 400; } .price-discount-badge { margin-left: auto; padding: 2px 7px; border-radius: 8px; font-family: var(--font-ui); font-size: 0.58rem; font-weight: 800; background: rgba(16,217,142,0.18); color: #05f0ac; border: 1px solid rgba(16,217,142,0.32); letter-spacing: 0.05em; flex-shrink: 0; box-shadow: 0 0 10px rgba(16,217,142,0.18); } /* ── PRODUCT REVIEWS & RATINGS ─────────────────────────────────── */ .pdp-review-form { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.09); border-radius: 14px; padding: 18px; margin-top: 16px; } body.light .pdp-review-form { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.10); } .pdp-review-form-title { font-family: var(--font-ui); font-size: 0.80rem; font-weight: 700; color: var(--text); margin-bottom: 12px; letter-spacing: 0.01em; } .pdp-star-selector { display: flex; gap: 6px; margin-bottom: 12px; } .pdp-star-selector button { background: none; border: none; cursor: pointer; font-size: 1.55rem; line-height: 1; color: rgba(255,255,255,0.18); padding: 0; transition: color 0.15s, transform 0.12s; } body.light .pdp-star-selector button { color: rgba(0,0,0,0.18); } .pdp-star-selector button.active, .pdp-star-selector button:hover { color: #f59e0b; transform: scale(1.15); } .pdp-review-textarea { width: 100%; min-height: 72px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 9px; color: var(--text); font-family: var(--font-ui); font-size: 0.80rem; padding: 10px 12px; resize: vertical; box-sizing: border-box; outline: none; margin-bottom: 10px; transition: border-color 0.18s; } body.light .pdp-review-textarea { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); color: #080e22; } .pdp-review-textarea:focus { border-color: rgba(147,2,5,0.45); } .pdp-review-textarea::placeholder { color: var(--text3); } .pdp-review-submit-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 9px; background: var(--grad-primary); color: #fff; font-family: var(--font-ui); font-size: 0.78rem; font-weight: 700; border: none; cursor: pointer; transition: opacity 0.18s, transform 0.12s; } .pdp-review-submit-btn:hover { opacity: 0.88; transform: translateY(-1px); } .pdp-review-submit-btn:active { transform: scale(0.97); } .pdp-review-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; } .pdp-rev-verified-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 0.60rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; background: rgba(16,217,142,0.12); color: #10d98e; border: 1px solid rgba(16,217,142,0.30); border-radius: 20px; padding: 2px 7px; flex-shrink: 0; } /* sample-badge CSS deleted with the fake PDP review cards (Sep 2026 P1) */ .pdp-rev-login-prompt { font-family: var(--font-ui); font-size: 0.78rem; color: var(--text2); padding: 12px 0 4px; } .pdp-rev-login-prompt a { color: var(--accent); cursor: pointer; text-decoration: underline; font-weight: 600; } /* Rating pill on cards — async loaded */ .pdf-rating-pill { display: inline-flex; align-items: center; gap: 2px; } /* ── ACTION AREA ─────────────────────────────────────────────── */ .pdf-card-actions { padding: 8px 12px 14px; display: flex; gap: 0; } /* ── BUY / GET FREE BUTTON — luxury gradient CTA ─────────────── */ .pdf-buy-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 14px; min-height: 44px; border-radius: 14px; font-family: var(--font-ui); font-size: 0.84rem; font-weight: 700; letter-spacing: 0.025em; cursor: pointer; border: none; position: relative; overflow: hidden; color: #fff; background: linear-gradient(135deg, #930205 0%, #7d1122 38%, #c99a3c 75%, #c99a3c 100%); box-shadow: 0 4px 20px rgba(147,2,5,0.48), 0 1px 0 rgba(255,255,255,0.24) inset, 0 -1px 0 rgba(0,0,0,0.18) inset; transition: transform 0.25s cubic-bezier(0.34,1.3,0.64,1), box-shadow 0.25s ease, filter 0.18s ease; } /* Shine sweep on hover */ .pdf-buy-btn::before { content: ''; position: absolute; top: 0; left: -130%; width: 80%; height: 100%; background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.28) 50%, transparent 100%); transition: left 0.55s ease; pointer-events: none; } /* Top edge highlight */ .pdf-buy-btn::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.42) 50%, transparent 100%); pointer-events: none; } .pdf-buy-btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 36px rgba(147,2,5,0.68), 0 1px 0 rgba(255,255,255,0.26) inset; filter: brightness(1.07) saturate(1.08); } .pdf-buy-btn:hover::before { left: 140%; } .pdf-buy-btn:active { transform: translateY(0) scale(0.980); transition-duration: 0.09s; filter: brightness(0.95); } /* Free variant */ .pdf-buy-btn.free-btn { background: linear-gradient(135deg, #05c67c 0%, #08b87a 40%, #00a0be 100%); box-shadow: 0 4px 20px rgba(16,217,142,0.46), 0 1px 0 rgba(255,255,255,0.22) inset; } .pdf-buy-btn.free-btn:hover { box-shadow: 0 10px 36px rgba(16,217,142,0.62), 0 1px 0 rgba(255,255,255,0.24) inset; } /* Report Broken PDF button — compact icon button beside buy */ .pdf-report-btn { width: 38px; min-height: 44px; border-radius: 10px; border: 1px solid var(--glass-border); background: var(--glass); color: var(--text3); cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: 7px; flex-shrink: 0; transition: all .2s; font-size: .75rem; } .pdf-report-btn:hover { border-color: var(--danger); color: var(--danger); background: rgba(255,77,109,0.08); } /* ── LEGACY COMPAT — kept for detail page ────────────────────── */ .pdf-meta-info { padding: 0 16px 8px; display: flex; flex-direction: column; gap: 4px; } .pdf-meta-info p { font-size: .72rem; color: var(--text2); line-height: 1.4; } .pdf-meta-info p b { color: var(--text); font-weight: 600; } .pdf-meta-info .badge { display: inline-block; margin-top: 4px; padding: 3px 10px; border-radius: 20px; font-size: .65rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: rgba(147,2,5,.15); color: var(--accent); border: 1px solid rgba(147,2,5,.25); } .pdf-price { margin-top: auto; display: flex; align-items: center; gap: 8px; } /* ── DETAILS INFO (detail page) ──────────────────────────────── */ .details-info { margin-bottom: 16px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--glass-border); display: flex; flex-direction: column; gap: 6px; } .details-info p { font-size: .82rem; color: var(--text2); line-height: 1.5; } .details-info p strong { color: var(--text); font-weight: 600; min-width: 70px; display: inline-block; } /* ── HERO ────────────────────────────────────────────────────── */ /* Height target: hero should occupy roughly 55-60% of viewport height on first load, so the start of the next section peeks in below the fold without scrolling — achieved via compact padding plus a min-height clamp (was 110px/90px padding only, which pushed well past 100vh on most screens). */ .hero { position: relative; overflow: hidden; padding: 32px 0 52px; /* ↑ extra bottom pad keeps search bar clear of clip */ display: flex; align-items: flex-start; /* content anchors to top, no artificial max cut-off */ min-height: clamp(380px, 58vh, 600px); /* max-height REMOVED — was clipping search bar + CTA buttons on short viewports */ box-sizing: border-box; } .hero-bg { position: absolute; inset: 0; pointer-events: none; } .hero-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .10; } /* PERF: opacity reduced, blur reduced */ .hero-orb-1 { width: 480px; height: 480px; background: radial-gradient(circle, #930205, #5a0103); top: -140px; left: -100px; animation: float 9s ease-in-out infinite; } .hero-orb-2 { width: 340px; height: 340px; background: radial-gradient(circle, #c99a3c, #a67c2a); top: -40px; right: -60px; animation: float 11s ease-in-out infinite reverse; } .hero-orb-3 { width: 240px; height: 240px; background: radial-gradient(circle, #f59e0b, #d97706); bottom: -90px; left: 45%; animation: float 7s ease-in-out infinite; opacity: .11; } /* Extra mesh for depth */ .hero-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(147,2,5,0.07) 0%, transparent 70%); } @keyframes float { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-22px) scale(1.04); } } /* Hero content: centred, padded, never wider than viewport */ .hero-content { position: relative; text-align: center; max-width: 820px; margin: 0 auto; padding: 0 16px; /* prevents text touching screen edges on mobile */ width: 100%; box-sizing: border-box; z-index: 2; /* above .hero::after fade overlay (z-index:1) */ } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 18px; border-radius: 24px; background: rgba(147,2,5,.12); border: 1px solid rgba(147,2,5,.28); font-size: .8rem; font-weight: 600; color: var(--accent2); margin-bottom: 14px; animation: fadeUp .6s ease; box-shadow: 0 0 24px rgba(147,2,5,0.12); /* prevent badge from overflowing on very narrow screens */ max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hero-title { font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2.4rem); font-weight: 800; line-height: 1.2; margin-bottom: 10px; animation: fadeUp .6s ease .1s both; /* Reserve vertical space so fadeUp doesn't cause layout shift */ overflow-wrap: break-word; word-break: break-word; } .hero-title .grad { background: var(--grad-hero); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-sub { font-size: clamp(.9rem, 2vw, 1.05rem); color: var(--text2); max-width: 560px; width: 100%; margin: 0 auto 20px; line-height: 1.65; /* Replaced animation that was causing translateY layout shift — now opacity-only */ animation: fadeIn .7s ease .2s both; font-weight: 300; /* Ensure text wraps correctly; no clipping */ overflow-wrap: break-word; word-break: break-word; word-wrap: break-word; padding: 0 4px; white-space: normal; /* Reserve space for 2 lines so the typewriter never clips or truncates */ min-height: calc(1.65em * 2); overflow: visible; display: block; } .hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; /* Same fix: opacity fade instead of translateY to prevent CLS */ animation: fadeIn .7s ease .3s both; margin-bottom: 6px; /* breathing room between CTA buttons and search bar */ padding-bottom: 2px; } /* ── Hero Join Community WhatsApp button — PREMIUM ── */ .hero-wa-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px; border-radius: 100px; border: 1.5px solid rgba(255,255,255,0.22); cursor: pointer; font-size: .95rem; font-weight: 800; font-family: inherit; text-decoration: none; position: relative; overflow: hidden; background: linear-gradient(135deg, #22e56a 0%, #25d366 40%, #0eaf4c 80%, #0a8c3c 100%); color: #fff; box-shadow: 0 0 0 0 rgba(37,211,102,0), 0 6px 24px rgba(37,211,102,0.45), 0 2px 8px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.25); transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, filter .2s ease; letter-spacing: .02em; white-space: nowrap; animation: waEntrance .6s cubic-bezier(.34,1.56,.64,1) .5s both, waGlow 3s ease-in-out 1.1s infinite; } @keyframes waEntrance { from { opacity: 0; transform: translateY(12px) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes waGlow { 0%, 100% { box-shadow: 0 6px 24px rgba(37,211,102,0.45), 0 2px 8px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.25); } 50% { box-shadow: 0 0 0 6px rgba(37,211,102,0.12), 0 8px 32px rgba(37,211,102,0.65), 0 2px 8px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.25); } } .hero-wa-btn::before { content: ''; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.32), transparent); transform: skewX(-20deg); animation: waSweep 3s ease-in-out 1s infinite; } @keyframes waSweep { 0% { left: -70%; opacity: 0; } 10% { opacity: 1; } 65% { left: 140%; opacity: 1; } 66% { opacity: 0; } 100% { left: 140%; opacity: 0; } } .hero-wa-btn::after { content: ''; position: absolute; inset: 0; border-radius: 100px; background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 60%); pointer-events: none; } .hero-wa-btn:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 0 0 5px rgba(37,211,102,0.15), 0 12px 36px rgba(37,211,102,0.6), 0 3px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3); filter: brightness(1.08); animation: none; } .hero-wa-btn:active { transform: translateY(0) scale(.97); } .hero-wa-icon { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3)); } .hero-wa-label { display: flex; flex-direction: column; line-height: 1.15; } .hero-wa-label-top { font-size: .7rem; font-weight: 600; opacity: .85; letter-spacing: .06em; text-transform: uppercase; } .hero-wa-label-main { font-size: .95rem; font-weight: 800; } .hero-wa-pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #fff; margin-left: 2px; flex-shrink: 0; animation: waPulse 1.6s ease-in-out infinite; box-shadow: 0 0 6px rgba(255,255,255,0.8); } @keyframes waPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0.6); } 50% { transform: scale(1.2); box-shadow: 0 0 0 5px rgba(255,255,255,0); } } @media (max-width: 480px) { .hero-wa-btn { font-size: .85rem; padding: 11px 18px; gap: 9px; } .hero-wa-label-top { font-size: .65rem; } .hero-wa-label-main { font-size: .85rem; } } .hero-stats { display: flex; gap: 48px; justify-content: center; margin-top: 36px; flex-wrap: wrap; animation: fadeIn .7s ease .4s both; } .hero-stat { text-align: center; } .hero-stat-num { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; background: var(--grad-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-stat-label { font-size: .8rem; color: var(--text2); margin-top: 2px; } /* Original slide-up for elements that don't affect layout flow */ @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* Opacity-only fade for hero-sub / hero-actions to prevent content movement */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ── DYNAMIC HERO SYSTEM ─────────────────────────────────────── */ /* Particles */ .hero-particles { position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0; } .hero-particle { position:absolute; border-radius:50%; animation: particleDrift linear infinite; background: radial-gradient(circle, rgba(147,2,5,0.6), transparent); } @keyframes particleDrift { 0% { transform: translateY(100vh) scale(0); opacity:0; } 10% { opacity:1; } 90% { opacity:.5; } 100% { transform: translateY(-10vh) scale(1.2) translateX(40px); opacity:0; } } /* Shine sweep */ @keyframes heroBadgeShine { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } .hero-badge-shine { background: linear-gradient(90deg, transparent 25%, rgba(255,255,255,0.25) 50%, transparent 75%); background-size: 200% auto; animation: heroBadgeShine 2.5s linear infinite; } /* Gradient text animation */ @keyframes gradShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .hero-animated-grad { background-size: 200% 200% !important; animation: gradShift 4s ease infinite !important; } /* Glow pulse */ @keyframes glowPulse { 0%,100% { text-shadow: 0 0 20px rgba(147,2,5,0.4), 0 0 40px rgba(147,2,5,0.15); } 50% { text-shadow: 0 0 40px rgba(147,2,5,0.7), 0 0 80px rgba(147,2,5,0.3); } } .hero-glow-text { animation: glowPulse 3s ease-in-out infinite; } /* Floating layout */ .hero-layout-split { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; text-align:left; } .hero-layout-split .container { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; width:100%; } .hero-layout-split .hero-content { max-width:100%; margin:0; text-align:left; padding:0; } .hero-layout-split .hero-actions { justify-content:flex-start; } .hero-layout-split .hero-sub { margin-left:0; } .hero-layout-split .search-wrap { max-width:100%; } .hero-layout-split { min-height: clamp(460px, 68vh, 680px); padding: 40px 0 56px; } .hero-layout-centered .hero-content { text-align:center; } @media(max-width:640px){ .hero-layout-split { grid-template-columns:1fr; gap:32px; min-height: clamp(380px, 58vh, 600px); padding: 32px 0 52px; } .hero-layout-split .container { grid-template-columns:1fr; gap:0; } .hero-layout-split .hero-content { text-align:center; padding:0 16px; } .hero-layout-split .hero-actions { justify-content:center; } .hero-layout-split .hero-sub { margin-left:auto; } } /* Glassmorphism badge */ /* ── HERO VISUAL PANEL (right-side split) ─────────────────────── */ .hero-visual-panel { position: relative; display: none; /* hidden by default / centered layout */ align-items: center; justify-content: center; z-index: 2; } .hero-layout-split .hero-visual-panel { display: flex; } /* Floating scene container */ .hvp-scene { position: relative; width: 100%; max-width: 520px; aspect-ratio: 4/3; animation: hvpFloat 6s ease-in-out infinite; } @keyframes hvpFloat { 0%,100% { transform: translateY(0px) rotate(-0.5deg); } 50% { transform: translateY(-12px) rotate(0.5deg); } } /* The background image fills the panel */ .hvp-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; filter: brightness(0.88) saturate(1.15); box-shadow: 0 32px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(147,2,5,0.18); } /* Gradient overlay — left edge fade so text reads clean */ .hvp-overlay { position: absolute; inset: 0; border-radius: 20px; background: linear-gradient( to right, rgba(2,8,23,0.72) 0%, rgba(2,8,23,0.18) 45%, rgba(2,8,23,0.04) 100% ); pointer-events: none; } /* Floating label chips on top of image */ .hvp-chip { position: absolute; display: flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 30px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 4px 24px rgba(0,0,0,0.32); white-space: nowrap; animation: hvpChipIn .6s ease both; } @keyframes hvpChipIn { from { opacity:0; transform: scale(.85) translateY(8px); } to { opacity:1; transform: scale(1) translateY(0); } } .hvp-chip-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; } .hvp-chip-1 { top:12%; right:6%; background:rgba(147,2,5,0.22); color:#7fc4ff; animation-delay:.2s; } .hvp-chip-2 { top:30%; right:6%; background:rgba(16,217,142,0.20); color:#5dffc9; animation-delay:.35s; } .hvp-chip-3 { top:48%; right:6%; background:rgba(245,158,11,0.22); color:#ffd26a; animation-delay:.50s; } .hvp-chip-4 { top:64%; right:6%; background:rgba(139,92,246,0.22); color:#c4a7ff; animation-delay:.65s; } .hvp-chip-5 { top:80%; right:6%; background:rgba(201,154,60,0.20); color:#80f0ff; animation-delay:.80s; } /* AI badge bottom-left */ .hvp-ai-badge { position: absolute; bottom: 14px; left: 14px; display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgba(139,92,246,0.25); border: 1px solid rgba(139,92,246,0.4); border-radius: 12px; font-size: .72rem; font-weight: 700; color: #c4a7ff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 24px rgba(139,92,246,0.22); animation: hvpChipIn .7s ease 1s both; } .hvp-ai-pulse { width: 8px; height: 8px; border-radius: 50%; background: #a78bfa; box-shadow: 0 0 0 0 rgba(167,139,250,0.7); animation: hvpPulse 2s infinite; flex-shrink: 0; } @keyframes hvpPulse { 0% { box-shadow: 0 0 0 0 rgba(167,139,250,0.7); } 70% { box-shadow: 0 0 0 8px rgba(167,139,250,0); } 100% { box-shadow: 0 0 0 0 rgba(167,139,250,0); } } /* Glow ring around panel */ .hvp-glow-ring { position: absolute; inset: -2px; border-radius: 22px; background: transparent; box-shadow: 0 0 60px rgba(147,2,5,0.18), 0 0 120px rgba(201,154,60,0.10); pointer-events: none; } /* Mobile: hide panel */ @media (max-width: 768px) { .hero-visual-panel { display: none !important; } } .hero-badge-glass { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.18) !important; } /* Typing cursor */ .hero-cursor::after { content:'|'; animation: blink 0.8s step-end infinite; color:var(--accent2); } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} } /* ══════════════════════════════════════════════════════════════ ADAPTIVE HERO BACKGROUND SYSTEM — Day/Night + Responsive ══════════════════════════════════════════════════════════════ */ /* ── Background layer that sits behind everything in .hero ─── */ .hero-adaptive-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; will-change: transform; } /* ── Individual image layers ─────────────────────────────── */ .hab-layer { position: absolute; inset: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; opacity: 0; transition: opacity 1s ease; will-change: opacity; } /* Active state */ .hab-layer.hab-active { opacity: 1; } /* ── Night layers ─────────────────────────────────────────── */ /* Mobile: portrait study-desk night art */ .hab-night-mobile { background-image: url('/hero_assets/hero_mobile.jpg'); background-position: 68% center; } /* Desktop/Tablet: landscape night art */ .hab-night-desktop { background-image: url('/hero_assets/hero_desktop.jpg'); background-position: right center; } /* ── Day layers ───────────────────────────────────────────── */ .hab-day-mobile { background-image: url('/hero_assets/hero_mobile.jpg'); background-position: 68% center; } .hab-day-desktop { background-image: url('/hero_assets/hero_desktop.jpg'); background-position: right center; } /* ── Overlay gradients — text readability ──────────────────── */ /* Desktop: left 45% dark, right clear */ .hab-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 1; } /* Desktop gradient */ @media (min-width: 1025px) { .hab-overlay { background: linear-gradient( to right, rgba(8,12,20,0.82) 0%, rgba(8,12,20,0.72) 30%, rgba(8,12,20,0.42) 50%, rgba(8,12,20,0.12) 70%, rgba(8,12,20,0.05) 100% ); } /* Day mode overlay is slightly lighter */ .hab-day-active .hab-overlay { background: linear-gradient( to right, rgba(5,15,40,0.80) 0%, rgba(5,15,40,0.68) 30%, rgba(5,15,40,0.36) 52%, rgba(5,15,40,0.08) 72%, transparent 100% ); } /* Show desktop layers, hide mobile */ .hab-night-mobile, .hab-day-mobile { display: none; } } /* Tablet: center-left protection */ @media (min-width: 641px) and (max-width: 1024px) { .hab-overlay { background: linear-gradient( to right, rgba(8,12,20,0.88) 0%, rgba(8,12,20,0.76) 38%, rgba(8,12,20,0.50) 58%, rgba(8,12,20,0.18) 80%, rgba(8,12,20,0.06) 100% ); } .hab-day-active .hab-overlay { background: linear-gradient( to right, rgba(5,15,40,0.86) 0%, rgba(5,15,40,0.72) 38%, rgba(5,15,40,0.44) 58%, rgba(5,15,40,0.14) 80%, transparent 100% ); } /* tablet uses desktop images */ .hab-night-mobile, .hab-day-mobile { display: none; } } /* Mobile: full-width gradient, portrait image */ @media (max-width: 640px) { .hab-overlay { background: linear-gradient( to bottom, rgba(8,12,20,0.68) 0%, rgba(8,12,20,0.42) 22%, rgba(8,12,20,0.22) 50%, rgba(8,12,20,0.38) 78%, rgba(8,12,20,0.62) 100% ); } .hab-day-active .hab-overlay { background: linear-gradient( to bottom, rgba(5,15,40,0.62) 0%, rgba(5,15,40,0.38) 22%, rgba(5,15,40,0.18) 50%, rgba(5,15,40,0.32) 78%, rgba(5,15,40,0.58) 100% ); } /* Mobile: hide desktop layers */ .hab-night-desktop, .hab-day-desktop { display: none; } /* Mobile portrait: focus on right area where desk/lamp are */ .hab-night-mobile { background-position: 72% center; } .hab-day-mobile { background-position: 70% center; } } /* Light mode: suppress existing body bg orbs while adaptive bg is active */ .hero .hero-orb { opacity: 0.06; } /* ── Ensure hero z-index layers are correct ──────────────── */ .hero { position: relative; } .hero-adaptive-bg { z-index: 0; } .hero .hero-bg { z-index: 0; opacity: 0.35; } /* keep orbs subtle */ .hero .hero-particles { z-index: 1; } .hero-adaptive-bg .hab-overlay { z-index: 2; } .hero .container { position: relative; z-index: 3; } /* ── HERO DESIGNER ADMIN UI ──────────────────────────────────── */ .hd-tabs { display:flex; gap:6px; margin-bottom:24px; flex-wrap:wrap; border-bottom:1px solid var(--glass-border); padding-bottom:12px; } .hd-tab { padding:7px 16px; border-radius:8px; font-size:.8rem; font-weight:600; cursor:pointer; background:transparent; border:1px solid var(--glass-border); color:var(--text2); transition:all .2s; white-space:nowrap; } .hd-tab.active { background:var(--accent); border-color:var(--accent); color:#fff; } .hd-tab:hover:not(.active) { border-color:var(--accent); color:var(--accent); } .hd-panel { display:none; } .hd-panel.active { display:block; } .hd-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; } .hd-field { display:flex; flex-direction:column; gap:6px; } .hd-label { font-size:.75rem; font-weight:600; color:var(--text2); text-transform:uppercase; letter-spacing:.05em; } .hd-input { padding:9px 12px; border-radius:8px; border:1px solid var(--glass-border); background:var(--glass); color:var(--text); font-family:var(--font-body); font-size:.875rem; outline:none; transition:border .2s; width:100%; } .hd-input:focus { border-color:var(--accent); } .hd-color-row { display:flex; align-items:center; gap:8px; } .hd-color-swatch { width:36px; height:36px; border-radius:8px; border:1px solid var(--glass-border); cursor:pointer; flex-shrink:0; } .hd-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:var(--glass); border:1px solid var(--glass-border); border-radius:10px; } .hd-toggle-label { font-size:.875rem; font-weight:500; } .hd-toggle { width:40px; height:22px; border-radius:11px; background:var(--glass-border); position:relative; cursor:pointer; transition:background .2s; border:none; flex-shrink:0; } .hd-toggle.on { background:var(--accent); } .hd-toggle::after { content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .2s; } .hd-toggle.on::after { transform:translateX(18px); } .hd-preset-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; } .hd-preset { padding:12px 14px; border-radius:10px; border:1px solid var(--glass-border); cursor:pointer; transition:all .2s; text-align:center; font-size:.8rem; font-weight:600; position:relative; overflow:hidden; } .hd-preset:hover { border-color:var(--accent); transform:translateY(-2px); } /* ── PREMIUM THEME ENGINE — preset card upgrades ──────────────── */ .hd-preset.hd-preset-premium { border:1px solid rgba(255,255,255,0.08); } .hd-preset.hd-preset-premium:hover { box-shadow:0 10px 28px rgba(0,0,0,0.35); } .hd-preset-premium-tag { position:absolute; top:6px; right:6px; font-size:.55rem; font-weight:800; letter-spacing:.06em; padding:2px 7px; border-radius:6px; background:linear-gradient(135deg,#f59e0b,#fbbf24); color:#1a1200; text-transform:uppercase; box-shadow:0 2px 8px rgba(245,158,11,0.4); } .hd-preset-active-tag { position:absolute; top:6px; left:6px; font-size:.55rem; font-weight:800; letter-spacing:.04em; padding:2px 7px; border-radius:6px; background:rgba(16,185,129,0.9); color:#fff; } /* ── HERO CTA — premium theme-driven button system ───────────── */ /* These rules only take effect once heroApplySettings sets the related CSS variables on #heroActions; when unset, --hero-cta-* simply fall back to the existing .btn-primary / .btn-secondary look, so legacy presets (and any saved settings without these fields) are 100% visually unchanged. */ #heroActions.hero-cta-themed #heroCta1 { background: var(--hero-cta1-bg, var(--accent)); border-color: var(--hero-cta1-border, transparent); color: var(--hero-cta1-color, #fff); box-shadow: var(--hero-cta1-shadow, none); transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; } #heroActions.hero-cta-themed #heroCta2 { background: var(--hero-cta2-bg, transparent); border-color: var(--hero-cta2-border, var(--glass-border)); color: var(--hero-cta2-color, var(--text)); box-shadow: var(--hero-cta2-shadow, none); transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; } #heroActions.hero-cta-themed #heroCta1:hover { transform: translateY(-3px) scale(1.015); box-shadow: var(--hero-cta1-hover-shadow, var(--hero-cta1-shadow, none)); filter: brightness(1.08); } #heroActions.hero-cta-themed #heroCta2:hover { transform: translateY(-3px) scale(1.015); box-shadow: var(--hero-cta2-hover-shadow, var(--hero-cta2-shadow, none)); filter: brightness(1.08); } .hero-badge.hero-badge-themed { box-shadow: var(--hero-badge-shadow, none); } .hero-title.hero-title-themed { text-shadow: var(--hero-title-shadow, none); } /* Smooth cross-theme transition when rotation engine swaps presets live */ .hero-theme-transition, .hero-theme-transition #heroBadge, .hero-theme-transition #heroCta1, .hero-theme-transition #heroCta2, .hero-theme-transition #heroHighlight, .hero-theme-transition #heroTitle { transition: background 1.1s ease, background-color 1.1s ease, border-color 1.1s ease, color 1.1s ease, box-shadow 1.1s ease, text-shadow 1.1s ease, filter 1.1s ease !important; } /* ── AUTO PRESET ROTATION ENGINE — admin UI ───────────────────── */ .hd-rotation-card { padding:16px; border-radius:12px; border:1px solid var(--glass-border); background:var(--glass); } .hd-rotation-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; } .hd-rotation-pick { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; border:1px solid var(--glass-border); cursor:pointer; transition:all .2s; font-size:.82rem; font-weight:600; } .hd-rotation-pick:hover { border-color:var(--accent); } .hd-rotation-pick.picked { border-color:var(--accent); background:rgba(147,2,5,0.08); } .hd-rotation-pick input[type=checkbox] { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; } .hd-rotation-order-badge { width:20px; height:20px; border-radius:50%; background:var(--accent); color:#fff; font-size:.68rem; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .hd-rotation-day-grid { display:flex; gap:6px; flex-wrap:wrap; } .hd-rotation-day { padding:7px 12px; border-radius:8px; border:1px solid var(--glass-border); font-size:.75rem; font-weight:700; cursor:pointer; transition:all .2s; background:transparent; color:var(--text2); } .hd-rotation-day.active { background:var(--accent); border-color:var(--accent); color:#fff; } .hd-rotation-status-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; } .hd-rotation-stat { padding:14px; border-radius:10px; background:var(--glass); border:1px solid var(--glass-border); } .hd-rotation-stat-label { font-size:.68rem; color:var(--text2); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; } .hd-rotation-stat-value { font-size:.95rem; font-weight:700; } .hd-rotation-history-row { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-radius:8px; background:var(--glass); border:1px solid var(--glass-border); font-size:.78rem; margin-bottom:6px; } .hd-rotation-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background:var(--glass); border:1px solid var(--glass-border); border-radius:10px; } .hd-preview-frame { position:relative; border-radius:16px; overflow:hidden; min-height:280px; border:1px solid var(--glass-border); margin-bottom:20px; background:var(--bg); } .hd-section-head { font-size:.7rem; font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--glass-border); } .hd-save-btn { padding:11px 28px; border-radius:10px; background:var(--accent); color:#fff; font-weight:700; font-size:.9rem; cursor:pointer; border:none; transition:all .2s; box-shadow:0 4px 20px rgba(147,2,5,0.35); } .hd-save-btn:hover { transform:translateY(-1px); box-shadow:0 6px 28px rgba(147,2,5,0.5); } .hd-save-btn:disabled { opacity:.6; cursor:not-allowed; } /* ── SEARCH ──────────────────────────────────────────────────── */ .search-wrap { position: relative; max-width: 640px; margin: 20px auto 0; animation: fadeIn .6s ease .35s both; /* fadeIn = opacity only, no translateY that could clip */ } .search-input { width: 100%; padding: 13px 56px 13px 22px; border-radius: var(--radius); border: 1px solid var(--glass-border); background: rgba(255,255,255,0.04); backdrop-filter: blur(8px); font-size: 1rem; color: var(--text); font-family: var(--font-body); outline: none; transition: all .25s; } .search-input::placeholder { color: var(--text3); } .search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(147,2,5,.1), 0 8px 32px rgba(0,0,0,0.25); background: rgba(147,2,5,0.03); } .search-icon { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--text2); pointer-events: none; } /* ── FILTERS ─────────────────────────────────────────────────── */ .filters { display: flex; gap: 8px; flex-wrap: wrap; padding: 16px 0; } .filter-chip { padding: 8px 18px; border-radius: 20px; font-size: .85rem; font-weight: 500; cursor: pointer; border: 1px solid var(--glass-border); background: var(--glass); color: var(--text2); transition: all .2s; font-family: var(--font-body); } .filter-chip:hover { border-color: var(--accent); color: var(--accent); } .filter-chip.active { background: var(--grad-primary); color: #fff; border-color: transparent; box-shadow: 0 4px 16px rgba(147,2,5,0.35); } /* ── GRIDS ───────────────────────────────────────────────────── */ .pdf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 20px; align-items: stretch; } .pdf-grid .pdf-card { height: 100%; } .section { padding: 60px 0; } .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; } .section-title { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; } .section-sub { color: var(--text2); font-size: .9rem; margin-top: 4px; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 32px; } .stat-card { padding: 24px; text-align: center; border-top: 2px solid transparent; background: linear-gradient(var(--glass), var(--glass)) padding-box, var(--grad-primary) border-box; border-radius: var(--radius); } .stat-num { font-family: var(--font-display); font-size: 2.1rem; font-weight: 800; background: var(--grad-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .stat-label { font-size: .8rem; color: var(--text2); margin-top: 4px; } .stat-change { font-size: .75rem; font-weight: 600; margin-top: 6px; } .stat-up { color: var(--success); } .stat-down { color: var(--danger); } /* ── TABLE ───────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th { padding: 12px 16px; text-align: left; font-size: .78rem; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--glass-border); } td { padding: 14px 16px; font-size: .875rem; border-bottom: 1px solid var(--glass-border); } tr:last-child td { border-bottom: none; } tr:hover td { background: var(--surface); } /* ── FORM ────────────────────────────────────────────────────── */ .form-group { margin-bottom: 20px; } .form-label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 8px; color: var(--text2); } .form-input { width: 100%; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border); background: var(--surface); color: var(--text); font-family: var(--font-body); font-size: .9rem; outline: none; transition: all .2s; } .form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(147,2,5,.10), 0 4px 16px rgba(0,0,0,0.2); } .form-input::placeholder { color: var(--text2); } select.form-input { appearance: none; cursor: pointer; } .form-hint { font-size: .78rem; color: var(--text2); margin-top: 6px; } .form-error { font-size: .78rem; color: var(--danger); margin-top: 6px; } textarea.form-input { resize: vertical; } /* ── BADGE ───────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: .72rem; font-weight: 600; } .badge-accent { background: rgba(147,2,5,.15); color: var(--accent); } .badge-success { background: rgba(34,197,94,.15); color: var(--success); } .badge-danger { background: rgba(244,63,94,.15); color: var(--danger); } .badge-gold { background: rgba(251,191,36,.15); color: var(--gold); } .badge-cyan { background: rgba(0,212,170,.15); color: var(--accent3); } /* ── OVERLAY / MODAL ─────────────────────────────────────────── */ .overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; } .overlay-bg { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); } .modal { position: relative; max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 32px; border-radius: var(--radius-lg); } .modal-close { position: absolute; top: 16px; right: 16px; } /* ── DASH LAYOUT ─────────────────────────────────────────────── */ .dash-layout { display: flex; gap: 24px; min-height: calc(100vh - 72px); } .sidebar { width: 240px; flex-shrink: 0; padding: 24px 0; } .sidebar-link { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: var(--radius-sm); font-size: .875rem; font-weight: 500; color: var(--text2); cursor: pointer; transition: all .2s; border: none; background: none; width: 100%; text-align: left; font-family: var(--font-body); } .sidebar-link:hover { background: var(--surface); color: var(--text); } .sidebar-link.active { background: linear-gradient(90deg, rgba(147,2,5,0.12), rgba(201,154,60,0.06)); color: var(--accent); border-left: 2px solid var(--accent); padding-left: 14px; box-shadow: inset 0 0 20px rgba(147,2,5,0.04); } .dash-main { flex: 1; padding: 32px 0; min-width: 0; } /* ── PROGRESS ────────────────────────────────────────────────── */ .progress { height: 5px; border-radius: 10px; background: var(--surface); overflow: hidden; } .progress-fill { height: 100%; border-radius: 10px; background: var(--grad-primary); transition: width .5s ease; box-shadow: 0 0 10px rgba(147,2,5,0.4); } /* ── ALERT ───────────────────────────────────────────────────── */ .alert { padding: 14px 18px; border-radius: var(--radius-sm); font-size: .875rem; border: 1px solid; display: flex; align-items: center; gap: 10px; } .alert-info { background: var(--theme-info-bg); border-color: var(--theme-info-border); color: var(--theme-info); } .alert-success { background: var(--theme-success-bg); border-color: var(--theme-success-border); color: var(--theme-success); } .alert-error { background: var(--theme-error-bg); border-color: var(--theme-error-border); color: var(--theme-error); } .alert-warning { background: var(--theme-warning-bg); border-color: var(--theme-warning-border); color: var(--theme-warning); } /* ── UPLOAD ZONE ─────────────────────────────────────────────── */ .upload-zone { border: 2px dashed rgba(147,2,5,0.25); border-radius: var(--radius); padding: 52px 24px; text-align: center; cursor: pointer; transition: all .25s; background: rgba(147,2,5,0.02); } .upload-zone:hover { border-color: var(--accent); background: rgba(147,2,5,.05); box-shadow: 0 0 32px rgba(147,2,5,0.08); } .upload-zone.dragging { border-color: var(--accent); background: rgba(147,2,5,.08); transform: scale(1.01); box-shadow: 0 0 48px rgba(147,2,5,0.15); } /* ── LIVE DOT ────────────────────────────────────────────────── */ .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); display: inline-block; animation: pulse 2s infinite; box-shadow: 0 0 6px var(--success); } @keyframes pulse { 0%,100% { opacity:1; box-shadow: 0 0 0 0 rgba(16,217,142,.5); } 50% { opacity:.85; box-shadow: 0 0 0 6px rgba(16,217,142,0); } } /* ── TOAST — theme-aware, follows --theme-* tokens ───────────── Works for every message type (success/error/warning/info) and automatically matches whichever theme is active (see the centralized theme tokens defined earlier in this file). ────── */ .toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 300; display: flex; flex-direction: column; gap: 10px; max-width: min(92vw, 340px); } .toast { padding: 13px 16px; border-radius: var(--radius-sm); background: var(--theme-surface-elevated); border: 1px solid var(--theme-border); border-left: 3px solid var(--theme-primary); box-shadow: var(--theme-shadow); font-size: .875rem; max-width: 100%; display: flex; align-items: flex-start; gap: 10px; color: var(--theme-text); animation: slideIn .3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .toast .toast-icon-wrap { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 1px; background: var(--theme-info-bg); color: var(--theme-info); } .toast .toast-msg { flex: 1; min-width: 0; color: var(--theme-text); line-height: 1.4; word-wrap: break-word; padding-top: 3px; } .toast .toast-close { flex-shrink: 0; border: none; background: none; cursor: pointer; color: var(--theme-text-muted); font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 6px; margin: -2px -4px 0 0; } .toast .toast-close:hover { color: var(--theme-text); background: var(--theme-surface); } .toast--success { border-left-color: var(--theme-success); } .toast--success .toast-icon-wrap { background: var(--theme-success-bg); color: var(--theme-success); } .toast--error { border-left-color: var(--theme-error); } .toast--error .toast-icon-wrap { background: var(--theme-error-bg); color: var(--theme-error); } .toast--warning { border-left-color: var(--theme-warning); } .toast--warning .toast-icon-wrap { background: var(--theme-warning-bg); color: var(--theme-warning); } .toast--info { border-left-color: var(--theme-info); } .toast--info .toast-icon-wrap { background: var(--theme-info-bg); color: var(--theme-info); } @keyframes slideIn { from { opacity:0; transform: translateX(110%) scale(0.95); } to { opacity:1; transform: translateX(0) scale(1); } } @media (max-width: 480px) { .toast-container { left: 12px; right: 12px; bottom: 16px; max-width: none; align-items: stretch; } .toast { max-width: none; } } /* ── FEATURES ────────────────────────────────────────────────── */ .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; } .feature-card { padding: 28px; } .feature-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .feature-title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; margin-bottom: 8px; } .feature-desc { font-size: .85rem; color: var(--text2); line-height: 1.6; } /* ── DETAIL ──────────────────────────────────────────────────── */ .detail-grid { display: grid; grid-template-columns: 1fr 340px; gap: 32px; } .detail-cover { height: 260px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .sticky-card { position: sticky; top: 88px; } /* ── MOBILE NAV ──────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════ PREMIUM MOBILE NAV BAR — Glassmorphism + Gradient ═══════════════════════════════════════════════════ */ .mobile-nav-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background: rgba(6, 9, 18, 0.92); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border-top: 1px solid rgba(255,255,255,0.07); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 48px rgba(0,0,0,0.55), 0 -1px 0 rgba(147,2,5,0.08); } body.light .mobile-nav-bar { background: rgba(245,248,255,0.94); border-top-color: rgba(0,0,0,0.07); box-shadow: 0 -8px 32px rgba(10,16,34,0.10); } .mobile-nav-items { display: flex; justify-content: space-around; align-items: center; gap: 4px; } .mobile-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: 1; padding: 8px 4px 6px; border-radius: 16px; cursor: pointer; color: var(--text3); font-size: .60rem; font-weight: 600; letter-spacing: .02em; transition: color 0.22s ease, background 0.22s ease, transform 0.28s cubic-bezier(0.34,1.56,0.64,1); border: none; background: none; font-family: var(--font-body); position: relative; overflow: hidden; min-width: 0; -webkit-tap-highlight-color: transparent; } /* Icon wrapper — holds SVG or emoji */ .mobile-nav-item .mni-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 14px; background: transparent; transition: background 0.25s ease, transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease; font-size: 1.25rem; line-height: 1; position: relative; } /* Label */ .mobile-nav-item .mni-label { font-size: .60rem; font-weight: 600; letter-spacing: .025em; transition: color 0.22s ease; line-height: 1; } /* ── HOVER ── */ .mobile-nav-item:hover { color: var(--text2); transform: translateY(-2px); } .mobile-nav-item:hover .mni-icon { background: rgba(255,255,255,0.06); transform: scale(1.08); } body.light .mobile-nav-item:hover .mni-icon { background: rgba(0,0,0,0.05); } /* ── ACTIVE STATE ── */ .mobile-nav-item.active { color: var(--accent); transform: translateY(-1px); } .mobile-nav-item.active .mni-icon { background: linear-gradient(135deg, rgba(147,2,5,0.22) 0%, rgba(201,154,60,0.14) 100%); box-shadow: 0 4px 20px rgba(147,2,5,0.35), 0 0 0 1px rgba(147,2,5,0.20); transform: scale(1.10); } .mobile-nav-item.active .mni-label { background: linear-gradient(135deg, #930205, #c99a3c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700; } /* Active pill indicator — thin bar above icon */ .mobile-nav-item.active::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 28px; height: 3px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, #930205, #c99a3c); box-shadow: 0 0 10px rgba(147,2,5,0.7); } /* Press animation */ .mobile-nav-item:active { transform: scale(0.92) translateY(0); transition-duration: .08s; } .mobile-nav-item:active .mni-icon { transform: scale(0.90); } /* 6-tab layout — slightly tighter items */ .mobile-nav-items:has(.mobile-nav-item:nth-child(6)) .mobile-nav-item { padding: 6px 2px 5px; font-size: .55rem; } .mobile-nav-items:has(.mobile-nav-item:nth-child(6)) .mobile-nav-item .mni-icon { width: 34px; height: 34px; } .mobile-nav-items:has(.mobile-nav-item:nth-child(6)) .mobile-nav-item .mni-label { font-size: .55rem; } /* Premium tab — gold active state */ .mobile-nav-item[data-page="premium"].active { color: #fbbf24; } .mobile-nav-item[data-page="premium"].active .mni-icon { background: linear-gradient(135deg, rgba(251,191,36,0.22) 0%, rgba(245,158,11,0.14) 100%); box-shadow: 0 4px 20px rgba(251,191,36,0.35), 0 0 0 1px rgba(251,191,36,0.20); } .mobile-nav-item[data-page="premium"].active .mni-label { background: linear-gradient(135deg, #fbbf24, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .mobile-nav-item[data-page="premium"].active::before { background: linear-gradient(90deg, #fbbf24, #f59e0b); box-shadow: 0 0 10px rgba(251,191,36,0.7); } body.light .mobile-nav-item[data-page="premium"].active { color: #d97706; } /* SVG inside icon — inherit color */ .mobile-nav-item svg { transition: color 0.22s ease; } .mobile-nav-item.active svg { color: var(--accent); } /* ── Light mode overrides ── */ body.light .mobile-nav-item { color: #8fa0bb; } body.light .mobile-nav-item:hover { color: #4a5f80; } body.light .mobile-nav-item.active { color: #930205; } body.light .mobile-nav-item.active .mni-icon { background: linear-gradient(135deg, rgba(147,2,5,0.14), rgba(201,154,60,0.09)); box-shadow: 0 4px 16px rgba(147,2,5,0.22), 0 0 0 1px rgba(147,2,5,0.15); } body.light .mobile-nav-item.active .mni-label { -webkit-text-fill-color: transparent; } /* ── FOOTER ──────────────────────────────────────────────────── */ .footer { padding: 48px 0 80px; border-top: 1px solid var(--glass-border); margin-top: auto; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; } .footer-desc { font-size: .875rem; color: var(--text2); line-height: 1.7; margin-top: 12px; } .footer-links h4 { font-family: var(--font-display); font-weight: 600; margin-bottom: 14px; font-size: .9rem; } .footer-link { display: block; font-size: .85rem; color: var(--text2); margin-bottom: 8px; cursor: pointer; transition: color .2s; } .footer-link:hover { color: var(--accent); } .footer-bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--glass-border); display: flex; justify-content: space-between; align-items: center; font-size: .8rem; color: var(--text2); flex-wrap: wrap; gap: 8px; } /* ── UTILS ───────────────────────────────────────────────────── */ .divider { height: 1px; background: var(--glass-border); margin: 20px 0; } .text-accent { color: var(--accent); } .text-muted { color: var(--text2); } .text-sm { font-size: .85rem; } .text-xs { font-size: .75rem; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .flex-wrap { flex-wrap: wrap; } .mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px} .mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px} .p-4{padding:16px}.p-6{padding:24px} .rounded{border-radius:var(--radius)}.rounded-lg{border-radius:var(--radius-lg)} .w-full{width:100%} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px} .gap-2{gap:8px}.gap-3{gap:12px} .grad-text { background: linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .hidden { display: none !important; } /* ── RESPONSIVE ──────────────────────────────────────────────── */ @media(max-width:900px){ .detail-grid{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr 1fr} .sidebar{display:none} .dash-layout{flex-direction:column} .dash-main{padding:20px 0} .hero-stats{gap:24px} } @media(max-width:640px){ .nav-links{display:none} .mobile-nav-bar{display:block} main { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } .footer-grid{grid-template-columns:1fr} .hero{padding:28px 0 44px;min-height:clamp(380px,58vh,580px)} /* max-height REMOVED */ .hero-content{padding:0 20px} .hero-site-name{min-height:clamp(2rem,8vw,3rem)} .hero-title{font-size:clamp(1.5rem,6vw,2rem);line-height:1.2;margin-bottom:10px} .hero-sub{ font-size:.9rem; max-width:100%; padding:0; margin-bottom:16px; /* Allow min-height to come from CSS rule; do not force auto */ min-height:calc(1.65em * 2); overflow:visible; } .search-wrap{margin-top:16px} .hero-stats{gap:20px;margin-top:28px} .hero-stat-num{font-size:1.7rem} .hero-badge{font-size:.74rem;padding:5px 14px;max-width:calc(100% - 32px);margin-bottom:10px} .stats-grid{grid-template-columns:1fr 1fr} .pdf-grid{grid-template-columns:repeat(2,1fr);gap:11px} .pdf-title{font-size:0.90rem} .pdf-card-body{padding:11px 12px 4px} .pdf-card-actions{padding:7px 10px 12px} .pdf-buy-btn{padding:10px 10px;min-height:42px;font-size:0.78rem;border-radius:12px} .price-current,.price-free{font-size:1.12rem} .pdf-meta-chips{gap:3px;margin-top:6px} .pdf-meta-chip{font-size:0.54rem;padding:2px 6px;max-width:62px} .wish-btn{width:34px;height:34px;top:8px;right:8px} .pdf-tag{font-size:0.55rem;padding:3px 8px;top:8px;left:8px} .pdf-cover-sales{font-size:0.58rem;padding:3px 7px;bottom:8px;left:8px} .pdf-card{border-radius:20px} } @media(max-width:400px){ .hero{padding:24px 0 40px;min-height:clamp(400px,60vh,560px)} /* max-height REMOVED */ .hero-content{padding:0 16px} .hero-site-name{min-height:clamp(1.8rem,7vw,2.6rem)} .hero-title{font-size:clamp(1.35rem,6.5vw,1.7rem);margin-bottom:8px} .hero-sub{font-size:.84rem;line-height:1.55;margin-bottom:14px;max-width:100%;padding:0;min-height:calc(1.55em * 2);overflow:visible;overflow-wrap:break-word;word-break:break-word} .hero-badge{font-size:.7rem;padding:5px 12px;gap:5px;margin-bottom:8px} .search-wrap{margin-top:14px} .hero-stats{gap:16px;margin-top:24px} .hero-stat-num{font-size:1.5rem} .hero-actions{gap:10px} .hero-actions .btn-lg{padding:10px 18px;font-size:.86rem} } @media(max-width:360px){ .pdf-grid{grid-template-columns:repeat(2,1fr);gap:8px} .pdf-title{font-size:0.84rem} .pdf-buy-btn{font-size:0.74rem;gap:4px;min-height:40px} .pdf-card-body{padding:10px 10px 3px} .price-current,.price-free{font-size:1.05rem} } /* ── PAGE VISIBILITY ─────────────────────────────────────────── */ .page { display: none; } .page.active { display: block; } /* ── HAMBURGER MENU ─────────────────────────────────────────── */ .hamburger-dropdown { position: absolute; top: calc(100% + 10px); right: 0; min-width: 260px; max-width: 300px; z-index: 500; background: rgba(8,12,24,0.96); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); border: 1px solid rgba(147,2,5,0.22); border-radius: 20px; box-shadow: 0 24px 70px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04), 0 0 60px rgba(147,2,5,0.06); overflow: hidden; animation: dropIn .25s cubic-bezier(0.34,1.56,0.64,1) both; } body.light .hamburger-dropdown { background: rgba(248,250,255,0.97); border-color: rgba(147,2,5,0.18); box-shadow: 0 20px 60px rgba(10,16,34,0.18), 0 0 0 1px rgba(147,2,5,0.08); } /* Scrollable inner */ .hm-scroll { max-height: calc(100vh - 100px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(147,2,5,0.3) transparent; padding: 8px 0 10px; } .hm-scroll::-webkit-scrollbar { width: 3px; } .hm-scroll::-webkit-scrollbar-thumb { background: rgba(147,2,5,0.3); border-radius: 3px; } /* Top shine sweep */ .hm-top-shine { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(147,2,5,0.8), rgba(201,154,60,0.6), transparent); border-radius: 20px 20px 0 0; } /* Section header */ .hm-section { padding: 14px 14px 4px; animation: hmSectionFadeIn .3s ease both; } .hm-section-label { font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(100,140,220,0.7); display: flex; align-items: center; gap: 6px; } .hm-section-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(147,2,5,0.3), transparent); } .hm-section + .hm-section { padding-top: 10px; } /* Menu item */ .hamburger-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 16px; font-size: .875rem; font-weight: 500; color: rgba(200,210,230,0.85); background: none; border: none; text-align: left; cursor: pointer; font-family: var(--font-body); transition: all .18s cubic-bezier(0.4,0,0.2,1); position: relative; overflow: hidden; } body.light .hamburger-item { color: rgba(30,40,70,0.8); } .hamburger-item::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(147,2,5,0.08), transparent); opacity: 0; transition: opacity .18s; } .hamburger-item:hover::before { opacity: 1; } .hamburger-item:hover { color: #fff; transform: translateX(3px); } body.light .hamburger-item:hover { color: var(--accent); } .hamburger-item:active { transform: translateX(3px) scale(0.98); } /* Icon wrapper with animated hover */ .hm-icon { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.07); transition: all .2s; } body.light .hm-icon { background: rgba(147,2,5,0.06); border-color: rgba(147,2,5,0.1); } .hamburger-item:hover .hm-icon { background: rgba(147,2,5,0.15); border-color: rgba(147,2,5,0.3); animation: hmIconWiggle .4s ease; } .hm-item-label { flex: 1; } /* Badges */ .hm-badge { font-size: .58rem; font-weight: 800; padding: 2px 6px; border-radius: 5px; letter-spacing: .05em; animation: hmBadgePop .3s cubic-bezier(0.34,1.56,0.64,1) both; } .hm-badge-new { background:rgba(16,217,142,.18);color:#10d98e;border:1px solid rgba(16,217,142,.35); } .hm-badge-hot { background:rgba(255,77,109,.18);color:#ff6b85;border:1px solid rgba(255,77,109,.35); } .hm-badge-vip { background:rgba(139,92,246,.18);color:#b794f4;border:1px solid rgba(139,92,246,.35); } .hm-badge-beta { background:rgba(251,191,36,.18);color:#fbbf24;border:1px solid rgba(251,191,36,.35); } .hm-badge-pro { background:rgba(147,2,5,.18);color:#c99a3c;border:1px solid rgba(147,2,5,.35); } .hm-badge-sale { background:rgba(255,130,0,.18);color:#fb923c;border:1px solid rgba(255,130,0,.35); } /* Divider */ .hamburger-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 6px 12px; } body.light .hamburger-divider { background: rgba(147,2,5,0.1); } /* ── PREMIUM ADMINISTRATION CARD ── */ .hm-admin-section { margin: 10px 10px 4px; border-radius: 16px; background: linear-gradient(135deg, rgba(139,92,246,0.14) 0%, rgba(147,2,5,0.1) 50%, rgba(201,154,60,0.08) 100%); border: 1px solid rgba(139,92,246,0.5); overflow: hidden; position: relative; animation: hmAdminGlow 2.5s ease-in-out infinite; } .hm-admin-section::before { content: ''; position: absolute; top: 0; left: -80px; width: 60px; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); animation: hmShine 3.5s ease-in-out 1s infinite; pointer-events: none; } .hm-admin-label { padding: 8px 14px 4px; font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; background: linear-gradient(90deg, #a78bfa, #930205); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: flex; align-items: center; gap: 6px; } .hm-admin-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(139,92,246,0.5), transparent); -webkit-background-clip: initial; -webkit-text-fill-color: initial; background-clip: initial; } .hm-admin-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; font-size: .9rem; font-weight: 700; background: none; border: none; cursor: pointer; font-family: var(--font-body); color: #e2d9f3; transition: all .2s; position: relative; } .hm-admin-btn:hover { background: rgba(139,92,246,0.12); } .hm-admin-btn:active { transform: scale(0.98); } .hm-admin-crown { font-size: 1.3rem; animation: hmCrownFloat 2s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(250,204,21,0.6)); } .hm-admin-text { flex: 1; } .hm-admin-title { font-weight: 800; font-size: .9rem; background: linear-gradient(90deg, #c4b5fd, #a78bfa 40%, #c99a3c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: block; } .hm-admin-secure { font-size: .58rem; font-weight: 800; padding: 3px 8px; border-radius: 6px; letter-spacing: .06em; background: linear-gradient(135deg, rgba(139,92,246,0.3), rgba(147,2,5,0.3)); border: 1px solid rgba(139,92,246,0.5); color: #c4b5fd; animation: hmPulse 2.2s ease-in-out infinite; } /* Strict accent bottom line on admin card */ .hm-admin-section::after { content: ''; display: block; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(139,92,246,0.9) 25%, rgba(147,2,5,1) 55%, rgba(201,154,60,0.8) 80%, transparent 100%); border-radius: 0 0 16px 16px; } /* Legacy compat */ .hamburger-header { padding: 10px 14px 6px; } .hamburger-admin-item { display: none; } .hamburger-admin-badge { display: none; } /* ═══════════════════════════════════════════════════════════════ PWA APP CENTER CARDS — Smart App Center v1.0 Injected at top of burger menu. Matches existing design tokens. ═══════════════════════════════════════════════════════════════ */ /* ── Install Card ── */ .pwa-install-card { margin: 8px 10px 4px; border-radius: 16px; background: linear-gradient(135deg,rgba(147,2,5,0.13) 0%,rgba(201,154,60,0.09) 100%); border: 1px solid rgba(147,2,5,0.38); overflow: hidden; position: relative; animation: hmAdminGlow 2.8s ease-in-out infinite; } .pwa-install-card::before { content:''; position:absolute; top:0; left:-80px; width:55px; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.07),transparent); animation:hmShine 3.8s ease-in-out 0.8s infinite; pointer-events:none; } .pwa-install-card::after { content:''; display:block; height:2px; background:linear-gradient(90deg,transparent 0%,rgba(147,2,5,0.9) 30%,rgba(201,154,60,1) 65%,transparent 100%); border-radius:0 0 16px 16px; } .pwa-card-label { padding:8px 14px 4px; font-size:.6rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; background:linear-gradient(90deg,#c99a3c,#c99a3c); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:flex; align-items:center; gap:6px; } .pwa-card-label::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,rgba(147,2,5,0.45),transparent); -webkit-background-clip:initial; -webkit-text-fill-color:initial; background-clip:initial; } .pwa-card-row { display:flex; align-items:center; gap:10px; padding:10px 14px 12px; } .pwa-card-icon { width:36px; height:36px; border-radius:10px; flex-shrink:0; background:linear-gradient(135deg,#930205,#c99a3c); display:flex; align-items:center; justify-content:center; font-size:1.05rem; box-shadow:0 4px 14px rgba(147,2,5,0.35); } .pwa-card-text { flex:1; } .pwa-card-title { font-size:.84rem; font-weight:700; color:#e2eaf8; display:block; line-height:1.3; } body.light .pwa-card-title { color:#1e2846; } .pwa-card-sub { font-size:.68rem; color:rgba(160,185,230,0.65); display:block; margin-top:1px; } body.light .pwa-card-sub { color:rgba(147,2,5,0.6); } .pwa-install-btn { font-size:.63rem; font-weight:800; padding:4px 10px; border-radius:7px; letter-spacing:.04em; background:linear-gradient(135deg,rgba(147,2,5,0.25),rgba(201,154,60,0.2)); border:1px solid rgba(147,2,5,0.5); color:#c99a3c; cursor:pointer; transition:all .18s; font-family:var(--font-body); white-space:nowrap; animation:hmPulse 2.2s ease-in-out infinite; } .pwa-install-btn:hover { background:rgba(147,2,5,0.35); color:#93c5fd; transform:scale(1.04); } .pwa-install-btn:active { transform:scale(.97); } /* Installed state */ .pwa-installed-badge { font-size:.63rem; font-weight:800; padding:4px 9px; border-radius:7px; background:rgba(16,217,142,0.15); border:1px solid rgba(16,217,142,0.4); color:#10d98e; letter-spacing:.04em; white-space:nowrap; } /* ── Update Card ── */ .pwa-update-card { margin:4px 10px 4px; border-radius:16px; background:linear-gradient(135deg,rgba(251,191,36,0.12) 0%,rgba(251,146,60,0.09) 100%); border:1px solid rgba(251,191,36,0.42); overflow:hidden; position:relative; display:none; /* shown by JS */ } .pwa-update-card::after { content:''; display:block; height:2px; background:linear-gradient(90deg,transparent,rgba(251,191,36,0.9),rgba(251,146,60,0.8),transparent); border-radius:0 0 16px 16px; } .pwa-update-label { padding:8px 14px 2px; font-size:.6rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; background:linear-gradient(90deg,#fbbf24,#fb923c); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:flex; align-items:center; gap:6px; } .pwa-update-label::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,rgba(251,191,36,0.45),transparent); -webkit-background-clip:initial; -webkit-text-fill-color:initial; background-clip:initial; } .pwa-update-body { padding:6px 14px 10px; } .pwa-update-title { font-size:.84rem; font-weight:700; color:#fde68a; display:block; margin-bottom:2px; } body.light .pwa-update-title { color:#92400e; } .pwa-update-sub { font-size:.7rem; color:rgba(253,230,138,0.62); display:block; margin-bottom:8px; line-height:1.4; } body.light .pwa-update-sub { color:rgba(146,64,14,0.65); } .pwa-update-whats-new { font-size:.68rem; font-weight:600; color:rgba(253,186,116,0.85); padding:5px 9px; border-radius:8px; background:rgba(251,191,36,0.08); border-left:2px solid rgba(251,191,36,0.5); margin-bottom:9px; line-height:1.45; display:block; } .pwa-update-actions { display:flex; gap:7px; } .pwa-update-now-btn { flex:1; font-size:.73rem; font-weight:800; padding:7px 10px; border-radius:9px; background:linear-gradient(135deg,#fbbf24,#fb923c); border:none; color:#1c1007; cursor:pointer; font-family:var(--font-body); transition:all .18s; } .pwa-update-now-btn:hover { filter:brightness(1.1); transform:scale(1.02); } .pwa-update-now-btn:active { transform:scale(.97); } .pwa-update-later-btn { font-size:.73rem; font-weight:600; padding:7px 12px; border-radius:9px; background:rgba(251,191,36,0.1); border:1px solid rgba(251,191,36,0.3); color:rgba(253,186,116,0.8); cursor:pointer; font-family:var(--font-body); transition:all .18s; } .pwa-update-later-btn:hover { background:rgba(251,191,36,0.18); } /* ── Restart Card ── */ .pwa-restart-card { margin:4px 10px 4px; border-radius:16px; background:linear-gradient(135deg,rgba(16,217,142,0.12) 0%,rgba(6,182,212,0.09) 100%); border:1px solid rgba(16,217,142,0.38); overflow:hidden; position:relative; display:none; } .pwa-restart-card::after { content:''; display:block; height:2px; background:linear-gradient(90deg,transparent,rgba(16,217,142,0.9),rgba(6,182,212,0.8),transparent); border-radius:0 0 16px 16px; } .pwa-restart-body { padding:10px 14px 11px; display:flex; align-items:center; gap:10px; } .pwa-restart-icon { font-size:1.3rem; flex-shrink:0; animation:hmCrownFloat 1.8s ease-in-out infinite; } .pwa-restart-text { flex:1; } .pwa-restart-title { font-size:.84rem; font-weight:700; color:#6ee7b7; display:block; line-height:1.3; } body.light .pwa-restart-title { color:#065f46; } .pwa-restart-sub { font-size:.68rem; color:rgba(110,231,183,0.6); display:block; margin-top:1px; } .pwa-restart-btn { font-size:.65rem; font-weight:800; padding:5px 11px; border-radius:8px; background:linear-gradient(135deg,rgba(16,217,142,0.25),rgba(6,182,212,0.2)); border:1px solid rgba(16,217,142,0.45); color:#10d98e; cursor:pointer; transition:all .18s; font-family:var(--font-body); white-space:nowrap; animation:hmPulse 2s ease-in-out infinite; } .pwa-restart-btn:hover { background:rgba(16,217,142,0.3); transform:scale(1.04); } .pwa-restart-btn:active { transform:scale(.97); } /* ── Check-for-Updates row inside install card (shown always) ── */ .pwa-check-row { display:flex; align-items:center; justify-content:space-between; padding:0 14px 10px; gap:6px; } .pwa-check-txt { font-size:.67rem; color:rgba(160,190,240,0.5); font-style:italic; } body.light .pwa-check-txt { color:rgba(147,2,5,0.45); } .pwa-check-btn { font-size:.62rem; font-weight:700; padding:3px 9px; border-radius:6px; background:none; border:1px solid rgba(147,2,5,0.28); color:rgba(96,165,250,0.7); cursor:pointer; transition:all .18s; font-family:var(--font-body); white-space:nowrap; } .pwa-check-btn:hover { border-color:rgba(147,2,5,0.55); color:#c99a3c; } .pwa-check-btn.checking { color:rgba(251,191,36,0.8); border-color:rgba(251,191,36,0.35); cursor:default; } .pwa-check-btn.up-to-date { color:rgba(16,217,142,0.7); border-color:rgba(16,217,142,0.3); cursor:default; } /* ── ADMIN LOGIN PAGE ─────────────────────────────────────────── */ .admin-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: radial-gradient(ellipse at 15% 25%, rgba(147,2,5,0.12) 0%, transparent 55%), radial-gradient(ellipse at 85% 75%, rgba(201,154,60,0.08) 0%, transparent 55%); padding: 40px 20px; } .admin-login-orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; } .admin-login-orb-1 { width: 500px; height: 500px; background: radial-gradient(circle, #930205, transparent); opacity: .07; top: -100px; left: -100px; animation: float 10s ease-in-out infinite; } .admin-login-orb-2 { width: 400px; height: 400px; background: radial-gradient(circle, #c99a3c, transparent); opacity: .06; bottom: -80px; right: -80px; animation: float 12s ease-in-out infinite reverse; } .admin-login-card { position: relative; z-index: 1; width: 100%; max-width: 440px; background: rgba(10,14,26,0.85); backdrop-filter: blur(32px) saturate(160%); border: 1px solid rgba(147,2,5,0.2); border-radius: var(--radius-xl); padding: 44px; box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.06); animation: authCardIn .5s cubic-bezier(0.34,1.56,0.64,1) both; } body.light .admin-login-card { background: rgba(255,255,255,0.9); border-color: rgba(147,2,5,0.15); box-shadow: 0 24px 80px rgba(10,16,34,0.12); } .admin-login-shield { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, rgba(147,2,5,0.15), rgba(201,154,60,0.08)); border: 1px solid rgba(147,2,5,0.3); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; color: var(--accent); box-shadow: 0 0 30px rgba(147,2,5,0.2); animation: successPop .6s cubic-bezier(0.34,1.56,0.64,1) both; } .admin-login-brand { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; background: var(--grad-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-align: center; margin-bottom: 6px; } .admin-login-brand span { font-weight: 400; } .admin-login-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; text-align: center; margin-bottom: 8px; } .admin-login-sub { text-align: center; color: var(--text2); font-size: .85rem; line-height: 1.6; margin-bottom: 28px; } .admin-login-error { display: flex; align-items: center; gap: 8px; background: rgba(255,77,109,0.1); border: 1px solid rgba(255,77,109,0.3); border-radius: var(--radius-sm); padding: 10px 14px; font-size: .82rem; color: var(--danger); margin-bottom: 16px; } /* ── ADMIN PANEL LAYOUT ──────────────────────────────────────── */ #page-admin { display: none; flex-direction: column; min-height: 100vh; } #page-admin.active { display: flex; } .admin-topbar { background: rgba(8,12,20,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(147,2,5,0.15); position: sticky; top: 0; z-index: 200; box-shadow: 0 2px 20px rgba(0,0,0,0.4); } body.light .admin-topbar { background: rgba(240,244,251,0.95); } .admin-topbar-inner { max-width: 1600px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 58px; gap: 16px; } .admin-topbar-left { display: flex; align-items: center; gap: 20px; } .admin-topbar-logo { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 1rem; font-weight: 700; background: var(--grad-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .admin-topbar-breadcrumb { font-size: .78rem; color: var(--text2); padding: 3px 10px; border-radius: 20px; background: var(--surface); border: 1px solid var(--glass-border); } .admin-topbar-right { display: flex; align-items: center; gap: 14px; } .admin-realtime-badge { display: flex; align-items: center; padding: 4px 12px; border-radius: 20px; background: rgba(16,217,142,0.1); border: 1px solid rgba(16,217,142,0.25); font-size: .72rem; font-weight: 700; color: var(--success); letter-spacing: .04em; } .admin-topbar-user { display: flex; align-items: center; gap: 8px; } .admin-topbar-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--grad-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; color: #fff; flex-shrink: 0; } .admin-layout { display: flex; flex: 1; min-height: 0; } .admin-sidebar { width: 230px; flex-shrink: 0; /* PERF: solid bg replaces backdrop-filter on always-visible sidebar */ background: rgba(8,12,20,0.97); border-right: 1px solid rgba(147,2,5,0.1); padding: 20px 12px; overflow-y: auto; position: sticky; top: 58px; height: calc(100vh - 58px); } body.light .admin-sidebar { background: rgba(240,244,251,0.8); } .admin-nav-section-label { font-size: .62rem; font-weight: 800; letter-spacing: .12em; color: var(--text3); padding: 0 10px; margin-bottom: 4px; margin-top: 4px; } .admin-nav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: var(--radius-sm); font-size: .84rem; font-weight: 500; color: var(--text2); background: none; border: none; text-align: left; cursor: pointer; font-family: var(--font-body); transition: all .18s; position: relative; margin-bottom: 2px; } .admin-nav-item:hover { background: var(--surface); color: var(--text); } .admin-nav-item.active { background: rgba(147,2,5,0.12); color: var(--accent); border: 1px solid rgba(147,2,5,0.2); } .admin-nav-badge { margin-left: auto; font-size: .6rem; font-weight: 700; padding: 2px 7px; border-radius: 10px; background: rgba(16,217,142,0.15); color: var(--success); border: 1px solid rgba(16,217,142,0.2); } .admin-nav-badge-orange { background: rgba(245,158,11,0.15); color: var(--gold); border-color: rgba(245,158,11,0.2); } .admin-main { flex: 1; padding: 28px; overflow-y: auto; min-width: 0; max-width: 1400px; } /* ── ADMIN STAT CARDS ─────────────────────────────────────────── */ .admin-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 28px; } .admin-stat-card { padding: 22px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(8px); position: relative; overflow: hidden; transition: all .25s; } .admin-stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 2px 2px 0 0; } .admin-stat-card.blue::before { background: linear-gradient(90deg,#930205,#c99a3c); } .admin-stat-card.green::before { background: linear-gradient(90deg,#10d98e,#06b6d4); } .admin-stat-card.gold::before { background: linear-gradient(90deg,#f59e0b,#f97316); } .admin-stat-card.purple::before { background: linear-gradient(90deg,#8b5cf6,#a855f7); } .admin-stat-card.red::before { background: linear-gradient(90deg,#ff4d6d,#c0163a); } .admin-stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-accent); } .admin-stat-label { font-size: .75rem; color: var(--text2); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; } .admin-stat-num { font-family: var(--font-display); font-size: 2rem; font-weight: 800; background: var(--grad-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .admin-stat-change { font-size: .75rem; font-weight: 600; margin-top: 8px; display: flex; align-items: center; gap: 4px; } .admin-stat-icon { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(147,2,5,0.1); color: var(--accent); } /* ── PLATFORM CONTROL CENTER — NEW MODULES ──────────────────── */ .pcc-section { margin-bottom: 10px; } .pcc-header { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; cursor: pointer; background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); transition: all .2s; user-select: none; } .pcc-header:hover { border-color: var(--glass-border-hover); background: rgba(147,2,5,0.07); } .pcc-header-left { display: flex; align-items: center; gap: 12px; } .pcc-header-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; } .pcc-header-title { font-size: .9rem; font-weight: 700; color: var(--text); } .pcc-header-sub { font-size: .72rem; color: var(--text2); margin-top: 2px; } .pcc-chevron { width: 20px; height: 20px; color: var(--text2); transition: transform .25s; flex-shrink: 0; } .pcc-section.open .pcc-chevron { transform: rotate(180deg); } .pcc-body { display: none; padding: 18px; background: var(--surface); border: 1px solid var(--glass-border); border-top: none; border-radius: 0 0 var(--radius) var(--radius); } .pcc-section.open .pcc-body { display: block; } .pcc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .pcc-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--glass); border: 1px solid var(--glass-border); cursor: pointer; transition: all .18s; color: var(--text2); font-size: .82rem; font-weight: 500; } .pcc-item:hover { background: rgba(147,2,5,0.1); border-color: var(--accent); color: var(--text); } .pcc-item svg { flex-shrink: 0; color: var(--accent); } .pcc-section-divider { height: 1px; background: var(--glass-border); margin: 16px 0; } /* NEW ADMIN STAT CARDS (8-card row) */ .admin-stats-grid-8 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; } @media(max-width:900px) { .admin-stats-grid-8 { grid-template-columns: repeat(2,1fr); } } @media(max-width:500px) { .admin-stats-grid-8 { grid-template-columns: 1fr 1fr; } } /* Module content panels */ .mod-panel { animation: fadeInUp .22s ease; } .mod-back-btn { display: flex; align-items: center; gap: 7px; background: none; border: none; color: var(--text2); cursor: pointer; font-size: .85rem; margin-bottom: 18px; padding: 0; } .mod-back-btn:hover { color: var(--accent); } .mod-panel-title { font-size: 1.15rem; font-weight: 700; display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .mod-sub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .mod-sub-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 18px; cursor: pointer; transition: all .2s; } .mod-sub-card:hover { border-color: var(--accent); box-shadow: 0 4px 20px rgba(147,2,5,0.15); transform: translateY(-2px); } .mod-sub-card-icon { font-size: 1.5rem; margin-bottom: 10px; } .mod-sub-card-title { font-weight: 700; font-size: .9rem; margin-bottom: 4px; } .mod-sub-card-desc { font-size: .77rem; color: var(--text2); } /* inline module forms */ .mod-form-wrap { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 22px; margin-top: 14px; } .mod-tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .mod-tag { padding: 5px 13px; border-radius: 50px; font-size: .78rem; font-weight: 600; background: rgba(147,2,5,0.1); border: 1px solid rgba(147,2,5,0.25); color: var(--accent); display: flex; align-items: center; gap: 6px; cursor: pointer; } .mod-tag .remove { color: var(--danger); font-size: .9rem; } .color-swatch-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .color-swatch { width: 36px; height: 36px; border-radius: 8px; cursor: pointer; border: 2px solid transparent; transition: all .15s; } .color-swatch.active { border-color: var(--text); box-shadow: 0 0 0 3px rgba(147,2,5,.4); } .analytics-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); animation: pulse-dot 1.5s infinite; } @keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} } .live-stat-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--glass-border); } .live-stat-row:last-child { border-bottom: none; } .live-stat-val { font-weight: 700; font-size: 1.1rem; color: var(--accent); } /* ── ADMIN FORM ──────────────────────────────────────────────── */ .admin-section-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; } .admin-section-sub { font-size: .85rem; color: var(--text2); margin-bottom: 24px; } .admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .admin-form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } .admin-upload-zone { border: 2px dashed rgba(147,2,5,0.3); border-radius: var(--radius); padding: 32px; text-align: center; cursor: pointer; transition: all .25s; background: rgba(147,2,5,0.03); position: relative; overflow: hidden; } .admin-upload-zone:hover { border-color: var(--accent); background: rgba(147,2,5,0.07); } .admin-upload-zone.has-file { border-color: var(--success); background: rgba(16,217,142,0.05); } .admin-upload-zone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2; } /* ── ADMIN TABLE ─────────────────────────────────────────────── */ .admin-table-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); overflow: hidden; } .admin-table-header { padding: 18px 20px; border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .admin-table th { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text2); padding: 12px 16px; background: rgba(147,2,5,0.04); border-bottom: 1px solid var(--glass-border); } .admin-table td { padding: 13px 16px; font-size: .875rem; border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: middle; } .admin-table tr:last-child td { border-bottom: none; } .admin-table tr:hover td { background: rgba(147,2,5,0.03); } .admin-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: .7rem; font-weight: 700; letter-spacing: .03em; } .admin-badge-success { background: rgba(16,217,142,0.12); color: var(--success); border: 1px solid rgba(16,217,142,0.2); } .admin-badge-accent { background: rgba(147,2,5,0.12); color: var(--accent); border: 1px solid rgba(147,2,5,0.2); } .admin-badge-gold { background: rgba(245,158,11,0.12); color: var(--gold); border: 1px solid rgba(245,158,11,0.2); } .admin-badge-danger { background: rgba(255,77,109,0.12); color: var(--danger); border: 1px solid rgba(255,77,109,0.2); } .admin-badge-purple { background: rgba(139,92,246,0.12); color: #a78bfa; border: 1px solid rgba(139,92,246,0.2); } .admin-table-search { padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border); background: var(--glass); color: var(--text); font-family: var(--font-body); font-size: .85rem; outline: none; width: 200px; } .admin-table-search:focus { border-color: var(--accent); } /* ── Zubeen Da Legacy admin panel (additive, token-based) ───────── */ .zla-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:24px; } .zla-h2 { font-size:1.3rem; font-weight:800; margin:0 0 4px; } .zla-note { font-size:.82rem; color:var(--text2); margin:0; line-height:1.55; } .zla-note a { color:var(--accent); } .zla-section-label { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text2); margin:0 0 12px; } .zla-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:14px; } .zla-tile { background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius); padding:14px 16px; } .zla-tile.zla-att { border-color:rgba(245,158,11,0.4); } .zla-tile-num { font-size:1.5rem; font-weight:800; color:var(--text); line-height:1.1; } .zla-tile-label { font-size:.78rem; font-weight:600; color:var(--text); margin-top:4px; } .zla-tile-sub { font-size:.68rem; color:var(--text2); } .zla-card { background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius); padding:18px 20px; margin-bottom:14px; } .zla-card.zla-warn { border-color:rgba(201,154,60,0.45); } .zla-card h3 { font-size:.95rem; font-weight:700; margin:0 0 8px; } .zla-card code { background:rgba(147,2,5,0.1); color:var(--accent); padding:1px 6px; border-radius:6px; font-size:.78rem; } .zla-steps { margin:10px 0 0; padding-left:20px; font-size:.82rem; color:var(--text2); line-height:1.9; } .zla-filters { display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 14px; } .zla-fbtn { padding:7px 14px; border-radius:var(--radius-sm); border:1px solid var(--glass-border); background:transparent; color:var(--text2); font-size:.78rem; cursor:pointer; } .zla-fbtn.active { background:rgba(147,2,5,0.1); border-color:var(--accent); color:var(--accent); font-weight:600; } .zla-btn { padding:6px 12px; border-radius:var(--radius-sm); border:1px solid rgba(147,2,5,0.35); background:rgba(147,2,5,0.08); color:var(--accent); font-size:.74rem; cursor:pointer; margin-left:6px; } .zla-btn:hover { background:rgba(147,2,5,0.16); } .zla-btn:disabled { opacity:.5; cursor:default; } .zla-btn-warn { border-color:rgba(201,154,60,0.4); background:rgba(201,154,60,0.1); color:#c99a3c; } .zla-btn-danger { border-color:rgba(229,83,83,0.35); background:rgba(229,83,83,0.08); color:var(--danger,#e55); } .zla-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; } .zla-chip { display:inline-block; padding:3px 10px; border-radius:999px; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; } .zla-chip-pending { background:rgba(245,158,11,0.12); color:#f59e0b; } .zla-chip-approved { background:rgba(47,111,79,0.15); color:#2f6f4f; } .zla-chip-featured { background:rgba(201,154,60,0.15); color:#b8862e; } .zla-chip-rejected { background:rgba(229,83,83,0.1); color:var(--danger,#e55); } .zla-song { font-size:.74rem; opacity:.7; font-style:italic; } @media (max-width:640px) { .zla-actions .zla-btn { margin:3px 0 0 6px; } .admin-table .zla-actions { justify-content:flex-start; } } /* ── PDF FORM TOGGLE PREVIEW ─────────────────────────────────── */ .admin-cover-preview { width: 100%; height: 140px; border-radius: var(--radius-sm); object-fit: cover; display: none; border: 1px solid var(--glass-border); margin-top: 8px; } .admin-cover-preview.visible { display: block; } /* ── ACTIVITY LOG ────────────────────────────────────────────── */ .admin-log-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--glass-border); } .admin-log-item:last-child { border-bottom: none; } .admin-log-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; } .admin-log-dot-blue { background: var(--accent); box-shadow: 0 0 8px var(--accent); } .admin-log-dot-green { background: var(--success); box-shadow: 0 0 8px var(--success); } .admin-log-dot-gold { background: var(--gold); box-shadow: 0 0 8px var(--gold); } .admin-log-dot-red { background: var(--danger); box-shadow: 0 0 8px var(--danger); } .admin-log-content { flex: 1; } .admin-log-msg { font-size: .85rem; line-height: 1.4; } .admin-log-time { font-size: .72rem; color: var(--text2); margin-top: 2px; } /* ── SETTINGS ────────────────────────────────────────────────── */ .admin-settings-section { margin-bottom: 32px; } .admin-settings-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; gap: 8px; } .admin-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.04); } .admin-toggle { width: 48px; height: 26px; border-radius: 13px; background: var(--glass-border); cursor: pointer; position: relative; transition: background .25s; border: none; flex-shrink: 0; } .admin-toggle.on { background: var(--accent); } .admin-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .25s; } .admin-toggle.on::after { transform: translateX(22px); } /* ── CHART BARS ──────────────────────────────────────────────── */ .admin-mini-chart { display: flex; align-items: flex-end; gap: 4px; height: 50px; } .admin-chart-bar { flex: 1; background: rgba(147,2,5,0.2); border-radius: 3px 3px 0 0; transition: height .4s ease, background .2s; cursor: pointer; position: relative; } .admin-chart-bar:hover { background: var(--accent); } /* ── TRENDING GRID ───────────────────────────────────────────── */ .admin-trending-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--glass-border); } .admin-trending-row:last-child { border-bottom: none; } .admin-trending-rank { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 800; flex-shrink: 0; } .admin-trending-rank.r1 { background: linear-gradient(135deg,#f59e0b,#f97316); color:#fff; } .admin-trending-rank.r2 { background: rgba(156,163,175,0.2); color: var(--text2); } .admin-trending-rank.r3 { background: rgba(180,83,9,0.2); color: #b45309; } .admin-trending-rank.rn { background: var(--surface); color: var(--text2); } .admin-progress-wrap { flex: 1; } .admin-progress { height: 4px; border-radius: 4px; background: var(--surface); overflow: hidden; } .admin-progress-fill { height: 100%; border-radius: 4px; background: var(--grad-primary); transition: width .8s ease; } /* ── RESPONSIVE ADMIN ─────────────────────────────────────────── */ @media(max-width:900px) { .admin-sidebar { width: 180px; } .admin-main { padding: 16px; } .admin-form-grid { grid-template-columns: 1fr; } .admin-form-grid-3 { grid-template-columns: 1fr 1fr; } .admin-stats-grid { grid-template-columns: 1fr 1fr; } } @media(max-width:640px) { .admin-layout { flex-direction: column; } .admin-sidebar { width: 100%; height: auto; position: static; overflow: visible; padding: 10px; } .admin-nav { display: flex; flex-wrap: wrap; gap: 4px; } .admin-nav-section-label { display: none; } .admin-nav-item { flex: none; padding: 7px 12px; font-size: .78rem; } .admin-topbar-breadcrumb { display: none; } .admin-topbar-right { gap: 8px; } .admin-realtime-badge { display: none; } .admin-form-grid-3 { grid-template-columns: 1fr; } .admin-stats-grid { grid-template-columns: 1fr 1fr; } .admin-main { padding: 14px; } } /* ══════════════════════════════════════════════════════════════ ── SEARCH & DISCOVER SECTION ──────────────────────────────── ══════════════════════════════════════════════════════════════ */ .discover-section { padding: 0 0 70px; position: relative; } .discover-section::before { content: ''; position: absolute; top: -60px; left: 50%; transform: translateX(-50%); width: 700px; height: 300px; background: radial-gradient(ellipse, rgba(147,2,5,0.07) 0%, transparent 70%); pointer-events: none; } /* Search Panel Card */ .search-panel { background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.09); border-radius: var(--radius-lg); backdrop-filter: blur(12px) saturate(140%); padding: 36px; position: relative; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.07); animation: fadeUp .5s ease both; } body.light .search-panel { background: rgba(255,255,255,0.75); border-color: rgba(0,0,0,0.07); box-shadow: 0 12px 40px rgba(10,16,34,0.1); } .search-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(147,2,5,0.5), rgba(201,154,60,0.4), transparent); } .search-panel-header { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; } .search-panel-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, rgba(147,2,5,0.2), rgba(201,154,60,0.1)); border: 1px solid rgba(147,2,5,0.25); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; } .search-panel-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; line-height: 1.2; } .search-panel-sub { font-size: .82rem; color: var(--text2); margin-top: 2px; } /* Main search bar */ .discover-search-wrap { position: relative; margin-bottom: 24px; } .discover-search-input { width: 100%; padding: 16px 130px 16px 50px; border-radius: var(--radius); border: 1px solid rgba(147,2,5,0.22); background: rgba(147,2,5,0.04); color: var(--text); font-family: var(--font-body); font-size: 1rem; outline: none; transition: all .25s; backdrop-filter: blur(8px); } body.light .discover-search-input { background: rgba(255,255,255,0.9); border-color: rgba(147,2,5,0.2); } .discover-search-input::placeholder { color: var(--text3); } .discover-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(147,2,5,0.12), 0 8px 32px rgba(0,0,0,0.2); background: rgba(147,2,5,0.06); } .discover-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--accent); pointer-events: none; } .discover-search-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 9px 20px; border-radius: var(--radius-sm); background: var(--grad-primary); color: #fff; font-size: .85rem; font-weight: 600; border: none; cursor: pointer; font-family: var(--font-body); transition: all .2s; display: flex; align-items: center; gap: 6px; } .discover-search-btn:hover { box-shadow: 0 4px 20px rgba(147,2,5,0.45); transform: translateY(-50%) translateY(-1px); } /* Filters row */ .discover-filters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media(max-width:900px) { .discover-filters { grid-template-columns: repeat(2,1fr); } } @media(max-width:500px) { .discover-filters { grid-template-columns: 1fr 1fr; gap: 8px; } } .filter-select-wrap { position: relative; } .filter-select-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text2); margin-bottom: 6px; display: block; } .filter-select { width: 100%; padding: 11px 36px 11px 14px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border); background: rgba(255,255,255,0.03); color: var(--text); font-family: var(--font-body); font-size: .855rem; outline: none; cursor: pointer; appearance: none; transition: all .2s; } body.light .filter-select { background: rgba(255,255,255,0.9); } .filter-select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(147,2,5,0.12); } .filter-select:hover { border-color: rgba(147,2,5,0.3); } .filter-select-arrow { position: absolute; right: 12px; bottom: 13px; pointer-events: none; color: var(--text2); } /* Active filters pills */ .active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; min-height: 0; transition: all .2s; } .active-filter-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px; border-radius: 20px; background: rgba(147,2,5,0.12); border: 1px solid rgba(147,2,5,0.25); font-size: .75rem; font-weight: 600; color: var(--accent); animation: pillIn .2s ease; } @keyframes pillIn { from { opacity:0; transform: scale(0.85); } to { opacity:1; transform: scale(1); } } .active-filter-pill button { background: none; border: none; cursor: pointer; color: var(--accent); opacity: .7; display: flex; align-items: center; padding: 0; line-height: 1; transition: opacity .15s; } .active-filter-pill button:hover { opacity: 1; } /* Search results count */ .search-results-meta { display: flex; align-items: center; justify-content: space-between; margin: 28px 0 18px; flex-wrap: wrap; gap: 8px; } .search-results-count { font-size: .88rem; color: var(--text2); } .search-results-count strong { color: var(--text); } /* Discover PDF grid */ .discover-grid-wrap { position: relative; } .discover-loading { display: flex; justify-content: center; align-items: center; padding: 60px 0; gap: 12px; color: var(--text2); font-size: .9rem; } .spin { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(147,2,5,0.2); border-top-color: var(--accent); animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .discover-empty { text-align: center; padding: 60px 20px; color: var(--text2); } .discover-empty-icon { font-size: 3rem; margin-bottom: 12px; } .discover-empty h3 { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 8px; color: var(--text); } .discover-empty p { font-size: .875rem; } /* ── TRENDING & NEW SECTIONS ─────────────────────────────────── */ .shelf-section { padding: 0 0 60px; } .shelf-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 10px; } .shelf-title-wrap { display: flex; align-items: center; gap: 12px; } .shelf-emoji { font-size: 1.5rem; } .shelf-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; } .shelf-sub { font-size: .82rem; color: var(--text2); margin-top: 2px; } .shelf-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 20px; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .shelf-badge-fire { background: rgba(251,191,36,0.15); color: var(--gold); border: 1px solid rgba(251,191,36,0.3); animation: glow-gold 2s ease-in-out infinite; } @keyframes glow-gold { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 16px rgba(251,191,36,0.25)} } .shelf-badge-new { background: rgba(16,217,142,0.12); color: var(--success); border: 1px solid rgba(16,217,142,0.25); } /* Shelf grid — equal height cards */ .shelf-scroll { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 20px; align-items: stretch; } .shelf-scroll .pdf-card { height: 100%; } @media(max-width:640px) { .shelf-scroll { grid-template-columns: repeat(2,1fr); gap: 10px; } } /* Skeleton loader cards */ .skeleton-card { border-radius: 24px; overflow: hidden; background: var(--glass); border: 1px solid var(--glass-border); } .skeleton-cover { aspect-ratio: 3 / 2; background: linear-gradient(90deg, var(--surface) 25%, rgba(255,255,255,0.04) 50%, var(--surface) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } .skeleton-body { padding: 14px; } .skeleton-line { height: 10px; border-radius: 6px; margin-bottom: 10px; background: linear-gradient(90deg, var(--surface) 25%, rgba(255,255,255,0.05) 50%, var(--surface) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } .skeleton-line.short { width: 60%; } .skeleton-line.shorter { width: 40%; } @keyframes shimmer { to { background-position: -200% 0; } } /* Search panel decorative orb */ .search-panel-orb { position: absolute; right: -80px; top: -80px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(147,2,5,0.08), transparent 70%); pointer-events: none; } .search-panel-orb-2 { position: absolute; left: -60px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(201,154,60,0.06), transparent 70%); pointer-events: none; } /* ── CARD ENTRANCE ANIMATION ─────────────────────────────────── */ @keyframes cardEntrance { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .pdf-card { animation: cardEntrance 0.42s cubic-bezier(0.25,0.46,0.45,0.94) both; } /* Stagger entrance for grid cards */ .pdf-grid .pdf-card:nth-child(1) { animation-delay: 0.02s; } .pdf-grid .pdf-card:nth-child(2) { animation-delay: 0.06s; } .pdf-grid .pdf-card:nth-child(3) { animation-delay: 0.10s; } .pdf-grid .pdf-card:nth-child(4) { animation-delay: 0.14s; } .pdf-grid .pdf-card:nth-child(5) { animation-delay: 0.18s; } .pdf-grid .pdf-card:nth-child(6) { animation-delay: 0.22s; } .pdf-grid .pdf-card:nth-child(7) { animation-delay: 0.26s; } .pdf-grid .pdf-card:nth-child(8) { animation-delay: 0.30s; } .shelf-scroll .pdf-card:nth-child(1) { animation-delay: 0.02s; } .shelf-scroll .pdf-card:nth-child(2) { animation-delay: 0.07s; } .shelf-scroll .pdf-card:nth-child(3) { animation-delay: 0.12s; } .shelf-scroll .pdf-card:nth-child(4) { animation-delay: 0.17s; } .shelf-scroll .pdf-card:nth-child(5) { animation-delay: 0.22s; } .shelf-scroll .pdf-card:nth-child(6) { animation-delay: 0.27s; } .shelf-scroll .pdf-card:nth-child(7) { animation-delay: 0.32s; } .shelf-scroll .pdf-card:nth-child(8) { animation-delay: 0.37s; } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { .pdf-card { animation: none; transition: box-shadow 0.2s, border-color 0.2s; } .pdf-card:hover { transform: none; } /* PDF cover img: no filter transition — cover must always render as-is */ .pdf-cover img { transition: none; filter: none !important; } .pdf-card:hover .pdf-cover img { transform: none; filter: none !important; } .pdf-buy-btn { transition: box-shadow 0.2s; } .pdf-buy-btn:hover { transform: none; } .wish-btn { transition: background 0.2s, border-color 0.2s; } .wish-btn:hover { transform: none; } } /* ── LIBRARY: PREMIUM HERO ───────────────────────────────────── */ .lib-hero { position: relative; overflow: hidden; border-radius: 28px; padding: 56px 24px 40px; text-align: center; margin-bottom: 28px; background: linear-gradient(160deg, rgba(147,2,5,0.14), rgba(201,154,60,0.06) 55%, rgba(255,255,255,0.02)); border: 1px solid var(--glass-border); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); animation: fadeUp .6s ease both; } .lib-hero::before, .lib-hero::after { content: ''; position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; z-index: 0; } .lib-hero::before { width: 280px; height: 280px; top: -120px; left: -80px; background: radial-gradient(circle, rgba(147,2,5,0.45), transparent 70%); animation: libGlowMove 12s ease-in-out infinite alternate; } .lib-hero::after { width: 320px; height: 320px; bottom: -140px; right: -100px; background: radial-gradient(circle, rgba(201,154,60,0.35), transparent 70%); animation: libGlowMove 14s ease-in-out infinite alternate-reverse; } @keyframes libGlowMove { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(40px,30px) scale(1.15); } } .lib-hero-content { position: relative; z-index: 1; } .lib-hero-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 20px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: rgba(147,2,5,.12); border: 1px solid rgba(147,2,5,.25); color: var(--accent2); margin-bottom: 18px; } .lib-hero-title { font-family: var(--font-display); font-weight: 800; line-height: 1.05; font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: -0.02em; margin-bottom: 12px; } .lib-hero-sub { color: var(--text2); font-size: clamp(.9rem, 2.4vw, 1.05rem); max-width: 520px; margin: 0 auto; } /* ── LIBRARY: QUICK STATS ────────────────────────────────────── */ .lib-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 32px; } @media (max-width: 640px) { .lib-stats-row { grid-template-columns: repeat(2, 1fr); gap: 10px; } } .lib-stat-card { background: rgba(255,255,255,0.035); border: 1px solid var(--glass-border); border-radius: 18px; padding: 16px 12px; text-align: center; backdrop-filter: blur(10px); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .lib-stat-card:hover { transform: translateY(-3px); border-color: rgba(147,2,5,.35); box-shadow: 0 10px 30px rgba(147,2,5,.15); } .lib-stat-icon { font-size: 1.4rem; margin-bottom: 6px; } .lib-stat-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.2rem, 3vw, 1.6rem); background: var(--grad-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .lib-stat-label { font-size: .72rem; color: var(--text2); margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; } /* ── LIBRARY: PREMIUM SEARCH ─────────────────────────────────── */ .lib-search-wrap { position: relative; flex: 1 1 320px; max-width: 460px; margin: 0; } .lib-search-wrap .search-input { width: 100%; padding: 14px 48px 14px 46px; border-radius: 18px; border: 1px solid var(--glass-border); background: rgba(255,255,255,0.04); backdrop-filter: blur(14px); font-size: .95rem; color: var(--text); font-family: var(--font-body); outline: none; transition: all .25s; margin: 0; } .lib-search-wrap .search-input:focus { border-color: var(--accent); background: rgba(147,2,5,0.05); box-shadow: 0 0 0 4px rgba(147,2,5,.12), 0 8px 28px rgba(147,2,5,.18); } .lib-search-wrap .search-icon-left { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text2); pointer-events: none; } .lib-search-wrap .search-icon { right: 16px; } /* ── LIBRARY: CATEGORY PILLS / FILTER CHIPS ──────────────────── */ .lib-pills-row { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 14px; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; } .lib-pills-row::-webkit-scrollbar { display: none; } .lib-pills-row .filter-chip { flex: 0 0 auto; white-space: nowrap; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.08); } .lib-pills-row .filter-chip.active { box-shadow: 0 6px 20px rgba(147,2,5,0.4); } /* ── LIBRARY: HORIZONTAL SCROLL SHELVES ──────────────────────── */ .lib-shelf-scroll { display: flex; gap: 18px; overflow-x: auto; padding: 6px 2px 18px; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .lib-shelf-scroll::-webkit-scrollbar { display: none; } .lib-shelf-scroll .pdf-card { flex: 0 0 200px; scroll-snap-align: start; } @media (max-width: 480px) { .lib-shelf-scroll .pdf-card { flex-basis: 168px; } } .lib-section-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; margin: 36px 0 16px; } /* ── LIBRARY: EMPTY STATE ─────────────────────────────────────── */ .lib-empty { text-align: center; padding: 80px 20px; color: var(--text2); border: 1px dashed var(--glass-border); border-radius: 24px; background: rgba(255,255,255,0.02); } .lib-empty-icon { font-size: 3rem; margin-bottom: 14px; } .lib-empty-title { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--text); margin-bottom: 6px; } /* ── LIBRARY: CARD FADE-IN ────────────────────────────────────── */ .pdf-grid .pdf-card, .lib-shelf-scroll .pdf-card { animation: fadeUp .5s ease both; } /* ═══════════════════════════════════════════════════════════════ ── STUDYRIA HOME UPGRADE — Premium 10/10 Design System ═══════════════════════════════════════════════════════════════ */ /* ── PERSONALIZED GREETING ──────────────────────────────────────── */ .home-greeting-bar { background: linear-gradient(135deg, rgba(147,2,5,0.10) 0%, rgba(201,154,60,0.06) 50%, rgba(139,92,246,0.06) 100%); border-bottom: 1px solid rgba(147,2,5,0.12); padding: 14px 0; position: relative; overflow: hidden; } .home-greeting-bar::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(147,2,5,0.04), transparent); animation: greetingSweep 6s ease-in-out infinite; } @keyframes greetingSweep { 0%,100% { transform: translateX(-100%); } 50% { transform: translateX(100%); } } .home-greeting-inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; position: relative; z-index: 1; } .home-greeting-avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #930205, #c99a3c); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 700; color: #fff; border: 2px solid rgba(147,2,5,0.4); box-shadow: 0 0 20px rgba(147,2,5,0.3); flex-shrink: 0; position: relative; animation: avatarPulse 3s ease-in-out infinite; } @keyframes avatarPulse { 0%,100% { box-shadow: 0 0 20px rgba(147,2,5,0.3); } 50% { box-shadow: 0 0 32px rgba(147,2,5,0.55); } } .home-greeting-avatar::after { content: ''; position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--success); border: 2px solid var(--bg); } .home-greeting-text { flex: 1; min-width: 0; } .home-greeting-wave { font-size: 1.2rem; } .home-greeting-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--text); line-height: 1.2; } .home-greeting-sub { font-size: .82rem; color: var(--text2); margin-top: 2px; } .home-greeting-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .home-greeting-level { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 20px; font-size: .75rem; font-weight: 700; background: rgba(245,158,11,0.15); border: 1px solid rgba(245,158,11,0.35); color: #fbbf24; } .home-greeting-streak { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 20px; font-size: .75rem; font-weight: 700; background: rgba(255,77,109,0.12); border: 1px solid rgba(255,77,109,0.3); color: #ff8fa8; } /* ── LIVE PLATFORM STATS BAR ──────────────────────────────────── */ .home-platform-stats { padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,0.05); } .home-platform-stats-inner { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; justify-content: space-between; } .home-platform-stats-inner::-webkit-scrollbar { display: none; } .hps-item { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(12px); flex: 1; min-width: 100px; transition: all .3s cubic-bezier(0.34,1.15,0.64,1); position: relative; overflow: hidden; } .hps-item:not(:last-child) { margin-right: 10px; } .hps-item:hover { border-color: rgba(147,2,5,0.3); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(147,2,5,0.12); } .hps-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--grad-primary); opacity: 0; transition: opacity .3s; } .hps-item:hover::before { opacity: 1; } .hps-icon { font-size: 1.4rem; flex-shrink: 0; } .hps-num { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; background: var(--grad-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; } .hps-label { font-size: .68rem; color: var(--text2); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; font-weight: 600; } .hps-online { display: flex; align-items: center; gap: 6px; } .hps-online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); animation: pulse 2s ease-in-out infinite; box-shadow: 0 0 8px var(--success); } .hps-online-num { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; color: var(--success); } /* ── SECTION HEADING SYSTEM ────────────────────────────────────── */ .home-section-head { display: flex; align-items: center; justify-content: space-between; margin: 32px 0 16px; } .home-section-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; display: flex; align-items: center; gap: 10px; } .home-section-title .hs-accent { width: 4px; height: 20px; border-radius: 4px; background: var(--grad-primary); flex-shrink: 0; } .home-section-link { font-size: .8rem; color: var(--accent); font-weight: 600; cursor: pointer; border: none; background: none; padding: 0; } .home-section-link:hover { opacity: .75; text-decoration: underline; } /* ── HORIZONTAL SHELF ──────────────────────────────────────────── */ .home-shelf { display: flex; gap: 16px; overflow-x: auto; padding: 6px 2px 16px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .home-shelf::-webkit-scrollbar { display: none; } .home-shelf .pdf-card { flex: 0 0 190px; scroll-snap-align: start; } @media (max-width: 480px) { .home-shelf .pdf-card { flex-basis: 162px; } } /* ── EXAM COUNTDOWN ────────────────────────────────────────────── */ .home-exam-card { border-radius: 20px; padding: 20px 22px; margin-bottom: 20px; background: linear-gradient(135deg, rgba(139,92,246,0.14), rgba(147,2,5,0.08)); border: 1px solid rgba(139,92,246,0.22); backdrop-filter: blur(8px); animation: fadeUp .5s ease both; } .home-exam-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .home-exam-icon { font-size: 1.3rem; } .home-exam-label { font-size: .72rem; color: #c4b5fd; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } .home-exam-title { font-family: var(--font-display); font-size: .95rem; font-weight: 700; } .home-exam-countdown { display: flex; gap: 10px; } .exam-cd-item { text-align: center; flex: 1; } .exam-cd-num { font-family: var(--font-display); font-size: 2rem; font-weight: 800; background: linear-gradient(135deg, #c4b5fd, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; display: block; animation: countUp .5s cubic-bezier(0.34,1.56,0.64,1) both; } .exam-cd-label { font-size: .65rem; color: var(--text2); text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; } .exam-cd-sep { font-size: 1.5rem; color: rgba(139,92,246,0.5); align-self: center; font-weight: 300; } .home-exam-exams { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .home-exam-chip { padding: 5px 14px; border-radius: 20px; font-size: .75rem; font-weight: 600; background: rgba(139,92,246,0.12); border: 1px solid rgba(139,92,246,0.25); color: #c4b5fd; cursor: pointer; transition: all .2s; } .home-exam-chip:hover { background: rgba(139,92,246,0.22); border-color: rgba(139,92,246,0.45); } .home-exam-chip.active { background: linear-gradient(135deg, rgba(139,92,246,0.3), rgba(147,2,5,0.2)); border-color: rgba(139,92,246,0.5); } /* ── ACHIEVEMENT BADGES ────────────────────────────────────────── */ .home-badges-row { display: flex; gap: 12px; overflow-x: auto; padding: 6px 2px 16px; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .home-badges-row::-webkit-scrollbar { display: none; } .home-badge-card { flex: 0 0 auto; min-width: 120px; text-align: center; padding: 18px 14px; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(14px); cursor: default; transition: all .3s cubic-bezier(0.34,1.15,0.64,1); animation: badgePop .5s cubic-bezier(0.34,1.56,0.64,1) both; scroll-snap-align: start; } .home-badge-card:hover { transform: translateY(-4px) scale(1.04); border-color: rgba(245,158,11,0.35); box-shadow: 0 14px 36px rgba(245,158,11,0.14); } .home-badge-card.locked { opacity: .4; filter: grayscale(.7); } .home-badge-card.locked:hover { transform: none; box-shadow: none; } .home-badge-emoji { font-size: 2rem; margin-bottom: 8px; display: block; } .home-badge-title { font-size: .76rem; font-weight: 700; color: var(--text); margin-bottom: 3px; } .home-badge-sub { font-size: .65rem; color: var(--text2); } /* ── LIVE ACTIVITY BAR ─────────────────────────────────────────── */ .home-activity-bar { border-radius: 16px; padding: 14px 18px; background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(14px); display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; margin-bottom: 20px; -ms-overflow-style: none; } .home-activity-bar::-webkit-scrollbar { display: none; } .hab-item { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 160px; padding: 0 16px; position: relative; } .hab-item:not(:first-child)::before { content: ''; position: absolute; left: 0; top: 10%; height: 80%; width: 1px; background: var(--glass-border); } .hab-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; animation: pulse 2s ease-in-out infinite; } .hab-dot.fire { background: #ff8fa8; box-shadow: 0 0 8px rgba(255,77,109,0.5); } .hab-dot.blue { background: var(--accent); box-shadow: 0 0 8px rgba(147,2,5,0.5); } .hab-dot.gold { background: #fbbf24; box-shadow: 0 0 8px rgba(245,158,11,0.5); } .hab-text { font-size: .78rem; color: var(--text2); line-height: 1.4; } .hab-text strong { color: var(--text); } /* ── FLASH SALE ────────────────────────────────────────────────── */ .home-flash-card { border-radius: 22px; padding: 22px 24px; margin-bottom: 20px; position: relative; overflow: hidden; background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 40%, #0f172a 100%); border: 1px solid rgba(245,158,11,0.3); box-shadow: 0 8px 48px rgba(245,158,11,0.12), 0 0 0 1px rgba(245,158,11,0.08); animation: fadeUp .5s ease both; } .home-flash-card::before { content: ''; position: absolute; top: -50%; left: -20%; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(245,158,11,0.25), transparent 65%); animation: orbFloat 12s ease-in-out infinite; } .home-flash-card::after { content: ''; position: absolute; bottom: -50%; right: -10%; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(249,115,22,0.18), transparent 65%); animation: orbFloat 16s ease-in-out infinite reverse; } .home-flash-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .home-flash-left { flex: 1; } .home-flash-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; background: rgba(245,158,11,0.2); border: 1px solid rgba(245,158,11,0.4); color: #fbbf24; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; } .home-flash-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: #fbbf24; animation: pulse 1.5s ease-in-out infinite; } .home-flash-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; color: #fff; margin-bottom: 6px; } .home-flash-sub { font-size: .85rem; color: rgba(255,255,255,0.6); } .home-flash-timer { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } .flash-timer-item { text-align: center; } .flash-timer-num { display: block; font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; color: #fbbf24; background: rgba(0,0,0,0.3); padding: 4px 10px; border-radius: 10px; min-width: 44px; border: 1px solid rgba(245,158,11,0.3); line-height: 1; } .flash-timer-lbl { font-size: .6rem; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; } .flash-timer-sep { color: #fbbf24; font-size: 1.4rem; font-weight: 300; align-self: flex-start; padding-top: 4px; } .home-flash-cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 12px; margin-top: 14px; background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff; font-weight: 700; font-size: .875rem; border: none; cursor: pointer; box-shadow: 0 6px 24px rgba(245,158,11,0.4); transition: all .25s; } .home-flash-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(245,158,11,0.55); } /* ── TESTIMONIALS CAROUSEL ─────────────────────────────────────── */ .home-testimonials { padding: 0 0 20px; overflow: hidden; position: relative; } .home-testimonials-track { display: flex; gap: 16px; animation: testimScroll 28s linear infinite; width: max-content; } .home-testimonials:hover .home-testimonials-track { animation-play-state: paused; } @keyframes testimScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .home-testim-card { flex: 0 0 300px; border-radius: 18px; padding: 20px; background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(14px); transition: border-color 0.22s, box-shadow 0.22s; position: relative; } .home-testim-card:hover { border-color: rgba(147,2,5,0.28); box-shadow: 0 8px 32px rgba(0,0,0,0.22); } .home-testim-stars { display: flex; gap: 2px; margin-bottom: 10px; } .home-testim-star { color: #fbbf24; font-size: .9rem; } .home-testim-text { font-size: .85rem; color: var(--text2); line-height: 1.7; margin-bottom: 14px; font-style: italic; } .home-testim-author { display: flex; align-items: center; gap: 10px; } .home-testim-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--grad-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; color: #fff; flex-shrink: 0; overflow: hidden; } .home-testim-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .home-testim-name { font-weight: 700; font-size: .85rem; } .home-testim-role { font-size: .72rem; color: var(--text2); } .home-testim-verified { display: inline-flex; align-items: center; gap: 3px; font-size: .58rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #10d98e; background: rgba(16,217,142,0.10); border: 1px solid rgba(16,217,142,0.25); border-radius: 20px; padding: 2px 6px; margin-top: 2px; } /* ── WHY STUDYRIA ──────────────────────────────────────────────── */ .home-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 20px; } @media (min-width: 640px) { .home-why-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .home-why-grid { grid-template-columns: repeat(6, 1fr); } } .home-why-card { border-radius: 18px; padding: 20px 14px; text-align: center; background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(12px); transition: all .28s cubic-bezier(0.34,1.15,0.64,1); animation: fadeUp .4s ease both; } .home-why-card:hover { transform: translateY(-4px); border-color: rgba(147,2,5,0.28); box-shadow: 0 14px 40px rgba(0,0,0,0.28); } .home-why-icon { width: 48px; height: 48px; border-radius: 14px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; } .home-why-title { font-size: .82rem; font-weight: 700; color: var(--text); margin-bottom: 4px; } .home-why-sub { font-size: .7rem; color: var(--text2); line-height: 1.5; } /* ═══════════════════════════════════════════════════════════════ COMMUNITY HUB SECTION ═══════════════════════════════════════════════════════════════ */ .community-hub-section { padding: 40px 0 48px; position: relative; overflow: hidden; } .community-hub-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(16,217,142,0.06) 0%, transparent 70%), radial-gradient(ellipse 60% 50% at 20% 0%, rgba(147,2,5,0.05) 0%, transparent 60%); pointer-events: none; } .community-hub-glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.07); border-radius: 24px; padding: 36px 28px 32px; position: relative; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.06); } .community-hub-glass::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(16,217,142,0.4), rgba(147,2,5,0.4), transparent); } .community-hub-glass::after { content: ''; position: absolute; top: -80px; right: -80px; width: 240px; height: 240px; background: radial-gradient(circle, rgba(16,217,142,0.07) 0%, transparent 70%); pointer-events: none; } .community-hub-head { text-align: center; margin-bottom: 28px; } .community-hub-eyebrow { display: inline-flex; align-items: center; gap: 6px; background: rgba(16,217,142,0.1); border: 1px solid rgba(16,217,142,0.2); border-radius: 100px; padding: 4px 14px; font-size: .72rem; font-weight: 600; color: #10d98e; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; } .community-hub-eyebrow .live-dot { width: 6px; height: 6px; background: #10d98e; box-shadow: 0 0 6px #10d98e; } .community-hub-title { font-size: 1.45rem; font-weight: 800; color: var(--text); line-height: 1.25; margin-bottom: 8px; } .community-hub-title .ch-grad { background: linear-gradient(135deg, #10d98e, #930205); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .community-hub-sub { font-size: .84rem; color: var(--text2); line-height: 1.6; max-width: 460px; margin: 0 auto; } .community-hub-grid { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: stretch; } @media (min-width: 480px) { .community-hub-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .community-hub-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } } /* ── Premium glassmorphic community card ── */ .chx-card { --chx-glow: rgba(255,255,255,0.18); position: relative; display: flex; flex-direction: column; height: 100%; padding: 26px 22px 22px; border-radius: 20px; border: 1px solid transparent; background: linear-gradient(rgba(22,24,30,0.55), rgba(22,24,30,0.55)) padding-box, var(--chx-grad, linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.05))) border-box; -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 8px 24px rgba(0,0,0,0.22); text-decoration: none; color: var(--text); cursor: pointer; overflow: hidden; animation: chxCardIn .5s cubic-bezier(.2,.8,.2,1) both; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, background .3s ease; -webkit-tap-highlight-color: transparent; } .chx-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120px 80px at 20% 0%, var(--chx-glow), transparent 70%); opacity: 0; transition: opacity .3s ease; pointer-events: none; } .chx-card:hover, .chx-card:focus-visible { transform: translateY(-8px) scale(1.015); box-shadow: 0 20px 44px rgba(0,0,0,0.34), 0 0 0 1px var(--chx-glow); } .chx-card:hover::after { opacity: 1; } .chx-card:active { transform: translateY(-3px) scale(1.005); } .chx-icon-wrap { width: 52px; height: 52px; border-radius: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 4px 14px rgba(0,0,0,0.25); margin-bottom: 16px; } .chx-icon-wrap svg { width: 27px; height: 27px; display: block; } .chx-body { flex: 1; } .chx-title { display: block; font-weight: 800; font-size: 1.02rem; line-height: 1.25; margin-bottom: 6px; letter-spacing: -0.01em; } .chx-desc { display: block; font-size: .8rem; line-height: 1.55; color: var(--text2); font-weight: 400; } .chx-join-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.08); } .chx-join-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 100px; font-size: .76rem; font-weight: 700; color: #0b0d12; background: var(--chx-grad, #fff); box-shadow: 0 4px 14px var(--chx-glow); transition: transform .25s ease, box-shadow .25s ease; white-space: nowrap; } .chx-card:hover .chx-join-btn { transform: translateY(-1px); box-shadow: 0 8px 20px var(--chx-glow); } .chx-arrow { font-size: 1.05rem; color: var(--text2); transition: transform .3s cubic-bezier(.2,.8,.2,1); flex-shrink: 0; } .chx-card:hover .chx-arrow { transform: translateX(5px); color: var(--text); } @keyframes chxCardIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Loader skeleton for community hub — matches the new card shape */ .ch-skeleton-grid { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 480px) { .ch-skeleton-grid { grid-template-columns: repeat(2,1fr); } } @media (min-width: 1024px) { .ch-skeleton-grid { grid-template-columns: repeat(4,1fr); } } .ch-skel { height: 172px; border-radius: 20px; background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%); background-size: 200% 100%; animation: skelShimmer 1.4s infinite; } @keyframes skelShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }} /* ═══ ADMIN — Community Manager ═══ */ .community-manager-wrap { padding: 0; } .cm-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; } .cm-preview-panel { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 24px; margin-bottom: 24px; } .cm-preview-label { font-size: .72rem; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .cm-preview-label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #10d98e; box-shadow: 0 0 6px #10d98e; display: inline-block; } .cm-links-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } .cm-link-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; transition: background .15s; cursor: grab; user-select: none; } .cm-link-row:active { cursor: grabbing; } .cm-link-row.cm-dragging { opacity: .5; background: rgba(147,2,5,0.1); border-color: rgba(147,2,5,0.3); } .cm-link-row.cm-drag-over { border-color: rgba(147,2,5,0.5); background: rgba(147,2,5,0.07); } .cm-drag-handle { color: var(--text2); font-size: 1rem; cursor: grab; flex-shrink: 0; padding: 2px 4px; } .cm-link-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.08); } .cm-link-info { flex: 1; min-width: 0; } .cm-link-title { font-size: .85rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cm-link-url { font-size: .7rem; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; } .cm-link-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .cm-toggle { width: 38px; height: 21px; border-radius: 100px; border: none; cursor: pointer; position: relative; transition: background .2s; flex-shrink: 0; } .cm-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 1px 4px rgba(0,0,0,0.3); } .cm-toggle.on { background: #10d98e; } .cm-toggle.off { background: rgba(255,255,255,0.15); } .cm-toggle.on::after { left: 20px; } .cm-action-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: var(--text2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .8rem; transition: background .15s, color .15s; } .cm-action-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); } .cm-action-btn.danger:hover { background: rgba(255,77,109,0.12); color: var(--danger); border-color: rgba(255,77,109,0.2); } .cm-add-form { background: rgba(147,2,5,0.05); border: 1px solid rgba(147,2,5,0.15); border-radius: 16px; padding: 20px; margin-top: 16px; } .cm-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 640px) { .cm-form-grid { grid-template-columns: 1fr; } } .cm-form-field { display: flex; flex-direction: column; gap: 6px; } .cm-form-field.full { grid-column: 1/-1; } .cm-form-label { font-size: .75rem; font-weight: 600; color: var(--text2); } .cm-form-input { padding: 9px 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; color: var(--text); font-size: .85rem; outline: none; transition: border-color .15s, background .15s; font-family: inherit; width: 100%; box-sizing: border-box; } .cm-form-input:focus { border-color: rgba(147,2,5,0.5); background: rgba(147,2,5,0.05); } .cm-color-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .cm-color-preset { width: 28px; height: 28px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; transition: transform .15s, border-color .15s; flex-shrink: 0; } .cm-color-preset:hover { transform: scale(1.15); } .cm-color-preset.selected { border-color: #fff; transform: scale(1.1); } .cm-save-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 0 0; border-top: 1px solid rgba(255,255,255,0.06); margin-top: 20px; } .cm-section-toggle { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; margin-bottom: 20px; } .cm-section-toggle-label { font-size: .88rem; font-weight: 600; flex: 1; color: var(--text); } .cm-section-toggle-sub { font-size: .75rem; color: var(--text2); } /* ── PREMIUM CTA ───────────────────────────────────────────────── */ .home-premium-cta { border-radius: 28px; padding: 52px 32px; margin-bottom: 20px; text-align: center; position: relative; overflow: hidden; background: linear-gradient(135deg, #0a1e5e 0%, #0d1a3a 35%, #091028 70%, #0a1432 100%); border: 1px solid rgba(147,2,5,0.25); box-shadow: 0 8px 64px rgba(147,2,5,0.15); animation: fadeUp .5s ease both; } .home-premium-cta::before { content: ''; position: absolute; top: -40%; left: -10%; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(147,2,5,0.22), transparent 65%); filter: blur(40px); animation: orbFloat 20s ease-in-out infinite; } .home-premium-cta::after { content: ''; position: absolute; bottom: -40%; right: -10%; width: 350px; height: 350px; border-radius: 50%; background: radial-gradient(circle, rgba(201,154,60,0.16), transparent 65%); filter: blur(40px); animation: orbFloat 24s ease-in-out infinite reverse; } .home-premium-cta-inner { position: relative; z-index: 1; } .home-cta-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 6px 18px; border-radius: 20px; background: rgba(147,2,5,0.12); border: 1px solid rgba(147,2,5,0.3); color: var(--accent2); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 20px; } .home-cta-title { font-family: var(--font-display); font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 800; line-height: 1.1; margin-bottom: 16px; background: linear-gradient(135deg, #fff 0%, #e8d5a8 50%, #c99a3c 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .home-cta-sub { font-size: 1rem; color: rgba(255,255,255,0.55); max-width: 500px; margin: 0 auto 28px; line-height: 1.7; } .home-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .home-cta-primary { display: inline-flex; align-items: center; gap: 10px; padding: 15px 32px; border-radius: 14px; background: var(--grad-primary); color: #fff; font-weight: 700; font-size: 1rem; border: none; cursor: pointer; box-shadow: 0 8px 32px rgba(147,2,5,0.45); transition: all .25s; } .home-cta-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 48px rgba(147,2,5,0.6); } .home-cta-secondary { display: inline-flex; align-items: center; gap: 10px; padding: 15px 32px; border-radius: 14px; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85); border: 1px solid rgba(255,255,255,0.14); font-weight: 600; font-size: 1rem; cursor: pointer; transition: all .25s; } .home-cta-secondary:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); transform: translateY(-2px); } .home-cta-trust { margin-top: 22px; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; } .home-cta-trust-item { font-size: .8rem; color: rgba(255,255,255,0.45); display: flex; align-items: center; gap: 5px; } /* ── SMART FOOTER ──────────────────────────────────────────────── */ .home-footer { background: rgba(5,8,15,0.95); border-top: 1px solid rgba(255,255,255,0.06); padding: 48px 0 100px; } @media(min-width:769px) { .home-footer { padding-bottom: 40px; } } body.light .home-footer { background: rgba(240,244,251,0.95); border-top-color: rgba(0,0,0,0.08); } .home-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 36px; } @media (max-width: 768px) { .home-footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; } } @media (max-width: 480px) { .home-footer-grid { grid-template-columns: 1fr; gap: 20px; } } .home-footer-brand .footer-logo { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; background: linear-gradient(135deg, #930205, #c99a3c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 10px; } .home-footer-brand p { font-size: .82rem; color: var(--text2); line-height: 1.7; max-width: 240px; } .home-footer-socials { display: flex; gap: 8px; margin-top: 16px; } .home-footer-social { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--glass); border: 1px solid var(--glass-border); color: var(--text2); font-size: 1rem; cursor: pointer; transition: all .2s; text-decoration: none; } .home-footer-social:hover { color: var(--text); border-color: var(--accent); background: rgba(147,2,5,0.1); transform: translateY(-2px); } .home-footer-col h4 { font-size: .82rem; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; } .home-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .home-footer-col li a { font-size: .82rem; color: var(--text2); text-decoration: none; cursor: pointer; transition: color .2s; } .home-footer-col li a:hover { color: var(--accent); } .home-footer-bottom { padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } body.light .home-footer-bottom { border-top-color: rgba(0,0,0,0.06); } .home-footer-copy { font-size: .78rem; color: var(--text2); white-space: normal; word-break: keep-all; flex: 1; min-width: 200px; } @media(max-width:480px) { .home-footer-bottom { flex-direction: column; align-items: flex-start; } .home-footer-copy { min-width: unset; width: 100%; } } .home-footer-legal { display: flex; gap: 14px; } .home-footer-legal a { font-size: .78rem; color: var(--text2); text-decoration: none; cursor: pointer; } .home-footer-legal a:hover { color: var(--accent); } /* Upgraded shelf section */ .premium-shelf-section { padding: 24px 0; position: relative; } .premium-shelf-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .premium-shelf-title-wrap { display: flex; align-items: center; gap: 12px; } .premium-shelf-emoji-wrap { width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; } .premium-shelf-title { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; line-height: 1.1; } .premium-shelf-sub { font-size: .75rem; color: var(--text2); margin-top: 2px; } .premium-shelf-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 20px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .psb-fire { background: rgba(255,77,109,0.12); border: 1px solid rgba(255,77,109,0.3); color: #ff8fa8; } .psb-new { background: rgba(201,154,60,0.12); border: 1px solid rgba(201,154,60,0.3); color: #22e8ff; } .psb-star { background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.3); color: #fbbf24; } .psb-live-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 2s ease-in-out infinite; } .premium-shelf-view-all { font-size: .8rem; color: var(--accent); font-weight: 600; border: none; background: none; cursor: pointer; padding: 6px 14px; border-radius: 20px; border: 1px solid rgba(147,2,5,0.2); transition: all .2s; } .premium-shelf-view-all:hover { background: rgba(147,2,5,0.08); border-color: rgba(147,2,5,0.4); } /* ── SHIMMER for skeletons ──────────────────────────────────────── */ @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } @keyframes progressGrow { from { width: 0; } } @keyframes countUp { from { opacity: 0; transform: translateY(8px); } } @keyframes badgePop { from { opacity: 0; transform: scale(0.5); } } @keyframes orbFloat { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-12px) scale(1.02); } } @keyframes dashFadeUp { from { opacity: 0; transform: translateY(16px); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } } /* footer is now outside all .page divs — always visible unless sf-hidden */ .home-footer { display: none; } #page-home .home-footer { display: none; } .site-footer-always { display: none; } /* ── HERO DEVICE MOCKUP SCENE ─────────────────────────────── */ .hvp-device-scene { position: absolute; inset: 0; border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, #050d1a 0%, #0a1628 50%, #0c1f3e 100%); } /* LAPTOP */ .hvp-laptop { position: absolute; bottom: 8%; left: 2%; width: 68%; filter: drop-shadow(0 24px 48px rgba(0,0,0,0.7)); } .hvp-laptop-lid { position: relative; width: 100%; padding-bottom: 63%; /* 16:10 ratio */ background: #0a1628; border-radius: 10px 10px 2px 2px; border: 2px solid rgba(147,2,5,0.35); box-shadow: 0 0 40px rgba(147,2,5,0.20), inset 0 0 30px rgba(0,0,0,0.4); overflow: hidden; } .hvp-laptop-cam { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; background: #1a2d4a; border: 1.5px solid rgba(147,2,5,0.3); z-index: 10; } .hvp-laptop-bezel { position: absolute; inset: 0; padding: 4px; display: flex; flex-direction: column; overflow: hidden; border-radius: 8px 8px 0 0; } .hvp-screen-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 6px; opacity: 0.92; } .hvp-screen-label { position: absolute; top: 6px; left: 8px; z-index: 5; display: flex; align-items: center; gap: 5px; background: rgba(8,18,40,0.80); backdrop-filter: blur(8px); padding: 3px 8px; border-radius: 6px; border: 1px solid rgba(147,2,5,0.3); } .hvp-screen-logo { font-size: .60rem; font-weight: 800; background: linear-gradient(90deg, #930205, #c99a3c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: .04em; } .hvp-screen-sub { font-size: .52rem; font-weight: 600; color: rgba(255,255,255,0.55); letter-spacing: .05em; } .hvp-laptop-base { width: 100%; height: 14px; background: linear-gradient(180deg, #0d1b2e 0%, #1a2d4a 100%); border-radius: 0 0 6px 6px; border: 1.5px solid rgba(147,2,5,0.2); border-top: none; display: flex; align-items: center; justify-content: center; } .hvp-laptop-keys { width: 60%; height: 5px; background: rgba(147,2,5,0.10); border-radius: 3px; } .hvp-laptop-hinge { width: 30%; height: 3px; margin: 0 auto; background: linear-gradient(90deg, transparent, rgba(147,2,5,0.25), transparent); border-radius: 2px; } /* MOBILE */ .hvp-mobile { position: absolute; bottom: 5%; right: 3%; width: 24%; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.75)); } .hvp-mobile-frame { position: relative; width: 100%; padding-bottom: 195%; background: #090f1e; border-radius: 18px; border: 2.5px solid rgba(100,160,255,0.40); box-shadow: 0 0 30px rgba(147,2,5,0.22), inset 0 0 12px rgba(0,0,0,0.5); overflow: hidden; } .hvp-mobile-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 35%; height: 16px; background: #090f1e; border-radius: 0 0 10px 10px; z-index: 10; border-bottom: 1.5px solid rgba(147,2,5,0.25); } .hvp-mobile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 15px; opacity: 0.93; } .hvp-mobile-label { position: absolute; top: 18px; left: 0; right: 0; z-index: 5; display: flex; justify-content: center; } .hvp-mobile-label span { font-size: .48rem; font-weight: 800; background: linear-gradient(90deg, #930205, #c99a3c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-color: rgba(8,18,40,0.75); padding: 2px 6px; border-radius: 4px; letter-spacing: .04em; } .hvp-mobile-bar { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 30%; height: 3px; background: rgba(255,255,255,0.30); border-radius: 2px; z-index: 5; } /* Side buttons */ .hvp-mobile-btn { position: absolute; background: #1a2d4a; border-radius: 2px; } .hvp-mobile-vol1 { left: -3px; top: 22%; width: 3px; height: 8%; } .hvp-mobile-vol2 { left: -3px; top: 34%; width: 3px; height: 8%; } .hvp-mobile-pwr { right: -3px; top: 26%; width: 3px; height: 10%; } /* Desk ambient glow */ .hvp-desk-glow { position: absolute; bottom: 0; left: 0; right: 0; height: 18%; background: linear-gradient(to top, rgba(147,2,5,0.08), transparent); pointer-events: none; }