/* The landing page at /. Plain static CSS: the page is written for people and for AI crawlers that never execute JavaScript, so every word is in the HTML and every effect here is decoration on top. landing.js adds class "js" to ; anything that starts hidden or folded only does so under .js, so a reader without script (or a crawler) sees the whole page laid flat. The look is the sign-in card's (Home.razor.css): amber #FFB300 on #121212, drifting amber orbs, a frosted card. The motion vocabulary is MudBlazor's carousel and MudBlazor.Extensions' entrance animations, re-made here in CSS because the components themselves need the Blazor runtime, which this page deliberately does not load. Mobile first: one column until 760px, 44px touch targets. prefers-reduced-motion switches every animation off at the bottom of this file. Dark only, like the app. Version-stamped where it is linked. */ :root { --bg:#121212; --surface:#1e1e1e; --surface-2:#242424; --text:#e8e8e8; --soft:#cfcfcf; --muted:#9e9e9e; --amber:#ffb300; --amber-2:#ffd66b; --amber-deep:#ff8f00; --line:rgba(255,255,255,.12); color-scheme:dark; } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--text); font:17px/1.6 Roboto, system-ui, -apple-system, "Segoe UI", sans-serif; overflow-x:hidden; } a { color:var(--amber); } .wrap { max-width:1120px; margin:0 auto; padding:0 16px; } .skip { position:absolute; left:-9999px; } .skip:focus { left:16px; top:8px; z-index:10; background:var(--amber); color:#111; padding:10px 14px; border-radius:8px; } :focus-visible { outline:2px solid var(--amber); outline-offset:3px; } /* ---------------------------------------------------------------- header */ header.site { position:sticky; top:0; z-index:5; background:rgba(18,18,18,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } header.site .wrap { display:flex; align-items:center; gap:10px; min-height:60px; } .brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--amber); font-weight:700; font-size:1.1rem; margin-right:auto; min-height:44px; } .brand img { width:32px; height:32px; } header nav { display:none; gap:2px; } header nav a { color:var(--text); text-decoration:none; padding:0 10px; min-height:44px; display:inline-flex; align-items:center; border-radius:8px; font-size:.95rem; } header nav a:hover { background:rgba(255,255,255,.06); } @media (min-width:1000px) { header nav { display:flex; } } .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 20px; border-radius:12px; font-weight:600; text-decoration:none; font-size:1rem; transition:transform .2s ease, background .2s ease, box-shadow .2s ease; } .btn-primary { background:var(--amber); color:#111; box-shadow:0 6px 24px rgba(255,179,0,.25); } .btn-primary:hover { background:#ffc233; transform:translateY(-1px); box-shadow:0 10px 30px rgba(255,179,0,.35); } .btn-ghost { border:1px solid rgba(255,179,0,.5); color:var(--amber); } .btn-ghost:hover { background:rgba(255,179,0,.08); } /* ---------------------------------------------------------------- hero */ .hero { position:relative; overflow:hidden; padding:44px 0 64px; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,179,0,.11), transparent 70%), radial-gradient(ellipse 60% 50% at 50% 100%, rgba(255,179,0,.06), transparent 70%); } .orb { position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; } .orb1 { width:340px; height:340px; background:radial-gradient(circle, rgba(255,179,0,.30), transparent 70%); top:-8%; left:-10%; animation:orb1 14s ease-in-out infinite; } .orb2 { width:420px; height:420px; background:radial-gradient(circle, rgba(255,179,0,.18), transparent 70%); bottom:-30%; right:-14%; animation:orb2 18s ease-in-out infinite; } .orb3 { width:220px; height:220px; background:radial-gradient(circle, rgba(255,143,0,.18), transparent 70%); top:48%; left:62%; animation:orb3 22s ease-in-out infinite; } @keyframes orb1 { 50% { transform:translate(70px, 90px) scale(1.1); } } @keyframes orb2 { 50% { transform:translate(-90px, -60px) scale(.95); } } @keyframes orb3 { 33% { transform:translate(50px, -40px) scale(1.05); } 66% { transform:translate(-40px, 50px) scale(.92); } } .road { position:absolute; left:0; right:0; bottom:22px; height:2px; overflow:hidden; opacity:.35; pointer-events:none; } .road span { display:block; height:2px; width:calc(100% + 60px); background:repeating-linear-gradient(90deg, var(--amber) 0 26px, transparent 26px 60px); animation:road 1.6s linear infinite; } @keyframes road { to { transform:translateX(-60px); } } .hero-card { position:relative; z-index:1; max-width:820px; margin:0 auto; text-align:center; padding:34px 20px 28px; border-radius:28px; background:rgba(30,30,30,.6); backdrop-filter:blur(28px) saturate(160%); -webkit-backdrop-filter:blur(28px) saturate(160%); border:1px solid rgba(255,255,255,.08); box-shadow:0 24px 80px rgba(0,0,0,.35), 0 0 0 1px rgba(255,179,0,.06) inset; animation:card-in .9s cubic-bezier(.16,1,.3,1) both; } @keyframes card-in { from { opacity:0; transform:translateY(40px) scale(.94); filter:blur(8px); } to { opacity:1; transform:none; filter:none; } } .mark { position:relative; display:inline-block; isolation:isolate; margin-bottom:14px; } .mark::after { content:""; position:absolute; inset:-16px; border-radius:50%; background:radial-gradient(circle, rgba(255,179,0,.45), transparent 65%); filter:blur(18px); z-index:-1; animation:glow 3.5s ease-in-out infinite; } @keyframes glow { 0%, 100% { opacity:.55; transform:scale(1); } 50% { opacity:1; transform:scale(1.18); } } .mark img { width:76px; height:76px; display:block; } .chip { display:table; margin:0 auto 14px; font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); border:1px solid rgba(255,179,0,.4); border-radius:99px; padding:4px 12px; } .hero h1 { font-size:clamp(2.1rem, 8.4vw, 4rem); line-height:1.05; margin:0 0 16px; font-weight:900; letter-spacing:-.02em; } /* The signature move: "Rideshare," arrives upside down, holds, and turns the right way up. */ .flip-word { display:inline-block; transform-origin:50% 58%; animation:rightway 1.5s cubic-bezier(.3,1.2,.4,1) .35s both; } @keyframes rightway { 0% { transform:rotate(180deg); opacity:0; } 12% { opacity:1; } 38% { transform:rotate(180deg); } 100% { transform:rotate(360deg); } } .shine { color:var(--amber); } @supports ((-webkit-background-clip:text) or (background-clip:text)) { .shine { background:linear-gradient(100deg, var(--amber) 0%, var(--amber) 35%, #fff1c4 48%, var(--amber) 60%, var(--amber-deep) 100%); background-size:260% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 5.5s ease-in-out 1.6s infinite; } } @keyframes shine { 0% { background-position:100% 0; } 60%, 100% { background-position:0 0; } } .hero .lede { font-size:clamp(1.05rem, 2.6vw, 1.2rem); color:var(--soft); margin:0 auto 10px; max-width:640px; } .hero .plain { font-size:.92rem; color:var(--muted); margin:0 auto 22px; max-width:600px; } .cta-row { display:flex; flex-direction:column; gap:10px; max-width:340px; margin:0 auto; } @media (min-width:520px) { .cta-row { flex-direction:row; justify-content:center; max-width:none; } } .badges { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; list-style:none; padding:0; margin:22px 0 0; } .badges li { font-size:.84rem; font-weight:500; padding:6px 12px; border-radius:99px; border:1px solid rgba(255,179,0,.32); background:rgba(255,179,0,.08); color:var(--amber-2); animation:badge .6s cubic-bezier(.2,.9,.3,1.35) both; animation-delay:calc(1.7s + var(--i) * 110ms); } @keyframes badge { from { opacity:0; transform:translateY(10px) scale(.85); } to { opacity:1; transform:none; } } /* ---------------------------------------------------------------- sections */ section { padding:56px 0 8px; scroll-margin-top:64px; } .eyebrow { text-transform:uppercase; letter-spacing:.14em; font-size:.76rem; color:var(--amber); font-weight:700; margin:0 0 8px; } h2 { font-size:clamp(1.5rem, 4.4vw, 2.3rem); line-height:1.15; margin:0 0 12px; letter-spacing:-.01em; } .sub { color:var(--muted); margin:0 0 24px; max-width:720px; font-size:1.02rem; } .grid { display:grid; gap:14px; } @media (min-width:760px) { .g4 { grid-template-columns:repeat(2, 1fr); } } @media (min-width:1000px) { .g4 { grid-template-columns:repeat(4, 1fr); } } /* Reveal on scroll -- MudEx "slide in" territory. Only under .js, so no-script readers see it all. */ .js [data-reveal] { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .8s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i, 0) * 90ms); } .js [data-reveal].in { opacity:1; transform:none; } /* ---------------------------------------------------------------- the story slideshow */ .carousel { position:relative; margin-top:6px; } .car-track { position:relative; display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; border-radius:26px; padding-bottom:4px; } .js .car-track { scrollbar-width:none; } .js .car-track::-webkit-scrollbar { display:none; } .slide { position:relative; flex:0 0 100%; scroll-snap-align:start; scroll-snap-stop:always; overflow:hidden; display:grid; gap:14px; align-content:center; min-height:420px; padding:28px 22px 30px; border-radius:26px; border:1px solid var(--line); background:radial-gradient(ellipse 90% 80% at 100% 0%, rgba(255,179,0,.14), transparent 60%), linear-gradient(160deg, #232323, #181818); } @media (min-width:760px) { .slide { grid-template-columns:200px 1fr; gap:40px; min-height:340px; padding:44px 52px; } } .slide.s-old { background:radial-gradient(ellipse 90% 80% at 0% 100%, rgba(120,120,120,.16), transparent 60%), linear-gradient(160deg, #1d1d1d, #141414); } .slide.s-flip { background:radial-gradient(ellipse 70% 90% at 50% 120%, rgba(255,179,0,.28), transparent 60%), linear-gradient(160deg, #262014, #161616); } .slide.s-ai { background:radial-gradient(ellipse 90% 80% at 0% 0%, rgba(255,214,107,.16), transparent 60%), linear-gradient(160deg, #22201a, #151515); } .slide-art { width:112px; height:112px; margin:0 auto; display:grid; place-items:center; border-radius:32px; background:rgba(255,179,0,.07); border:1px solid rgba(255,179,0,.18); } @media (min-width:760px) { .slide-art { width:200px; height:200px; border-radius:44px; } } .slide-art svg { width:72%; height:72%; overflow:visible; } .st { fill:none; stroke:#cfcfcf; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; } .st.amber { stroke:var(--amber); } .fl { fill:var(--amber); } .s-old .slide-art { background:rgba(255,255,255,.04); border-color:var(--line); } .s-old .st { stroke:#8a8a8a; } .s-old .st.amber { stroke:#b9785a; } .s-old .fl { fill:#8a8a8a; } .kicker { margin:0 0 6px; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); } .s-old .kicker { color:#b0b0b0; } .slide h3 { margin:0 0 10px; font-size:clamp(1.45rem, 4.2vw, 2.1rem); line-height:1.15; letter-spacing:-.01em; } .slide-copy p:last-child { margin:0; color:var(--soft); font-size:1.02rem; } /* With script, the slides stack in one grid cell and trade places the way MudCarousel's "slide" transition does: the outgoing slide leaves toward the side it came from, the incoming one arrives from the other, and .back reverses both for Previous. Without script the scroll-snap row above stays, so every slide is still there to swipe through -- and to be read by a crawler. */ .js .car-track { display:grid; overflow:hidden; scroll-snap-type:none; touch-action:pan-y; } .js .slide { grid-area:1 / 1; visibility:hidden; opacity:0; transform:translateX(9%) scale(.97); transition:opacity .5s ease, transform .8s cubic-bezier(.16,1,.3,1), visibility 0s linear .8s; } .js .slide.was { transform:translateX(-9%) scale(.97); } .js .carousel.back .slide { transform:translateX(-9%) scale(.97); } .js .carousel.back .slide.was { transform:translateX(9%) scale(.97); } .js .slide.active, .js .carousel.back .slide.active { visibility:visible; opacity:1; transform:none; z-index:1; transition:opacity .5s ease .1s, transform .8s cubic-bezier(.16,1,.3,1), visibility 0s; } /* Entrance on the active slide -- the MudEx cascade: art pops, copy rises line by line. The keyframes carry their own starting state, so nothing depends on a slide having been hidden first. */ .js .slide.active .slide-art { animation:art-in .9s cubic-bezier(.2,.9,.3,1.25) .1s both; } .js .slide.active .slide-copy > * { animation:copy-in .75s cubic-bezier(.16,1,.3,1) both; } .js .slide.active .slide-copy > :nth-child(1) { animation-delay:.18s; } .js .slide.active .slide-copy > :nth-child(2) { animation-delay:.28s; } .js .slide.active .slide-copy > :nth-child(3) { animation-delay:.40s; } @keyframes art-in { from { opacity:0; transform:scale(.7) rotate(-10deg); } to { opacity:1; transform:none; } } @keyframes copy-in { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } } .s-flip.active .slide-art svg { animation:turn 1.4s cubic-bezier(.3,1.2,.4,1) .3s both; } @keyframes turn { from { transform:rotate(-180deg); } to { transform:rotate(0); } } .spin-slow { animation:wheel 6s ease-in-out infinite; } @keyframes wheel { 0%, 100% { transform:rotate(-14deg); } 50% { transform:rotate(14deg); } } .pulse { animation:pulse 2.6s ease-in-out infinite; transform-origin:50% 50%; } @keyframes pulse { 0%, 100% { transform:scale(1); } 50% { transform:scale(1.06); } } .blink { animation:blink 1.4s ease-in-out infinite; } .b2 { animation-delay:.2s; } .b3 { animation-delay:.4s; } @keyframes blink { 0%, 100% { opacity:.25; } 40% { opacity:1; } } .car-controls { display:none; align-items:center; justify-content:center; gap:6px; margin-top:12px; } .js .car-controls { display:flex; } .car-btn { width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--text); display:grid; place-items:center; cursor:pointer; transition:background .2s, border-color .2s; } .car-btn:hover { border-color:rgba(255,179,0,.5); background:#262626; } .car-btn svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; } .car-btn .i-play { display:none; fill:currentColor; stroke:none; } .carousel.paused .car-btn .i-pause { display:none; } .carousel.paused .car-btn .i-play { display:block; } .car-dots { display:flex; align-items:center; } .dot { width:26px; height:44px; display:grid; place-items:center; background:none; border:0; padding:0; cursor:pointer; } .dot::before { content:""; width:8px; height:8px; border-radius:99px; background:rgba(255,255,255,.28); transition:width .35s ease, background .35s ease; } .dot[aria-current="true"]::before { width:22px; background:var(--amber); } .car-progress { display:none; height:3px; margin:4px auto 0; max-width:240px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; } .js .car-progress { display:block; } .car-progress span { display:block; height:100%; width:0; background:linear-gradient(90deg, var(--amber), var(--amber-2)); } .car-progress.run span { animation:progress var(--dur, 7s) linear forwards; } .carousel.paused .car-progress span, .carousel.hold .car-progress span { animation-play-state:paused; } @keyframes progress { to { width:100%; } } /* ---------------------------------------------------------------- flip cards */ .flips { display:grid; gap:14px; } @media (min-width:620px) { .flips { grid-template-columns:repeat(2, 1fr); } } @media (min-width:1000px) { .flips { grid-template-columns:repeat(4, 1fr); } } .flip { display:grid; gap:8px; background:none; border:0; padding:0; margin:0; font:inherit; color:inherit; text-align:left; cursor:pointer; perspective:1100px; min-height:44px; } .face { display:flex; flex-direction:column; gap:6px; border-radius:18px; padding:18px 18px 20px; border:1px solid var(--line); } .face b { font-size:1.12rem; } .face > span:last-child { font-size:.96rem; } .face.old { background:linear-gradient(160deg, #1c1c1c, #161616); color:#a9a9a9; } .face.old b { color:#c9c9c9; } .face.new { background:radial-gradient(ellipse 100% 80% at 100% 0%, rgba(255,179,0,.18), transparent 60%), linear-gradient(160deg, #26200f, #1c1c1c 70%); border-color:rgba(255,179,0,.38); color:var(--soft); } .face.new b { color:#fff; } .tag { font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; } .old .tag { color:#8c8c8c; } .old .tag::before { content:"\2715 "; } .new .tag { color:var(--amber); } .new .tag::before { content:"\2713 "; } .js .flip { gap:0; } .js .flip .face { grid-area:1 / 1; backface-visibility:hidden; -webkit-backface-visibility:hidden; transition:transform .85s cubic-bezier(.2,.8,.2,1); } .js .flip .face.new { transform:rotateY(180deg); } .js .flip.flipped .face.old { transform:rotateY(-180deg); } .js .flip.flipped .face.new { transform:rotateY(0); } .js .flip:hover .face { box-shadow:0 10px 30px rgba(0,0,0,.35); } /* ---------------------------------------------------------------- life of a booking */ .steps { list-style:none; margin:0; padding:0; display:grid; gap:12px; counter-reset:step; position:relative; } @media (min-width:900px) { .steps { grid-template-columns:repeat(5, 1fr); } } .steps li { counter-increment:step; position:relative; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px 16px 14px 62px; } @media (min-width:900px) { .steps li { padding:54px 14px 16px; } } .steps li::before { content:counter(step); position:absolute; left:16px; top:16px; width:32px; height:32px; border-radius:50%; background:var(--amber); color:#111; font-weight:800; display:grid; place-items:center; font-size:.95rem; } .steps strong { display:block; margin-bottom:2px; } .steps span { color:#bdbdbd; font-size:.94rem; } .js .steps li { opacity:.3; transform:translateY(10px); transition:opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1), border-color .5s ease; transition-delay:calc(var(--i) * 280ms); } .js .steps.in li { opacity:1; transform:none; border-color:rgba(255,179,0,.3); } .js .steps.in li::before { animation:num-in .6s cubic-bezier(.2,.9,.3,1.4) both; animation-delay:calc(var(--i) * 280ms); } @keyframes num-in { from { transform:scale(0); } to { transform:scale(1); } } /* ---------------------------------------------------------------- your AI */ .ai { background:radial-gradient(ellipse 70% 90% at 100% 0%, rgba(255,179,0,.13), transparent 60%), var(--surface); border:1px solid rgba(255,179,0,.25); border-radius:28px; padding:28px 18px; } @media (min-width:760px) { .ai { padding:40px 40px 32px; } } .tabs { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 14px; } .tabs [role="tab"] { min-height:44px; padding:0 16px; border-radius:99px; border:1px solid var(--line); background:#161616; color:var(--soft); font:inherit; font-weight:500; cursor:pointer; transition:background .2s, color .2s, border-color .2s; } .tabs [role="tab"][aria-selected="true"] { background:var(--amber); color:#111; border-color:var(--amber); } .tabs { display:none; } .js .tabs { display:flex; } .panel { margin-bottom:14px; } .panel-title { font-size:1rem; margin:0 0 8px; color:var(--amber-2); } .js .panel { display:none; } .js .panel.on { display:block; } .js .panel-title { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } .chat { display:flex; flex-direction:column; gap:8px; background:#0f0f0f; border:1px solid var(--line); border-radius:20px; padding:16px; min-height:120px; } .msg { max-width:88%; margin:0; padding:10px 14px; border-radius:18px; font-size:.96rem; line-height:1.45; } .msg.me { align-self:flex-end; background:var(--amber); color:#151515; border-bottom-right-radius:6px; } .msg.bot { align-self:flex-start; background:#232323; color:var(--soft); border:1px solid var(--line); border-bottom-left-radius:6px; } .tool { align-self:flex-start; margin:0 0 0 6px; font-size:.78rem; color:var(--muted); display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .tool::before { content:"uses"; } .tool code { font:500 .78rem/1 ui-monospace, Consolas, monospace; color:var(--amber-2); background:rgba(255,179,0,.09); border:1px solid rgba(255,179,0,.25); border-radius:8px; padding:5px 8px; } .js .panel .chat > * { opacity:0; } .js .panel.on.play .chat > * { animation:bubble .5s cubic-bezier(.2,.9,.3,1.2) both; animation-delay:calc(var(--i) * 700ms); } @keyframes bubble { from { opacity:0; transform:translateY(10px) scale(.96); } to { opacity:1; transform:none; } } .rider-note { margin:0; padding:18px; border-radius:18px; border:1px dashed rgba(255,179,0,.35); color:var(--soft); background:#151515; } .fine { font-size:.82rem; color:var(--muted); margin:8px 0 0; } .guards { list-style:none; padding:0; margin:26px 0 0; display:grid; gap:12px; } @media (min-width:760px) { .guards { grid-template-columns:repeat(3, 1fr); } } .guards li { background:#171717; border:1px solid var(--line); border-radius:16px; padding:16px; } .guards b { display:block; color:var(--amber); margin-bottom:4px; } .guards span { color:var(--soft); font-size:.94rem; } .endpoints { display:grid; gap:10px; margin:22px 0 0; } @media (min-width:760px) { .endpoints { grid-template-columns:1fr 1fr; } } .endpoint { display:flex; flex-direction:column; gap:4px; background:#0d0d0d; border:1px solid var(--line); border-radius:14px; padding:14px 16px; font:500 .96rem/1.4 ui-monospace, Consolas, monospace; color:var(--amber-2); word-break:break-all; } .ep-label { font:700 .7rem/1 Roboto, system-ui, sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } .endpoint small { font:400 .8rem/1.4 Roboto, system-ui, sans-serif; color:var(--muted); word-break:normal; } /* ---------------------------------------------------------------- technology */ .flow { display:grid; gap:10px; align-items:center; margin:8px 0 30px; } @media (min-width:980px) { .flow { grid-template-columns:1.25fr 48px 1fr 48px 1.1fr 48px 1.25fr; gap:0; } } .flow-col { display:flex; flex-direction:column; gap:8px; } .pill { display:block; padding:10px 14px; border-radius:12px; background:var(--surface); border:1px solid var(--line); font-size:.92rem; text-align:center; } .pill.out { border-color:rgba(255,179,0,.28); } .js .flow.in .pill { animation:pill-glow 4.8s ease-in-out infinite; animation-delay:calc(var(--i) * .45s); } @keyframes pill-glow { 0%, 70%, 100% { box-shadow:none; border-color:var(--line); } 12% { box-shadow:0 0 0 1px rgba(255,179,0,.6), 0 0 22px rgba(255,179,0,.25); border-color:rgba(255,179,0,.7); } } .flow-node { display:flex; flex-direction:column; align-items:center; text-align:center; padding:20px 16px; border-radius:20px; border:1px solid rgba(255,179,0,.45); } .flow-node b { font-size:1.15rem; } .flow-node small { color:var(--muted); font-size:.85rem; } .flow-node.door { background:linear-gradient(160deg, #2b2310, #1b1b1b); } .flow-node.core { background:radial-gradient(circle at 50% 0%, rgba(255,179,0,.25), transparent 70%), #1b1b1b; box-shadow:0 0 40px rgba(255,179,0,.12); } .flow-link { width:2px; height:30px; margin:0 auto; background:repeating-linear-gradient(180deg, var(--amber) 0 6px, transparent 6px 12px); background-size:2px 12px; animation:flow-v .8s linear infinite; opacity:.8; } @media (min-width:980px) { .flow-link { width:100%; height:2px; background:repeating-linear-gradient(90deg, var(--amber) 0 6px, transparent 6px 12px); background-size:12px 2px; animation:flow-h .8s linear infinite; } } @keyframes flow-v { to { background-position:0 12px; } } @keyframes flow-h { to { background-position:12px 0; } } .tech { background:linear-gradient(180deg, var(--surface-2), var(--surface)); border:1px solid var(--line); border-radius:16px; padding:18px; transition:border-color .3s, transform .3s; } .tech:hover { border-color:rgba(255,179,0,.4); transform:translateY(-2px); } .tech b { display:block; color:var(--amber); margin-bottom:4px; } .tech span { color:var(--soft); font-size:.94rem; } /* ---------------------------------------------------------------- not / read more */ .nots { display:grid; gap:10px; margin:0; padding:0; list-style:none; } @media (min-width:760px) { .nots { grid-template-columns:repeat(2, 1fr); } } .nots li { border-left:3px solid rgba(255,179,0,.6); padding:6px 0 6px 14px; color:var(--soft); } .nots strong { color:var(--text); } .reading { display:grid; gap:10px; margin:0; padding:0; list-style:none; } @media (min-width:760px) { .reading { grid-template-columns:repeat(2, 1fr); } } .reading a { display:block; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 16px; text-decoration:none; color:var(--text); min-height:44px; transition:border-color .2s; } .reading a:hover { border-color:rgba(255,179,0,.45); } .reading b { color:var(--amber); display:block; } .reading span { color:var(--muted); font-size:.93rem; } /* ---------------------------------------------------------------- closer */ .closer-card { position:relative; overflow:hidden; text-align:center; border-radius:30px; padding:48px 20px 44px; border:1px solid rgba(255,179,0,.35); background:radial-gradient(ellipse 80% 120% at 50% 110%, rgba(255,179,0,.3), transparent 60%), linear-gradient(160deg, #2a2110, #161616 70%); } .closer-kicker { margin:0 0 10px; font-size:.8rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-2); } .closer-card h2 { font-size:clamp(2.2rem, 9vw, 4.2rem); font-weight:900; margin:0 0 12px; letter-spacing:-.02em; } .closer-card p { color:var(--soft); max-width:620px; margin:0 auto 24px; font-size:1.08rem; } /* ---------------------------------------------------------------- contact / footer */ .contact { display:grid; gap:18px; } @media (min-width:760px) { .contact { grid-template-columns:1.1fr 1fr; align-items:start; } } .contact-card { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:10px 20px; } .contact-row { display:flex; gap:14px; align-items:center; min-height:56px; text-decoration:none; color:var(--text); border-bottom:1px solid var(--line); padding:8px 0; word-break:break-word; } .contact-row:last-child { border-bottom:0; } .contact-row .ic { width:40px; height:40px; border-radius:10px; background:rgba(255,179,0,.12); color:var(--amber); display:grid; place-items:center; flex:none; } .contact-row b { display:block; font-weight:500; } .contact-row small { color:var(--muted); } footer.site { border-top:1px solid var(--line); margin-top:56px; padding:18px 0 34px; font-size:.9rem; color:var(--muted); } footer.site nav { display:flex; flex-wrap:wrap; gap:0 16px; margin-bottom:8px; } footer.site nav a { color:var(--text); text-decoration:none; min-height:44px; display:inline-flex; align-items:center; } /* ---------------------------------------------------------------- launch countdown (hero) */ .launch { margin:24px auto 0; padding:16px 12px 14px; max-width:520px; border-radius:20px; border:1px solid rgba(255,179,0,.4); background:radial-gradient(ellipse 80% 120% at 50% 120%, rgba(255,179,0,.22), transparent 60%), rgba(20,20,20,.6); } .launch-label { margin:0 0 8px; font-size:.78rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); } .clock { display:flex; justify-content:center; gap:8px; } .clock span { display:flex; flex-direction:column; align-items:center; min-width:64px; padding:8px 6px; border-radius:14px; background:#141414; border:1px solid var(--line); } .clock b { font:800 clamp(1.6rem, 6vw, 2.2rem)/1 Roboto, system-ui, sans-serif; font-variant-numeric:tabular-nums; color:#fff; } .clock small { margin-top:4px; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .clock b.tick { animation:tick .35s ease-out; } @keyframes tick { from { color:var(--amber); transform:translateY(-3px); } to { color:#fff; transform:none; } } .launch-when { margin:10px 0 0; font-size:.85rem; color:var(--soft); } /* ---------------------------------------------------------------- the work behind it */ .stats { display:grid; gap:12px; grid-template-columns:repeat(2, 1fr); } @media (min-width:760px) { .stats { grid-template-columns:repeat(3, 1fr); } } .stat { position:relative; overflow:hidden; border-radius:18px; padding:20px 16px; border:1px solid var(--line); background:radial-gradient(ellipse 90% 90% at 100% 0%, rgba(255,179,0,.12), transparent 60%), var(--surface); } .stat b { display:block; font:900 clamp(1.8rem, 6vw, 2.8rem)/1.05 Roboto, system-ui, sans-serif; letter-spacing:-.02em; color:var(--amber); font-variant-numeric:tabular-nums; } .stat span { display:block; margin-top:6px; color:var(--soft); font-size:.93rem; } .work .fine { margin-top:14px; max-width:820px; } /* ---------------------------------------------------------------- from the blog */ .posts { list-style:none; margin:0 0 18px; padding:0; display:grid; gap:12px; } @media (min-width:760px) { .posts { grid-template-columns:repeat(3, 1fr); } } .posts a { display:flex; flex-direction:column; gap:6px; height:100%; padding:18px; border-radius:18px; border:1px solid var(--line); background:linear-gradient(180deg, var(--surface-2), var(--surface)); color:var(--text); text-decoration:none; transition:border-color .25s, transform .25s; } .posts a:hover { border-color:rgba(255,179,0,.45); transform:translateY(-2px); } .posts .post-date { font-size:.78rem; color:var(--muted); letter-spacing:.04em; } .posts b { font-size:1.12rem; line-height:1.3; } .posts span { color:var(--soft); font-size:.94rem; } .posts .more { margin-top:auto; color:var(--amber); font-weight:600; } /* ---------------------------------------------------------------- social */ .socials { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; } .socials a { width:44px; height:44px; display:grid; place-items:center; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--soft); transition:color .2s, border-color .2s, transform .2s; } .socials a:hover { color:var(--amber); border-color:rgba(255,179,0,.5); transform:translateY(-2px); } footer.site .socials { margin-bottom:10px; } .contact-follow { display:flex; flex-direction:column; gap:8px; padding:12px 0 8px; } .contact-follow small { color:var(--muted); } /* ---------------------------------------------------------------- reduced motion */ @media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } html, .car-track { scroll-behavior:auto; } .js [data-reveal], .js .panel .chat > *, .js .steps li { opacity:1; transform:none; } }