/* ========================================================================== Driftless marketing site Tokens mirror the "Driftless" variable collection in Figma (Default + Dark). The page ships in dark mode (data-theme="dark" on ); flip the attribute to "light" and every token follows. ========================================================================== */ :root { /* ---- surfaces & ink (light / Default mode) ---- */ --surface-mist: #f6f5f2; --surface-white: #ffffff; --surface-cream: #eeece6; --surface-shot-bed: #eae8e3; --ink-text: #1b1d24; --ink-secondary: #454955; --ink-muted: #6e727e; --ink-border: #e4e2dd; --ink-border-strong: #d3d1cb; /* ---- brand blue ---- */ --blue-50: #ebeefd; --blue-100: #d6dcfa; --blue-300: #a3b0f4; --blue-500: #6377ed; --blue-600: #5166eb; --blue-700: #3e52cc; --blue-800: #2e3fa3; /* ---- tints (bg / fill / text) ---- */ --mint-bg: #dff3e6; --mint-text: #146d3b; --peach-bg: #fde5d3; --peach-text: #8f4a12; --sky-bg: #dbeefc; --sky-text: #1f5fa8; --lilac-bg: #ece6fb; --lilac-text: #5a3fb8; /* ---- on-blue label (Figma binds this to surface/white) ---- */ --on-primary: #ffffff; /* ---- scale ---- */ --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-56: 56px; --space-64: 64px; --radius-sm: 4px; --radius-md: 8px; --radius-control: 10px; --radius-lg: 12px; --radius-popover: 14px; --radius-xl: 16px; --radius-pill: 999px; --hairline: 0.5px; --font-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif; --font-mono: "DM Mono", ui-monospace, Menlo, Consolas, monospace; --container: 1200px; --gutter: 120px; --shadow-card: 0 1px 2px rgba(27, 29, 36, 0.05); --shadow-float: 0 4px 16px rgba(27, 29, 36, 0.06); --shadow-popover: 0 8px 24px rgba(27, 29, 36, 0.12); --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.18); color-scheme: light; } [data-theme="dark"] { --surface-mist: #17181d; --surface-white: #22242b; --surface-cream: #27251f; --surface-shot-bed: #2c2e36; --ink-text: #f2f0ea; --ink-secondary: #c6c4be; --ink-muted: #8f8e89; --ink-border: #2f3139; --ink-border-strong: #3f414b; --blue-50: #1c2449; --blue-100: #27336a; --blue-300: #5366bf; --blue-500: #7388f1; --blue-600: #6e82f5; --blue-700: #a6b6f9; --blue-800: #c6d0fb; --mint-bg: #1b3427; --mint-text: #9fe3bb; --peach-bg: #3a2718; --peach-text: #f5c199; --sky-bg: #172a3d; --sky-text: #a4cdf5; --lilac-bg: #272040; --lilac-text: #c8bbf5; --on-primary: #f2f0ea; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-float: 0 4px 16px rgba(0, 0, 0, 0.3); --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.55); color-scheme: dark; } /* ========================================================================== Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } [id] { scroll-margin-top: 100px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.5; color: var(--ink-text); background: var(--surface-mist); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } h1, h2, h3, p, ul, ol { margin: 0; } ul, ol { padding: 0; list-style: none; } button { font: inherit; color: inherit; } code { font-family: var(--font-mono); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .container { width: min(var(--container), calc(100% - 2 * var(--gutter))); margin-inline: auto; } @media (max-width: 1100px) { :root { --gutter: 48px; } } @media (max-width: 640px) { :root { --gutter: 20px; } } /* ========================================================================== Type ramp (Figma text styles) ========================================================================== */ /* Headlines scale fluidly between the phone size and the Figma desktop size. clamp(min, preferred, max): min = phone, max = Figma, preferred = ~vw-based so it lands on max at 1440. */ .display-xl { font-size: clamp(2.25rem, 1.4rem + 2.8vw, 3.5rem); line-height: 1.07; font-weight: 500; letter-spacing: -0.02em; } /* 36 → 56 */ .display-lg { font-size: clamp(1.75rem, 1.15rem + 2vw, 2.5rem); line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; } /* 28 → 40 */ .display-md { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); line-height: 1.19; font-weight: 500; letter-spacing: -0.01em; } /* 24 → 32 */ .lead { font-size: clamp(1rem, 0.9rem + 0.35vw, 1.125rem); line-height: 1.55; color: var(--ink-secondary); } /* 16 → 18 */ .prose { font-size: clamp(1rem, 0.9rem + 0.35vw, 1.125rem); line-height: 1.6; color: var(--ink-secondary); } /* 16 → 18 */ .eyebrow { font-family: var(--font-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); } .center { text-align: center; } /* Headlines wrap evenly (no orphans); body copy avoids a lone last word. `pretty` is progressive enhancement. */ h1, h2, h3, .display-xl, .display-lg, .display-md { text-wrap: balance; } p, .lead, .prose, .tile__copy, .step__copy, .card p { text-wrap: pretty; } /* ========================================================================== Buttons, chips ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--radius-pill); border: var(--hairline) solid transparent; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, transform .15s ease, opacity .15s ease; } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 2px; } .btn--md { height: 36px; padding: 0 16px; font-size: 14px; } .btn--lg { height: 44px; padding: 0 20px; font-size: 15px; } .btn--primary { background: var(--blue-600); color: var(--on-primary); border-color: var(--blue-600); } .btn--primary:hover { background: var(--blue-500); border-color: var(--blue-500); } .btn--secondary { background: var(--surface-white); color: var(--ink-text); border-color: var(--ink-border-strong); } .btn--secondary:hover { border-color: var(--ink-muted); } .chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap; } .chip--peach { background: var(--peach-bg); color: var(--peach-text); } .chip--mint { background: var(--mint-bg); color: var(--mint-text); } .chip--sky { background: var(--sky-bg); color: var(--sky-text); } /* ========================================================================== Nav ========================================================================== */ .nav { position: fixed; top: 16px; left: 0; right: 0; z-index: 50; padding: 0 16px; pointer-events: none; } .nav__inner { pointer-events: auto; width: min(1360px, 100%); margin-inline: auto; height: 68px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-radius: var(--radius-xl); background: color-mix(in srgb, var(--surface-shot-bed) 72%, transparent); border: var(--hairline) solid color-mix(in srgb, var(--ink-border-strong) 70%, transparent); box-shadow: var(--shadow-float); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); } @supports not (backdrop-filter: blur(1px)) { .nav__inner { background: var(--surface-shot-bed); } } /* keep the page's first section clear of the floating bar */ main { padding-top: 100px; } .brand { display: inline-flex; align-items: center; text-decoration: none; } .brand__logo { display: block; width: 94px; height: 26px; } .brand__word { fill: var(--ink-text); } .brand__lines { fill: none; stroke: var(--blue-700); } .nav__links { display: flex; align-items: center; gap: 32px; } .nav__links > a:not(.btn) { font-size: 14px; font-weight: 500; color: var(--ink-secondary); text-decoration: none; } .nav__links > a:not(.btn):hover { color: var(--ink-text); } @media (max-width: 720px) { .nav__links > a:not(.btn) { display: none; } .nav { top: 12px; padding: 0 12px; } .nav__inner { height: 60px; padding: 0 16px; } main { padding-top: 84px; } } /* ========================================================================== Sections ========================================================================== */ section { padding: 96px 0; } .band { background: var(--surface-white); } .split { display: grid; grid-template-columns: 480px 1fr; gap: 96px; align-items: start; } @media (max-width: 960px) { .split { grid-template-columns: 1fr; gap: 24px; } } /* ---- hero ---- */ .hero { padding: 48px 0 80px; } .hero__row { display: grid; grid-template-columns: 560px 1fr; align-items: center; gap: 64px; } .hero__copy { display: grid; gap: 24px; } .hero__copy .lead { max-width: 520px; } .hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; } .hero__visual { margin: 0; justify-self: end; } .hero__visual img { width: 544px; max-width: 100%; } @media (max-width: 960px) { .hero__row { grid-template-columns: 1fr; gap: 40px; } .hero__visual { justify-self: start; } } /* ---- pillars: zipper rows (visual | text, alternating) ---- */ .pillars__title { max-width: 900px; margin-bottom: 40px; } .tiles { display: grid; gap: 40px; } .tile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; } .tile--flip .tile__visual { order: 2; } .tile__visual { position: relative; aspect-ratio: 580 / 440; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-shot-bed); } .tile__visual > img { position: relative; width: 100%; height: 100%; object-fit: cover; } /* static gradient = the Figma fill; the shader canvas paints over it when WebGL is available */ .tile__visual--sky { background: linear-gradient(135deg, #a4cdf5 0%, #3d7fc0 50%, #172a3d 100%); } .tile__visual--lilac { background: linear-gradient(135deg, #c8bbf5 0%, #7a63c9 50%, #272040 100%); } .tile__visual--butter { background: linear-gradient(135deg, #f2d978 0%, #b39a2b 50%, #3a3114 100%); } .tile__visual--mint { background: linear-gradient(135deg, #9fe3bb 0%, #3e8f5e 50%, #1b3427 100%); } .shader { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; } .tile__text { display: grid; gap: 6px; } .tile__title { font-size: clamp(1rem, 0.9rem + 0.35vw, 1.125rem); line-height: 1.35; font-weight: 600; } .tile__copy { font-size: 16px; line-height: 25px; color: var(--ink-secondary); } @media (max-width: 900px) { .tile { grid-template-columns: 1fr; gap: 16px; } .tile--flip .tile__visual { order: 0; } /* visual always first when stacked */ } /* ---- interactive screenshot tile ---- */ .tile__visual--shots { display: grid; grid-template-rows: 1fr auto; } .tile__visual--shots > .shots__stage, .tile__visual--shots > .shots__controls { position: relative; } .tile__visual--shots > .shader { grid-area: 1 / 1 / -1 / -1; } .shots__stage { position: relative; display: flex; align-items: flex-start; justify-content: center; padding: 3.5% 6% 0; min-height: 0; overflow: hidden; } .shot { width: 100%; border-radius: 12px; overflow: hidden; background: var(--surface-white); box-shadow: var(--shadow-modal); border: var(--hairline) solid rgba(0,0,0,.08); transition: width .35s cubic-bezier(.2,.7,.2,1); } .shot__chrome { height: 22px; display: flex; align-items: center; gap: 5px; padding: 0 10px; background: #f0efec; border-bottom: 0.5px solid #dedcd6; } .shot__chrome i { width: 7px; height: 7px; border-radius: 50%; background: #d3d1cb; } [data-mode="dark"] .shot__chrome { background: #1f2229; border-color: #2c2f38; } [data-mode="dark"] .shot__chrome i { background: #3f414b; } .shot__bed { aspect-ratio: 1440 / 900; overflow: hidden; background: #f6f7f9; } [data-mode="dark"] .shot__bed { background: #0f1115; } .shot__img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } /* device widths: the frame narrows, the bed keeps the source aspect ratio so tablet/phone read as portrait crops */ [data-device="tablet"] .shot { width: 62%; } [data-device="tablet"] .shot__bed { aspect-ratio: 834 / 1194; } [data-device="mobile"] .shot { width: 34%; } [data-device="mobile"] .shot__bed { aspect-ratio: 390 / 844; } .shot__img { transition: opacity .2s ease; } .shot.is-swapping .shot__img { opacity: 0; } .shots__controls { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; padding: 12px 16px 14px; background: rgba(22, 24, 30, 0.86); border-top: var(--hairline) solid rgba(255,255,255,.06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .seg { display: inline-flex; padding: 3px; border-radius: var(--radius-pill); background: rgba(255,255,255,.06); border: var(--hairline) solid rgba(255,255,255,.1); } .seg__item { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: transparent; color: #a9aab3; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .seg__item:hover { color: #f2f0ea; } .seg__item.is-active { background: #f2f0ea; color: #1b1d24; } .seg__item:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 1px; } @media (max-width: 480px) { .seg__item span { display: none; } .seg__item { padding: 0 10px; } } /* ---- approve: review board + hotspot popovers ---- */ .approve__inner { display: grid; gap: 40px; justify-items: center; } .approve__copy { max-width: 720px; } .review { position: relative; width: min(1030px, 100%); border-radius: var(--radius-popover); overflow: visible; box-shadow: var(--shadow-modal); } .review__img { border-radius: var(--radius-popover); } .hotspot { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; z-index: 2; } /* the open hotspot rises above its siblings so its popover is never under another badge */ .hotspot.is-open, .hotspot:has(.popover.is-open), .hotspot:hover { z-index: 10; } .hotspot__badge { position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; font-size: 12px; font-weight: 600; cursor: pointer; background: var(--blue-600); color: var(--on-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-600) 28%, transparent), var(--shadow-float); transition: transform .15s ease, box-shadow .15s ease; } .hotspot__badge:hover, .hotspot__badge[aria-expanded="true"] { transform: scale(1.1); box-shadow: 0 0 0 5px color-mix(in srgb, var(--blue-600) 24%, transparent), var(--shadow-float); } .hotspot__badge:focus-visible { outline: 2px solid var(--ink-text); outline-offset: 2px; } /* idle pulse so the hotspots read as interactive */ @keyframes hotspot-pulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-600) 28%, transparent), var(--shadow-float); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--blue-600) 10%, transparent), var(--shadow-float); } } .hotspot__badge:not([aria-expanded="true"]) { animation: hotspot-pulse 2.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .hotspot__badge { animation: none !important; } } .popover { position: absolute; left: -10px; top: -10px; width: 250px; padding: 10px 10px 10px 40px; background: #1b1d24; color: #f2f0ea; border-radius: var(--radius-popover); box-shadow: var(--shadow-modal); opacity: 0; visibility: hidden; transform: translateY(4px); pointer-events: none; transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; z-index: 3; } .popover.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; } .popover--up { top: auto; bottom: -10px; transform: translateY(-4px); } .popover__eyebrow { font-family: var(--font-mono); font-size: 9px; line-height: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #b5b3ad; margin: 3px 0 6px; } .popover__card { display: grid; gap: 6px; padding: 10px; background: #22242b; border-radius: 10px; border: var(--hairline) solid #3f414b; } .popover__card .chip { justify-self: start; } .popover__body { font-size: 12px; line-height: 16px; } .popover__path { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; color: #b5b3ad; } .popover__link { font-size: 11px; font-weight: 600; color: var(--blue-500); text-decoration: none; } .popover__link:hover { text-decoration: underline; } [data-theme="dark"] .popover__link { color: #a6b6f9; } @media (max-width: 640px) { .popover { width: min(240px, calc(100vw - 48px)); } .hotspot__badge { width: 20px; height: 20px; font-size: 11px; } } /* ---- how it works ---- */ .how__head { padding-bottom: 24px; border-bottom: var(--hairline) solid var(--ink-border); margin-bottom: 40px; } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; } .step { display: grid; gap: 14px; padding-left: 0; } .step + .step { border-left: var(--hairline) solid var(--ink-border); padding-left: 48px; margin-left: -48px; } .step__num { font-family: var(--font-mono); font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); line-height: 1; color: var(--blue-600); } .step__title { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; } .step__copy { font-size: 15px; line-height: 24px; color: var(--ink-secondary); } @media (max-width: 900px) { .how__head { flex-direction: column; align-items: flex-start; gap: 8px; } .steps { grid-template-columns: 1fr; gap: 32px; } .step + .step { border-left: 0; padding-left: 0; margin-left: 0; padding-top: 32px; border-top: var(--hairline) solid var(--ink-border); } } /* ---- team ---- */ .team .display-md { margin-bottom: 32px; } .cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .card { padding: 24px; border-radius: var(--radius-lg); background: var(--surface-mist); border: var(--hairline) solid var(--ink-border); display: grid; gap: 10px; align-content: start; } .card h3 { font-size: 16px; line-height: 22px; font-weight: 600; } .card p { font-size: 14px; line-height: 22px; color: var(--ink-secondary); } @media (max-width: 1000px) { .cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .cards { grid-template-columns: 1fr; } } /* ---- cta ---- */ .cta { padding: 112px 0; /* Figma: surface + a 20% radial glow (#666 → #000) centred on the bottom edge, radius = section height */ background: radial-gradient(circle 440px at 50% 100%, rgba(102, 102, 102, 0.2), rgba(0, 0, 0, 0.2)), var(--surface-white); } .cta__inner { display: grid; gap: 16px; justify-items: center; } .cta__sub { max-width: 640px; font-size: 17px; line-height: 27px; } .capture { display: flex; gap: 8px; margin-top: 8px; width: min(537px, 100%); } .capture__input { flex: 1; min-width: 0; height: 44px; padding: 0 18px; border-radius: var(--radius-pill); /* Figma override: the field is filled with ink/text (inverted), placeholder in ink/muted */ border: var(--hairline) solid var(--ink-border-strong); background: var(--ink-text); color: var(--surface-mist); font: inherit; font-size: 15px; } .capture__input::placeholder { color: var(--ink-muted); } .capture__input:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 3px var(--blue-100); } .capture__help { font-size: 13px; color: var(--ink-muted); text-align: center; } .capture__help.is-success { color: var(--mint-text); } .capture__help.is-error { color: #f08a83; } .capture__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } @media (max-width: 480px) { .capture { flex-direction: column; gap: 10px; } /* flex: 1 shrinks the input to its content height once the axis is vertical; pin it back to 44px */ .capture__input { flex: none; width: 100%; height: 44px; } .capture .btn { width: 100%; } } /* ---- alignment lines (scroll progress) ---- Two 6px lines stacked like the accent in the logo. The top line grows in from the right, the bottom line from the left; --p is scroll progress (set by main.js), reaching 1 exactly as the top of the CTA section meets the bottom of the viewport. At that point .align docks to the CTA and scrolls with it. */ .align { position: fixed; left: 0; right: 0; bottom: 4px; height: 16px; z-index: 40; pointer-events: none; --p: 0; } .align.is-docked { position: absolute; bottom: auto; top: var(--dock-top, 0); } .align__line { position: absolute; left: 0; right: 0; height: 6px; border-radius: 3px; background: var(--blue-700); transform: scaleX(var(--p)); will-change: transform; transition: border-radius .2s ease; } /* once the lines meet full width they read as a rule, so the caps go square */ .align.is-docked .align__line { border-radius: 0; } .align__line--top { top: 0; transform-origin: right center; } .align__line--bottom { bottom: 0; transform-origin: left center; } /* ---- footer ---- */ .footer { padding: 32px 0 40px; } .footer__inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; color: var(--ink-muted); } .footer__links { display: flex; gap: 24px; } .footer__links a { text-decoration: none; } .footer__links a:hover { color: var(--ink-text); } @media (max-width: 480px) { .footer__inner { flex-direction: column; align-items: flex-start; } }