/**
* icrf-brand.css
* ────────────────────────────────────────────────────────────
* Shared design tokens for every ICRF product. One source of truth —
* change a value here, run sync-shared.sh, every product updates.
*
* REBUILT from the real site's actual stylesheet (styles.css,
* shared directly) — this is no longer an approximation. Colours,
* shadows, radii, and the signature details below (italic accent
* words in headings, the eyebrow-label pattern, layered shadows)
* are ported from the real thing, not guessed at.
*
* Font choice (Fraunces + Inter) turned out to already be correct
* from the earlier "robotic" fix — the gap was in the palette, the
* type weight (500, not 600 — lighter reads more editorial), and
* these signature details, not the fonts themselves.
*
* Variable and class names keep the `--icrf-` / `.icrf-` prefix
* already used across every page built so far, so this rewrite
* doesn't require touching every file that references them — only
* the values and the component patterns change.
*
* Self-hosted fonts, same reasoning as before: one less external
* dependency, one less thing that's slow on a bad connection.
* ────────────────────────────────────────────────────────────
*/
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:400; font-display:swap; src:url('./fonts/fraunces-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:italic; font-weight:400; font-display:swap; src:url('./fonts/fraunces-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:500; font-display:swap; src:url('./fonts/fraunces-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:600; font-display:swap; src:url('./fonts/fraunces-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('./fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('./fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('./fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('./fonts/inter-latin-700-normal.woff2') format('woff2'); }
:root {
/* Core palette — real values from the live site */
--icrf-bg: #FFFBF4;
--icrf-bg-warm: #FFF4E5;
--icrf-card: #FFFFFF;
--icrf-ink: #1F1B2E;
--icrf-ink-soft: #5C5670;
--icrf-ink-quiet: #8A859C;
--icrf-coral: #E8654E;
--icrf-coral-dark: #C44A36;
--icrf-mint: #7FCBA8;
--icrf-teal: #0F6E56; /* was mint-deep on the real site */
--icrf-sky: #5BB8E8;
--icrf-sky-deep: #185FA5;
--icrf-butter: #FAC775;
--icrf-butter-deep: #A66E0F;
--icrf-plum: #7C3AED;
--icrf-plum-deep: #4C1D95;
--icrf-rose: #F472B6;
/* Kept for any older page still referencing this name */
--icrf-paper: #FFFFFF;
--icrf-line: rgba(31,27,46,0.08);
--icrf-grey: #5C5670; /* alias of ink-soft, for older pages */
--icrf-font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
--icrf-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--icrf-radius-sm: 10px;
--icrf-radius-card: 18px;
--icrf-radius-lg: 28px;
--icrf-radius-control: 50px; /* pill buttons, matching the real site */
--icrf-shadow-card: 0 1px 2px rgba(31,27,46,.04), 0 8px 24px rgba(31,27,46,.06);
--icrf-shadow-lift: 0 1px 2px rgba(31,27,46,.04), 0 18px 40px rgba(31,27,46,.10);
--icrf-touch-min: 44px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--icrf-font-body);
background: var(--icrf-bg);
color: var(--icrf-ink);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--icrf-font-heading);
font-weight: 500; /* lighter than a typical "bold heading" default —
this is deliberate, it's what reads as editorial
and warm instead of heavy-handed */
line-height: 1.2;
letter-spacing: -0.015em;
margin: 0;
}
/* The signature move from the real site: an italic, coral-coloured
accent word inside an otherwise-roman headline. Use like:
Learning resources for every step
of your child's journey.
*/
em.icrf-accent, .icrf-accent {
font-style: italic;
font-weight: 400;
color: var(--icrf-coral);
}
/* Small uppercase label with a line, used above section headings —
e.g. "— OUR SERVICES · 8 IN TOTAL" */
.icrf-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
}
.icrf-eyebrow-line { width: 28px; height: 1px; background: var(--icrf-ink-quiet); }
.icrf-eyebrow-text {
font-size: 13px; font-weight: 500; letter-spacing: .15em;
text-transform: uppercase; color: var(--icrf-ink-quiet);
}
.icrf-btn {
display: inline-flex;
align-items: center;
gap: 8px;
text-align: center;
background: var(--icrf-ink);
color: #fff;
font-family: var(--icrf-font-body);
font-size: 15px;
font-weight: 500;
padding: 14px 28px;
border-radius: var(--icrf-radius-control);
border: none;
cursor: pointer;
min-height: var(--icrf-touch-min);
touch-action: manipulation;
text-decoration: none;
transition: all .2s;
}
.icrf-btn:hover { background: var(--icrf-coral-dark); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(232,101,78,.25); }
.icrf-btn.secondary {
background: transparent;
color: var(--icrf-ink);
border: 1.5px solid var(--icrf-ink);
}
.icrf-btn.secondary:hover { background: var(--icrf-ink); color: #fff; }
.icrf-card {
background: var(--icrf-card);
border: 1px solid var(--icrf-line);
border-radius: var(--icrf-radius-card);
box-shadow: var(--icrf-shadow-card);
padding: 26px 22px;
transition: all .25s;
}
/* Status pill badges — LIVE NOW / COMING SOON / PLANNED, matching the
exact colour treatment from the real site's service cards */
.icrf-badge { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 50px; display: inline-block; }
.icrf-badge-live { background: rgba(15,110,86,.12); color: var(--icrf-teal); }
.icrf-badge-soon { background: rgba(232,101,78,.12); color: var(--icrf-coral-dark); }
.icrf-badge-planned { background: rgba(140,135,160,.15); color: var(--icrf-ink-quiet); }
/* Per-service accent colours — set --icrf-svc-color / --icrf-svc-bg
via one of these classes on a card to theme its icon + hover accent */
.icrf-svc-coral{ --icrf-svc-color:var(--icrf-coral-dark); --icrf-svc-bg:rgba(232,101,78,.1); }
.icrf-svc-mint { --icrf-svc-color:var(--icrf-teal); --icrf-svc-bg:rgba(15,110,86,.1); }
.icrf-svc-sky { --icrf-svc-color:var(--icrf-sky-deep); --icrf-svc-bg:rgba(91,184,232,.15); }
.icrf-svc-butter{ --icrf-svc-color:var(--icrf-butter-deep); --icrf-svc-bg:rgba(250,199,117,.2); }
.icrf-svc-plum { --icrf-svc-color:var(--icrf-plum-deep); --icrf-svc-bg:rgba(124,58,237,.1); }
.icrf-svc-rose { --icrf-svc-color:#BE185D; --icrf-svc-bg:rgba(244,114,182,.12); }
.icrf-offline-banner {
display: none;
background: #F4E3C1;
color: #6B4E1A;
text-align: center;
font-size: 13px;
padding: 8px 12px;
position: sticky;
top: 0;
z-index: 10;
}
.icrf-offline-banner.show { display: block; }
/* Soft decorative background glow, used behind hero/page-head
sections on the real site — a subtle coral or mint radial gradient
that sits behind content, not as a full section background */
.icrf-glow-coral::before {
content: ""; position: absolute; top: -200px; right: -200px;
width: 600px; height: 600px; pointer-events: none;
background: radial-gradient(circle, rgba(232,101,78,.12), transparent 70%);
}
.icrf-glow-mint::after {
content: ""; position: absolute; bottom: -150px; left: -150px;
width: 500px; height: 500px; pointer-events: none;
background: radial-gradient(circle, rgba(127,203,168,.10), transparent 70%);
}
/* Safe-area support for notched phones — pair with
*/
.icrf-safe-x {
padding-left: max(var(--icrf-pad-x, 20px), env(safe-area-inset-left));
padding-right: max(var(--icrf-pad-x, 20px), env(safe-area-inset-right));
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
outline: 2px solid var(--icrf-coral); outline-offset: 3px; border-radius: 4px;
}