/* ========================================================================== NextGen Trading Academy — Step 1: Header + Market Ticker + Page Foundation ========================================================================== */ /* =========================================================================== THEME TOKENS Dark is the DEFAULT and the brand. Light is the alternative. That order is deliberate — this site was designed dark (black ground, neon green accent), so dark lives on bare :root and light is the override. Inverting that would mean every existing rule described the theme nobody asked for. Three states have to be handled, because "system" is not a value the page can read directly: 1. visitor chose dark -> 2. visitor chose light -> 3. visitor chose neither (the default) -> no attribute at all, and only prefers-color-scheme separates the two So light is defined TWICE: once under the media query (guarded with :not([data-theme="dark"]) so an explicit dark choice still wins) and once under [data-theme="light"] (so an explicit light choice wins over a system preference for dark). Neither block alone covers all three states. --------------------------------------------------------------------------- CHANNEL TOKENS (--*-rgb) exist because ~60 rules in this file use the same colour at a dozen different alphas — rgba(255,255,255,.04) for a hairline, .75 for secondary text, and so on. Listing every one as its own token would be unreadable. Instead the CHANNEL is a token and the alpha stays at the call site: rgba(var(--ink-rgb), 0.75). One value flips the whole family. =========================================================================== */ :root { /* Tells the browser to render form controls, scrollbars and the default canvas dark. Without it a light scrollbar frames a black page. */ color-scheme: dark; /* ---- channels ---- */ --ink-rgb: 255, 255, 255; /* body text and hairlines */ --accent-rgb: 0, 245, 155; --red-rgb: 255, 92, 92; --blue-rgb: 0, 150, 199; /* Scrims sit on top of PHOTOGRAPHS AND VIDEO, which are dark in both themes. This one deliberately does NOT flip — a light scrim over the hero video would leave the headline unreadable. */ --scrim-rgb: 0, 0, 0; /* ---- surfaces ---- */ --color-bg: #000000; --color-surface: #0B0F0D; --color-surface-2: #060706; --color-elevated: #101212; /* ---- ink ---- --color-white keeps its name for compatibility: 50 rules already say color: var(--color-white) and they all mean "body text", not "the colour white". Renaming it would be a 50-line diff for no behaviour change, so the VALUE flips and the name stays. */ --color-white: #FFFFFF; --color-muted: #B8B8B8; --color-border: rgba(var(--ink-rgb), 0.10); /* ---- accent ---- */ --color-green: #00F59B; --color-green-hover: #16D68A; --color-on-accent: #04150E; /* text ON a green fill */ --color-red: #FF5C5C; /* ---- fixed over-media ink ---- Never themed. For text that sits on a photo or video. */ --color-on-media: #FFFFFF; --color-on-media-muted: rgba(255, 255, 255, 0.78); /* ---- elevation ---- Whole box-shadow values rather than a shadow colour, because a light theme needs different geometry as well as a different colour: the same 0.4-alpha black that reads as depth on black reads as dirt on white. */ --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.40); --shadow-card-hover: 0 20px 44px rgba(0, 0, 0, 0.35); --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.60); --shadow-fab: 0 6px 18px rgba(0, 0, 0, 0.38); --shadow-fab-hover: 0 10px 24px rgba(0, 0, 0, 0.48); --header-height: 78px; --ticker-height: 40px; } /* -------------------------------------------------------------------------- LIGHT The accent changes value, not just the surfaces. #00F59B is a neon that scores about 1.4:1 on white — invisible as text and illegible as a button label. #008055 holds roughly 4.6:1, so the same rules keep working without any per-rule exception. -------------------------------------------------------------------------- */ :root[data-theme="light"] { color-scheme: light; --ink-rgb: 13, 33, 25; --accent-rgb: 0, 128, 85; --red-rgb: 186, 38, 38; --blue-rgb: 0, 106, 141; --color-bg: #F4F7F5; --color-surface: #FFFFFF; --color-surface-2: #FAFCFB; --color-elevated: #FFFFFF; --color-white: #0D2119; --color-muted: #55655C; --color-border: rgba(var(--ink-rgb), 0.14); --color-green: #008055; --color-green-hover: #00603F; --color-on-accent: #FFFFFF; --color-red: #BA2626; --shadow-card: 0 18px 44px rgba(13, 45, 33, 0.10); --shadow-card-hover: 0 14px 32px rgba(13, 45, 33, 0.13); --shadow-modal: 0 24px 60px rgba(13, 45, 33, 0.22); --shadow-fab: 0 6px 18px rgba(13, 45, 33, 0.16); --shadow-fab-hover: 0 10px 24px rgba(13, 45, 33, 0.22); } /* Same palette again for visitors who have chosen nothing and whose system asks for light. Guarded so an explicit dark choice is not overridden. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --ink-rgb: 13, 33, 25; --accent-rgb: 0, 128, 85; --red-rgb: 186, 38, 38; --blue-rgb: 0, 106, 141; --color-bg: #F4F7F5; --color-surface: #FFFFFF; --color-surface-2: #FAFCFB; --color-elevated: #FFFFFF; --color-white: #0D2119; --color-muted: #55655C; --color-border: rgba(var(--ink-rgb), 0.14); --color-green: #008055; --color-green-hover: #00603F; --color-on-accent: #FFFFFF; --color-red: #BA2626; --shadow-card: 0 18px 44px rgba(13, 45, 33, 0.10); --shadow-card-hover: 0 14px 32px rgba(13, 45, 33, 0.13); --shadow-modal: 0 24px 60px rgba(13, 45, 33, 0.22); --shadow-fab: 0 6px 18px rgba(13, 45, 33, 0.16); --shadow-fab-hover: 0 10px 24px rgba(13, 45, 33, 0.22); } } /* -------------------------------------------------------------------------- OVER-MEDIA ISLANDS These regions sit on top of a video or a photograph, so their ground is dark whatever the page theme is. Custom properties inherit, so re-declaring the dark values on the container re-darkens everything inside it — no rule in the subtree needs a light-mode exception, and none had to be touched. Without this the hero headline turns near-black over the dark hero video the moment a visitor picks light mode. -------------------------------------------------------------------------- */ .hero, .lightbox, .gallery-thumb__overlay, .event-card__media { --ink-rgb: 255, 255, 255; --accent-rgb: 0, 245, 155; --color-white: #FFFFFF; --color-muted: #B8B8B8; --color-border: rgba(255, 255, 255, 0.10); --color-green: #00F59B; --color-green-hover: #16D68A; --color-on-accent: #04150E; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; } /* Horizontal-overflow guard lives on `html` only — NOT `body`. Per the CSS overflow spec, giving `body` a non-visible overflow-x forces its overflow-y to also become non-visible, turning `body` into its own scroll container separate from the viewport. That silently breaks `position: sticky` on the header (it scrolls away instead of sticking), which is exactly what "header disappears on scroll" was — there is no JavaScript involved in hiding the header anywhere in this project. */ html { overflow-x: hidden; } /* Smooth in-page jumps (e.g. the footer's Back to Top link) — disabled under reduced motion in the Step 10 footer block below. */ html { scroll-behavior: smooth; } body { background: var(--color-bg); color: var(--color-white); font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; line-height: 1.5; } a { text-decoration: none; color: inherit; } ul { list-style: none; margin: 0; padding: 0; } button { font-family: inherit; } /* ========================================================================== Header ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; width: 100%; background: var(--color-bg); border-bottom: 1px solid var(--color-border); } .header-inner { height: var(--header-height); max-width: 1400px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } /* Brand / logo */ .brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; white-space: nowrap; text-decoration: none; } /* Logo sits on the left of the wordmark. - width/height are also set on the element, so the header reserves the space before the image loads and the nav does not shift. - display:block removes the inline-image baseline gap that would otherwise push the logo a few pixels off centre against the text. - NO border-radius: the artwork is transparent-backed, so rounding would clip the emblem's own corners rather than a background box. */ .brand-logo { width: 48px; height: 48px; flex-shrink: 0; object-fit: contain; display: block; } /* The wordmark keeps its original shared baseline, but as its own block so it centres against the logo as a unit rather than per-word. */ .brand-text { display: flex; align-items: baseline; gap: 8px; line-height: 1; } .brand-mark { font-size: 20px; font-weight: 800; letter-spacing: 0.02em; color: var(--color-white); line-height: 1; } .brand-mark-accent { color: var(--color-green); } .brand-sub { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; color: var(--color-muted); line-height: 1; } /* Desktop navigation */ .main-nav { display: flex; align-items: center; gap: 32px; } .nav-list { display: flex; align-items: center; gap: 28px; } .nav-link { position: relative; display: inline-block; padding: 6px 2px; font-size: 14.5px; font-weight: 500; color: var(--color-white); transition: color 0.2s ease; } .nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; background: var(--color-green); border-radius: 2px; transform: scaleX(0); transform-origin: center; transition: transform 0.2s ease; } .nav-link:hover { color: var(--color-green); } .nav-link:focus-visible { outline: 2px solid var(--color-green); outline-offset: 4px; border-radius: 2px; } .nav-link.active { color: var(--color-green); } .nav-link.active::after { transform: scaleX(1); } .btn-student-login { display: inline-flex; align-items: center; justify-content: center; background: var(--color-green); color: var(--color-on-accent); border-radius: 6px; padding: 12px 20px; font-size: 14px; font-weight: 600; white-space: nowrap; transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .btn-student-login:hover { filter: brightness(1.08); box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.45); transform: translateY(-1px); } .btn-student-login:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; } /* Mobile hamburger toggle */ .nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; background: transparent; border: 1px solid var(--color-border); border-radius: 6px; cursor: pointer; flex-shrink: 0; } .nav-toggle-bar { width: 20px; height: 2px; background: var(--color-white); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; } .nav-toggle:focus-visible { outline: 2px solid var(--color-green); outline-offset: 2px; } .nav-toggle.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; } .nav-toggle.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile nav panel */ .mobile-nav { display: none; background: var(--color-bg); border-top: 1px solid var(--color-border); max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s ease, opacity 0.25s ease; } .mobile-nav.is-open { max-height: 480px; opacity: 1; } .mobile-nav-list { display: flex; flex-direction: column; padding: 12px 24px 20px; gap: 4px; } .mobile-nav-link { display: block; padding: 12px 4px; font-size: 15px; font-weight: 500; color: var(--color-white); border-bottom: 1px solid var(--color-border); transition: color 0.2s ease; } .mobile-nav-link:hover, .mobile-nav-link:focus-visible { color: var(--color-green); } .mobile-nav-link.active { color: var(--color-green); } .btn-student-login.mobile { margin-top: 14px; width: 100%; } /* ========================================================================== Market ticker (demo data placeholder) ========================================================================== */ .market-ticker { position: relative; height: var(--ticker-height); background: var(--color-surface); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; overflow: hidden; } .ticker-demo-label { position: absolute; top: 2px; right: 8px; margin: 0; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); opacity: 0.55; pointer-events: none; z-index: 1; } .ticker-viewport { width: 100%; overflow: hidden; } .ticker-track { display: flex; align-items: center; width: max-content; animation: ticker-scroll 32s linear infinite; } .market-ticker:hover .ticker-track, .market-ticker:focus-within .ticker-track { animation-play-state: paused; } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .ticker-item { display: flex; align-items: center; gap: 8px; padding: 0 20px; font-size: 13px; white-space: nowrap; border-right: 1px solid var(--color-border); } .ticker-symbol { font-weight: 600; color: var(--color-white); } .ticker-price { color: var(--color-muted); } .ticker-change { font-weight: 600; } .ticker-change.is-up { color: var(--color-green); } .ticker-change.is-down { color: var(--color-red); } .ticker-change.is-flat { color: var(--color-muted); } /* ========================================================================== Responsive breakpoints (Step 1: header + ticker) ========================================================================== */ @media (max-width: 1024px) { .header-inner { padding: 0 24px; } .nav-list { gap: 20px; } } @media (max-width: 860px) { .main-nav { display: none; } .nav-toggle { display: flex; } .mobile-nav { display: block; } } @media (max-width: 576px) { .header-inner { padding: 0 16px; } :root { --header-height: 68px; } .brand-logo { width: 38px; height: 38px; } .brand-mark { font-size: 17px; } .brand-sub { display: none; } .ticker-item { padding: 0 14px; font-size: 12px; } } @media (max-width: 360px) { .header-inner { padding: 0 12px; gap: 12px; } .nav-toggle { width: 36px; height: 36px; } } /* ======================================== HERO SECTION — STEP 2 ======================================== */ .hero { position: relative; display: flex; align-items: center; min-height: clamp(600px, 78vh, 780px); overflow: hidden; background: var(--color-bg); isolation: isolate; } /* Subtle grid decoration */ .hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(var(--ink-rgb), 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--ink-rgb), 0.04) 1px, transparent 1px); background-size: 64px 64px; z-index: 0; pointer-events: none; } /* Subtle glow decoration */ .hero::after { content: ''; position: absolute; top: -12%; right: -6%; width: 640px; height: 640px; max-width: 60vw; max-height: 60vw; background: radial-gradient(circle, rgba(var(--accent-rgb), 0.14), transparent 68%); z-index: 0; pointer-events: none; } .hero__media { position: absolute; inset: 0; z-index: 1; /* CSS fallback background — visible whenever the video is missing, hidden or still loading */ background: radial-gradient(circle at 78% 60%, rgba(var(--accent-rgb), 0.10), transparent 55%), linear-gradient(160deg, var(--color-surface-2) 0%, var(--color-bg) 65%); } .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero__video--hidden { display: none; } .hero__overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(var(--scrim-rgb), 0.85) 0%, transparent 20%, transparent 78%, rgba(var(--scrim-rgb), 0.85) 100%), linear-gradient( 90deg, rgba(var(--scrim-rgb), 0.92) 0%, rgba(var(--scrim-rgb), 0.72) 45%, rgba(var(--scrim-rgb), 0.35) 75%, rgba(var(--scrim-rgb), 0.65) 100% ); } .hero__content { position: relative; z-index: 3; width: 100%; padding: 48px 0; } .hero__inner { max-width: 1400px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 40px; } .hero__text { max-width: 620px; } .hero__eyebrow { margin: 0 0 18px; font-size: 13px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-green); } .hero__heading { margin: 0; font-size: clamp(48px, 5.5vw, 88px); font-weight: 800; line-height: 0.98; letter-spacing: -0.02em; } .hero__heading .line { display: block; } .hero__heading .line--white { color: var(--color-white); } .hero__heading .line--green { color: var(--color-green); } .hero__subheading { margin: 20px 0 0; font-size: clamp(18px, 2vw, 24px); font-weight: 600; color: var(--color-white); letter-spacing: -0.01em; } .hero__desc { margin: 20px 0 0; max-width: 580px; font-size: 17px; line-height: 1.6; color: rgba(var(--ink-rgb), 0.75); } .hero__cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 15px 28px; border-radius: 6px; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .btn--primary { background: var(--color-green); color: var(--color-on-accent); border: 1px solid var(--color-green); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.5); filter: brightness(1.05); } .btn--secondary { background: transparent; color: var(--color-white); border: 1px solid rgba(var(--ink-rgb), 0.4); } .btn--secondary:hover { transform: translateY(-2px); border-color: var(--color-green); color: var(--color-green); box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.25); } .btn:focus-visible { outline: 2px solid var(--color-green); outline-offset: 3px; } .hero__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 28px 0 0; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); } .hero__trust span[aria-hidden] { color: var(--color-green); opacity: 0.7; } /* Founder */ .hero__founder { position: relative; flex-shrink: 0; width: clamp(280px, 30vw, 420px); height: clamp(420px, 65vh, 650px); max-width: 520px; } .hero__founder-glow { position: absolute; inset: -15%; background: radial-gradient(circle, rgba(var(--accent-rgb), 0.18), transparent 65%); z-index: 0; pointer-events: none; } .hero__founder-frame { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 24px; border: 1px solid var(--color-border); background: linear-gradient(180deg, rgba(var(--ink-rgb), 0.05) 0%, rgba(var(--scrim-rgb), 0.2) 100%); overflow: hidden; } .hero__founder-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .hero__founder-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; height: 100%; color: var(--color-muted); text-align: center; padding: 24px; } .hero__founder-placeholder svg { width: 72px; height: 72px; opacity: 0.5; } .hero__founder-placeholder span { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.5; } /* Scroll indicator */ .hero__scroll { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 6px; color: rgba(var(--ink-rgb), 0.6); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; transition: color 0.2s ease; } .hero__scroll:hover, .hero__scroll:focus-visible { color: var(--color-green); } .hero__scroll-arrow { display: inline-block; font-size: 16px; animation: hero-scroll-bounce 2s ease-in-out infinite; } @keyframes hero-scroll-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @media (prefers-reduced-motion: reduce) { .hero__scroll-arrow { animation: none; } } /* Hero responsive breakpoints */ @media (max-width: 1024px) { .hero__inner { gap: 24px; } .hero__founder { width: clamp(240px, 32vw, 340px); height: clamp(380px, 58vh, 520px); } } @media (max-width: 860px) { .hero { min-height: 680px; } .hero__inner { flex-direction: column; align-items: flex-start; padding-top: 48px; } .hero__text { max-width: 100%; } .hero__founder { align-self: center; width: clamp(220px, 55vw, 320px); height: clamp(320px, 42vh, 420px); margin-top: 8px; } .hero__overlay { background: linear-gradient(180deg, rgba(var(--scrim-rgb), 0.85) 0%, transparent 22%, transparent 70%, rgba(var(--scrim-rgb), 0.9) 100%), linear-gradient(180deg, rgba(var(--scrim-rgb), 0.75) 0%, rgba(var(--scrim-rgb), 0.55) 100%); } } @media (max-width: 576px) { .hero__inner { padding: 0 16px; } .hero__heading { font-size: clamp(38px, 11vw, 52px); } .hero__desc { font-size: 15px; } .hero__cta { flex-direction: column; align-items: stretch; } .btn { width: 100%; } /* Bandwidth: skip background video on very small screens, CSS gradient fallback carries the visual */ .hero__video { display: none; } } @media (max-width: 360px) { .hero__founder { width: 70vw; height: 300px; } } /* ======================================== SHARED SECTION SCAFFOLDING — STEP 3 ======================================== */ .section-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; } .section-header { max-width: 640px; margin: 0 auto 44px; text-align: center; } .section-eyebrow { margin: 0 0 12px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-green); } .section-title { margin: 0; font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.01em; color: var(--color-white); } .section-subtitle { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--color-muted); } /* ======================================== UPCOMING EVENTS — STEP 3 ======================================== */ .events-section { padding: 80px 0; background: var(--color-bg); } .events-empty { max-width: 560px; min-height: 340px; margin: 0 auto; padding: 48px 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; position: relative; overflow: hidden; } .events-empty::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), 0.12), transparent 60%); pointer-events: none; } .events-empty-icon { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(var(--accent-rgb), 0.08); border: 1px solid rgba(var(--accent-rgb), 0.25); color: var(--color-green); } .events-empty-icon svg { width: 28px; height: 28px; } .events-empty-title { position: relative; z-index: 1; margin: 0; font-size: 20px; font-weight: 700; color: var(--color-white); } .events-empty-text { position: relative; z-index: 1; margin: 0; max-width: 400px; font-size: 14.5px; line-height: 1.6; color: var(--color-muted); } /* ======================================== ABOUT US PREVIEW — STEP 3 ======================================== */ .about-section { padding: 90px 0; background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .about-inner { display: flex; align-items: center; gap: 64px; } .about-image { position: relative; flex: 0 0 45%; max-width: 45%; } .about-image-glow { position: absolute; inset: -12%; background: radial-gradient(circle, rgba(var(--accent-rgb), 0.16), transparent 65%); z-index: 0; pointer-events: none; } .about-image-frame { position: relative; z-index: 1; border-radius: 20px; border: 1px solid var(--color-border); overflow: hidden; aspect-ratio: 4 / 5; background: var(--color-surface-2); } .about-image-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .about-image-caption { position: relative; z-index: 1; margin: 16px 4px 0; font-size: 14px; font-weight: 700; color: var(--color-white); } .about-image-caption span { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-green); } .about-content { flex: 1; max-width: 55%; } .about-heading { margin: 0; font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; line-height: 1.08; letter-spacing: -0.01em; color: var(--color-white); } .about-heading .line { display: block; } .about-heading .line--green { color: var(--color-green); } .about-text { margin: 18px 0 0; max-width: 580px; font-size: 16px; line-height: 1.7; color: rgba(var(--ink-rgb), 0.75); } .about-content .btn { margin-top: 28px; } /* Step 3 responsive breakpoints */ @media (max-width: 1024px) { .about-inner { gap: 40px; } } @media (max-width: 860px) { .section-inner { padding: 0 24px; } .events-section { padding: 64px 0; } .about-section { padding: 60px 0; } .about-inner { flex-direction: column; align-items: flex-start; } .about-image, .about-content { max-width: 100%; flex: 1 1 auto; } .about-image { width: 100%; max-width: 420px; align-self: center; } } @media (max-width: 576px) { .section-inner { padding: 0 16px; } .events-section { padding: 60px 0; } .about-section { padding: 60px 20px; } .events-empty { min-height: 300px; padding: 36px 20px; } .about-content .btn { width: 100%; } } /* ======================================== ABOUT PAGE (/web/about) — STEP 3 ======================================== */ .bg-surface { background: var(--color-surface); } .text-center { text-align: center; } /* Compact internal-page hero */ .page-hero { position: relative; min-height: clamp(260px, 34vh, 360px); display: flex; align-items: center; overflow: hidden; background: linear-gradient(160deg, var(--color-surface-2) 0%, var(--color-bg) 70%); border-bottom: 1px solid var(--color-border); } .page-hero-glow { position: absolute; top: -20%; left: 50%; transform: translateX(-50%); width: 720px; height: 480px; max-width: 90vw; background: radial-gradient(circle, rgba(var(--accent-rgb), 0.14), transparent 70%); pointer-events: none; } .breadcrumb { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 13px; font-weight: 600; color: var(--color-muted); } .breadcrumb a { color: var(--color-muted); transition: color 0.2s ease; } .breadcrumb a:hover, .breadcrumb a:focus-visible { color: var(--color-green); } .breadcrumb span[aria-current] { color: var(--color-green); } .page-hero-title { position: relative; z-index: 1; margin: 0; font-size: clamp(32px, 4.4vw, 52px); font-weight: 800; letter-spacing: -0.01em; color: var(--color-white); } .page-hero-subtitle { position: relative; z-index: 1; margin: 14px 0 0; font-size: clamp(15px, 1.6vw, 18px); color: rgba(var(--ink-rgb), 0.75); } /* Content sections */ .about-page-section { padding: 80px 0; } .section-inner.narrow { max-width: 820px; } .about-page-heading { margin: 0 0 20px; font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -0.01em; color: var(--color-white); } .founder-name { margin: 0; font-size: 20px; font-weight: 700; color: var(--color-white); } .founder-title { margin: 4px 0 0; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-green); } .founder-title + .about-text { margin-top: 18px; } /* Approach cards */ .approach-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .approach-card { padding: 28px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .approach-card:hover { transform: translateY(-6px); border-color: rgba(var(--accent-rgb), 0.4); box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.12); } .approach-card h3 { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: var(--color-white); } .approach-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--color-muted); } /* Bottom CTA */ .about-cta { padding: 90px 0; text-align: center; background: var(--color-surface); border-top: 1px solid var(--color-border); } .about-cta-title { margin: 0 0 28px; font-size: clamp(24px, 3vw, 34px); font-weight: 800; color: var(--color-white); } .about-cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } /* About page responsive breakpoints */ @media (max-width: 860px) { .about-page-section { padding: 60px 0; } .approach-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .page-hero { min-height: 280px; } .about-page-section { padding: 50px 0; } .approach-grid { grid-template-columns: 1fr; gap: 16px; } .about-cta { padding: 60px 20px; } .about-cta-buttons { flex-direction: column; align-items: stretch; } .about-cta-buttons .btn { width: 100%; } } /* Visually hidden but still announced by screen readers */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ======================================== REGISTRATION COUNTDOWN — STEP 4 ======================================== */ .registration-countdown { position: relative; padding: 90px 0; background: var(--color-surface-2); overflow: hidden; isolation: isolate; } .registration-countdown::before, .registration-countdown::after { content: ''; position: absolute; border-radius: 50%; filter: blur(10px); pointer-events: none; z-index: 0; } /* Green ambient glow, upper-left */ .registration-countdown::before { top: -18%; left: -8%; width: 480px; height: 480px; max-width: 55vw; max-height: 55vw; background: radial-gradient(circle, rgba(var(--accent-rgb), 0.14), transparent 70%); animation: countdown-glow-pulse 9s ease-in-out infinite; } /* Cool emerald/blue glow, lower-right — kept subtle, green stays the dominant accent */ .registration-countdown::after { bottom: -22%; right: -6%; width: 420px; height: 420px; max-width: 50vw; max-height: 50vw; background: radial-gradient(circle, rgba(var(--blue-rgb), 0.10), transparent 70%); animation: countdown-glow-pulse 11s ease-in-out infinite reverse; } @keyframes countdown-glow-pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } .registration-countdown .section-inner { position: relative; z-index: 1; } .registration-countdown .section-header { margin-bottom: 32px; } .countdown-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 20px; padding: 56px 48px; text-align: center; box-shadow: var(--shadow-card), 0 0 40px rgba(var(--accent-rgb), 0.06); } .countdown-status { margin: 0 0 32px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-green); } .countdown-status.is-closed { color: rgba(var(--red-rgb), 0.85); } .countdown-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; max-width: 640px; margin: 0 auto; } .countdown-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 12px; border-right: 1px solid var(--color-border); } .countdown-item:last-child { border-right: none; } .countdown-value { font-size: clamp(56px, 6vw, 76px); font-weight: 900; line-height: 1; color: var(--color-white); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } .countdown-label { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); } .countdown-expired-message { max-width: 480px; margin: 0 auto; font-size: 15px; line-height: 1.6; color: var(--color-muted); } .countdown-cta { margin-top: 40px; } .countdown-panel.is-expired .countdown-grid, .countdown-panel.is-expired .countdown-cta { display: none; } /* Countdown responsive breakpoints */ @media (max-width: 1024px) { .countdown-value { font-size: clamp(48px, 5.5vw, 64px); } } @media (max-width: 860px) { .registration-countdown { padding: 70px 0; } .countdown-panel { padding: 44px 28px; } } @media (max-width: 576px) { .registration-countdown { padding: 60px 20px; } .countdown-panel { padding: 36px 20px; } .countdown-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 0; max-width: 320px; } .countdown-item { border-right: none; padding: 0; } .countdown-item:nth-child(odd) { border-right: 1px solid var(--color-border); } .countdown-value { font-size: clamp(32px, 9vw, 46px); } .countdown-cta { width: 100%; max-width: 320px; } } @media (prefers-reduced-motion: reduce) { .registration-countdown::before, .registration-countdown::after { animation: none; } } /* ======================================== COURSES SECTION — STEP 5 ======================================== */ .courses-section { position: relative; padding: 90px 0; background: var(--color-bg); overflow: hidden; } .courses-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 15% 30%, rgba(var(--accent-rgb), 0.06), transparent 30%), radial-gradient(circle at 85% 75%, rgba(var(--accent-rgb), 0.05), transparent 32%); pointer-events: none; z-index: 0; } .courses-section .section-inner { position: relative; z-index: 1; } .courses-title { position: relative; padding-bottom: 18px; } .courses-title::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 56px; height: 3px; border-radius: 2px; background: var(--color-green); } .courses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; } .course-card { position: relative; display: flex; flex-direction: column; background: var(--color-elevated); border: 1px solid rgba(var(--ink-rgb), 0.12); border-radius: 20px; padding: 32px; transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease; } .course-card:hover { transform: translateY(-6px); border-color: rgba(var(--accent-rgb), 0.5); box-shadow: var(--shadow-card-hover), 0 0 32px rgba(var(--accent-rgb), 0.12); } .course-card:hover .course-card__cta { border-color: var(--color-green); color: var(--color-green); } .course-card--featured { border-color: rgba(var(--accent-rgb), 0.3); background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.05) 0%, var(--color-elevated) 22%); } .course-card__tag { position: absolute; top: -13px; left: 32px; padding: 5px 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-on-accent); background: var(--color-green); border-radius: 20px; } .course-card__content { flex: 1; display: flex; flex-direction: column; } .course-card__header { text-align: center; } .course-card__badge { display: inline-flex; align-items: center; padding: 5px 14px; margin-bottom: 16px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--color-green); background: rgba(var(--accent-rgb), 0.08); border: 1px solid rgba(var(--accent-rgb), 0.25); border-radius: 20px; } .course-card__title { margin: 0; font-size: clamp(20px, 2vw, 28px); font-weight: 800; line-height: 1.2; color: var(--color-white); } .course-card__description { margin: 18px 0 0; font-size: 14px; line-height: 1.6; color: var(--color-muted); text-align: center; } .course-card__meta { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 12px; } .course-card__date { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-muted); } .course-card__icon { flex-shrink: 0; width: 16px; height: 16px; color: var(--color-green); } .course-card__price { display: flex; align-items: baseline; gap: 8px; font-size: 22px; font-weight: 800; color: var(--color-green); } .course-card__price-label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); } .course-card__actions { margin-top: 28px; } .course-card__cta { width: 100%; } /* Courses responsive breakpoints */ @media (max-width: 1024px) { .courses-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .courses-section { padding: 70px 0; } } @media (max-width: 576px) { .courses-section { padding: 60px 20px; } .courses-grid { grid-template-columns: 1fr; gap: 20px; } .course-card { padding: 24px; } .course-card__title { font-size: clamp(20px, 6vw, 24px); } .course-card__price { font-size: clamp(20px, 6vw, 24px); } } /* ======================================== COURSE DETAIL & ENROLLMENT — STEP 6 ======================================== */ /* Course hero (reuses .breadcrumb from Step 3) */ .course-hero { position: relative; padding: 64px 0 48px; overflow: hidden; background: linear-gradient(160deg, var(--color-surface-2) 0%, var(--color-bg) 70%); border-bottom: 1px solid var(--color-border); text-align: center; } .course-hero-glow { position: absolute; top: -25%; left: 50%; transform: translateX(-50%); width: 720px; height: 480px; max-width: 90vw; background: radial-gradient(circle, rgba(var(--accent-rgb), 0.14), transparent 70%); pointer-events: none; } .course-hero .breadcrumb { justify-content: center; } .course-hero-badge { position: relative; z-index: 1; display: inline-flex; padding: 5px 16px; margin-bottom: 18px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--color-green); background: rgba(var(--accent-rgb), 0.08); border: 1px solid rgba(var(--accent-rgb), 0.25); border-radius: 20px; } .course-hero-title { position: relative; z-index: 1; margin: 0; font-size: clamp(30px, 4.2vw, 48px); font-weight: 800; letter-spacing: -0.01em; color: var(--color-white); } .course-hero-tagline { position: relative; z-index: 1; max-width: 560px; margin: 16px auto 0; font-size: 16px; line-height: 1.6; color: rgba(var(--ink-rgb), 0.75); } /* Summary cards */ .course-summary { padding: 40px 0 0; background: var(--color-bg); } .course-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 900px; margin: 0 auto; } .course-summary-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px; text-align: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; } .course-summary-label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); } .course-summary-value { font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; color: var(--color-green); } /* Two-column body */ .course-body { padding: 70px 0 90px; background: var(--color-bg); } .course-body-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; } .course-section-heading { margin: 40px 0 16px; font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; color: var(--color-white); } .course-main > .course-section-heading:first-of-type, .course-video + .course-section-heading { margin-top: 32px; } /* Video */ .course-video { aspect-ratio: 16 / 9; border-radius: 16px; border: 1px solid var(--color-border); background: var(--color-surface-2); overflow: hidden; } .course-video video { width: 100%; height: 100%; object-fit: cover; display: block; } .course-video-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--color-muted); } .course-video-placeholder svg { width: 40px; height: 40px; opacity: 0.5; } .course-video-placeholder-title { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-white); } .course-video-placeholder-text { font-size: 13px; } /* What You'll Learn chips */ .learn-chip-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; } .learn-chip { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 14px; color: var(--color-white); background: rgba(var(--accent-rgb), 0.05); border: 1px solid rgba(var(--accent-rgb), 0.25); border-radius: 10px; } .learn-chip-icon { flex-shrink: 0; width: 16px; height: 16px; color: var(--color-green); } /* Course details list */ .details-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; } .details-list li { position: relative; padding-left: 20px; font-size: 14.5px; color: rgba(var(--ink-rgb), 0.8); } .details-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-green); } /* Aside: benefits + enroll CTA */ .course-aside { position: sticky; top: calc(var(--header-height) + var(--ticker-height) + 24px); display: flex; flex-direction: column; gap: 24px; } .benefits-card { padding: 28px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; } .benefits-card .course-section-heading { margin-top: 0; font-size: 18px; } .benefits-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .benefits-list li { position: relative; padding-left: 20px; font-size: 14px; color: rgba(var(--ink-rgb), 0.8); } .benefits-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-green); } .course-enroll-cta { width: 100%; text-align: center; } /* Enrollment section — collapsed until the visitor clicks Enroll Now (JS adds .is-revealed) or lands with #course-enrollment in the URL (works with JS disabled via :target, and after a form submit redirect). */ .course-enrollment { display: none; padding: 80px 0; background: var(--color-surface); border-top: 1px solid var(--color-border); } .course-enrollment:target, .course-enrollment.is-revealed { display: block; } .enrollment-selected-course { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0 0 32px; padding: 18px 24px; background: rgba(var(--accent-rgb), 0.06); border: 1px solid rgba(var(--accent-rgb), 0.25); border-radius: 12px; } .enrollment-selected-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); } .enrollment-selected-title { font-size: 16px; font-weight: 800; color: var(--color-white); } .enrollment-selected-fee { margin-left: auto; font-size: 15px; font-weight: 700; color: var(--color-green); } .enrollment-notice { margin: 0 0 24px; padding: 14px 20px; border-radius: 10px; font-size: 14.5px; font-weight: 600; } .enrollment-notice--success { color: var(--color-green); background: rgba(var(--accent-rgb), 0.08); border: 1px solid rgba(var(--accent-rgb), 0.3); } .enrollment-notice--error { color: rgba(var(--red-rgb), 0.9); background: rgba(var(--red-rgb), 0.08); border: 1px solid rgba(var(--red-rgb), 0.3); } /* Registration form */ .enrollment-fieldset { border: none; margin: 0; padding: 0; } .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 24px; } .form-field { display: flex; flex-direction: column; gap: 6px; } .form-field label { font-size: 13px; font-weight: 600; color: var(--color-white); } .required-mark { color: var(--color-green); } .form-field input[type="text"], .form-field input[type="tel"], .form-field input[type="email"], .form-field input[type="date"], .form-field select, .form-field textarea { width: 100%; padding: 12px 14px; font-size: 14.5px; font-family: inherit; color: var(--color-white); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 8px; transition: border-color 0.2s ease; } .form-field textarea { resize: vertical; min-height: 140px; } .form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible { outline: none; border-color: var(--color-green); } .form-field--full { grid-column: 1 / -1; } .form-field input:invalid.touched, .form-field input.has-error, .form-field select.has-error, .form-field textarea.has-error { border-color: rgba(var(--red-rgb), 0.6); } .field-error { margin: 0; font-size: 12.5px; color: rgba(var(--red-rgb), 0.9); } .form-field--checkbox { flex-direction: row; align-items: flex-start; grid-column: span 1; } .form-field--checkbox label { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; line-height: 1.5; } .form-field--checkbox input[type="checkbox"] { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--color-green); } .enrollment-submit { grid-column: 1 / -1; margin-top: 12px; width: 100%; max-width: 280px; } /* Step 6 responsive breakpoints */ @media (max-width: 1024px) { .course-body-grid { grid-template-columns: 1fr; } .course-aside { position: static; } .learn-chip-grid, .details-list { grid-template-columns: 1fr; } } @media (max-width: 860px) { .course-summary-grid { grid-template-columns: 1fr; max-width: 420px; } .course-body { padding: 50px 0 70px; } .course-enrollment { padding: 60px 0; } } @media (max-width: 576px) { .course-hero { padding: 48px 0 36px; } .form-grid { grid-template-columns: 1fr; } .enrollment-selected-course { flex-direction: column; align-items: flex-start; } .enrollment-selected-fee { margin-left: 0; } .enrollment-submit { max-width: 100%; } } /* ======================================== ACHIEVEMENTS — STEP 7 ======================================== */ .achievements-section { position: relative; padding: 90px 0; background: var(--color-bg); overflow: hidden; } .achievements-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), 0.05), transparent 55%); pointer-events: none; z-index: 0; } .achievements-section .section-inner { position: relative; z-index: 1; } .achievements__header { max-width: 640px; margin: 0 auto 56px; text-align: center; } .achievements__header .section-title { color: var(--color-white); } .achievements__header .section-subtitle { margin-top: 12px; font-size: 15px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.75); } .achievements__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .achievement-stat { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px; text-align: center; transition: transform 300ms ease; } .achievement-stat:hover { transform: translateY(-3px); } .achievement-stat__number { font-size: clamp(42px, 5vw, 72px); font-weight: 900; line-height: 1; color: var(--color-green); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } .achievement-stat__label { margin: 0; font-size: clamp(15px, 1.4vw, 18px); font-weight: 600; color: var(--color-white); } /* Achievements responsive breakpoints */ @media (max-width: 1024px) { .achievements__grid { gap: 20px; } } @media (max-width: 860px) { .achievements-section { padding: 70px 0; } .achievements__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; } } @media (max-width: 576px) { .achievements-section { padding: 60px 20px; } .achievements__header { margin-bottom: 40px; } .achievements__header .section-subtitle { font-size: 14px; } .achievements__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; } .achievement-stat__number { font-size: clamp(36px, 11vw, 48px); } .achievement-stat__label { font-size: 14px; } } /* ======================================== GALLERY — STEP 8 ======================================== */ .gallery-section { padding: 90px 0; background: var(--color-bg); } .gallery-category { margin-bottom: 56px; } .gallery-category:last-of-type { margin-bottom: 40px; } .gallery-category__title { position: relative; display: inline-block; margin: 0 0 28px; padding-bottom: 12px; font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; color: var(--color-white); } .gallery-category__title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 44px; height: 3px; border-radius: 2px; background: var(--color-green); } /* Shared thumbnail (used by both the homepage 3-up preview and the full gallery page grid) */ .gallery-thumb { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface); } .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 350ms ease; } .gallery-thumb__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-white); background: rgba(var(--scrim-rgb), 0.45); opacity: 0; transition: opacity 250ms ease; } .gallery-thumb:hover, .gallery-thumb:focus-visible { border-color: rgba(var(--accent-rgb), 0.5); } .gallery-thumb:hover img, .gallery-thumb:focus-visible img { transform: scale(1.03); } .gallery-thumb:hover .gallery-thumb__overlay, .gallery-thumb:focus-visible .gallery-thumb__overlay { opacity: 1; } .gallery-thumb:focus-visible { outline: 2px solid var(--color-green); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .gallery-thumb img { transition: none; } } /* Homepage preview: 3-up grid */ .gallery-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 24px; } .gallery-category__cta { display: inline-flex; } .gallery-section__footer { margin-top: 24px; text-align: center; } /* Gallery page */ .gallery-page-section { padding: 70px 0 90px; background: var(--color-bg); } .gallery-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 48px; } .gallery-filter__link { padding: 9px 18px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--color-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 20px; transition: color 0.2s ease, border-color 0.2s ease; } .gallery-filter__link:hover, .gallery-filter__link:focus-visible { color: var(--color-white); border-color: rgba(var(--accent-rgb), 0.4); } .gallery-filter__link.active { color: var(--color-on-accent); background: var(--color-green); border-color: var(--color-green); } .gallery-category--full { margin-bottom: 64px; } .gallery-full-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; } .lightbox[hidden] { display: none; } .lightbox__backdrop { position: absolute; inset: 0; background: rgba(var(--scrim-rgb), 0.9); } .lightbox__dialog { position: relative; z-index: 1; max-width: min(92vw, 1100px); max-height: 88vh; } .lightbox__image { display: block; max-width: 100%; max-height: 88vh; border-radius: 8px; box-shadow: var(--shadow-modal); } .lightbox__close { position: absolute; top: -44px; right: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; color: var(--color-white); background: rgba(var(--ink-rgb), 0.08); border: 1px solid var(--color-border); border-radius: 50%; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .lightbox__close:hover, .lightbox__close:focus-visible { color: var(--color-green); border-color: var(--color-green); } .lightbox__close:focus-visible { outline: 2px solid var(--color-green); outline-offset: 2px; } /* Gallery responsive breakpoints */ @media (max-width: 1024px) { .gallery-full-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 860px) { .gallery-section { padding: 70px 0; } .gallery-page-section { padding: 50px 0 70px; } .gallery-full-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .gallery-section { padding: 60px 20px; } .gallery-page-section { padding: 40px 20px 60px; } .gallery-preview-grid { grid-template-columns: 1fr; } .gallery-category__cta { width: 100%; text-align: center; } .lightbox__close { top: -40px; right: -4px; } } @media (max-width: 400px) { .gallery-full-grid { grid-template-columns: 1fr; } } /* ======================================== CONTACT PAGE — STEP 9 ======================================== */ .contact-section { padding: 80px 0 90px; background: var(--color-bg); } .contact-grid { display: grid; grid-template-columns: 42% 1fr; gap: 48px; align-items: start; } .contact-info__heading, .contact-form__heading { margin-top: 0; font-size: 20px; } .contact-info__empty { margin: 0; max-width: none; } .contact-cards { display: flex; flex-direction: column; gap: 16px; } .contact-card { padding: 20px 22px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; } .contact-card__label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-green); } .contact-card__value { margin: 0; font-size: 15px; color: var(--color-white); line-height: 1.5; } .contact-card__link { display: inline-block; transition: color 0.2s ease; } .contact-card__link:hover, .contact-card__link:focus-visible { color: var(--color-green); } .contact-card__action { margin-top: 12px; } .contact-card__socials { display: flex; flex-wrap: wrap; gap: 14px; } .contact-card__socials a { font-size: 14px; font-weight: 600; color: var(--color-white); transition: color 0.2s ease; } .contact-card__socials a:hover, .contact-card__socials a:focus-visible { color: var(--color-green); } /* Honeypot — visually hidden but still present in the DOM/tab order-free, so real assistive-tech users never encounter it while bots that auto-fill every field will. Never use display:none for honeypots; some scrapers skip fields that aren't rendered at all. */ .hp-field { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Contact page responsive breakpoints */ @media (max-width: 1024px) { .contact-grid { gap: 32px; } } @media (max-width: 860px) { .contact-section { padding: 60px 0 70px; } .contact-grid { grid-template-columns: 1fr; } } @media (max-width: 576px) { .contact-section { padding: 50px 20px 60px; } } /* ======================================== FOOTER — STEP 10 ======================================== */ .site-footer { background: var(--color-surface); border-top: 1px solid var(--color-border); } .footer-inner { padding: 72px 32px 32px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; } .footer-brand-mark { display: inline-block; font-size: 19px; font-weight: 800; letter-spacing: 0.02em; color: var(--color-white); } .footer-brand-mark-accent { color: var(--color-green); } .footer-brand-sub { font-weight: 600; color: var(--color-muted); } .footer-description { margin: 16px 0 0; max-width: 320px; font-size: 14px; line-height: 1.7; color: var(--color-muted); } .footer-heading { margin: 0 0 18px; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-white); } .footer-links { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; } .footer-link { font-size: 14px; color: var(--color-muted); transition: color 0.2s ease; } .footer-link:hover, .footer-link:focus-visible { color: var(--color-green); } .footer-muted { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: var(--color-muted); } /* CTA */ .footer-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 28px 0; border-top: 1px solid var(--color-border); } .footer-cta-text { margin: 0; font-size: 17px; font-weight: 700; color: var(--color-white); } /* Disclaimer */ .footer-disclaimer { padding: 24px 0 0; } .footer-disclaimer p { margin: 0; max-width: 900px; font-size: 12.5px; line-height: 1.6; color: var(--color-muted); opacity: 0.85; } .footer-divider { margin: 24px 0; border: none; border-top: 1px solid var(--color-border); } /* Bottom bar */ .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; } .footer-copyright { margin: 0; font-size: 13px; color: var(--color-muted); } .footer-back-to-top { font-size: 13px; font-weight: 600; color: var(--color-muted); transition: color 0.2s ease; } .footer-back-to-top:hover, .footer-back-to-top:focus-visible { color: var(--color-green); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Footer responsive breakpoints */ @media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; } .footer-brand-col { grid-column: 1 / -1; } .footer-description { max-width: 480px; } } @media (max-width: 576px) { .footer-inner { padding: 56px 20px 24px; } .footer-grid { grid-template-columns: 1fr; gap: 28px; padding-bottom: 36px; } .footer-cta { flex-direction: column; align-items: flex-start; } .footer-cta .btn { width: 100%; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; } } /* ======================================== CONTACT — DIRECT LINES ======================================== */ .direct-lines-eyebrow { position: relative; display: inline-block; padding-bottom: 14px; } .direct-lines-eyebrow::after { content: ''; position: absolute; left: 0; bottom: 0; width: 36px; height: 2px; border-radius: 2px; background: var(--color-green); } .direct-lines-heading { margin: 0 0 32px; font-size: clamp(24px, 2.8vw, 32px); font-weight: 800; letter-spacing: -0.01em; color: var(--color-white); } .direct-lines-list { display: flex; flex-direction: column; } .direct-line-item { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--color-border); } .direct-line-item:first-child { padding-top: 0; } .direct-line-item:last-child { border-bottom: none; } .direct-line-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; background: rgba(var(--accent-rgb), 0.08); border: 1px solid rgba(var(--accent-rgb), 0.25); color: var(--color-green); } .direct-line-icon svg { width: 20px; height: 20px; } .direct-line-body { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; } .direct-line-label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); } .direct-line-value { font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--color-white); transition: color 0.2s ease; } a.direct-line-value:hover, a.direct-line-value:focus-visible { color: var(--color-green); } .direct-line-value--muted { font-weight: 500; color: var(--color-muted); } .direct-line-maps-link { margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--color-green); transition: opacity 0.2s ease; } .direct-line-maps-link:hover, .direct-line-maps-link:focus-visible { opacity: 0.8; } .direct-line-socials { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; } .direct-line-socials a { font-size: 14px; font-weight: 600; color: var(--color-white); transition: color 0.2s ease; } .direct-line-socials a:hover, .direct-line-socials a:focus-visible { color: var(--color-green); } /* Opening hours */ .opening-hours { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--color-border); } .opening-hours-heading { margin: 0 0 16px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-white); } .opening-hours-list { margin: 0; } .opening-hours-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--color-border); } .opening-hours-row:last-child { border-bottom: none; } .opening-hours-row dt { font-size: 14px; color: var(--color-muted); } .opening-hours-row dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-white); text-align: right; } /* WhatsApp CTA */ .contact-whatsapp-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding: 14px 24px; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; color: var(--color-on-accent); background: var(--color-green); border-radius: 8px; transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .contact-whatsapp-cta:hover { filter: brightness(1.08); box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.4); transform: translateY(-1px); } .contact-whatsapp-cta:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; } .contact-whatsapp-cta__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-bg); flex-shrink: 0; } /* Direct Lines responsive breakpoints */ @media (max-width: 576px) { .direct-line-item { gap: 12px; } .direct-line-icon { width: 38px; height: 38px; } .direct-line-icon svg { width: 18px; height: 18px; } .opening-hours-row { flex-direction: column; gap: 2px; } .opening-hours-row dd { text-align: left; } .contact-whatsapp-cta { width: 100%; justify-content: center; } } /* --------------------------------------------------------------------------- Student portal button — signed-in state. The label switches to "My Portal" when the portal's display-only hint cookie is present. That cookie carries no secret and grants nothing; it exists only so this header can stop saying "Student Login" to someone already signed in. --------------------------------------------------------------------------- */ .btn-student-login.is-signed-in { background: var(--color-green); border-color: var(--color-green); color: var(--color-on-accent); } .btn-student-login.is-signed-in::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--color-on-accent); vertical-align: middle; } /* =========================================================================== Floating actions — call (left) · back-to-top + WhatsApp (right) Two independently fixed clusters, both anchored to the SAME --fab-bottom. That single shared value is what keeps left and right on one line at every width; the previous full-width flex bar drifted whenever the buttons changed shape between breakpoints, and needed pointer-events:none so it did not swallow clicks across the whole viewport. Sizing is driven by --fab-size so every button — pill or circle — is exactly the same height and therefore aligns on its baseline row. =========================================================================== */ :root { --fab-size: 52px; --fab-gap: 12px; --fab-bottom: 20px; --fab-side: 20px; } .fab-cluster { position: fixed; bottom: var(--fab-bottom); z-index: 90; /* under the sticky header (100) */ display: flex; flex-direction: column; align-items: center; gap: var(--fab-gap); } .fab-cluster--left { left: var(--fab-side); align-items: flex-start; } .fab-cluster--right { right: var(--fab-side); align-items: flex-end; } .fab { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: var(--fab-size); min-width: var(--fab-size); padding: 0 18px; border-radius: 999px; color: var(--color-on-accent); text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; box-shadow: var(--shadow-fab); transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease; } /* The icon box is a fixed square, so a pill and a circle centre identically. */ .fab-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; } .fab:hover, .fab:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-fab-hover); } .fab:focus-visible { outline: 2px solid var(--color-white); outline-offset: 3px; } /* The call button follows the theme accent, so its ink follows too. */ .fab--call { background: var(--color-green); } .fab--call:hover, .fab--call:focus-visible { background: var(--color-green-hover); } /* WhatsApp green is a BRAND colour and must not be themed — a "WhatsApp" button in some other green is simply wrong. Because the background is fixed, the ink on it has to be fixed as well: --color-on-accent flips to white in light mode, and white on #25D366 fails contrast badly. Pinning it here keeps the pair in step whatever the page theme is. */ .fab--whatsapp { --color-on-accent: #04150E; background: #25D366; } .fab--whatsapp:hover, .fab--whatsapp:focus-visible { background: #2EE87A; } /* Back to top is secondary: always a circle, never a labelled pill, so it reads as a utility rather than competing with the two contact actions. */ .fab--top { width: var(--fab-size); padding: 0; background: rgba(var(--ink-rgb), .10); color: var(--color-white); border: 1px solid rgba(var(--ink-rgb), .22); backdrop-filter: blur(6px); } .fab--top:hover, .fab--top:focus-visible { background: rgba(var(--ink-rgb), .18); color: var(--color-white); } /* Hidden until the page is scrolled. main.js adds .is-visible; without JavaScript the rule below never applies and the button simply stays put. */ .js .fab--top { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .js .fab--top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } /* ---- Tablet: drop the text labels, keep every button a uniform circle ----- */ @media (max-width: 1024px) { :root { --fab-size: 50px; --fab-gap: 11px; --fab-side: 16px; } .fab { width: var(--fab-size); padding: 0; } .fab-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } } /* ---- Mobile ------------------------------------------------------------- */ @media (max-width: 767px) { :root { --fab-size: 48px; --fab-gap: 10px; --fab-bottom: 16px; --fab-side: 14px; } /* Clear the footer's own content from under the floating buttons. */ .site-footer { padding-bottom: 96px; } } @media (max-width: 380px) { :root { --fab-size: 44px; --fab-side: 12px; } /* never below the 44px target */ } @media (prefers-reduced-motion: reduce) { .fab, .js .fab--top { transition: none; } .fab:hover, .fab:focus-visible { transform: none; } .js .fab--top { transform: none; } .js .fab--top.is-visible { transform: none; } } /* =========================================================================== Contact page — Google Map embed (Admin > Settings > Contact). Sits BELOW the two-column contact grid, at full section width. It was first placed inside .contact-info, which is the 42% left column — a map squeezed into a narrow sidebar is unreadable, and it split the contact details from the opening hours. Full width is both clearer and the conventional pattern. The block only renders when a URL is configured, so these rules simply do nothing until then. =========================================================================== */ .contact-map { margin-top: 64px; padding-top: 56px; border-top: 1px solid var(--color-border); } .contact-map-heading { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: 0.01em; color: var(--color-white); } .contact-map-sub { margin: 0 0 22px; font-size: 14px; color: var(--color-muted); } /* Aspect-ratio box: no layout shift while the frame loads, and it stays proportional at every width. */ .contact-map-frame { position: relative; width: 100%; aspect-ratio: 21 / 8; border-radius: 14px; overflow: hidden; border: 1px solid var(--color-border); background: rgba(var(--ink-rgb), .03); } .contact-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } @media (max-width: 1024px) { .contact-map-frame { aspect-ratio: 16 / 9; } } @media (max-width: 767px) { .contact-map { margin-top: 44px; padding-top: 38px; } .contact-map-heading { font-size: 19px; } .contact-map-sub { margin-bottom: 16px; } .contact-map-frame { aspect-ratio: 4 / 3; border-radius: 12px; } } /* aspect-ratio fallback for older engines */ @supports not (aspect-ratio: 1) { .contact-map-frame { height: 420px; } } @supports not (aspect-ratio: 1) { @media (max-width: 767px) { .contact-map-frame { height: 300px; } } } /* ======================================== UPCOMING EVENTS — GALLERY & CATEGORY FILTER (PHASE 15) Additive only. Every rule below is scoped to a Phase 15 class (.events-filter, .events-grid, .event-card) that no earlier markup carries, so the existing .course-card used by the Courses section is untouched — an event card is a .course-card that opts in to a picture. ======================================== */ /* ---- filter chips ------------------------------------------------------ */ /* Hidden until main.js confirms it can drive the buttons. A visible control that does nothing is worse than no control: without JavaScript every event is shown, which is the correct unfiltered view. */ .events-filter { display: none; } .events-filter.is-ready { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 36px; } .events-filter__chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-muted); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: color .2s ease, border-color .2s ease, background-color .2s ease; } .events-filter__chip:hover { color: var(--color-white); border-color: rgba(var(--accent-rgb), 0.4); } .events-filter__chip:focus-visible { outline: 2px solid var(--color-green); outline-offset: 2px; } .events-filter__chip.is-active { color: var(--color-on-accent); background: var(--color-green); border-color: var(--color-green); } .events-filter__count { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: rgba(var(--ink-rgb), 0.10); font-size: 11.5px; font-weight: 700; text-align: center; } .events-filter__chip.is-active .events-filter__count { background: rgba(var(--scrim-rgb), 0.18); } .events-filter__none { margin: 8px 0 0; text-align: center; font-size: 15px; color: var(--color-muted); } /* A filtered-out card is display:none, not visibility:hidden — the grid must close the gap, and a hidden-but-present card would still be reachable by keyboard and read aloud by a screen reader. */ .event-card[hidden] { display: none; } /* ---- event card media -------------------------------------------------- */ .event-card__media { position: relative; /* A fixed ratio, so a row of cards lines up whatever the source images happen to be, and the layout does not jump as each one loads. */ aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px 14px 0 0; background: var(--color-bg); } .event-card__image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; } .event-card:hover .event-card__image { transform: scale(1.04); } .event-card__category { position: absolute; top: 12px; left: 12px; padding: 5px 12px; border-radius: 999px; background: rgba(var(--scrim-rgb), 0.72); border: 1px solid rgba(var(--accent-rgb), 0.45); color: var(--color-green); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; /* Sits over a photograph of unknown brightness, so it carries its own dark plate rather than relying on the image behind it. */ backdrop-filter: blur(4px); } /* Older Safari/Firefox without aspect-ratio: fall back to a fixed height rather than a collapsed box. */ @supports not (aspect-ratio: 16 / 9) { .event-card__media { height: 200px; } } @media (prefers-reduced-motion: reduce) { .event-card__image { transition: none; } .event-card:hover .event-card__image { transform: none; } } @media (max-width: 640px) { .events-filter.is-ready { gap: 8px; margin-bottom: 28px; } .events-filter__chip { padding: 8px 14px; font-size: 13px; } } /* ========================================================================== THEME TOGGLE Sits between the nav and the hamburger, and is a direct child of .header-inner rather than of .main-nav — .main-nav is display:none below 860px, and a control the visitor needs in order to READ the page must not be hidden inside a collapsed menu. ICON SWAPPING IS PURE CSS. Both the sun and the moon are in the markup and the stylesheet reveals exactly one, chosen by the same [data-theme] / prefers-color-scheme logic that drives the palette. So the correct icon is painted on the very first frame — a JS swap would flash the wrong one, the same problem the pre-paint script exists to avoid. The button shows the theme you would GET, not the one you are in: a sun in dark mode means "switch to light". ========================================================================== */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; padding: 0; background: transparent; border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-muted); cursor: pointer; transition: color .2s ease, border-color .2s ease, background-color .2s ease; } .theme-toggle:hover { color: var(--color-green); border-color: rgba(var(--accent-rgb), 0.45); background: rgba(var(--accent-rgb), 0.08); } .theme-toggle:focus-visible { outline: 2px solid var(--color-green); outline-offset: 2px; } .theme-toggle__icon { display: none; } /* Dark is the default, so the default icon is the sun ("go light"). */ .theme-toggle__icon--sun { display: block; } .theme-toggle__icon--moon { display: none; } /* Explicit light choice -> offer dark. */ :root[data-theme="light"] .theme-toggle__icon--sun { display: none; } :root[data-theme="light"] .theme-toggle__icon--moon { display: block; } /* System light, no explicit choice -> also offer dark. Guarded so an explicit dark choice keeps the sun. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .theme-toggle__icon--sun { display: none; } :root:not([data-theme="dark"]) .theme-toggle__icon--moon { display: block; } } /* …and an explicit dark choice on a light system must win back the sun. Written last so it beats the media query above at equal specificity. */ :root[data-theme="dark"] .theme-toggle__icon--sun { display: block; } :root[data-theme="dark"] .theme-toggle__icon--moon { display: none; } @media (max-width: 860px) { .theme-toggle { margin-left: auto; /* .main-nav is gone; sit beside the hamburger */ } } @media (max-width: 480px) { .theme-toggle { width: 36px; height: 36px; } } /* The page repaints wholesale on a theme change. Easing the two properties that actually carry the theme keeps that from being a hard flash, while leaving transform/opacity animations elsewhere untouched. Suppressed for prefers-reduced-motion, and never applied to the hero video or images. */ @media (prefers-reduced-motion: no-preference) { body, .site-header, .site-footer, .course-card, .event-card, .sp-card { transition: background-color .25s ease, border-color .25s ease, color .25s ease; } }