/* ============================================================
WebFrame — themes/innersentia-theme.css
Layer 2: Site Theme — values only.
Innersentia Therapies theme refreshed for the new logo.
Direction: deep midnight navy, soft champagne gold, muted
powder blue, and warm ivory surfaces.
Logo-derived anchors:
Navy: #0f1833
Gold range: #d4b080 → #e5c79c
Accent tan: #cea16e
Slogan blue:#abbdd6
Font note: Google Fonts import used here for simplicity.
For production, replace with self-hosted @font-face blocks
using woff2 files and add in
for the critical display weights.
============================================================ */
/* ── Fonts ──────────────────────────────────────────────── */
/* @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,300;1,9..40,400&display=swap'); */
/* cormorant-garamond-300 - latin */
@font-face {
font-display: swap;
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300;
src: url('/fonts/cormorant-garamond-v21-latin-300.woff2') format('woff2');
}
/* cormorant-garamond-300italic - latin */
@font-face {
font-display: swap;
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300;
src: url('/fonts/cormorant-garamond-v21-latin-300italic.woff2') format('woff2');
}
/* cormorant-garamond-regular - latin */
@font-face {
font-display: swap;
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
src: url('/fonts/cormorant-garamond-v21-latin-regular.woff2') format('woff2');
}
/* cormorant-garamond-500 - latin */
@font-face {
font-display: swap;
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 500;
src: url('/fonts/cormorant-garamond-v21-latin-500.woff2') format('woff2');
}
/* dm-sans-300 - latin */
@font-face {
font-display: swap;
font-family: 'DM Sans';
font-style: normal;
font-weight: 300;
src: url('/fonts/dm-sans-v17-latin-300.woff2') format('woff2');
}
/* dm-sans-300italic - latin */
@font-face {
font-display: swap;
font-family: 'DM Sans';
font-style: italic;
font-weight: 300;
src: url('/fonts/dm-sans-v17-latin-300italic.woff2') format('woff2');
}
/* dm-sans-regular - latin */
@font-face {
font-display: swap;
font-family: 'DM Sans';
font-style: normal;
font-weight: 400;
src: url('/fonts/dm-sans-v17-latin-regular.woff2') format('woff2');
}
/* dm-sans-500 - latin */
@font-face {
font-display: swap;
font-family: 'DM Sans';
font-style: normal;
font-weight: 500;
src: url('/fonts/dm-sans-v17-latin-500.woff2') format('woff2');
}
/* dm-sans-600 - latin */
@font-face {
font-display: swap;
font-family: 'DM Sans';
font-style: normal;
font-weight: 600;
src: url('/fonts/dm-sans-v17-latin-600.woff2') format('woff2');
}
/* ── Light mode (default) ───────────────────────────────
Calm, premium, logo-led palette.
Use the navy for nav/footer/hero bands; gold is the main CTA
and interactive accent; powder blue supports quieter UI states.
──────────────────────────────────────────────────────────── */
:root {
color-scheme: light;
/* ── Brand anchors ── */
--brand-navy: #0f1833;
--brand-navy-soft: #192848;
--brand-gold: #d4b080;
--brand-gold-warm: #cea16e;
--brand-gold-light: #e5c79c;
--brand-champagne: #e2cba9;
--brand-slogan-blue: #abbdd6;
--brand-gradient-gold: linear-gradient(135deg, #d4b080 0%, #d7b790 20%, #dabd93 40%, #e2cba9 58%, #dfc197 74%, #e2c59d 88%, #e5c79c 100%);
/* ── Surfaces ── */
--color-bg: hsl(38, 45%, 96%); /* warm ivory */
--color-bg-alt: hsl(38, 34%, 92%); /* champagne wash */
--color-surface: hsl(42, 48%, 98%);
--color-surface-alt: hsl(39, 35%, 94%);
--color-border: hsl(37, 22%, 82%);
--color-border-strong: hsl(35, 20%, 67%);
/* ── Text ── */
--color-text: hsl(225, 37%, 14%);
--color-text-muted: hsl(224, 18%, 31%);
--color-text-subtle: hsl(222, 12%, 40%);
--color-heading: var(--brand-navy);
/* ── Accent — champagne gold ── */
--color-accent: hsl(35, 60%, 34%);
--color-accent-hover: hsl(35, 65%, 25%);
--color-accent-text: hsl(0, 0%, 100%);
--color-accent-dim: hsl(36, 58%, 91%);
--color-accent-border: hsl(35, 45%, 70%);
/* ── Eyebrow labels ── */
--color-eyebrow: hsl(35, 62%, 28%);
--color-eyebrow-on-dark: var(--brand-champagne);
/* ── Secondary accent — powder blue from logo slogan ── */
--color-accent-secondary: #6f89ad;
--color-accent-secondary-hover: #526d94;
--color-accent-secondary-dim: hsl(216, 38%, 93%);
--color-accent-secondary-border: hsl(216, 28%, 75%);
/* ── Dark panels (nav, footer, hero overlays) ── */
--color-dark-bg: var(--brand-navy);
--color-dark-bg-alt: hsl(225, 46%, 17%);
--color-dark-text: hsl(218, 42%, 89%);
--color-dark-text-muted: var(--brand-slogan-blue);
--color-dark-accent: var(--brand-champagne);
--color-dark-border: hsl(224, 32%, 27%);
/* ── Theme toggle ── */
--color-toggle-bg: hsl(39, 35%, 91%);
--color-toggle-border: hsl(36, 24%, 75%);
--color-toggle-fg: var(--brand-navy-soft);
--color-toggle-hover-bg: hsl(38, 45%, 87%);
/* ── Typography ── */
--font-display: 'Cormorant Garamond', Georgia, serif;
--font-body: 'DM Sans', system-ui, sans-serif;
/* ── Type scale — tuned to Innersentia reference site rhythm ──
core.css mapping: h1→hero, h2→3xl, h3→2xl, h4→xl, body→base, lead→lg */
--text-xs: 0.85rem; /* eyebrow/meta — ref: 0.72rem */
--text-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.95rem); /* nav/small body — ref: 0.85–0.9rem */
--text-base: 1rem; /* body — ref: 1rem fixed */
--text-lg: 1.1rem; /* lead — ref: 1.1rem */
--text-xl: clamp(1.2rem, 1rem + 0.9vw, 1.35rem); /* h4/card titles — ref: ~1.2rem */
--text-2xl: clamp(1.4rem, 2vw, 1.7rem); /* h3 — ref: clamp(1.4,2vw,1.7) */
--text-3xl: clamp(1.9rem, 3.5vw, 2.7rem); /* h2 — ref: clamp(1.9,3.5vw,2.7) */
--text-hero: clamp(2.6rem, 5.5vw, 4rem); /* h1 — ref: clamp(2.6,5.5vw,4) */
/* ── Spacing scale (fluid) ── */
--space-1: clamp(0.25rem, 0.22rem + 0.15vw, 0.375rem);
--space-2: clamp(0.5rem, 0.46rem + 0.2vw, 0.625rem);
--space-3: clamp(0.75rem, 0.65rem + 0.5vw, 1rem);
--space-4: clamp(1rem, 0.85rem + 0.75vw, 1.375rem);
--space-5: clamp(1.25rem, 1rem + 1vw, 1.5rem);
--space-6: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
--space-7: clamp(1.75rem, 1.35rem + 2vw, 2.75rem);
--space-8: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
--space-10: clamp(2.5rem, 1.75rem + 3.75vw, 5rem);
--space-12: clamp(2.5rem, 1.5rem + 4.5vw, 6rem); /* section padding — ref: clamp(2,1+4.2vw,6) */
--space-16: clamp(3rem, 2rem + 5vw, 7rem); /* CTA padding — ref: clamp(3,1+4.2vw,7) */
/* ── Radius ── */
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 22px;
--radius-pill: 9999px;
/* ── Shadows (soft navy-tinted) ── */
--shadow-sm: 0 1px 4px hsl(225 37% 10% / 0.07), 0 2px 10px hsl(225 37% 10% / 0.05);
--shadow-md: 0 4px 20px hsl(225 37% 10% / 0.10), 0 2px 6px hsl(225 37% 10% / 0.06);
--shadow-lg: 0 10px 40px hsl(225 37% 10% / 0.13), 0 4px 12px hsl(225 37% 10% / 0.07);
/* ── Layout ── */
--container-max: 1100px;
--container-narrow: 65ch;
--header-height: clamp(60px, 7vw, 72px);
--gutter: clamp(0.75rem, 1.5vw, 1.5rem); /* ref: clamp(0.5rem,1.4vw,1.5rem) */
/* ── Transitions ── */
--transition-fast: 180ms ease;
--transition-base: 300ms ease;
--ease: cubic-bezier(0.22, 0.1, 0.15, 1);
/* ── Typography weights — ref site uses light body + medium labels ── */
--font-weight-body: 300; /* ref: body { font-weight: 300 } */
--font-weight-heading: 500; /* ref: h1–h4 { font-weight: 500 } */
--font-weight-eyebrow: 500; /* ref: .eyebrow { font-weight: 500 } */
--font-weight-btn: 500; /* ref: .btn { font-weight: 500 } */
--line-height-body: 1.75; /* ref: body { line-height: 1.75 } */
/* ── Letter spacing — Cormorant Garamond suits zero tracking at display sizes ── */
--tracking-h1: 0em; /* ref: not set — display serif needs no tightening */
--tracking-h2: 0em;
--tracking-h3: 0em;
--tracking-eyebrow: 0.14em; /* ref: .eyebrow { letter-spacing: 0.14em } */
--tracking-btn: 0.01em; /* ref: .btn { letter-spacing: 0.01em } */
/* ── Button shape ── */
--radius-btn: var(--radius-pill); /* ref: .btn { border-radius: 50px } */
--btn-padding: 0.85rem 1.9rem; /* ref: .btn { padding: 0.85rem 1.9rem } */
}
/* ── Dark mode overrides ──────────────────────────────────
The dark theme leans into the logo background. Gold remains
warm and luminous, while blue-grey text keeps the mood soft.
──────────────────────────────────────────────────────────── */
[data-theme="dark"] {
color-scheme: dark;
--brand-navy: hsl(225, 55%, 10%);
--brand-navy-soft: hsl(221, 48%, 16%);
/* ── Surfaces — logo navy system ── */
--color-bg: #0f1833;
--color-bg-alt: hsl(225, 48%, 14%);
--color-surface: hsl(225, 42%, 17%);
--color-surface-alt: hsl(225, 38%, 21%);
--color-border: hsl(224, 30%, 28%);
--color-border-strong: hsl(224, 24%, 40%);
/* ── Text ── */
--color-text: hsl(39, 44%, 91%);
--color-text-muted: hsl(218, 34%, 78%);
--color-text-subtle: hsl(218, 22%, 64%);
--color-heading: #e2cba9;
/* ── Accent — logo gold for dark surfaces ── */
--color-accent: #d4b080;
--color-accent-hover: #e5c79c;
--color-accent-text: #0f1833;
--color-accent-dim: hsl(36, 36%, 19%);
--color-accent-border: hsl(36, 38%, 42%);
/* ── Dark panels go subtly deeper in dark mode ── */
--color-dark-bg: hsl(225, 56%, 9%);
--color-dark-bg-alt: #0f1833;
--color-dark-text: hsl(218, 42%, 88%);
--color-dark-text-muted: #abbdd6;
--color-dark-accent: #e2cba9;
--color-dark-border: hsl(224, 32%, 22%);
/* ── Eyebrow labels ── */
--color-eyebrow: #e2cba9;
--color-eyebrow-on-dark: #e5c79c;
/* ── Secondary accent ── */
--color-accent-secondary: #abbdd6;
--color-accent-secondary-hover: #c1d0e5;
--color-accent-secondary-dim: hsl(216, 32%, 18%);
--color-accent-secondary-border: hsl(216, 26%, 36%);
/* ── Theme toggle ── */
--color-toggle-bg: hsl(225, 40%, 18%);
--color-toggle-border: hsl(224, 28%, 31%);
--color-toggle-fg: #e2cba9;
--color-toggle-hover-bg: hsl(225, 36%, 23%);
}
h1, h2 { color: var(--color-heading); }
/* ============================================================
InnerSentia shared premium components
These reusable styles sit above page-specific sections and
keep the remaining site pages aligned with the refreshed home.
============================================================ */
:root {
--brand-panel-bg: linear-gradient(145deg, #091126 0%, var(--brand-navy) 62%, #071022 100%);
--brand-gold-line: color-mix(in srgb, var(--brand-gold) 62%, transparent);
--brand-gold-soft: color-mix(in srgb, var(--brand-champagne) 22%, transparent);
--brand-ivory-glass: color-mix(in srgb, var(--color-surface) 76%, transparent);
}
body {
background:
radial-gradient(circle at 8% 4%, color-mix(in srgb, var(--brand-gold-light) 8%, transparent), transparent 26%),
var(--color-bg);
}
h1, h2, h3 { color: var(--color-heading, var(--color-text)); }
.c-btn--primary {
background: var(--brand-gradient-gold);
color: var(--brand-navy);
border: 1px solid color-mix(in srgb, var(--brand-gold) 70%, transparent);
box-shadow: 0 12px 28px hsl(225 37% 10% / 0.12);
}
.c-btn--primary:hover {
background: linear-gradient(135deg, var(--brand-gold-light), var(--brand-gold));
color: var(--brand-navy);
box-shadow: 0 16px 34px hsl(225 37% 10% / 0.18);
}
.c-btn--secondary {
color: var(--color-accent-hover);
border-color: var(--color-accent-border);
background: color-mix(in srgb, var(--color-surface) 58%, transparent);
}
.c-btn--secondary:hover {
background: var(--color-accent-dim);
color: var(--color-accent-hover);
}
.c-nav-cta .c-btn { padding: 0.75rem 1.35rem; }
.c-nav-actions {
display: flex;
align-items: center;
gap: 1rem;
}
.c-site-header,
[data-theme="dark"] .c-site-header {
background-color: color-mix(in srgb, var(--brand-navy) 88%, transparent);
border-bottom-color: color-mix(in srgb, var(--brand-gold) 16%, transparent);
}
.c-site-header.is-scrolled,
[data-theme="dark"] .c-site-header.is-scrolled {
background-color: color-mix(in srgb, var(--brand-navy) 94%, transparent);
border-bottom-color: color-mix(in srgb, var(--brand-gold) 24%, transparent);
}
.c-nav-link {
color: color-mix(in srgb, var(--brand-slogan-blue) 86%, white 8%);
}
.c-nav-link:hover,
.c-nav-link[aria-current="page"] {
color: var(--brand-champagne);
}
.c-nav-logo__img {
display: block;
width: clamp(150px, 18vw, 210px);
height: auto;
}
.c-nav-toggle span {
background: var(--brand-champagne);
}
.c-theme-toggle {
background: color-mix(in srgb, var(--brand-navy-soft) 78%, transparent);
border-color: color-mix(in srgb, var(--brand-gold) 34%, transparent);
color: var(--brand-champagne);
}
.c-theme-toggle:hover {
background: color-mix(in srgb, var(--brand-navy-soft) 96%, transparent);
border-color: color-mix(in srgb, var(--brand-gold) 54%, transparent);
color: var(--brand-gold-light);
}
.c-nav-panel {
background: var(--brand-navy);
border-bottom-color: color-mix(in srgb, var(--brand-gold) 24%, transparent);
}
.c-nav-panel .c-nav-link {
color: var(--brand-slogan-blue);
border-bottom-color: color-mix(in srgb, var(--brand-slogan-blue) 18%, transparent);
}
.c-nav-panel .c-nav-link:hover,
.c-nav-panel .c-nav-link[aria-current="page"] {
color: var(--brand-champagne);
}
/* ── Mobile navigation support sublist ───────────────────── */
.c-nav-panel__sublist {
display: flex;
flex-direction: column;
gap: 0;
margin: 0 0 var(--space-2) var(--space-4);
padding: 0 0 0 var(--space-4);
border-left: 1px solid color-mix(in srgb, var(--brand-gold) 24%, transparent);
}
.c-nav-panel__sublist a {
display: block;
padding: 0.62rem 0;
color: color-mix(in srgb, var(--brand-slogan-blue) 82%, transparent);
font-size: var(--text-sm);
text-decoration: none;
border-bottom: 1px solid color-mix(in srgb, var(--brand-slogan-blue) 12%, transparent);
transition:
color var(--transition-fast),
padding-left var(--transition-fast);
}
.c-nav-panel__sublist a:hover,
.c-nav-panel__sublist a[aria-current="page"] {
color: var(--brand-champagne);
padding-left: 0.2rem;
}
.c-nav-panel__sublist a[aria-current="page"]::before {
content: "— ";
color: var(--brand-gold-light);
}
.c-section-header {
max-width: 680px;
margin-bottom: var(--space-8);
}
.c-section-header h2, .l-section--page h2 { margin-bottom: var(--space-4); }
.c-section-header p { color: var(--color-text-muted); }
.c-section-header--center {
margin-inline: auto;
text-align: center;
}
.c-section-note {
margin-top: var(--space-7);
padding: var(--space-5) var(--space-6);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-accent-border);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
font-size: var(--text-sm);
color: var(--color-text-muted);
font-style: italic;
max-width: 740px;
}
.c-section-note.on-dark {
background: hsl(225, 42%, 17%);
color: hsl(218, 34%, 78%);
border: 1px solid hsl(224, 30%, 28%);
border-left: 3px solid hsl(36, 38%, 42%);
}
.c-brand-divider {
position: relative;
width: min(150px, 45%);
height: 1px;
margin: var(--space-7) auto;
background: linear-gradient(90deg, transparent, var(--brand-gold-line), transparent);
}
.c-brand-divider::after {
content: "✦";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -53%);
padding-inline: 0.5rem;
color: var(--brand-gold);
background: var(--color-bg);
font-size: 0.75rem;
line-height: 1;
}
.c-brand-divider--dark::after { background: var(--brand-navy); }
.u-brand-panel {
position: relative;
background: var(--brand-panel-bg);
color: var(--color-dark-text);
border: 1px solid color-mix(in srgb, var(--brand-gold) 34%, transparent);
border-radius: var(--radius-lg);
box-shadow: 0 28px 70px hsl(225 37% 8% / 0.24);
overflow: hidden;
}
.u-brand-panel::before {
content: "";
position: absolute;
inset: 1rem;
border: 1px solid color-mix(in srgb, var(--brand-gold) 18%, transparent);
border-radius: calc(var(--radius-lg) - 0.35rem);
pointer-events: none;
}
.u-brand-panel > * { position: relative; z-index: 1; }
.u-brand-panel h2,
.u-brand-panel h3 { color: var(--brand-champagne); }
.u-brand-panel p { color: var(--color-dark-text-muted); }
.c-premium-card {
background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(248,238,218,0.72));
border: 1px solid rgba(212,176,128,0.34);
border-radius: var(--radius-lg);
box-shadow: 0 14px 36px rgba(15,24,51,0.07);
}
[data-theme="dark"] .c-premium-card {
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--color-surface) 94%, transparent),
color-mix(in srgb, var(--color-surface-alt) 86%, transparent)
);
}
.c-checklist {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin: 0;
padding: 0;
}
.c-checklist li {
display: flex;
gap: var(--space-2);
align-items: flex-start;
color: var(--color-text-muted);
font-size: var(--text-sm);
line-height: 1.55;
}
.c-checklist li::before {
content: "✓";
color: var(--color-accent);
font-weight: 600;
line-height: 1.55;
flex-shrink: 0;
}
.c-trust-strip {
background: var(--color-bg-alt);
border-block: 1px solid var(--color-border);
padding-block: var(--space-4);
}
.c-trust-strip__inner {
display: flex;
flex-wrap: wrap;
gap: var(--space-3) var(--space-8);
align-items: center;
justify-content: center;
}
.c-trust-strip__item {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.c-trust-strip__icon {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--color-accent);
}
.s-footer {
background: var(--color-dark-bg);
color: var(--color-dark-text);
padding-block: var(--space-10);
}
.s-footer__inner {
display: grid;
/* grid-template-columns: 1.7fr 1.6fr 1fr 1.2fr; */
grid-template-columns: minmax(220px, 1.45fr) minmax(180px, 1.25fr) minmax(140px, 0.85fr) minmax(190px, 1fr);
gap: var(--space-8);
margin-bottom: var(--space-8);
}
/* ── Footer logo ───────────────────────────────── */
.s-footer__logo {
display: inline-flex;
align-items: center;
width: fit-content;
max-width: min(260px, 100%);
margin-bottom: var(--space-5);
text-decoration: none;
}
.s-footer__logo:hover {
opacity: 0.92;
}
.s-footer__logo-img {
display: block;
width: clamp(190px, 20vw, 260px);
height: auto;
max-width: 100%;
}
.s-footer__brand {
max-width: 320px;
}
.s-footer__brand p {
max-width: 34ch;
}
/* Mobile footer logo */
@media (max-width: 560px) {
.s-footer__logo-img {
width: min(220px, 82vw);
}
.s-footer__brand {
max-width: none;
}
}
.s-footer__brand p,
.s-footer__contact-item,
.s-footer__contact-item a,
.s-footer__copy,
.s-footer__links a,
.s-footer__legal a { color: var(--color-dark-text-muted); }
.s-footer__brand p {
font-size: var(--text-xs);
line-height: 1.45;
}
.s-footer__col-title {
font-family: var(--font-body);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--brand-champagne);
margin-bottom: var(--space-4);
font-weight: 500;
opacity: 0.82;
}
.s-footer__links {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.s-footer__links a,
.s-footer__contact-item a,
.s-footer__legal a {
font-size: var(--text-sm);
text-decoration: none;
transition: color var(--transition-fast);
}
.s-footer__links a:hover,
.s-footer__contact-item a:hover,
.s-footer__legal a:hover { color: hsl(39,44%,92%); }
.s-footer__contact-item {
font-size: var(--text-sm);
line-height: 1.45;
margin-bottom: var(--space-2);
}
.s-footer__crisis-note {
margin-top: var(--space-6);
padding: var(--space-4);
border: 1px solid color-mix(in srgb, var(--color-dark-accent) 26%, transparent);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--color-dark-text) 5%, transparent);
color: var(--color-dark-text-muted);
font-size: var(--text-sm);
line-height: 1.65;
}
.s-footer__crisis-note strong {
color: var(--color-dark-text);
font-weight: 600;
}
.s-footer__bottom {
border-top: 1px solid var(--color-dark-border);
padding-top: var(--space-6);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--space-4);
}
.s-footer__copy { font-size: var(--text-xs); margin: 0; }
.s-footer__legal { display: flex; gap: var(--space-4); }
.s-footer__legal a { font-size: var(--text-xs); opacity: 0.75; }
@media (max-width: 900px) {
.s-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.s-footer__inner { grid-template-columns: 1fr; }
.s-footer__bottom { align-items: flex-start; }
}
/* ============================================================
InnerSentia Premium v2 — shared section states & components
Purpose: keep page files lighter by moving reusable section,
panel, card, process, note and quote styling into the theme.
core.css remains untouched and universal.
============================================================ */
:root {
--brand-panel-bg: linear-gradient(145deg, #091126 0%, var(--brand-navy) 62%, #071022 100%);
--brand-gold-line: color-mix(in srgb, var(--brand-gold) 62%, transparent);
--blue-note: color-mix(in srgb, var(--brand-navy-soft) 94%, white 6%);
--blue-note-border: color-mix(in srgb, var(--brand-slogan-blue) 22%, transparent);
}
body {
background:
radial-gradient(circle at 8% 4%, color-mix(in srgb, var(--brand-gold-light) 8%, transparent), transparent 26%),
var(--color-bg);
}
/* ── Section state system ────────────────────────────────────
Use with core .l-section, for example:
──────────────────────────────────────────────────────────── */
.l-section--page,
.s-hidden-load,
.s-support-areas,
.s-inner-way,
.s-meet-kamila,
.s-inclusive,
.s-first-step,
.s-process,
.s-boundary,
.s-cta-final {
padding-block: var(--space-12);
}
.l-section--loose,
.s-cta-final { padding-block: var(--space-16); }
.l-section--default,
.s-hidden-load,
.s-meet-kamila,
.s-first-step,
.s-boundary {
background: var(--color-bg);
color: var(--color-text);
}
.l-section--alt,
.s-support-areas,
.s-inclusive {
background: var(--color-bg-alt);
color: var(--color-text);
}
.l-section--dark,
.s-inner-way,
.s-process {
position: relative;
isolation: isolate;
background:
radial-gradient(circle at 18% 16%, rgba(212,176,128,0.14), transparent 28%),
radial-gradient(circle at 88% 84%, rgba(171,189,214,0.10), transparent 24%),
var(--brand-panel-bg);
color: var(--color-dark-text);
overflow: hidden;
}
.l-section--dark h1,
.l-section--dark h2,
.l-section--dark h3,
.l-section--dark .c-eyebrow,
.s-inner-way h2,
.s-inner-way h3,
.s-inner-way .c-eyebrow,
.s-process .c-section-header h2,
.s-process .s-process__step h3,
.s-process .c-eyebrow {
color: var(--brand-champagne);
}
.l-section--dark p,
.l-section--dark li,
.s-inner-way p,
.s-process .c-section-header p,
.s-process .s-process__step p {
color: var(--color-dark-text-muted);
}
.l-section--dark .c-btn--secondary,
.s-inner-way .c-btn--secondary {
color: var(--brand-champagne);
border-color: color-mix(in srgb, var(--brand-gold) 52%, transparent);
background: color-mix(in srgb, var(--brand-navy) 52%, transparent);
}
.l-section--dark .c-btn--secondary:hover,
.s-inner-way .c-btn--secondary:hover {
background: rgba(255,255,255,0.08);
color: hsl(39,44%,94%);
}
/* ── Shared service hero controls ─────────────────────────── */
.s-service-hero .c-btn--secondary {
color: var(--brand-champagne);
border-color: color-mix(in srgb, var(--brand-gold) 52%, transparent);
background: color-mix(in srgb, var(--brand-navy) 52%, transparent);
}
.s-service-hero .c-btn--secondary:hover {
background: rgba(255,255,255,0.08);
color: hsl(39,44%,94%);
}
.s-service-hero .s-home-hero__note {
color: color-mix(in srgb, var(--color-dark-text-muted) 90%, transparent);
}
/* ── Shared section layout helpers ─────────────────────────── */
.l-section-grid,
.s-hidden-load__inner,
.s-meet-kamila__inner,
.s-inclusive__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr);
gap: var(--space-10);
align-items: start;
}
.l-section-grid--feature,
.s-inner-way__grid,
.s-boundary__inner {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
gap: var(--space-10);
align-items: start;
}
.c-section-actions,
.s-section-actions,
.s-first-step__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
align-items: center;
margin-top: var(--space-7);
}
.s-hidden-load__body h2,
.s-meet-kamila__body h2,
.s-inclusive__body h2,
.s-first-step__intro h2,
.s-boundary h2 { margin-bottom: var(--space-5); }
.s-hidden-load__body p { max-width: 66ch; }
.s-inner-way h2,
.s-inner-way h3 { margin-bottom: var(--space-5); }
.s-inner-way p + p { margin-top: var(--space-4); }
/* ── Notes and blue panels ─────────────────────────────────── */
.c-blue-note,
.s-quote-card,
.s-inclusive__panel,
.s-simple-starts {
background: var(--blue-note);
border: 1px solid var(--blue-note-border);
border-radius: var(--radius-lg);
color: var(--color-dark-text-muted);
}
[data-theme="dark"] .c-blue-note,
[data-theme="dark"] .s-quote-card,
[data-theme="dark"] .s-inclusive__panel,
[data-theme="dark"] .s-simple-starts {
background: color-mix(in srgb, var(--color-surface-alt) 78%, var(--brand-navy) 22%);
border-color: color-mix(in srgb, var(--brand-slogan-blue) 18%, transparent);
}
.c-section-note.on-dark {
background: color-mix(in srgb, var(--brand-navy-soft) 82%, transparent);
color: var(--color-dark-text-muted);
border: 1px solid color-mix(in srgb, var(--brand-slogan-blue) 20%, transparent);
border-left: 3px solid var(--brand-gold);
}
.c-section-note.on-dark h3,
.s-process .c-section-note.on-dark h3 {
font-family: var(--font-body);
font-size: var(--text-base);
margin-bottom: var(--space-4);
color: var(--brand-champagne);
}
.c-section-note.on-dark ul,
.s-process .c-section-note.on-dark ul {
display: grid;
gap: var(--space-3) var(--space-5);
}
.c-section-note.on-dark li,
.s-process .c-section-note.on-dark li {
color: var(--color-dark-text-muted);
font-family: var(--font-display);
font-size: var(--text-xl);
font-style: italic;
line-height: 1.3;
}
/* ── Quote panel ───────────────────────────────────────────── */
.c-quote-panel,
.s-quote-card {
padding: var(--space-6);
position: sticky;
top: calc(var(--header-height) + var(--space-4));
box-shadow: 0 18px 44px hsl(225 37% 10% / 0.12);
}
.c-quote-panel__title,
.s-quote-card__title {
font-family: var(--font-body);
color: var(--brand-champagne);
font-size: var(--text-xs);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: var(--space-5);
font-weight: 600;
}
.c-quote-list,
.s-quote-list {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.c-quote-list li,
.s-quote-list li {
position: relative;
padding-left: var(--space-5);
color: color-mix(in srgb, var(--color-dark-text) 92%, transparent);
font-family: var(--font-display);
font-size: clamp(1.15rem, 1rem + 0.65vw, 1.55rem);
line-height: 1.26;
font-style: italic;
}
.c-quote-list li::before,
.s-quote-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.3em;
width: 0.65rem;
height: 1px;
background: var(--brand-gold-light);
}
/* ── Pillar/support cards ─────────────────────────────────── */
.c-pillar-grid,
.s-support-areas__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
margin-top: var(--space-8);
}
.c-pillar-card,
.s-pillar-card {
position: relative;
display: flex;
min-height: 100%;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-6);
text-decoration: none;
overflow: hidden;
transition:
transform var(--transition-base),
box-shadow var(--transition-base),
border-color var(--transition-fast);
}
.c-pillar-card:hover,
.s-pillar-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--color-accent-border);
text-decoration: none;
}
.c-pillar-card__label,
.s-pillar-card__label {
color: var(--color-accent);
font-size: var(--text-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 600;
}
.c-pillar-card h3,
.s-pillar-card h3 {
font-family: var(--font-display);
font-size: var(--text-2xl);
line-height: 1.12;
margin-bottom: var(--space-2);
}
.c-pillar-card p,
.s-pillar-card p {
font-size: var(--text-sm);
line-height: 1.68;
color: var(--color-text-muted);
}
.c-pillar-card__link,
.s-pillar-card__link {
margin-top: auto;
padding-top: var(--space-4);
color: var(--color-accent);
font-size: var(--text-sm);
font-weight: 600;
}
/* ── Pattern cards/lists ──────────────────────────────────── */
.c-pattern-card,
.s-pattern-card {
padding: var(--space-6);
background: #071022;
border: 1px solid color-mix(in srgb, var(--brand-gold) 55%, transparent);
border-radius: var(--radius-lg);
box-shadow: 0 20px 58px rgba(0,0,0,0.2);
}
.c-pattern-card h3,
.s-pattern-card h3 {
color: var(--brand-champagne);
margin-bottom: var(--space-5);
}
.c-pattern-list,
.s-pattern-list {
display: grid;
gap: var(--space-3);
}
.c-pattern-list li,
.s-pattern-list li {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-3);
color: var(--color-dark-text-muted);
font-size: var(--text-sm);
line-height: 1.55;
}
.c-pattern-list li::before,
.s-pattern-list li::before {
content: "✦";
color: var(--brand-gold-light);
}
.c-pattern-note,
.s-pattern-note {
margin-top: var(--space-6);
padding: var(--space-5);
background: color-mix(in srgb, var(--brand-navy-soft) 82%, transparent);
border: 1px solid color-mix(in srgb, var(--brand-slogan-blue) 20%, transparent);
border-left: 3px solid var(--brand-gold);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
color: var(--color-dark-text-muted);
font-size: var(--text-sm);
line-height: 1.7;
}
/* ── About-me note card ───────────────────────────────────── */
.s-kamila-note {
padding: var(--space-6);
align-self: start;
}
.s-kamila-note__title {
font-family: var(--font-display);
font-size: var(--text-2xl);
line-height: 1.08;
color: var(--color-heading);
margin-bottom: var(--space-5);
}
.s-kamila-note blockquote {
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
font-family: var(--font-display);
font-size: var(--text-xl);
line-height: 1.35;
color: var(--color-text);
font-style: italic;
}
.s-inclusive__panel,
.s-simple-starts { padding: var(--space-6); }
.s-inclusive__panel p {
color: var(--color-dark-text-muted);
font-size: var(--text-sm);
line-height: 1.7;
}
.s-inclusive__panel strong,
.s-simple-starts h3 { color: var(--brand-champagne); }
/* ── Process / timeline component ─────────────────────────── */
.c-process-steps,
.s-process__steps,
.s-timeline__track {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
position: relative;
margin-bottom: var(--space-8);
}
.c-process-steps::before,
.s-process__steps::before,
.s-timeline__track::before {
content: "";
position: absolute;
top: 28px;
left: calc(100% / 6);
right: calc(100% / 6);
height: 1px;
background: linear-gradient(90deg, transparent, var(--brand-gold-line), transparent);
z-index: 0;
}
.s-timeline__track::before {
top: 20px;
height: 2px;
}
.c-process-step,
.s-process__step,
.s-timeline__step {
position: relative;
z-index: 1;
text-align: center;
}
.c-process-bubble,
.s-process__bubble {
width: 56px;
height: 56px;
margin: 0 auto var(--space-5);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #272a3c;
border: 2px solid rgba(212,176,128,0.5);
box-shadow: 0 0 0 8px rgba(212,176,128,0.06);
}
.c-process-bubble__num,
.s-process__bubble-num {
font-size: var(--text-sm);
color: var(--brand-gold-light);
font-weight: 500;
}
.s-process__step h3,
.s-timeline__step h3 {
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: 500;
margin-bottom: var(--space-3);
}
.s-process__step p,
.s-timeline__step p {
font-size: var(--text-sm);
line-height: 1.68;
margin: 0;
}
.s-timeline__dot {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--color-accent);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-5);
box-shadow: 0 0 0 6px var(--color-accent-dim);
}
.s-timeline__dot-num {
color: var(--color-accent-text);
font-size: var(--text-xs);
font-weight: 600;
}
.s-simple-starts { margin-top: var(--space-8); }
.s-simple-starts h3 {
font-family: var(--font-body);
font-size: var(--text-base);
margin-bottom: var(--space-4);
}
.s-simple-starts ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3) var(--space-5);
}
.s-simple-starts li {
color: var(--color-dark-text-muted);
font-family: var(--font-display);
font-size: var(--text-xl);
font-style: italic;
line-height: 1.3;
}
/* ── Final CTA ────────────────────────────────────────────── */
.s-cta-final {
position: relative;
background:
radial-gradient(circle at 50% 0%, rgba(212,176,128,0.12), transparent 34%),
linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
text-align: center;
border-top: 1px solid rgba(212,176,128,0.24);
}
.s-cta-final::before {
content: "";
display: block;
width: 120px;
height: 1px;
margin: 0 auto var(--space-8);
background: linear-gradient(90deg, transparent, rgba(212,176,128,0.9), transparent);
}
.s-cta-final__inner {
max-width: 760px;
margin-inline: auto;
}
.s-cta-final h2 { margin-bottom: var(--space-4); }
.s-cta-final .c-lead { margin-bottom: var(--space-4); }
.s-cta-final .l-cluster { justify-content: center; }
.s-cta-final__note { color: var(--color-text-subtle); }
.s-home-hero__note,
.s-first-step__note,
.s-cta-final__note {
margin-top: var(--space-4);
font-size: var(--text-xs);
font-style: italic;
}
/* ── Responsive component behaviour ───────────────────────── */
@media (max-width: 900px) {
.l-section-grid,
.l-section-grid--feature,
.s-hidden-load__inner,
.s-meet-kamila__inner,
.s-inclusive__inner,
.s-boundary__inner,
.s-inner-way__grid {
grid-template-columns: 1fr;
}
.c-quote-panel,
.s-quote-card { position: static; }
.c-pillar-grid,
.s-support-areas__grid { grid-template-columns: 1fr; }
.s-simple-starts ul { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.c-process-steps,
.s-process__steps,
.s-timeline__track { grid-template-columns: 1fr; }
.c-process-steps::before,
.s-process__steps::before,
.s-timeline__track::before { display: none; }
.s-timeline__step {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-4);
text-align: left;
}
.s-timeline__dot { margin: 0; }
}
@media (max-width: 620px) {
.c-section-actions,
.s-section-actions,
.s-first-step__actions,
.s-cta-final .l-cluster { align-items: stretch; }
.c-section-actions .c-btn,
.s-section-actions .c-btn,
.s-first-step__actions .c-btn,
.s-cta-final .c-btn {
width: 100%;
justify-content: center;
white-space: normal;
text-align: center;
}
}
/* ============================================================
v2.1 shared refinements
- safer default heading spacing
- padded blue-note panels
- qualification card pattern
============================================================ */
.l-section--page h2,
.l-section--default h2,
.l-section--alt h2,
.l-section--dark h2 {
margin-bottom: var(--space-5);
}
.l-section--page h3,
.l-section--default h3,
.l-section--alt h3,
.l-section--dark h3 {
margin-bottom: var(--space-3);
}
.l-section--page p + p,
.l-section--default p + p,
.l-section--alt p + p,
.l-section--dark p + p {
margin-top: var(--space-3);
}
.c-blue-note {
padding: var(--space-6);
}
.c-blue-note p,
.c-blue-note li {
color: var(--color-dark-text-muted);
}
.c-blue-note strong,
.c-blue-note h3,
.c-blue-note .c-quote-panel__title {
color: var(--brand-champagne);
}
.c-blue-note .c-pattern-list li {
color: var(--color-dark-text-muted);
}
.c-qual-grid,
.s-qualifications__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-5);
}
.c-qual-card,
.s-qual-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-6) var(--space-6) var(--space-7);
overflow: hidden;
position: relative;
transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.c-qual-card:hover,
.s-qual-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.c-qual-card::before,
.s-qual-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--color-accent);
}
.c-qual-card__category,
.s-qual-card__category {
display: block;
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-text-subtle);
font-family: var(--font-body);
font-weight: 500;
margin-bottom: var(--space-4);
}
.c-qual-card__title,
.s-qual-card__title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-style: italic;
font-weight: 300;
color: var(--color-text);
line-height: 1.3;
margin-bottom: var(--space-2);
}
.c-qual-card__institution,
.s-qual-card__institution {
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: 1.55;
margin-bottom: var(--space-4);
}
.c-qual-card__desc,
.s-qual-card__desc {
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: 1.7;
margin: 0;
}
[data-theme="dark"] .c-qual-card,
[data-theme="dark"] .s-qual-card {
background: color-mix(in srgb, var(--color-surface) 92%, transparent);
border-color: var(--color-border);
}
[data-theme="dark"] .c-qual-card__title,
[data-theme="dark"] .s-qual-card__title {
color: var(--color-text);
}
.c-editorial-list {
display: grid;
gap: var(--space-5);
}
.c-editorial-item {
padding-bottom: var(--space-5);
border-bottom: 1px solid color-mix(in srgb, var(--brand-gold) 24%, transparent);
}
.c-editorial-item:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.c-editorial-item h3 {
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: 600;
}
.c-editorial-item p {
font-size: var(--text-sm);
line-height: 1.7;
}
@media (max-width: 760px) {
.c-qual-grid,
.s-qualifications__grid {
grid-template-columns: 1fr;
}
}