:root { --bg-deepest: #070a0f; --bg-dark: #0c1118; --bg-panel: rgba(16, 22, 31, 0.92); --border: rgba(255, 255, 255, 0.08); --text: #ccd3dd; --text-muted: #8691a0; --text-strong: #f1f5fa; --gold: #d4a574; --gold-bright: #f4cc98; --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.34); --shadow-md: 0 16px 38px rgba(0, 0, 0, 0.22); --shell: min(1180px, calc(100% - 40px)); --radius-lg: 28px; --radius-md: 20px; --radius-sm: 14px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { position: relative; isolation: isolate; display: flex; flex-direction: column; margin: 0; min-height: 100vh; color: var(--text); font: 16px/1.65 "Bahnschrift", "Segoe UI", Tahoma, sans-serif; background-color: #080c12; background: linear-gradient(180deg, rgba(6, 9, 14, 0.82), rgba(8, 12, 18, 0.9) 38%, rgba(8, 12, 18, 0.97) 100%), radial-gradient(circle at top center, rgba(212, 165, 116, 0.13), transparent 34%), radial-gradient(circle at 12% 22%, rgba(88, 166, 255, 0.09), transparent 24%), radial-gradient(circle at 88% 18%, rgba(126, 231, 135, 0.07), transparent 20%), linear-gradient(180deg, #080c12 0%, #0d1117 34%, #0b1016 100%); overflow-x: hidden; } main { display: block; flex: 1 0 auto; } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px); background-size: 56px 56px; opacity: 0.18; } a { color: inherit; text-decoration: none; } img, video { display: block; max-width: 100%; } .background-video-shell { position: fixed; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; } .background-video { width: 100%; height: 100%; object-fit: cover; object-position: center center; filter: saturate(0.94) brightness(0.38) contrast(1.05); transform: scale(1.03); } /* Per-visitor toggle: when the background animation is disabled, hide the video and fall back to its (darkened) poster still so the backdrop keeps its mood without motion. The `bg-anim-off` class is set on by prefs.js before first paint, so disabled visitors never see a motion flash. */ html.bg-anim-off .background-video { display: none; } html.bg-anim-off .background-video-shell { background-image: url("../media/ZuluHotel_Background.da2fd0c03b9d.png"); background-size: cover; background-position: center center; filter: saturate(0.94) brightness(0.38) contrast(1.05); transform: scale(1.03); } /* Home-page intro: hold the content back while the background reel plays, then fade it in when the reel ends (or a safety timeout fires). The header stays visible so the Animation toggle doubles as a skip. */ html.page-home main { transition: opacity 700ms ease; } html.home-intro-active main { opacity: 0; pointer-events: none; } /* During the intro the reel is the centrepiece, not a backdrop — show it bright and vivid (it returns to the dimmed background once the content reveals). */ html.home-intro-active .background-video { filter: saturate(1.08) brightness(1) contrast(1.04); } html.home-intro-active .background-grid { opacity: 0.28; } /* Home intro: present the welcome reel framed in a centered window over a static, darkened poster backdrop — the same still the site shows with the background animation turned off — instead of a full-bleed fill. The header/nav stay hidden (rules below), so the framed reel reads as a clean welcome splash. The reel is still the same `.background-video`, so the play-once → reveal logic in site.js needs no changes. */ html.home-intro-active .background-video-shell, html.home-intro-ending .background-video-shell { /* Drop the poster down and pour a dark gradient over its top so the "ZULUHOTEL" wordmark (which runs along the top edge of the still) falls out of frame and into shadow — the backdrop reads as atmosphere, not a second title competing with the reel. */ background-image: linear-gradient( 180deg, rgba(3, 5, 9, 0.97) 0%, rgba(3, 5, 9, 0.85) 22%, rgba(3, 5, 9, 0.55) 55%, rgba(3, 5, 9, 0.62) 100% ), url("../media/ZuluHotel_Background.da2fd0c03b9d.png"); background-size: cover; background-position: center 75%; } html.home-intro-active .background-video, html.home-intro-ending .background-video { /* The reel is 3:2 (1764x1176); match the window to it so nothing is cropped (no lettering cut off). `min(..., 132vh)` keeps the window a true 3:2 while never exceeding ~88vh, so it scales by width or height without distortion. */ position: absolute; top: 50%; left: 50%; width: min(1180px, 94vw, 132vh); height: auto; aspect-ratio: 3 / 2; object-fit: contain; object-position: center center; transform: translate(-50%, -50%); border-radius: 26px; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 36px 90px rgba(0, 0, 0, 0.5); } /* During the intro present a clean full-screen splash: lock scrolling so the page can't scroll into the (hidden) content, and hide the header so the reel fills the screen uncovered. Both return when the content reveals. */ html.home-intro-active, html.home-intro-active body { overflow: hidden; } html.page-home .site-header { transition: opacity 500ms ease; } html.home-intro-active .site-header { opacity: 0; pointer-events: none; } /* Smooth the intro→content hand-off: ease the reel from its bright state down to the dark backdrop while the content fades in. `home-intro-ending` keeps the (paused) reel visible through the dim so it doesn't snap to the poster. */ html.page-home .background-video { transition: filter 800ms ease; } html.page-home .background-grid { transition: opacity 800ms ease; } html.home-intro-ending.bg-anim-off .background-video { display: block; } /* "Skip" control over the intro reel (home page only) — fades out with the reel. */ .intro-skip { position: fixed; right: 28px; bottom: 28px; z-index: 30; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(13, 18, 26, 0.72); backdrop-filter: blur(8px); color: var(--text); font: inherit; font-size: 0.85rem; letter-spacing: 0.04em; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 400ms ease, color 180ms ease, border-color 180ms ease, background 180ms ease; } html.home-intro-active .intro-skip { opacity: 1; pointer-events: auto; } .intro-skip:hover { color: var(--gold-bright); border-color: rgba(212, 165, 116, 0.5); background: rgba(24, 30, 40, 0.85); } .intro-skip-icon { font-size: 1.1em; line-height: 1; } .background-grid { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(180deg, rgba(5, 8, 12, 0.18), rgba(5, 8, 12, 0.56)), radial-gradient(circle at center, rgba(212, 165, 116, 0.1), transparent 56%), linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 28%); opacity: 0.66; } .page-glow { position: fixed; left: 50%; z-index: -1; width: 110vw; height: 44vh; transform: translateX(-50%); pointer-events: none; filter: blur(54px); opacity: 0.55; } .page-glow-top { top: -16vh; background: radial-gradient(circle, rgba(212, 165, 116, 0.26), transparent 60%); } .page-glow-bottom { bottom: -18vh; background: radial-gradient(circle, rgba(88, 166, 255, 0.2), transparent 62%); } .site-shell, .footer-inner { width: var(--shell); margin: 0 auto; } .site-shell-wide { width: min(1380px, calc(100% - 40px)); } .site-header { position: sticky; top: 0; z-index: 20; padding: 18px 0; backdrop-filter: blur(16px); } .site-header.is-scrolled { padding: 12px 0; } .header-inner, .media-frame, .floating-card, .pillar-card, .class-card, .route-card, .media-card, .stat-card { border: 1px solid var(--border); background: linear-gradient(180deg, rgba(16, 22, 31, 0.94), rgba(10, 14, 21, 0.92)); box-shadow: var(--shadow-md); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 18px; border-radius: 999px; } .brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; } .brand-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 16px; color: var(--gold-bright); font: 700 0.92rem/1 "Palatino Linotype", "Book Antiqua", Georgia, serif; letter-spacing: 0.08em; text-transform: uppercase; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.12), rgba(212, 165, 116, 0.08)); border: 1px solid rgba(212, 165, 116, 0.34); } .brand-copy { display: grid; } .brand-copy strong { color: var(--text-strong); font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif; font-size: 1.1rem; } .brand-copy small { color: var(--text-muted); font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; } .site-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .site-nav a, .lang-pill, .badge, .button { transition: 180ms ease; } .site-nav a { padding: 9px 14px; border-radius: 999px; color: var(--text-muted); border: 1px solid transparent; } .site-nav a.active, .site-nav a:hover { color: var(--gold-bright); border-color: rgba(212, 165, 116, 0.28); background: rgba(212, 165, 116, 0.08); } .lang-switch { display: inline-flex; gap: 8px; } .lang-pill { min-width: 50px; padding: 8px 12px; text-align: center; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); background: rgba(255, 255, 255, 0.025); } .lang-pill.active, .lang-pill:hover { color: var(--gold-bright); border-color: rgba(212, 165, 116, 0.45); background: rgba(212, 165, 116, 0.1); } .header-actions { display: inline-flex; align-items: center; gap: 10px; } .anim-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); background: rgba(255, 255, 255, 0.025); font: inherit; font-size: 0.82rem; letter-spacing: 0.04em; cursor: pointer; transition: 180ms ease; } .anim-toggle:hover { color: var(--gold-bright); border-color: rgba(212, 165, 116, 0.45); background: rgba(212, 165, 116, 0.1); } .anim-toggle-dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--gold-bright); background: var(--gold-bright); box-shadow: 0 0 8px rgba(244, 204, 152, 0.7); transition: 180ms ease; } /* Dot reflects the class (set by prefs.js before paint), so the toggle shows the right state immediately — lit when animation is on, hollow when off. */ html.bg-anim-off .anim-toggle-dot { background: transparent; border-color: rgba(255, 255, 255, 0.3); box-shadow: none; } html.bg-anim-off .anim-toggle { opacity: 0.82; } .hero-section { padding: 18px 0 24px; } .cinema-section { padding: 8px 0 18px; } .cinema-links { display: grid; gap: 14px; align-content: center; pointer-events: auto; } /* Match the header menu pills (.site-nav a): compact rounded pills, muted text turning gold on hover. A subtle dark backdrop keeps them legible over the cinematic video (the header version sits on the dark glass bar instead). */ .cinema-link { display: inline-flex; align-items: center; justify-content: center; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(13, 18, 26, 0.9); backdrop-filter: blur(8px); color: var(--text); transition: 180ms ease; } .cinema-link:hover { color: var(--gold-bright); border-color: rgba(212, 165, 116, 0.5); background: rgba(24, 30, 40, 0.9); } .cinema-link-mark { display: none; } .cinema-link-label { font-weight: 500; letter-spacing: 0.02em; } .cinema-frame { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 9; min-height: 340px; border-radius: 30px; border: 1px solid rgba(255, 255, 255, 0.08); background: #05080d; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.34); } .cinema-frame::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 22%), linear-gradient(180deg, rgba(3, 5, 9, 0.04), rgba(3, 5, 9, 0.16)); } .cinema-video { width: 100%; height: 100%; object-fit: cover; object-position: center center; } .cinema-overlay-nav { position: absolute; inset: 26px; z-index: 2; display: flex; justify-content: space-between; align-items: center; pointer-events: none; } .cinema-links-left { justify-items: start; } .cinema-links-right { justify-items: end; } .hero-grid, .future-grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr); align-items: start; } .hero-copy { padding: 24px 0 10px; } .section-kicker, .card-eyebrow, .media-copy p { margin: 0 0 10px; color: var(--text-muted); font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; } h1, h2, h3 { margin: 0; color: var(--text-strong); font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif; } h1 { color: var(--gold-bright); font-size: clamp(3rem, 6vw, 5.4rem); line-height: 0.96; letter-spacing: 0.04em; max-width: 10ch; } h2 { font-size: clamp(2.1rem, 4vw, 3rem); color: var(--gold-bright); } h3 { font-size: 1.42rem; } .hero-description, .section-heading p, .class-summary, .route-head p, .future-copy p, .media-copy span, .media-card-copy p, .site-footer p { color: var(--text-muted); } .hero-description { max-width: 62ch; margin: 18px 0 0; font-size: 1.06rem; } .hero-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; } .button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--border); font-weight: 700; } .button-primary { color: var(--gold-bright); border-color: rgba(212, 165, 116, 0.44); background: rgba(212, 165, 116, 0.1); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); } .button-primary:hover { border-color: rgba(212, 165, 116, 0.68); background: rgba(212, 165, 116, 0.16); } .button-secondary { color: var(--text-strong); background: rgba(255, 255, 255, 0.03); } .button-secondary:hover { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); } .badge-row { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-strong); background: rgba(255, 255, 255, 0.035); } .badge:hover { border-color: rgba(212, 165, 116, 0.38); color: var(--gold-bright); } .stats-grid { margin-top: 26px; display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .stat-card { padding: 18px 18px 16px; border-radius: var(--radius-md); } .stat-card strong { display: block; color: var(--text-strong); font: 700 clamp(1.8rem, 4vw, 2.4rem)/1 "Palatino Linotype", Georgia, serif; } .stat-card span { display: block; margin-top: 8px; color: var(--text-muted); } .hero-media { display: grid; gap: 16px; } .media-frame, .media-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); min-height: 520px; } .media-frame.route-media-frame { aspect-ratio: 3 / 2; min-height: 0; } .standard-video-frame { isolation: isolate; } .standard-video-frame .hero-video, .standard-video-frame .media-overlay { position: absolute; inset: 0; } .catalog-showcase-frame { position: relative; overflow: hidden; aspect-ratio: 3 / 2; min-height: 0; border-radius: var(--radius-lg); border: 1px solid var(--border); background: linear-gradient(180deg, rgba(16, 22, 31, 0.94), rgba(10, 14, 21, 0.92)); box-shadow: var(--shadow-md); } .catalog-showcase-frame .hero-video, .catalog-showcase-frame .media-overlay { position: absolute; inset: 0; } .class-video-frame { width: 100%; max-width: 420px; min-height: 0; aspect-ratio: 2 / 3; justify-self: end; } .class-video-frame .hero-video, .class-video-frame .media-overlay { position: absolute; inset: 0; } .media-copy, .media-card-copy { position: absolute; inset: 24px 24px auto; z-index: 2; max-width: 26rem; } .hero-video { width: 100%; height: 100%; object-fit: cover; } .media-overlay, .class-image-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 8, 13, 0.14), rgba(5, 8, 13, 0.1) 24%, rgba(5, 8, 13, 0.84)), radial-gradient(circle at top, rgba(212, 165, 116, 0.2), transparent 44%); } .floating-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .floating-card { padding: 18px; border-radius: var(--radius-md); min-height: 156px; } .floating-card h3 { color: var(--gold-bright); font-size: 1.08rem; } .floating-card p { margin: 10px 0 0; color: var(--text-muted); font-size: 0.94rem; } .content-section { padding: 34px 0; } .content-section-last { padding-bottom: 72px; } .section-heading { max-width: 50rem; margin-bottom: 22px; } .pillar-grid, .class-grid, .route-grid { display: grid; gap: 18px; } .pillar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pillar-card, .route-card { position: relative; overflow: hidden; padding: 24px; border-radius: var(--radius-md); } .pillar-card::before, .class-card::before, .route-card::before, .media-card::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 1px; background: linear-gradient(90deg, var(--accent, var(--gold)), transparent 80%); } .pillar-card h3 { margin-top: 6px; color: var(--text-strong); } .pillar-card p:last-child { margin: 12px 0 0; color: var(--text-muted); } .class-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .class-card { position: relative; overflow: hidden; border-radius: 24px; } .class-image-wrap { position: relative; min-height: 240px; } .class-image-wrap img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; } .class-icon { position: absolute; left: 18px; bottom: 18px; z-index: 2; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: var(--accent); background: rgba(8, 12, 18, 0.76); border: 1px solid rgba(255, 255, 255, 0.08); font-size: 1.3rem; } .class-body { padding: 20px 20px 22px; } .class-summary { margin: 10px 0 0; } .class-points { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; } .class-points li { padding-left: 16px; position: relative; color: var(--text); } .class-points li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px var(--accent); } .route-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .route-head { display: flex; align-items: flex-start; gap: 14px; } .route-icon { width: 50px; height: 50px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 16px; color: var(--accent); background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.08); font-size: 1.2rem; } .route-head p { margin: 8px 0 0; } .route-steps { margin: 18px 0 0; padding-left: 18px; color: var(--text); } .route-steps li + li { margin-top: 8px; } .route-tip { margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.03); color: var(--text-strong); } .future-copy { padding-top: 18px; } .future-copy p { margin: 16px 0 0; max-width: 60ch; } .inner-hero-section { padding: 28px 0 10px; } .inner-hero-grid, .class-detail-hero, .detail-grid { display: grid; gap: 22px; align-items: start; } .inner-hero-grid { grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.96fr); } .class-detail-hero { grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); } .inner-hero-copy { padding: 18px 0 10px; } .inner-hero-copy h1 { max-width: 12ch; } .inner-hero-subtitle { margin-top: 18px; max-width: 18ch; font-size: clamp(1.4rem, 2.4vw, 2rem); } .stats-grid-compact { align-self: stretch; } .class-detail-stats { margin-top: 22px; } .download-card, .support-card, .catalog-card, .detail-panel, .detail-video-card, .skill-preview-card { position: relative; overflow: hidden; border: 1px solid var(--border); background: linear-gradient(180deg, rgba(16, 22, 31, 0.94), rgba(10, 14, 21, 0.92)); box-shadow: var(--shadow-md); } .download-card, .support-card, .detail-panel, .skill-preview-card { border-radius: var(--radius-lg); } .download-card { padding: 28px; } .download-summary { margin: 16px 0 0; color: var(--text-muted); } .download-note { margin-top: 16px; display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--radius-sm); background: rgba(212, 165, 116, 0.08); border: 1px solid rgba(212, 165, 116, 0.16); } .download-note strong { color: var(--gold-bright); } .download-note span { color: var(--text-strong); } .button-wide { width: 100%; margin-top: 22px; } .button-disabled { cursor: not-allowed; opacity: 0.78; } .status-line { margin: 14px 0 0; color: var(--text-strong); } .download-path { display: block; margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm); color: var(--gold-bright); background: rgba(255, 255, 255, 0.03); overflow-wrap: anywhere; } .support-grid, .catalog-grid, .skill-card-grid { display: grid; gap: 18px; } .support-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .support-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .support-card { padding: 24px; } .support-card h3, .catalog-card h3, .detail-panel h2, .skill-preview-card h3 { color: var(--gold-bright); } .support-card p, .catalog-stat-row, .skill-preview-summary, .skill-preview-training { color: var(--text-muted); } .support-card p { margin: 12px 0 20px; } .catalog-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .catalog-card { border-radius: 26px; display: flex; flex-direction: column; height: 100%; } .catalog-card::before, .detail-panel::before, .detail-video-card::before, .skill-preview-card::before, .download-card::before, .support-card::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 1px; background: linear-gradient(90deg, var(--accent, var(--gold)), transparent 80%); } .catalog-card-media { position: relative; aspect-ratio: 4 / 5; min-height: 0; display: flex; align-items: flex-end; justify-content: center; background: radial-gradient(circle at top center, rgba(212, 165, 116, 0.12), transparent 44%), linear-gradient(180deg, rgba(16, 22, 31, 0.92), rgba(8, 12, 18, 0.98)); } .catalog-card-media img { width: 100%; height: 100%; padding: 18px 14px 0; object-fit: contain; object-position: center bottom; } .catalog-card-overlay, .detail-video-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 9, 14, 0.04), rgba(6, 9, 14, 0.08) 26%, rgba(6, 9, 14, 0.84)), radial-gradient(circle at top center, rgba(212, 165, 116, 0.22), transparent 46%); } .catalog-card-icon { position: absolute; left: 18px; bottom: 18px; z-index: 2; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: var(--accent); background: rgba(8, 12, 18, 0.76); border: 1px solid rgba(255, 255, 255, 0.08); font-size: 1.28rem; } .catalog-card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 14px; flex: 1; } .catalog-stat-row { margin: 0; display: flex; flex-wrap: wrap; gap: 10px 16px; } .skill-cloud-tight { margin: 0; min-height: 60px; align-content: start; } .catalog-card .class-summary { margin: 0; min-height: calc(1.55em * 4); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .catalog-card .button { margin-top: auto; align-self: flex-start; } .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .detail-panel { padding: 26px; } .detail-panel p + p { margin-top: 14px; } .detail-video-card { position: relative; overflow: hidden; aspect-ratio: 16 / 9; min-height: 0; border-radius: 30px; background: #05080d; } .detail-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; } .class-points-dense { margin-top: 16px; } .progression-table-wrap { overflow: hidden; border-radius: 26px; border: 1px solid var(--border); background: linear-gradient(180deg, rgba(16, 22, 31, 0.94), rgba(10, 14, 21, 0.92)); box-shadow: var(--shadow-md); } .progression-table { width: 100%; border-collapse: collapse; } .progression-table th, .progression-table td { padding: 14px 16px; text-align: left; } .progression-table thead th { color: var(--gold-bright); font-weight: 700; background: rgba(255, 255, 255, 0.02); } .progression-table tbody tr + tr td { border-top: 1px solid rgba(255, 255, 255, 0.05); } .progression-table tbody td { color: var(--text); } .skill-card-grid { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } .skill-preview-card { padding: 22px; } .skill-preview-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; } .skill-preview-meta { min-width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 14px; color: var(--gold-bright); background: rgba(212, 165, 116, 0.1); border: 1px solid rgba(212, 165, 116, 0.24); } .skill-preview-summary, .skill-preview-training { margin: 16px 0 0; } .skill-preview-training { color: var(--text-strong); } .skill-preview-ranges { margin: 18px 0; display: flex; flex-wrap: wrap; gap: 10px; } .skill-preview-ranges span { padding: 10px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.03); color: var(--text); } .site-footer { flex-shrink: 0; margin-top: auto; min-height: 88px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .footer-inner { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 88px; padding: 18px 0; } .site-footer p, .site-footer span { margin: 0; color: var(--text-muted); } .js [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 500ms ease, transform 500ms ease; } .js [data-reveal].is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js [data-reveal] { opacity: 1; transform: none; transition: none; } } @media (max-width: 1080px) { .header-inner { border-radius: 28px; flex-wrap: wrap; justify-content: center; } .site-nav { order: 3; } .hero-grid, .future-grid, .inner-hero-grid, .detail-grid { grid-template-columns: 1fr; } .class-detail-hero { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); } .class-video-frame { width: 100%; max-width: 340px; } .pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .media-frame, .media-card { min-height: 420px; } .cinema-frame { min-height: 300px; } .cinema-overlay-nav { inset: auto 18px 18px; display: grid; gap: 12px; align-items: end; } .cinema-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cinema-link { max-width: none; } .cinema-links-left, .cinema-links-right { justify-items: stretch; } .support-grid-three { grid-template-columns: 1fr; } .detail-video-card { min-height: 0; } } @media (max-width: 760px) { :root { --shell: min(100% - 24px, 100%); } .site-header { padding-top: 12px; } .header-inner { padding: 12px; } .hero-section { padding-top: 18px; } .cinema-section { padding-top: 6px; } .site-shell-wide { width: min(100% - 24px, 100%); } h1 { max-width: none; font-size: clamp(2.35rem, 15vw, 3.6rem); } .stats-grid, .floating-panels, .pillar-grid, .support-grid, .catalog-grid, .skill-card-grid { grid-template-columns: 1fr; } .media-copy, .media-card-copy { inset: 18px 18px auto; } body::before, .page-glow { display: none; } .site-header { backdrop-filter: blur(10px); } .background-video, html.bg-anim-off .background-video-shell { transform: none; } .media-frame, .media-card { min-height: 360px; } .class-detail-hero { grid-template-columns: 1fr; } .class-video-frame { max-width: none; justify-self: stretch; } .cinema-frame { min-height: 220px; border-radius: 22px; } .cinema-overlay-nav { inset: auto 12px 12px; } .cinema-links { grid-template-columns: 1fr 1fr; } .cinema-link { padding: 10px 14px; border-radius: 999px; } .class-image-wrap, .class-image-wrap img { min-height: 210px; } .download-card, .support-card, .detail-panel, .skill-preview-card { padding: 20px; } .catalog-card-media, .catalog-card-media img { min-height: 240px; } .progression-table-wrap { overflow-x: auto; } .footer-inner { flex-direction: column; align-items: flex-start; padding-bottom: 22px; } } /* Per-class accent colours. Moved here from inline style="--accent: …" so the Content-Security-Policy can drop style-src 'unsafe-inline'. Values mirror CLASS_META in wiki_repository.py. The bare [data-accent] rule is a safe fallback for any future/unknown slug. */ [data-accent] { --accent: var(--gold); } [data-accent="warrior"] { --accent: #ffa657; } [data-accent="ranger"] { --accent: #3fb950; } [data-accent="assassin"] { --accent: #ff7b72; } [data-accent="mage"] { --accent: #7ee787; } [data-accent="crafter"] { --accent: #58a6ff; } [data-accent="bard"] { --accent: #ffd166; } [data-accent="hunter"] { --accent: #8fd3ff; } /* Branded error pages (404 / 500). */ .error-page { position: relative; z-index: 1; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; } .error-card { max-width: 560px; text-align: center; background: var(--surface, rgba(20, 22, 28, 0.72)); border: 1px solid var(--border, rgba(212, 165, 116, 0.25)); border-radius: 18px; padding: 48px 36px; backdrop-filter: blur(8px); } .error-code { margin: 0 0 8px; font-size: 64px; font-weight: 700; letter-spacing: 4px; color: var(--gold); } .error-text { margin: 12px 0; } .error-text-muted { opacity: 0.7; } .error-card .button { margin-top: 20px; }