/* ========================================================================== GrowthRig — Design System Brand: Rig Black #141619 · Steel #32383F · Worklight #D9FF43 Cloud #F5F6F3 · Concrete #B9BEC3 · White #FFFFFF Type: Satoshi (display + body), JetBrains Mono (technical labels) ========================================================================== */ /* ---------- Self-hosted fonts ---------- Served from this origin, so no cross-origin stylesheet sits on the critical path. Both files are variable, so one request covers every weight the site asks for. Satoshi is preloaded from each page's ; that URL and the src here must stay byte-identical or the browser downloads the font twice. */ @font-face { font-family: 'Satoshi'; src: url('/assets/fonts/satoshi-var.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/jetbrains-mono-var.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; } /* ---------- Type Scale (fluid) ---------- */ :root { --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem); --text-sm: clamp(0.875rem, 0.8rem + 0.25vw, 0.9375rem); --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem); --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem); --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem); --text-3xl: clamp(2.5rem, 1rem + 4vw, 4.75rem); --text-hero: clamp(2.75rem, 0.8rem + 6vw, 6rem); /* ---------- Spacing (4px base) ---------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* ---------- Brand raw palette ---------- */ --rig-black: #141619; --steel: #32383F; --worklight: #D9FF43; --cloud: #F5F6F3; --concrete: #B9BEC3; --white: #FFFFFF; /* Derived tints/shades */ --rig-black-90: #1b1e22; --rig-black-80: #23272c; --steel-40: #4a525b; --steel-20: #78818e; /* 4.6:1 on Rig Black — footer label text */ --worklight-dim: #b8d93a; --cloud-2: #ebede8; --line-dark: rgba(255,255,255,0.10); --line-dark-strong: rgba(255,255,255,0.18); /* ---------- Radius ---------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-full: 9999px; --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1); /* ---------- Content widths ---------- */ --content-narrow: 680px; --content-default: 1000px; --content-wide: 1240px; /* ---------- Fonts ---------- */ --font-display: 'Satoshi', 'Inter', system-ui, sans-serif; --font-body: 'Satoshi', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; } /* ========================================================================== Semantic theme tokens — LIGHT (default): Cloud surfaces, Rig Black ink ========================================================================== */ :root, [data-theme='light'] { --color-bg: var(--cloud); --color-surface: var(--white); --color-surface-2: var(--cloud-2); --color-ink: var(--rig-black); --color-text: #2b3036; --color-text-muted: #5c646d; --color-text-faint: #636a73; /* 4.6:1 on the darkest light surface */ --color-text-inverse: var(--cloud); --color-border: #d6d9d2; --color-divider: #e2e4de; --color-accent: var(--worklight); --color-accent-ink: var(--rig-black); /* text on accent */ --color-accent-line: #94b028; /* accent that reads on light bg */ --shadow-sm: 0 1px 2px rgba(20,22,25,0.06); --shadow-md: 0 8px 28px rgba(20,22,25,0.08); --shadow-lg: 0 20px 60px rgba(20,22,25,0.14); --mono-label: var(--color-text-faint); } /* ========================================================================== DARK: Rig Black surfaces — this is the brand's native mode ========================================================================== */ [data-theme='dark'] { --color-bg: var(--rig-black); --color-surface: var(--rig-black-90); --color-surface-2: var(--rig-black-80); --color-ink: var(--cloud); --color-text: #d3d7db; --color-text-muted: #9aa1a9; --color-text-faint: #899098; /* 4.6:1 on the lightest dark surface */ --color-text-inverse: var(--rig-black); --color-border: rgba(255,255,255,0.12); --color-divider: rgba(255,255,255,0.08); --color-accent: var(--worklight); --color-accent-ink: var(--rig-black); --color-accent-line: var(--worklight); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 8px 28px rgba(0,0,0,0.45); --shadow-lg: 0 24px 60px rgba(0,0,0,0.6); --mono-label: var(--color-text-muted); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --color-bg: var(--rig-black); --color-surface: var(--rig-black-90); --color-surface-2: var(--rig-black-80); --color-ink: var(--cloud); --color-text: #d3d7db; --color-text-muted: #9aa1a9; --color-text-faint: #899098; /* 4.6:1 on the lightest dark surface */ --color-text-inverse: var(--rig-black); --color-border: rgba(255,255,255,0.12); --color-divider: rgba(255,255,255,0.08); --color-accent-line: var(--worklight); --mono-label: #9aa1a9; } } /* ========================================================================== Base reset ========================================================================== */ *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: none; text-size-adjust: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: 6rem; } body { min-height: 100dvh; line-height: 1.6; font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text); background-color: var(--color-bg); transition: background-color 300ms ease, color 300ms ease; overflow-x: hidden; } img,picture,video,canvas,svg { display: block; max-width: 100%; height: auto; } ul[role='list'],ol[role='list'] { list-style: none; } input,button,textarea,select { font: inherit; color: inherit; } h1,h2,h3,h4,h5,h6 { text-wrap: balance; line-height: 1.08; font-family: var(--font-display); color: var(--color-ink); letter-spacing: -0.02em; font-weight: 700; } p,li { text-wrap: pretty; } p { max-width: 68ch; } a { color: inherit; text-decoration: none; } ::selection { background: var(--worklight); color: var(--rig-black); } :focus-visible { outline: 2px solid var(--color-accent-line); outline-offset: 3px; border-radius: var(--radius-sm); } button { cursor: pointer; background: none; border: none; } a,button,[role='button'],input,textarea,select { transition: color var(--transition-interactive), background var(--transition-interactive), border-color var(--transition-interactive), box-shadow var(--transition-interactive), transform var(--transition-interactive); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } @media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; } } /* ========================================================================== Layout primitives ========================================================================== */ .wrap { width: 100%; max-width: var(--content-wide); margin-inline: auto; padding-inline: var(--space-6); } .wrap--default { max-width: var(--content-default); } .wrap--narrow { max-width: var(--content-narrow); } .section { padding-block: clamp(var(--space-16), 9vw, var(--space-32)); } .section--tight { padding-block: clamp(var(--space-12), 6vw, var(--space-20)); } .section--dark { background: var(--rig-black); color: #d3d7db; } .section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4 { color: var(--cloud); } .section--steel { background: var(--color-surface-2); } /* Technical mono label / eyebrow */ .eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.22em; text-transform: uppercase; color: var(--mono-label); display: inline-flex; align-items: center; gap: var(--space-3); } .eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--color-accent-line); display: inline-block; } .section--dark .eyebrow { color: var(--concrete); } .section--dark .eyebrow::before { background: var(--worklight); } /* Thin technical divider */ .rule { height: 1px; background: var(--color-divider); border: 0; width: 100%; } .rule--accent { background: linear-gradient(90deg, var(--color-accent-line) 0%, var(--color-accent-line) 64px, var(--color-divider) 64px); } /* ========================================================================== Header ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--color-bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--color-divider); transition: box-shadow 300ms ease, transform 350ms cubic-bezier(0.16,1,0.3,1); } .site-header.is-scrolled { box-shadow: var(--shadow-sm); } .nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); height: 72px; } .brand { display: flex; align-items: center; gap: var(--space-3); } .brand img { height: 36px; width: auto; } .brand .logo-light { display: block; } .brand .logo-dark { display: none; } [data-theme='dark'] .brand .logo-light { display: none; } [data-theme='dark'] .brand .logo-dark { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .brand .logo-light { display: none; } :root:not([data-theme]) .brand .logo-dark { display: block; } } .nav-links { display: flex; align-items: center; gap: var(--space-2); list-style: none; } .nav-links a { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); position: relative; } .nav-links a:hover { color: var(--color-ink); } .nav-links a[aria-current='page'] { color: var(--color-ink); } .nav-links a[aria-current='page']::after { content: ''; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 2px; height: 2px; background: var(--color-accent-line); } .nav-actions { display: flex; align-items: center; gap: var(--space-2); } .theme-toggle { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--color-text-muted); border: 1px solid transparent; } .theme-toggle:hover { color: var(--color-ink); background: var(--color-surface-2); } .nav-cta-desktop { min-height: 40px; padding: var(--space-2) var(--space-5); font-size: var(--text-sm); } @media (max-width: 900px) { .nav-cta-desktop { display: none !important; } } .nav-toggle { display: none; width: 44px; height: 44px; place-items: center; color: var(--color-ink); border-radius: var(--radius-sm); } .nav-toggle:hover { background: var(--color-surface-2); } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 48px; padding: var(--space-3) var(--space-6); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.01em; border: 1px solid transparent; white-space: nowrap; } .btn svg { width: 18px; height: 18px; } .btn--primary { background: var(--worklight); color: var(--rig-black); box-shadow: 0 0 0 0 rgba(217,255,67,0.0); } .btn--primary:hover { background: #e6ff66; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(217,255,67,0.28); } .btn--primary:active { transform: translateY(0); } .btn--secondary { background: transparent; color: var(--color-ink); border-color: var(--color-border); } .btn--secondary:hover { border-color: var(--color-ink); transform: translateY(-2px); } .section--dark .btn--secondary { color: var(--cloud); border-color: var(--line-dark-strong); } .section--dark .btn--secondary:hover { border-color: var(--cloud); } .hero .btn--secondary, .cta-band .btn--secondary { color: var(--cloud); border-color: var(--line-dark-strong); } .hero .btn--secondary:hover, .cta-band .btn--secondary:hover { border-color: var(--cloud); } .btn--ghost { padding-inline: 0; min-height: auto; color: var(--color-ink); position: relative; } .btn .arrow { transition: transform var(--transition-interactive); } .btn:hover .arrow { transform: translateX(4px); } /* ========================================================================== Hero ========================================================================== */ .hero { position: relative; background: var(--rig-black); color: #d3d7db; overflow: hidden; padding-block: clamp(var(--space-20), 12vw, 10rem); } .hero__grid-bg { position: absolute; inset: 0; background-image: linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(120% 100% at 20% 0%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(120% 100% at 20% 0%, #000 20%, transparent 75%); opacity: 0.7; } /* Forward-track diagonal motif */ .hero__track { position: absolute; top: 0; bottom: 0; right: -10%; width: 55%; pointer-events: none; opacity: 0.9; } .hero .wrap { position: relative; z-index: 1; } .hero__inner { max-width: 62ch; } .hero h1 { color: var(--white); font-size: var(--text-hero); font-weight: 800; letter-spacing: -0.035em; margin-top: var(--space-6); line-height: 1.02; } .hero h1 .accent { color: var(--worklight); } .hero__sub { font-size: var(--text-lg); color: var(--concrete); margin-top: var(--space-6); max-width: 54ch; } .hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-10); } /* ========================================================================== Systems visual (text + line diagram) ========================================================================== */ .systems-visual { margin-top: var(--space-16); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); padding-block: var(--space-8); display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; } .systems-visual__node { padding: var(--space-4) var(--space-5); position: relative; } .systems-visual__node:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 60%; background: var(--line-dark); } .systems-visual__k { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--concrete); } .systems-visual__v { color: var(--white); font-weight: 600; margin-top: var(--space-2); font-size: var(--text-sm); } .systems-visual__flow { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--worklight), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: flowline 4.5s linear infinite; } @keyframes flowline { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } } @media (max-width: 720px) { .systems-visual { grid-template-columns: 1fr 1fr; gap: var(--space-2); } .systems-visual__node:nth-child(2)::after, .systems-visual__node:last-child::after { display: none; } } /* ========================================================================== Section headings ========================================================================== */ .section-head { max-width: 60ch; margin-bottom: clamp(var(--space-10), 5vw, var(--space-16)); } .section-head h2 { font-size: var(--text-2xl); margin-top: var(--space-5); font-weight: 800; } .section-head p { margin-top: var(--space-5); color: var(--color-text-muted); font-size: var(--text-lg); } .section--dark .section-head p { color: var(--concrete); } /* ========================================================================== Problem block ========================================================================== */ .problem { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(var(--space-10), 6vw, var(--space-24)); align-items: start; } .leak-list { list-style: none; display: grid; gap: 0; } .leak-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--color-divider); align-items: baseline; } .leak-list li:last-child { border-bottom: 1px solid var(--color-divider); } .leak-list .num { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-accent-line); letter-spacing: 0.1em; } .leak-list .txt strong { color: var(--color-ink); font-weight: 600; display: block; } .leak-list .txt span { color: var(--color-text-muted); font-size: var(--text-sm); } @media (max-width: 820px) { .problem { grid-template-columns: 1fr; } } /* ========================================================================== Capability grid ========================================================================== */ .cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); border-radius: var(--radius-md); overflow: hidden; } .cap { background: var(--color-surface); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); min-height: 220px; position: relative; transition: background var(--transition-interactive); } .cap:hover { background: var(--color-surface-2); } .cap__idx { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-faint); letter-spacing: 0.12em; } .cap__icon { color: var(--color-accent-line); margin-bottom: var(--space-2); } .cap__icon svg { width: 26px; height: 26px; } .cap h3 { font-size: var(--text-lg); font-weight: 700; } .cap p { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; } .cap::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--color-accent-line); transition: width 300ms cubic-bezier(0.16,1,0.3,1); } .cap:hover::after { width: 100%; } @media (max-width: 900px) { .cap-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .cap-grid { grid-template-columns: 1fr; } } /* ========================================================================== Promise band ========================================================================== */ .promise { display: grid; grid-template-columns: auto 1fr; gap: clamp(var(--space-6), 4vw, var(--space-12)); align-items: center; } .promise__mark { font-family: var(--font-mono); color: var(--worklight); writing-mode: vertical-rl; font-size: var(--text-xs); letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.9; } .promise__text { font-family: var(--font-display); font-size: clamp(1.75rem, 1rem + 3vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; color: var(--white); } .promise__text .hl { color: var(--worklight); } @media (max-width: 640px) { .promise { grid-template-columns: 1fr; } .promise__mark { writing-mode: horizontal-tb; } } /* ========================================================================== Pricing ========================================================================== */ .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: stretch; } .price-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-5); position: relative; } .price-card--featured { border-color: var(--color-accent-line); box-shadow: var(--shadow-md); } [data-theme='dark'] .price-card--featured { border-color: var(--worklight); } .price-card__badge { position: absolute; top: calc(-1 * var(--space-3)); left: var(--space-8); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; background: var(--worklight); color: var(--rig-black); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); font-weight: 600; } .price-card__name { font-size: var(--text-lg); font-weight: 700; } .price-card__tier { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-faint); } .price-card__scope { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--color-accent-line); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding-block: var(--space-3); } .price-card__price { margin: 0; display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; } .price-card__amount { font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; } .price-card__per { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); } .price-card__usage { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--color-text-muted); } .price-features { list-style: none; display: grid; gap: var(--space-3); margin-top: var(--space-2); } .price-features li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text); align-items: start; } .price-features svg { width: 16px; height: 16px; color: var(--color-accent-line); margin-top: 3px; flex-shrink: 0; } .price-features--out li { color: var(--color-text-muted); } .price-features--out svg { color: var(--color-text-faint); } .price-features__label { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-faint); } .price-card .btn { margin-top: auto; } .price-note { margin-top: var(--space-8); font-size: var(--text-sm); color: var(--color-text-muted); font-family: var(--font-mono); letter-spacing: 0.02em; } @media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } } /* ========================================================================== Steps (How it works) ========================================================================== */ .steps { display: grid; gap: 0; } .step { display: grid; grid-template-columns: 140px 1fr; gap: clamp(var(--space-6), 4vw, var(--space-12)); padding-block: clamp(var(--space-8), 5vw, var(--space-16)); border-top: 1px solid var(--color-divider); position: relative; } .step:last-child { border-bottom: 1px solid var(--color-divider); } .step__num { font-family: var(--font-mono); font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; color: var(--color-accent-line); line-height: 1; letter-spacing: -0.02em; } .section--dark .step__num { color: var(--worklight); } .step h2, .step h3 { font-size: var(--text-xl); margin-bottom: var(--space-4); } .step p { color: var(--color-text-muted); } .section--dark .step { border-color: var(--line-dark); } .section--dark .step p { color: var(--concrete); } @media (max-width: 640px) { .step { grid-template-columns: 1fr; gap: var(--space-4); } } /* Split lists (you provide / GrowthRig handles) */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-12); } .split__col { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); } .section--dark .split__col { background: var(--rig-black-90); border-color: var(--line-dark); } .split__col h3 { font-size: var(--text-lg); margin-bottom: var(--space-5); display: flex; align-items: center; gap: var(--space-3); } .split__col h3 .tag { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; color: var(--color-accent-line); text-transform: uppercase; font-weight: 500; } .check-list { list-style: none; display: grid; gap: var(--space-3); } .check-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); font-size: var(--text-sm); align-items: start; } .check-list svg { width: 16px; height: 16px; color: var(--color-accent-line); margin-top: 4px; flex-shrink: 0; } .section--dark .check-list li { color: var(--concrete); } @media (max-width: 720px) { .split { grid-template-columns: 1fr; } } /* ========================================================================== Services list ========================================================================== */ .svc-list { display: grid; gap: 0; } .svc { display: grid; grid-template-columns: 64px 1fr auto; gap: clamp(var(--space-4), 3vw, var(--space-8)); padding-block: var(--space-8); border-top: 1px solid var(--color-divider); align-items: start; } .svc:last-child { border-bottom: 1px solid var(--color-divider); } .svc__idx { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-accent-line); letter-spacing: 0.08em; padding-top: 4px; } .svc__body h2, .svc__body h3 { font-size: var(--text-lg); margin-bottom: var(--space-3); } .svc__body p { color: var(--color-text-muted); font-size: var(--text-sm); } .svc__out { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--color-text-faint); text-align: right; max-width: 200px; padding-top: 4px; } @media (max-width: 760px) { .svc { grid-template-columns: 40px 1fr; } .svc__out { grid-column: 2; text-align: left; padding-top: var(--space-2); } } /* ========================================================================== About prose ========================================================================== */ .prose-lead { font-size: var(--text-xl); color: var(--color-ink); font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; max-width: 24ch; } .section--dark .prose-lead { color: var(--cloud); } .about-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(var(--space-8), 6vw, var(--space-20)); align-items: start; } .about-grid p { color: var(--color-text-muted); margin-bottom: var(--space-5); } .section--dark .about-grid p { color: var(--concrete); } .about-pillars { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-10); } .about-pillars li { display: grid; gap: var(--space-2); border-top: 1px solid var(--color-divider); padding-top: var(--space-4); } .section--dark .about-pillars li { border-color: var(--line-dark); } .about-pillars .k { font-weight: 700; color: var(--color-ink); } .section--dark .about-pillars .k { color: var(--cloud); } .about-pillars .d { font-size: var(--text-sm); color: var(--color-text-muted); } .section--dark .about-pillars .d { color: var(--concrete); } @media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; } .about-pillars { grid-template-columns: 1fr; } } /* ========================================================================== Form (growth audit) ========================================================================== */ .audit-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(var(--space-8), 6vw, var(--space-20)); align-items: start; } .audit-info h2 { font-size: var(--text-2xl); } .audit-info p { color: var(--color-text-muted); margin-top: var(--space-5); } .audit-checklist { list-style: none; display: grid; gap: var(--space-3); margin-top: var(--space-8); } .audit-checklist li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); font-size: var(--text-sm); align-items: start; } .audit-checklist svg { width: 16px; height: 16px; color: var(--color-accent-line); margin-top: 4px; flex-shrink: 0; } .audit-notice { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-6); font-size: var(--text-sm); color: var(--color-text); background: var(--color-surface-2); border: 1px solid var(--color-divider); border-left: 3px solid var(--color-accent-line); padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); } .audit-notice svg { width: 18px; height: 18px; color: var(--color-accent-line); flex-shrink: 0; margin-top: 2px; } .btn[disabled], .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } .form-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: clamp(var(--space-6), 4vw, var(--space-10)); box-shadow: var(--shadow-md); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); } .field { display: flex; flex-direction: column; gap: var(--space-2); } .field--full { grid-column: 1 / -1; } /* Field hint text. Sits under the input it describes and is wired up with aria-describedby, so screen readers read the format guidance with the field. */ .field__hint { font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-faint); } /* The consent fieldset is a grid child now (it sits directly under the phone field), so the grid gap owns its spacing. */ .form-grid .consent { margin-top: 0; } .field label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); } .field label .opt { color: var(--color-text-faint); text-transform: none; letter-spacing: 0; } .field input, .field select, .field textarea { min-height: 48px; padding: var(--space-3) var(--space-4); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); font-size: var(--text-base); width: 100%; } .field textarea { min-height: 120px; resize: vertical; padding-top: var(--space-3); } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-accent-line); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-line) 22%, transparent); } .field select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235c646d' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-4) center; padding-right: var(--space-10); } /* SMS consent. Both boxes are optional and unchecked; nothing here may visually suggest otherwise, so the block gets no accent fill, no pre-selected state, and the same weight as the surrounding help text. */ .consent { margin-top: var(--space-6); padding: var(--space-5); border: 1px solid var(--color-divider); border-radius: var(--radius-sm); background: var(--color-surface-2); } .consent__legend { padding: 0 var(--space-2); margin-left: calc(var(--space-2) * -1); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); } .consent__legend .opt { color: var(--color-text-faint); text-transform: none; letter-spacing: 0; } .consent__item { display: flex; align-items: flex-start; gap: var(--space-3); } .consent__item + .consent__item { margin-top: var(--space-4); } .consent__item input[type='checkbox'] { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 24px; height: 24px; margin: 0; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; } .consent__item input[type='checkbox']:checked { background: var(--color-accent-line); border-color: var(--color-accent-line); /* Dark tick on both themes: the accent is mid-green on light and near-yellow on dark, and white reads poorly against either. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23141619' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } .consent__item label { font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-muted); cursor: pointer; /* Pads the row out to a comfortable tap target without inflating the box. */ padding: var(--space-1) 0; } .consent__note { margin-top: var(--space-4); font-size: var(--text-xs); line-height: 1.6; color: var(--color-text-faint); } .consent__note a { color: var(--color-text-muted); text-decoration: underline; text-decoration-color: var(--color-accent-line); text-underline-offset: 3px; } .consent__note a:hover { color: var(--color-text); } .form-actions { margin-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); } .form-actions .btn { width: 100%; } .form-note { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); background: var(--color-surface-2); border: 1px solid var(--color-divider); border-left: 3px solid var(--color-accent-line); padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); } .form-note svg { width: 18px; height: 18px; color: var(--color-accent-line); flex-shrink: 0; margin-top: 2px; } .form-privacy { margin-top: var(--space-4); font-size: var(--text-xs); line-height: 1.6; color: var(--color-text-faint); } .form-privacy a { color: var(--color-text-muted); text-decoration: underline; text-decoration-color: var(--color-accent-line); text-underline-offset: 3px; } .form-privacy a:hover { color: var(--color-text); } .form-status { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); font-family: var(--font-mono); min-height: 1.2em; } .form-status--error { color: #d92d20; } .form-status--success { color: var(--color-accent-line); } /* Temporary state shown in place of the Growth Audit form while CONTACT_FORM_ENABLED is false in js/site-config.js. Same card, same tokens — nothing here is a new visual language. */ .form-card--paused { display: flex; flex-direction: column; gap: var(--space-4); } .form-card--paused .eyebrow { margin-bottom: var(--space-2); } .paused-title { font-size: var(--text-lg); line-height: 1.25; margin: 0; color: var(--color-text); } .paused-copy { margin: 0; color: var(--color-text-muted); font-size: var(--text-base); } .paused-copy a { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-accent-line); text-underline-offset: 3px; } .form-card--paused .form-privacy { margin-top: var(--space-2); } .form-hp { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (max-width: 900px) { .audit-layout { grid-template-columns: 1fr; } } @media (max-width: 520px) { .form-grid { grid-template-columns: 1fr; } } /* ========================================================================== CTA band ========================================================================== */ .cta-band { background: var(--rig-black); color: var(--cloud); border-radius: var(--radius-lg); padding: clamp(var(--space-10), 6vw, var(--space-20)); position: relative; overflow: hidden; } .cta-band__grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(90% 120% at 100% 0%, #000, transparent 70%); -webkit-mask-image: radial-gradient(90% 120% at 100% 0%, #000, transparent 70%); opacity: 0.6; } .cta-band > * { position: relative; z-index: 1; } .cta-band h2 { color: var(--white); font-size: var(--text-2xl); max-width: 20ch; } .cta-band p { color: var(--concrete); margin-top: var(--space-4); max-width: 52ch; } .cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); } /* ========================================================================== Footer ========================================================================== */ .site-footer { background: var(--rig-black); color: var(--concrete); padding-block: var(--space-16) var(--space-8); border-top: 1px solid var(--line-dark); } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-8); padding-bottom: var(--space-12); border-bottom: 1px solid var(--line-dark); } .footer-brand img { height: 32px; width: auto; margin-bottom: var(--space-5); } .footer-brand p { color: var(--concrete); font-size: var(--text-sm); max-width: 40ch; } .footer-col h2 { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel-20); margin-bottom: var(--space-4); font-weight: 500; } .footer-col ul { list-style: none; display: grid; gap: var(--space-3); } .footer-col a { font-size: var(--text-sm); color: var(--concrete); } .footer-col a:hover { color: var(--white); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-top: var(--space-8); flex-wrap: wrap; } .footer-bottom p { font-size: var(--text-xs); color: var(--steel-20); font-family: var(--font-mono); letter-spacing: 0.04em; } .footer-tag { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--worklight); letter-spacing: 0.06em; } .footer-legal { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-5); } .footer-legal a { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--steel-20); } .footer-legal a:hover, .footer-legal a[aria-current="page"] { color: var(--worklight); } @media (max-width: 980px) { .footer-top { grid-template-columns: 1fr 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } /* Legal entity / DBA disclosure. Required on every public page, so it lives in the shared footer rather than on the legal pages alone. Same mono treatment as the copyright line; --steel-20 on --rig-black is the AA-checked footer pair. */ .footer-entity { margin-top: var(--space-4); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--steel-20); } /* Chat / SMS disclosure beside the floating chat launcher. The launcher owns the bottom-right corner, so this sits bottom-left and stays clear of it. Kept deliberately quiet: it is a disclosure, not a promotion. */ /* Chat / SMS disclosure chip ------------------------------------------------------------------ The chat launcher is vendor-hosted and can take a mobile number inside the conversation, so the sender, frequency, rates, STOP and HELP wording has to be reachable right there. A persistent card big enough to carry that sentence covers form fields and footer links on a phone, so the resting state is a single 44px chip stacked above the launcher and the wording lives in a native
panel that the visitor opens. No JS is required, and opening it grants nothing. */ .chat-consent { position: fixed; right: var(--space-4); /* Clears the launcher (~3.5rem plus its own inset) instead of sitting on it. */ bottom: calc(var(--space-4) + 4.5rem); z-index: 40; max-width: min(22rem, calc(100vw - 2 * var(--space-4))); } /* column-reverse, not order, because Chrome wraps the content of a
in its own slot: the panel is not a direct flex item, so only reversing the container lifts it above the chip. Opening upward keeps the panel clear of the chat launcher below it. */ .chat-consent__box { display: flex; flex-direction: column-reverse; align-items: flex-end; } .chat-consent__chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--color-divider); border-radius: 999px; background: var(--color-surface-2); color: var(--color-text-muted); font-size: var(--text-xs); line-height: 1.2; cursor: pointer; list-style: none; user-select: none; transition: color var(--transition-interactive), border-color var(--transition-interactive); } .chat-consent__chip::-webkit-details-marker { display: none; } .chat-consent__chip:hover { color: var(--color-text); border-color: var(--color-text-muted); } .chat-consent__chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .chat-consent__icon { width: 1.125rem; height: 1.125rem; flex: none; } /* The panel opens upward so it never grows down over the launcher. */ .chat-consent__panel { margin-bottom: var(--space-2); max-height: min(60vh, 22rem); overflow-y: auto; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-divider); border-radius: var(--radius-sm); background: var(--color-surface-2); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); } .chat-consent__panel p { font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-muted); } .chat-consent__panel p + p { margin-top: var(--space-2); } .chat-consent__note { font-style: italic; } .chat-consent__panel a { color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 2px; } .chat-consent__panel a:hover { color: var(--color-text); } .chat-consent__box[open] .chat-consent__chip { color: var(--color-text); border-color: var(--color-text-muted); } /* On a phone the chip drops its label and becomes a single round 44px target in the launcher's own column, so the disclosure adds no new footprint over the page content. */ @media (max-width: 720px) { .chat-consent { right: var(--space-3); bottom: calc(var(--space-3) + 4.75rem); max-width: calc(100vw - 2 * var(--space-3)); } /* The label stays visible at every width — a disclosure the visitor cannot read is not a disclosure — it just gets shorter wording room. */ .chat-consent__chip { padding: 0 var(--space-3); font-size: 0.6875rem; } .chat-consent__panel p { font-size: 0.75rem; } } /* Set by js/main.js while the closed chip would cover something the visitor needs — a field, a button, a legal link, the footer disclosure. It stops being visible and stops taking clicks, so it cannot obstruct either. */ .chat-consent--tucked { opacity: 0; pointer-events: none; } .chat-consent { transition: opacity 150ms ease; } @media (prefers-reduced-motion: reduce) { .chat-consent, .chat-consent__chip { transition: none; } } @media (max-width: 720px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } /* ========================================================================== Legal / long-form prose (privacy notice) ========================================================================== */ .legal-meta { margin-top: var(--space-6); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mono-label); } .legal-prose { max-width: 70ch; } .legal-prose h2 { font-size: var(--text-xl); margin-top: var(--space-16); padding-top: var(--space-6); border-top: 1px solid var(--color-divider); } .legal-prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .legal-prose h3 { font-size: var(--text-lg); margin-top: var(--space-10); } .legal-prose p, .legal-prose li { color: var(--color-text-muted); } .legal-prose p { margin-top: var(--space-5); } .legal-prose ul { margin-top: var(--space-5); padding-left: var(--space-5); display: grid; gap: var(--space-3); } .legal-prose li { padding-left: var(--space-2); } .legal-prose li::marker { color: var(--color-accent-line); } .legal-prose strong { color: var(--color-text); font-weight: 600; } .legal-prose a { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-accent-line); text-underline-offset: 3px; } .legal-prose a:hover { text-decoration-thickness: 2px; } /* ========================================================================== Reveal-on-scroll motion ========================================================================== */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms cubic-bezier(0.16,1,0.3,1), transform 700ms cubic-bezier(0.16,1,0.3,1); } .reveal.is-visible { opacity: 1; transform: none; } /* ========================================================================== Mobile nav ========================================================================== */ @media (max-width: 900px) { .nav-toggle { display: grid; } .nav-links { position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--color-bg); border-bottom: 1px solid var(--color-divider); padding: var(--space-4) var(--space-6) var(--space-8); transform: translateY(-120%); transition: transform 350ms cubic-bezier(0.16,1,0.3,1); box-shadow: var(--shadow-lg); z-index: 90; } .nav-links.is-open { transform: translateY(0); } .nav-links a { padding: var(--space-4) var(--space-2); font-size: var(--text-base); border-bottom: 1px solid var(--color-divider); } .nav-links a[aria-current='page']::after { display: none; } .nav-links li:last-child a { border-bottom: none; } .nav-cta-mobile { margin-top: var(--space-4); } .nav-cta-mobile .btn { width: 100%; } } @media (min-width: 901px) { .nav-cta-mobile { display: none; } } /* ========================================================================== Package comparison table Desktop: a real 4-column matrix. ≤900px the header row is dropped and each feature row becomes its own block, with the tier name carried by data-tier — a horizontally scrolling table would trip the zero-overflow e2e check. ========================================================================== */ .compare-wrap { margin-top: var(--space-12); } .compare { width: 100%; border-collapse: collapse; text-align: left; font-size: var(--text-sm); } .compare th, .compare td { padding: var(--space-4) var(--space-4); vertical-align: top; } .compare thead th { border-bottom: 1px solid var(--color-text-faint); font-size: var(--text-xs); font-family: var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text); white-space: nowrap; } .compare thead th span { display: block; margin-top: var(--space-2); letter-spacing: 0.04em; text-transform: none; color: var(--color-text-muted); } .compare tbody th { font-weight: 500; color: var(--color-text); border-bottom: 1px solid var(--color-divider); width: 34%; } .compare tbody td { border-bottom: 1px solid var(--color-divider); color: var(--color-text-muted); } .compare__group th { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent-line); padding-top: var(--space-8); border-bottom: 1px solid var(--color-border); width: auto; } .compare__yes { color: var(--color-accent-line); font-weight: 600; } .compare__no { color: var(--color-text-faint); } @media (max-width: 900px) { .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; } .compare tbody tr { padding-block: var(--space-4); border-bottom: 1px solid var(--color-divider); } .compare tbody th { border-bottom: none; padding: 0 0 var(--space-3); font-weight: 600; } .compare tbody td { border-bottom: none; padding: var(--space-1) 0 var(--space-1) var(--space-4); } .compare tbody td::before { content: attr(data-tier) " — "; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--color-text-faint); } .compare__group th { padding: var(--space-8) 0 var(--space-3); } .compare__group td { display: none; } } /* ========================================================================== Chat launcher clearance The site-wide chat launcher is fixed to the bottom-right corner: a 58px bubble with a 20px inset, plus a 72px greeting bubble that sits above it — about 150px of reserved corner in total. On narrow viewports the footer's copyright line and Privacy/Terms links run the full width and end up underneath all of that, so the footer reserves enough bottom padding for them to clear it completely. Wider viewports put the footer text on the left, well clear of the corner, and are left alone. ========================================================================== */ @media (max-width: 720px) { .site-footer { padding-bottom: calc(var(--space-32) + var(--space-12)); } }