/* School design system. * The "fun, fearless" redesign — sticker aesthetic, warm paper bg, chunky * black borders + offset shadows. Replaces the old "warm, quiet, trustworthy" * look defined in app.css. * * Loaded AFTER app.css in base.html so its tokens win. Old templates that * still use app.css classes keep working; redesigned templates target the * tokens and primitives below. * * Origins: * - Tokens, primitives, animations, per-world atmospheres mirror the * reference prototype at design/edu/project/School.html. We use the * same CSS-variable names so per-page tweaks line up with what the * designer specified, and so the prototype remains a useful reference. * - Mascot/buddy chrome lives in templates/_kid_chrome.html as a * standalone include — the CSS here just defines the animation * classes it relies on (.anim-peek, etc.). * * Notes for future maintainers: * - We use `--ink: #1A1F36` not `--ink: #0f1b24` (the old app.css value). * Where both files would set --ink, school.css wins (load order in * base.html). Don't try to merge them — old templates expect the old * palette, new templates the new one. * - Bricolage Grotesque is variable; we use 'wdth' 100 for display and * 'wdth' 125 for display-wide. If you load via Google Fonts make sure * opsz 12..96 + wght 400..800 + the variable width axis are requested. */ /* ───────────────────────────────────────────────────────────────────────── * TOKENS * ───────────────────────────────────────────────────────────────────────── */ :root { --school-bg: #FAF5E9; --school-bg-2: #F2EBD7; --school-paper: #FFFFFF; --school-ink: #1A1F36; --school-ink-soft: #4A5168; --school-line: #1A1F36; --school-coral: #FF5E5B; --school-coral-deep: #E04340; --school-sun: #FFB627; --school-sun-deep: #E89400; --school-teal: #00C2A8; --school-teal-deep: #00997F; --school-berry: #6C4DF6; --school-berry-deep: #4F31D4; --school-leaf: #5BC85F; --school-sky: #74C0FC; --school-bubble: #FF8FB1; /* Aliases the rest of this file uses. Kept short so inline styles in templates can use the same names as the prototype. */ --bg: var(--school-bg); --bg-2: var(--school-bg-2); --paper: var(--school-paper); --ink: var(--school-ink); --ink-soft: var(--school-ink-soft); --line: var(--school-line); --coral: var(--school-coral); --coral-deep: var(--school-coral-deep); --sun: var(--school-sun); --sun-deep: var(--school-sun-deep); --teal: var(--school-teal); --teal-deep: var(--school-teal-deep); --berry: var(--school-berry); --berry-deep: var(--school-berry-deep); --leaf: var(--school-leaf); --sky: var(--school-sky); --bubble: var(--school-bubble); --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-xl: 36px; --shadow-sticker: 6px 6px 0 var(--ink); --shadow-sticker-sm: 4px 4px 0 var(--ink); --shadow-sticker-lg: 8px 8px 0 var(--ink); --border: 2.5px solid var(--ink); --border-thick: 3px solid var(--ink); --font-display: 'Bricolage Grotesque', system-ui, sans-serif; --font-body: 'Plus Jakarta Sans', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; } /* ───────────────────────────────────────────────────────────────────────── * BODY / BACKGROUND * Only applied when carries a .school class — the old templates * that still rely on app.css are untouched. * ───────────────────────────────────────────────────────────────────────── */ body.school { font-family: var(--font-body); color: var(--ink); background: var(--bg); background-image: radial-gradient(circle at 1px 1px, rgba(26,31,54,0.07) 1px, transparent 0); background-size: 22px 22px; -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 1.5; } /* Per-world atmospheres. Body gets one of these classes when entering a subject world; the background swaps to match. Set by Python/Jinja via the body_class block on each hub. */ body.school.world-reading { background: #FFF4E0; background-image: repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,94,91,0.14) 38px 39px), radial-gradient(circle at 12px 12px, rgba(26,31,54,0.05) 1px, transparent 0); background-size: auto, 24px 24px; } body.school.world-math { background: #FFF9E5; background-image: linear-gradient(rgba(26,31,54,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(26,31,54,0.07) 1px, transparent 1px); background-size: 28px 28px, 28px 28px; } body.school.world-spark { background: #EAF7F4; background-image: linear-gradient(90deg, rgba(0,194,168,0.18) 1px, transparent 1px), linear-gradient(0deg, rgba(0,194,168,0.18) 1px, transparent 1px), radial-gradient(circle, rgba(0,194,168,0.5) 2px, transparent 2.5px), radial-gradient(circle, rgba(0,194,168,0.5) 2px, transparent 2.5px); background-size: 36px 36px, 36px 36px, 36px 36px, 36px 36px; background-position: 0 0, 0 0, 0 0, 18px 18px; } body.school.world-parent { background: #F0EBFE; background-image: radial-gradient(circle at 1px 1px, rgba(108,77,246,0.18) 1.5px, transparent 0); background-size: 28px 28px; } body.school.school-overflow-hidden { overflow-x: hidden; } /* ───────────────────────────────────────────────────────────────────────── * TYPE * ───────────────────────────────────────────────────────────────────────── */ .school .display { font-family: var(--font-display); font-variation-settings: 'wdth' 100; letter-spacing: -0.02em; line-height: 0.95; } .school .display-wide { font-family: var(--font-display); font-variation-settings: 'wdth' 125; letter-spacing: -0.03em; line-height: 0.95; } .school .mono { font-family: var(--font-mono); letter-spacing: -0.02em; } .school .eyebrow { font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 700; color: var(--ink-soft); } .school h1.display, .school h2.display, .school h3.display, .school h1.display-wide, .school h2.display-wide, .school h3.display-wide { margin: 0; font-weight: 800; } /* ───────────────────────────────────────────────────────────────────────── * NAV + BRAND * Override .nav from app.css. Old layouts keep their nav (they still * inherit the app.css rules); a body.school turns it into the topbar. */ body.school .nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 32px; border-bottom: var(--border); background: var(--bg); position: sticky; top: 0; z-index: 50; } body.school .brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.04em; font-variation-settings: 'wdth' 125; text-decoration: none; color: var(--ink); } body.school .brand-mark { width: 38px; height: 38px; border-radius: 12px; border: var(--border); background: var(--coral); box-shadow: 3px 3px 0 var(--ink); display: grid; place-items: center; color: var(--paper); font-weight: 800; transform: rotate(-4deg); font-size: 0; /* Star glyph rendered via inline SVG in base.html. */ } body.school .brand-sub { display: none; } body.school .nav-links { display: flex; gap: 8px; align-items: center; } body.school .nav-links a, body.school .nav-links .link-btn, body.school .navlink { text-decoration: none; padding: 8px 14px; border-radius: 999px; font-weight: 600; color: var(--ink); background: transparent; border: none; cursor: pointer; font-family: inherit; font-size: 15px; } body.school .nav-links a:hover, body.school .nav-links .link-btn:hover, body.school .navlink:hover { background: var(--bg-2); } /* ───────────────────────────────────────────────────────────────────────── * PAGE / LAYOUT * ───────────────────────────────────────────────────────────────────────── */ body.school main.container, body.school main.full-bleed, body.school .page { position: relative; padding: 28px 28px 60px; max-width: 1200px; margin: 0 auto; width: 100%; box-sizing: border-box; } body.school .page-wide, body.school main.full-bleed.page-wide { max-width: 1360px; } body.school .foot { border-top: var(--border); padding: 18px 32px; font-size: 13px; color: var(--ink-soft); display: flex; justify-content: space-between; align-items: center; margin-top: auto; background: var(--bg); } body.school .foot a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; } /* ───────────────────────────────────────────────────────────────────────── * STICKER PRIMITIVES * ───────────────────────────────────────────────────────────────────────── */ .school .sticker { background: var(--paper); border: var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sticker); position: relative; } .school .sticker-lg { background: var(--paper); border: var(--border-thick); border-radius: var(--r-lg); box-shadow: var(--shadow-sticker-lg); position: relative; } /* Decorative absolutely-positioned blobs */ .school .blob { position: absolute; border-radius: 50%; border: var(--border); pointer-events: none; z-index: 0; } /* Chip / tag */ .school .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--paper); border: 2px solid var(--ink); font-size: 13px; font-weight: 700; color: var(--ink); } /* ───────────────────────────────────────────────────────────────────────── * BUTTONS — override app.css's .btn rules when body.school is in effect * ───────────────────────────────────────────────────────────────────────── */ body.school .btn, body.school .school-btn { font-family: var(--font-display); font-weight: 700; font-size: 18px; background: var(--ink); color: var(--paper); border: var(--border); border-radius: 999px; padding: 14px 28px; box-shadow: var(--shadow-sticker-sm); transition: transform 0.08s ease, box-shadow 0.08s ease; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none; letter-spacing: -0.01em; } body.school .btn:hover, body.school .school-btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); } body.school .btn:active, body.school .school-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); } body.school .btn.btn-primary, body.school .school-btn.school-btn-primary { background: var(--coral); color: var(--paper); } body.school .btn.btn-sun, body.school .school-btn.school-btn-sun { background: var(--sun); color: var(--ink); } body.school .btn.btn-teal, body.school .school-btn.school-btn-teal { background: var(--teal); color: var(--ink); } body.school .btn.btn-berry, body.school .school-btn.school-btn-berry { background: var(--berry); color: var(--paper); } body.school .btn.btn-ghost, body.school .school-btn.school-btn-ghost { background: var(--paper); color: var(--ink); } body.school .btn.btn-sm, body.school .school-btn.school-btn-sm { font-size: 14px; padding: 8px 16px; } body.school .btn.btn-lg, body.school .school-btn.school-btn-lg { font-size: 22px; padding: 18px 36px; } /* "Back" crumb-style button used in PageHead */ .school .crumb { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; background: transparent; border: none; cursor: pointer; padding: 8px 14px; border-radius: 999px; color: var(--ink); text-decoration: none; font-family: inherit; } .school .crumb:hover { background: var(--bg-2); } /* ───────────────────────────────────────────────────────────────────────── * FORM INPUTS * ───────────────────────────────────────────────────────────────────────── */ body.school input[type=text], body.school input[type=email], body.school input[type=password], body.school input[type=number], body.school input[type=search] { font-family: inherit; font-size: 17px; padding: 14px 18px; border: var(--border); border-radius: var(--r-md); background: var(--paper); width: 100%; color: var(--ink); box-sizing: border-box; } body.school input::placeholder { color: var(--ink-soft); } body.school button:focus-visible, body.school input:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; } /* ───────────────────────────────────────────────────────────────────────── * AVATAR / KIDFACE * ───────────────────────────────────────────────────────────────────────── */ .school .kid-face { border-radius: 50%; border: var(--border-thick); box-shadow: 4px 4px 0 var(--ink); overflow: hidden; display: grid; place-items: center; position: relative; flex-shrink: 0; background: var(--sun); } .school .kid-face img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ───────────────────────────────────────────────────────────────────────── * PROGRESS — chunky * ───────────────────────────────────────────────────────────────────────── */ .school .progress { height: 18px; border: var(--border); border-radius: 999px; background: var(--paper); overflow: hidden; position: relative; } .school .progress > div { height: 100%; background: var(--leaf); border-right: var(--border); transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } /* ───────────────────────────────────────────────────────────────────────── * KEYPAD — chunky number keys (used by PIN modal and Math Practice). * Roughly square per the design prototype — slightly taller-than-wide * keys read as a phone-style keypad rather than flat strips. * ───────────────────────────────────────────────────────────────────────── */ .school .keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .school .key { aspect-ratio: 1.25 / 1; border: var(--border-thick); border-radius: var(--r-md); background: var(--paper); box-shadow: var(--shadow-sticker-sm); font-family: var(--font-display); font-weight: 700; font-size: 24px; cursor: pointer; transition: transform 0.06s, box-shadow 0.06s; color: var(--ink); display: grid; place-items: center; } .school .key:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); } .school .key:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); background: var(--sun); } /* ───────────────────────────────────────────────────────────────────────── * WORLD TILES — the chunky subject buttons * ───────────────────────────────────────────────────────────────────────── */ .school .world { border: var(--border-thick); border-radius: var(--r-lg); box-shadow: var(--shadow-sticker-lg); padding: 20px; position: relative; overflow: hidden; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; text-align: left; color: inherit; font-family: inherit; background: var(--paper); display: flex; flex-direction: column; gap: 10px; text-decoration: none; } .school .world:hover { transform: translate(-3px,-3px); box-shadow: 11px 11px 0 var(--ink); } .school .world:active { transform: translate(3px,3px); box-shadow: 3px 3px 0 var(--ink); } .school .world-title { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 0.95; font-variation-settings: 'wdth' 125; letter-spacing: -0.03em; } .school .world-sub { font-size: 14px; opacity: 0.85; font-weight: 500; } .school .world-iconbox { display: inline-block; background: var(--paper); border: var(--border); border-radius: 14px; padding: 8px; box-shadow: 3px 3px 0 var(--ink); transform: rotate(-6deg); align-self: flex-start; } .school .world-cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; } /* ───────────────────────────────────────────────────────────────────────── * HEADLINE DECOR — dropcap, bouncing punctuation, highlight band * ───────────────────────────────────────────────────────────────────────── */ .school .dropcap { font-family: var(--font-display); font-weight: 800; font-size: 1.55em; line-height: 0.8; display: inline-block; background: var(--sun); color: var(--ink); border: var(--border-thick); border-radius: 16px; padding: 4px 12px 0; margin-right: 10px; box-shadow: var(--shadow-sticker-sm); transform: rotate(-4deg); vertical-align: -0.06em; } .school .bang { display: inline-block; animation: school-bounce-up 1.6s ease-in-out infinite; transform-origin: bottom center; color: var(--coral); } .school .hl { display: inline-block; padding: 0 12px; border-radius: 14px; border: var(--border-thick); box-shadow: var(--shadow-sticker-sm); transform: rotate(-2deg); } /* ───────────────────────────────────────────────────────────────────────── * WAX-SEAL "DONE!" STAMP * ───────────────────────────────────────────────────────────────────────── */ .school .stamp { position: absolute; left: 50%; top: 50%; width: 240px; height: 240px; border-radius: 50%; background: var(--coral); border: 6px solid var(--ink); color: var(--paper); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 56px; letter-spacing: 0.04em; box-shadow: 8px 8px 0 var(--ink); pointer-events: none; animation: school-stamp-down 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; z-index: 220; } .school .stamp::before { content: ''; position: absolute; inset: 14px; border: 3px dashed var(--paper); border-radius: 50%; } .school .confetti-piece { position: fixed; pointer-events: none; z-index: 240; animation: school-confetti-fall linear forwards; } /* ───────────────────────────────────────────────────────────────────────── * MASCOT PEEKER (companion that ducks in from a corner) * The HTML lives in templates/_kid_chrome.html; the styles are here. * ───────────────────────────────────────────────────────────────────────── */ .school .buddy-peek { position: fixed; bottom: 24px; right: 24px; z-index: 30; display: flex; flex-direction: row; align-items: flex-end; gap: 14px; pointer-events: none; max-width: 360px; } .school .buddy-peek.pos-bottom-left { bottom: 24px; left: 24px; right: auto; flex-direction: row-reverse; } .school .buddy-peek.pos-top-right { top: 24px; right: 24px; bottom: auto; align-items: flex-start; } .school .buddy-bubble { background: var(--paper); border: var(--border-thick); border-radius: 20px; box-shadow: var(--shadow-sticker); padding: 12px 16px; font-weight: 600; font-size: 14px; color: var(--ink); max-width: 240px; position: relative; margin-bottom: 18px; pointer-events: auto; } .school .buddy-bubble .buddy-name { font-family: var(--font-display); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; } .school .buddy-bubble .buddy-msg { margin-top: 2px; } .school .buddy-bubble .buddy-hint { margin-top: 4px; font-size: 12px; color: var(--ink-soft); font-weight: 500; font-style: italic; } .school .buddy-bubble .bubble-tail { position: absolute; bottom: -10px; right: 24px; width: 18px; height: 18px; background: var(--paper); border: var(--border-thick); border-top: none; border-left: none; transform: rotate(45deg); transform-origin: center; } .school .buddy-peek.pos-bottom-left .buddy-bubble .bubble-tail { right: auto; left: 24px; border-left: var(--border-thick); border-right: none; } .school .buddy-avatar { width: 130px; height: 130px; border-radius: 50%; border: var(--border-thick); box-shadow: var(--shadow-sticker); overflow: hidden; display: grid; place-items: center; flex-shrink: 0; } .school .buddy-avatar svg { display: block; } /* Buddy dismiss button (small × on the bubble) */ .school .buddy-bubble .buddy-close { position: absolute; top: -10px; right: -10px; width: 28px; height: 28px; border-radius: 50%; background: var(--paper); border: var(--border); cursor: pointer; display: grid; place-items: center; box-shadow: 2px 2px 0 var(--ink); pointer-events: auto; font-family: var(--font-display); font-weight: 800; color: var(--ink); padding: 0; font-size: 14px; } /* ───────────────────────────────────────────────────────────────────────── * ANIMATIONS — prefixed with school- to avoid collision with anything else * ───────────────────────────────────────────────────────────────────────── */ @keyframes school-wiggle { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } } @keyframes school-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes school-pop { 0% { transform: scale(0.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } } @keyframes school-blink { 0%, 96%, 100% { transform: scaleY(1); } 98% { transform: scaleY(0.05); } } @keyframes school-flicker { 0%, 100% { opacity: 1; transform: scale(1); } 12% { opacity: 0.7; transform: scale(0.94); } 24% { opacity: 1; transform: scale(1.04); } } @keyframes school-pulse-led { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.18); } } @keyframes school-peek-in { 0% { transform: translateY(60px) rotate(-12deg); opacity: 0; } 70% { transform: translateY(-8px) rotate(2deg); opacity: 1; } 100% { transform: translateY(0) rotate(-4deg); opacity: 1; } } @keyframes school-peek-bounce { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(0deg); } } @keyframes school-bounce-up { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-10px); } 55% { transform: translateY(0); } 70% { transform: translateY(-4px); } 85% { transform: translateY(0); } } @keyframes school-stamp-down { 0% { transform: translate(-50%, -50%) scale(3) rotate(-12deg); opacity: 0; } 60% { transform: translate(-50%, -50%) scale(0.9) rotate(-8deg); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1) rotate(-10deg); opacity: 1; } } @keyframes school-confetti-fall { 0% { transform: translateY(-20px) rotate(0deg); opacity: 1; } 100% { transform: translateY(420px) rotate(540deg); opacity: 0; } } .school .anim-bob { animation: school-bob 3s ease-in-out infinite; } .school .anim-wiggle:hover { animation: school-wiggle 0.6s ease-in-out; } .school .anim-pop { animation: school-pop 0.4s ease-out; } .school .anim-blink { animation: school-blink 4.5s infinite ease-in-out; transform-origin: center; } .school .anim-flicker { animation: school-flicker 2.6s infinite ease-in-out; transform-origin: center; } .school .anim-pulse-led { animation: school-pulse-led 1.4s infinite ease-in-out; transform-origin: center; } .school .anim-peek { animation: school-peek-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both, school-peek-bounce 4s ease-in-out 0.7s infinite; } @media (prefers-reduced-motion: reduce) { .school .anim-bob, .school .anim-blink, .school .anim-flicker, .school .anim-pulse-led, .school .anim-peek, .school .bang { animation: none !important; } } /* ───────────────────────────────────────────────────────────────────────── * FLASH MESSAGES — restyle for sticker aesthetic when body.school * ───────────────────────────────────────────────────────────────────────── */ body.school .flash-stack { max-width: 1280px; margin: 16px auto 0; padding: 0 32px; display: flex; flex-direction: column; gap: 10px; } body.school .flash { padding: 14px 18px; border: var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sticker-sm); font-weight: 600; background: var(--paper); } body.school .flash-success { background: #D6F5EF; } body.school .flash-error, body.school .flash-danger { background: #FFE0DE; } body.school .flash-warning { background: #FFE8B0; } body.school .flash-info { background: #E8E6FF; } /* ───────────────────────────────────────────────────────────────────────── * PAGE HEAD (eyebrow + huge title + glyph card) * ───────────────────────────────────────────────────────────────────────── */ .school .page-head-hero { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 26px; flex-wrap: wrap; } .school .page-head-hero .head-body { flex: 1; min-width: 280px; } .school .page-head-hero h1 { font-family: var(--font-display); font-variation-settings: 'wdth' 125; letter-spacing: -0.03em; line-height: 0.9; font-size: 64px; font-weight: 800; margin: 0; } .school .page-head-hero .sub { font-size: 17px; color: var(--ink-soft); margin-top: 10px; max-width: 520px; font-weight: 500; } .school .page-head-hero .glyph-card { width: 100px; height: 100px; border: var(--border-thick); border-radius: var(--r-lg); box-shadow: var(--shadow-sticker-lg); display: grid; place-items: center; transform: rotate(4deg); flex-shrink: 0; } .school .page-head-hero .glyph-card svg { width: 64px; height: 64px; } /* ───────────────────────────────────────────────────────────────────────── * RESPONSIVE * ───────────────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { body.school main.container, body.school main.full-bleed, body.school .page { padding: 20px 16px 50px; } .school .page-head-hero h1 { font-size: 44px; } .school .page-head-hero .glyph-card { width: 80px; height: 80px; } .school .page-head-hero .glyph-card svg { width: 52px; height: 52px; } .school .nav { padding: 14px 18px; } .school .buddy-peek { display: none; } /* don't crowd small screens */ } @media (max-width: 600px) { .school .page-head-hero h1 { font-size: 36px; } .school .world-title { font-size: 26px !important; } .school .display-wide { font-size: clamp(36px, 9vw, 64px) !important; } } /* ───────────────────────────────────────────────────────────────────────── * Small utility helpers — keep at the end so they can override * ───────────────────────────────────────────────────────────────────────── */ .school .row { display: flex; gap: 16px; align-items: center; } .school .col { display: flex; flex-direction: column; gap: 16px; } .school .center { display: grid; place-items: center; } .school .spacer { flex: 1; } .school .gap-4 { gap: 16px; } .school .gap-6 { gap: 24px; } .school .gap-8 { gap: 32px; } .school .text-center { text-align: center; } .school .muted-soft { color: var(--ink-soft); }