/* ========================================================= Site theme — shared by every page with (index.html adds "home" for its own scene; apply/faq add "page-apply" / "page-faq"). Design source: Figma "Team Website 2026". Layout for the page hero is proportional to the 1280px canvas — 1u = 1px at a 1280px viewport via `--u` (js/site-animations.js re-syncs it from clientWidth so the scrollbar doesn't skew it). ========================================================= */ body.themed { --navy: #313e77; --navy-deep: #191f3b; --navy-soft: #5a69ad; --u: calc(100vw / 1280); --font-display: 'Krona One', 'Lexend Exa', sans-serif; --font-title: 'Lexend Tera', 'Lexend Exa', sans-serif; --font-body: 'Lexend Exa', sans-serif; --font-nav: 'Inter', 'Lexend Exa', sans-serif; background: var(--navy); color: #ffffff; font-family: var(--font-body); } body.themed a { color: #ffffff; } body.themed ::selection { background: rgba(255, 255, 255, 0.92); color: var(--navy); } /* ---------- Navigation (design: five plain links, no bar) ---------- */ body.themed .navbar, body.themed .navbar.fixed-top { position: fixed; top: 0; left: 0; right: 0; height: auto; padding: clamp(14px, calc(38 * var(--u)), 46px) 16px clamp(18px, calc(30 * var(--u)), 40px); display: flex; justify-content: center; align-items: flex-start; background: linear-gradient(180deg, rgba(49, 62, 119, 0.94) 0%, rgba(49, 62, 119, 0.6) 62%, rgba(49, 62, 119, 0) 100%); box-shadow: none; z-index: 3000; pointer-events: none; /* only the links are interactive */ } body.themed .logo, body.themed .navbar-toggle { display: none; } body.themed .main-nav { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: clamp(14px, calc(104 * var(--u)), 128px); width: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; list-style: none; pointer-events: auto; } body.themed .main-nav li { margin: 0; padding: 0; } body.themed .nav-links { display: inline-block; margin: 0; padding: 4px 0; font-family: var(--font-nav); font-weight: 400; font-size: clamp(12px, calc(20 * var(--u)), 22px); line-height: 1.5; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; color: #ffffff; opacity: 0.92; position: relative; transition: opacity 220ms ease; } body.themed .nav-links::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1); } body.themed .nav-links:hover, body.themed .nav-links:focus-visible, body.themed .nav-links.activenav { opacity: 1; } body.themed .nav-links:hover::after, body.themed .nav-links:focus-visible::after, body.themed .nav-links.activenav::after { transform: scaleX(1); } body.themed .nav-links:focus-visible { outline: 2px solid #ffffff; outline-offset: 6px; border-radius: 2px; } /* ---------- Page scene: hero with stacked title + art, then panels ---------- */ body.themed .page-scene { position: relative; overflow: hidden; z-index: 1; } body.themed .page-hero { position: relative; height: calc(1250 * var(--u)); } body.page-faq .page-hero { height: calc(1000 * var(--u)); } /* The page name reads as one word but stacks one letter per line, like the design. */ body.themed .page-title { position: absolute; left: calc(141 * var(--u)); top: calc(163 * var(--u)); z-index: 3; margin: 0; width: 1.35em; font-family: var(--font-title); font-weight: 400; font-size: calc(150 * var(--u)); line-height: 1.15; letter-spacing: 0; text-transform: uppercase; color: #ffffff; word-break: break-all; overflow-wrap: anywhere; } /* Art layers */ body.themed .page-art { position: absolute; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; will-change: transform; } body.themed .page-art--helix { z-index: 1; } body.themed .page-art--helix img { display: block; width: 100%; height: 100%; max-width: none; } body.themed .page-art--sphere { z-index: 2; height: auto; transform-origin: center center; } /* Diagonal helix from the Apply design (rotated -51.13deg about its centre). */ body.themed .page-helix { left: calc(176 * var(--u)); top: calc(344 * var(--u)); width: calc(1647.05 * var(--u)); height: calc(975.59 * var(--u)); } body.themed .page-helix img { transform: rotate(-51.13deg); } body.themed .page-sphere--hero-1 { left: calc(621 * var(--u)); top: calc(182 * var(--u)); width: calc(237 * var(--u)); } body.themed .page-sphere--hero-2 { left: calc(384 * var(--u)); top: calc(755 * var(--u)); width: calc(237 * var(--u)); } /* Body: panels sit above the art; decorative spheres float around them. */ body.themed .page-body { position: relative; padding: calc(100 * var(--u)) 0 calc(60 * var(--u)); } body.themed .page-panel { position: relative; z-index: 3; width: min(calc(1047 * var(--u)), 92vw); margin: 0 auto; padding: clamp(28px, calc(70 * var(--u)), 80px) clamp(20px, calc(84 * var(--u)), 96px); background: linear-gradient(180deg, var(--navy-deep) 14.9%, var(--navy-soft) 100%); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28); } body.themed .page-panel + .page-panel { margin-top: calc(60 * var(--u)); } body.themed .page-sphere--edge-right { left: calc(1160 * var(--u)); top: calc(893 * var(--u)); width: calc(250 * var(--u)); } body.themed .page-sphere--edge-left { left: calc(-70 * var(--u)); top: calc(2100 * var(--u)); width: calc(237 * var(--u)); } body.themed .page-sphere--edge-right-2 { left: calc(1180 * var(--u)); top: calc(3300 * var(--u)); width: calc(237 * var(--u)); } /* Closing beat before the footer: a small sphere and the large soft one. */ body.themed .page-outro { position: relative; height: calc(720 * var(--u)); } body.themed .page-sphere--outro-small { left: calc(489 * var(--u)); top: calc(20 * var(--u)); width: calc(227 * var(--u)); } body.themed .page-sphere--outro-large { left: calc(760 * var(--u)); top: calc(270 * var(--u)); width: calc(644 * var(--u)); } /* ---------- Panel typography ---------- */ body.themed .page-panel, body.themed .page-panel p, body.themed .page-panel li { font-family: var(--font-body); font-weight: 400; font-size: max(16px, calc(20 * var(--u))); line-height: 1.6; letter-spacing: 0.01em; color: #ffffff; } body.themed .page-panel p { margin: 0 0 1.1em; } body.themed .page-panel p:last-child { margin-bottom: 0; } body.themed .page-panel a { color: #ffffff; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; transition: text-decoration-color 200ms ease; } body.themed .page-panel a:hover, body.themed .page-panel a:focus-visible { text-decoration-color: rgba(255, 255, 255, 0.5); } body.themed .page-panel a:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; } body.themed .panel-title { margin: 0 0 0.9em; font-family: var(--font-body); font-weight: 400; font-size: clamp(24px, calc(44 * var(--u)), 52px); line-height: 1.25; letter-spacing: 0.02em; text-align: center; text-wrap: balance; color: #ffffff; } body.themed .page-panel h2:not(.panel-title) { margin: 0 0 0.6em; font-family: var(--font-body); font-weight: 400; font-size: clamp(24px, calc(40 * var(--u)), 46px); line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; color: #ffffff; } body.themed .page-panel h3 { margin: 1.6em 0 0.45em; font-family: var(--font-body); font-weight: 500; font-size: max(18px, calc(24 * var(--u))); line-height: 1.35; letter-spacing: 0.01em; color: #ffffff; } body.themed .page-panel h2 + h3 { margin-top: 0.4em; } body.themed .page-panel ul { margin: 0 0 1.2em; padding-left: 1.4em; } body.themed .page-panel li { margin-bottom: 0.45em; } body.themed .page-panel li::marker { color: rgba(255, 255, 255, 0.7); } body.themed .page-panel blockquote, body.themed .page-panel .quote { margin: 0 0 1.1em; padding-left: 1em; border-left: 2px solid rgba(255, 255, 255, 0.45); font-style: italic; } body.themed .page-panel .quote-by { font-style: normal; opacity: 0.8; white-space: nowrap; } /* Legacy apply/faq helpers the team toggles between recruitment cycles. */ body.themed .page-panel .schedule ul, body.themed .page-panel .example ul { margin-top: 0.4em; } body.themed .page-panel .currentRecruitment { margin-top: 1.5em; } body.themed .page-panel .apply-button, body.themed .page-panel .btn { display: inline-block; margin: 0.6em auto 0; padding: 0.7em 1.6em; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 999px; background: transparent; font-family: var(--font-body); font-size: max(16px, calc(20 * var(--u))); font-weight: 500; color: #ffffff; text-decoration: none; transition: background-color 220ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1); } body.themed .page-panel .apply-button:hover, body.themed .page-panel .btn:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); } body.themed .page-panel .align-center { text-align: center; } /* ---------- Narrow screens: title reads horizontally, art scales up ---------- */ @media screen and (max-width: 860px) { body.themed .page-hero, body.page-faq .page-hero { height: auto; min-height: 120vw; padding: 32vw 6vw 0; } body.themed .page-title { position: relative; left: auto; top: auto; width: auto; font-size: 17vw; line-height: 1.1; word-break: normal; overflow-wrap: normal; text-shadow: 0 1px 2px rgba(22, 30, 64, 0.6), 0 0 14px rgba(49, 62, 119, 0.95), 0 0 32px rgba(49, 62, 119, 0.9); } body.themed .page-helix { --u: calc(100vw / 720); left: -66vw; top: 30vw; } body.themed .page-sphere--hero-1 { left: 68vw; top: 44vw; width: 26vw; } body.themed .panel-title br { display: none; } body.themed .page-sphere--hero-2 { left: 8vw; top: 96vw; width: 24vw; } body.themed .page-body { padding: 8vw 0 6vw; } body.themed .page-panel { width: 92vw; padding: 9vw 6vw; } body.themed .page-panel + .page-panel { margin-top: 8vw; } body.themed .page-sphere--edge-right { left: 84vw; top: 40vw; width: 30vw; } body.themed .page-sphere--edge-left { left: -14vw; top: 220vw; width: 30vw; } body.themed .page-sphere--edge-right-2 { left: 82vw; top: 420vw; width: 28vw; } body.themed .page-outro { height: 90vw; } body.themed .page-sphere--outro-small { left: 14vw; top: 6vw; width: 26vw; } body.themed .page-sphere--outro-large { left: 44vw; top: 28vw; width: 70vw; } } @media screen and (max-width: 480px) { body.themed .nav-links { font-size: 11px; letter-spacing: 0.06em; } } /* ---------- Legacy pages that share the chrome but not the page pattern ---------- */ /* Team: banner photos are taller than they are wide-constrained; keep them inside the viewport. */ body.page-team { overflow-x: hidden; } body.page-team #slideshow img { width: 100%; height: 550px; object-fit: cover; } /* Goals (2020 archive page): clear the fixed nav and sit in the standard column. */ body.page-goals .teamLeadGoals { width: min(calc(1047 * var(--u)), 92vw); margin: 0 auto; padding: clamp(120px, calc(170 * var(--u)), 200px) 0 calc(60 * var(--u)); } body.page-goals .teamLeadGoals p { color: #ffffff; font-size: max(16px, calc(20 * var(--u))); line-height: 1.6; } /* ---------- Apply page: recruitment dates + application links ---------- */ body.themed .apply-lede { max-width: 60ch; margin: 0 auto 1.6em; text-align: center; text-wrap: pretty; } body.themed .apply-section-title { margin: 0 0 0.7em; font-family: var(--font-body); font-weight: 500; font-size: clamp(20px, calc(28 * var(--u)), 32px); letter-spacing: 0.06em; text-transform: uppercase; text-align: center; color: #ffffff; } body.themed .apply-dates { list-style: none; margin: 0 0 calc(44 * var(--u)); padding: 0; display: grid; gap: calc(14 * var(--u)); } body.themed .apply-date { display: flex; align-items: center; gap: calc(24 * var(--u)); padding: calc(14 * var(--u)) calc(22 * var(--u)); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: calc(18 * var(--u)); background: rgba(255, 255, 255, 0.08); margin: 0; } body.themed .apply-date-badge { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: calc(92 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u)); border-radius: calc(14 * var(--u)); background: #ffffff; color: var(--navy); line-height: 1; } body.themed .apply-date-month { font-size: max(12px, calc(15 * var(--u))); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } body.themed .apply-date-day { margin-top: 0.1em; font-size: clamp(30px, calc(44 * var(--u)), 52px); font-weight: 600; letter-spacing: -0.01em; } body.themed .apply-date-body { display: flex; flex-direction: column; gap: 0.25em; } body.themed .apply-date-body strong { font-weight: 500; font-size: max(17px, calc(23 * var(--u))); line-height: 1.25; color: #ffffff; } body.themed .apply-date-body span { font-size: max(15px, calc(18 * var(--u))); line-height: 1.4; color: rgba(255, 255, 255, 0.85); } body.themed .apply-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(18 * var(--u)); margin: 0 0 calc(52 * var(--u)); } body.themed .page-panel .apply-cta { display: inline-flex; align-items: center; justify-content: center; min-width: calc(220 * var(--u)); padding: 0.85em 1.8em; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 999px; font-family: var(--font-body); font-size: max(16px, calc(20 * var(--u))); font-weight: 500; letter-spacing: 0.04em; color: #ffffff; text-decoration: none; transition: background-color 220ms ease, color 220ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1); } body.themed .page-panel .apply-cta:hover, body.themed .page-panel .apply-cta:focus-visible { background: rgba(255, 255, 255, 0.14); text-decoration: none; transform: translateY(-2px); } body.themed .page-panel .apply-cta--primary { background: #ffffff; color: var(--navy); border-color: #ffffff; } body.themed .page-panel .apply-cta--primary:hover, body.themed .page-panel .apply-cta--primary:focus-visible { background: #e9ecf7; color: var(--navy); } body.themed .page-panel .apply-cta:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; } @media screen and (max-width: 600px) { body.themed .apply-date { gap: 4vw; padding: 4vw; } body.themed .apply-date-badge { min-width: 72px; } body.themed .page-panel .apply-cta { width: 100%; } }