/* luxury.host — Private Beta page Dual visual direction, switchable via [data-theme] on : • aurora → deep navy, amber/violet aurora, Clash Display (default) • daylight → warm paper, coral/lavender/peach, Instrument Serif */ @import url("https://api.fontshare.com/v2/css?f[]=clash-display@500,600,700&f[]=cabinet-grotesk@500,600,700&f[]=satoshi@400,500,600,700&f[]=general-sans@400,500,600,700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&family=Geist+Mono:wght@400;500&display=swap"); /* ============ TOKENS ============ */ :root { /* Aurora (default) */ --bg: #070b13; --bg-2: #0b1120; --surface: rgba(255,255,255,0.035); --surface-2: rgba(255,255,255,0.06); --line: rgba(255,255,255,0.09); --line-strong: rgba(255,255,255,0.18); --ink-0: #f8fafc; --ink-1: #cbd5e1; --ink-2: #94a3b8; --ink-3: #64748b; --accent: #f5b012; /* gold */ --accent-2: #fcd34d; /* bright yellow */ --accent-3: #f59e0b; /* amber */ --btn-bg: #ffffff; --btn-ink: #0b1020; --f-display: "Clash Display","Cabinet Grotesk",ui-sans-serif,system-ui,sans-serif; --f-head: "Cabinet Grotesk","Clash Display",ui-sans-serif,system-ui,sans-serif; --f-body: "Satoshi","Inter Tight",ui-sans-serif,system-ui,sans-serif; --f-mono: "JetBrains Mono",ui-monospace,monospace; --display-italic: normal; --radius: 20px; } html[data-theme="daylight"] { --bg: #fbf8f4; --bg-2: #f4f0e9; --surface: #ffffff; --surface-2: #ffffff; --line: rgba(10,10,12,0.09); --line-strong: rgba(10,10,12,0.16); --ink-0: #0a0a0c; --ink-1: #35343b; --ink-2: #6b6975; --ink-3: #97949e; --accent: #d69a12; /* gold */ --accent-2: #eab308; /* yellow */ --accent-3: #f0b84a; /* soft amber */ --btn-bg: #0a0a0c; --btn-ink: #fbf8f4; --f-display: "Instrument Serif",ui-serif,Georgia,serif; --f-head: "General Sans",ui-sans-serif,system-ui,sans-serif; --f-body: "General Sans",ui-sans-serif,system-ui,sans-serif; --f-mono: "Geist Mono",ui-monospace,monospace; --display-italic: normal; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--ink-0); font-family: var(--f-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; transition: background .5s ease, color .5s ease; } ::selection { background: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--ink-0); } a { color: var(--accent); text-decoration: none; } a:hover { color: color-mix(in srgb, var(--accent) 72%, var(--ink-0)); } .wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 6vw; } /* ============ SHARED TYPE ============ */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); font-weight: 500; } html[data-theme="daylight"] .eyebrow { font-weight: 600; } .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); } h1,h2,h3 { margin: 0; } .display { font-family: var(--f-display); font-weight: 600; font-style: var(--display-italic); letter-spacing: -0.03em; line-height: 0.98; } html[data-theme="daylight"] .display { font-weight: 400; letter-spacing: -0.02em; line-height: 1.02; } .grad { background: linear-gradient(105deg, var(--accent), var(--accent-2) 55%, var(--accent-3)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } html[data-theme="daylight"] .grad em, .display em { font-style: italic; } /* ============ BUTTONS ============ */ .btn { display: inline-flex; align-items: center; gap: 9px; padding: 15px 26px; border-radius: 999px; font-family: var(--f-body); font-weight: 600; font-size: 15px; letter-spacing: -0.005em; border: 1px solid transparent; cursor: pointer; transition: transform .18s ease, background .2s, border-color .2s, color .2s, box-shadow .3s; text-decoration: none; white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--btn-bg); color: var(--btn-ink); box-shadow: 0 14px 40px -14px color-mix(in srgb, var(--accent) 60%, transparent); } .btn-primary:hover { box-shadow: 0 20px 52px -14px color-mix(in srgb, var(--accent) 75%, transparent); color: var(--btn-ink); } .btn-ghost { background: transparent; color: var(--ink-0); border-color: var(--line-strong); } .btn-ghost:hover { border-color: var(--ink-2); color: var(--ink-0); } .btn-accent { background: linear-gradient(105deg, var(--accent), var(--accent-3)); color: #fff; box-shadow: 0 16px 44px -14px color-mix(in srgb, var(--accent) 75%, transparent); } .btn-lg { padding: 18px 34px; font-size: 16px; } /* ============ NAV ============ */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 16px 6vw; transition: background .4s, backdrop-filter .4s, border-color .4s, padding .4s; border-bottom: 1px solid transparent; } .nav.scrolled { background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border-bottom-color: var(--line); padding-top: 12px; padding-bottom: 12px; } .brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink-0); } .brand:hover { color: var(--ink-0); } .brand .wm { font-family: var(--f-head); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; } html[data-theme="daylight"] .brand .wm { font-weight: 600; } .brandmark { width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto; background: radial-gradient(circle at 32% 28%, #ffd9b0 0%, var(--accent) 34%, var(--accent-2) 70%, var(--accent-3) 100%); box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--accent) 70%, transparent); } .beta-pill { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; font-weight: 600; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .nav-cta { display: flex; align-items: center; gap: 14px; } .nav-cta .btn { padding: 10px 18px; font-size: 13.5px; } .nav-note { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; } @media (max-width: 720px){ .nav-note { display:none; } } /* ============ HERO ============ */ .hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 150px 6vw 90px; overflow: hidden; } .hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; } #hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s; } /* aurora blobs */ .aurora { position: absolute; inset: -20%; filter: blur(70px); opacity: 0; transition: opacity .6s; } .aurora b { position: absolute; border-radius: 50%; display: block; mix-blend-mode: screen; } html[data-theme="daylight"] .aurora { mix-blend-mode: multiply; opacity: 0; } html[data-theme="daylight"] .aurora b { mix-blend-mode: multiply; } .aurora .a1 { width: 44vw; height: 44vw; left: 2%; top: 4%; background: radial-gradient(circle, color-mix(in srgb,var(--accent) 60%,transparent), transparent 65%); } .aurora .a2 { width: 40vw; height: 40vw; right: 4%; top: 14%; background: radial-gradient(circle, color-mix(in srgb,var(--accent-2) 55%,transparent), transparent 65%); } .aurora .a3 { width: 46vw; height: 40vw; left: 30%; bottom: -6%; background: radial-gradient(circle, color-mix(in srgb,var(--accent-3) 50%,transparent), transparent 62%); } /* blueprint grid */ .gridfx { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 62px 62px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, black 20%, transparent 78%); mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, black 20%, transparent 78%); } .gridfx::after { content:""; position:absolute; left:50%; top:40%; width:820px; height:820px; transform: translate(-50%,-50%); background: radial-gradient(circle, color-mix(in srgb,var(--accent) 22%,transparent) 0%, transparent 60%); filter: blur(30px); } /* which effect shows */ .hero[data-fx="constellation"] #hero-canvas { opacity: 1; } .hero[data-fx="aurora"] .aurora { opacity: .8; } html[data-theme="daylight"] .hero[data-fx="aurora"] .aurora { opacity: .55; } .hero[data-fx="grid"] .gridfx { opacity: 1; } .hero-content { position: relative; z-index: 2; max-width: 940px; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 15px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-1); margin-bottom: 30px; } .hero-eyebrow .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); animation: pulse 2.2s ease-in-out infinite; } @keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.45;transform:scale(.65);} } .hero h1 { font-size: clamp(46px, 7.6vw, 104px); } .hero-sub { font-size: clamp(18px, 2.1vw, 23px); color: var(--ink-1); max-width: 640px; margin: 30px 0 0; line-height: 1.5; } html[data-theme="daylight"] .hero-sub { font-family: var(--f-body); color: var(--ink-1); } .hero-ctas { display: flex; align-items: center; gap: 16px; margin-top: 40px; flex-wrap: wrap; } .hero-trust { display: flex; align-items: center; gap: 16px; margin-top: 34px; flex-wrap: wrap; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-3); } .hero-trust .sep { opacity: .4; } .hero-trust b { color: var(--accent); font-weight: 500; } /* scroll cue */ .scroll-cue { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 3; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); display: flex; flex-direction: column; align-items: center; gap: 10px; } .scroll-cue .line { width: 1px; height: 40px; background: linear-gradient(var(--ink-3), transparent); animation: cue 2s ease-in-out infinite; } @keyframes cue { 0%,100%{transform:scaleY(.4);opacity:.4;transform-origin:top;} 50%{transform:scaleY(1);opacity:1;transform-origin:top;} } /* ============ SECTION SCAFFOLD ============ */ .sec { position: relative; padding: 120px 0; } .sec-head { max-width: 760px; margin-bottom: 64px; } .sec-head h2 { font-size: clamp(34px, 4.4vw, 60px); margin-top: 20px; } .sec-head p { color: var(--ink-2); font-size: 19px; margin: 22px 0 0; max-width: 60ch; line-height: 1.55; } /* ============ POSITIONING STRIP ============ */ .manifesto { padding: 120px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; } .manifesto .big { font-family: var(--f-display); font-style: var(--display-italic); font-size: clamp(28px, 4vw, 52px); line-height: 1.18; letter-spacing: -0.02em; font-weight: 500; max-width: 20ch; } html[data-theme="daylight"] .manifesto .big { font-weight: 400; } .manifesto .big .muted { color: var(--ink-3); } .manifesto .meta { margin-top: 40px; display: flex; gap: 40px; flex-wrap: wrap; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-2); text-transform: uppercase; } .manifesto .meta b { display: block; color: var(--ink-0); font-size: 26px; font-family: var(--f-display); letter-spacing: -0.02em; text-transform: none; margin-bottom: 4px; font-weight: 600; } html[data-theme="daylight"] .manifesto .meta b { font-weight: 400; } /* ============ FEATURES ============ */ .feat-list { display: flex; flex-direction: column; gap: 26px; } .feature { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; padding: 40px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); position: relative; overflow: hidden; transition: border-color .3s, transform .3s; } .feature:hover { border-color: var(--line-strong); } .feature.rev { grid-template-columns: 1fr 1.05fr; } .feature.rev .feat-copy { order: 2; } .feat-index { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 16px; } .feat-copy h3 { font-family: var(--f-head); font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; } html[data-theme="daylight"] .feat-copy h3 { font-weight: 600; } .feat-copy p { color: var(--ink-2); font-size: 16.5px; margin: 16px 0 0; line-height: 1.6; } .feat-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .feat-tag { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.04em; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-1); background: var(--surface-2); } /* feature visual stage */ .feat-vis { border-radius: 14px; position: relative; overflow: hidden; min-height: 300px; background: linear-gradient(160deg, color-mix(in srgb,var(--accent) 10%,var(--bg-2)), var(--bg-2)); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; padding: 28px; } html[data-theme="daylight"] .feat-vis { background: linear-gradient(160deg, color-mix(in srgb,var(--accent) 8%,#fff), var(--bg-2)); } /* chat mock */ .chat { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 9px; font-size: 13px; } .chat .row { display: flex; } .chat .row, .chat .stamp { opacity: 0; transform: translateY(12px); transition: opacity .45s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1); } .chat .row.show, .chat .stamp.show { opacity: 1; transform: none; } .chat .row.out { justify-content: flex-end; } .bub.typing { display: inline-flex; gap: 4px; align-items: center; padding: 13px 14px; } .bub.typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.85); animation: tdot 1s ease-in-out infinite; } .bub.typing i:nth-child(2) { animation-delay: .15s; } .bub.typing i:nth-child(3) { animation-delay: .3s; } @keyframes tdot { 0%,100%{opacity:.35;transform:translateY(0);} 50%{opacity:1;transform:translateY(-3px);} } @media (prefers-reduced-motion: reduce){ .chat .row, .chat .stamp { transition: none; opacity: 1; transform: none; } .bub.typing i { animation: none; } } .bub { max-width: 82%; padding: 10px 13px; border-radius: 14px; line-height: 1.4; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-1); } .bub.out { background: color-mix(in srgb, var(--accent) 88%, #000); color: #fff; border-color: transparent; border-bottom-right-radius: 5px; } html[data-theme="daylight"] .bub.out { background: var(--accent); } .bub.in { border-bottom-left-radius: 5px; } .bub .lang { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.1em; opacity: .65; display: block; margin-bottom: 3px; text-transform: uppercase; } .chat .stamp { font-family: var(--f-mono); font-size: 9.5px; color: var(--ink-3); align-self: flex-end; } /* smart-lock scene (feature 02) */ .vis-lock { padding: 24px; } .lockscene { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 12px; } .lock-card { border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface-2); padding: 15px 16px; transition: border-color .4s, box-shadow .4s; } .lock-card.alert { border-color: rgba(239,68,68,0.6); box-shadow: 0 0 26px -8px rgba(239,68,68,0.5); animation: lock-shake .5s; } .lock-card.good { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 26px -8px color-mix(in srgb, var(--accent) 55%, transparent); } @keyframes lock-shake { 0%,100%{transform:none;} 20%{transform:translateX(-4px);} 40%{transform:translateX(4px);} 60%{transform:translateX(-3px);} 80%{transform:translateX(2px);} } .lock-top { display: flex; align-items: center; gap: 10px; } .lock-glyph { width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 16%, transparent); display: grid; place-items: center; flex: none; } .lock-glyph i { width: 10px; height: 8px; border-radius: 2px; background: var(--accent); position: relative; display: block; } .lock-glyph i::before { content:""; position: absolute; left: 1.5px; top: -5px; width: 7px; height: 6px; border: 1.5px solid var(--accent); border-bottom: none; border-radius: 4px 4px 0 0; } .lock-meta { flex: 1; min-width: 0; } .lock-meta b { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-0); } .lock-meta span { font-family: var(--f-mono); font-size: 9.5px; color: var(--ink-3); letter-spacing: 0.04em; } .lock-live { font-family: var(--f-mono); font-size: 8.5px; letter-spacing: 0.14em; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 5px; padding: 2px 6px; animation: pulse 2.2s ease-in-out infinite; } .lock-code { display: flex; gap: 8px; margin: 13px 0 10px; } .lock-code b { flex: 1; height: 42px; border-radius: 9px; background: var(--bg-2); border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--f-mono); font-size: 19px; font-weight: 500; color: var(--ink-0); transition: color .25s, border-color .25s; } html[data-theme="daylight"] .lock-code b { background: #fff; } .lock-card.scrambling .lock-code b { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .lock-sub { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.03em; min-height: 15px; transition: color .3s; } .lock-sub.hot { color: var(--accent); } .lock-feed { display: flex; flex-direction: column; gap: 8px; } .lf { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--line); opacity: 0; transform: translateY(14px); transition: opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1), filter .4s; } .lf.show { opacity: 1; transform: none; } .lf.show.dim { opacity: .42; filter: saturate(.5); } .lf.guest { background: color-mix(in srgb, #ef4444 7%, var(--surface-2)); border-color: rgba(239,68,68,0.35); } .lf.learn { background: color-mix(in srgb, var(--accent) 9%, var(--surface-2)); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .lf-k { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; flex: none; margin-top: 1px; } .lf-k.ok { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); } .lf-k.al { background: rgba(239,68,68,0.16); color: #ef6a6a; } .lf-k.ai { background: color-mix(in srgb, var(--accent-2) 22%, transparent); color: color-mix(in srgb, var(--accent-2) 70%, var(--ink-0)); } .lf-t b { display: block; font-weight: 600; font-size: 12.5px; color: var(--ink-0); line-height: 1.35; } .lf-t span { font-family: var(--f-mono); font-size: 10px; color: var(--ink-3); } @media (prefers-reduced-motion: reduce){ .lf { transition: none; opacity: 1; transform: none; } .lock-live { animation: none; } } /* ops timeline mock */ .ops { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 0; position: relative; } .ops::before { content:""; position:absolute; left: 27px; top: 16px; bottom: 16px; width: 2px; background: var(--line); } .ops-node { display: flex; gap: 16px; padding: 9px 0; position: relative; font-size: 13px; align-items: flex-start; } .ops-node .pin { min-width: 56px; height: 26px; padding: 0 4px; border-radius: 999px; flex: 0 0 auto; background: var(--bg-2); border: 1.5px solid var(--accent); z-index: 1; display: grid; place-items: center; font-family: var(--f-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.02em; } .ops-node .oc { padding-top: 3px; } .ops-node .oc b { display: block; color: var(--ink-0); font-weight: 600; } .ops-node .oc span { color: var(--ink-3); font-family: var(--f-mono); font-size: 10.5px; } /* lifecycle animation variants */ .ops::after { content:""; position:absolute; left:27px; top:16px; width:2px; height:calc(100% - 32px); background:linear-gradient(var(--accent), var(--accent-3)); transform-origin:top; transform:scaleY(var(--fill,0)); transition:transform .8s cubic-bezier(.4,0,.2,1); } .ops-node .pin { position:relative; transition:background .4s, color .4s, box-shadow .4s, border-color .4s; } .ops[data-anim="cascade"] .ops-node, .ops[data-anim="journey"] .ops-node { opacity:.32; transition:opacity .5s; } .ops[data-anim="cascade"] .ops-node.on, .ops[data-anim="cascade"] .ops-node.done, .ops[data-anim="journey"] .ops-node.on, .ops[data-anim="journey"] .ops-node.done { opacity:1; } .ops .ops-node.on .pin { background:var(--accent); color:var(--btn-ink); border-color:var(--accent); box-shadow:0 0 20px color-mix(in srgb, var(--accent) 70%, transparent); } html[data-theme="aurora"] .ops .ops-node.on .pin { color:#0b1020; } .ops .ops-node.on .pin::after { content:""; position:absolute; inset:-3px; border-radius:999px; border:1.5px solid var(--accent); animation:ops-ripple 1.2s ease-out infinite; } @keyframes ops-ripple { 0%{transform:scale(1);opacity:.8;} 100%{transform:scale(1.7);opacity:0;} } .ops[data-anim="feed"] .ops-node { opacity:0; transform:translateY(18px); transition:opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1); } .ops[data-anim="feed"] .ops-node.show { opacity:1; transform:none; } .ops[data-anim="feed"]::after { display:none; } .ops-dot { position:absolute; left:27px; top:16px; width:11px; height:11px; border-radius:50%; background:var(--accent); box-shadow:0 0 18px var(--accent); transform:translateX(-4.5px); transition:top 1s cubic-bezier(.45,0,.25,1), opacity .3s; z-index:2; opacity:0; pointer-events:none; } .ops[data-anim="journey"] .ops-dot { opacity:1; } @media (prefers-reduced-motion: reduce){ .ops::after, .ops-dot { transition:none; } .ops .ops-node.on .pin::after { animation:none; } } /* before/after comparison slider */ .vis-ba { padding: 20px; } .ba { position: relative; width: 100%; max-width: 330px; aspect-ratio: 3/4; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); cursor: ew-resize; user-select: none; touch-action: none; --pos: 50%; box-shadow: 0 24px 60px -30px rgba(0,0,0,0.55); } .ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .ba-before-wrap { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 calc(100% - var(--pos)) 0 0); } .ba-divider { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: rgba(255,255,255,0.9); box-shadow: 0 0 14px rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; pointer-events: none; } .ba-handle { position: absolute; width: 40px; height: 40px; border-radius: 50%; background: var(--btn-bg); color: var(--btn-ink); display: grid; place-items: center; font-size: 12px; letter-spacing: -1px; box-shadow: 0 6px 20px rgba(0,0,0,0.35); } .ba-tag { position: absolute; top: 12px; z-index: 2; pointer-events: none; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; color: #fff; background: rgba(10,10,12,0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .ba-tag-l { left: 12px; } .ba-tag-r { right: 12px; background: color-mix(in srgb, var(--accent) 80%, #000); } .ba-note { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; pointer-events: none; display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 10.5px; line-height: 1.45; color: #fff; padding: 9px 12px; border-radius: 10px; background: rgba(10,10,12,0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .ba-note .ba-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); flex: 0 0 auto; } /* onboarding mock */ .onb { width: 100%; max-width: 340px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .onb-cell { padding: 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); } .onb-cell .k { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .onb-cell .v { font-size: 15px; font-weight: 600; color: var(--ink-0); margin-top: 5px; font-family: var(--f-head); } .onb-cell .v em { font-style: normal; color: var(--accent); } .onb-cell.wide { grid-column: 1 / -1; } .onb-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 8px; } .onb-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-3)); border-radius: 3px; } /* ============ HOW BETA WORKS ============ */ .steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; } .step { padding: 30px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); position: relative; } .step .n { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--accent); padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); display: block; } .step h3 { font-family: var(--f-head); font-size: 21px; font-weight: 600; letter-spacing: -0.01em; } .step p { color: var(--ink-2); font-size: 15px; margin: 12px 0 0; line-height: 1.6; } /* ============ BETA OFFER ============ */ .offer { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; } .offer-card { padding: 38px; border-radius: var(--radius); background: linear-gradient(165deg, color-mix(in srgb,var(--accent) 12%,var(--surface)), var(--surface)); border: 1px solid var(--line-strong); position: relative; overflow: hidden; } .offer-card .oi { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .offer-card h3 { font-family: var(--f-display); font-style: var(--display-italic); font-size: 30px; margin: 16px 0 12px; font-weight: 600; letter-spacing: -0.02em; } html[data-theme="daylight"] .offer-card h3 { font-weight: 400; } .offer-card p { color: var(--ink-2); font-size: 15.5px; line-height: 1.6; margin: 0; } .spots { display: flex; align-items: baseline; gap: 10px; margin-top: 20px; } .spots .num { font-family: var(--f-display); font-size: 52px; font-weight: 600; letter-spacing: -0.03em; color: var(--accent); } html[data-theme="daylight"] .spots .num { font-weight: 400; } .spots .lbl { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--ink-3); text-transform: uppercase; } .spots-track { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin-top: 18px; } .spots-track i { display: block; height: 100%; width: 62%; background: linear-gradient(90deg, var(--accent), var(--accent-3)); border-radius: 4px; } .spots-note { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); margin-top: 10px; letter-spacing: 0.04em; } /* ============ APPLY FORM ============ */ .apply { position: relative; padding: 130px 0; } .apply-inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; } .apply-copy h2 { font-family: var(--f-display); font-style: var(--display-italic); font-size: clamp(34px,4.4vw,58px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; } html[data-theme="daylight"] .apply-copy h2 { font-weight: 400; } .apply-copy p { color: var(--ink-2); font-size: 18px; margin: 22px 0 0; line-height: 1.6; } .apply-perks { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .apply-perks li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-1); font-size: 15px; } .apply-perks .chk { color: var(--accent); flex: 0 0 auto; margin-top: 2px; } .form-card { padding: 36px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 30px 80px -40px rgba(0,0,0,0.6); } html[data-theme="daylight"] .form-card { box-shadow: 0 30px 80px -44px rgba(10,10,12,0.28); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field { display: flex; flex-direction: column; gap: 7px; } .field.full { grid-column: 1 / -1; } .field label { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); } .field input, .field select, .field textarea { width: 100%; padding: 13px 14px; border-radius: 11px; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-0); font-family: var(--f-body); font-size: 15px; transition: border-color .2s, box-shadow .2s; } html[data-theme="daylight"] .field input, html[data-theme="daylight"] .field select, html[data-theme="daylight"] .field textarea { background: #fff; } .field textarea { resize: vertical; min-height: 84px; } .field input::placeholder, .field textarea::placeholder { color: var(--ink-3); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .field select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 18px) center, calc(100% - 13px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .chip-row { display: flex; flex-wrap: wrap; gap: 8px; } .chip { font-family: var(--f-body); font-size: 13px; font-weight: 500; padding: 9px 14px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line); color: var(--ink-1); background: var(--bg-2); user-select: none; transition: all .18s; } html[data-theme="daylight"] .chip { background: #fff; } .chip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .form-submit { margin-top: 6px; } .form-foot { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); text-align: center; margin-top: 16px; letter-spacing: 0.04em; } .form-success { display: none; text-align: center; padding: 30px 10px; } .form-card.done .form-body { display: none; } .form-card.done .form-success { display: block; } .form-success .seal { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 22px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-3)); color: #fff; font-size: 30px; box-shadow: 0 14px 40px -12px color-mix(in srgb,var(--accent) 70%,transparent); } .form-success h3 { font-family: var(--f-display); font-style: var(--display-italic); font-size: 30px; font-weight: 600; } html[data-theme="daylight"] .form-success h3 { font-weight: 400; } .form-success p { color: var(--ink-2); margin: 14px 0 0; } /* ============ FAQ ============ */ .faq { display: flex; flex-direction: column; gap: 0; max-width: 820px; } .faq-item { border-bottom: 1px solid var(--line); padding: 26px 0; cursor: pointer; } .faq-q { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-family: var(--f-head); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; } html[data-theme="daylight"] .faq-q { font-weight: 600; } .faq-q .pm { font-family: var(--f-mono); font-size: 22px; color: var(--accent); transition: transform .3s; flex: 0 0 auto; } .faq-item.open .faq-q .pm { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease, margin .4s, opacity .3s; opacity: 0; color: var(--ink-2); font-size: 16px; line-height: 1.65; max-width: 68ch; } .faq-item.open .faq-a { max-height: 260px; margin-top: 16px; opacity: 1; } /* ============ FINAL CTA ============ */ .final { position: relative; padding: 150px 0; text-align: center; overflow: hidden; } .final .aurora { opacity: .5; } html[data-theme="daylight"] .final .aurora { opacity: .4; } .final-content { position: relative; z-index: 2; } .final h2 { font-size: clamp(40px, 6vw, 88px); } .final p { color: var(--ink-1); font-size: 20px; margin: 26px auto 0; max-width: 46ch; } .final .hero-ctas { justify-content: center; } /* ============ FOOTER ============ */ .foot { border-top: 1px solid var(--line); padding: 60px 0 40px; } .foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; flex-wrap: wrap; } .foot p { color: var(--ink-3); font-size: 13.5px; max-width: 320px; margin: 14px 0 0; line-height: 1.6; } .foot-links { display: flex; gap: 28px; flex-wrap: wrap; } .foot-links a { color: var(--ink-2); font-size: 14px; } .foot-links a:hover { color: var(--ink-0); } .foot-bot { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-3); text-transform: uppercase; } /* ============ REVEAL ============ */ .r { opacity: 0; transform: translateY(30px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); } .r.in { opacity: 1; transform: none; } .r[data-d="1"]{transition-delay:.06s;} .r[data-d="2"]{transition-delay:.14s;} .r[data-d="3"]{transition-delay:.22s;} .r[data-d="4"]{transition-delay:.30s;} .r[data-d="5"]{transition-delay:.38s;} .r[data-d="6"]{transition-delay:.46s;} @media (prefers-reduced-motion: reduce) { .r { transition: none; opacity: 1; transform: none; } html { scroll-behavior: auto; } .pulse, .scroll-cue .line { animation: none !important; } } /* ============ RESPONSIVE ============ */ @media (max-width: 900px) { .feature, .feature.rev { grid-template-columns: 1fr; gap: 30px; } .feature.rev .feat-copy { order: 0; } .steps { grid-template-columns: 1fr; } .offer { grid-template-columns: 1fr; } .apply-inner { grid-template-columns: 1fr; gap: 40px; } .manifesto .meta { gap: 28px; } } @media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } .sec { padding: 84px 0; } .hero { padding-top: 120px; } } /* ── 05 · Human-gated autonomy (trust-gate) — added post-export (12) ───────── Approval-card + autonomy-levels + audit-log vis. Reuses .lf-k badge styles. */ .vis-gov { align-items: flex-start; } .govscene { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px; } .gov-levels { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); align-self: flex-start; } .gov-levels .gl { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding: 5px 12px; border-radius: 999px; transition: all .3s; } .gov-levels .gl.on { color: var(--ink-0); background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); } .gov-card { border: 1px solid var(--line-strong); border-radius: 16px; padding: 14px 16px; background: var(--surface-2); display: flex; flex-direction: column; gap: 10px; transition: border-color .4s, box-shadow .4s, opacity .4s, transform .4s; } .gov-card.waiting { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent); } .gov-card.done { border-color: color-mix(in srgb, var(--accent) 30%, transparent); box-shadow: none; } .gov-card.leaving { opacity: 0; transform: translateY(-8px); } .gc-head { display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); } .gc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: gcpulse 1.6s ease-in-out infinite; } .gov-card.done .gc-dot { animation: none; } @keyframes gcpulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.75); } } .gc-body { font-size: 14.5px; line-height: 1.5; color: var(--ink-1); } .gc-body b { color: var(--ink-0); } .gc-actions { display: flex; gap: 8px; } .gc-btn { font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink-1); transition: all .25s; cursor: default; } .gc-btn.pri { background: var(--accent); border-color: var(--accent); color: #1a1204; } .gc-btn.pri.tapped { transform: scale(.94); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); } .gov-log { display: flex; flex-direction: column; gap: 8px; } .gov-log .gv { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: opacity .5s, transform .5s; } .gov-log .gv.enter { animation: gvin .55s cubic-bezier(.2,.9,.25,1) both; } @keyframes gvin { from { opacity: 0; transform: translateY(-10px) scale(.97); } to { opacity: 1; transform: none; } } .gov-log .gv .lf-t { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--ink-1); } .gov-log .gv .lf-t b { color: var(--ink-0); font-weight: 600; font-size: 13px; } .gov-log .gv .lf-t span { color: var(--ink-3); font-family: var(--f-mono); font-size: 10.5px; } /* ── Hero word-stagger + spots count-up — added post-export (12) ───────────── */ .display.has-words { transform: none; transition: opacity .4s ease; } .hw { display: inline-block; opacity: 0; transform: translateY(26px) rotate(1.2deg); filter: blur(7px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1), filter .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--wi, 0) * 80ms); } .display.in .hw { opacity: 1; transform: none; filter: none; } .spots-track i { width: 0; transition: width 1.7s cubic-bezier(.2,.7,.2,1) .4s; } .spots-track.fill i { width: var(--spots-fill, 62%); } @media (prefers-reduced-motion: reduce) { .hw { transition: none; opacity: 1; transform: none; filter: none; } .spots-track i { width: 62%; transition: none; } } /* ── P1 · ambient live ticker — added post-export (12) ─────────────────────── */ .ticker { position: relative; z-index: 2; display: flex; align-items: center; gap: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 55%, transparent); padding: 0 0 0 26px; overflow: hidden; } .ticker-label { flex: none; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); padding: 13px 18px 13px 0; border-right: 1px solid var(--line); white-space: nowrap; } .ticker-viewport { overflow: hidden; flex: 1; } .ticker-inner { display: inline-flex; gap: 44px; padding: 12px 0; white-space: nowrap; will-change: transform; } .tk { display: inline-flex; align-items: center; gap: 9px; font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-2); } .tk .tk-k { width: 17px; height: 17px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 9.5px; font-style: normal; flex: none; } .tk .tk-k.ok { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); } .tk .tk-k.ai { background: color-mix(in srgb, var(--accent-2) 20%, transparent); color: var(--accent-3); } @media (prefers-reduced-motion: reduce) { .ticker-inner { transform: none !important; } } /* ── P6 · final CTA real-photo backdrop — added post-export (12) ───────────── */ .final { position: relative; } .final .final-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.13; filter: saturate(0.85); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); } html[data-theme="daylight"] .final .final-photo { opacity: 0.16; mix-blend-mode: multiply; } /* ── P7 · mobile compact variants — added post-export (12) ─────────────────── */ @media (max-width: 640px) { .r[data-d="1"], .r[data-d="2"], .r[data-d="3"], .r[data-d="4"], .r[data-d="5"], .r[data-d="6"] { transition-delay: 0.04s; } .ticker { padding-left: 16px; } .ticker-label { display: none; } .chat, .lockscene, .govscene { max-width: 100%; } .lock-feed .lf, .gov-log .gv { padding: 8px 10px; } .lock-feed, .gov-log { gap: 6px; } .feat-vis { padding: 18px 14px; } .manifesto .meta { gap: 22px; } .manifesto .meta b { font-size: 22px; } .spots .num { font-size: 44px; } } /* ── P4 · product glimpse — added post-export (12) ─────────────────────────── */ .glimpse .glimpse-frame { margin-top: 8px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-strong); box-shadow: 0 30px 80px -20px rgba(10,10,12,0.25); background: var(--surface-2); line-height: 0; } .glimpse .glimpse-frame video { width: 100%; height: auto; display: block; }