/* ══════════════════════════════════════════════════════════════════════════ Lev Fitness — public marketing site (www.lev.fit) Nocturne single-theme dark system. Self-contained; no dependency on the app. Visual vocabulary adapted from the shipped landing (design/prototypes/nocturne-landing-premium.html), rebuilt as a static page. Progressive enhancement: every section is fully composed and visible with JavaScript disabled. The hidden "pre-reveal" states are gated behind the `.js` class (set in before paint); main.js then choreographs the reveal, and a failsafe reveals everything if main.js never runs. ══════════════════════════════════════════════════════════════════════════ */ :root { --bg-page:#05080C; --bg-card:#131A22; --bg-card-2:#1B242E; --hairline:rgba(255,255,255,0.07); --text-hi:#F4F7F9; --text-mid:#98A5B3; --text-low:#5F6B77; --accent:#7CC8ED; --accent-chart:#4FB2E5; --accent-soft:rgba(124,200,237,0.14); --accent-fill:#A9D7F2; --on-accent:#0A1620; --good:#53C97D; --warn:#E3B341; --bad:#E0655F; --r:16px; --ease:cubic-bezier(0.32,0.72,0,1); --sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,'Segoe UI',sans-serif; /* semantic z-scale — no arbitrary 999s */ --z-nav:50; --z-cue:40; --z-skip:100; } * { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body { font-family:var(--sans); color:var(--text-hi); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.6; background: radial-gradient(42% 30% at 18% 10%, rgba(79,178,229,0.13) 0%, transparent 100%), radial-gradient(50% 34% at 88% 32%, rgba(46,97,136,0.18) 0%, transparent 100%), radial-gradient(46% 30% at 30% 72%, rgba(31,111,102,0.11) 0%, transparent 100%), var(--bg-page); background-attachment:fixed; overflow-x:hidden; } img { max-width:100%; display:block; } a { color:inherit; text-decoration:none; } ::selection { background:rgba(124,200,237,0.28); color:#fff; } .wrap { max-width:1180px; margin:0 auto; padding:0 clamp(18px,4vw,22px); } /* ── Accessibility: skip link + visible focus ─────────────────────────────── */ .skip-link { position:fixed; left:14px; top:-60px; z-index:var(--z-skip); background:var(--accent-fill); color:var(--on-accent); padding:10px 16px; border-radius:10px; font-weight:700; font-size:13px; transition:top .2s var(--ease); } .skip-link:focus { top:14px; } a:focus-visible, button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; } /* ── Buttons (pills) ──────────────────────────────────────────────────────── */ .pill { display:inline-flex; align-items:center; justify-content:center; gap:9px; border:none; cursor:pointer; font-family:inherit; text-align:center; background:var(--accent-fill); color:var(--on-accent); border-radius:999px; font-size:14px; font-weight:700; letter-spacing:0.01em; padding:14px 28px; white-space:nowrap; transition:transform .3s var(--ease), filter .3s var(--ease); will-change:transform; } .pill:hover { transform:translateY(-2px); filter:brightness(1.06); } .pill:active { transform:scale(.97); } .pill .arrow { transition:transform .3s var(--ease); } .pill:hover .arrow { transform:translateX(3px); } .pill.ghost { background:rgba(255,255,255,0.08); color:var(--text-hi); font-weight:600; } .pill.ghost:hover { filter:brightness(1.25); } .pill.sm { padding:9px 18px; font-size:12.5px; } /* ── Condensing sticky nav ────────────────────────────────────────────────── */ .navbar { position:sticky; top:0; z-index:var(--z-nav); padding:14px 0; border-bottom:1px solid transparent; transition:background .3s var(--ease), border-color .3s var(--ease); } .navbar.scrolled { background:rgba(5,8,12,0.72); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom-color:var(--hairline); } .navbar .wrap { display:flex; justify-content:space-between; align-items:center; gap:16px; } .navmark { height:30px; width:auto; } /* ── Hero ─────────────────────────────────────────────────────────────────── */ .hero { position:relative; padding:clamp(40px,7vw,60px) 0 clamp(84px,12vw,116px); overflow:hidden; } /* outer .aurora = parallax host (JS writes transform); inner carries Ken Burns */ .aurora { position:absolute; inset:-20% -10%; pointer-events:none; overflow:hidden; will-change:transform; } .aurora-img { position:absolute; inset:0; background-image:url('/static/aurora.jpg'); background-position:center right; background-size:cover; background-repeat:no-repeat; opacity:.62; will-change:transform; animation:kenburns 16s ease-in-out infinite alternate; } /* phones get the lighter 48KB aurora instead of the 229KB full-res */ @media (max-width:760px) { .aurora-img { background-image:url('/static/aurora-960.jpg'); } } @keyframes kenburns { from { transform:scale(1) translate(0,0); } to { transform:scale(1.18) translate(-4.5%,3%); } } .aurora-img::before, .aurora-img::after { content:''; position:absolute; inset:0; } .aurora-img::before { background: radial-gradient(38% 42% at 22% 18%, rgba(79,178,229,0.35) 0%, transparent 100%), radial-gradient(44% 48% at 82% 30%, rgba(46,97,136,0.35) 0%, transparent 100%); animation:wash 10s ease-in-out infinite alternate; } .aurora-img::after { background:radial-gradient(36% 40% at 55% 92%, rgba(31,111,102,0.50) 0%, transparent 100%); animation:wash 14s ease-in-out infinite alternate-reverse; } @keyframes wash { from { transform:translate3d(-8%,-8%,0) scale(1); opacity:.55; } to { transform:translate3d(8%,8%,0) scale(1.08); opacity:1; } } .hero > .wrap { position:relative; display:grid; gap:clamp(36px,6vw,48px); align-items:center; } /* let grid children shrink below their content's intrinsic width (prevents a long headline word from forcing the column — and the page — wider than 360px) */ .hero > .wrap > * { min-width:0; } .hero > .wrap::before { content:''; position:absolute; inset:-40px -20px; z-index:-1; pointer-events:none; background:radial-gradient(60% 70% at 22% 40%, rgba(5,8,12,0.55) 0%, transparent 100%); } @media (min-width:900px) { .hero > .wrap { grid-template-columns:1.15fr 0.85fr; } } .eyebrow-chip { display:inline-block; font-size:10px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); padding:7px 14px; border-radius:999px; margin-bottom:26px; } .hero h1 { font-size:clamp(30px,7.4vw,74px); font-weight:400; letter-spacing:-0.03em; line-height:1.05; text-wrap:balance; overflow-wrap:break-word; } .hero h1 b { font-weight:800; color:var(--accent); letter-spacing:-0.028em; } .hline { display:block; } .hero p.sub { font-size:clamp(16px,2vw,17.5px); line-height:1.65; color:var(--text-mid); max-width:60ch; margin:26px 0 34px; text-wrap:pretty; } .cta-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; } .micro { margin-top:20px; font-size:12.5px; font-weight:600; color:var(--text-low); letter-spacing:0.02em; } .micro b { color:var(--text-mid); } /* scroll-to-discover cue */ .scroll-cue { position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:var(--z-cue); display:flex; flex-direction:column; align-items:center; gap:10px; font-size:9px; font-weight:700; letter-spacing:0.3em; text-indent:0.3em; color:var(--text-low); text-transform:uppercase; transition:opacity .5s var(--ease); } .scroll-cue .line { width:1px; height:36px; background:var(--hairline); position:relative; overflow:hidden; } .scroll-cue .line::after { content:''; position:absolute; left:0; top:-100%; width:1px; height:100%; background:var(--accent); animation:cue 2.4s var(--ease) infinite; } @keyframes cue { 0%{top:-100%} 55%{top:100%} 100%{top:100%} } .scroll-cue.hide { opacity:0; } @media (max-width:640px) { .scroll-cue { display:none; } } /* ── Hero phone preview (decorative; stylized product vocabulary) ─────────── */ .phone-wrap { will-change:transform; } .phone-frame { width:min(300px,86vw); margin:0 auto; border-radius:44px; padding:12px; background:#0A1119; border:1px solid rgba(255,255,255,0.1); box-shadow:0 30px 80px rgba(0,0,0,0.55); } .phone-scr { border-radius:34px; overflow:hidden; background:var(--bg-page); padding:18px 12px 22px; } .p-word { text-align:center; margin-bottom:14px; } .p-word img { height:12px; width:auto; margin:0 auto; opacity:.92; } .p-hero { border-radius:14px; text-align:center; padding:18px 14px 20px; background-size:180% 180%; background-image: radial-gradient(120% 90% at 15% 0%, rgba(37,99,128,0.55) 0%, transparent 55%), radial-gradient(130% 100% at 90% 10%, rgba(30,58,95,0.6) 0%, transparent 60%); background-color:#0E1620; animation:drift 26s ease-in-out infinite alternate; } @keyframes drift { from{background-position:0% 0%} to{background-position:60% 45%} } .p-hero .cap { font-size:9px; font-weight:600; letter-spacing:0.14em; color:rgba(244,247,249,0.85); } .p-gauge { position:relative; width:150px; margin:8px auto 0; } .p-gauge svg { display:block; } #arc { stroke-dasharray:204; stroke-dashoffset:35; transition:stroke-dashoffset 1.1s var(--ease); } .p-num { position:absolute; left:0; right:0; top:32px; font-size:44px; font-weight:400; line-height:1; font-variant-numeric:tabular-nums; } .p-state { position:absolute; left:0; right:0; top:80px; font-size:11px; font-weight:600; color:rgba(244,247,249,0.9); } .p-line { font-size:13.5px; font-weight:700; margin-top:10px; } .p-body { font-size:10.5px; line-height:1.5; color:var(--text-mid); margin-top:5px; } .p-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:8px; } .p-card { background:var(--bg-card); border-radius:11px; padding:10px; } .p-card .l { font-size:9px; font-weight:500; color:var(--text-mid); } .p-card .v { font-size:15px; font-weight:500; margin-top:4px; } .p-card .v small { font-size:8.5px; color:var(--text-low); } .p-card .d { font-size:8px; font-weight:600; margin-top:3px; } /* ── Stat band ────────────────────────────────────────────────────────────── */ .stats { display:grid; grid-template-columns:1fr 1fr; gap:34px 22px; padding:10px 0 clamp(56px,10vw,82px); } @media (min-width:820px) { .stats { grid-template-columns:repeat(4,1fr); } } .stat .big { font-size:clamp(46px,6vw,66px); font-weight:400; letter-spacing:-0.03em; line-height:1; font-variant-numeric:tabular-nums; } .stat .big em { font-style:normal; color:var(--accent); font-weight:400; } .stat .lbl { font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-mid); margin-top:12px; max-width:180px; line-height:1.5; } /* ── Sections + kicker ────────────────────────────────────────────────────── */ section { padding:clamp(56px,9vw,80px) 0; position:relative; } .kicker { font-size:10px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; } h2 { font-size:clamp(28px,4.4vw,44px); font-weight:400; letter-spacing:-0.025em; line-height:1.12; max-width:18ch; text-wrap:balance; } h2 b { font-weight:700; } .sec-sub { font-size:15px; line-height:1.65; color:var(--text-mid); max-width:60ch; margin-top:16px; text-wrap:pretty; } /* ── Feature chapters (sticky-stack; a real numbered sequence — the 4 pillars) ── */ .stack { margin-top:52px; display:grid; gap:22px; } .chapter { position:sticky; top:88px; border-radius:20px; padding:38px 26px 34px; overflow:hidden; background-color:#0A1119; background-size:cover; background-repeat:no-repeat; border:1px solid var(--hairline); transform-origin:top center; will-change:transform, opacity; } .chapter .scrim { position:absolute; inset:0; pointer-events:none; background:linear-gradient(100deg, rgba(7,11,16,0.82) 0%, rgba(7,11,16,0.60) 52%, rgba(7,11,16,0.24) 100%); } .chapter > *:not(.scrim) { position:relative; } .ch-train { background-image:url('/static/athlete-lunge.jpg'); background-position:center right; } .ch-meds { background-image:url('/static/silk.jpg'); background-position:center; } .ch-signal { background-image:url('/static/silk-pulse.jpg'); background-position:right center; background-size:120%; } .ch-report { background-image:url('/static/stethoscope.jpg'); background-position:center right; } @media (min-width:800px) { .chapter { padding:46px 44px 42px; } } .chapter > .ghost { position:absolute; top:-14px; right:14px; font-size:clamp(96px,15vw,180px); font-weight:400; line-height:1; color:rgba(255,255,255,0.045); pointer-events:none; user-select:none; letter-spacing:-0.04em; } .ch-eyebrow { font-size:10px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; } .ch-eyebrow .idx { color:var(--text-low); margin-right:10px; } .chapter h3 { font-size:clamp(22px,3vw,30px); font-weight:400; letter-spacing:-0.02em; margin-bottom:26px; text-wrap:balance; } .chapter h3 b { font-weight:700; } .ch-body { display:grid; gap:30px; } @media (min-width:800px) { .ch-body { grid-template-columns:1.1fr 0.9fr; align-items:center; gap:40px; } } .ch-feats { display:grid; gap:22px; } .feat svg { width:26px; height:26px; color:var(--accent); margin-bottom:14px; } .feat h4 { font-size:16.5px; font-weight:700; margin-bottom:8px; letter-spacing:-0.01em; } .feat p { font-size:13.5px; line-height:1.62; color:var(--text-mid); max-width:44ch; text-wrap:pretty; } /* sample screens — the hero phone's vocabulary at compact scale */ .ch-screen { display:flex; justify-content:center; } .mini-phone { width:230px; border-radius:26px; padding:9px; background:#0A1119; border:1px solid rgba(255,255,255,0.1); box-shadow:0 20px 50px rgba(0,0,0,0.5); } @media (max-width:799px) { .mini-phone { width:200px; } } .mini-scr { border-radius:18px; background:var(--bg-card); padding:16px 14px 15px; font-size:12px; } .mini-cap { font-size:9.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-mid); margin-bottom:12px; } .mp-exname { font-size:13.5px; font-weight:700; margin-bottom:2px; } .mp-exsub { font-size:11px; color:var(--text-mid); margin-bottom:14px; } .mp-pips { display:flex; gap:6px; margin-bottom:18px; } .mp-pips span { width:22px; height:4px; border-radius:2px; background:rgba(255,255,255,0.12); } .mp-pips span.on { background:var(--accent); } .mp-rest { position:relative; width:52px; margin:0 auto; } .mp-rest svg { display:block; } .mp-resttime { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; } .mp-dose { font-size:32px; font-weight:400; letter-spacing:-0.02em; margin:4px 0 2px; font-variant-numeric:tabular-nums; } .mp-dose small { font-size:13px; color:var(--text-mid); font-weight:500; } .mp-dosesub { font-size:11px; color:var(--text-mid); margin-bottom:16px; } .mp-btnrow { display:flex; gap:8px; } .mp-mini-pill { flex:1; text-align:center; font-size:10.5px; font-weight:700; padding:8px 0; border-radius:999px; background:var(--accent-fill); color:var(--on-accent); } .mp-mini-pill.ghost { background:rgba(255,255,255,0.08); color:var(--text-hi); } .mp-weight { font-size:27px; font-weight:400; letter-spacing:-0.01em; margin:4px 0 2px; font-variant-numeric:tabular-nums; } .mp-weight small { font-size:12px; color:var(--text-mid); font-weight:500; } .mp-delta { font-size:11.5px; font-weight:600; color:var(--good); margin-bottom:14px; } .mp-spark { display:block; } .mp-doc { margin-top:2px; } .mp-docrow { display:flex; justify-content:space-between; align-items:center; font-size:12.5px; font-weight:600; padding:9px 0; border-bottom:1px solid var(--hairline); } .mp-docrow:last-child { border-bottom:none; } .mp-docrow .tick { color:var(--good); font-weight:700; } .mp-mini-pill.block { display:block; margin-top:14px; } /* ── GLP-1 band ───────────────────────────────────────────────────────────── */ .band { border-radius:20px; padding:44px 26px; background:linear-gradient(160deg,#1C3A57 0%,#274F74 55%,#2E6188 100%); background-size:130% 130%; display:grid; gap:24px; will-change:background-position; } @media (min-width:800px) { .band { grid-template-columns:1fr auto; align-items:center; padding:48px 44px; } } .band h3 { font-size:clamp(24px,3.4vw,32px); font-weight:700; letter-spacing:-0.02em; margin-bottom:8px; text-wrap:balance; } .band p { font-size:14.5px; line-height:1.6; color:rgba(244,247,249,0.82); max-width:56ch; text-wrap:pretty; } /* ── Support ──────────────────────────────────────────────────────────────── */ .support { max-width:640px; } .support h2 { max-width:20ch; } .support .sec-sub { margin-bottom:28px; } .support-contacts { display:grid; gap:14px; } @media (min-width:560px) { .support-contacts { grid-template-columns:1fr 1fr; } } .contact-card { border:1px solid var(--hairline); border-radius:var(--r); padding:22px 22px 24px; background-color:rgba(19,26,34,0.5); background-image:linear-gradient(180deg,rgba(255,255,255,0.04),transparent 42%); transition:border-color .3s var(--ease); } .contact-card:hover { border-color:rgba(255,255,255,0.12); } .contact-card .lbl { font-size:10px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-low); margin-bottom:10px; } .contact-card .email { font-size:clamp(17px,2.6vw,20px); font-weight:700; color:var(--accent); letter-spacing:-0.01em; } .contact-card .email:hover { filter:brightness(1.12); } .contact-card .hint { font-size:12.5px; color:var(--text-mid); margin-top:8px; line-height:1.5; } /* ── Footer ───────────────────────────────────────────────────────────────── */ footer { border-top:1px solid var(--hairline); padding:56px 0 40px; margin-top:24px; } .foot-grid { display:grid; gap:36px; margin-bottom:40px; } @media (min-width:760px) { .foot-grid { grid-template-columns:1.4fr 1fr; align-items:start; } } .foot-brand { position:relative; } .footmark { width:150px; height:auto; margin:-10px 0 6px -8px; position:relative; } /* heart-pulse halo — a quiet closing heartbeat (Lev = Hebrew for heart) */ .foot-halo { position:absolute; left:63px; top:52px; width:120px; height:120px; margin:-60px 0 0 -60px; border-radius:50%; pointer-events:none; z-index:0; background:radial-gradient(circle, rgba(124,200,237,0.16) 0%, transparent 68%); animation:heartpulse 3.4s ease-in-out infinite; } @keyframes heartpulse { 0%,100% { transform:scale(0.86); opacity:0.35; } 45% { transform:scale(1.08); opacity:0.8; } } .foot-brand p { font-size:13.5px; line-height:1.7; color:var(--text-mid); max-width:44ch; position:relative; } .foot-label { font-size:10px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-low); margin-bottom:14px; } .legalnote { font-size:12px; line-height:1.7; color:var(--text-mid); max-width:52ch; } .legalnote strong { color:var(--text-hi); } .legalnote + .legalnote { margin-top:8px; } .foot-base { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 20px; padding-top:22px; border-top:1px solid var(--hairline); } .foot-base p { font-size:11.5px; color:var(--text-low); } .foot-base .identity { color:var(--text-mid); font-weight:600; } .foot-base .tagline { letter-spacing:0.14em; text-transform:uppercase; font-weight:700; color:var(--text-mid); } /* ══════════════════════════════════════════════════════════════════════════ Motion gating — hidden pre-states apply ONLY when `.js` is present. Without JS the page is fully composed and visible. ══════════════════════════════════════════════════════════════════════════ */ .js .stage { opacity:0; transform:translateY(14px); transition:opacity .65s var(--ease), transform .65s var(--ease); } .js body.in .stage { opacity:1; transform:none; } .js .p-card { opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .5s var(--ease); } .js body.in .p-card { opacity:1; transform:none; } .js #arc { stroke-dashoffset:204; } .js body.in #arc { stroke-dashoffset:35; } .js body.in .phone-frame { animation:float 7s ease-in-out 1.6s infinite alternate; } @keyframes float { from{transform:translateY(0)} to{transform:translateY(-6px)} } .js .rv { opacity:0; transform:translateY(18px); transition:opacity .65s var(--ease), transform .65s var(--ease); } .js .rv.on { opacity:1; transform:none; } /* ── Reduced motion: composed final state, no movement ────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } * { transition:none !important; animation:none !important; } .js .stage, .js .rv, .js .p-card { opacity:1 !important; transform:none !important; } #arc, .js #arc, .js body.in #arc { stroke-dashoffset:35 !important; } .chapter { position:static !important; transform:none !important; opacity:1 !important; } .scroll-cue { display:none !important; } .foot-halo { display:none !important; } }