/* ══════════════════════════════════════════════════════════════════════════ floom-theme.css — the design system, applied site-wide The homepage was rebuilt on the warm palette in floom-hero.css; the other eleven pages were still on the palette that preceded it — a colder ink, a lighter body grey, a centred nav and an orange CTA. Rather than editing eleven files of markup, this layer re-points the *legacy tokens themselves* at the design system, so every rule already written against them inherits the new values, and then re-bases the shared components on top. Load order matters: after floom-ui.css (which defines --ui-*), and BEFORE floom-hero.css. The homepage's own treatment is the reference the rest is being matched to, so where the two overlap, hero still wins. ══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── the palette, as the site's own names ────────────────────────────── Thirteen members, nothing else (scripts/design-system/palette.mjs). A state is a different member, never a tint: hover borders go Light Orange, a recessed ground is Light Gray, disabled is Silver. The only variation permitted is opacity, and only where translucency is the point. */ --fl-canvas: #FFFFFF; /* White — the page ground (Off White until 2026-10-31) */ --fl-panel: #EDEDED; /* Light Gray — recessed sections */ --fl-ink: #181818; /* Off Black — body text, dark surfaces */ --fl-ink-soft: #767270; /* Medium Gray — secondary text */ --fl-ease-out: cubic-bezier(.22, 1, .36, 1); --fl-ease-soft: cubic-bezier(.4, 0, .2, 1); /* ── spacing: the 4/8 grid ───────────────────────────────────────────── Every padding, margin, gap and offset on the site is a multiple of 4px, and the steps below are the ones to reach for (Apple's own rhythm: 8 for things that belong together, more as they belong together less). 4 micro an icon beside its label 8 xs a title and its subtitle 16 s inside a card or a field; a phone's page margin 24 m between distinct things inside one container 32 l a modal's padding; a large card's sections 48 / 64 / 96 / 128 between sections — the macro rhythm A fluid value is rounded onto the grid where it is used: padding: round(clamp(48px, 6vw, 96px), 8px); so it lands on a multiple at every width. 1–2px optical nudges on a margin or an offset are the only values allowed off it. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px; --sp-32: 128px; /* ── the hierarchy (Apple HIG › Typography: hierarchy by size and weight, few levels, the most important largest) ───────────────────────────── Four heading levels and the lede, each on the type ladder and each three ladder steps (φ^¾ ≈ 1.43×) above the one below, so a page's title is always its largest words and nothing below competes with it. Desktop caps / phone floors: display 46.61 / 28.81 the page's title — one per page (h1) title 1 32.5 / 22.65 a section's heading (h2) title 2 25.55 / 20.08 a step, a sub-section, a large card (h3) title 3 20.08 / 17.81 a card's or a question's title lede 20.08 / 15.79 the line under a page title or a heading The vw terms are chosen so each reaches its cap at 1440. */ --fl-t-display: clamp(28.81px, 3.3vw, 46.61px); --fl-t-title1: clamp(22.65px, 2.3vw, 32.5px); --fl-t-title2: clamp(20.08px, 1.8vw, 25.55px); --fl-t-title3: clamp(17.81px, 1.4vw, 20.08px); --fl-t-lede: clamp(15.79px, 1.4vw, 20.08px); /* ── a head's spacing (HIG › Layout: group by proximity) ──────────────── The eyebrow belongs to its heading and the standfirst to both, so those two gaps are small and fixed; the head and what it introduces are a larger step apart; sections are the largest. Above a heading is always more than below it. */ --fl-gap-eyebrow: var(--sp-4); /* eyebrow → heading */ --fl-gap-stand: var(--sp-4); /* heading → standfirst */ --fl-gap-head: round(clamp(40px, 4.4vw, 64px), 8px); /* head → its content */ --fl-pad-section: round(clamp(64px, 8.9vw, 128px), 8px); /* a section's top and bottom */ /* ── the 12-column grid ───────────────────────────────────────────────── Every page sits on one grid: twelve columns between two page margins, capped at 1360 — at 1440 its outer edges are exactly the nav's logo and its button, so the bar, the content and the footer share one left and one right edge. --fl-gutter the page margin: 48 on a desk and a tablet (768 and up), 24 from 480 to 767, 16 under 480 --fl-col-gap the gap between columns: 16 → 24 --fl-wrap the grid itself — every section's container uses it A block takes a width of whole columns, never a pixel figure: --fl-span-N N columns of the grid it sits IN (its containing block is the grid, so 100% is the grid's width) --fl-wrap-N an N-column box placed straight in a full-width section (it works out the grid's width itself), centred with margin-inline: auto Both are percentages of the containing block, not viewport units, so a classic scrollbar cannot throw them off. Spans widen as the window narrows — 8 of 12 is 10 of 12 on a tablet and all 12 on a phone — so a measure that suits a desktop never squeezes a phone (overrides below). */ --fl-gutter: 48px; --fl-col-gap: round(clamp(16px, 1.67vw, 24px), 4px); --fl-grid-max: 1360px; --fl-wrap: min(100% - 2 * var(--fl-gutter), var(--fl-grid-max)); --fl-span-4: calc((100% + var(--fl-col-gap)) * 4 / 12 - var(--fl-col-gap)); --fl-span-6: calc((100% + var(--fl-col-gap)) * 6 / 12 - var(--fl-col-gap)); --fl-span-8: calc((100% + var(--fl-col-gap)) * 8 / 12 - var(--fl-col-gap)); --fl-span-10: calc((100% + var(--fl-col-gap)) * 10 / 12 - var(--fl-col-gap)); --fl-wrap-6: calc((var(--fl-wrap) + var(--fl-col-gap)) * 6 / 12 - var(--fl-col-gap)); --fl-wrap-8: calc((var(--fl-wrap) + var(--fl-col-gap)) * 8 / 12 - var(--fl-col-gap)); --fl-wrap-10: calc((var(--fl-wrap) + var(--fl-col-gap)) * 10 / 12 - var(--fl-col-gap)); /* ── legacy tokens, re-pointed ───────────────────────────────────────── Same names, palette values, mirroring the mapping the design-system pass used on the other surfaces. 103 `var(--border)` and 74 `var(--text- secondary)` call sites move onto the system without one being edited. */ --black: #181818; /* Off Black */ --bg: #FAF6F1; /* Off White */ --bg-subtle: #EDEDED; /* Light Gray */ --gray-50: #EDEDED; /* only ever used as a section background */ --surface: rgba(24, 24, 24, .03); --surface-hover: rgba(24, 24, 24, .05); --border: rgba(24, 24, 24, .10); --border-hover: rgba(24, 24, 24, .16); --gray-200: #E2E2E2; /* Light Silver — borders, dividers */ --gray-300: #DBD4CF; /* Warm Light Gray — strong warm border */ --gray-500: #767270; /* Medium Gray */ /* One orange now does both jobs. The palette is closed, so the deeper text-accent this file used to carry is gone: display numerals, headline highlights, links and chips are all Orange. On Off White that measures 3.31:1 — large text and UI clear the 3:1 bar, small orange text does not clear 4.5:1. That limit is the design system's, accepted with it. */ --accent-display: #FF3C00; /* Orange */ --accent: #FF3C00; /* Orange */ --accent-hover: #FF8A4D; /* Light Orange — the hover member */ /* Success is Dark Gray; the icon and the words carry the state, colour only reinforces it. There is no green in the palette. */ --success: #312E2E; /* Dark Gray */ --text: #181818; /* Off Black */ --text-secondary: #767270; /* Medium Gray — 4.76:1 on White */ --text-muted: #767270; /* Medium Gray */ } /* The page margin steps down where 48 a side would crush the column: 24 on a large phone, 16 on a small one. */ @media (max-width: 767.98px){ :root{ --fl-gutter: 24px; } } @media (max-width: 479.98px){ :root{ --fl-gutter: 16px; } } /* The spans widen as the window narrows (see the grid tokens above). */ @media (max-width: 1023.98px){ :root{ --fl-span-4: calc((100% + var(--fl-col-gap)) * 6 / 12 - var(--fl-col-gap)); --fl-span-6: calc((100% + var(--fl-col-gap)) * 8 / 12 - var(--fl-col-gap)); --fl-span-8: calc((100% + var(--fl-col-gap)) * 10 / 12 - var(--fl-col-gap)); --fl-span-10: 100%; --fl-wrap-6: calc((var(--fl-wrap) + var(--fl-col-gap)) * 8 / 12 - var(--fl-col-gap)); --fl-wrap-8: calc((var(--fl-wrap) + var(--fl-col-gap)) * 10 / 12 - var(--fl-col-gap)); --fl-wrap-10: var(--fl-wrap); } } @media (max-width: 719.98px){ :root{ --fl-span-4: 100%; --fl-span-6: 100%; --fl-span-8: 100%; --fl-span-10: 100%; --fl-wrap-6: var(--fl-wrap); --fl-wrap-8: var(--fl-wrap); --fl-wrap-10: var(--fl-wrap); } } /* The grid as a layout: twelve tracks with the column gap, for a section that places its parts on columns (grid-column: 4 / span 6) rather than centring a box of a given width. */ .fl-12{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--fl-col-gap); } /* floom-ui.css sets --ui-ring literally; point it at the same accent so the shadcn focus ring and the site's own are one colour. */ :root{ --ui-ring: var(--accent); } /* The accent on display type. --accent-display and --accent are one value now that the palette is closed, so this is a name for the role, not a second colour. */ .at, .fl-stat-num, .trust-stat .num.at{ color: var(--accent-display); } .ai-search-sub.at{ color: var(--accent); } /* ══ Navigation ═══════════════════════════════════════════════════════════ The other pages centred the links and left the CTA marooned at the far right. The approved layout groups them beside the CTA, logo holding the left, on the 24px page gutter. */ /* Surface: see floom-nav.css. */ .nav-inner{ display: flex; align-items: center; gap: 36px; } .nav-inner > :first-child{ margin-right: auto; } .nav-links{ gap: 32px; } .nav-links a{ position: relative; color: var(--fl-ink-soft); font-size: 14.5px; font-weight: 500; padding: 8px 4px; } .nav-links a::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; border-radius: 2px; background: var(--fl-ink); transform: scaleX(0); transform-origin: right; transition: transform .34s var(--fl-ease-out); } .nav-links a:hover{ color: var(--fl-ink); } .nav-links a:hover::after{ transform: scaleX(1); transform-origin: left; } /* ══ Buttons ══════════════════════════════════════════════════════════════ One primary action across the whole site: a near-black pill. Orange stays reserved for data, accents and focus, so a CTA never competes with a number. The legacy pages still had orange `.btn-accent` CTAs. */ .btn-accent{ background: var(--fl-ink); color: #fff; border-radius: 12px; padding: 16px 32px; min-height: 48px; font-size: 15px; box-shadow: 0 1px 2px rgba(0,0,0,.16), 0 6px 20px rgba(24,24,24,.16); transition: transform .28s var(--fl-ease-out), box-shadow .28s var(--fl-ease-out), background .2s var(--fl-ease-soft); } .btn-accent:hover{ background: #181818; transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,.18), 0 14px 34px rgba(24,24,24,.22); } .btn-accent:active{ transform: translateY(0); transition-duration: .09s; } .btn-accent.btn-lg{ padding: 16px 32px; min-height: 54px; font-size: 16px; border-radius: 14px; } .btn-primary{ border-radius: 11px; min-height: 44px; } .btn-ghost{ background: transparent; border-color: var(--border-hover); border-radius: var(--ui-radius-md); } .btn-ghost:hover{ background: var(--ui-hover); border-color: var(--border-hover); } /* ══ Surfaces ═════════════════════════════════════════════════════════════ Cards take the system's card recipe — the xl radius step, the token hairline, the xs elevation — instead of three different hand-set values. */ .value-card, .post-card, .job-card, .pricing-card, .team-card, .contact-card{ border-radius: var(--ui-radius-xl); border-color: var(--ui-border); } /* Metadata chips read as badges, not pills — matching the button language, which is rounded-rect throughout. */ .job-tag, .post-tag, .meta-tag{ border-radius: var(--ui-radius-md) !important; font-size: 12px; font-weight: 500; line-height: 1.3; padding: 4px 8px; } /* ══ Form controls ════════════════════════════════════════════════════════ */ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], select, textarea{ font-family: var(--font); color: var(--text); background: transparent; border: 1px solid var(--ui-input); border-radius: var(--ui-radius-md); box-shadow: var(--ui-shadow-xs); transition: border-color .16s ease, box-shadow .16s ease; } input::placeholder, textarea::placeholder{ color: var(--text-muted); } input:focus-visible, select:focus-visible, textarea:focus-visible{ outline: none; border-color: var(--ui-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-ring) 50%, transparent); } @supports not (color: color-mix(in srgb, red 50%, transparent)){ input:focus-visible, select:focus-visible, textarea:focus-visible{ outline: 2px solid var(--ui-ring); outline-offset: 2px; box-shadow: none; } } @media (prefers-reduced-motion: reduce){ .btn-accent, .nav-links a::after{ transition: none !important; } .btn-accent:hover{ transform: none; } } /* ── secondary text on a Light Gray ground ───────────────────────────────── Medium Gray measures 4.76:1 on White and 4.42:1 on the Off White page, but only 4.07:1 on Light Gray — which is why the palette names Dark Gray as the text colour there. These are the containers that lay down a Light Gray ground; re-pointing the two secondary tokens inside them carries every `var(--text-muted)` / `var(--text-secondary)` call site with them, at 11.49:1, without editing one of those rules. */ footer, .co-view, .q-view, .flow-diagram, .p-card-bubble.ai, /* the chips, bubbles and wells inside the product mockups sit on the same recessed ground, so they take the same darker secondary text */ .ui-bubble.ai, .ui-chip, .ui-file, .ui-bar, .split-card.read, .demo-top, .bubble-assistant, .sc-badge{ --text-secondary: #312E2E; /* Dark Gray */ --text-muted: #312E2E; --gray-500: #312E2E; --gray-600: #312E2E; --gray-700: #312E2E; /* the chat bubbles read this one */ --fl-ink-soft: #312E2E; /* the footer's own secondary token */ }