/* ============================================================ LumaTick Website V1 — shared design system Tokens anchored to the shipped business/index.html. Dark-first, OLED-safe, single accent per section. ============================================================ */ :root{ /* canvas + surfaces */ --bg:#070707; --panel:#0e0e0f; --panel-2:#131315; --line:rgba(255,255,255,.10); --line-soft:rgba(255,255,255,.06); /* text */ --text:#f4f4f5; --muted:#a1a1aa; --faint:#6b6b72; /* brand accents */ --accent:#FF6A3D; --accent-2:#FFC53D; --accent-ink:#0a0a0a; /* house accents */ --biz:#FF6A3D; --consumer:#4DA3FF; /* semantic */ --good:#34d399; --warn:#FFC53D; --bad:#f87171; /* radii + layout */ --radius:16px; --radius-sm:12px; --radius-pill:999px; --max:1200px; --max-read:820px; --glow:0 8px 40px rgba(0,0,0,.5); } /* secondary light theme (data-theme="light" on ) */ [data-theme="light"]{ --bg:#ffffff; --panel:#f7f7f8; --panel-2:#efeff1; --line:rgba(0,0,0,.10); --line-soft:rgba(0,0,0,.06); --text:#0b0b0c; --muted:#52525b; --faint:#9b9ba3; --accent:#E5532A; --accent-2:#B9820F; --consumer:#2563eb; --glow:0 8px 30px rgba(0,0,0,.08); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--bg);color:var(--text); font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:var(--max);margin:0 auto;padding:0 22px} .read{max-width:var(--max-read)} .center{text-align:center} .muted{color:var(--muted)} .faint{color:var(--faint)} /* ---------- typography ---------- */ h1{font-size:clamp(34px,6vw,56px);line-height:1.05;letter-spacing:-.5px;margin:14px 0 12px} h2{font-size:clamp(24px,3.4vw,34px);line-height:1.12;letter-spacing:-.3px;margin:0 0 10px} h3{margin:0 0 6px;font-size:18px;line-height:1.25} .lead{font-size:clamp(17px,2.2vw,21px);color:var(--muted);max-width:680px} .eyebrow{display:inline-block;color:var(--accent);font-weight:800;letter-spacing:2.5px; font-size:12px;text-transform:uppercase;margin-bottom:4px} .eyebrow.consumer{color:var(--consumer)} /* ---------- buttons ---------- */ .btn{display:inline-block;background:var(--accent);color:var(--accent-ink);font-weight:800; letter-spacing:.3px;padding:15px 26px;border-radius:14px;border:0;cursor:pointer; transition:transform .2s cubic-bezier(.16,1,.3,1),filter .2s} .btn:hover{transform:scale(1.02);filter:brightness(1.05)} .btn:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px} .btn.secondary{background:transparent;color:var(--text);border:1px solid var(--line)} .btn.secondary:hover{filter:none;background:var(--panel)} .btn.consumer{background:var(--consumer);color:#04101f} .btn.sm{padding:11px 18px;font-size:14px;border-radius:12px} .ctarow{display:flex;gap:12px;flex-wrap:wrap} .center .ctarow{justify-content:center} .note{margin-top:14px;font-size:13px} /* ---------- sections ---------- */ section{padding:72px 0;border-top:1px solid var(--line)} @media(min-width:1024px){section{padding:96px 0}} .hero{padding:84px 0 64px;border-top:0; background:radial-gradient(120% 90% at 50% -10%,rgba(255,106,61,.16),transparent 60%)} .hero.consumer{background:radial-gradient(120% 90% at 50% -10%,rgba(77,163,255,.16),transparent 60%)} .hero .lead{margin-left:auto;margin-right:auto;margin-bottom:26px} .kicker{font-size:14px;letter-spacing:.3px;margin:0 0 8px} /* ---------- hero fork (two named doors, with imagery) ---------- */ .fork{display:grid;gap:18px;grid-template-columns:1fr;max-width:960px;margin:28px auto 0;text-align:left} @media(min-width:820px){.fork{grid-template-columns:1.15fr 1fr}} .door{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line); border-radius:var(--radius);overflow:hidden;color:var(--text); transition:transform .2s cubic-bezier(.16,1,.3,1),border-color .2s,background .2s} .door:hover{transform:translateY(-3px);background:var(--panel-2)} .door.biz{border-color:rgba(255,106,61,.45);box-shadow:0 0 0 1px rgba(255,106,61,.18) inset} .door.biz:hover{border-color:var(--accent)} .door.apps:hover{border-color:var(--consumer)} .door .thumb{height:150px;background:#000;border-bottom:1px solid var(--line);overflow:hidden} .door .thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;display:block} .door.apps .thumb{height:auto;aspect-ratio:1.6} .door.apps .thumb img{object-fit:contain} /* real product screenshot in a device frame (apps product pages) */ .appshot{width:min(280px,76%);aspect-ratio:9/19;border-radius:28px;border:1px solid var(--line); background:#000;box-shadow:var(--glow);padding:8px;margin:0 auto} .appshot img{width:100%;height:100%;object-fit:cover;border-radius:21px;display:block} /* ambient/desk display — wide real capture, no phone-frame chrome */ .ambientshot{width:100%;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden; border:1px solid var(--line);box-shadow:var(--glow);background:#000} .ambientshot img{width:100%;height:100%;object-fit:cover;display:block} .door .door-body{display:flex;flex-direction:column;flex:1;padding:24px} .door .tag{align-self:flex-start;background:rgba(255,106,61,.14);color:var(--accent)} .door.apps .tag{background:rgba(77,163,255,.14);color:var(--consumer)} .door h2{font-size:clamp(22px,3vw,28px);margin:12px 0 8px;letter-spacing:-.3px} .door p{color:var(--muted);margin:0 0 16px} .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px} .chips span{font-size:13px;font-weight:700;border:1px solid var(--line);border-radius:var(--radius-pill); padding:5px 12px;color:var(--text)} .door.biz .chips span{border-color:rgba(255,106,61,.4)} .door.apps .chips span{border-color:rgba(77,163,255,.4)} .doorctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:auto} .doorcta2{font-weight:700;font-size:14px;color:var(--muted)} .doorcta2:hover{color:var(--text)} .doorsub{display:block;margin-top:10px;font-size:12px;color:var(--faint)} /* ---------- grids + cards ---------- */ .grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .grid.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px; transition:transform .2s cubic-bezier(.16,1,.3,1),background .2s,border-color .2s} .card:hover{transform:translateY(-2px);background:var(--panel-2);border-color:rgba(255,106,61,.35)} .card p:last-child{margin-bottom:0} /* split feature row */ .split{display:grid;gap:32px;align-items:center;grid-template-columns:1fr} @media(min-width:900px){.split{grid-template-columns:1fr 1fr}.split.rev .copy{order:2}} .split .art{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius); min-height:240px;display:grid;place-items:center;padding:24px} /* steps */ .steps{counter-reset:s;display:grid;gap:14px;max-width:var(--max-read)} .step{display:flex;gap:14px;align-items:flex-start} .step .n{flex:0 0 34px;height:34px;border-radius:10px;background:rgba(255,106,61,.14); color:var(--accent);font-weight:800;display:grid;place-items:center} /* tags / badges */ .tag{display:inline-block;background:rgba(255,197,61,.14);color:var(--accent-2); font-weight:800;font-size:12px;letter-spacing:1px;padding:4px 10px;border-radius:8px} /* ---------- pricing ---------- */ .plans{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); max-width:760px;margin:0 auto;text-align:left} .plan{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px} .plan.hi{border-color:rgba(255,106,61,.55);box-shadow:0 0 0 1px rgba(255,106,61,.25) inset} .price{font-size:40px;font-weight:900;letter-spacing:-1px} .price small{font-size:14px;font-weight:600;color:var(--muted)} .plan ul{list-style:none;padding:0;margin:14px 0 0} .plan li{padding:6px 0 6px 22px;position:relative} .plan li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:800} .plan li.off{color:var(--faint)} .plan li.off::before{content:"—";color:var(--faint)} /* feature matrix */ .matrix{width:100%;border-collapse:collapse;margin-top:10px;font-size:15px} .matrix th,.matrix td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left} .matrix thead th{background:var(--panel-2);font-size:13px;color:var(--muted)} .matrix td.c{text-align:center} .matrix .yes{color:var(--accent);font-weight:800} .matrix .no{color:var(--faint)} .matrix col.hi,.matrix th.hi{background:rgba(255,106,61,.06)} .matrix-scroll{overflow-x:auto} /* ---------- faq ---------- */ details{background:var(--panel);border:1px solid var(--line);border-radius:12px; padding:14px 18px;margin:10px 0} summary{cursor:pointer;font-weight:700;list-style:none} summary::-webkit-details-marker{display:none} summary::after{content:"+";float:right;color:var(--accent);font-weight:800} details[open] summary::after{content:"–"} details p{color:var(--muted);margin:8px 0 0} /* ---------- nav ---------- */ .nav{position:sticky;top:0;z-index:50;background:rgba(7,7,7,.72); backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)} [data-theme="light"] .nav{background:rgba(255,255,255,.72)} .nav .wrap{display:flex;align-items:center;gap:18px;height:64px} .nav .brand{font-weight:900;letter-spacing:-.3px;font-size:18px} .nav .brand span{color:var(--accent)} .nav .links{display:none;gap:2px;margin-left:8px;list-style:none;padding:0;align-items:center} .nav .links>li{position:relative} .nav .links a,.nav .menu-trigger{display:inline-block;color:var(--muted);font-weight:600;font-size:15px; background:none;border:0;cursor:pointer;padding:8px 11px;font-family:inherit;border-radius:8px} .nav .links>li>a:hover,.nav .menu-trigger:hover,.nav .menu-trigger[aria-current]{color:var(--text)} .nav .menu{position:absolute;top:calc(100% + 4px);left:0;min-width:220px;background:var(--panel); border:1px solid var(--line);border-radius:12px;padding:8px;display:none;flex-direction:column; box-shadow:var(--glow);z-index:60} .nav .has-menu:hover .menu,.nav .has-menu:focus-within .menu,.nav .has-menu.open .menu{display:flex} .nav .menu .menu-h{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--faint);padding:6px 10px 4px} .nav .menu a{padding:9px 10px;border-radius:8px;font-size:14px;color:var(--text)} .nav .menu a:hover{background:var(--panel-2)} .nav .menu a.biz-cta{color:var(--accent);font-weight:800} .nav .menu a.apps-cta{color:var(--consumer);font-weight:800} .nav .spacer{flex:1} .nav .navcta{display:none} .nav .burger{margin-left:auto;background:transparent;border:1px solid var(--line); color:var(--text);border-radius:10px;padding:8px 12px;cursor:pointer;font-size:18px;line-height:1} @media(min-width:980px){ .nav .links{display:flex}.nav .navcta{display:inline-block}.nav .burger{display:none} } /* mobile sheet groups */ .sheet .grp{margin-bottom:6px} /* mobile sheet */ .sheet{display:none;position:fixed;inset:64px 0 0;z-index:49;background:var(--bg); padding:24px 22px;overflow:auto} .sheet.open{display:block} .sheet h4{color:var(--faint);font-size:12px;letter-spacing:2px;text-transform:uppercase;margin:18px 0 8px} .sheet a{display:block;padding:10px 0;font-weight:700;font-size:18px;border-bottom:1px solid var(--line-soft)} /* sticky mobile CTA */ .stickycta{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:12px 16px; background:linear-gradient(transparent,var(--bg) 30%);transform:translateY(120%); transition:transform .4s cubic-bezier(.16,1,.3,1)} .stickycta.show{transform:translateY(0)} .stickycta .btn{display:block;text-align:center} @media(min-width:920px){.stickycta{display:none}} /* ---------- footer ---------- */ .footer{border-top:1px solid var(--line);padding:48px 0 32px;color:var(--muted)} .footcols{display:grid;gap:28px;grid-template-columns:repeat(2,1fr)} @media(min-width:760px){.footcols{grid-template-columns:repeat(4,1fr)}} .footcols h5{color:var(--text);font-size:13px;letter-spacing:1px;text-transform:uppercase;margin:0 0 10px} .footcols a{display:block;padding:5px 0;color:var(--muted);font-size:14px} .footcols a:hover{color:var(--text)} .footbar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; margin-top:32px;padding-top:20px;border-top:1px solid var(--line);font-size:13px} /* ---------- device frame + svg helpers ---------- */ .device{width:min(300px,80vw);aspect-ratio:9/19;border-radius:30px;border:1px solid var(--line); background:#000;box-shadow:var(--glow);padding:10px;margin:0 auto} .device .screen{width:100%;height:100%;border-radius:22px;overflow:hidden;background:var(--bg); display:flex;flex-direction:column} .placeholder{display:inline-block;background:rgba(255,197,61,.10);color:var(--accent-2); border:1px dashed rgba(255,197,61,.4);border-radius:8px;padding:2px 8px;font-size:12px;font-weight:700} /* ---------- screenshot gallery ---------- */ .shots{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:24px} @media(max-width:680px){ .shots{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory; margin-inline:-22px;padding:0 22px 8px;scrollbar-width:none} .shots::-webkit-scrollbar{display:none} .shot{flex:0 0 78%;scroll-snap-align:center} } .shot{margin:0} .shotframe{position:relative;aspect-ratio:16/9;border-radius:var(--radius);border:1px solid var(--line); background:#000;box-shadow:var(--glow);overflow:hidden} .shotframe img{width:100%;height:100%;object-fit:cover;display:block} .shot figcaption{margin-top:12px} .shot figcaption strong{display:block;font-size:15px} .shot figcaption span{display:block;color:var(--muted);font-size:13px;margin-top:2px} /* ---------- motion ---------- */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .4s ease,transform .4s cubic-bezier(.16,1,.3,1)} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} .reveal{opacity:1;transform:none} }