/* ============================================================ Summer IA Intensive — Omniscience Design tokens drawn from omniscience.education brand ============================================================ */ :root { /* Surfaces */ --canvas: #FAF8F2; --canvas-alt: #F0F0E9; --canvas-warm: #ebebe2; /* Ink */ --ink: #0C0F18; --ink-2: #161922; --muted: #4b5268; --mute-2: #838385; /* Accents */ /* Warm watercolour palette — re-aligned to the student-IA illustration. The "green/lime/yellow/mint" names are kept for backwards-compat with existing component styles; their values are now image-warm tones. */ --accent-green: #DD6B3D; /* base CTA — warm coral-orange (bio-diagram tone) */ --accent-lime: #EA8050; /* lighter coral-orange for hover */ --accent-mint-pale: #FCE4DE; /* pale rose wash (was pale mint) */ --accent-purple: #6B3FB0; /* jewel violet */ --accent-magenta: #D94560; /* coral rose */ --accent-orange: #f58515; /* warm amber */ --accent-yellow: #F5C76E; /* warm amber-yellow (was electric) */ /* Borders */ --border: rgba(12, 15, 24, 0.08); --border-strong: rgba(12, 15, 24, 0.16); /* Brand-aligned deep surface — used on full-bleed feature strips (CTA strip). Cooler aubergine, not pure black, drawn from the Omniscience brand poster's dark surface. */ --surface-deep: #1A0F2E; /* Typography */ --font-display: 'Newsreader', Georgia, 'Times New Roman', serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Radii */ --r-pill: 999px; --r-card: 20px; --r-chip: 12px; --r-input: 8px; /* Layout */ --max-w: 1200px; --gutter: 24px; --toc-w: 240px; --toc-gap: 64px; --section-py: 80px; --section-py-mobile: 48px; /* Motion — small vocabulary applied consistently. Each curve has a job. */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* outbound — hover, reveal */ --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);/* two-sided — state changes */ --ease-out-soft: cubic-bezier(0.32, 0.72, 0, 1); /* gentle decel — header, panels */ --dur-fast: 180ms; --dur-base: 260ms; --dur-slow: 600ms; } /* ============================================================ Reset */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 88px; /* `clip` (not `hidden`) avoids making a scroll container, which would break position: sticky for descendants like the TOC sidebar. */ overflow-x: clip; } body { background: var(--canvas); color: var(--ink); font-family: var(--font-body); font-size: 17px; font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; width: 100%; /* Cleaner text rendering — kerning + standard ligatures across the page. */ font-feature-settings: 'kern', 'liga'; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } button { font: inherit; cursor: pointer; } /* Hanging punctuation lifts the first quote/dash into the margin. Safari only, silently ignored elsewhere — pure progressive enhancement. */ p, blockquote { hanging-punctuation: first allow-end last; } /* Branded text selection. */ ::selection { background: rgba(107, 63, 176, 0.18); color: var(--ink); } /* ============================================================ Typography */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink-2); /* Avoid orphaned last words on display headings. Modern browsers; degrades to the default greedy line-break elsewhere. */ text-wrap: balance; } /* Newsreader is a variable font; opsz makes display sizes render with thinner, higher-contrast strokes the way real serif typography does in print. */ h1 { font-size: clamp(2.5rem, 4vw + 1.25rem, 4.25rem); margin-bottom: 1.25rem; font-variation-settings: 'opsz' 60; color: var(--accent-purple); } h2 { font-size: clamp(1.875rem, 2.5vw + 0.75rem, 2.75rem); margin-bottom: 1rem; font-variation-settings: 'opsz' 36; color: var(--accent-purple); } h3 { font-size: clamp(1.125rem, 0.75vw + 0.875rem, 1.375rem); font-weight: 600; margin-bottom: 0.75rem; font-variation-settings: 'opsz' 24; } p { max-width: 70ch; } p + p { margin-top: 1rem; } a { color: var(--accent-purple); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--ink); } a[aria-disabled="true"] { color: var(--mute-2); pointer-events: none; } ul { padding-left: 1.25rem; } ul li { margin-bottom: 0.4rem; } .eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.25rem; } /* ============================================================ Skip link */ .skip-link { position: absolute; top: -40px; left: 8px; background: var(--ink); color: var(--canvas); padding: 8px 16px; border-radius: 4px; z-index: 100; text-decoration: none; font-size: 14px; } .skip-link:focus { top: 8px; } /* ============================================================ Header / Nav (liquid glass) */ /* Floating Liquid-Glass pill — the bar detaches from the page edges and sits as a translucent capsule. Heavy backdrop blur + saturation gives the characteristic vibrancy; the layered inner shadows fake the refraction at the glass edge; the ::before pseudo-element adds a specular sheen that catches light along the top. */ .site-header { position: sticky; top: 14px; z-index: 50; margin: 14px auto 0; max-width: calc(min(1280px, 100% - 32px)); border-radius: 100px; /* Bright glass rim — light bending across the curved edge of the dome. */ border: 1px solid rgba(255, 255, 255, 0.5); /* Very low alpha so the page reads through; the slight white tint shifts the blurred content brighter, like a frosted dome with a small amount of milk-glass thickness. */ background: rgba(255, 255, 255, 0.16); /* Heavy saturation + brightness push = the dome acts as a lens that amplifies whatever colour is under it, rather than greying it out. */ backdrop-filter: blur(22px) saturate(220%) brightness(1.08); -webkit-backdrop-filter: blur(22px) saturate(220%) brightness(1.08); /* The 3D feel comes from a stacked set of shadows: 1. Two outer drop shadows — soft + slightly tight — for the glass casting onto the page below. 2. Bright TOP bevel inset (highlight where light catches the dome). 3. Dark BOTTOM bevel inset (shadow on the underside of the dome). 4. Thin BRIGHT bottom lip — the surface-tension highlight along the rim where light wraps around the curved underside. 5. Side bevels for the rounded ends of the pill. */ box-shadow: /* outer drop shadows */ 0 22px 50px rgba(12, 15, 24, 0.11), 0 8px 18px rgba(12, 15, 24, 0.07), 0 2px 4px rgba(12, 15, 24, 0.04), /* top bright bevel */ inset 0 2px 0 rgba(255, 255, 255, 0.95), inset 0 6px 10px -2px rgba(255, 255, 255, 0.45), /* bottom dark inner shadow — the dome's underside */ inset 0 -10px 16px -6px rgba(20, 18, 14, 0.08), inset 0 -3px 4px -2px rgba(20, 18, 14, 0.06), /* bottom surface-tension lip — bright line at the rim catching light */ inset 0 -2px 0 -1px rgba(255, 255, 255, 0.7), /* side bevels for the pill's curved ends */ inset 3px 0 6px -2px rgba(255, 255, 255, 0.4), inset -3px 0 6px -2px rgba(255, 255, 255, 0.4); isolation: isolate; transition: background-color var(--dur-base) var(--ease-out-soft), box-shadow var(--dur-base) var(--ease-out-soft), border-color var(--dur-base) var(--ease-out-soft), backdrop-filter var(--dur-base) var(--ease-out-soft); } /* Specular sheen — diagonal hot-spot near the upper-left + soft top highlight band. Mimics light catching the curve of a glass dome. */ .site-header::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: /* hot-spot in the upper-left — the brightest reflection */ radial-gradient( ellipse 65% 90% at 22% -10%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 60% ), /* secondary milder hot-spot upper-right for symmetry */ radial-gradient( ellipse 50% 70% at 80% -10%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 65% ), /* general top-to-bottom highlight catching the upper half of the dome */ linear-gradient( 180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.08) 35%, rgba(255, 255, 255, 0) 65% ); pointer-events: none; z-index: -1; } /* Bottom underside — soft luminous rim that reads as the surface-tension meniscus where the curved glass meets the page. */ .site-header::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; border-radius: inherit; background: linear-gradient( 180deg, transparent 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.06) 75%, rgba(255, 255, 255, 0.22) 100% ); pointer-events: none; z-index: -1; } .site-header.is-scrolled { background: rgba(255, 255, 255, 0.26); backdrop-filter: blur(26px) saturate(220%) brightness(1.06); -webkit-backdrop-filter: blur(26px) saturate(220%) brightness(1.06); border-color: rgba(255, 255, 255, 0.6); box-shadow: 0 26px 60px rgba(12, 15, 24, 0.15), 0 10px 24px rgba(12, 15, 24, 0.09), 0 3px 6px rgba(12, 15, 24, 0.05), inset 0 2px 0 rgba(255, 255, 255, 0.98), inset 0 6px 10px -2px rgba(255, 255, 255, 0.5), inset 0 -10px 16px -6px rgba(20, 18, 14, 0.10), inset 0 -3px 4px -2px rgba(20, 18, 14, 0.07), inset 0 -2px 0 -1px rgba(255, 255, 255, 0.75), inset 3px 0 6px -2px rgba(255, 255, 255, 0.45), inset -3px 0 6px -2px rgba(255, 255, 255, 0.45); } .nav { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 24px; } /* Tighter padding when the nav lives inside the floating pill */ .site-header .shell.nav { max-width: none; padding-left: 28px; padding-right: 12px; } .brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; line-height: 1; color: var(--ink); } .brand:hover { color: var(--ink); } .brand:hover .omni-symbol, .brand:hover .omni-wordmark { opacity: 1; } .nav-links { display: flex; gap: 32px; list-style: none; padding: 0; margin: 0; } .nav-links a { color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; } .nav-links a:hover { color: var(--accent-purple); } /* Center the nav-links group relative to the header bar using a 3-column grid (1fr auto 1fr). This keeps the link cluster at the geometric centre regardless of how wide the brand or actions sides are, while letting nav-links keep its natural content width (no shrink-to-fit wrapping). Desktop only — mobile rules below handle <=880px. */ @media (min-width: 881px) { .nav { display: grid; grid-template-columns: 1fr auto 1fr; } .nav > .brand { justify-self: start; } .nav > .nav-links { justify-self: center; } .nav > .nav-actions { justify-self: end; } } /* Right-side CTA cluster: secondary "Book a call" + primary "Apply" */ .nav-actions { display: flex; align-items: center; gap: 10px; } /* Compact button variant used inside the nav */ .btn-sm { padding: 9px 16px; font-size: 13.5px; } /* Hamburger trigger — visible only at narrow widths, replaces .nav-links there. */ .nav-toggle { display: none; background: none; border: none; padding: 8px; cursor: pointer; width: 40px; height: 40px; } .nav-toggle-bar { display: block; width: 22px; height: 2px; background: var(--ink); margin: 4px auto; transition: transform 200ms ease, opacity 200ms ease; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 880px) { .nav-toggle { display: block; } .nav { position: relative; } /* Off-screen by default; positioned as a slide-down panel under the pill. A small top gap keeps it visually detached from the floating pill, and it shares the same liquid-glass treatment so the design language reads consistently. */ .nav-links { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60; flex-direction: column; gap: 16px; padding: 20px 24px; background: rgba(250, 248, 242, 0.78); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 28px; box-shadow: 0 12px 36px rgba(12, 15, 24, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.65); } /* Open state — driven by the trigger's aria-expanded */ .site-header:has(.nav-toggle[aria-expanded="true"]) .nav-links { display: flex; } .nav-links a { font-size: 16px; padding: 4px 0; } } /* At narrow widths the wordmark + hamburger + Apply CTA can't all fit on one line. Tighten gap and Apply padding; full wordmark-hiding rule is below the .omni-wordmark base rule so it wins on source order without !important. */ @media (max-width: 480px) { .nav { gap: 12px; } .site-header .btn-primary { padding: 11px 18px; font-size: 14px; } /* "Book a call" gets too tight alongside the hamburger + Apply CTA; drop it from the top bar — users can still reach Calendly from the in-page "Book a 15-minute conversation" CTA further down. */ .nav-actions .btn-outline { display: none; } } /* ============================================================ Buttons */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; border: none; padding: 13px 26px; border-radius: var(--r-pill); font-weight: 600; text-decoration: none; font-size: 15px; line-height: 1; transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; white-space: nowrap; } .btn-primary { background: var(--accent-green); color: #fff; } .btn-primary:hover { background: var(--accent-lime); transform: translateY(-2px); color: #fff; } .btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); } .btn-outline:hover { background: var(--ink); color: var(--canvas); } .btn-arrow::after { content: "→"; font-weight: 400; } /* ============================================================ Layout shells */ .shell { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); } section { padding: var(--section-py-mobile) 0; } @media (min-width: 720px) { section { padding: var(--section-py) 0; } } /* Two-column page-grid: sticky TOC + content (when a .toc child is present); single column otherwise. The :has() selector lets the landing page reuse .page-grid for its content-only layout without a separate class. */ .page-grid { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr; } @media (min-width: 1024px) { .page-grid:has(> .toc) { grid-template-columns: var(--toc-w) 1fr; gap: var(--toc-gap); } } /* CSS Grid items default to min-width: auto, which lets a wide child (e.g. the marquee track at width:max-content) push the column past its 1fr allocation and overflow the page. Reset to 0 so the column respects its grid track. */ .page-grid > .toc, .page-grid > .page-content { min-width: 0; } .page-content > section { padding: 56px 0; } .page-content > section:first-child { padding-top: 72px; } @media (max-width: 1023px) { .page-grid { grid-template-columns: 1fr; gap: 0; } .toc { display: none; } } /* ============================================================ Hero */ .hero { position: relative; padding-top: 96px; padding-bottom: 96px; /* Painterly washes echoing the watercolour palette — warm violet, coral rose, and amber. Mint kept as a quiet supporting note. */ background: radial-gradient(ellipse 60vw 40vh at 95% 22%, rgba(217, 69, 96, 0.20), transparent 62%), radial-gradient(ellipse 55vw 38vh at 8% 18%, rgba(107, 63, 176, 0.18), transparent 60%), radial-gradient(ellipse 50vw 35vh at 5% 82%, rgba(245, 199, 110, 0.14), transparent 60%), radial-gradient(ellipse 80vw 30vh at 50% -8%, rgba(245, 133, 21, 0.12), transparent 65%); overflow: hidden; } @media (max-width: 720px) { .hero { padding-top: 64px; padding-bottom: 64px; } } /* ============================================================ Vector field canvas */ #vector-field { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; /* `width/height: 100%` references the initial containing block (viewport) without the scrollbar over-extension that 100vw/100vh would cause. `inset: 0` alone is not enough — has an intrinsic 300×150 size that browsers fall back to if no explicit dimensions are set. */ } .hero-content { max-width: 820px; position: relative; } .hero-subhead { font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.25rem); color: var(--muted); max-width: 60ch; margin-bottom: 2rem; } .hero-stats { display: flex; gap: 36px; margin: 2rem 0; flex-wrap: wrap; } .stat-num { font-family: var(--font-display); font-size: clamp(1.75rem, 1.5vw + 1rem, 2.25rem); color: var(--ink); display: block; line-height: 1; } .stat-label { font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px; display: block; } .cohort-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 2rem; } .cohort-pill { display: inline-flex; gap: 6px; align-items: center; background: var(--canvas-alt); padding: 8px 16px; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 12px; color: var(--ink); text-decoration: none; border: 1px solid var(--border); transition: background 0.15s ease, border-color 0.15s ease; } .cohort-pill:hover { background: var(--canvas); border-color: var(--ink); color: var(--ink); } .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; } /* ============================================================ TOC */ .toc { position: sticky; top: 96px; align-self: start; font-size: 14px; padding-top: 72px; /* Opaque background so content scrolling past doesn't bleed through. */ background: var(--canvas); padding-bottom: 24px; } .toc-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute-2); margin-bottom: 1rem; font-weight: 500; } .toc ul { list-style: none; padding: 0; margin: 0; } .toc li { margin-bottom: 2px; } .toc a { display: block; padding: 7px 14px; color: var(--muted); text-decoration: none; border-left: 2px solid transparent; font-size: 13.5px; line-height: 1.4; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .toc a:hover { color: var(--ink); } .toc a.is-active { color: var(--ink); border-left-color: var(--accent-green); font-weight: 500; background: rgba(27, 252, 143, 0.06); } /* ============================================================ Subjects */ .subjects-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 2rem; } @media (max-width: 720px) { .subjects-grid { grid-template-columns: 1fr; } } .subject-card { background: var(--canvas-alt); border: 1px solid var(--border); border-radius: var(--r-card); padding: 28px; transition: background 0.2s ease, transform 0.2s ease; } .subject-card:hover { background: var(--canvas-warm); transform: translateY(-2px); } .subject-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .subject-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 0.95rem; color: var(--ink); } .chip { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; padding: 2px 8px; border-radius: var(--r-chip); background: var(--canvas); color: var(--ink); border: 1px solid var(--border); letter-spacing: 0.04em; font-weight: 500; } /* ============================================================ Subject picker Multi-select chips + a 3×2 schedule grid (3 cohorts × morning/afternoon). Picking a chip toggles it; a second pick in the same slot swaps the first (since a student can't be in two subjects at the same time). The grid visually shows which half-days the student would attend across the summer. */ .subject-picker { display: grid; gap: 24px; margin-top: 2rem; } .subject-picker-chips { display: flex; flex-wrap: wrap; gap: 8px; } /* Chip — generic container styles. Two flavours: • .subject-chip-single — STEM EE: the chip is itself a