/* ============================================================
CLEO — SHARED FOUNDATION
Design tokens, reset, typography, utilities, header, footer.
This is the single source of truth for layout + chrome.
Page-specific styles live alongside each page.
============================================================ */
/* ---- Design tokens ---------------------------------------- */
:root {
--blue: #1A3CF2;
--blue-press: #1230d4;
--ink: #0D0D12;
--navy: #0B1437;
--paper: #FBFBFD;
--paper-2: #F2F3F8;
--green: #0E9F6E;
--verified: #0E9F6E;
--verified-tint: #E4F6EE;
--gold: #C8A24B;
--line: #E6E6EC;
--muted: #5B5D6B;
--display: "Bricolage Grotesque", system-ui, sans-serif;
--body: "Inter", system-ui, sans-serif;
--mono: "Space Mono", ui-monospace, monospace;
--nav-h: 68px;
--maxw: 1140px;
--r: 18px;
/* Fluid vertical rhythm — the one spacing scale every page uses.
Sections breathe on desktop and tighten on phones without each
page stylesheet needing its own media queries. */
--sec-pad: clamp(44px, 6vw, 72px); /* standard section block */
--sec-pad-tight: clamp(32px, 4.5vw, 48px); /* dense hub/listing pages */
--hero-pad-t: clamp(36px, 5vw, 56px); /* hero top padding */
--hero-pad-b: clamp(24px, 3.5vw, 40px); /* hero bottom padding */
}
/* ---- Reset & base ----------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--body);
color: var(--ink);
background: var(--paper);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
img, svg, video, canvas { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, .display {
font-family: var(--display);
letter-spacing: -.02em;
line-height: 1.04;
}
.eyebrow {
font-family: var(--mono);
font-size: .72rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--blue);
font-weight: 700;
}
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
/* Skip link for keyboard / screen-reader users */
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 2000;
background: var(--blue); color: #fff; padding: 12px 18px;
border-radius: 0 0 10px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }
/* ---- Layout ----------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
/* Tighter gutters on small phones so content isn't squeezed. */
@media (max-width: 400px) { .wrap { padding: 0 16px; } }
/* ---- Responsive panels ------------------------------------
The big rounded CTA / feature panels (.final, .comp, .mission, …)
are repeated across pages with ~44–48px of side padding. On small
phones that crushes the copy into a narrow column, so tighten the
horizontal padding here (vertical padding is left to each panel).
Scoped under `section` so it wins over the per-page definitions,
which load after this file. */
@media (max-width: 560px) {
section .final, section .mission, section .opencall, section .comp,
section .privacy, section .benefits, section .callout, section .ccenter,
section .news, section .problem, section .anchor, section .trust,
section .statband, section .pp-band, section .form-wrap {
padding-left: 26px; padding-right: 26px;
}
}
/* ---- Buttons ---------------------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
font-family: inherit; font-weight: 600; font-size: .95rem;
padding: .85rem 1.4rem; border-radius: 999px;
border: 1.5px solid transparent; cursor: pointer;
transition: transform .15s, background .15s, border-color .15s, box-shadow .15s;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-press); transform: translateY(-1px); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-1px); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { transform: translateY(-1px); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { transform: translateY(-1px); }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }
/* ---- Forms: honeypot + submit status ---------------------- */
/* Honeypot: pulled off-screen so humans/AT never see it, but naive
bots fill it in. Paired with a JS time-trap in main.js. */
.hp-field {
position: absolute; left: -9999px; top: auto;
width: 1px; height: 1px; overflow: hidden;
}
.form-status {
margin-top: 14px; padding: 12px 14px; border-radius: 10px;
font-size: .9rem; font-weight: 500; line-height: 1.45;
flex-basis: 100%; /* claim its own line inside flex-row forms */
}
.form-status--ok { background: var(--verified-tint); color: #0a6e4a; border: 1px solid #bfe6cf; }
.form-status--err { background: #fdecec; color: #b42318; border: 1px solid #f5c9c4; }
/* ---- Brand logo (kept from cleo-website) ------------------ */
.brand {
display: inline-flex; align-items: center; gap: .5rem;
font-family: var(--display); font-weight: 800; font-size: 1.32rem;
letter-spacing: -.02em; color: var(--ink); line-height: 1;
}
.brand__mark {
width: 26px; height: 26px; border-radius: 8px;
background: var(--blue); position: relative; flex: none;
}
.brand__mark::after {
content: ""; position: absolute; inset: 7px;
border: 2.5px solid #fff; border-radius: 50%;
border-right-color: transparent; transform: rotate(-45deg);
}
.brand--light { color: #fff; }
/* ---- Visual panels (formerly dashed image placeholders) ----
Restyled into finished, brand-tinted panels so the site never
shows "replace me" boxes. Page markup keeps an emoji glyph as a
simple decorative icon; replace-text captions are hidden. */
.ph {
position: relative;
background:
radial-gradient(120% 120% at 0% 0%, rgba(26, 60, 242, .10), transparent 60%),
linear-gradient(150deg, var(--paper-2), #fff);
border: 1px solid var(--line);
border-radius: 16px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; color: var(--muted); padding: 24px;
overflow: hidden;
/* Never let an aspect-ratio + min-height panel force its width past the
grid/flex column it sits in (grid items default to min-width:auto). */
min-width: 0; max-width: 100%;
}
.ph .pi { font-size: 2.2rem; line-height: 1; opacity: .9; }
/* Hide every "replace me / dimensions" caption left over from the mockups so
the production site never shows placeholder chrome. !important is used to
beat the more specific per-page rules these labels were styled with. */
.ph .pl, .ph .pd,
.blabel, .vlabel { display: none !important; }
/* ---- Scroll-reveal animation ------------------------------ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s, transform .7s; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
* { scroll-behavior: auto; animation: none !important; transition: none !important; }
}
/* ============================================================
===== CLEO HEADER (from remixed reference) =================
============================================================ */
.cleo-top {
position: sticky; top: 0; z-index: 1000;
background: rgba(251, 251, 253, .86);
backdrop-filter: saturate(140%) blur(12px);
border-bottom: 1px solid var(--line);
}
.cleo-top__inner {
max-width: var(--maxw); margin: 0 auto; height: var(--nav-h);
padding: 0 24px; display: flex; align-items: center; gap: 28px;
}
.cleo-top__nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.cleo-top__link,
.cleo-top__trigger {
font-family: var(--body); font-size: 15px; font-weight: 500; color: var(--ink);
background: none; border: 0; cursor: pointer;
padding: 9px 13px; border-radius: 9px; line-height: 1;
display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
transition: background .15s, color .15s;
}
.cleo-top__link:hover, .cleo-top__trigger:hover { background: var(--paper-2); }
.cleo-top__trigger .chev { transition: transform .18s; }
.cleo-top__group { position: relative; }
.cleo-top__group.is-open .cleo-top__trigger .chev,
.cleo-top__group:hover .cleo-top__trigger .chev { transform: rotate(180deg); }
.cleo-top__menu {
position: absolute; top: calc(100% + 8px); left: 0; min-width: 248px;
background: #fff; border: 1px solid var(--line); border-radius: 14px;
box-shadow: 0 18px 44px -18px rgba(13, 13, 18, .28);
padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px);
transition: opacity .16s, transform .16s, visibility .16s;
}
.cleo-top__menu a {
display: block; padding: 10px 12px; border-radius: 9px;
font-size: 14.5px; color: var(--ink); transition: background .12s;
}
.cleo-top__menu a span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; font-weight: 400; }
.cleo-top__menu a:hover { background: var(--paper-2); }
@media (hover: hover) {
.cleo-top__group:hover .cleo-top__menu { opacity: 1; visibility: visible; transform: translateY(0); }
}
.cleo-top__group:focus-within .cleo-top__menu,
.cleo-top__group.is-open .cleo-top__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.cleo-top__cta {
margin-left: 8px; background: var(--blue); color: #fff;
padding: 10px 18px; border-radius: 10px; font-weight: 600; font-size: 15px;
box-shadow: 0 8px 20px -10px rgba(26, 60, 242, .7);
transition: transform .12s, box-shadow .15s;
}
.cleo-top__cta:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -10px rgba(26, 60, 242, .8); }
.cleo-top__burger {
display: none; margin-left: auto; width: 42px; height: 42px;
border: 1px solid var(--line); border-radius: 10px; background: #fff;
cursor: pointer; align-items: center; justify-content: center;
}
.cleo-top__burger span { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; transition: .2s; }
.cleo-top__burger span::before, .cleo-top__burger span::after {
content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); transition: .2s;
}
.cleo-top__burger span::before { top: -6px; }
.cleo-top__burger span::after { top: 6px; }
.cleo-top.is-mobile-open .cleo-top__burger span { background: transparent; }
.cleo-top.is-mobile-open .cleo-top__burger span::before { top: 0; transform: rotate(45deg); }
.cleo-top.is-mobile-open .cleo-top__burger span::after { top: 0; transform: rotate(-45deg); }
@media (max-width: 920px) {
.cleo-top__burger { display: flex; }
.cleo-top__nav {
position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
background: var(--paper); border-bottom: 1px solid var(--line);
padding: 10px 16px 22px; margin: 0; max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
transform: translateY(-12px); opacity: 0; visibility: hidden; transition: .2s;
}
.cleo-top.is-mobile-open .cleo-top__nav { transform: none; opacity: 1; visibility: visible; }
.cleo-top__link, .cleo-top__trigger { width: 100%; justify-content: space-between; padding: 14px 8px; border-radius: 10px; font-size: 16px; }
.cleo-top__group { border-bottom: 1px solid var(--line); }
.cleo-top__menu {
position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0;
padding: 0 0 6px 8px; min-width: 0; max-height: 0; overflow: hidden; transition: max-height .22s ease;
}
.cleo-top__group.is-open .cleo-top__menu { max-height: 520px; }
.cleo-top__group:hover .cleo-top__menu { max-height: 0; }
.cleo-top__group.is-open .cleo-top__menu { max-height: 520px; }
.cleo-top__cta { margin: 14px 8px 0; text-align: center; padding: 14px; }
}
/* ============================================================
===== CLEO FOOTER (from remixed reference) =================
============================================================ */
.cleo-foot { background: var(--ink); color: #fff; margin-top: 0; }
.cleo-foot__inner { max-width: var(--maxw); margin: 0 auto; padding: 56px 24px 30px; }
.cleo-foot__top { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 36px; }
.cleo-foot__brand { max-width: 280px; }
.cleo-foot__brand p { color: #A6A8B6; font-size: 14.5px; margin: 14px 0 18px; line-height: 1.55; }
.cleo-foot__pill {
display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono);
font-size: 11.5px; letter-spacing: .06em; color: #fff;
background: rgba(14, 159, 110, .16); border: 1px solid rgba(14, 159, 110, .45);
border-radius: 999px; padding: 6px 12px;
}
.cleo-foot__pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(14, 159, 110, .25); }
.cleo-foot__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; grid-column: 2 / -1; }
.cleo-foot__col h4 {
font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
color: #7E8092; font-weight: 700; margin: 0 0 14px;
display: flex; align-items: center; justify-content: space-between;
}
.cleo-foot__col h4 .acc { display: none; }
.cleo-foot__col ul { list-style: none; margin: 0; padding: 0; }
.cleo-foot__col li { margin: 0 0 11px; }
.cleo-foot__col a { color: #C9CAD4; font-size: 14.5px; transition: color .12s; }
.cleo-foot__col a:hover { color: #fff; }
.cleo-foot__cand {
grid-column: 1 / -1; margin-top: 8px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09);
border-radius: 14px; padding: 16px 20px;
}
.cleo-foot__cand strong { font-family: var(--display); font-size: 16px; }
.cleo-foot__cand .links { display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto; }
.cleo-foot__cand a { color: #C9CAD4; font-size: 14px; }
.cleo-foot__cand a:hover { color: var(--green); }
.cleo-foot__bar {
border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 40px; padding-top: 22px;
display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.cleo-foot__bar small { color: #7E8092; font-size: 13px; }
.cleo-foot__bar nav { display: flex; gap: 20px; flex-wrap: wrap; }
.cleo-foot__bar nav a { color: #A6A8B6; font-size: 13px; }
.cleo-foot__bar nav a:hover { color: #fff; }
/* ============================================================
ICON SYSTEM
Line icons (src/lib/icons.js) rendered via the component
or renderIcon(). Every icon is an inline