/* ── brand.css ── design system: tokens + shared primitives ── Fonts are loaded per-page in (Bricolage Grotesque + Manrope). Reference implementation validated in preview-direction.html — keep that file until this stylesheet is applied across all pages, then remove it. */ :root { color-scheme: light; /* colour — ONE accent (teal) + a desaturated warm "problem" tone + neutrals. Coral/purple were tried and explicitly rejected as an AI-cliché accent pairing. */ --teal: #0E7C6D; /* the one accent: solutions, links, stats, icon checks */ --teal-deep: #0A4A41; /* saturated shade for full-bleed blocks (hero, stat cards) */ --teal-soft: #DEF0EC; /* pale tint for icon-chip backgrounds, eyebrow pills */ --warn: #8A6A3A; /* problem-state ONLY — deliberately muted, never a second bright accent */ --warn-soft: #F1EADB; --paper: #FCFBF8; --white: #ffffff; --ink: #1A1917; /* headings */ --ink-mid: #403F3B; /* body copy */ --ink-faint: #6E6C64; /* labels, captions — measures ~5:1 on --paper, verify before shipping */ --rule: rgba(26, 25, 23, 0.12); /* type */ --font-display: 'Bricolage Grotesque', system-ui, sans-serif; /* bold headlines, stat numbers */ --font-body: 'Manrope', system-ui, sans-serif; /* all reading + UI text */ /* spacing scale */ --sp-1: 0.5rem; --sp-2: 0.75rem; --sp-3: 1rem; --sp-4: 1.5rem; --sp-5: 2rem; --sp-6: 3rem; --sp-7: 4.5rem; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--paper); overflow-x: hidden; } body { background: var(--paper); color: var(--ink-mid); font-family: var(--font-body); font-weight: 400; font-size: 18px; line-height: 1.72; } /* one background everywhere, one highlight colour everywhere */ ::selection { background: var(--teal-soft); color: var(--ink); } /* eyebrow — plain coloured label with a marker icon. NOT tracked-uppercase-mono (an AI-template tell) and NOT a filled pill (tried first, then rejected: "the impact chip looks like a secondary button" — a solid-fill rounded badge next to real nav buttons reads as clickable). Two markers only, chosen by state, both rotated 45°: a 4-circle clover (neutral/positive, via ) or a small rounded diamond (problem-state, via ::before). See "Eyebrow labels (final form)" above for the full rejection history — do not reintroduce per-section icon variety (checkmark/warning/arrow/plus) or a filled pill. */ .eyebrow { display: flex; align-items: center; gap: 7px; font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: 0.02em; color: var(--teal); margin-bottom: 1.1rem; } /* unrotated — at 14px, rotating the clover 45° points its petals at the bounding box's corners instead of its edges, which fills the corners in and reads as a rounded square/diamond rather than a clover at this size. */ .eyebrow svg { width: 14px; height: 14px; flex-shrink: 0; } .eyebrow.warn { color: var(--warn); } .eyebrow.warn svg { display: none; } /* warn state uses the ::before diamond instead, never both */ .eyebrow.warn::before { content: ''; width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); border-radius: 1.5px; flex-shrink: 0; } /* icon-bullet list — replaces plain dots/dashes per user's explicit request */ .ilist { display: flex; flex-direction: column; gap: 1rem; margin: 1.25rem 0; list-style: none; } .ilist li { display: flex; gap: 11px; align-items: flex-start; } .ilist .ic { flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px; background: var(--teal-soft); display: flex; align-items: center; justify-content: center; margin-top: 2px; } .ilist .ic svg { width: 13px; height: 13px; } .ilist .tx { font-size: 17px; color: var(--ink-mid); line-height: 1.6; } .ilist .tx strong { color: var(--ink); font-weight: 700; } .ilist.warn .ic { background: var(--warn-soft); } /* shared stat grid — solid teal-deep cards, bold white numbers (the "pazzazz" stat treatment) */ .stat-grid { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0; } .stat-card { background: var(--teal-deep); border-radius: 14px; padding: 1.25rem 1.35rem; flex: 1; min-width: 140px; } .stat-num { font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; color: var(--white); line-height: 1; letter-spacing: -0.02em; } .stat-label { font-size: 12.5px; color: #9CCFC5; margin-top: 0.45rem; line-height: 1.35; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } /* full-bleed helper — breaks a section out of a max-width reading column. Requires `overflow-x:hidden` on html/body (set above) or this overflows by the scrollbar width (caught during prototyping). */ .fullbleed { margin: 0 calc(50% - 50vw); } a { color: inherit; } img, video { max-width: 100%; } /* site-wide closing footer — originally homepage-only, now shared so every case study ends on the same "get in touch" note instead of the plainer .cs-footer (still defined per-page in case-study.css, kept only for pages that haven't adopted this one yet). margin-top:auto pushes it to the bottom of a short page on any page whose body is display:flex; flex-direction:column — a no-op, not a layout break, on pages that aren't, since it just falls back to sitting after the content in normal flow. */ .footer { margin-top: auto; background: var(--teal-soft); padding: 3rem 1.5rem 3.5rem; display: flex; justify-content: center; } .footer-inner { max-width: 640px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; } .footer-icon { color: var(--teal); display: flex; transform: rotate(45deg); animation: footerSpin 10s linear infinite; } @keyframes footerSpin { to { transform: rotate(405deg); } } @media (prefers-reduced-motion: reduce) { .footer-icon { animation: none; } } .footer-hi { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--ink); letter-spacing: -0.01em; margin: 0; } .footer-links { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; } .footer-link { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--teal); background: var(--white); text-decoration: none; padding: 0.65rem 1.35rem; border-radius: 100px; box-shadow: 0 1px 2px rgba(26, 36, 38, 0.06); transition: transform 0.25s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.25s ease; } .footer-link:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(14, 124, 109, 0.2); } @media (max-width: 640px) { .footer { padding: 1.5rem 1.25rem; } }