/* ==================================================================== */ /* ZeroDev design system - single source of truth for every page. */ /* */ /* Extracted from the ZeroScript landing, which defined the look. */ /* Any new page links this file and writes only its own page-specific */ /* rules on top. Never redefine a token below in a page. */ /* */ /* Fonts (load in before this file): */ /* Space Grotesk 500,700 - Hanken Grotesk 400,500,600 - JetBrains Mono */ /* ==================================================================== */ :root{ /* paper and ink */ --paper:#edeeea; --paper-2:#e5e6e0; --ink:#0b0b0c; --ink-soft:#26261f; --graphite:#56574f; --line:#d4d5cd; --line-2:#c2c3b9; --stud:#f8f8f5; --white:#ffffff; /* accent */ --blue:#1e3af0; --blue-deep:#13207e; --blue-bg:#e6e9fd; --neg:#b23b2c; /* shape */ --radius:10px; --radius-lg:14px; } *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ font-family:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:var(--paper); color:var(--ink-soft); line-height:1.6; -webkit-font-smoothing:antialiased; } a{ color:inherit; text-decoration:none; } ::selection{ background:var(--blue); color:#fff; } .wrap{ max-width:1140px; margin:0 auto; padding:0 24px; } .wrap-narrow{ max-width:780px; margin:0 auto; padding:0 24px; } /* -------------------------------------------------------------------- */ /* type */ /* -------------------------------------------------------------------- */ h1,h2,h3,.display{ font-family:'Space Grotesk',sans-serif; color:var(--ink); } .mono{ font-family:'JetBrains Mono',monospace; } h2{ font-size:clamp(1.85rem,3.4vw,2.65rem); letter-spacing:-.03em; font-weight:700; margin:14px 0 12px; line-height:1.06; } /* the bracket motif - ZeroDev's signature */ .eyebrow{ font-family:'JetBrains Mono',monospace; font-size:.74rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--graphite); display:flex; align-items:center; gap:10px; } .eyebrow::before{ content:"<"; color:var(--blue); font-weight:700; } .eyebrow::after{ content:">"; color:var(--blue); font-weight:700; } .eyebrow.center{ justify-content:center; } /* -------------------------------------------------------------------- */ /* the grid backdrop - used behind heroes and CTA bands */ /* -------------------------------------------------------------------- */ .gridbg{ position:relative; overflow:hidden; } .gridbg::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:30px 30px; -webkit-mask-image:radial-gradient(120% 85% at 50% 8%, #000 35%, transparent 78%); mask-image:radial-gradient(120% 85% at 50% 8%, #000 35%, transparent 78%); opacity:.6; } .gridbg > *{ position:relative; z-index:1; } /* -------------------------------------------------------------------- */ /* buttons */ /* -------------------------------------------------------------------- */ .btn{ display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:var(--radius); font-weight:600; font-size:.96rem; transition:transform .14s ease, background .14s ease, border-color .14s ease; cursor:pointer; border:1.5px solid transparent; font-family:'Hanken Grotesk',sans-serif; } .btn svg{ width:18px; height:18px; } .btn-primary{ background:var(--blue); color:#fff; border-color:var(--blue); } .btn-primary:hover{ background:var(--blue-deep); border-color:var(--blue-deep); transform:translateY(-1px); } .btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink); } .btn-ghost:hover{ background:var(--ink); color:var(--paper); transform:translateY(-1px); } /* -------------------------------------------------------------------- */ /* nav */ /* -------------------------------------------------------------------- */ nav{ position:sticky; top:0; z-index:50; background:rgba(237,238,234,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); } nav .row{ display:flex; align-items:center; justify-content:space-between; height:64px; } .brand{ display:flex; align-items:center; gap:9px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.12rem; letter-spacing:-.01em; color:var(--ink); } .brand img{ width:26px; height:26px; display:block; border-radius:7px; } /* Brand lockup: the product is the wordmark, ZeroDev is the parent it belongs to. The rule between them ties the two together instead of leaving the attribution floating next to the logo. Visitors search for the product, so it leads; the parent still appears on every page so the shop builds recognition. */ .brand-lockup{ display:flex; align-items:center; gap:12px; } .parent-mark{ font-family:'JetBrains Mono',monospace; font-size:.74rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--graphite); padding-left:12px; border-left:1px solid var(--line-2); line-height:1.1; } .parent-mark:hover{ color:var(--ink); } @media(max-width:520px){ .parent-mark{ display:none; } } .nav-links{ display:flex; align-items:center; gap:28px; } .nav-links .lnk{ color:var(--graphite); font-size:.9rem; font-weight:500; } .nav-links .lnk:hover{ color:var(--ink); } @media(max-width:820px){ .nav-links .lnk{ display:none; } } /* -------------------------------------------------------------------- */ /* sections */ /* -------------------------------------------------------------------- */ section{ padding:74px 0; } .sec-head{ max-width:660px; } .sec-head.center{ margin:0 auto; text-align:center; } .sec-head.center .eyebrow{ justify-content:center; } .section-sub{ color:var(--graphite); font-size:1.05rem; max-width:600px; } .sec-head.center .section-sub{ margin:0 auto; } .alt{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } /* -------------------------------------------------------------------- */ /* cards - the catalogue building block */ /* -------------------------------------------------------------------- */ .card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; } .tool-card{ display:flex; flex-direction:column; gap:4px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px 24px; transition:transform .16s ease, border-color .16s ease; } .tool-card:hover{ border-color:var(--blue); transform:translateY(-2px); } .tool-card .top{ display:flex; align-items:center; gap:12px; margin-bottom:10px; } .tool-card img{ width:40px; height:40px; border-radius:10px; display:block; flex-shrink:0; } .tool-card .name{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.18rem; color:var(--ink); letter-spacing:-.01em; } .tool-card .tagline{ color:var(--ink-soft); font-size:.98rem; font-weight:500; } .tool-card .desc{ color:var(--graphite); font-size:.92rem; margin-top:4px; } .tool-card .go{ margin-top:16px; display:inline-flex; align-items:center; gap:6px; color:var(--blue); font-family:'JetBrains Mono',monospace; font-size:.78rem; font-weight:500; letter-spacing:.04em; } .tool-card:hover .go{ color:var(--blue-deep); } .tool-card .go svg{ width:15px; height:15px; } /* a slot for a tool that does not exist yet - keeps the grid honest */ .tool-card.soon{ background:var(--stud); border-style:dashed; color:var(--graphite); align-items:flex-start; justify-content:center; } .tool-card.soon:hover{ transform:none; border-color:var(--line-2); } /* tag chip */ .chip{ font-family:'JetBrains Mono',monospace; font-size:.64rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:6px; background:var(--blue-bg); color:var(--blue-deep); white-space:nowrap; } /* -------------------------------------------------------------------- */ /* framed showcase - hard offset shadow */ /* -------------------------------------------------------------------- */ .frame{ border:1.5px solid var(--ink); border-radius:var(--radius-lg); overflow:hidden; background:var(--white); box-shadow:14px 14px 0 -2px var(--paper-2), 14px 14px 0 -1px var(--line-2); } .frame .bar{ display:flex; align-items:center; gap:7px; padding:11px 15px; border-bottom:1px solid var(--line); background:var(--stud); } .frame .bar i{ width:11px; height:11px; border-radius:50%; background:var(--line-2); display:block; } .frame img{ display:block; width:100%; height:auto; } /* -------------------------------------------------------------------- */ /* prose - for legal and text-heavy pages */ /* -------------------------------------------------------------------- */ .prose h2{ font-size:1.5rem; margin:44px 0 14px; letter-spacing:-.02em; } .prose h2:first-child{ margin-top:0; } .prose h3{ font-size:1.06rem; font-weight:700; margin:26px 0 8px; } .prose p{ margin-bottom:14px; color:var(--ink-soft); } .prose ul{ list-style:none; margin:0 0 18px; display:flex; flex-direction:column; gap:10px; } .prose ul li{ display:flex; gap:11px; align-items:flex-start; color:var(--ink-soft); } .prose ul li::before{ content:"-"; color:var(--blue); font-weight:700; flex-shrink:0; } .prose a{ color:var(--blue); font-weight:600; border-bottom:1px solid var(--blue-bg); } .prose a:hover{ border-color:var(--blue); } .prose .note{ color:var(--graphite); font-size:.92rem; } /* callout box */ .callout{ background:var(--white); border:1px solid var(--line); border-left:3px solid var(--blue); border-radius:var(--radius); padding:20px 22px; margin:20px 0; } .callout .k{ font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--graphite); display:block; margin-bottom:6px; } /* -------------------------------------------------------------------- */ /* faq */ /* -------------------------------------------------------------------- */ details{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:18px 22px; margin-bottom:11px; } details[open]{ border-color:var(--line-2); } summary{ font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:1.02rem; color:var(--ink); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; } summary::-webkit-details-marker{ display:none; } summary::after{ content:"+"; color:var(--blue); font-size:1.3rem; font-weight:400; } details[open] summary::after{ content:"\2212"; } details p{ color:var(--graphite); margin-top:12px; font-size:.96rem; } /* -------------------------------------------------------------------- */ /* footer - identical on every page, disclaimer included */ /* -------------------------------------------------------------------- */ footer{ border-top:1px solid var(--line); padding:42px 0; color:var(--graphite); font-size:.88rem; } footer .row{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:flex-start; } footer a{ color:var(--graphite); } footer a:hover{ color:var(--ink); } .foot-links{ display:flex; gap:20px; flex-wrap:wrap; font-family:'JetBrains Mono',monospace; font-size:.84rem; } .foot-legal{ margin-top:14px; font-size:.78rem; color:var(--graphite); opacity:.85; max-width:640px; } /* -------------------------------------------------------------------- */ /* motion */ /* -------------------------------------------------------------------- */ @media(prefers-reduced-motion:no-preference){ .reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; } .reveal.in{ opacity:1; transform:none; } }