/* ============================================================ AI Young Lions — shared styles Theme system: color variables swap per route via .theme-* on ============================================================ */ :root { --bg: #4A1581; --fg: #E8B645; --fg-soft: color-mix(in oklab, var(--fg) 60%, transparent); --fg-line: color-mix(in oklab, var(--fg) 22%, transparent); --display: "Times New Roman", "Times", "Georgia", "DM Serif Display", serif; --sans: "Helvetica Neue", "Inter", system-ui, -apple-system, sans-serif; --mono: "SF Mono", "JetBrains Mono", Menlo, Monaco, "Liberation Mono", "Courier New", monospace; } /* Per-route themes — bg + fg pairs designed independently for each section */ .theme-home { --bg: #4A1581; --fg: #E8B645; } /* brand: purple × saffron */ .theme-programme { --bg: #F2EAD3; --fg: #14140F; } /* warm cream × deep ink */ .theme-evening { --bg: #0B0B0B; --fg: #FF3D3D; } /* near-black × signal red */ .theme-brands { --bg: #E8FF2A; --fg: #1A2018; } /* electric lemon × dark earth */ .theme-jury { --bg: #003931; --fg: #FF8A60; } /* deep teal × warm coral */ .theme-prizes { --bg: #FBF7EE; --fg: #BC0028; } /* off-white × deep crimson */ .theme-rsvp { --bg: #1D08C0; --fg: #FFE34A; } /* electric blue × pale yellow */ /* Recompute soft/line tokens per theme */ .theme-home, .theme-programme, .theme-evening, .theme-brands, .theme-jury, .theme-prizes, .theme-rsvp { --fg-soft: color-mix(in oklab, var(--fg) 60%, transparent); --fg-line: color-mix(in oklab, var(--fg) 22%, transparent); } /* ============================ reset ============================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } body { background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 16px; line-height: 1.5; min-height: 100dvh; overflow-x: hidden; } /* ============================ frame ============================ */ .frame { position: relative; display: flex; flex-direction: column; padding: 28px; min-height: 100dvh; background: var(--bg); isolation: isolate; overflow: hidden; } .frame::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in oklab, var(--bg) 80%, transparent), transparent 58%), linear-gradient(0deg, color-mix(in oklab, var(--bg) 72%, transparent), transparent 44%), color-mix(in oklab, var(--bg) 18%, transparent); pointer-events: none; } .hero-video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: grayscale(1) contrast(1.24) saturate(1.35); mix-blend-mode: luminosity; pointer-events: none; transition: opacity 700ms ease; } .hero-video.is-ready { opacity: 0.52; } .hero-control { position: absolute; bottom: 22px; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; color: var(--fg); background: color-mix(in oklab, var(--bg) 78%, transparent); border: 1px solid color-mix(in oklab, var(--fg) 42%, transparent); border-radius: 50%; opacity: 0.58; backdrop-filter: blur(10px); transition: opacity 160ms ease, transform 160ms ease, background 160ms ease; } .channel-button { right: 22px; } .audio-button { right: 78px; } .hero-control:hover, .hero-control:focus-visible { opacity: 1; transform: translateY(-1px); background: color-mix(in oklab, var(--bg) 58%, transparent); } .hero-control:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; } .hero-control svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .head, .hero { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .hero-video, .hero-control { display: none; } } @media (min-width: 720px) { .frame { padding: 36px; } } /* ============================ header ============================ */ .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; } .brand { display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0; } .brand-mark { width: 64px; height: 64px; flex-shrink: 0; } .brand-popcorn { object-fit: contain; filter: invert(78%) sepia(57%) saturate(576%) hue-rotate(358deg) brightness(95%) contrast(91%); } @media (min-width: 720px) { .brand-mark { width: 96px; height: 96px; } } @media (min-width: 1200px) { .brand-mark { width: 124px; height: 124px; } } .brand-text { display: none; } @media (min-width: 720px) { .brand-text { display: block; line-height: 1; } .brand-text strong { display: block; font-family: var(--mono); font-size: 14px; letter-spacing: 0.02em; font-weight: 500; text-transform: lowercase; } .brand-text small { display: block; font-family: var(--mono); font-size: 11px; opacity: 0.7; margin-top: 4px; } } .nav { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; min-width: 240px; } @media (min-width: 720px) { .nav { min-width: 320px; gap: 22px; } } .nav-label { font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; text-transform: lowercase; opacity: 0.85; } .nav-list { list-style: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-family: var(--display); font-weight: 400; font-size: clamp(28px, 4.6vw, 56px); line-height: 1; letter-spacing: -0.045em; font-style: italic; } .nav-list li a { display: block; padding: 4px 0; opacity: 0.72; transition: opacity 0.18s ease; } .nav-list:hover li a { opacity: 0.42; } .nav-list li a:hover { opacity: 1; } .nav-list li[aria-current="page"] a { opacity: 1; } /* ============================ hero ============================ */ .hero { display: flex; flex-direction: column; justify-content: flex-end; flex: 1; min-height: 0; padding-top: 40px; padding-bottom: clamp(34px, 5vh, 58px); } .hero .eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; text-transform: lowercase; margin-bottom: 18px; } @media (min-width: 720px) { .hero .eyebrow { font-size: 16px; margin-bottom: 22px; } } .hero h1 { font-family: var(--display); font-weight: 400; font-style: italic; font-size: clamp(44px, 8vw, 112px); line-height: 0.9; letter-spacing: -0.055em; max-width: min(1040px, 78vw); text-wrap: balance; } .hero h1 em { font-style: italic; font-weight: 400; } .hero h1 .reg { font-style: normal; } .hero h1 .meta { display: block; margin-top: 18px; font-family: var(--mono); font-style: normal; font-weight: 400; font-size: clamp(13px, 1.4vw, 18px); letter-spacing: 0.04em; text-transform: lowercase; opacity: 0.82; } @media (max-height: 820px) and (min-width: 720px) { .hero h1 { font-size: clamp(42px, 7vw, 92px); } .hero h1 .meta { margin-top: 14px; font-size: 13px; } } @media (max-width: 719px) { .hero { padding-top: 32px; padding-bottom: 28px; } .hero h1 { max-width: 100%; } } /* ============================ section ============================ */ .section { padding: 80px 28px; border-top: 1px solid var(--fg-line); } @media (min-width: 720px) { .section { padding: 96px 36px; } } .section-marker { font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; text-transform: lowercase; margin-bottom: 32px; opacity: 0.9; } @media (min-width: 720px) { .section-marker { font-size: 16px; margin-bottom: 44px; } } .section h2 { font-family: var(--display); font-weight: 400; font-size: clamp(36px, 6vw, 88px); line-height: 0.94; letter-spacing: -0.04em; max-width: 1100px; text-wrap: balance; margin-bottom: 32px; } .section h2 em { font-style: italic; } .section .lede { font-family: var(--display); font-weight: 400; font-style: italic; font-size: clamp(20px, 2.6vw, 30px); line-height: 1.22; letter-spacing: -0.02em; max-width: 820px; margin-bottom: 24px; } .section .body { max-width: 720px; font-size: 16px; line-height: 1.55; } .section .body p + p { margin-top: 14px; } /* ============================ list rows ============================ */ .rows { list-style: none; border-top: 1px solid var(--fg-line); margin-top: 24px; } .rows li { display: grid; grid-template-columns: 96px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--fg-line); align-items: baseline; } @media (min-width: 720px) { .rows li { grid-template-columns: 140px 1fr; gap: 32px; padding: 24px 0; } } .rows .key { font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; text-transform: lowercase; opacity: 0.75; } .rows .val { font-family: var(--display); font-size: clamp(22px, 3.2vw, 36px); line-height: 1.05; letter-spacing: -0.025em; } .rows .val em { font-style: italic; } .rows .val small { display: block; font-family: var(--mono); font-style: normal; font-size: 13px; letter-spacing: 0.02em; text-transform: lowercase; opacity: 0.72; margin-top: 6px; max-width: 600px; } /* ============================ buttons ============================ */ .button-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; } .btn { display: inline-block; padding: 18px 28px; font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em; text-transform: lowercase; border: 1px solid var(--fg); transition: all 0.18s ease; } .btn-solid { background: var(--fg); color: var(--bg); } .btn-solid:hover { background: transparent; color: var(--fg); } .btn-ghost { background: transparent; } .btn-ghost:hover { background: var(--fg); color: var(--bg); } /* ============================ pill grid ============================ */ .pill-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 24px; } @media (min-width: 720px) { .pill-grid { grid-template-columns: repeat(4, 1fr); } } .pill { aspect-ratio: 5 / 3; border: 1px solid var(--fg-line); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: lowercase; opacity: 0.7; border-radius: 12px; } .pill::before { content: "["; padding-right: 3px; opacity: 0.55; } .pill::after { content: "]"; padding-left: 3px; opacity: 0.55; } .section .note { margin-top: 18px; font-family: var(--mono); font-size: 13px; opacity: 0.65; } /* ============================ q&a ============================ */ .qa { list-style: none; border-top: 1px solid var(--fg-line); margin-top: 24px; } .qa li { padding: 24px 0; border-bottom: 1px solid var(--fg-line); } .qa .q { font-family: var(--display); font-size: clamp(20px, 2.4vw, 26px); line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 8px; } .qa .q::before { content: "q. "; opacity: 0.5; font-family: var(--mono); font-size: 0.62em; vertical-align: 0.18em; } .qa .a { font-family: var(--sans); font-size: 16px; line-height: 1.55; max-width: 760px; opacity: 0.92; } .qa .a::before { content: "a. "; opacity: 0.5; font-family: var(--mono); font-size: 0.85em; } /* ============================ rsvp big block ============================ */ .rsvp-zone { padding: 120px 28px 140px; text-align: center; border-top: 1px solid var(--fg-line); border-bottom: 1px solid var(--fg-line); } @media (min-width: 720px) { .rsvp-zone { padding: 160px 36px 180px; } } .rsvp-zone h2 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(56px, 12vw, 168px); line-height: 0.86; letter-spacing: -0.06em; margin-bottom: 28px; text-wrap: balance; } .rsvp-zone p { max-width: 540px; margin: 0 auto 36px; font-size: 16px; line-height: 1.55; opacity: 0.88; } .rsvp-zone .button-row { justify-content: center; } /* ============================ footer ============================ */ .footer { position: relative; margin-top: auto; padding-top: 96px; overflow: hidden; cursor: crosshair; } .ascii-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } .footer-content { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding: 64px 28px 24px; } @media (min-width: 720px) { .footer-content { flex-wrap: nowrap; padding: 120px 36px 28px; } } .footer-title { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(48px, 12vw, 184px); line-height: 0.84; letter-spacing: -0.06em; color: var(--fg); text-wrap: balance; } .footer-title .year { display: block; font-family: var(--mono); font-style: normal; font-size: clamp(11px, 1vw, 14px); letter-spacing: 0.04em; margin-top: 18px; text-transform: lowercase; color: var(--bg); opacity: 0.78; } .signoff { margin-top: 12px; padding: 18px 28px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; text-align: center; opacity: 0.66; position: relative; z-index: 1; } /* ============================ ticker ============================ */ .ticker { overflow: hidden; white-space: nowrap; padding: 18px 0; font-family: var(--mono); font-size: 14px; letter-spacing: 0.06em; text-transform: lowercase; border-top: 1px solid var(--fg-line); border-bottom: 1px solid var(--fg-line); } .ticker-track { display: inline-block; animation: ticker-scroll 28s linear infinite; padding-left: 100%; } .ticker-track span { margin-right: 48px; opacity: 0.88; } .ticker-track span::before { content: "// "; opacity: 0.5; } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } } /* ============================ utilities ============================ */ .spacer-sm { height: 16px; } .spacer-md { height: 36px; } .spacer-lg { height: 80px; } .brackets::before { content: "["; opacity: 0.5; padding-right: 2px; } .brackets::after { content: "]"; opacity: 0.5; padding-left: 2px; } @media (max-width: 720px) { .head { flex-direction: column; } .nav { align-items: flex-start; min-width: 0; } .nav-list { align-items: flex-start; } }