/* ============================================================
Quotient Lab — Design System
Source: docs/figma/design-system/ (Figma `Quotient-System`)
Font: DM Sans (Regular/SemiBold/Bold/ExtraBold/Black) — loaded via
tags in index.html , not @import (avoids the render-blocking
round-trip an @import adds).
============================================================ */
:root {
/* background color primitives */
--blue-primitive-bg: rgb(2 79 125 / 70%);
--gold-primitive-bg: rgb(199 148 53 / 50%);
--sage-primitive-bg: rgb(134 156 141 / 70%);
--purple-primitive-bg: rgb(123 74 138 / 50%);
/* Color — primitives */
--purple-100: #e8e0f5;
--purple-300: #b89fbf;
--purple-500: #7b4a8a;
--purple-600: #5c3868;
--yellow-100: #eee0c6;
--yellow-500: #c3a574;
--gray-50: #fafafa;
--gray-100: #f0f0f0;
--gray-200: #e5e5e5;
--gray-300: #d9d9d9;
--gray-400: #acacac;
--slate-500: #80808c;
--slate-600: #5b5b5c;
--slate-900: #1a1a2e;
--white-00: #fff;
/* Color — semantic */
--color-bg-canvas: var(--gray-50);
--color-bg-brand: var(--purple-500);
--color-bg-brand-subtle: var(--purple-100);
--color-bg-brand-disabled: var(--purple-300);
--color-bg-accent: var(--yellow-500);
--color-bg-accent-subtle: var(--yellow-100);
--color-bg-surface-card: var(--gray-100);
--color-bg-surface-hover: var(--gray-200);
--color-border-default: var(--gray-300);
--color-border-accent: var(--yellow-100);
--color-text-default: var(--slate-900);
--color-text-muted: var(--slate-600);
--color-text-subtle: var(--slate-500);
--color-text-on-brand: var(--white-00);
--color-text-on-accent: var(--white-00);
/* Buttons — component colors (Default/Hover/Disabled/Invert) */
--btn-primary-surface: var(--purple-500);
--btn-primary-surface-hover: var(--purple-600);
--btn-primary-surface-disabled: var(--purple-300);
--btn-primary-text: var(--white-00);
--btn-primary-surface-invert: var(--white-00);
--btn-primary-text-invert: var(--purple-500);
--btn-secondary-text: var(--purple-500);
--btn-secondary-text-hover: var(--purple-600);
--btn-secondary-text-disabled: var(--purple-300);
--btn-secondary-surface-hover: var(--gray-200);
--btn-secondary-text-invert: var(--white-00);
--btn-banner-surface: var(--gray-300);
--btn-banner-surface-hover: var(--gray-400);
--btn-banner-text: var(--purple-500);
--btn-banner-text-hover: var(--purple-600);
--btn-banner-text-disabled: var(--gray-400);
--btn-banner-surface-invert: var(--purple-500);
--btn-banner-text-invert: var(--gray-50);
--btn-tertiary-text: var(--purple-500);
--btn-tertiary-text-disabled: var(--purple-300);
--btn-tertiary-surface-hover: var(--gray-200);
--btn-tertiary-text-invert: var(--white-00);
--focus-ring: var(--purple-500);
--focus-ring-invert: var(--white-00);
/* Typography */
--font-body: "DM Sans", sans-serif;
--fs-display: clamp(32px, 24px + 2.5vw, 56px);
--fs-heading-lg: clamp(28px, 24px + 1.25vw, 40px);
--fs-heading-md: clamp(22px, 20px + 0.625vw, 28px);
--fs-heading-sm: clamp(18px, 16.67px + 0.417vw, 22px);
--fs-body-lg: 18px;
--fs-body-md: 16px;
--fs-body-sm: 14px;
--fs-label-lg: 16px;
--fs-label-sm: 12px;
/* Spacing — Spacing-N = N * 4px */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-9: 36px;
--space-10: 40px;
--space-11: 44px;
--space-12: 48px;
--space-13: 52px;
--space-14: 56px;
--space-15: 60px;
--space-16: 64px;
/* Radius */
--radius-sm: 4px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-full: 9999px;
/* Shadow */
--shadow-card: 0px 0px 6px rgba(0, 0, 0, 0.09);
/* Avatar placeholder gradient — exact value from the live wireframe frame
data (node 407:1226 "image 4"), used wherever a person photo isn't
available yet (Team member avatars). */
--gradient-avatar-placeholder: linear-gradient(
210.65deg,
#c79435 23.32%,
#869b8d 53.167%,
#6c5a74 81.889%
);
/* Step divider ("Vector 7") — exact value from Figma layer properties,
desktop node under Frame 21 > How We Work > Steps > Frame 120 > Frame
116 > Frame 113, and its mobile counterpart. Not a system color token. */
--color-step-divider: rgba(199, 148, 53, 0.25);
/* Footer background — exact value from live frame data (node 407:1186),
confirmed #FBF9F7. Distinct from --color-bg-canvas (#FAFAFA); not a
reusable semantic token, single-use like the blob colors. */
--color-bg-footer: #fbf9f7;
/* Background decoration blob center targets + sizes — see the comment
above .bg-decoration for the math these feed into. */
--blob-purple-cx: 0px;
--blob-purple-cy: 64px;
--blob-gold-cx: 0px;
--blob-gold-cy: 3270px;
--blob-blue-cx: -200px;
--blob-blue-cy: 4150px;
--blob-sage-cx: 0px;
--blob-sage-cy: 5950px;
--blob-purple-size: 1250px;
--blob-gold-size: 1250px;
--blob-blue-size: 1250px;
--blob-sage-size: 1250px;
}
@media (min-width: 1024px) {
:root {
--fs-label-sm: 14px;
--blob-purple-cy: -200px;
--blob-gold-cy: 4000px;
--blob-gold-cx: -200px;
--blob-blue-cy: 2700px;
--blob-blue-cx: -400px;
--blob-sage-cy: 0px;
--blob-purple-size: 3000px;
--blob-gold-size: 3000px;
--blob-blue-size: 4000px;
--blob-sage-size: 0px;
}
}
/* ── Reset ── */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-body);
font-weight: 400;
background-color: var(--color-bg-canvas);
color: var(--color-text-default);
font-size: var(--fs-body-md);
line-height: 1.5;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-body);
font-weight: 700;
color: var(--color-text-default);
}
p {
text-wrap: pretty;
}
a {
color: inherit;
text-decoration: none;
}
img,
svg {
display: block;
max-width: 100%;
}
/* Focus ring — mandatory, additive, on every interactive element */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-item:focus-visible,
.dropdown-trigger:focus-visible,
.blog-card:focus-visible {
outline: 1px solid var(--focus-ring);
outline-offset: 2px;
}
/* ── Background decoration blobs ──
Real SVG assets (radial-gradient exports from Figma). Painted on ONE
shared layer (.bg-decoration, a child of ) rather than scoped to
individual sections — two reasons:
1. In the source Figma frame these are page-level absolute-positioned
ellipses, not section-scoped ones (confirmed via get_metadata on node
407:1184) — each one is huge enough to visually bleed across several
sections' boundaries at once. A single shared layer can reproduce that
continuous bleed; per-section background-image cannot (it hard-clips
at that section's own box edge — the exact bug this replaced).
2. .bg-decoration is deliberately full-bleed (no max-width/margin,
matching 's own edge-to-edge width) — NOT the same width as
.container. This was tried the other way (matching .container's
max-width: 1280px so the blob tracked the content column) and
rejected: at any viewport wider than 1280px, .container gets a
centered gutter beyond it, and the blob's fixed offset didn't
reliably reach past that gutter to the true window edge, leaving a
visible gap that read as an unintended margin. The actual requirement
is that .container's own margin governs text/nav/footer only — the
decoration layer ignores it entirely and always touches the real
window edge, at any width, with zero gap.
Each blob's `top` offset is set so its center lines up with the section
heading it visually belongs to (confirmed against the live wireframe
preview, not guessed), and sides alternate right/left going down the
page: purple/Hero=right, gold/HowWeWork=left, blue/Journey=right,
sage/Team=left. See Components/background-blobs.md. */
main {
position: relative;
}
/* Blob center targets + sizes live as custom properties in the :root block
at the top of this file (search "Background decoration blob center") —
background-position below is CALCULATED from those, so changing a
--*-size never moves the blob's visual center. (Plain `right -250px`
fixes the CORNER of the image, not the center; growing background-size
then grows the box outward from that fixed corner, dragging the visual
center along with it — that's why resizing used to shift position. The
formula below anchors the center instead.)
--*-cy is the desired center position, measured in px down from 's
top edge, matching the heading each blob belongs to. Mobile and desktop
values are NOT a scaled version of each other — mobile's single-column
layout puts each heading at a completely different Y position than
desktop's multi-column one (e.g. Team's heading is 3936px on desktop but
6130px on mobile) — both were measured directly against each layout's
live rendered heading position.
--*-cx is the desired center position measured from the true left/right
window edge (not .container's edge — see the comment above on why).
0px = center sits exactly on the edge, which guarantees the blob always
touches the edge with zero gap at any size, since half of any circle
centered exactly on a line will cross it.
The math (derived from the CSS spec's definition of edge-relative
background-position): for `right `, the image's right edge is
`` from the container's right edge (negative = bleeds past it).
center = right_edge − size/2, so to place the center at a fixed target
`cx`: right_edge = cx + size/2, i.e. `` = cx − size/2 (cx is
negative here, per the convention above, hence the visible "− size / 2"
below reading as "more negative as size grows" — that's what keeps the
edge bleeding out symmetrically as the circle gets bigger). Same shape
for `top`: `` = cy − size/2. */
.bg-decoration {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-image: url("/assets/images/bg-blob-purple.svg"), url("/assets/images/bg-blob-gold.svg"),
url("/assets/images/bg-blob-blue.svg"), url("/assets/images/bg-blob-sage.svg");
background-position:
right calc(var(--blob-purple-cx) - (var(--blob-purple-size) / 2)) top
calc(var(--blob-purple-cy) - (var(--blob-purple-size) / 2)),
left calc(var(--blob-gold-cx) - (var(--blob-gold-size) / 2)) top
calc(var(--blob-gold-cy) - (var(--blob-gold-size) / 2)),
right calc(var(--blob-blue-cx) - (var(--blob-blue-size) / 2)) top
calc(var(--blob-blue-cy) - (var(--blob-blue-size) / 2)),
left calc(var(--blob-sage-cx) - (var(--blob-sage-size) / 2)) top
calc(var(--blob-sage-cy) - (var(--blob-sage-size) / 2));
background-size: var(--blob-purple-size), var(--blob-gold-size), var(--blob-blue-size),
var(--blob-sage-size);
}
/* Base fallback only — every section below gets an explicit override.
The uniform 64px this used to be (padding: var(--space-16) 0, i.e. 128px
between every pair of sections) was invented — Spacing-16 is only
actually documented for container margins at the 1280-1440 breakpoint
(04-layout.md), never for section-to-section vertical rhythm.
Correction (2026-07-31): the values that replaced that uniform 128px were
themselves wrong — they were measured frame-boundary to frame-boundary
(get_metadata box edges), not content edge to content edge. That's a
valid shortcut only when a section's own Figma frame tightly wraps its
content (true for auto-layout sections like How We Work, About, Humans
of Q, Quote, Footer). It silently breaks for Blogs and The Quotients,
which are NOT auto-layout in the source file — their frames are
loosely-sized canvases with absolutely-positioned children. The Quotients
frame in particular is nominally 835px tall but its own list column
(auto-layout, reliable) needs 989px + a 41px top inset — content
overflows the nominal frame by ~195px. Reusing frame edges there
collapsed Blogs→Quotients to ~0px and inflated Quotients→HowWeWork to
297px, both wrong.
Re-measured every gap as real content-edge to content-edge, using each
section's own confirmed auto-layout padding (via get_design_context)
where the section has a real box, and literal top/height offsets
(flattened by get_design_context, not manually re-derived) where it
doesn't. Below, each section's padding-top is its own real Figma value
where one exists (How We Work pt-60, About py-50, Humans of Q pt-60/pb-80,
Footer pt-40/pb-80 — all confirmed auto-layout properties); the remainder
of each measured gap is carried as padding-bottom on the EARLIER section
in the pair, by convention (total is what's Figma-accurate; the split
itself is an implementation choice, same as before).
IMPORTANT: this rule must stay ABOVE the per-section overrides below —
.section and e.g. .blog-section have equal specificity, so whichever is
declared LATER in the file wins the cascade for shared properties. This
bug already happened once (this rule used to live below the per-section
blocks and silently overrode all of them back to a uniform 24px). */
.section {
padding: var(--space-6) 0;
}
.blog-section {
padding-top: var(--space-6);
padding-bottom: 92px;
}
.quotients-section {
padding-top: 0;
padding-bottom: 102px;
}
.how-we-work-section {
padding-top: 60px;
padding-bottom: 20px;
}
.journey-section {
padding-top: 116px;
padding-bottom: 41px;
}
.about-section {
padding-top: 50px;
padding-bottom: 60px;
}
.team-section {
padding-top: 60px;
padding-bottom: 115px;
}
/* ── Layout ── */
.container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--space-4);
}
@media (min-width: 768px) {
.container {
padding: 0 var(--space-8);
}
}
@media (min-width: 1024px) {
.container {
padding: 0 var(--space-12);
}
}
@media (min-width: 1280px) {
.container {
padding: 0 var(--space-16);
}
}
/* Footer's container is confirmed narrower than the rest of the page at
desktop width — Figma measures its content starting at x=200 (node
407:1186), vs. x≈120 for every other section on the frame. Below 1280px
there's no Figma data point for the footer specifically, so it falls
back to .container's normal responsive scale like everything else. */
@media (min-width: 1280px) {
.footer .container {
padding: 0 200px;
}
}
/* ── Buttons ── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-body);
font-size: var(--fs-label-lg);
font-weight: 600;
cursor: pointer;
border: none;
white-space: nowrap;
}
.btn:disabled {
cursor: not-allowed;
}
.btn--primary {
background: var(--btn-primary-surface);
color: var(--btn-primary-text);
border-radius: var(--radius-full);
padding: var(--space-3) var(--space-7);
}
.btn--primary:hover:not(:disabled) {
background: var(--btn-primary-surface-hover);
}
.btn--primary:disabled {
background: var(--btn-primary-surface-disabled);
}
.btn--secondary {
background: transparent;
color: var(--btn-secondary-text);
border: 1px solid var(--btn-secondary-text);
border-radius: var(--radius-full);
padding: var(--space-3) var(--space-7);
}
.btn--secondary:hover:not(:disabled) {
background: var(--btn-secondary-surface-hover);
color: var(--btn-secondary-text-hover);
border-color: var(--btn-secondary-text-hover);
}
.btn--secondary:disabled {
color: var(--btn-secondary-text-disabled);
border-color: var(--btn-secondary-text-disabled);
}
/* Invert — on a color.bg.brand background */
.btn--secondary.btn--invert {
color: var(--btn-secondary-text-invert);
border-color: var(--btn-secondary-text-invert);
background: transparent;
}
.btn--secondary.btn--invert:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.08);
}
.btn--banner {
background: var(--btn-banner-surface);
color: var(--btn-banner-text);
border-radius: 0;
padding: var(--space-3) var(--space-7);
}
.btn--banner:hover:not(:disabled) {
background: var(--btn-banner-surface-hover);
color: var(--btn-banner-text-hover);
}
.btn--banner:disabled {
color: var(--btn-banner-text-disabled);
}
.btn--tertiary {
background: transparent;
color: var(--btn-tertiary-text);
border-radius: 0;
padding: var(--space-2) 0;
border: 1px solid transparent;
}
.btn--tertiary:hover:not(:disabled) {
background: var(--btn-tertiary-surface-hover);
border-color: var(--purple-500);
}
.btn--tertiary:disabled {
color: var(--btn-tertiary-text-disabled);
}
/* Underlined text link (e.g. "Explore Sales Quotient>", "See All Blogs").
font-size is a literal 20px, confirmed against the live "Meet Full Team"
instance (node 407:1222) — NOT --fs-label-lg (16px), which is a distinct
token correctly used elsewhere (nav items, dropdown, etc). */
.text-link {
display: inline-flex;
align-items: center;
gap: 2px;
font-weight: 900;
font-size: 20px;
color: var(--purple-500);
text-decoration: underline;
text-underline-offset: 2px;
}
.text-link:hover {
color: var(--purple-600);
}
/* ── Top Nav ── */
/* position: sticky is not specified in the design-system docs (checked —
no mention of scroll/sticky/fixed behavior anywhere in docs/figma/design-system/);
added as a standard convention, not an extracted Figma rule. */
.nav {
background: var(--color-bg-canvas);
position: sticky;
top: 0;
z-index: 50;
}
.nav__inner {
height: 80px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav__logo img {
height: 28px;
width: auto;
}
@media (min-width: 1024px) {
.nav__logo img {
height: 56px;
}
}
.nav__menu {
display: none;
align-items: center;
gap: var(--space-5);
}
@media (min-width: 1024px) {
.nav__menu {
display: flex;
}
}
/* Text color is slate-900 per the live wireframe frame data (get_design_context),
not purple.500 as nav-item.md claims — the doc is stale here, confirmed
against the actual frame. Active/hover/focus states stay purple.500 per the doc. */
.nav-item {
display: inline-flex;
align-items: center;
padding: var(--space-2);
font-size: var(--fs-label-lg);
font-weight: 600;
color: var(--color-text-default);
border-bottom: 1.5px solid transparent;
}
.nav-item:hover {
background: var(--color-bg-surface-hover);
}
.nav-item[aria-current="page"] {
border-bottom-color: var(--purple-500);
}
.nav__dropdown {
position: relative;
}
.dropdown-trigger {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2);
font-family: var(--font-body);
font-size: var(--fs-label-lg);
font-weight: 600;
color: var(--color-text-default);
background: transparent;
border: none;
cursor: pointer;
}
.dropdown-trigger:hover {
background: var(--color-bg-surface-hover);
}
.dropdown-trigger__chevron {
width: 11px;
height: 6px;
transition: transform 150ms ease;
}
.nav__dropdown[data-open="true"] .dropdown-trigger__chevron {
transform: rotate(180deg);
}
.dropdown-panel {
display: none;
position: absolute;
top: calc(100% + var(--space-2));
left: 0;
min-width: 220px;
flex-direction: column;
gap: var(--space-5);
background: var(--white-00);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
padding: var(--space-4);
z-index: 10;
}
.nav__dropdown[data-open="true"] .dropdown-panel {
display: flex;
}
.dropdown-panel a {
font-size: var(--fs-label-lg);
font-weight: 600;
color: var(--purple-500);
}
.dropdown-panel a:hover {
color: var(--purple-600);
}
.nav__burger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: var(--space-2);
background: transparent;
border: none;
cursor: pointer;
}
@media (min-width: 1024px) {
.nav__burger {
display: none;
}
}
.nav__burger svg {
width: 32px;
height: 32px;
}
.nav__burger .icon-close {
display: none;
}
.nav[data-menu-open="true"] .nav__burger .icon-menu {
display: none;
}
.nav[data-menu-open="true"] .nav__burger .icon-close {
display: block;
}
.nav__mobile-panel {
display: none;
}
@media (max-width: 1023.98px) {
.nav[data-menu-open="true"] .nav__mobile-panel {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-4) 0 var(--space-6);
}
}
/* ── Hero ── */
/* padding-top/-bottom only (not the `padding` shorthand) — .hero shares its
element with .container, and a shorthand here would zero out .container's
horizontal padding since it's declared later in the cascade at equal
specificity. */
.hero {
display: flex;
flex-direction: column;
gap: var(--space-6);
padding-top: var(--space-10);
padding-bottom: var(--space-10);
}
@media (min-width: 1024px) {
.hero {
flex-direction: row;
align-items: center;
padding-top: var(--space-6);
padding-bottom: var(--space-6);
}
}
.hero__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-6);
}
@media (min-width: 1024px) {
.hero__content {
flex: 1 0 0;
}
}
.hero__title {
font-size: var(--fs-display);
font-weight: 700;
line-height: 1.2;
color: var(--color-text-default);
}
.hero__subtitle {
font-size: var(--fs-body-lg);
line-height: 1.5;
color: var(--color-text-default);
max-width: 52ch;
}
.hero__media {
display: flex;
justify-content: center;
}
@media (min-width: 1024px) {
.hero__media {
flex: 1 0 0;
}
}
.hero__media img {
width: 100%;
max-width: 560px;
}
/* ── Section header (label + title + subtitle, reused by several sections) ── */
.section-header {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-bottom: var(--space-8);
}
.section-header__eyebrow {
font-size: var(--fs-label-sm);
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-text-default);
}
.section-header__title {
font-size: var(--fs-heading-lg);
font-weight: 800;
}
.section-header__subtitle {
font-size: var(--fs-body-lg);
line-height: 1.5;
max-width: 65ch;
}
.section-header--row {
flex-direction: column;
}
@media (min-width: 1024px) {
.section-header--row {
flex-flow: row wrap;
align-items: baseline;
justify-content: space-between;
}
.section-header--row .section-header__title {
margin-right: auto;
}
}
/* ── Blog cards ── */
/* Mobile: a side-swipable row (matches the wireframe's fixed 340px cards in a
horizontal "Blogs" flex container, not a stacked grid). Grid takes over at
640px+ once there's room to show cards side by side without scrolling. */
.blog-grid {
display: flex;
gap: var(--space-6);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-left: var(--space-4);
}
@media (min-width: 640px) {
.blog-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
overflow-x: visible;
scroll-snap-type: none;
}
}
@media (min-width: 1024px) {
.blog-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.blog-card {
display: flex;
flex-direction: column;
flex: 0 0 340px;
height: 100%;
scroll-snap-align: start;
background: var(--color-bg-surface-card);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
overflow: hidden;
}
@media (min-width: 640px) {
.blog-card {
flex: initial;
}
}
.blog-card:hover {
background: var(--color-bg-surface-hover);
}
.blog-card__image {
height: 211px;
background: repeating-conic-gradient(var(--gray-200) 0% 25%, var(--gray-100) 0% 50%) 50% / 20px
20px;
}
.blog-card__body {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-4);
}
.blog-card__tag {
align-self: flex-start;
background: var(--color-bg-brand-subtle);
color: var(--purple-500);
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
border-radius: var(--radius-sm);
padding: var(--space-1) var(--space-2);
}
.blog-card__title {
font-size: var(--fs-heading-sm);
font-weight: 700;
color: var(--color-text-default);
}
.blog-card__desc {
margin-top: auto;
font-size: var(--fs-body-md);
color: var(--color-text-muted);
}
.blog-card__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
border-top: 1px solid var(--color-border-default);
padding-top: var(--space-3);
font-size: var(--fs-body-sm);
color: var(--color-text-muted);
}
/* ── The Quotients (static stacked list) ── */
/* gap is 11px per the live Figma layer properties for Frame 81 (the list
column) — not a Spacing-N multiple, so not a token; see
Components/quotients-section.md. */
.quotients {
display: flex;
flex-direction: column;
gap: 11px;
}
@media (min-width: 1024px) {
/* Frame 87 (intro, 400px) : Frame 81 (list, 795px), 0 gap between them —
exact ratio from the live Figma layer properties, not an even 1fr 1fr
split. See Components/quotients-section.md. */
.quotients-section .container {
display: grid;
grid-template-columns: 400fr 795fr;
gap: 0;
}
}
.quotients-intro {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-4);
margin-bottom: var(--space-8);
}
@media (min-width: 1024px) {
.quotients-intro {
margin-bottom: 0;
}
}
.quotient-item {
display: flex;
flex-direction: column;
gap: var(--space-10);
padding: var(--space-7) 0;
border-bottom: 1px solid var(--color-border-default);
}
.quotient-item:last-child {
border-bottom: none;
}
.quotient-item__block {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.quotient-item__title {
font-size: var(--fs-heading-md);
font-weight: 800;
color: var(--color-text-default);
}
.quotient-item__body {
font-size: var(--fs-body-lg);
line-height: 1.5;
color: var(--color-text-default);
}
/* ── Steps (How We Work) ──
Confirmed against the live wireframe (desktop node 407:1748, mobile node
407:920) via get_design_context + get_screenshot: this section does NOT
reuse the generic "Step item" component documented in
Components/quote-highlight-steps.md (number+title heading, then a
full-width divider, then body) — see the correction note added there.
Desktop: a thin accent line runs from each number to the start of the next
column (absent after the last). Mobile: the same line appears as a short
vertical connector between step blocks. Color (yellow.100 / border.accent)
matches the doc; only the shape/position differ. */
.steps {
display: flex;
flex-direction: column;
margin: var(--space-8) 0;
list-style: none;
}
@media (min-width: 1024px) {
.steps {
flex-direction: row;
gap: var(--space-6);
}
}
.step {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
@media (min-width: 1024px) {
.step {
flex: 1 0 0;
}
}
@media (max-width: 1023.98px) {
.step + .step {
position: relative;
margin-top: var(--space-10);
}
.step + .step::before {
content: "";
position: absolute;
top: calc(var(--space-10) / -2);
left: 0;
width: 40px;
border-top: 4px solid var(--color-step-divider);
}
}
.step__row {
display: flex;
align-items: center;
gap: var(--space-6);
}
.step__number {
font-size: 32px;
font-weight: 800;
color: var(--color-text-default);
flex-shrink: 0;
}
@media (min-width: 1024px) {
.step__number {
font-size: 44px;
}
}
.step__divider {
display: none;
}
@media (min-width: 1024px) {
.step__divider {
display: block;
flex: 1 0 0;
height: 0;
border-top: 4px solid var(--color-step-divider);
}
}
.step__text {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding-right: var(--space-10);
}
.step__title {
font-size: 17px;
font-weight: 700;
color: var(--color-text-default);
}
.step__body {
font-size: var(--fs-body-md);
color: var(--color-text-default);
}
/* ── One company, one journey + Highlight band ── */
.journey {
display: flex;
flex-direction: column;
gap: var(--space-7);
}
@media (min-width: 1024px) {
.journey {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--space-16);
}
}
.journey__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-7);
}
@media (min-width: 1024px) {
.journey__content {
flex: 1 0 0;
}
}
@media (min-width: 1024px) {
.journey__media {
flex: 1 0 0;
}
}
.journey__media img {
width: 100%;
max-width: 526px;
}
.highlight {
background: var(--color-bg-brand);
border-radius: var(--radius-lg);
padding: var(--space-7) var(--space-5);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-6);
text-align: center;
margin-top: var(--space-10);
}
.highlight__title {
font-size: 22px;
font-weight: 700;
color: var(--color-text-on-brand);
}
.highlight__body {
font-size: var(--fs-body-md);
color: var(--color-bg-brand-subtle);
max-width: 60ch;
}
/* ── About ── */
.about {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
@media (min-width: 1024px) {
.about {
flex-direction: row;
align-items: center;
gap: var(--space-16);
}
}
.about__avatar {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
flex-shrink: 0;
}
/* Nested two-circle composition — exact sizes/offsets from the live frame
(mobile node 407:1106, desktop node 407:1263). The outer ring is a real
Figma SVG export (soft purple gradient wash, node 407:1107/407:1264); the
inner circle is the photo placeholder, same gradient treatment as Team
member avatars since no real photo exists yet. */
.about__avatar-frame {
position: relative;
width: 195px;
height: 191.551px;
flex-shrink: 0;
}
.about__avatar-ring {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.about__avatar-placeholder {
position: absolute;
left: 18.72px;
top: 18.39px;
width: 157.56px;
height: 154.773px;
border-radius: var(--radius-full);
background: var(--avatar-bg);
}
.about__avatar-placeholder--photo {
overflow: hidden;
}
.about__avatar-img {
display: block;
width: 100%;
height: 100%;
border-radius: inherit;
object-fit: cover;
}
@media (min-width: 1024px) {
.about__avatar-frame {
width: 381.753px;
height: 375px;
}
.about__avatar-placeholder {
left: 36.65px;
top: 36px;
width: 308.456px;
height: 303px;
}
}
.about__avatar-caption {
font-size: 22px;
font-weight: 500;
color: var(--color-text-default);
}
.about__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-4);
}
.about__title {
font-size: var(--fs-heading-md);
font-weight: 800;
}
.about__body {
font-size: var(--fs-body-lg);
line-height: 1.5;
}
/* ── Team ── */
.team-intro {
display: flex;
flex-direction: column;
gap: var(--space-6);
margin-bottom: var(--space-8);
}
.team-intro__title {
font-size: 36px;
font-weight: 600;
}
.team-intro__body {
font-size: 20px;
line-height: 1.4;
}
.team-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-4);
}
@media (min-width: 1024px) {
.team-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.team-section .team-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.team-member {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-5);
padding: var(--space-4);
}
.team-member__avatar {
width: 176px;
height: 176px;
max-width: 100%;
border-radius: var(--radius-full);
background: var(--avatar-bg);
}
.team-member__avatar--photo {
display: block;
overflow: hidden;
padding: 6px;
}
.about__avatar-img,
.team-member__avatar-img {
filter: grayscale(100%);
}
.team-member__avatar-img {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 1;
border-radius: var(--radius-full);
object-fit: cover;
}
.team-member__name {
font-size: 18px;
font-weight: 700;
color: var(--purple-500);
text-align: center;
}
.team-member__role {
margin-top: calc(var(--space-5) * -1);
font-size: var(--fs-body-md);
color: var(--color-text-subtle);
text-align: center;
}
/* ── Quote ── */
.quote {
background: var(--color-bg-brand);
padding: var(--space-10) var(--space-4);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.quote__text {
font-size: 24px;
font-weight: 700;
color: var(--color-text-on-brand);
max-width: 56ch;
}
@media (min-width: 1024px) {
.quote__text {
font-size: 40px;
}
}
.quote__attribution {
font-size: 24px;
font-weight: 500;
color: var(--color-text-on-brand);
margin-top: var(--space-2);
}
@media (min-width: 1024px) {
.quote__attribution {
font-size: 40px;
}
}
/* ── Contact bar ── */
/* margin-top/-bottom close out the confirmed Quote→ContactUs (66px) and
ContactUs→Footer (71px) content gaps, net of Quote's own pb-40 (real,
part of .quote's padding below) and Footer's own pt-40 (real, set on
.footer) — see the .section comment above for the measurement method. */
.contact-bar {
background: var(--color-bg-surface-card);
height: 80px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 26px;
margin-bottom: 31px;
}
.contact-bar a {
font-size: 18px;
font-weight: 800;
color: var(--purple-500);
text-transform: uppercase;
}
/* ── Footer ── */
.footer {
background: var(--color-bg-footer);
padding: var(--space-10) 0 80px;
}
.footer__links {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
border-bottom: 1px solid var(--color-border-default);
padding-bottom: var(--space-10);
}
@media (min-width: 1024px) {
.footer__links {
grid-template-columns: repeat(3, 1fr);
}
}
.footer__col {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.footer__col a {
font-size: var(--fs-body-md);
color: var(--color-text-default);
}
.footer__col a:hover {
color: var(--purple-500);
}
.footer__bottom {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-6);
padding-top: var(--space-10);
}
@media (min-width: 1024px) {
.footer__bottom {
flex-direction: row;
align-items: center;
}
}
.footer__logo img {
height: 35px;
width: auto;
}
.footer__copyright {
font-size: 15px;
color: var(--color-text-subtle);
}
.footer__social {
display: flex;
gap: var(--space-4);
}
.footer__social a {
display: inline-flex;
width: 32px;
height: 32px;
align-items: center;
justify-content: center;
color: var(--purple-500);
}
.footer__social svg {
width: 20px;
height: 20px;
fill: currentColor;
}
/* ════════════════════════════════════════════════════════════════════
Humans of Quotient page (src/marketing/humans-of-quotient/index.html)
════════════════════════════════════════════════════════════════════ */
/* Background blobs — this page has its own independent ellipse set,
different sizes/positions than the home page (confirmed via
get_design_context — Figma layer names on this page don't reliably
indicate color; identity was confirmed by downloading each SVG and
reading its real stop-color, see Components/background-blobs.md).
Section-position values (--cy) below are provisional pending
measurement against this page's actual rendered layout — see the
.section comment further up for why raw Figma canvas coordinates
can't be reused directly (fixed-height canvas vs. fluid page). */
body.page-humans-of-quotient {
--blob-purple-cx: 0px;
--blob-purple-cy: 3800px;
--blob-sage-cx: 0px;
--blob-sage-cy: 300px;
--blob-blue-cx: 0px;
--blob-blue-cy: 1900px;
--blob-gold-cx: 0px;
--blob-gold-cy: 4900px;
--blob-purple-size: 1800px;
--blob-sage-size: 900px;
--blob-blue-size: 1600px;
--blob-gold-size: 2000px;
}
@media (min-width: 1024px) {
body.page-humans-of-quotient {
--blob-purple-cy: 0px;
--blob-sage-cy: 0px;
--blob-blue-cy: 0px;
--blob-gold-cy: -300px;
--blob-purple-size: 0px;
--blob-sage-size: 0px;
--blob-blue-size: 0px;
--blob-gold-size: 4000px;
}
}
body.page-humans-of-quotient .bg-decoration {
background-image: url("/assets/images/bg-blob-hoq-purple-mobile.svg"),
url("/assets/images/bg-blob-hoq-gold-mobile.svg"), url("/assets/images/bg-blob-hoq-blue.svg"),
url("/assets/images/bg-blob-hoq-sage-mobile.svg");
}
@media (min-width: 1024px) {
body.page-humans-of-quotient .bg-decoration {
background-image: url("/assets/images/bg-blob-hoq-purple-desktop.svg"),
url("/assets/images/bg-blob-hoq-gold-desktop.svg"), url("/assets/images/bg-blob-hoq-blue.svg"),
url("/assets/images/bg-blob-hoq-sage-desktop.svg");
}
}
/* ════════════════════════════════════════════════════════════════════
Blog index page (rendered by src/backend/apps/marketing_content/static_renderer.py)
════════════════════════════════════════════════════════════════════ */
body.page-blog {
--blob-purple-cx: 0px;
--blob-purple-cy: 3800px;
--blob-sage-cx: 0px;
--blob-sage-cy: 300px;
--blob-blue-cx: 0px;
--blob-blue-cy: 1900px;
--blob-gold-cx: 0px;
--blob-gold-cy: 4900px;
--blob-purple-size: 1800px;
--blob-sage-size: 900px;
--blob-blue-size: 1600px;
--blob-gold-size: 2000px;
}
@media (min-width: 1024px) {
body.page-blog {
--blob-purple-cy: -200px;
--blob-sage-cy: 0px;
--blob-blue-cy: 0px;
--blob-gold-cy: 1000px;
--blob-purple-size: 3000px;
--blob-sage-size: 0px;
--blob-blue-size: 0px;
--blob-gold-size: 0px;
}
}
body.page-blog .bg-decoration {
background-image: url("/assets/images/bg-blob-hoq-purple-mobile.svg"),
url("/assets/images/bg-blob-hoq-gold-mobile.svg"), url("/assets/images/bg-blob-hoq-blue.svg"),
url("/assets/images/bg-blob-hoq-sage-mobile.svg");
}
@media (min-width: 1024px) {
body.page-blog .bg-decoration {
background-image: url("/assets/images/bg-blob-hoq-purple-desktop.svg"),
url("/assets/images/bg-blob-hoq-gold-desktop.svg"), url("/assets/images/bg-blob-hoq-blue.svg"),
url("/assets/images/bg-blob-hoq-sage-desktop.svg");
}
}
/* Section padding below is a neutral placeholder pending measurement
against this page's real rendered section positions (same rule as the
home page's .section comment: never invent a uniform value). */
.hoq-hero-section,
.exceptional-humans-section,
.hoq-team-section,
.hoq-about-section,
.ethics-section {
padding-top: var(--space-6);
padding-bottom: var(--space-6);
}
.hoq-team-section {
padding-top: 120px;
}
.ethics-section {
padding-top: 120px;
}
/* ── Hero media (desktop/mobile are different SVG exports, not one
asset resized — swap visibility by breakpoint) ── */
.hoq-hero-media__img--mobile {
display: block;
width: 100%;
max-width: 400px;
}
.hoq-hero-media__img--desktop {
display: none;
}
@media (min-width: 1024px) {
.hoq-hero-media__img--mobile {
display: none;
}
.hoq-hero-media__img--desktop {
display: block;
width: 100%;
max-width: 516px;
}
}
/* ── Exceptional humans checklist ── */
.exceptional-humans {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
@media (min-width: 1024px) {
.exceptional-humans {
display: grid;
grid-template-columns: 421fr 694fr;
gap: 62px;
}
}
.exceptional-humans-intro {
margin-bottom: 0;
}
.exceptional-humans-content {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.exceptional-humans-list {
list-style: none;
display: flex;
flex-direction: column;
width: 100%;
margin-bottom: var(--space-6);
}
.exceptional-humans-list__item {
font-size: var(--fs-body-lg);
font-weight: 600;
color: var(--color-text-default);
padding: var(--space-4) 0;
border-bottom: 1px solid var(--color-border-default);
}
.exceptional-humans-list__item:last-child {
border-bottom: none;
}
/* ── Team (8-member grid — reuses .team-grid/.team-member from the home
page's Humans of Quotient teaser, only the desktop column count
differs: 4 here vs. 3 there) ── */
.section-header--center {
align-items: center;
text-align: center;
}
@media (min-width: 1024px) {
.team-grid--eight {
grid-template-columns: repeat(4, 1fr);
}
}
.hoq-team-section__link {
display: flex;
justify-content: center;
margin-top: var(--space-8);
}
/* ── Ethics (Quotient Code of Ethics — reuses .quotients/.quotient-item
from the home page's Quotients list, but items have no per-item link
and the list ends in a single shared CTA instead) ── */
.ethics {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
@media (min-width: 1024px) {
/* 421fr:694fr with a real 62px gap between columns — confirmed via
get_metadata (intro column ends x=537, list column starts x=599,
within HOQ Desktop node 407:22's Frame21-space coordinates). */
.ethics {
display: grid;
grid-template-columns: 421fr 694fr;
gap: 62px;
}
}
.ethics-intro {
margin-bottom: 0;
}
.ethics-list__cta {
align-self: flex-start;
margin-top: var(--space-4);
}
/* ════════════════════════════════════════════════════════════════════
Services page (src/marketing/services/index.html)
════════════════════════════════════════════════════════════════════ */
/* Background blobs — confirmed byte-identical to the Humans of Quotient
page's blob assets (same colors/opacities, verified via `diff` on the
downloaded SVGs, not assumed from Figma layer names or matching
coordinates). Reuses the existing bg-blob-hoq-*.svg files directly —
no new assets. Only the position/size values differ, since this page's
section layout is different. See Components/background-blobs.md. */
body.page-services {
--blob-purple-cx: 0px;
--blob-purple-cy: 5200px;
--blob-sage-cx: 0px;
--blob-sage-cy: 400px;
--blob-blue-cx: 0px;
--blob-blue-cy: 2100px;
--blob-gold-cx: 0px;
--blob-gold-cy: 3200px;
--blob-purple-size: 1800px;
--blob-sage-size: 900px;
--blob-blue-size: 1600px;
--blob-gold-size: 1800px;
}
@media (min-width: 1024px) {
body.page-services {
--blob-purple-cy: 0px;
--blob-sage-cy: 0px;
--blob-blue-cy: 0px;
--blob-gold-cy: -300px;
--blob-purple-size: 0px;
--blob-sage-size: 0px;
--blob-blue-size: 0px;
--blob-gold-size: 4000px;
}
}
body.page-services .bg-decoration {
background-image: url("/assets/images/bg-blob-hoq-purple-mobile.svg"),
url("/assets/images/bg-blob-hoq-gold-mobile.svg"), url("/assets/images/bg-blob-hoq-blue.svg"),
url("/assets/images/bg-blob-hoq-sage-mobile.svg");
}
@media (min-width: 1024px) {
body.page-services .bg-decoration {
background-image: url("/assets/images/bg-blob-hoq-purple-desktop.svg"),
url("/assets/images/bg-blob-hoq-gold-desktop.svg"), url("/assets/images/bg-blob-hoq-blue.svg"),
url("/assets/images/bg-blob-hoq-sage-desktop.svg");
}
}
/* Section padding below is a neutral placeholder pending measurement
against this page's real rendered section positions. */
.services-hero-section,
.services-how-section,
.services-about-section,
.gtm-strategy-section,
.assessments-section,
.services-team-section {
padding-top: var(--space-6);
padding-bottom: var(--space-6);
}
.assessments-section {
padding-top: 120px;
}
/* ── Hero media (desktop/mobile are different SVG exports) ── */
.services-hero-media__img--mobile {
display: block;
width: 100%;
max-width: 384px;
}
.services-hero-media__img--desktop {
display: none;
}
@media (min-width: 1024px) {
.services-hero-media__img--mobile {
display: none;
}
.services-hero-media__img--desktop {
display: block;
width: 100%;
max-width: 512px;
}
}
/* ── How We Work (Services variant — inline number+title, own copy;
NOT a reuse of the home page's .steps/.step, which has different
copy and a different visual treatment) ── */
.services-how {
display: flex;
flex-direction: column;
gap: var(--space-10);
}
@media (min-width: 1024px) {
.services-how {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
}
}
.services-how__intro {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.services-steps {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 30px;
}
.services-step {
display: flex;
flex-direction: column;
gap: var(--space-3);
width: 100%;
}
.services-step__row {
display: flex;
align-items: center;
gap: var(--space-2);
}
.services-step__number {
font-size: 24px;
font-weight: 800;
color: var(--color-text-default);
}
.services-step__title {
font-size: 24px;
font-weight: 500;
color: var(--color-text-default);
}
.services-step__divider {
display: block;
height: 1px;
width: 100%;
background: var(--color-border-default);
}
.services-step__body {
font-size: var(--fs-body-md);
line-height: 1.5;
color: var(--color-text-default);
}
.services-steps__cta {
align-self: flex-start;
margin-top: var(--space-4);
}
/* ── GTM Strategy with Braedi — intro column (eyebrow/title/body/CTA)
+ list column, reusing .quotient-item__block/__title/__body from the
home page's Quotients list (same visual language: divider between
items, no divider after last, --space-7 padding already matches this
section's real 28px item padding exactly) but with no per-item link
and a plain 50/50 column split (not the Quotients section's custom
400fr/795fr ratio). ── */
.gtm-strategy {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
@media (min-width: 1024px) {
.gtm-strategy {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 62px;
align-items: start;
}
.gtm-strategy__intro {
margin-bottom: 0;
}
}
/* ── Assessments & Tools — Services-page row layout matching the local
How We Work split: intro column first, stacked instrument rows second. ── */
.assessments {
display: flex;
flex-direction: column;
gap: var(--space-10);
}
@media (min-width: 1024px) {
.assessments {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
}
}
.assessments__intro {
margin-bottom: 0;
}
.assessments-grid {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 30px;
}
.assessment-card {
display: flex;
flex-direction: column;
gap: var(--space-3);
width: 100%;
}
.assessment-card__title {
font-size: 20px;
font-weight: 700;
color: var(--color-text-default);
}
.assessment-card__divider {
display: block;
height: 1px;
width: 100%;
background: var(--color-border-default);
}
.assessment-card__body {
font-size: var(--fs-body-md);
line-height: 1.5;
color: var(--color-text-default);
}
.assessment-card__link {
font-size: var(--fs-body-md);
font-weight: 900;
color: var(--purple-500);
text-decoration: underline;
text-underline-offset: 2px;
}
.assessments-section__cta {
margin-top: var(--space-2);
}
/* ════════════════════════════════════════════════════════════════════
Contact page (src/marketing/contact/index.html)
No Figma wireframe exists for this page — layout/copy adapted from a
reference screenshot, styled with this design system's existing
tokens rather than the reference's own ad hoc CSS variables.
════════════════════════════════════════════════════════════════════ */
.contact-section {
padding-top: var(--space-16);
padding-bottom: var(--space-16);
}
.contact {
display: flex;
flex-direction: column;
gap: var(--space-10);
}
@media (min-width: 1024px) {
.contact {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
align-items: start;
}
}
.contact__heading {
font-size: var(--fs-heading-lg);
font-weight: 700;
line-height: 1.2;
color: var(--color-text-default);
margin-bottom: var(--space-6);
}
.contact__subtext {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-bottom: var(--space-6);
}
.contact__subtext p {
font-size: var(--fs-body-lg);
color: var(--color-text-muted);
line-height: 1.5;
}
.contact__divider {
border: none;
border-top: 1px solid var(--color-border-default);
margin: 0 0 var(--space-6);
}
.contact__support {
font-size: var(--fs-body-sm);
color: var(--color-text-muted);
}
.contact__support-link {
color: var(--purple-500);
font-weight: 500;
text-decoration: underline;
text-underline-offset: 2px;
}
.contact-card {
background: var(--white-00);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-lg);
padding: var(--space-8);
box-shadow: var(--shadow-card);
}
.contact-card__title {
font-size: var(--fs-body-lg);
font-weight: 700;
color: var(--color-text-default);
text-align: center;
margin-bottom: var(--space-6);
}
.contact-form {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.contact-form[hidden] {
display: none;
}
.contact-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
}
@media (max-width: 639px) {
.contact-form__row {
grid-template-columns: 1fr;
}
}
.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
width: 100%;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: var(--fs-body-sm);
color: var(--color-text-default);
background: var(--white-00);
appearance: none;
}
.contact-form__field select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2380808c' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-3) center;
padding-right: var(--space-8);
cursor: pointer;
}
.contact-form__field textarea {
resize: vertical;
min-height: 96px;
}
.contact-form__field input:focus-visible,
.contact-form__field select:focus-visible,
.contact-form__field textarea:focus-visible {
outline: 1px solid var(--focus-ring);
outline-offset: 2px;
border-color: var(--purple-500);
}
.contact-form__submit {
width: 100%;
justify-content: center;
margin-top: var(--space-1);
}
.contact-form__error {
font-size: var(--fs-body-sm);
color: #c0392b;
text-align: center;
}
.contact-form__legal {
font-size: var(--fs-label-sm);
color: var(--color-text-subtle);
text-align: center;
}
.contact-form__legal a {
color: var(--purple-500);
text-decoration: underline;
text-underline-offset: 2px;
}
.contact-success {
text-align: center;
padding: var(--space-10) var(--space-4);
}
.contact-success__icon {
width: 52px;
height: 52px;
border-radius: var(--radius-full);
background: var(--color-bg-brand-subtle);
color: var(--purple-500);
font-size: var(--fs-heading-sm);
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-5);
}
.contact-success__title {
font-size: var(--fs-heading-md);
font-weight: 700;
color: var(--color-text-default);
margin-bottom: var(--space-2);
}
.contact-success__subtitle {
font-size: var(--fs-body-md);
color: var(--color-text-muted);
}
/* ════════════════════════════════════════════════════════════════════
Legal pages (src/marketing/privacy/index.html)
No Figma wireframe exists for this — a simple, readable single-column
prose layout using existing tokens, sized for long-form legal text
rather than reusing any marketing-page component.
════════════════════════════════════════════════════════════════════ */
.legal-section {
padding-top: var(--space-16);
padding-bottom: var(--space-16);
}
.legal {
max-width: 72ch;
margin: 0 auto;
}
.legal__header {
margin-bottom: var(--space-10);
}
.legal__title {
font-size: var(--fs-heading-lg);
font-weight: 700;
color: var(--color-text-default);
margin-bottom: var(--space-2);
}
.legal__updated {
font-size: var(--fs-body-sm);
color: var(--color-text-subtle);
}
.legal__body h2 {
font-size: var(--fs-heading-sm);
font-weight: 700;
color: var(--color-text-default);
margin-top: var(--space-10);
margin-bottom: var(--space-4);
}
.legal__body p {
font-size: var(--fs-body-md);
line-height: 1.6;
color: var(--color-text-default);
margin-bottom: var(--space-4);
}
.legal__body ul {
margin: 0 0 var(--space-4);
padding-left: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.legal__body li {
font-size: var(--fs-body-md);
line-height: 1.6;
color: var(--color-text-default);
}
.legal__body a {
color: var(--purple-500);
text-decoration: underline;
text-underline-offset: 2px;
}
.legal__body strong {
font-weight: 700;
}