/* ============================================================
MIDWITHME, SHARED STYLESHEET
============================================================
HOW TO EDIT:
- Change colours: update values in :root below
- Change fonts: update --font-body or --font-display
- Change section spacing: update --section-pad-v / --section-pad-h
- Change max page width: update --max-w
All three pages (index.html, mums.html, students.html) use this file.
============================================================ */
/* Fonts loaded via in each page's for
non-blocking parallel download. Preconnect hints in the HTML give
us a head-start on the TLS handshake to the font CDNs. */
/* ── BRAND TOKENS ─────────────────────────────────────────── */
:root {
/* Primary palette */
--purple: #7C3AED; /* ← main brand purple */
--purple2: #6D28D9;
--purple-light: #EDE9FE;
--purple-mid: #C4B5FD;
--dark: #1C1229; /* ← near-black background */
--ink: #1C1229; /* ← body text + headlines (alias of --dark) */
--plum: #1C1229; /* ← primary headline colour (matches banner bg) */
--mid: #2C1F44;
--muted: #8B7BAA;
--soft: #FAF8FF; /* ← light background */
--cream: #FBF5ED; /* ← warm tone (mum moments / our story) */
--cream-deep: #F3EADB;
--lavender: #F4F0FC;
--card: #FFFFFF;
--border: #E8E0F5;
--hairline: #E8E0F5; /* ← thin dividing line (alias of --border) */
--yellow: #FFCA01; /* ← accent yellow */
--yellow-dark: #1a0a4a;
/* Typography */
--font-body: 'Satoshi', sans-serif;
--font-display: 'Fraunces', serif;
/* Sizing */
--max-w: 1100px; /* ← max content width */
--section-pad-v: 80px; /* ← section top/bottom padding */
--section-pad-h: 48px; /* ← section left/right padding */
--nav-height: 84px;
/* Radii */
--radius-card: 20px;
--radius-pill: 100px;
--radius-img: 28px;
}
/* ── RESET ────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
font-family: var(--font-body);
background: var(--soft);
color: var(--dark);
overflow-x: hidden;
line-height: 1.6;
}
/* ── TYPOGRAPHY ───────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--font-body); }
h1 {
font-size: clamp(40px, 5.5vw, 68px);
font-weight: 700;
line-height: 1.08;
letter-spacing: -2px;
margin-bottom: 24px;
}
h1 em, h2 em {
font-style: italic;
color: var(--purple);
font-family: var(--font-display);
font-weight: 400;
}
h2 {
font-size: clamp(30px, 4vw, 50px);
font-weight: 700;
line-height: 1.15;
letter-spacing: -1.5px;
margin-bottom: 16px;
}
h3 {
font-family: var(--font-body);
font-size: 20px;
font-weight: 600;
letter-spacing: -0.5px;
}
/* ── NAV ──────────────────────────────────────────────────── */
.site-nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
/* Horizontal padding dynamically equals the hero's side margins, so
logo + Login + Join free align with the hero content (max-width:
1100px centered). On narrower viewports, falls back to the
standard --section-pad-h. */
padding: 18px max(var(--section-pad-h), calc((100% - 1100px) / 2));
background: rgba(250,248,255,0.92);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--border);
height: var(--nav-height);
transition:
top 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
left 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
right 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
max-width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
margin 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
padding 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
background 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
border 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
border-radius 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
height 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Scrolled state: floating glassy dark pill, matches the stat banner ink (#1C1229) */
.site-nav.is-scrolled {
top: 16px;
left: 50%;
right: auto;
transform: translateX(-50%);
max-width: min(1480px, calc(100% - 32px));
width: max-content;
padding: 10px 14px 10px 22px;
background: rgba(28, 18, 41, 0.88);
backdrop-filter: blur(18px) saturate(1.4);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
/* Outer soft-white 1px rim — the "first" border of the double-border
effect. The ::before pseudo below draws a second reflective rim
slightly inset from this, mirroring the layered look on the
enterprise-grade glass card. */
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 999px;
box-shadow:
0 16px 40px -12px rgba(28, 18, 41, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
height: auto;
gap: 42px;
isolation: isolate;
}
/* Surface sheen — soft white lens highlight across the top-left,
matching the Kinso-style glass effect used on stat/voice cards.
Static (no scroll animation) to keep the nav visually stable. */
.site-nav.is-scrolled::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 0;
background: linear-gradient(155deg,
rgba(255, 255, 255, 0.18) 0%,
rgba(255, 255, 255, 0.05) 32%,
rgba(255, 255, 255, 0) 60%,
rgba(124, 58, 237, 0.15) 100%);
mix-blend-mode: screen;
}
/* Inner reflective rim — conic-gradient ring drawn via mask-composite,
inset 3px from the outer border. This creates the "double border"
glass look: thin outer white rim + visible gap + bright reflective
inner rim (same pattern as the enterprise-grade trust tile). */
.site-nav.is-scrolled::before {
content: '';
position: absolute;
inset: 3px;
border-radius: 999px;
padding: 1.5px;
pointer-events: none;
z-index: 1;
background: conic-gradient(
from 135deg,
rgba(124, 58, 237, 0.25) 0deg,
rgba(167, 120, 255, 0.55) 45deg,
rgba(255, 255, 255, 0.70) 90deg,
rgba(167, 120, 255, 0.55) 135deg,
rgba(124, 58, 237, 0.28) 180deg,
rgba(124, 58, 237, 0.18) 270deg,
rgba(124, 58, 237, 0.25) 360deg);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
/* Ensure nav children sit above the surface sheen + reflective rim */
.site-nav.is-scrolled > * {
position: relative;
z-index: 2;
}
.site-nav.is-scrolled .nav-links {
gap: 24px;
}
.site-nav.is-scrolled .nav-actions {
gap: 10px;
}
/* Top of page (white-bg nav) uses purple glow + bold from the base rule above.
Scrolled glassy pill: override to yellow + yellow glow + bold for the pop. */
.site-nav.is-scrolled .nav-links a {
color: rgba(255, 255, 255, 0.9);
font-weight: 400;
text-decoration: none;
text-shadow: none;
}
.site-nav.is-scrolled .nav-links a:hover,
.site-nav.is-scrolled .nav-links a.active {
color: var(--yellow);
font-weight: 500;
text-decoration: none;
text-shadow:
0 0 7px rgba(255, 202, 1, 0.32),
0 0 16px rgba(255, 202, 1, 0.18);
}
.site-nav.is-scrolled .nav-links a:focus-visible {
outline-color: var(--yellow);
}
.site-nav.is-scrolled .btn-ghost-sm {
color: white;
border-color: rgba(255, 255, 255, 0.35);
background: transparent;
}
.site-nav.is-scrolled .btn-ghost-sm:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.6);
}
/* Join free stays yellow on glassy purple for pop */
.site-nav.is-scrolled .btn-nav-cta {
background: var(--yellow);
color: var(--ink);
}
.site-nav.is-scrolled .btn-nav-cta:hover {
background: white;
color: var(--ink);
}
.site-nav.is-scrolled .nav-burger span {
background: white;
}
.nav-logo { text-decoration: none; display: flex; align-items: center; }
/* Default (top-of-page) logo state: full violet wordmark.
The wordmark SVG is 16:9, so a smaller height keeps the visible logo
close to the previous icon-only proportions while showing the wordmark. */
.nav-logo-img { height: 81px; width: auto; display: block; }
.nav-logo-violet { display: block; }
.nav-logo-icon-white { display: none; }
/* Scrolled pill: show icon-only white variant, smaller */
.site-nav.is-scrolled .nav-logo-violet { display: none; }
.site-nav.is-scrolled .nav-logo-icon-white {
display: block;
height: 30px;
}
/* ── CHANGE NAVIGATION LINKS HERE ── */
.nav-links {
display: flex;
align-items: center;
gap: 22px;
list-style: none;
margin: 0;
padding: 0;
white-space: nowrap;
}
.nav-links a {
font-size: 14px;
color: var(--mid);
position: relative;
text-decoration: none;
white-space: nowrap;
/* Reserve the bold-state width so the pill doesn't resize on hover.
Use inline-grid so the visible label and the invisible bold-width
mirror occupy the SAME grid cell — they overlap rather than stack,
so the link stays one line and the height never grows. */
display: inline-grid;
grid-template-columns: max-content;
align-items: center;
justify-items: center;
transition: color 0.25s ease, text-shadow 0.3s ease;
}
.nav-links a::after {
content: attr(data-text);
font-weight: 500;
visibility: hidden;
pointer-events: none;
/* Same grid cell as the visible text — width is reserved, height is
dictated by the visible text's line-height (they're identical). */
grid-column: 1;
grid-row: 1;
}
.nav-links a > * {
grid-column: 1;
grid-row: 1;
}
.nav-links a:hover,
.nav-links a.active {
color: var(--purple);
font-weight: 500;
text-decoration: none;
text-shadow:
0 0 6px rgba(124, 58, 237, 0.22),
0 0 14px rgba(124, 58, 237, 0.12);
}
.nav-links a.active { font-weight: 500; }
.nav-links a:focus-visible {
outline: 2px solid var(--purple);
outline-offset: 4px;
border-radius: 4px;
}
text-decoration: none;
font-weight: 400;
transition: color 0.2s;
white-space: nowrap;
}
.nav-links a:hover,
.nav-links a.active { /* duplicate guard: keep purple glow consistent at the top of page */
color: var(--purple);
}
.nav-links a.active { font-weight: 500; }
/* Tighten nav slightly on medium-large screens so 6 links + actions fit comfortably */
@media (max-width: 1180px) and (min-width: 961px) {
.nav-links { gap: 14px; }
.nav-links a { font-size: 13px; }
}
.site-nav.is-scrolled .nav-links { gap: 24px; }
@media (max-width: 1180px) and (min-width: 961px) {
.site-nav.is-scrolled .nav-links { gap: 14px; }
}
/* Global focus ring — accessibility pass */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid var(--purple);
outline-offset: 3px;
border-radius: 4px;
}
/* Footer email link */
.footer-email {
display: inline-block;
margin-top: 14px;
color: rgba(255,255,255,0.85);
text-decoration: none;
font-size: 14px;
font-weight: 500;
border-bottom: 1px solid rgba(255,255,255,0.25);
padding-bottom: 2px;
transition: color 0.2s, border-color 0.2s;
}
.footer-email:hover {
color: var(--yellow);
border-bottom-color: var(--yellow);
text-shadow:
0 0 8px rgba(255, 202, 1, 0.5),
0 0 18px rgba(255, 202, 1, 0.3),
0 0 30px rgba(255, 202, 1, 0.16);
}
/* Reduced motion: cap any remaining transitions/animations */
@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;
}
}
.nav-actions { display: flex; gap: 10px; align-items: center; }
.btn-ghost-sm {
padding: 10px 23px;
border-radius: var(--radius-pill);
font-size: 14px; font-weight: 500;
color: var(--purple);
background: transparent;
border: 1.5px solid var(--border);
text-decoration: none; cursor: pointer;
transition: all 0.2s;
font-family: var(--font-body);
}
.btn-ghost-sm:hover { background: var(--purple-light); border-color: var(--purple-mid); }
.btn-nav-cta {
padding: 10px 25px;
border-radius: var(--radius-pill);
font-size: 14px; font-weight: 500;
background: var(--yellow);
color: var(--yellow-dark); border: none;
text-decoration: none; cursor: pointer;
transition: all 0.2s;
font-family: var(--font-body);
}
.btn-nav-cta:hover { background: var(--purple); color: white; transform: translateY(-1px); }
/* Mobile hamburger */
.nav-burger {
display: none;
flex-direction: column; gap: 5px;
background: none; border: none; cursor: pointer; padding: 4px;
}
.nav-burger span { width: 22px; height: 2px; background: var(--dark); border-radius: 2px; transition: all 0.3s; display: block; }
/* ──────────────────────────────────────────────────────────────
Mobile menu — frosted glass drawer that slides down from the nav.
Two visual states (matching the two nav states):
1. DEFAULT (nav is full-width bar at top):
drawer is full-width, sits flush under the nav, light glass
surface with brand violet tint.
2. SCROLLED (nav is collapsed to centered pill):
drawer becomes its own floating panel, matched horizontally
to the pill's inset (16px each side), dark surface matching
the pill, all four corners rounded so it reads as a deliberate
dropdown attached to the pill.
────────────────────────────────────────────────────────────── */
/* === Default state === */
.mobile-menu {
display: none;
position: fixed;
top: var(--nav-height);
left: 0;
right: 0;
background:
linear-gradient(180deg,
rgba(255, 255, 255, 0.72) 0%,
rgba(244, 240, 252, 0.62) 100%);
backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%);
border-bottom: 1px solid rgba(124, 58, 237, 0.14);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 18px 40px -12px rgba(28, 18, 41, 0.18),
0 0 60px -10px rgba(124, 58, 237, 0.18);
border-radius: 0 0 20px 20px;
padding: 18px var(--section-pad-h) 22px;
z-index: 99;
flex-direction: column;
gap: 6px;
transition:
top 0.3s ease,
left 0.3s ease,
right 0.3s ease,
border-radius 0.3s ease,
background 0.3s ease,
padding 0.3s ease;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
font-size: 16px;
color: var(--ink);
text-decoration: none;
font-weight: 500;
transition: color 0.25s ease, background 0.25s ease, padding-left 0.25s ease;
padding: 12px 14px;
border-radius: 12px;
border-bottom: none;
letter-spacing: -0.1px;
}
.mobile-menu a:hover,
.mobile-menu a:active {
color: var(--purple);
background: rgba(124, 58, 237, 0.08);
padding-left: 18px;
text-shadow: none;
}
.mobile-menu a.active {
color: var(--purple);
font-weight: 600;
background: rgba(124, 58, 237, 0.06);
}
/* === Scrolled state — pill nav is active, drawer becomes floating dark panel === */
.site-nav.is-scrolled ~ .mobile-menu {
/* Sit just below the pill (pill is at top:16px, ~64px tall) */
top: 88px;
left: 16px;
right: 16px;
border-radius: 22px;
padding: 14px 14px 16px;
/* More transparent than the pill (0.88) so the drawer reads as
glass while the pill stays as the solid anchor. The boosted
blur + saturate keeps the perceived color in the same dark
violet family so the two read as the same component. */
background: rgba(28, 18, 41, 0.62);
backdrop-filter: blur(28px) saturate(1.6);
-webkit-backdrop-filter: blur(28px) saturate(1.6);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 16px 40px -12px rgba(28, 18, 41, 0.55),
0 0 60px -10px rgba(124, 58, 237, 0.30);
}
.site-nav.is-scrolled ~ .mobile-menu a {
color: rgba(255, 255, 255, 0.82);
font-weight: 500;
padding: 12px 16px;
}
.site-nav.is-scrolled ~ .mobile-menu a:hover,
.site-nav.is-scrolled ~ .mobile-menu a:active {
color: white;
background: rgba(255, 255, 255, 0.08);
padding-left: 20px;
}
.site-nav.is-scrolled ~ .mobile-menu a.active {
color: var(--yellow);
background: rgba(255, 255, 255, 0.06);
font-weight: 600;
}
/* ── BUTTONS ──────────────────────────────────────────────── */
/* ← CHANGE BUTTON COLOURS HERE */
.btn-primary,
.btn-mum {
display: inline-flex; align-items: center; gap: 9px;
padding: 16px 32px;
border-radius: var(--radius-pill);
font-size: 15px; font-weight: 500;
background: var(--yellow); color: var(--yellow-dark);
border: none; text-decoration: none; cursor: pointer;
transition: all 0.22s;
font-family: var(--font-body);
}
.btn-primary:hover,
.btn-mum:hover { background: var(--purple); color: white; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(124,58,237,0.3); }
/* ── DUAL CTA BUTTONS (used across all subpages) ───────────── */
.btn-dual {
display: inline-flex; align-items: center; gap: 11px;
padding: 17px 28px 17px 21px;
border-radius: var(--radius-pill);
text-decoration: none; transition: all 0.22s;
font-size: 15px; font-weight: 500;
font-family: var(--font-body);
border: none; cursor: pointer;
white-space: nowrap;
}
.btn-dual .btn-ic {
width: 32px; height: 32px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.btn-dual.mum { background: var(--yellow); color: var(--dark); }
.btn-dual.mum .btn-ic{ background: rgba(28,18,41,0.15); }
.btn-dual.mum:hover { background: var(--purple); color: white; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(124,58,237,0.3); }
.btn-dual.student { background: white; color: var(--dark); border: 1.5px solid var(--border); }
.btn-dual.student .btn-ic { background: var(--yellow); color: var(--dark); }
.btn-dual.student:hover{ border-color: var(--dark); transform: translateY(-2px); }
.btn-dual svg { width: 14px; height: 14px; stroke-width: 2.2; }
.btn-dual .btn-arrow {
width: 16px; height: 16px;
stroke-width: 2.2;
margin-left: 2px;
transition: transform 0.22s;
}
.btn-dual:hover .btn-arrow { transform: translateX(3px); }
@media (max-width: 720px) {
.btn-dual { padding: 13px 18px 13px 14px; font-size: 13px; gap: 8px; }
.btn-dual .btn-ic { width: 26px; height: 26px; }
.btn-dual svg { width: 11px; height: 11px; }
}
.btn-yellow {
display: inline-flex; align-items: center; gap: 9px;
padding: 16px 32px;
border-radius: var(--radius-pill);
font-size: 15px; font-weight: 500;
background: var(--yellow); color: var(--yellow-dark);
border: none; text-decoration: none; cursor: pointer;
transition: all 0.22s;
font-family: var(--font-body);
}
.btn-yellow:hover { background: white; color: var(--dark); transform: translateY(-2px); }
.btn-outline {
display: inline-flex; align-items: center; gap: 8px;
padding: 14px 28px;
border-radius: var(--radius-pill);
font-size: 15px; font-weight: 500;
background: transparent; color: var(--purple);
border: 2px solid var(--border);
text-decoration: none; cursor: pointer;
transition: all 0.22s;
font-family: var(--font-body);
}
.btn-outline:hover { background: var(--yellow); color: var(--yellow-dark); border-color: var(--yellow); transform: translateY(-2px); }
.btn-lg { padding: 17px 36px; font-size: 16px; }
/* ── SECTION BASE ─────────────────────────────────────────── */
section { padding: var(--section-pad-v) var(--section-pad-h); }
.section-inner { max-width: var(--max-w); margin: 0 auto; }
.section-label {
font-size: 11px; font-weight: 600;
letter-spacing: 2px; text-transform: uppercase;
color: var(--purple); margin-bottom: 12px;
font-family: var(--font-body);
display: block;
}
.section-sub {
font-size: 17px; color: var(--mid);
line-height: 1.7; font-weight: 300;
max-width: 540px;
margin-bottom: 48px;
}
.section-header { text-align: center; margin-bottom: 56px; }
.section-header h2 { margin-bottom: 0; }
.section-header .section-sub { margin: 0 auto; }
/* ── HERO (SHARED BASE) ───────────────────────────────────── */
/* Individual pages override colours/image via page-specific