/* =====================================================================
Scholarly Affairs — Brand tokens + semantic helpers
---------------------------------------------------------------------
Required hookup (Google Fonts + Material Symbols):
===================================================================== */
:root {
/* ── Brand colors ── */
--sa-purple: #8A61F8; /* primary */
--sa-purple-dark: #6726DB; /* hover / heading accent */
--sa-purple-deep: #8153FD; /* card backgrounds */
--sa-purple-soft: #A181F9; /* category cards */
--sa-lavender: #F3EFFE; /* tinted bg */
--sa-lavender-50: #F5F3FF; /* lightest tint */
--sa-yellow: #FFD45D; /* hero / containers */
--sa-yellow-mid: #FEC649; /* button fill */
--sa-yellow-dark: #F0BA42; /* button hover */
--sa-cream: #FFF9EB; /* icon-disc bg, page wash */
--sa-cream-50: rgba(255, 249, 235, 0.5);
--sa-lime: #C6F264; /* accent / chart fill */
--sa-lime-dark: #6BA713;
--sa-pink: #FEA9ED;
--sa-pink-soft: #FFC1F5;
/* ── Neutrals (slate-tinted, not pure grey) ── */
--sa-ink: #343B46; /* primary text */
--sa-ink-2: #3A4452; /* card body text */
--sa-slate: #475467;
--sa-slate-2: #526277; /* body text on white */
--sa-slate-3: #677990;
--sa-slate-4: #8696AA; /* muted captions */
--sa-grey-text: #757575; /* tiny labels (Inter) */
--sa-grey-text-2: #6D6D6D;
--sa-bg: #FFFFFF;
--sa-bg-soft: #F9FBFC;
--sa-border: #ECEFF2;
--sa-border-2: #D5DBE2;
--sa-divider: #E0E0E0;
--sa-black: #101828;
--sa-faq-text: #898989;
/* ── Type ── */
--sa-font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--sa-font-mono: "Inter", ui-monospace, sans-serif; /* used for tiny labels */
/* Display scale */
--sa-fs-display-1: 110px;
--sa-fs-display-2: 92px;
--sa-fs-h1: 90px; /* hero */
--sa-fs-h2: 64px; /* section title */
--sa-fs-h3: 48px;
--sa-fs-h4: 32px;
--sa-fs-h5: 24px;
--sa-fs-h6: 18px;
/* Body scale */
--sa-fs-body-lg: 24px;
--sa-fs-body-md: 20px;
--sa-fs-body: 18px;
--sa-fs-body-sm: 16px;
--sa-fs-body-xs: 14px;
--sa-fs-body-xxs: 12px;
/* Tracking */
--sa-track-display: -3px;
--sa-track-h1: -3px;
--sa-track-h2: -2px;
--sa-track-h4: -1px;
--sa-track-logo: -0.05em;
/* ── Spacing ── */
--sa-space-1: 4px;
--sa-space-2: 8px;
--sa-space-3: 12px;
--sa-space-4: 16px;
--sa-space-5: 20px;
--sa-space-6: 24px;
--sa-space-7: 32px;
--sa-space-8: 40px;
--sa-space-9: 50px;
--sa-space-10: 64px;
--sa-space-11: 80px;
--sa-space-12: 112px;
/* ── Radii ── */
--sa-r-sm: 8px;
--sa-r-md: 20px;
--sa-r-lg: 32px;
--sa-r-pill: 500px;
/* ── Shadows ── */
--sa-shadow-card: 0px 12px 12px 0px rgba(0, 0, 0, 0.05);
--sa-shadow-lift: 0px 4px 4px 0px rgba(0, 0, 0, 0.02);
/* ── Motion ── */
--sa-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
--sa-dur-fast: 160ms;
--sa-dur: 220ms;
--sa-dur-slow: 320ms;
}
/* =====================================================================
Semantic helpers — drop on any element to get the brand treatment.
===================================================================== */
.sa-root,
body.sa-root {
font-family: var(--sa-font-sans);
color: var(--sa-ink);
background: var(--sa-bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.sa-display-1 {
font: 700 var(--sa-fs-display-1) / 1.055 var(--sa-font-sans);
letter-spacing: var(--sa-track-display);
color: var(--sa-ink);
}
.sa-h1 {
font: 700 var(--sa-fs-h1) / 1.178 var(--sa-font-sans);
letter-spacing: var(--sa-track-h1);
color: var(--sa-ink);
text-wrap: balance;
margin: 0;
}
.sa-h2 {
font: 700 var(--sa-fs-h2) / 1.188 var(--sa-font-sans);
letter-spacing: var(--sa-track-h2);
color: var(--sa-ink);
text-wrap: balance;
margin: 0;
}
.sa-h3 {
font: 700 var(--sa-fs-h3) / 1.2 var(--sa-font-sans);
letter-spacing: -1.5px;
color: var(--sa-ink);
margin: 0;
}
.sa-h4 {
font: 700 var(--sa-fs-h4) / 1.25 var(--sa-font-sans);
letter-spacing: var(--sa-track-h4);
color: var(--sa-ink);
margin: 0;
}
.sa-h5 {
font: 700 var(--sa-fs-h5) / 1.333 var(--sa-font-sans);
color: var(--sa-ink);
margin: 0;
}
.sa-body-lg {
font: 400 var(--sa-fs-body-lg) / 1.583 var(--sa-font-sans);
color: var(--sa-slate-2);
}
.sa-body {
font: 400 var(--sa-fs-body) / 1.444 var(--sa-font-sans);
color: var(--sa-slate-2);
}
.sa-body-sm {
font: 400 var(--sa-fs-body-sm) / 1.625 var(--sa-font-sans);
color: var(--sa-slate-2);
}
.sa-body-xs {
font: 400 var(--sa-fs-body-xs) / 1.571 var(--sa-font-sans);
color: var(--sa-slate-3);
}
.sa-label {
font: 500 var(--sa-fs-body-xs) / 1.571 var(--sa-font-mono);
color: var(--sa-grey-text);
}
.sa-caption {
font: 400 var(--sa-fs-body-xxs) / 1.333 var(--sa-font-sans);
color: var(--sa-slate-4);
}
/* ── Logo wordmark ── */
.sa-wordmark {
font: 700 40px / 1 var(--sa-font-sans);
letter-spacing: var(--sa-track-logo);
color: var(--sa-purple-dark);
}
/* ── Badge (purple-on-lavender pill that opens every section) ── */
.sa-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 24px;
background: var(--sa-lavender-50);
color: var(--sa-purple);
font: 700 var(--sa-fs-body-sm) / 1.4 var(--sa-font-sans);
border-radius: var(--sa-r-pill);
white-space: nowrap;
width: fit-content; /* never stretch to fill a flex column */
align-self: flex-start;
}
.sa-badge--cream { background: var(--sa-cream); }
.sa-badge--white { background: #FFFFFF; }
/* ── Primary button (yellow pill) ── */
.sa-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 24px;
height: 46px;
background: var(--sa-yellow-mid);
color: var(--sa-black);
font: 700 var(--sa-fs-body) / 1.444 var(--sa-font-sans);
border-radius: var(--sa-r-pill);
border: 0;
cursor: pointer;
text-decoration: none; /* never shows an underline */
transition: background var(--sa-dur) var(--sa-ease),
transform var(--sa-dur) var(--sa-ease);
}
.sa-btn:hover { background: var(--sa-yellow-dark); }
.sa-btn:active { transform: translateY(1px); }
.sa-btn--ghost {
background: transparent;
color: var(--sa-purple);
border: 1px solid var(--sa-purple);
}
.sa-btn--ghost:hover { background: var(--sa-lavender-50); }
.sa-btn--purple {
background: var(--sa-purple);
color: #FFFFFF;
}
.sa-btn--purple:hover { background: var(--sa-purple-dark); }
/* ── Card primitives ── */
.sa-card {
background: #FFFFFF;
border: 1px solid #FFFFFF;
border-radius: var(--sa-r-md);
box-shadow: var(--sa-shadow-card);
}
.sa-card--bare {
background: transparent;
border: 0;
box-shadow: none;
}
/* ── Input (pill) ── */
.sa-input {
display: flex;
align-items: center;
padding: 8px 24px;
height: 46px;
border-radius: var(--sa-r-pill);
border: 1px solid var(--sa-border-2);
background: #FFFFFF;
font: 400 var(--sa-fs-body-sm) / 1.625 var(--sa-font-sans);
color: var(--sa-ink);
width: 100%;
}
.sa-input::placeholder { color: var(--sa-slate-3); }
.sa-input:focus {
outline: none;
border-color: var(--sa-purple);
}
/* ── Material Symbol helper (icon) ── */
.sa-icon {
font-family: "Material Symbols Outlined";
font-weight: 400;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
vertical-align: middle;
}
/* ── Icon disc (the circular icon container used everywhere) ── */
.sa-icon-disc {
display: inline-flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
border-radius: var(--sa-r-pill);
background: var(--sa-cream);
color: var(--sa-purple);
flex-shrink: 0;
}
.sa-icon-disc .sa-icon { font-size: 32px; }
.sa-icon-disc--lg { width: 100px; height: 100px; }
.sa-icon-disc--lg .sa-icon { font-size: 50px; }
.sa-icon-disc--white { background: #FFFFFF; color: var(--sa-purple); }
.sa-icon-disc--purple { background: var(--sa-purple); color: #FFFFFF; }
.sa-icon-disc--lime { background: var(--sa-lime); color: #FFFFFF; }