/* ============================================================ NewsHub — Marketing Landing (ported from the design handoff) Standalone selling page at /. Uses design tokens from the active template (tokens.css) and component classes (components.css). Access is gated by registration: CTAs open the auth modal, then the portal opens at /portal. NOTE: data-theme lives on (shared with the portal), so the theme-scoped rules below are descendant selectors. ============================================================ */ html, body { margin: 0; background: var(--bg-base, #121214); } .lp { font-family: var(--font-body); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; background-color: var(--bg-base); background-image: radial-gradient(120% 70% at 80% -10%, var(--lp-glow, transparent) 0%, transparent 55%); background-repeat: no-repeat; } [data-theme="light"] .lp { --lp-glow: rgba(230,43,30,.07); } [data-theme="dark"] .lp { --lp-glow: rgba(240,68,56,.13); } .lp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; } @media (max-width: 760px){ .lp-wrap { padding: 0 20px; } } .lp h1,.lp h2,.lp h3 { margin: 0; } .lp p { margin: 0; } .lp-display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; line-height: 1.02; } .lp-kicker { display:inline-flex; align-items:center; gap:8px; font-family: var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.12em; font-size:12.5px; color:var(--primary); padding:7px 13px; border-radius:var(--radius-pill); background:var(--primary-tint); border:1px solid transparent; } .lp-kicker .dot { width:7px; height:7px; border-radius:999px; background:var(--primary); box-shadow:0 0 10px var(--primary); } .lp-eyebrow { font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:13px; color:var(--text-secondary); } .lp-link { color:var(--primary); font-weight:600; cursor:pointer; } /* ============ NAV ============ */ .lp-nav { position: sticky; top: 0; z-index: 60; display:flex; align-items:center; gap:20px; height: 70px; background: color-mix(in srgb, var(--bg-base) 78%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--dur-ctrl) var(--ease), background var(--dur-ctrl); } .lp-nav.scrolled { border-bottom-color: var(--border); box-shadow: var(--e1); } .lp-nav .lp-wrap { display:flex; align-items:center; gap:20px; width:100%; } .lp-nav .logo { gap:11px; } .lp-nav-links { display:flex; align-items:center; gap:4px; margin-left:18px; } .lp-nav-links a { padding:9px 13px; border-radius:9px; font-size:14px; font-weight:600; color:var(--text-secondary); cursor:pointer; transition: background var(--dur-hover) var(--ease), color var(--dur-hover); } .lp-nav-links a:hover { background:var(--bg-subtle); color:var(--text-primary); } .lp-nav-actions { margin-left:auto; display:flex; align-items:center; gap:8px; } @media (max-width: 940px){ .lp-nav-links { display:none; } } /* Mobile: keep BOTH auth buttons (Sign in + Create account); free the space by collapsing the logo to the mark only. */ @media (max-width: 600px){ .lp-nav .logo-word { display:none; } .lp-nav .lp-wrap { gap:10px; } .lp-nav-actions { gap:6px; } } /* ============ HERO ============ */ .lp-hero { position:relative; padding: 64px 0 88px; } .lp-hero-grid { display:grid; grid-template-columns: 1.02fr 0.98fr; gap: 56px; align-items:center; } .lp-hero-copy { max-width: 600px; } .lp-hero h1 { font-size: clamp(42px, 6.4vw, 82px); margin: 22px 0 0; } .lp-hero h1 .accent { color: var(--primary); } .lp-hero-sub { font-size: clamp(16px, 1.7vw, 20px); line-height: 1.5; color: var(--text-secondary); margin-top: 22px; max-width: 540px; text-wrap: pretty; } .lp-hero-cta { display:flex; align-items:center; gap:14px; margin-top: 34px; flex-wrap:wrap; } .lp-trust { display:flex; align-items:center; gap:18px; margin-top:22px; flex-wrap:wrap; color:var(--text-tertiary); font-size:13.5px; font-weight:500; } .lp-trust .ti { display:flex; align-items:center; gap:7px; } .lp-trust .ti svg { width:16px; height:16px; color:var(--success); } .lp-lockchip { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--text-secondary); padding:8px 13px; border-radius:var(--radius-pill); border:1px solid var(--border); background:var(--bg-elevated); } .lp-lockchip svg { width:15px; height:15px; color:var(--primary); } /* App preview window */ .lp-hero-visual { position:relative; } .lp-glow-blob { position:absolute; inset:-12% -8% -8% -8%; z-index:0; background: radial-gradient(60% 60% at 60% 35%, var(--primary) 0%, transparent 70%); opacity:.20; filter: blur(40px); pointer-events:none; } .lp-appwin { position:relative; z-index:1; background: var(--bg-elevated); border:1px solid var(--border); border-radius:18px; overflow:hidden; box-shadow: var(--e3), 0 0 0 1px rgba(255,255,255,.02); } .lp-appwin-bar { display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--border); background:var(--bg-base); } .lp-appwin-bar .lp-mini-search { flex:1; height:34px; border-radius:8px; background:var(--bg-subtle); display:flex; align-items:center; gap:8px; padding:0 12px; color:var(--text-tertiary); font-size:13px; } .lp-appwin-bar .lp-mini-search svg { width:15px; height:15px; } .lp-appwin-bar .lp-mini-av { width:30px; height:30px; border-radius:999px; background:var(--primary); display:grid; place-items:center; color:#fff; font-weight:700; font-family:var(--font-display); font-size:13px; } .lp-appwin-body { position:relative; padding:18px; } .lp-prev-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; } .lp-prev-row { display:flex; align-items:center; gap:10px; margin-bottom:14px; } .lp-prev-chip { font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:11.5px; padding:6px 11px; border-radius:999px; background:var(--primary-tint); color:var(--primary); } .lp-prev-chip.muted { background:var(--bg-subtle); color:var(--text-secondary); } /* mini news card for previews */ .lp-card { border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--bg-elevated); display:flex; flex-direction:column; } .lp-card-media { position:relative; aspect-ratio:16/9; overflow:hidden; } .lp-card-media .duo { position:absolute; inset:0; background:linear-gradient(135deg, var(--a) 0%, var(--b) 100%); } .lp-card-media .duo::after { content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px); mix-blend-mode:overlay; opacity:.5; } .lp-card-media .tt { position:absolute; top:9px; left:9px; z-index:2; background:rgba(0,0,0,.42); backdrop-filter:blur(6px); color:#fff; font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:4px 7px; border-radius:999px; border:1px solid rgba(255,255,255,.18); } .lp-card-media .ph { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:rgba(255,255,255,.92); z-index:2; } .lp-card-media .ph svg { width:26px; height:26px; } .lp-card-media .ph span { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.07em; font-size:9.5px; font-weight:600; } .lp-card-body { padding:11px 12px 13px; display:flex; flex-direction:column; gap:6px; flex:1; } .lp-card-title { font-weight:600; font-size:13.5px; line-height:1.3; color:var(--text-primary); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .lp-card-meta { display:flex; align-items:center; gap:7px; margin-top:auto; color:var(--text-tertiary); font-size:11px; } .lp-card-meta .s-ic { width:14px; height:14px; border-radius:4px; display:grid; place-items:center; color:#fff; font-size:8px; font-weight:700; font-family:var(--font-display); } /* gate veil over preview */ .lp-gate-veil { position:absolute; left:0; right:0; bottom:0; z-index:5; height:46%; background: linear-gradient(to top, var(--bg-elevated) 18%, color-mix(in srgb, var(--bg-elevated) 60%, transparent) 70%, transparent 100%); display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:12px; padding:22px; } .lp-gate-veil .lp-gate-card { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:12px; background:var(--bg-base); border:1px solid var(--border); box-shadow:var(--e2); } .lp-gate-veil .lp-gate-ic { width:38px; height:38px; border-radius:10px; background:var(--primary-tint); color:var(--primary); display:grid; place-items:center; flex-shrink:0; } .lp-gate-veil .lp-gate-ic svg { width:20px; height:20px; } .lp-gate-veil .gt { font-weight:700; font-size:13.5px; } .lp-gate-veil .gs { font-size:12px; color:var(--text-secondary); margin-top:1px; } /* floating tags on hero visual */ .lp-float { position:absolute; z-index:3; display:flex; align-items:center; gap:10px; background:var(--bg-elevated); border:1px solid var(--border); box-shadow:var(--e2); padding:10px 14px; border-radius:12px; } .lp-float .fi { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex-shrink:0; } .lp-float .fi svg { width:18px; height:18px; } .lp-float .fn { font-family:var(--font-display); font-weight:700; font-size:16px; line-height:1; } .lp-float .fl { font-size:11.5px; color:var(--text-secondary); margin-top:2px; } .lp-float.tl { top:-22px; left:-26px; } .lp-float.br { bottom:24px; right:-26px; } @media (max-width: 1080px){ .lp-float.tl{ left:-8px; } .lp-float.br{ right:-8px; } } @media (max-width: 940px){ .lp-hero-grid { grid-template-columns: 1fr; gap:44px; } .lp-hero-visual { max-width:520px; } .lp-float.tl, .lp-float.br { display:none; } .lp-hero { padding:40px 0 64px; } } /* ============ STATS BAND ============ */ .lp-stats { display:grid; grid-template-columns: repeat(4, 1fr); border:1px solid var(--border); border-radius:16px; overflow:hidden; background:var(--bg-elevated); } .lp-stat { padding:26px 24px; border-right:1px solid var(--border); } .lp-stat:last-child { border-right:0; } .lp-stat .n { font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3.4vw,40px); color:var(--text-primary); line-height:1; } .lp-stat .n b { color:var(--primary); font-weight:700; } .lp-stat .n small { font-size:22px; color:var(--text-secondary); } .lp-stat .l { margin-top:9px; font-size:13.5px; color:var(--text-secondary); } @media (max-width: 760px){ .lp-stats { grid-template-columns: repeat(2,1fr); } .lp-stat:nth-child(2){ border-right:0; } .lp-stat:nth-child(1),.lp-stat:nth-child(2){ border-bottom:1px solid var(--border); } .lp-stat { padding:22px 18px; } } /* ============ SECTION SCAFFOLD ============ */ .lp-section { padding: 92px 0; } .lp-section.sunken { background: var(--bg-subtle); } .lp-section-head { max-width: 660px; margin: 0 auto 52px; text-align:center; } .lp-section-head h2 { font-size: clamp(30px, 4vw, 50px); margin-top:16px; } .lp-section-head p { margin-top:18px; font-size:17px; line-height:1.5; color:var(--text-secondary); text-wrap:pretty; } @media (max-width:760px){ .lp-section { padding:64px 0; } .lp-section-head { margin-bottom:40px; } } /* ============ FEATURES GRID ============ */ .lp-feat-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; } @media (max-width: 960px){ .lp-feat-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 600px){ .lp-feat-grid { grid-template-columns: 1fr; } } .lp-feat { border:1px solid var(--border); border-radius:16px; background:var(--bg-elevated); padding:26px; display:flex; flex-direction:column; gap:14px; transition: border-color var(--dur-hover) var(--ease), transform var(--dur-hover), box-shadow var(--dur-hover); } .lp-feat:hover { border-color:var(--border-strong); transform:translateY(-3px); box-shadow:var(--e2); } .lp-feat .ic { width:48px; height:48px; border-radius:13px; display:grid; place-items:center; background:var(--primary-tint); color:var(--primary); } .lp-feat .ic svg { width:24px; height:24px; } .lp-feat h3 { font-family:var(--font-display); font-weight:600; font-size:20px; } .lp-feat p { font-size:14.5px; line-height:1.5; color:var(--text-secondary); } /* ============ SHOWCASE GRID ============ */ .lp-show-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1080px; margin:0 auto; } @media (max-width: 960px){ .lp-show-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 600px){ .lp-show-grid { grid-template-columns: 1fr; } } .lp-show-grid .card { cursor: default; } /* ============ PERSONALIZE ============ */ .lp-split { display:grid; grid-template-columns: 1fr 1fr; gap:48px; align-items:center; } @media (max-width: 880px){ .lp-split { grid-template-columns:1fr; gap:36px; } } .lp-chipwall { display:flex; flex-wrap:wrap; gap:9px; } .lp-chipwall .chip { cursor:default; } .lp-chipwall .chip.hot { background:var(--primary-tint); border-color:transparent; color:var(--primary); } .lp-sub-demo { display:flex; flex-direction:column; gap:12px; border:1px solid var(--border); border-radius:16px; background:var(--bg-elevated); padding:22px; } .lp-sub-demo .h { font-family:var(--font-display); font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-tertiary); } .lp-sub-demo .badges { display:flex; flex-wrap:wrap; gap:9px; } /* ============ SOURCES ============ */ .lp-src-marquee { display:flex; flex-direction:column; gap:12px; } .lp-src-row { display:flex; align-items:center; gap:13px; padding:13px 15px; border:1px solid var(--border); border-radius:13px; background:var(--bg-elevated); } .lp-src-logo { width:46px; height:46px; border-radius:11px; display:grid; place-items:center; color:#fff; font-family:var(--font-display); font-weight:700; font-size:19px; flex-shrink:0; position:relative; overflow:hidden; } .lp-src-logo::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 60%); } .lp-src-info { flex:1; min-width:0; } .lp-src-info .nm { font-weight:700; font-size:14.5px; display:flex; align-items:center; gap:6px; } .lp-src-info .me { font-size:12px; color:var(--text-secondary); margin-top:2px; } .lp-src-sub { font-size:12.5px; font-weight:700; color:var(--primary); white-space:nowrap; } /* ============ DIGEST + PUSH ============ */ .lp-two { display:grid; grid-template-columns: 1fr 1fr; gap:20px; } @media (max-width: 880px){ .lp-two { grid-template-columns:1fr; } } .lp-panel { border:1px solid var(--border); border-radius:18px; background:var(--bg-elevated); padding:30px; display:flex; flex-direction:column; gap:18px; } .lp-panel .ph { display:flex; align-items:center; gap:12px; } .lp-panel .ph .ic { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--primary-tint); color:var(--primary); } .lp-panel .ph .ic svg { width:22px; height:22px; } .lp-panel h3 { font-family:var(--font-display); font-weight:600; font-size:22px; } .lp-panel p.d { font-size:14.5px; line-height:1.5; color:var(--text-secondary); } /* email digest mock */ .lp-mail { border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--bg-base); } .lp-mail-top { display:flex; align-items:center; gap:10px; padding:13px 15px; border-bottom:1px solid var(--border); } .lp-mail-top .av { width:34px; height:34px; border-radius:9px; background:var(--primary); display:grid; place-items:center; } .lp-mail-top .mt { font-weight:700; font-size:13.5px; } .lp-mail-top .ms { font-size:11.5px; color:var(--text-tertiary); } .lp-mail-body { padding:14px 15px; display:flex; flex-direction:column; gap:11px; } .lp-mail-item { display:flex; gap:11px; } .lp-mail-item .sw { width:42px; height:42px; border-radius:8px; flex-shrink:0; background:linear-gradient(135deg,var(--a),var(--b)); } .lp-mail-item .it { font-weight:600; font-size:13px; line-height:1.32; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .lp-mail-item .is { font-size:11px; color:var(--text-tertiary); margin-top:3px; } /* ============ TESTIMONIALS ============ */ .lp-quotes { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; } @media (max-width: 880px){ .lp-quotes { grid-template-columns:1fr; max-width:560px; margin:0 auto; } } .lp-quote { border:1px solid var(--border); border-radius:16px; background:var(--bg-elevated); padding:26px; display:flex; flex-direction:column; gap:18px; } .lp-quote .q { font-size:16px; line-height:1.55; color:var(--text-primary); text-wrap:pretty; } .lp-quote .q::before { content:"\201C"; font-family:var(--font-display); color:var(--primary); font-size:40px; line-height:0; vertical-align:-12px; margin-right:4px; } .lp-quote .who { display:flex; align-items:center; gap:11px; margin-top:auto; } .lp-quote .who .av { width:40px; height:40px; border-radius:999px; display:grid; place-items:center; color:#fff; font-family:var(--font-display); font-weight:700; font-size:16px; flex-shrink:0; } .lp-quote .who .nm { font-weight:700; font-size:14px; } .lp-quote .who .ro { font-size:12.5px; color:var(--text-secondary); } /* ============ PRICING ============ */ .lp-price { max-width:520px; margin:0 auto; } .lp-price-card { border:1px solid var(--border-strong); border-radius:20px; background:var(--bg-elevated); padding:38px 34px; text-align:center; position:relative; overflow:hidden; box-shadow:var(--e2); } .lp-price-card::before { content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--primary); } .lp-price-card .pp { font-family:var(--font-display); font-weight:700; font-size:62px; line-height:1; color:var(--primary); } .lp-price-card .pp small { font-size:22px; color:var(--text-secondary); font-weight:600; } .lp-price-card .pn { font-size:15px; color:var(--text-secondary); margin-top:10px; } .lp-price-list { display:flex; flex-direction:column; gap:13px; margin:28px 0; text-align:left; padding:0; } .lp-price-list li { display:flex; align-items:flex-start; gap:11px; font-size:14.5px; color:var(--text-primary); list-style:none; } .lp-price-list .ck { width:22px; height:22px; border-radius:999px; background:var(--success-tint); color:var(--success); display:grid; place-items:center; flex-shrink:0; margin-top:1px; } .lp-price-list .ck svg { width:14px; height:14px; } /* ============ FAQ ============ */ .lp-faq { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; } .lp-faq-item { border:1px solid var(--border); border-radius:14px; background:var(--bg-elevated); overflow:hidden; } .lp-faq-q { width:100%; display:flex; align-items:center; gap:14px; padding:20px 22px; border:0; background:transparent; cursor:pointer; text-align:left; font-family:inherit; color:var(--text-primary); font-weight:600; font-size:16.5px; } .lp-faq-q .pm { margin-left:auto; width:28px; height:28px; border-radius:8px; background:var(--bg-subtle); color:var(--text-secondary); display:grid; place-items:center; flex-shrink:0; transition:transform var(--dur-ctrl) var(--ease); } .lp-faq-item.open .lp-faq-q .pm { transform:rotate(45deg); color:var(--primary); } .lp-faq-q .pm svg { width:17px; height:17px; } .lp-faq-a { max-height:0; overflow:hidden; transition:max-height var(--dur-modal) var(--ease); } .lp-faq-item.open .lp-faq-a { max-height:240px; } .lp-faq-a p { padding:0 22px 20px; font-size:15px; line-height:1.55; color:var(--text-secondary); } /* ============ FINAL CTA ============ */ .lp-final { padding: 40px 0 100px; } .lp-final-card { position:relative; overflow:hidden; border-radius:24px; background: linear-gradient(135deg, var(--brand-red-700) 0%, var(--brand-red-600) 55%, var(--brand-red-500) 100%); padding: 64px 48px; text-align:center; box-shadow: 0 24px 60px rgba(230,43,30,.32); } .lp-final-card::after { content:""; position:absolute; inset:0; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 5px); mix-blend-mode:overlay; opacity:.6; pointer-events:none; } .lp-final-card h2 { font-family:var(--font-display); font-weight:700; font-size:clamp(30px,4.4vw,52px); color:#fff; position:relative; z-index:1; line-height:1.05; } .lp-final-card p { color:rgba(255,255,255,.9); font-size:18px; margin-top:18px; position:relative; z-index:1; } .lp-final-card .lp-hero-cta { justify-content:center; margin-top:32px; position:relative; z-index:1; } .lp-final .btn-white { background:#fff; color:var(--brand-red-700); } .lp-final .btn-white:hover { background:#fff; transform:translateY(-2px); } .lp-final .btn-ghost-w { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.3); } .lp-final .btn-ghost-w:hover { background:rgba(255,255,255,.2); } @media (max-width:600px){ .lp-final-card { padding:46px 24px; } } /* ============ FOOTER ============ */ .lp-footer { border-top:1px solid var(--border); padding:54px 0 40px; } .lp-footer-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap:36px; } @media (max-width: 760px){ .lp-footer-grid { grid-template-columns: 1fr 1fr; gap:30px; } } .lp-footer .fb p { font-size:13.5px; color:var(--text-secondary); margin-top:16px; max-width:260px; line-height:1.5; } .lp-footer .fcol h4 { font-family:var(--font-display); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-tertiary); margin-bottom:14px; } .lp-footer .fcol a { display:block; font-size:14px; color:var(--text-secondary); padding:5px 0; cursor:pointer; } .lp-footer .fcol a:hover { color:var(--primary); } .lp-footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:40px; padding-top:24px; border-top:1px solid var(--border); color:var(--text-tertiary); font-size:13px; flex-wrap:wrap; } /* ============ NAV PROFILE (signed-in visitor) ============ */ .lp-profile { position: relative; } .lp-prof-btn { display:flex; align-items:center; gap:9px; border:1px solid var(--border); background:var(--bg-elevated); border-radius:var(--radius-pill); padding:5px 12px 5px 5px; cursor:pointer; color:var(--text-primary); font-family:inherit; font-size:13.5px; font-weight:600; transition: border-color var(--dur-hover) var(--ease); } .lp-prof-btn:hover { border-color:var(--border-strong); } .lp-prof-btn svg { width:16px; height:16px; color:var(--text-tertiary); } .lp-prof-av { width:30px; height:30px; border-radius:999px; background:var(--primary); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:13px; flex-shrink:0; } .lp-prof-av.big { width:40px; height:40px; font-size:16px; } .lp-prof-mail { max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @media (max-width:600px){ .lp-prof-mail { display:none; } } .lp-prof-menu { position:absolute; right:0; top:calc(100% + 10px); min-width:250px; z-index:70; background:var(--bg-elevated); border:1px solid var(--border); border-radius:14px; box-shadow:var(--e3); padding:8px; display:none; } .lp-profile.open .lp-prof-menu { display:block; } .lp-prof-head { display:flex; align-items:center; gap:11px; padding:10px 10px 12px; border-bottom:1px solid var(--border); margin-bottom:6px; } .lp-prof-head .e { font-weight:700; font-size:13.5px; max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lp-prof-head .s { font-size:11.5px; color:var(--text-tertiary); margin-top:2px; } .lp-prof-menu .mi { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px; font-size:14px; font-weight:600; color:var(--text-primary); cursor:pointer; } .lp-prof-menu .mi:hover { background:var(--bg-subtle); } .lp-prof-menu .mi.danger { color:var(--error, #e5484d); } .lp-prof-menu .mi svg { width:17px; height:17px; } /* success note (after email confirmation) */ .form-ok { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--success); background:var(--success-tint); padding:10px 13px; border-radius:10px; } .form-ok svg { width:15px; height:15px; } /* ============ AUTH MODAL — viewport-fixed on the full page ============ */ .lp .overlay-bg { position:fixed; inset:0; } @media (max-width:600px){ .lp .overlay-bg { align-items:flex-end; padding:0; } .lp .modal { max-width:none; border-radius:18px 18px 0 0; } } .lp .form-err { color:var(--error, #e5484d); font-size:12.5px; } /* Boot splash */ #boot { position:fixed; inset:0; display:grid; place-items:center; background:#121214; z-index:999; transition:opacity .3s; } #boot .m { width:54px; height:54px; border-radius:14px; background:#E62B1E; display:grid; place-items:center; box-shadow:0 0 40px rgba(230,43,30,.5); animation:bp 1.1s ease-in-out infinite; } @keyframes bp { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} } /* Entrance animation — transform-only so content is ALWAYS visible (opacity never drops), even if the animation is paused or JS never adds .in. Purely decorative motion. */ @media (prefers-reduced-motion: no-preference){ .lp-reveal.in { animation: lpReveal .55s var(--ease) both; } @keyframes lpReveal { from{ transform:translateY(14px); } to{ transform:none; } } }