/* ---------- settr · design tokens (aligned with app spec) ---------- */ /* Global: prevent single-word orphans on all headings */ h1, h2, h3 { text-wrap: balance; } :root{ /* canvas / surface */ --bg: #FAFAF8; /* warm off-white canvas */ --surface: #FFFFFF; /* card surface */ --canvas-tint: #F4F3EF; /* deeper warm tint for thumbnails */ /* text greys */ --fg: #171717; /* primary */ --fg-2: #404040; /* almost-primary */ --muted: #525252; /* muted */ --muted-2: #737373; /* subtle */ --faint: #a3a3a3; /* faint label */ --ghost: #d4d4d4; /* ghost */ /* borders (soft, never heavy) */ --line-soft: rgba(0,0,0,0.04); --line: rgba(0,0,0,0.06); --line-strong: rgba(0,0,0,0.10); /* state colours — used only when something has a state */ --state-pos: #357a4a; --state-warn: #a05a14; --state-danger: #a13a30; --state-info: #3b5870; /* calm slate */ --signal: var(--state-pos); --signal-soft: color-mix(in oklab, var(--state-pos) 14%, transparent); /* radii */ --r-card: 14px; --r-btn: 8px; --r-thumb: 8px; --r-badge: 3px; --r-bar: 2px; /* fonts */ --font-display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; } /* Accent variants driven by data-accent on */ html[data-accent="slate"] { --signal: #3b5870; } html[data-accent="amber"] { --signal: #a05a14; } html[data-accent="mono"] { --signal: #171717; } html[data-accent="signal"] { --signal: #357a4a; } html[data-density="compact"] { --pad: 28px; --gap: 14px; } html[data-density="comfortable"] { --pad: 40px; --gap: 22px; } *{ box-sizing: border-box; } html, body{ margin:0; padding:0; background: var(--bg); color: var(--fg); } /* Global emphasis — slightly bolder than body, same colour. Used sparingly. */ strong{ font-weight: 500; color: inherit; } em{ font-style: normal; font-weight: 500; color: inherit; } body{ font-family: var(--font-sans); font-size: 14px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; letter-spacing: 0; } a{ color: inherit; text-decoration: none; } button{ font-family: inherit; } /* ---------- Layout shell ---------- */ .page{ min-height: 100vh; display: flex; flex-direction: column; position: relative; isolation: isolate; } /* hairline grid backdrop — extremely subtle, off by default */ html[data-grid="true"] .page::before{ content:""; position: fixed; inset: 0; background-image: linear-gradient(to right, var(--line-soft) 1px, transparent 1px), linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px); background-size: 96px 96px; pointer-events:none; z-index: 0; mask-image: radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 90%); } /* corner registration marks — off by default, surface only when grid is on */ html[data-grid="true"] .reg{ position: fixed; width: 8px; height: 8px; border: 1px solid var(--ghost); z-index: 0; pointer-events: none; } html:not([data-grid="true"]) .reg{ display: none; } .reg.tl{ top:18px; left:18px; border-right:0; border-bottom:0; } .reg.tr{ top:18px; right:18px; border-left:0; border-bottom:0; } .reg.bl{ bottom:18px; left:18px; border-right:0; border-top:0; } .reg.br{ bottom:18px; right:18px; border-left:0; border-top:0; } .container{ width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 40px; position: relative; z-index: 1; } /* ---------- Sticky site nav (all pages) ---------- */ .site-nav-wrap{ position: sticky; top: 0; z-index: 90; width: 100%; } .site-nav-wrap--light{ background: var(--bg); color: var(--fg); box-shadow: 0 1px 0 var(--line); } .site-nav-wrap--light .nav{ border-bottom: 0; } .hl-nav-wrap, .site-nav-wrap--dark{ background: #161614; color: #FAFAF8; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05); } .hl-nav-wrap .nav, .site-nav-wrap--dark .nav{ border-bottom: 0; } .hl-nav-wrap .brand, .site-nav-wrap--dark .brand{ color: #FAFAF8; } .hl-nav-wrap .brand-wm, .hl-nav-wrap .brand-mark img, .site-nav-wrap--dark .brand-wm, .site-nav-wrap--dark .brand-mark img{ filter: invert(1) brightness(1.05); } .hl-nav-wrap .brand-tag, .site-nav-wrap--dark .brand-tag{ color: rgba(250,250,248,0.5); border-color: rgba(250,250,248,0.14); } .hl-nav-wrap .nav-links a, .site-nav-wrap--dark .nav-links a{ color: rgba(250,250,248,0.62); } .hl-nav-wrap .nav-links a:hover, .site-nav-wrap--dark .nav-links a:hover{ color: #FAFAF8; } .hl-nav-wrap .nav-links a[data-active="true"], .site-nav-wrap--dark .nav-links a[data-active="true"]{ color: #FAFAF8; } .hl-nav-wrap .nav-login, .site-nav-wrap--dark .nav-login{ color: rgba(250,250,248,0.62); } .hl-nav-wrap .nav-login:hover, .site-nav-wrap--dark .nav-login:hover{ color: #FAFAF8; } .hl-nav-wrap .nav-cta, .site-nav-wrap--dark .nav-cta{ background: #FAFAF8; color: #161614; border-color: #FAFAF8; } .hl-nav-wrap .nav-cta:hover, .site-nav-wrap--dark .nav-cta:hover{ background: transparent; color: #FAFAF8; border-color: rgba(250,250,248,0.4); } /* ---------- Nav ---------- */ .nav{ display:flex; align-items:center; justify-content:space-between; padding: 22px 0; border-bottom: 1px solid var(--line); } .brand{ display:flex; align-items:center; gap: 10px; font-family: var(--font-display); font-weight: 500; font-size: 17px; letter-spacing: -0.015em; color: var(--fg); } .brand-wm{ display: block; height: 17px; width: auto; } .brand-mark{ width: 22px; height: 22px; position: relative; display:inline-grid; place-items:center; } .brand-mark svg{ display:block; } .brand-tag{ font-family: var(--font-sans); font-size: 10px; color: var(--faint); letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 6px; border: 1px solid var(--line); border-radius: var(--r-badge); margin-left: 6px; } .nav-links{ display:flex; align-items:center; gap: 28px; list-style:none; margin:0; padding:0; white-space: nowrap; } .nav-links a{ font-size: 13px; color: var(--muted); letter-spacing: 0; position: relative; padding: 4px 0; font-weight: 400; } .nav-links a:hover{ color: var(--fg); } .nav-links a[data-active="true"]{ color: var(--fg); font-weight: 500; } .nav-cta{ display:inline-flex; align-items:center; gap: 8px; background: var(--fg); color: #FAFAF8; border: 1px solid var(--fg); padding: 10px 18px; font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0; border-radius: var(--r-btn); cursor: pointer; transition: background .15s ease; white-space: nowrap; flex: 0 0 auto; } .nav-cta:hover{ background: #2a2a2a; } /* — Client login: subtle text link before the dark CTA — */ .nav-end{ display: inline-flex; align-items: center; gap: 0; } .nav-login{ display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 13px; font-weight: 400; color: var(--muted); padding: 4px 0; margin-right: 18px; letter-spacing: 0; white-space: nowrap; transition: color .15s ease; background: transparent; border: 0; cursor: pointer; } .nav-login::before{ content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--ghost); display: inline-block; transition: background .15s ease; } .nav-login:hover{ color: var(--fg); } .nav-login:hover::before{ background: var(--state-pos); } /* ---------- Hero ---------- */ .hero{ display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; padding: 64px 0 56px; position: relative; align-items: start; } .hero > *{ min-width: 0; } .hero-left{ position: relative; padding-right: 4px; } .kicker{ display:inline-flex; align-items:center; gap: 10px; font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); padding-bottom: 24px; font-weight: 400; } .kicker .bar{ width: 22px; height: 1px; background: var(--ghost); } .kicker .live{ display: none; } .kicker .live::before{ content: none; } .headline{ font-family: var(--font-display); font-weight: 300; font-size: clamp(48px, 6.2vw, 88px); line-height: 1.0; letter-spacing: -0.025em; margin: 0 0 28px; color: var(--fg); } .headline .emph{ /* No decoration. Same family, weight, colour — the words carry it. */ font: inherit; color: inherit; letter-spacing: inherit; } /* Rotating headline word — sales → bookings → leads → (loop). Slot is taller than the line so descenders (g, p) never clip. */ .headline .rota{ display:inline-block; vertical-align:top; height:1.18em; overflow:hidden; position:relative; } .headline .rota-track{ display:flex; flex-direction:column; will-change:transform; animation: hero-rota 9s cubic-bezier(0.72, 0, 0.18, 1) infinite; } .headline .rota-track > span{ display:block; height:1.32em; line-height:1.0; white-space:nowrap; } @keyframes hero-rota{ 0%, 24% { transform: translateY(0); } 30%, 57% { transform: translateY(-1.32em); } 63%, 90% { transform: translateY(-2.64em); } 96%, 100% { transform: translateY(-3.96em); } } @media (prefers-reduced-motion: reduce){ .headline .rota-track{ animation: none; } } .subhead{ font-size: 16px; line-height: 1.55; color: var(--muted); max-width: 560px; margin: 0 0 28px; letter-spacing: 0; font-weight: 400; } .subhead strong{ color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; } .micro{ display:flex; flex-direction: column; gap: 8px; padding: 16px 0 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 32px; max-width: 560px; } .micro-row{ display:flex; align-items:center; gap: 12px; font-size: 13px; color: var(--muted); white-space: nowrap; } .micro-row .tick{ width: 14px; height: 1px; background: var(--muted-2); flex: 0 0 auto; } .micro-row strong{ color: var(--fg); font-weight: 500; } .cta-row{ display:flex; align-items: stretch; gap: 10px; flex-wrap: wrap; } .cta{ display:inline-flex; align-items:center; gap: 10px; font-family: var(--font-sans); font-size: 13px; border-radius: var(--r-btn); cursor: pointer; letter-spacing: 0; font-weight: 500; transition: background .15s ease, color .15s ease, border-color .15s ease; white-space: nowrap; } .cta.primary{ background: var(--fg); color: #FAFAF8; border: 1px solid var(--fg); padding: 11px 18px; } .cta.primary:hover{ background: #2a2a2a; } .cta.primary .arr{ transition: transform .2s ease; } .cta.primary:hover .arr{ transform: translateX(2px); } .cta.secondary{ background: transparent; color: var(--muted); border: 1px solid var(--line-strong); padding: 11px 16px; font-weight: 400; } .cta.secondary:hover{ border-color: var(--fg); color: var(--fg); } .cta .arr svg{ display:block; } /* annotations sprinkled around the left column */ .annot{ position: absolute; font-family: var(--font-sans); font-size: 10.5px; color: var(--faint); letter-spacing: 0.06em; text-transform: uppercase; display:none; align-items:center; gap:8px; } .annot .ln{ width: 14px; height:1px; background: var(--ghost); } /* ---------- Right: system visual ---------- */ .hero-right{ position: relative; min-height: 600px; display:flex; align-items: stretch; } /* ---------- Stacked layout variant ---------- */ .hero--stacked{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 56px; padding: 80px 0 64px; } .hero-copy{ display: flex; flex-direction: column; align-items: center; max-width: 760px; width: 100%; } .hero-copy .kicker{ padding-bottom: 28px; } .hero-copy .headline{ font-size: clamp(48px, 6vw, 84px); letter-spacing: -0.028em; line-height: 0.98; margin: 0 0 24px; /* allow the full single-line headline; only break if container is too narrow */ white-space: nowrap; } @media (max-width: 720px){ .hero-copy .headline{ white-space: normal; } } .hero-copy .subhead{ max-width: 620px; text-align: center; margin: 0; } /* ==================================================================== Marquee banner — slow ticker above nav. Confident, dark, non-pushy. ==================================================================== */ .marquee{ position: relative; background: #161614; color: #FAFAF8; overflow: hidden; font-family: var(--font-sans); z-index: 5; isolation: isolate; } .marquee::after{ content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.25) 100%); } .marquee-track{ display: inline-flex; align-items: center; white-space: nowrap; padding: 9px 0; animation: marquee 65s linear infinite; will-change: transform; } .marquee:hover .marquee-track{ animation-play-state: paused; } @media (prefers-reduced-motion: reduce){ .marquee-track{ animation: none; } } .m-item{ display: inline-flex; align-items: baseline; gap: 9px; padding: 0 22px; font-size: 12.5px; position: relative; } .m-item::after{ content: ""; position: absolute; right: -3px; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: rgba(250,250,248,0.22); transform: translateY(-50%); } .m-v{ font-family: var(--font-display); font-weight: 500; font-size: 13.5px; color: #FAFAF8; letter-spacing: -0.012em; font-variant-numeric: tabular-nums; } .m-t{ color: rgba(250,250,248,0.62); font-size: 12px; letter-spacing: 0; } .marquee-fade{ position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; } .marquee-fade-l{ left: 0; background: linear-gradient(to right, #161614 30%, rgba(22,22,20,0)); } .marquee-fade-r{ right: 0; background: linear-gradient(to left, #161614 30%, rgba(22,22,20,0)); } @keyframes marquee{ 0% { transform: translateX(0); } 100% { transform: translateX(-33.3333%); } } /* ==================================================================== Today's pipeline — replaces the old stat-band. Shows that the model is opinionated (disqualify slice) and operating at real volume. ==================================================================== */ .today{ margin-top: 36px; width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 10px; text-align: left; } .today-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-family: var(--font-sans); } .today-l{ display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .today-tag{ display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); white-space: nowrap; } .today-tag .tt-dot{ display: none; } .today-v{ font-family: var(--font-display); font-size: 14.5px; letter-spacing: -0.012em; color: var(--fg); font-weight: 400; white-space: nowrap; } .today-v strong{ font-weight: 500; font-variant-numeric: tabular-nums; } .today-sep{ color: var(--ghost); } .today-meta{ font-family: var(--font-sans); font-size: 12px; color: var(--muted); white-space: nowrap; } .today-stamp{ font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); white-space: nowrap; } /* segmented bar — flex-grow weights determine width */ .today-bar{ display: flex; height: 9px; border-radius: 999px; overflow: hidden; background: var(--canvas-tint); border: 1px solid var(--line); gap: 2px; padding: 1px; } .td-seg{ height: 100%; display: block; border-radius: 999px; transition: opacity .2s ease; } .td-seg:hover{ opacity: 0.85; } /* segment colors */ .td-disqualify{ background: #c14a3e; } .td-disqualify .td-dot{ background: #c14a3e; } .td-retest{ background: #c8851a; } .td-retest .td-dot{ background: #c8851a; } .td-paid{ background: var(--state-pos); } .td-paid .td-dot{ background: var(--state-pos); } .td-affiliate{ background: #3b5870; } .td-affiliate .td-dot{ background: #3b5870; } .td-whitelist{ background: #6b8d4a; } .td-whitelist .td-dot{ background: #6b8d4a; } .today-legend{ display: flex; align-items: center; gap: 16px 22px; flex-wrap: wrap; font-family: var(--font-sans); font-size: 11.5px; color: var(--muted); } .td-leg{ display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; } .td-dot{ width: 7px; height: 7px; border-radius: 2px; align-self: center; flex: 0 0 auto; } .td-leg-k{ color: var(--muted); letter-spacing: 0; } .td-leg-v{ color: var(--fg); font-family: var(--font-display); font-weight: 500; font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: -0.012em; } .td-leg-p{ color: var(--faint); font-family: var(--font-mono); font-size: 10.5px; font-variant-numeric: tabular-nums; } @media (max-width: 720px){ .today{ margin-top: 28px; } .today-stamp{ display: none; } .today-legend{ gap: 10px 14px; } } .hero-system{ width: 100%; /* match container content width — no separate narrower cap so the visual visually anchors with everything else on the page */ max-width: 1200px; margin: 0 auto; text-align: left; /* reset — only copy is centered */ } .hero-tail{ display: flex; flex-direction: column; align-items: center; gap: 28px; width: 100%; margin-top: 8px; } .hero-tail .micro{ border-top: 0; border-bottom: 0; padding: 0; margin-bottom: 0; align-items: center; max-width: 600px; } .hero-tail .micro-row{ justify-content: center; font-size: 14px; color: var(--muted); } .hero-tail .micro-row .tick{ display: none; } .hero-tail .cta-row{ justify-content: center; } /* ---------- Proof strip ---------- */ .proof{ border-top: 1px solid var(--line); padding: 28px 0 36px; display:grid; grid-template-columns: repeat(3, 1fr); gap: 40px; position: relative; } .proof::before{ content:""; position:absolute; left: 33.33%; top: 28px; bottom: 36px; width: 1px; background: var(--line); } .proof::after{ content:""; position:absolute; left: 66.66%; top: 28px; bottom: 36px; width: 1px; background: var(--line); } .proof-item{ display:flex; flex-direction: column; gap: 8px; padding-left: 16px; padding-right: 16px; } .proof-item:first-child{ padding-left: 0; } .proof-num{ font-family: var(--font-sans); font-size: 11px; color: var(--faint); letter-spacing: 0.06em; text-transform: uppercase; } .proof-title{ font-family: var(--font-display); font-size: 17px; font-weight: 400; letter-spacing: -0.01em; color: var(--fg); } .proof-desc{ font-size: 13px; color: var(--muted); line-height: 1.55; max-width: 32ch; } /* ---------- Brand banner -------------------------------------------- Editorial brand grid. A 2–6 column responsive grid of bordered plates. Each plate carries an index tag, a category overline, and the brand wordmark, set in display type. Grid borders sit on the container so adjacent cells share a single hairline. -------------------------------------------------------------------- */ .bb{ margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); } .bb-head{ display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; } .bb-k{ display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); } .bb-bar{ display: inline-block; width: 22px; height: 1px; background: var(--ghost); } .bb-count{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); } .bb-grid{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--line); gap: 1px; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; } .bb-cell{ background: var(--surface); padding: 22px 22px 20px; display: grid; grid-template-rows: auto 1fr auto; min-height: 132px; position: relative; transition: background .2s ease; } .bb-cell:hover{ background: var(--canvas-tint); } .bb-idx{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--faint); font-variant-numeric: tabular-nums; } .bb-cat{ align-self: end; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); padding-bottom: 6px; } .bb-name{ font-family: var(--font-display); font-weight: 500; font-size: 21px; line-height: 1.05; letter-spacing: -0.012em; color: var(--fg); text-wrap: balance; } /* small hairline accent at the top of each cell that grows on hover */ .bb-cell::before{ content: ""; position: absolute; left: 22px; top: 0; height: 2px; width: 22px; background: var(--fg); opacity: 0; transition: opacity .2s ease, width .2s ease; } .bb-cell:hover::before{ opacity: 1; width: 44px; } /* CTA-styled tail cell — same shape, different fill, arrow link */ .bb-cell-cta{ background: var(--canvas-tint); } .bb-cell-cta:hover{ background: #efede7; } .bb-cell-cta .bb-cat{ color: var(--state-pos); } .bb-cta-link{ display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 500; font-size: 21px; line-height: 1.05; letter-spacing: -0.012em; color: var(--fg); text-decoration: none; } .bb-cta-link svg{ transition: transform .2s ease; } .bb-cell-cta:hover .bb-cta-link svg{ transform: translateX(4px); } /* ---------- Responsiveness ---------- */ @media (max-width: 1180px){ .hero{ gap: 36px; } .container{ padding: 0 32px; } .nav-links{ gap: 22px; } .bb-name{ font-size: 19px; } } @media (max-width: 900px){ .hero{ grid-template-columns: 1fr; gap: 48px; padding: 48px 0; } .hero-right{ min-height: 520px; } .container{ padding: 0 24px; } .nav-links{ display:none; } .bb-grid{ grid-template-columns: repeat(3, 1fr); } .bb-cell{ min-height: 116px; padding: 18px 18px 16px; } } @media (max-width: 640px){ .container{ padding: 0 20px; } .proof{ grid-template-columns: 1fr; gap: 24px; } .proof::before, .proof::after{ display:none; } .bb-grid{ grid-template-columns: repeat(2, 1fr); } .bb-name, .bb-cta-link{ font-size: 17px; } .bb-cell{ min-height: 104px; } }