/* ============================================================ VELOCITY GTM — Design System Clean white · bold black type · one accent (blue) Hanken Grotesk × IBM Plex Mono Fonts are loaded via + preconnect in each page (faster than @import, which chains behind this stylesheet). ============================================================ */ :root { /* ---- color ---- */ --paper: #FBFBFC; --surface: #FFFFFF; --surface-2: #F4F5F7; --surface-3: #ECEEF1; --ink: #14161A; --ink-2: #3D424B; --muted: #71757E; --line: #E6E7EC; --line-2: #D7D9E0; --accent: #2A6FDB; --accent-ink: #1B57B5; --accent-soft:#EAF1FC; --accent-line:#C6DBF7; --green: #1B8A57; --green-soft: #E6F3EC; --red: #CF4242; --red-soft: #FBEAEA; --amber: #B8821F; /* ---- type ---- */ --font-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; /* ---- radius ---- */ --r-xs: 6px; --r-sm: 9px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* ---- shadow ---- */ --sh-xs: 0 1px 2px rgba(20,22,26,.05); --sh-sm: 0 2px 6px rgba(20,22,26,.06), 0 1px 2px rgba(20,22,26,.04); --sh-md: 0 8px 24px rgba(20,22,26,.08), 0 2px 6px rgba(20,22,26,.05); --sh-lg: 0 24px 60px rgba(20,22,26,.12), 0 8px 20px rgba(20,22,26,.07); /* ---- layout ---- */ --maxw: 1200px; --gutter: clamp(20px, 4vw, 48px); --nav-h: 68px; } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; } body { font-family: var(--font-sans); background: var(--paper); color: var(--ink); line-height: 1.55; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } ul { list-style: none; } ::selection { background: var(--accent); color: #fff; } /* ---------- layout helpers ---------- */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(60px, 7vw, 104px); } .section-tight { padding-block: clamp(44px, 5vw, 72px); } .eyebrow { font-family: var(--font-mono); font-size: .85rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: .6em; } .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); } .eyebrow.on-dark { color: #8FB6F2; } .eyebrow.on-dark::before { background: #8FB6F2; } /* ---------- type ---------- */ h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.02em; line-height: 1.05; color: var(--ink); text-wrap: balance; } .display { font-size: clamp(2.7rem, 5.6vw, 4.7rem); font-weight: 800; letter-spacing: -.035em; line-height: .98; } .h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); letter-spacing: -.028em; } .h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); letter-spacing: -.02em; } .lead { font-size: clamp(1.1rem, 1.5vw, 1.32rem); line-height: 1.5; color: var(--ink-2); font-weight: 400; text-wrap: pretty; } .muted { color: var(--muted); } .accent-text { color: var(--accent); } .mono { font-family: var(--font-mono); } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; font-family: var(--font-sans); font-weight: 600; font-size: 1rem; line-height: 1; padding: .92em 1.4em; border-radius: var(--r-sm); transition: transform .16s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease; white-space: nowrap; cursor: pointer; } .btn svg { width: 1.05em; height: 1.05em; } .btn-primary { background: var(--ink); color: #fff; box-shadow: var(--sh-sm); } .btn-primary:hover { background: #000; transform: translateY(-1px); box-shadow: var(--sh-md); } .btn-accent { background: var(--accent); color: #fff; box-shadow: var(--sh-sm); } .btn-accent:hover { background: var(--accent-ink); transform: translateY(-1px); box-shadow: var(--sh-md); } .btn-ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); } .btn-ghost:hover { border-color: var(--ink); transform: translateY(-1px); } .btn-light { background: #fff; color: var(--ink); } .btn-light:hover { transform: translateY(-1px); box-shadow: var(--sh-md); } .btn-outline-light { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.28); } .btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,.07); } .btn-lg { font-size: 1.06rem; padding: 1.05em 1.7em; } .btn-arrow { transition: transform .18s ease; } .btn:hover .btn-arrow { transform: translateX(3px); } /* ---------- tags / chips ---------- */ .tag { display: inline-flex; align-items: center; gap: .45em; font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .02em; padding: .38em .65em; border-radius: var(--r-xs); background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); } .tag-green { background: var(--green-soft); color: var(--green); border-color: #CBE6D6; } .tag-blue { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-line); } .tag-red { background: var(--red-soft); color: var(--red); border-color: #F1CFCF; } .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; } /* ---------- nav ---------- */ .nav { position: sticky; top: 0; z-index: 100; height: var(--nav-h); background: rgba(251,251,252,.78); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s ease, background .2s ease; } .nav.scrolled { border-bottom-color: var(--line); } .nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; letter-spacing: -.03em; font-size: 1.18rem; } .brand-mark { width: 28px; height: 28px; border-radius: 8px; background: #061022; overflow: hidden; display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } .brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; } .brand sup { font-family: var(--font-mono); font-size: .52em; font-weight: 500; color: var(--accent); letter-spacing: .05em; top: -.7em; } .nav-links { display: flex; align-items: center; gap: 1.25rem; } .nav-links a { white-space: nowrap; } .brand { white-space: nowrap; } .nav-links a { font-size: .96rem; font-weight: 500; color: var(--ink-2); transition: color .15s ease; } .nav-links a:hover { color: var(--ink); } .nav-cta { display: flex; align-items: center; gap: .8rem; } .nav-toggle { display: none; } /* mobile drawer */ .nav-drawer { display: none; position: absolute; top: var(--nav-h); left: 0; right: 0; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--sh-md); flex-direction: column; gap: .25rem; padding: 1rem var(--gutter) 1.4rem; } .nav-drawer[data-open] { display: flex; } .nav-drawer a { padding: .7rem 0; font-weight: 500; color: var(--ink-2); border-bottom: 1px solid var(--line); } .nav-drawer a.btn { color: #fff; border: none; justify-content: center; margin-top: .8rem; } /* ---------- footer ---------- */ .footer { background: var(--ink); color: #C9CCD2; padding-block: clamp(40px, 5vw, 52px) 40px; } .footer a { color: #C9CCD2; transition: color .15s ease; } .footer a:hover { color: #fff; } .footer-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.1); } .footer .brand { color: #fff; } .footer-col h5 { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #7C808A; font-weight: 500; margin-bottom: 1rem; } .footer-col a { display: block; padding-block: .35rem; font-size: .96rem; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 28px; font-size: .85rem; color: #7C808A; flex-wrap: wrap; } .footer-tagline { max-width: 30ch; color: #9498A0; font-size: .96rem; margin-top: 1rem; line-height: 1.5; } /* ---------- generic card ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); } /* ---------- mock UI primitives (shared) ---------- */ .ui { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-md); overflow: hidden; } .ui-bar { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line); background: var(--surface); } .ui-bar .dots { display: flex; gap: 6px; } .ui-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); display: inline-block; } .ui-title { font-family: var(--font-mono); font-size: .76rem; color: var(--muted); } /* data table */ .dtable { width: 100%; border-collapse: collapse; font-size: .82rem; } .dtable th { text-align: left; font-family: var(--font-mono); font-weight: 500; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: .6rem .8rem; border-bottom: 1px solid var(--line); background: var(--surface-2); } .dtable td { padding: .62rem .8rem; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; } .dtable tr:last-child td { border-bottom: none; } .cell-name { color: var(--ink); font-weight: 600; } .cell-mono { font-family: var(--font-mono); font-size: .76rem; } .avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); display: inline-grid; place-items: center; font-size: .64rem; font-weight: 700; font-family: var(--font-mono); flex: none; } /* ---------- reveal-on-scroll (JS-gated so no-JS / IO-less contexts render) ---------- */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); } .reveal.in { opacity: 1; transform: none; } /* Above-the-fold hero paints immediately: don't let JS hide/fade the LCP text. */ .js .hero .reveal { opacity: 1; transform: none; transition: none; } .reveal[data-d="1"] { transition-delay: .08s; } .reveal[data-d="2"] { transition-delay: .16s; } .reveal[data-d="3"] { transition-delay: .24s; } .reveal[data-d="4"] { transition-delay: .32s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ---------- section header block ---------- */ .shead { max-width: 720px; } .shead .eyebrow { margin-bottom: 1.1rem; } .shead .lead { margin-top: 1.1rem; } .center { text-align: center; margin-inline: auto; } /* ---------- divider ---------- */ .rule { height: 1px; background: var(--line); border: none; } /* ---------- responsive ---------- */ @media (max-width: 1024px) { .nav-links { display: none; } .nav-cta > .btn-primary { display: none; } .nav-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--line-2); } } @media (max-width: 940px) { .nav-links { display: none; } .nav-cta > .btn-primary { display: none; } .nav-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--line-2); } .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; } .footer .footer-col.brand-col { grid-column: 1 / -1; } } @media (max-width: 560px) { body { font-size: 16px; } .footer-top { grid-template-columns: 1fr; } }