/* * TopGenie marketing site. One design system, two themes. * "Signal": precise, engineered, dark-native with a full light counterpart. * Fonts are self-hosted (no third party round trip). Colours are driven by * tokens so light and dark are one CSS file, switched by data-theme on . */ /* ---------- self-hosted fonts ---------- */ @font-face{font-family:Outfit;src:url(/fonts/outfit-600.woff2) format('woff2');font-weight:600;font-display:swap} @font-face{font-family:Outfit;src:url(/fonts/outfit-700.woff2) format('woff2');font-weight:700;font-display:swap} @font-face{font-family:Outfit;src:url(/fonts/outfit-800.woff2) format('woff2');font-weight:800;font-display:swap} @font-face{font-family:Inter;src:url(/fonts/inter-400.woff2) format('woff2');font-weight:400;font-display:swap} @font-face{font-family:Inter;src:url(/fonts/inter-500.woff2) format('woff2');font-weight:500;font-display:swap} @font-face{font-family:Inter;src:url(/fonts/inter-600.woff2) format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'JetBrains Mono';src:url(/fonts/jetbrainsmono-500.woff2) format('woff2');font-weight:500;font-display:swap} /* ---------- tokens: dark is the default ---------- */ :root{ --bg:#0B0B0D; --surface:#141417; --raised:#1C1C21; --hairline:#2A2A31; --text:#F4F4F5; --text-soft:#D4D4D8; --muted:#9A9AA3; --inset:#0B0B0E; --star-empty:#3A3A44; --accent:#4F7CFF; --accent-hover:#6C92FF; --accent-deep:#2F5AE0; --accent-fg:#0A0F1F; --accent-weak:rgba(79,124,255,.12); --accent-ring:rgba(79,124,255,.16); --star:#F5A300; --good:#34D399; --good-weak:rgba(52,211,153,.12); --nav-bg:rgba(11,11,13,.72); --glow:rgba(79,124,255,.20); --hover-surface:#17171B; --card-grad-b:#111114; --shadow-card:0 40px 80px -40px rgba(0,0,0,.8); /* legacy aliases so older content pages keep resolving */ --ink:var(--text); --card:var(--surface); --line:var(--hairline); --blue:var(--accent); --blue-deep:var(--accent-deep); --night:var(--surface); --night-ink:var(--text); --night-muted:var(--muted); --step:8px; --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px; --maxw:1120px; --radius:14px; --radius-sm:9px; --ease:cubic-bezier(.22,.61,.36,1); } :root[data-theme="light"]{ --bg:#FFFFFF; --surface:#F7F8FA; --raised:#EEF0F4; --hairline:#E4E6EB; --text:#0C0D10; --text-soft:#363B44; --muted:#5B616B; --inset:#F3F4F7; --star-empty:#CFD2D9; --accent:#2F5AE0; --accent-hover:#3E6BF0; --accent-deep:#1E44C0; --accent-fg:#FFFFFF; --accent-weak:rgba(47,90,224,.09); --accent-ring:rgba(47,90,224,.14); --star:#E8920A; --good:#0B845A; --good-weak:rgba(11,132,90,.10); --nav-bg:rgba(255,255,255,.82); --glow:rgba(47,90,224,.14); --hover-surface:#F0F2F6; --card-grad-b:#101014; --shadow-card:0 30px 70px -44px rgba(20,30,60,.35); } /* ---------- base ---------- */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;overflow-x:hidden} body{margin:0;background:var(--bg);color:var(--text); font-family:Inter,system-ui,sans-serif;font-weight:400;font-size:16px;line-height:1.6; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden} a{color:inherit;text-decoration:none} button{font-family:inherit} img,svg{display:block;max-width:100%} ::selection{background:var(--accent-ring);color:var(--text)} .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--s3)} h1,h2,h3,h4{font-family:Outfit,system-ui,sans-serif;margin:0;letter-spacing:-.02em;line-height:1.05} .mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;letter-spacing:.06em; text-transform:uppercase;font-size:12px;color:var(--muted)} a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:Inter; font-weight:600;font-size:14px;cursor:pointer;border:0;padding:10px 18px;border-radius:10px;line-height:1; background:var(--accent);color:var(--accent-fg); box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 8px 24px -12px rgba(47,90,224,.7); transition:transform .16s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)} .btn:hover{background:var(--accent-hover);transform:translateY(-1px)} .btn:active{transform:translateY(0)} .btn-ghost{background:transparent;color:var(--text);border:1px solid var(--hairline);box-shadow:none} .btn-ghost:hover{border-color:var(--muted);background:var(--surface)} .btn-lg{padding:14px 22px;font-size:15px;border-radius:12px} /* ---------- nav ---------- */ header.nav{position:sticky;top:0;z-index:50;background:var(--nav-bg); backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--hairline)} .nav-inner{display:flex;align-items:center;gap:var(--s4);height:64px} .brand{display:flex;align-items:center;gap:10px;font-family:Outfit;font-weight:800;font-size:18px;letter-spacing:-.01em;color:var(--text)} .brand .glyph{width:22px;height:22px;flex:0 0 auto} .nav-links{display:flex;gap:var(--s3);margin-left:var(--s3)} .nav-links a{color:var(--muted);font-size:14px;font-weight:500;transition:color .18s var(--ease)} .nav-links a:hover{color:var(--text)} .nav-right{margin-left:auto;display:flex;align-items:center;gap:var(--s3)} .signin{color:var(--muted);font-size:14px;font-weight:500;transition:color .18s var(--ease)} .signin:hover{color:var(--text)} .theme-btn{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;cursor:pointer; background:transparent;border:1px solid var(--hairline);color:var(--muted); transition:color .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease)} .theme-btn:hover{color:var(--text);border-color:var(--muted);background:var(--surface)} .theme-btn svg{width:17px;height:17px} .theme-btn .i-sun{display:none} :root[data-theme="light"] .theme-btn .i-sun{display:block} :root[data-theme="light"] .theme-btn .i-moon{display:none} /* ---------- section frame ---------- */ main{display:block} section.block{padding:var(--s7) 0;border-top:1px solid var(--hairline)} .sec-head{max-width:56ch} .sec-head h2{font-weight:700;font-size:clamp(26px,3.4vw,38px);margin-top:var(--s2)} .sec-head p{color:var(--muted);margin-top:var(--s2);max-width:60ch} .eyebrow{display:inline-flex;align-items:center;gap:8px} .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)} /* ---------- hero ---------- */ .hero{position:relative;padding:var(--s7) 0 var(--s6)} .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:var(--s6);align-items:center} .hero h1{font-weight:800;font-size:clamp(38px,5.2vw,60px);margin-top:var(--s3)} .hero h1 .line2{color:var(--muted)} .hero p.sub{color:var(--muted);font-size:clamp(16px,1.6vw,18px);margin:var(--s3) 0 0;max-width:36ch} .cta-row{display:flex;gap:var(--s2);margin-top:var(--s4);flex-wrap:wrap} .hero-meta{display:flex;gap:var(--s4);margin-top:var(--s5);flex-wrap:wrap} .hero-meta .m .mono{display:block} .hero-meta .m .v{font-family:Outfit;font-weight:700;font-size:22px;margin-top:4px} .hero-meta .v .accent{color:var(--accent)} .hero-meta .v .good{color:var(--good)} .hero-visual{position:relative} .hero-visual::before{content:"";position:absolute;inset:-8% -6% -12% -6%; background:radial-gradient(60% 55% at 70% 22%,var(--glow),transparent 70%);filter:blur(6px);z-index:0;pointer-events:none} /* ---------- product device (always dark: it is a screenshot) ---------- */ .device{position:relative;z-index:1; --surface:#141417; --raised:#1C1C21; --hairline:#2A2A31; --text:#F4F4F5; --text-soft:#D4D4D8; --muted:#9A9AA3; --inset:#0B0B0E; --star-empty:#3A3A44; --good:#34D399; --accent:#4F7CFF; background:linear-gradient(180deg,#141417,#111114);color:var(--text); border:1px solid #2A2A31;border-radius:var(--radius);box-shadow:0 40px 80px -40px rgba(0,0,0,.8);overflow:hidden} .device .card-bar{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--hairline);background:var(--raised)} .device .tl{display:flex;gap:6px} .device .tl i{width:9px;height:9px;border-radius:50%;background:#33333B;display:block} .device .path{margin-left:6px;color:var(--muted)} .device .card-body{padding:var(--s3)} .phone-row{display:grid;grid-template-columns:150px 1fr;gap:var(--s3);align-items:stretch} .phone{border:1px solid var(--hairline);border-radius:20px;background:#0E0E11;padding:12px 12px 14px;position:relative} .phone .notch{width:44px;height:5px;border-radius:3px;background:#26262D;margin:2px auto 12px} .phone .biz{font-family:Outfit;font-weight:700;font-size:14px} .phone .biz small{display:block;font-family:'JetBrains Mono';font-weight:500;font-size:10px;letter-spacing:.05em;color:var(--muted);text-transform:uppercase;margin-top:3px} .phone .ask{color:var(--muted);font-size:12px;margin:12px 0 8px} .stars{display:flex;gap:6px} .stars svg{width:22px;height:22px} .stars .star-fill{opacity:0;transform:scale(.6);transform-origin:center;transition:opacity .28s var(--ease),transform .28s var(--ease)} .stars.filled .s1 .star-fill{transition-delay:.05s} .stars.filled .s2 .star-fill{transition-delay:.18s} .stars.filled .s3 .star-fill{transition-delay:.31s} .stars.filled .s4 .star-fill{transition-delay:.44s} .stars.filled .s5 .star-fill{transition-delay:.57s} .stars.filled .star-fill{opacity:1;transform:scale(1)} .review-line{margin-top:12px;border:1px solid var(--hairline);border-radius:10px;padding:9px 10px; background:var(--inset);font-size:11.5px;color:var(--text-soft);line-height:1.5;min-height:52px} #reviewLine{opacity:0;transform:translateY(4px);transition:opacity .5s var(--ease),transform .5s var(--ease)} #reviewLine.show{opacity:1;transform:none} .chip{margin-top:10px;display:inline-flex;align-items:center;gap:6px;font-family:'JetBrains Mono';font-weight:500; font-size:10.5px;letter-spacing:.04em;color:var(--good);background:var(--good-weak);border:1px solid rgba(52,211,153,.28); padding:6px 9px;border-radius:8px;opacity:0;transform:translateY(6px); transition:opacity .32s var(--ease),transform .32s var(--ease);transition-delay:.85s} .device.played .chip{opacity:1;transform:translateY(0)} .panel{display:flex;flex-direction:column;gap:var(--s2)} .panel .head{display:flex;align-items:center;justify-content:space-between} .panel .head .rate{font-family:Outfit;font-weight:700;font-size:15px;color:var(--good)} .funnel{display:flex;flex-direction:column;gap:10px;margin-top:2px} .frow{display:grid;grid-template-columns:78px 1fr 40px;gap:10px;align-items:center;font-size:11.5px} .frow .lbl{color:var(--muted)} .frow .track{height:8px;border-radius:6px;background:var(--raised);overflow:hidden;border:1px solid var(--hairline)} .frow .fill{height:100%;border-radius:6px;background:var(--accent);width:var(--w,50%);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)} .device.played .frow .fill{transform:scaleX(1)} .frow .fill.good{background:var(--good)} .frow .num{text-align:right;font-family:'JetBrains Mono';font-weight:500;color:var(--text)} .divider{height:1px;background:var(--hairline);margin:2px 0} .mini-note{color:var(--muted);font-size:11px;display:flex;gap:7px;align-items:flex-start} .mini-note svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px;color:var(--accent)} /* ---------- how it works ---------- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s5)} .step{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);padding:var(--s3)} .step .ico{width:34px;height:34px;border:1px solid var(--hairline);border-radius:9px;display:grid;place-items:center;margin-bottom:var(--s2);color:var(--text)} .step .ico svg{width:18px;height:18px} .step .idx{font-family:'JetBrains Mono';font-weight:500;font-size:11px;letter-spacing:.08em;color:var(--accent)} .step h3{font-weight:600;font-size:18px;margin-top:var(--s2)} .step p{color:var(--muted);font-size:14px;margin-top:8px} .branch{margin-top:var(--s2);border:1px solid var(--hairline);border-radius:var(--radius);padding:var(--s3);background:var(--surface)} .branch-grid{display:grid;grid-template-columns:1fr 40px 1fr;gap:0;align-items:center;margin-top:var(--s3)} .branch-node{border:1px solid var(--hairline);border-radius:11px;padding:14px 16px;background:var(--raised)} .branch-node.good{border-color:rgba(52,211,153,.35)} .branch-node.private{border-color:var(--accent-ring)} .branch-node .t{font-family:Outfit;font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px} .branch-node .t .tag{font-family:'JetBrains Mono';font-weight:500;font-size:10px;letter-spacing:.05em;padding:3px 7px;border-radius:6px} .branch-node.good .tag{color:var(--good);background:var(--good-weak)} .branch-node.private .tag{color:var(--accent);background:var(--accent-weak)} .branch-node p{color:var(--muted);font-size:13px;margin:8px 0 0} .fork{display:grid;place-items:center;color:var(--muted)} .fork svg{width:40px;height:60px} /* ---------- features (content-led, unequal) ---------- */ .features{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--s2);margin-top:var(--s5)} .feat{border:1px solid var(--hairline);border-radius:var(--radius);background:var(--surface);padding:var(--s4); transition:border-color .2s var(--ease),transform .2s var(--ease),background .2s var(--ease)} .feat:hover{border-color:var(--muted);transform:translateY(-2px);background:var(--hover-surface)} .feat .kicker{display:flex;align-items:center;gap:9px} .feat .kicker .ki{width:30px;height:30px;border:1px solid var(--hairline);border-radius:8px;display:grid;place-items:center;color:var(--accent)} .feat .kicker .ki svg{width:16px;height:16px} .feat h3{font-weight:600;font-size:20px;margin-top:var(--s3)} .feat p{color:var(--muted);font-size:14.5px;margin-top:10px} .feat.tall{grid-row:span 2} .feat .demo{margin-top:var(--s3);border-top:1px solid var(--hairline);padding-top:var(--s3)} .reply{font-size:12.5px} .reply .from{color:var(--star);font-family:'JetBrains Mono';font-weight:500;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase} .reply .q{color:var(--text-soft);margin:6px 0 12px;padding-left:10px;border-left:2px solid var(--hairline)} .reply .draft{background:var(--inset);border:1px solid var(--hairline);border-radius:10px;padding:10px 11px;color:var(--text-soft)} .reply .draft .mono{color:var(--accent);display:block;margin-bottom:6px} .warow{display:flex;align-items:center;gap:10px;margin-top:12px} .warow .avatar{width:28px;height:28px;border-radius:50%;background:var(--raised);border:1px solid var(--hairline);display:grid;place-items:center;color:var(--good)} .warow .avatar svg{width:15px;height:15px} .warow .bubble{background:var(--raised);border:1px solid var(--hairline);border-radius:12px 12px 12px 4px;padding:8px 11px;font-size:12.5px;color:var(--text-soft)} .kpis{display:flex;gap:var(--s3);margin-top:var(--s3);flex-wrap:wrap} .kpi{flex:1;min-width:120px;border:1px solid var(--hairline);border-radius:10px;padding:12px;background:var(--inset)} .kpi .val{font-family:Outfit;font-weight:700;font-size:22px;margin-top:6px} .kpi .bar{height:6px;border-radius:4px;background:var(--raised);margin-top:9px;overflow:hidden} .kpi .bar i{display:block;height:100%;background:var(--accent);width:var(--w,60%)} /* ---------- pricing ---------- */ .prices{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s5);align-items:stretch} .tier{border:1px solid var(--hairline);border-radius:var(--radius);background:var(--surface);padding:var(--s4);display:flex;flex-direction:column; transition:border-color .2s var(--ease),transform .2s var(--ease)} .tier:hover{border-color:var(--muted);transform:translateY(-2px)} .tier.feature{border-color:var(--accent);box-shadow:0 24px 60px -34px var(--accent)} .tier .name{font-family:'JetBrains Mono';font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .tier.feature .name{color:var(--accent)} .tier .top{display:flex;align-items:center;gap:8px} .tier .price{font-family:Outfit;font-weight:800;font-size:34px;margin-top:var(--s2);display:flex;align-items:baseline;gap:6px;color:var(--text)} .tier .price small{font-size:14px;font-weight:500;color:var(--muted);font-family:Inter} .tier .gst{font-size:12px;color:var(--muted);margin-top:4px} .tier .line{color:var(--muted);font-size:14px;margin:var(--s3) 0} .tier ul{list-style:none;margin:0 0 var(--s4);padding:0;display:flex;flex-direction:column;gap:10px} .tier li{display:flex;gap:9px;font-size:14px;color:var(--text-soft)} .tier li svg{width:16px;height:16px;flex:0 0 auto;color:var(--good);margin-top:3px} .tier .btn{margin-top:auto;width:100%} .best{margin-left:auto;font-family:'JetBrains Mono';font-weight:500;font-size:10px;letter-spacing:.06em;color:var(--accent);border:1px solid var(--accent-ring);padding:3px 8px;border-radius:6px} /* ---------- footer ---------- */ footer{border-top:1px solid var(--hairline);padding:var(--s6) 0 var(--s5);background:var(--surface)} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s4)} .foot-brand .brand{margin-bottom:var(--s2)} .foot-brand p{color:var(--muted);font-size:14px;max-width:34ch} .foot-col h4{font-family:'JetBrains Mono';font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s2)} .foot-col a{display:block;color:var(--text-soft);font-size:14px;padding:5px 0;transition:color .16s var(--ease)} .foot-col a:hover{color:var(--text)} .foot-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--hairline);color:var(--muted);font-size:13px;flex-wrap:wrap;gap:var(--s2)} .foot-bottom .mono{font-size:11px} /* ---------- long-form content pages (legal, blog, seo, about, contact) ---------- */ .doc{padding:var(--s6) 0 var(--s7)} .doc h1{font-weight:800;font-size:clamp(30px,4vw,44px)} .doc h2{font-weight:700;font-size:clamp(20px,2.6vw,28px);margin:var(--s5) 0 var(--s2)} .doc h3{font-weight:600;font-size:18px;margin:var(--s3) 0 6px} .doc p,.doc ul,.doc ol{color:var(--text-soft);max-width:68ch;margin-top:var(--s2)} .doc p.muted,.muted{color:var(--muted)} .doc ul,.doc ol{padding-left:22px} .doc li{margin:6px 0} .doc a{color:var(--accent);text-decoration:underline;text-underline-offset:2px} .doc a:hover{color:var(--accent-hover)} .crumbs{font-size:13px;color:var(--muted);margin-bottom:var(--s3)} .crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--text)} .sample{background:var(--surface);border:1px solid var(--hairline);border-radius:14px;padding:18px 20px;margin:var(--s3) 0;max-width:65ch} .sample .st{color:var(--star);font-size:16px;letter-spacing:3px;margin-bottom:8px} .sample p{font-size:15px;margin:0} .cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:var(--s4)} .cards .card{background:var(--surface);border:1px solid var(--hairline);border-radius:14px;padding:22px} .cards .card h3{margin-top:0;font-weight:600} .cards .card p{font-size:14.5px;color:var(--muted);margin-top:8px} .typegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:var(--s4)} .typegrid a{border:1px solid var(--hairline);background:var(--surface);border-radius:10px;padding:12px 16px;font-size:14px;color:var(--text)} .typegrid a:hover{border-color:var(--accent)} .tablewrap{overflow-x:auto;margin-top:var(--s4)} table.cmp{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--surface);border:1px solid var(--hairline);border-radius:12px} table.cmp th,table.cmp td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--hairline)} table.cmp th{font-family:Outfit;font-weight:700;color:var(--text)} table.cmp td{color:var(--text-soft)} .faq details{border-bottom:1px solid var(--hairline);padding:16px 0;max-width:74ch} .faq summary{font-family:Outfit;font-weight:600;cursor:pointer;font-size:15.5px;color:var(--text)} .faq summary::marker{color:var(--muted)} .faq p{margin-top:10px;color:var(--muted);font-size:15px} .ctaband{margin-top:var(--s6);background:var(--surface);border:1px solid var(--hairline);border-radius:18px;padding:var(--s5);text-align:center} .ctaband h2{margin:0 0 8px;font-weight:700;font-size:clamp(22px,3vw,30px)} .ctaband p{color:var(--muted);margin:0 auto var(--s3);max-width:52ch} .ctaband .btn{margin-top:4px} .d{font-family:Outfit,system-ui,sans-serif;font-weight:800;letter-spacing:-.02em} /* Links styled as buttons or cards escape the doc link colour + underline. */ .doc .btn{text-decoration:none;color:var(--accent-fg)} .doc .btn-ghost{color:var(--text)} .doc .typegrid a,.doc .cards .card{text-decoration:none;color:var(--text)} /* ---------- responsive ---------- */ @media (max-width:960px){ .hero-grid{grid-template-columns:1fr;gap:var(--s5)} .hero-visual{order:2} .features{grid-template-columns:1fr} .feat.tall{grid-row:auto} .prices{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr} } @media (max-width:760px){ .nav-links{display:none} .nav-inner{gap:var(--s2)} .steps{grid-template-columns:1fr} .branch-grid{grid-template-columns:1fr;gap:var(--s2)} .fork{transform:rotate(90deg);height:36px} .hero{padding-top:var(--s5)} } @media (max-width:440px){ .signin{display:none} .nav-inner{gap:10px} .wrap{padding:0 var(--s2)} .phone-row{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr} .hero-meta{gap:var(--s3)} .cta-row{flex-direction:column} .cta-row .btn{width:100%} } @media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important} .stars .star-fill{opacity:1;transform:none} .chip{opacity:1;transform:none} .frow .fill{transform:scaleX(1)} #reviewLine{opacity:1;transform:none} }