/* ========================================================================== HELALIA LANGUAGE SCHOOL — "Daylight Cinema" Public site stylesheet. Pages are generated by build_pages.py. The idea: first light on a cream tower. Cream is air, not paper. Navy is shade you step into. Gold is sunlight catching an edge — a drawn line, a glint, a warm hover — never chrome. MOTION SYSTEM (all of it dies under prefers-reduced-motion) [data-rise] lifts + fades in when it enters the frame, staggered by --i [data-draw] a gold hairline draws itself left to right [data-split] display headings lift word by word out of a hidden line .btn takes a radial sunlight glow under the pointer .hero-glint a thin gold sun-line travels with --scroll header glass-blurs and condenses once you leave the hero .roomwipe a navy panel walks up between pages: courtyard to classroom Each page is a different room, keyed off . ========================================================================== */ /* ---------- tokens ---------- */ :root { --navy: #0a1b3d; --navy-deep: #06122b; --navy-soft: #132a58; --navy-line: rgba(255, 255, 255, .13); --gold: #d4a017; --gold-lit: #f0c44a; --gold-ink: #7a5a06; /* the only gold safe as small text on cream */ --gold-glass: rgba(212, 160, 23, .16); --cream: #f6f0e4; --cream-hi: #fdfaf3; --cream-lo: #ece2cf; --terracotta: #b8563a; /* the building wings — washes only, never type */ --ink: #0d1626; --muted: #5b6577; --line: rgba(10, 27, 61, .14); --hair: rgba(10, 27, 61, .09); --f-display: "Newsreader", "Times New Roman", serif; --f-ui: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --f-ar: "Cairo", "Noto Naskh Arabic", system-ui, sans-serif; --ease: cubic-bezier(.22, .61, .24, 1); --ease-o: cubic-bezier(.16, .84, .44, 1); --t1: .45s; --t2: .85s; --headh: 76px; --headstrip: 38px; --headfull: calc(var(--headh) + var(--headstrip)); --gutter: clamp(20px, 4vw, 40px); --band: clamp(72px, 9vw, 132px); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--headfull) + 16px); } body { margin: 0; font-family: var(--f-ui); font-size: 17px; line-height: 1.62; color: var(--ink); background: var(--cream); overflow-x: hidden; -webkit-font-smoothing: antialiased; } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } p { margin: 0 0 1em; } :focus-visible { outline: 2px solid var(--gold-lit); outline-offset: 3px; } .wrap { width: min(1240px, 100% - (var(--gutter) * 2)); margin-inline: auto; } .wrap-tight { width: min(840px, 100% - (var(--gutter) * 2)); margin-inline: auto; } .wrap-wide { width: min(1480px, 100% - (var(--gutter) * 2)); margin-inline: auto; } /* ---------- type ---------- */ h1, h2, h3, .display { font-family: var(--f-display); font-weight: 300; line-height: 1.04; letter-spacing: -.022em; margin: 0 0 .5em; color: var(--navy); text-wrap: balance; } h1 { font-size: clamp(40px, 6.4vw, 92px); } h2 { font-size: clamp(31px, 4.2vw, 60px); } h3 { font-size: clamp(21px, 2vw, 28px); font-weight: 400; } .lead { font-size: clamp(17px, 1.35vw, 21px); color: var(--muted); max-width: 54ch; line-height: 1.6; } .label { display: flex; align-items: center; gap: 12px; font-family: var(--f-ui); font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 18px; } .label::before { content: ""; width: 30px; height: 1px; background: var(--gold); flex: 0 0 auto; } .label--light { color: var(--gold-lit); } .ar { font-family: var(--f-ar); direction: rtl; font-weight: 600; letter-spacing: 0; } /* ---------- motion primitives ---------- */ html.js [data-rise] { opacity: 0; transform: translateY(28px); will-change: opacity, transform; } html.js [data-rise].is-in { opacity: 1; transform: none; transition: opacity var(--t2) var(--ease) calc(var(--i, 0) * 85ms), transform 1s var(--ease) calc(var(--i, 0) * 85ms); } html.js [data-draw] { transform: scaleX(0); transform-origin: left center; } html.js [data-draw].is-in { transform: scaleX(1); transition: transform 1.05s var(--ease) calc(var(--i, 0) * 90ms); } .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-bottom: -.14em; } html.js .w > i { display: inline-block; font-style: inherit; transform: translateY(108%); } html.js [data-split].is-in .w > i { transform: none; transition: transform 1s var(--ease) calc(var(--wi, 0) * 52ms); } /* ---------- buttons: warm like sunlight ---------- */ .btn { --mx: 50%; --my: 50%; position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 26px; border: 1px solid transparent; cursor: pointer; font-family: var(--f-ui); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; transition: color var(--t1) var(--ease), background var(--t1) var(--ease), border-color var(--t1) var(--ease), transform var(--t1) var(--ease); } .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; background: radial-gradient(150px 150px at var(--mx) var(--my), rgba(255, 245, 214, .85), transparent 70%); transition: opacity .5s var(--ease); } .btn:hover::before, .btn:focus-visible::before { opacity: 1; } .btn:active { transform: translateY(1px); } .btn-sun { background: var(--gold); color: var(--navy); } .btn-sun:hover { background: var(--gold-lit); } .btn-navy { background: var(--navy); color: var(--cream); } .btn-navy::before { background: radial-gradient(150px 150px at var(--mx) var(--my), rgba(212,160,23,.6), transparent 70%); } .btn-line { background: transparent; border-color: rgba(10,27,61,.35); color: var(--navy); } .btn-line:hover { border-color: var(--gold); } .btn-line--light { border-color: rgba(255,255,255,.55); color: #fff; } .btn-line--light:hover { border-color: var(--gold-lit); color: #fff; } .ulink { position: relative; display: inline-block; font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; padding-bottom: 5px; color: var(--gold-ink); } .ulink::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(.25); transform-origin: left; transition: transform .6s var(--ease); } .ulink:hover::after, .ulink:focus-visible::after { transform: scaleX(1); } .skip { position: fixed; left: 16px; top: -90px; z-index: 200; background: var(--gold); color: var(--navy); padding: 12px 18px; font-weight: 700; transition: top .3s var(--ease); } .skip:focus { top: 16px; } /* ---------- header ---------- */ header.site { position: fixed; inset: 0 0 auto; z-index: 90; color: var(--navy); transition: background .5s var(--ease), box-shadow .5s var(--ease), color .5s var(--ease); } header.site::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-glass) 18%, var(--gold-glass) 82%, transparent); opacity: 0; transition: opacity .5s var(--ease); } .head-strip { display: flex; align-items: center; min-height: 38px; font-size: 12.5px; letter-spacing: .05em; color: rgba(255, 255, 255, .82); background: var(--navy-deep); overflow: hidden; transition: min-height .45s var(--ease), opacity .35s var(--ease); } .head-strip .wrap { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; } .head-strip a:hover { color: var(--gold-lit); } .head-strip .ar { color: var(--gold-lit); font-size: 14px; } .head-strip .dot { opacity: .45; margin: 0 9px; } .head-strip .strip-mail, .head-strip .strip-addr { white-space: nowrap; } .head-bar { transition: background .5s var(--ease); } .navrow { display: flex; align-items: center; gap: 20px; min-height: var(--headh); transition: min-height .45s var(--ease); } .brand { position: relative; z-index: 2; display: grid; flex: 0 0 auto; align-items: center; } .brand img { grid-area: 1 / 1; height: 52px; width: auto; transition: height .45s var(--ease), opacity .4s var(--ease); } .brand .brand-dark { opacity: 0; } /* navy wordmark — for the cream glass header */ .brand .brand-light { opacity: 1; } /* white wordmark — over the film and the navy plate */ nav.primary { display: flex; gap: 2px; margin-left: auto; } nav.primary a { position: relative; padding: 10px 13px; font-size: 13.5px; font-weight: 600; letter-spacing: .02em; transition: color var(--t1) var(--ease); } nav.primary a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 1.5px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); } nav.primary a:hover::after, nav.primary a:focus-visible::after, nav.primary a.is-active::after { transform: scaleX(1); } .head-cta { flex: 0 0 auto; padding: 12px 22px; } .nav-ar { display: none; } .menu-toggle { display: none; position: relative; z-index: 2; margin-left: auto; width: 46px; height: 46px; background: transparent; border: 1px solid currentColor; cursor: pointer; position: relative; color: inherit; } .menu-toggle span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: currentColor; transition: transform .4s var(--ease), opacity .3s var(--ease); } .menu-toggle span:nth-child(1) { top: 17px; } .menu-toggle span:nth-child(2) { top: 22.5px; } .menu-toggle span:nth-child(3) { top: 28px; } body.nav-open .menu-toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } body.nav-open .menu-toggle span:nth-child(2) { opacity: 0; } body.nav-open .menu-toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } /* home: the header floats on the film */ body[data-room="home"] header.site { color: #fff; } body[data-room="home"] nav.primary a.is-active { color: var(--gold-lit); } body[data-room="home"] .head-cta { background: var(--gold); color: var(--navy); } body[data-room="home"] .head-strip { background: transparent; } /* leave the hero and the glass forms */ body[data-room] header.site.is-lifted { background: rgba(246, 240, 228, .84); backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25); box-shadow: 0 10px 40px rgba(10, 27, 61, .1); color: var(--navy); } body[data-room] header.site.is-lifted::after { opacity: 1; } body[data-room] header.site.is-lifted .head-strip { min-height: 0; opacity: 0; } body[data-room] header.site.is-lifted .navrow { min-height: 62px; } body[data-room] header.site.is-lifted .brand img { height: 42px; } body[data-room] header.site.is-lifted .brand-dark { opacity: 1; } body[data-room] header.site.is-lifted .brand-light { opacity: 0; } body[data-room] header.site.is-lifted nav.primary a.is-active { color: var(--gold-ink); } /* inner pages: navy plate */ body:not([data-room="home"]) header.site { background: rgba(6, 18, 43, .97); color: #fff; } body:not([data-room="home"]) nav.primary a.is-active { color: var(--gold-lit); } body:not([data-room="home"]) .head-cta { background: var(--gold); color: var(--navy); } /* ---------- page transition ---------- */ .roomwipe { position: fixed; inset: 0; z-index: 300; pointer-events: none; transform: translateY(100%); background: var(--navy-deep); border-top: 2px solid var(--gold); } body.is-leaving .roomwipe { transform: translateY(0); transition: transform .5s var(--ease-o); } html.js main { animation: room-in .8s var(--ease) both; } @keyframes room-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* ========================================================================== HOME — light, campus, welcome ========================================================================== */ .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--navy-deep); color: #fff; } .hero-stage { position: absolute; inset: 0; } .hero-video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; /* keeps the tower and its HLS emblem in frame */ } /* Deep navy at the top and along the left; cream wash at the feet so the film dissolves into the welcome section — no hard bar between them. */ .hero-veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--cream) 0%, rgba(246, 240, 228, .96) 12%, rgba(246, 240, 228, .42) 22%, rgba(6, 18, 43, .58) 38%, rgba(6, 18, 43, .22) 52%, rgba(6, 18, 43, .02) 68%, rgba(6, 18, 43, .46) 100%), linear-gradient(to right, rgba(6, 18, 43, .62), rgba(6, 18, 43, .05) 52%, transparent 70%); } /* the sun-glint: a thin gold line riding the right edge, moved by scroll */ .hero-glint { position: absolute; top: -30%; right: 6%; width: 44vw; height: 160%; pointer-events: none; transform: rotate(15deg) translate3d(0, calc(var(--scroll, 0) * -110px), 0); background: linear-gradient(180deg, transparent, rgba(240, 196, 74, .55) 45%, transparent), radial-gradient(38% 22% at 78% 26%, rgba(255, 232, 168, .3), transparent 70%); background-size: 1.5px 100%, 100% 100%; background-position: 72% 0, 0 0; background-repeat: no-repeat; opacity: .9; } .hero-copy { position: relative; z-index: 3; padding: 0 0 clamp(140px, 24vh, 220px); } .hero .label { color: var(--gold-lit); } .hero .label::before { background: var(--gold-lit); } .hero-mark { margin: 8px 0 4px; max-width: none; font-size: 0; line-height: 0; text-shadow: none; } .hero-mark img { display: block; width: clamp(152px, 26vw, 268px); height: auto; filter: drop-shadow(0 12px 36px rgba(6, 18, 43, .55)); } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; } .scroll-cue { position: absolute; z-index: 3; right: var(--gutter); bottom: clamp(140px, 24vh, 220px); display: flex; align-items: center; gap: 12px; writing-mode: vertical-rl; font-size: 11px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: rgba(255, 255, 255, .78); padding: 6px; } .scroll-cue i { display: block; width: 1px; height: 64px; background: rgba(255, 255, 255, .35); position: relative; overflow: hidden; } .scroll-cue i::after { content: ""; position: absolute; inset: 0 0 auto; height: 22px; background: var(--gold-lit); animation: cue 2.6s var(--ease) infinite; } @keyframes cue { 0% { transform: translateY(-24px); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateY(64px); opacity: 0; } } .scroll-cue:hover { color: #fff; } /* ---------- bands ---------- */ .band { position: relative; padding: var(--band) 0; } .band--sun::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 72% at 88% -12%, rgba(240, 196, 74, .22), transparent 62%), radial-gradient(90% 62% at -12% 26%, rgba(184, 86, 58, .07), transparent 62%); } .band--sun > * { position: relative; } #welcome { margin-top: -22vh; padding-top: calc(var(--band) + 6vh); z-index: 4; } .band--paper { background: var(--cream-hi); } .band--shade { background: var(--navy); color: rgba(255, 255, 255, .82); } .band--shade h1, .band--shade h2, .band--shade h3 { color: #fff; } .band--shade .lead { color: rgba(255, 255, 255, .7); } .band--shade::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 50% at 12% 0%, rgba(240, 196, 74, .14), transparent 62%); } .band--shade > * { position: relative; } .band--tight { padding: clamp(48px, 6vw, 84px) 0; } .duo { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 76px); align-items: center; } .duo--wide { grid-template-columns: 1fr 1.15fr; align-items: start; } /* two portrait plates, offset, with a gold frame line */ .plate-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .plate { position: relative; margin: 0; aspect-ratio: 335 / 405; overflow: hidden; background: var(--cream-lo); } .plate img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .plate:hover img { transform: scale(1.045); } .plate-pair .plate:nth-child(2) { margin-top: clamp(20px, 5vw, 56px); } .plate-frame { position: relative; } .plate-frame::after { content: ""; position: absolute; inset: auto -14px -14px 14px; height: 60%; border: 1px solid var(--gold); z-index: -1; } .figures { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 44px; border-top: 1px solid var(--line); } .figures div { padding: 22px 18px 4px 0; } .figures b { display: block; font-family: var(--f-display); font-weight: 300; font-size: clamp(30px, 3.4vw, 44px); color: var(--navy); line-height: 1; margin-bottom: 8px; } .figures span { font-size: 13px; color: var(--muted); } /* three doors */ .doors { display: grid; grid-template-columns: repeat(3, 1fr); } .door + .door { border-left: 1px solid var(--line); } .door { position: relative; background: var(--cream-hi); padding: clamp(28px, 3vw, 44px) clamp(24px, 2.4vw, 34px) clamp(36px, 4vw, 52px); overflow: hidden; transition: background .5s var(--ease); } .door::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); } .door:hover { background: #fff; } .door:hover::after, .door:focus-within::after { transform: scaleX(1); } .door .n { font-family: var(--f-display); font-size: 13px; letter-spacing: .3em; color: var(--gold-ink); display: block; margin-bottom: 26px; } .door h3 { margin: 0 0 12px; } .door p { color: var(--muted); font-size: 15.5px; margin: 0; } /* the school rules, in the shade */ .rules { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(28px, 4vw, 64px); } .rule { display: grid; grid-template-columns: 58px 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid var(--navy-line); } .rule:last-child { border-bottom: 1px solid var(--navy-line); } .rule .n { font-family: var(--f-display); font-size: 26px; color: var(--gold); line-height: 1.2; } .rule h3 { margin: 0 0 6px; font-size: 22px; } .rule p { margin: 0; font-size: 15.5px; color: rgba(255, 255, 255, .68); } /* a full-bleed campus moment */ .moment { position: relative; overflow: hidden; } .moment img { width: 100%; height: clamp(320px, 52vh, 560px); object-fit: cover; } .moment figcaption { position: absolute; inset: auto 0 0; padding: clamp(24px, 4vw, 48px) 0; background: linear-gradient(transparent, rgba(6, 18, 43, .88)); color: #fff; } .moment figcaption p { margin: 0; max-width: 46ch; color: rgba(255, 255, 255, .8); } .moment figcaption .label { color: var(--gold-lit); } .moment figcaption .label::before { background: var(--gold-lit); } /* contact sheet — proofs sit on a ruled light-table, drifting to the right */ .sheet-bleed { --sheet-gap: 28px; --grid: 24px; --film: 22px; position: relative; overflow: hidden; margin-top: 34px; background: radial-gradient(80% 70% at 50% 40%, rgba(253, 250, 243, .35), transparent 65%), #e4d8c2; border-block: 1px solid rgba(10, 27, 61, .22); box-shadow: inset 0 0 0 1px rgba(240, 196, 74, .22); } /* punched film rails — the photos ride between them */ .sheet-bleed::before, .sheet-bleed::after { content: ""; position: absolute; left: 0; right: 0; height: var(--film); z-index: 3; pointer-events: none; background: radial-gradient(circle, var(--cream) 3.5px, transparent 4px) 12px 50% / 22px 22px repeat-x, linear-gradient(var(--navy), var(--navy-soft)); } .sheet-bleed::before { top: 0; } .sheet-bleed::after { bottom: 0; } .sheet { position: relative; overflow: hidden; padding: calc(var(--film) + 22px) 0; } /* the grid lives UNDER the photographs — they slide over it */ .sheet::before { content: ""; position: absolute; inset: var(--film) 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(212, 160, 23, .85) 1.15px, transparent 1.35px), linear-gradient(to right, rgba(10, 27, 61, .2) 1px, transparent 1px), linear-gradient(to bottom, rgba(10, 27, 61, .2) 1px, transparent 1px), linear-gradient(to right, rgba(184, 86, 58, .38) 1px, transparent 1px), linear-gradient(to bottom, rgba(212, 160, 23, .55) 1px, transparent 1px); background-size: calc(var(--grid) * 5) calc(var(--grid) * 5), var(--grid) var(--grid), var(--grid) var(--grid), calc(var(--grid) * 5) calc(var(--grid) * 5), calc(var(--grid) * 5) calc(var(--grid) * 5); background-position: 0 0; mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent); } .sheet-track { position: relative; z-index: 1; display: flex; gap: var(--sheet-gap); width: max-content; padding: 0 28px; will-change: transform; } .sheet.is-live .sheet-track { animation: sheet-drift 48s linear infinite; } .sheet.is-live:hover .sheet-track, .sheet.is-live:focus-within .sheet-track, .sheet.is-offstage .sheet-track, body:has(.lightbox.show) .sheet.is-live .sheet-track { animation-play-state: paused; } @keyframes sheet-drift { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } } .sheet a { position: relative; display: block; flex: 0 0 min(236px, 58vw); overflow: hidden; padding: 8px; background: rgba(253, 250, 243, .78); border: 1px solid rgba(10, 27, 61, .14); box-shadow: 0 0 0 1px rgba(240, 196, 74, .2), 0 14px 32px rgba(6, 18, 43, .14); backdrop-filter: blur(2px); } .sheet img { display: block; width: 100%; aspect-ratio: 335 / 405; height: auto; object-fit: cover; background: var(--cream-lo); transition: transform 1s var(--ease), filter .6s var(--ease); } .sheet a::after { content: ""; position: absolute; inset: 8px; background: linear-gradient(transparent 55%, rgba(6, 18, 43, .5)); opacity: 0; pointer-events: none; transition: opacity .5s var(--ease); } .sheet a:hover img, .sheet a:focus-visible img { transform: scale(1.04); } .sheet a:hover::after, .sheet a:focus-visible::after { opacity: 1; } .sheet a:hover, .sheet a:focus-visible { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-lit), 0 18px 40px rgba(6, 18, 43, .2); } /* ---------- news tickets (home + news room) ---------- */ .stubs { display: grid; gap: 14px; } .stub { --stub-gap: clamp(18px, 3vw, 34px); position: relative; display: grid; grid-template-columns: 190px 1fr auto; gap: var(--stub-gap); align-items: center; background: var(--cream-hi); border: 1px solid var(--hair); padding: 14px; transition: transform .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease); } .stub::before { content: ""; position: absolute; left: calc(204px + var(--stub-gap) / 2); top: 14px; bottom: 14px; width: 1px; border-left: 1px dashed rgba(10, 27, 61, .22); } .stub:hover { transform: translateX(6px); border-color: var(--gold); background: #fff; } .stub img { width: 190px; height: 128px; object-fit: cover; } .stub time { display: block; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 8px; } .stub h3 { margin: 0 0 6px; } .stub p { margin: 0; color: var(--muted); font-size: 15.5px; } .stub .go { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--navy); font-size: 18px; transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); } .stub:hover .go { background: var(--gold); border-color: var(--gold); } /* a calm closing invitation */ .invite { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: clamp(32px, 4vw, 52px) 0 0; border-top: 1px solid var(--line); margin-top: clamp(40px, 5vw, 64px); } .invite h3 { margin: 0; max-width: 22ch; } /* ========================================================================== INNER PAGE MASTHEAD — every room opens the same way, in its own light ========================================================================== */ .masthead { position: relative; overflow: hidden; background: var(--navy); color: #fff; padding: calc(var(--headfull) + clamp(56px, 8vw, 110px)) 0 clamp(56px, 7vw, 96px); } .masthead::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 60% at 88% -10%, rgba(240, 196, 74, .3), transparent 62%), radial-gradient(60% 50% at 4% 108%, rgba(184, 86, 58, .2), transparent 60%); } .masthead::after { content: ""; position: absolute; right: -6%; top: -40%; width: 30vw; height: 180%; transform: rotate(16deg); pointer-events: none; background: linear-gradient(90deg, transparent, rgba(240, 196, 74, .5), transparent); background-size: 1.5px 100%; background-repeat: no-repeat; background-position: 60% 0; } .masthead > * { position: relative; z-index: 2; } .masthead h1 { color: #fff; margin: 0 0 16px; } .masthead .lead { color: rgba(255, 255, 255, .74); } .crumbs { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin: 0 0 20px; } .crumbs a:hover { color: var(--gold-lit); } .crumbs .sep { margin: 0 8px; color: var(--gold); } .masthead-ar { font-family: var(--f-ar); direction: rtl; color: var(--gold-lit); font-size: 18px; margin: 0 0 22px; width: fit-content; } /* ========================================================================== ABOUT — 2008 to today as a rising path ========================================================================== */ .path { position: relative; padding: 8px 0 0; } .path-line { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .path-line path { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 2.2s var(--ease); } .path.is-in .path-line path { stroke-dashoffset: 0; } .steps-up { position: relative; z-index: 2; display: grid; gap: clamp(12px, 2vw, 26px); } .step-up { background: var(--cream-hi); border: 1px solid var(--hair); border-left: 2px solid var(--gold); padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 34px); max-width: 560px; transition: transform .6s var(--ease), box-shadow .6s var(--ease); } .step-up:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(10, 27, 61, .1); } .step-up:nth-child(2) { margin-left: clamp(0px, 10vw, 140px); } .step-up:nth-child(3) { margin-left: clamp(0px, 20vw, 280px); } .step-up .yr { font-family: var(--f-display); font-size: clamp(30px, 3.6vw, 46px); color: var(--gold-ink); line-height: 1; display: block; margin-bottom: 12px; } .step-up h3 { margin: 0 0 8px; font-size: 22px; } .step-up p { margin: 0; color: var(--muted); font-size: 15.5px; } /* the deliberately empty faculty wall */ .reserved { border: 1px dashed rgba(10, 27, 61, .28); padding: clamp(28px, 4vw, 48px); background: repeating-linear-gradient(135deg, rgba(212, 160, 23, .05) 0 10px, transparent 10px 20px); } .reserved h3 { margin: 0 0 10px; } .reserved p { color: var(--muted); } .reserved p:last-of-type { margin-bottom: 22px; } /* ========================================================================== NEWS — editorial, ticket / magazine ========================================================================== */ .dateline { display: flex; align-items: center; gap: 14px; border-top: 2px solid var(--navy); border-bottom: 1px solid var(--line); padding: 12px 0; margin-bottom: clamp(28px, 4vw, 48px); font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--navy); flex-wrap: wrap; } .dateline .sp { flex: 1 1 auto; } .dateline .ar { letter-spacing: 0; text-transform: none; font-size: 14px; color: var(--gold-ink); } .mag { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(24px, 3.4vw, 48px); align-items: start; } .lede { position: relative; display: block; overflow: hidden; background: var(--navy); color: #fff; } .lede img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.3s var(--ease); } .lede:hover img { transform: scale(1.04); } .lede .cap { position: absolute; inset: auto 0 0; padding: clamp(24px, 3vw, 40px); background: linear-gradient(transparent, rgba(6, 18, 43, .93) 62%); } .lede time { display: block; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-lit); margin-bottom: 10px; } .lede h2 { color: #fff; margin: 0 0 8px; font-size: clamp(28px, 3.4vw, 46px); } .lede p { margin: 0; color: rgba(255, 255, 255, .78); max-width: 46ch; } .column { display: grid; gap: 0; } .col-item { display: grid; grid-template-columns: 104px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); } .col-item:first-child { border-top: 1px solid var(--line); } .col-item img { width: 104px; height: 78px; object-fit: cover; } .col-item time { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 6px; } .col-item h3 { margin: 0 0 4px; font-size: 20px; } .col-item p { margin: 0; font-size: 14.5px; color: var(--muted); } a.col-item:hover h3 { color: var(--gold-ink); } .col-item.is-quiet { opacity: .72; } .article { width: min(720px, 100%); margin-inline: auto; } .article > p { font-size: 18.5px; line-height: 1.75; } .article > p:first-of-type { font-family: var(--f-display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 300; line-height: 1.4; color: var(--navy); } .article figure { margin: 0 0 36px; } .article figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .article figcaption { font-size: 13px; color: var(--muted); padding-top: 10px; border-top: 1px solid var(--line); margin-top: 10px; } .article-foot { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); } /* ========================================================================== EVENTS — the calendar stays a calendar ========================================================================== */ .year-map { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); margin-bottom: 34px; } .year-map article { background: var(--cream-hi); padding: clamp(22px, 2.4vw, 32px); } .year-map h3 { margin: 0 0 8px; font-size: 22px; } .year-map p { margin: 0; color: var(--muted); font-size: 15px; } .legend { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-bottom: 22px; } .legend span { display: inline-flex; align-items: center; gap: 8px; } .legend i { width: 11px; height: 11px; display: inline-block; background: var(--gold-glass); border: 1px solid var(--gold); } .legend i.navy { background: var(--navy); border-color: var(--navy); } .legend i.exam { background: var(--cream-lo); border-color: rgba(10, 27, 61, .3); } .legend i.campus { background: transparent; border-style: dashed; } .event-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; } .event-filters button { background: transparent; border: 1px solid var(--line); color: var(--navy); padding: 9px 16px; cursor: pointer; letter-spacing: .16em; text-transform: uppercase; font-size: 11px; font-weight: 700; transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); } .event-filters button:hover { border-color: var(--gold); } .event-filters button.is-on { background: var(--navy); color: var(--gold-lit); border-color: var(--navy); } .cal-box { background: var(--cream-hi); border: 1px solid var(--hair); padding: clamp(16px, 2.2vw, 28px); } .cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; } .cal-nav h2 { margin: 0; font-size: clamp(22px, 2.6vw, 34px); } .cal-nav button { width: 46px; height: 46px; background: var(--navy); color: var(--gold-lit); border: 0; cursor: pointer; font-size: 22px; line-height: 1; transition: background .4s var(--ease); } .cal-nav button:hover { background: var(--navy-soft); } .cal-jumps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .cal-jumps button { background: transparent; border: 1px solid var(--line); color: var(--navy); padding: 7px 12px; cursor: pointer; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); } .cal-jumps button:hover { border-color: var(--gold); } .cal-jumps button.is-on { background: var(--gold); color: var(--navy); border-color: var(--gold); } .cal-scroll { overflow-x: auto; overscroll-behavior-x: contain; } .cal-month { display: none; } .cal-month.is-on { display: block; } .cal { display: grid; grid-template-columns: repeat(7, minmax(96px, 1fr)); gap: 5px; min-width: 700px; } .cal b { background: var(--navy); color: var(--gold-lit); text-align: center; min-height: 36px; display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .cal > span { min-height: 78px; background: rgba(255, 255, 255, .5); border: 1px solid var(--hair); } .cal .day { min-height: 112px; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 7px; background: #fff; transition: box-shadow .45s var(--ease), background .45s var(--ease), transform .45s var(--ease); } .cal .day em { font-style: normal; font-weight: 700; font-size: 12.5px; color: var(--muted); } .cal .day.has { cursor: pointer; } .cal .day.has em { color: var(--navy); } /* gold days announce themselves when a month opens */ .cal-month.is-on .day.has { box-shadow: inset 0 0 0 1.5px var(--gold); animation: day-warm .55s var(--ease) both; animation-delay: calc(var(--d, 0) * 26ms); } @keyframes day-warm { from { box-shadow: inset 0 0 0 1.5px rgba(212, 160, 23, 0); background: #fff; } 60% { box-shadow: inset 0 0 0 1.5px var(--gold); background: #fffaea; } to { box-shadow: inset 0 0 0 1.5px var(--gold); background: #fff; } } .cal .day.has:hover { transform: translateY(-2px); background: #fffdf5; } .cal .day.is-open { background: #fff6d9; box-shadow: inset 0 0 0 2px var(--gold); } .cal .ev { display: block; font-style: normal; font-size: 10.5px; line-height: 1.3; padding: 3px 5px; background: var(--gold-glass); color: var(--navy); font-weight: 600; } .cal .ev[data-kind="holiday"] { background: var(--navy); color: var(--gold-lit); } .cal .ev[data-kind="exam"] { background: var(--cream-lo); } .cal .ev[data-kind="campus"] { background: transparent; border: 1px dashed var(--gold); } .cal .ev.is-hidden { display: none; } .cal-hint, .note-moon { font-size: 13.5px; color: var(--muted); margin-top: 16px; } .cal-detail { margin-top: 16px; padding: 18px 20px; border-left: 2px solid var(--gold); background: #fff; } .cal-detail strong { display: block; font-family: var(--f-display); font-size: 21px; font-weight: 400; color: var(--navy); } .cal-detail p { margin: 10px 0 0; color: var(--muted); font-size: 15px; } .cal-detail p b { color: var(--navy); font-weight: 700; } /* ========================================================================== NOTICES — a pin board, honest about being empty ========================================================================== */ .board { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); } .pin { position: relative; background: #fff; border: 1px solid var(--hair); padding: clamp(24px, 2.6vw, 34px) clamp(20px, 2.2vw, 28px); min-height: 210px; box-shadow: 0 14px 34px rgba(10, 27, 61, .07); transition: transform .6s var(--ease), box-shadow .6s var(--ease); } .pin::before { content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: 0 3px 6px rgba(10, 27, 61, .3); transform: translateX(-50%); } .pin:nth-child(odd) { transform: rotate(-.7deg); } .pin:nth-child(even) { transform: rotate(.6deg); } .pin:hover { transform: rotate(0deg) translateY(-5px); box-shadow: 0 24px 48px rgba(10, 27, 61, .12); } .pin .tagline { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 12px; } .pin h3 { margin: 0 0 10px; font-size: 22px; } .pin p { margin: 0; color: var(--muted); font-size: 15px; } .pin--empty { background: transparent; border: 1px dashed rgba(10, 27, 61, .25); box-shadow: none; display: grid; place-items: center; text-align: center; color: var(--muted); } .pin--empty::before { background: transparent; box-shadow: none; border: 1px dashed rgba(10, 27, 61, .3); } .pin--empty p { font-size: 13.5px; max-width: 24ch; } /* ========================================================================== RESULTS — a navy instrument on the exam desk ========================================================================== */ .instrument { background: var(--navy); color: rgba(255, 255, 255, .8); border-top: 3px solid var(--gold); padding: clamp(28px, 4vw, 56px); position: relative; overflow: hidden; } .instrument::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 92% 0%, rgba(240, 196, 74, .16), transparent 60%); } .instrument > * { position: relative; } .instrument h2 { color: #fff; } .instrument-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; padding-bottom: 22px; margin-bottom: 30px; border-bottom: 1px solid var(--navy-line); } .instrument-head h2 { margin: 0; font-size: clamp(26px, 3vw, 40px); } .instrument-head .ar { color: var(--gold-lit); } .instrument form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .field label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 8px; color: var(--gold-lit); } .field input, .field select { width: 100%; background: rgba(255, 255, 255, .05); border: 0; border-bottom: 1px solid rgba(240, 196, 74, .4); color: #fff; padding: 13px 12px; transition: background .4s var(--ease), border-color .4s var(--ease); } .field input::placeholder { color: rgba(255, 255, 255, .35); } .field select option { color: var(--ink); } .field input:focus, .field select:focus { background: rgba(255, 255, 255, .1); border-bottom-color: var(--gold-lit); } .instrument .full { grid-column: 1 / -1; } .instrument-note { font-size: 13.5px; color: rgba(255, 255, 255, .55); margin: 26px 0 0; } /* ========================================================================== CONTACT — a department switchboard ========================================================================== */ .switchboard { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(30px, 4vw, 64px); align-items: start; } .desk-facts { margin: 0 0 30px; padding: 0; list-style: none; } .desk-facts li { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: baseline; } .desk-facts dt, .desk-facts .k { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); } .desk-facts a:hover { color: var(--gold-ink); } .line { position: relative; display: grid; grid-template-columns: 62px 1fr auto; gap: 18px; align-items: center; padding: 18px 4px 18px 0; border-bottom: 1px solid var(--line); transition: padding-left .5s var(--ease); } .line:first-child { border-top: 1px solid var(--line); } .line::before { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); } .line:hover::before, .line:focus-within::before { transform: scaleX(1); } .line:hover { padding-left: 8px; } .line img { width: 62px; height: 62px; object-fit: cover; background: var(--cream-lo); } .line h3 { margin: 0 0 4px; font-size: 21px; } .line .nums { display: flex; gap: 8px 18px; flex-wrap: wrap; font-size: 14.5px; color: var(--muted); } .line .nums a { border-bottom: 1px solid transparent; } .line .nums a:hover { color: var(--navy); border-bottom-color: var(--gold); } .line .nums .wa { color: var(--gold-ink); font-weight: 600; } .line .jack { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--line); transition: background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); } .line:hover .jack { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 5px var(--gold-glass); } .form-paper { background: var(--cream-hi); border: 1px solid var(--hair); padding: clamp(24px, 3vw, 34px); display: grid; gap: 18px; } .form-paper label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 7px; } .form-paper input, .form-paper textarea, .form-paper select { width: 100%; border: 0; border-bottom: 1px solid rgba(10, 27, 61, .3); background: transparent; padding: 11px 2px; transition: border-color .4s var(--ease); } .form-paper input::placeholder, .form-paper textarea::placeholder { color: var(--muted); } .form-paper input:focus, .form-paper textarea:focus, .form-paper select:focus { border-bottom-color: var(--gold); } .form-paper textarea { resize: vertical; } .preview-note { font-size: 12.5px; color: var(--muted); margin: 0; } /* ========================================================================== ADMISSION — a calm stepper ========================================================================== */ .stepper { max-width: 960px; } .step-rail { display: flex; gap: 0; margin-bottom: 34px; border-bottom: 1px solid var(--line); } .step-rail button { position: relative; flex: 1 1 0; background: transparent; border: 0; text-align: left; padding: 0 14px 18px 0; cursor: pointer; color: var(--muted); transition: color .4s var(--ease); } .step-rail button::after { content: ""; position: absolute; left: 0; right: 14px; bottom: -1px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); } .step-rail button.is-on { color: var(--navy); } .step-rail button.is-on::after, .step-rail button.is-done::after { transform: scaleX(1); } .step-rail button.is-done { color: var(--gold-ink); } .step-rail .n { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .22em; margin-bottom: 8px; } .step-rail .t { font-family: var(--f-display); font-size: clamp(19px, 2.2vw, 26px); font-weight: 300; } .step-panel { display: none; } .step-panel.is-on { display: block; animation: room-in .55s var(--ease) both; } .step-panel > p.hint { color: var(--muted); font-size: 15px; max-width: 60ch; } .grid-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 24px; } .grid-form .full { grid-column: 1 / -1; } .grid-form label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 7px; } .grid-form input, .grid-form select { width: 100%; border: 0; border-bottom: 1px solid rgba(10, 27, 61, .28); background: transparent; padding: 10px 2px; transition: border-color .4s var(--ease); } .grid-form input:focus, .grid-form select:focus { border-bottom-color: var(--gold); } .step-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); } /* ========================================================================== MISSIONS — oversized type, a manifesto ========================================================================== */ .manifesto h2 { font-size: clamp(38px, 7.6vw, 108px); line-height: .98; max-width: 16ch; margin-bottom: .35em; } .creed { border-top: 1px solid var(--line); margin-top: clamp(40px, 6vw, 80px); } .creed-row { display: grid; grid-template-columns: minmax(120px, .3fr) 1fr; gap: clamp(18px, 4vw, 56px); padding: clamp(26px, 3.4vw, 46px) 0; border-bottom: 1px solid var(--line); align-items: baseline; transition: background .6s var(--ease); } .creed-row:hover { background: rgba(212, 160, 23, .05); } .creed-row .big { font-family: var(--f-display); font-weight: 300; font-size: clamp(44px, 7vw, 96px); line-height: .9; color: var(--gold-ink); opacity: .55; } .creed-row h3 { font-size: clamp(26px, 3.4vw, 44px); margin: 0 0 10px; } .creed-row p { margin: 0; color: var(--muted); max-width: 52ch; font-size: 16.5px; } /* ========================================================================== LEGAL ========================================================================== */ .legal { width: min(760px, 100%); } .legal h2 { font-size: clamp(24px, 2.6vw, 34px); margin: 44px 0 12px; } .legal h2:first-child { margin-top: 0; } .legal p { color: var(--muted); } .legal strong { color: var(--navy); } .legal-meta { font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 18px; margin-top: 44px; } /* ========================================================================== FOOTER ========================================================================== */ footer.site { position: relative; background: var(--navy-deep); color: rgba(255, 255, 255, .68); padding: clamp(56px, 7vw, 92px) 0 26px; font-size: 15px; } footer.site::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .ft { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(24px, 3vw, 48px); } .ft img { height: 52px; width: auto; margin-bottom: 18px; } .ft h4 { color: var(--gold-lit); font-family: var(--f-ui); font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; margin: 0 0 14px; } .ft nav a { display: block; } .ft a { padding: 5px 0; transition: color .35s var(--ease); } .ft nav a:hover { color: var(--gold-lit); } .ft p { margin: 0 0 10px; line-height: 1.7; } .ft-ar { font-family: var(--f-ar); direction: rtl; color: var(--gold-lit); font-size: 17px; margin-bottom: 12px; width: fit-content; } .copy { margin-top: clamp(36px, 5vw, 56px); padding-top: 20px; border-top: 1px solid var(--navy-line); font-size: 13px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .copy a:hover { color: var(--gold-lit); } /* ---------- toast + lightbox ---------- */ .toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: var(--navy-deep); color: #fff; padding: 15px 22px; border-left: 3px solid var(--gold); z-index: 250; max-width: min(520px, calc(100% - 40px)); font-size: 14.5px; opacity: 0; pointer-events: none; transition: opacity .4s var(--ease), transform .4s var(--ease); } .toast.show { opacity: 1; transform: translate(-50%, 0); } .lightbox { position: fixed; inset: 0; z-index: 260; background: rgba(6, 18, 43, .95); display: grid; place-items: center; padding: 5vh 5vw; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s; } .lightbox.show { opacity: 1; visibility: visible; } .lightbox img { max-height: 88vh; width: auto; object-fit: contain; } .lightbox button { position: absolute; top: 24px; right: 24px; width: 48px; height: 48px; background: transparent; border: 1px solid rgba(255, 255, 255, .4); color: #fff; font-size: 22px; cursor: pointer; } .lightbox button:hover { border-color: var(--gold); color: var(--gold-lit); } /* ========================================================================== RESPONSIVE — mobile keeps the film full-bleed and the calendar 7 wide ========================================================================== */ @media (max-width: 1080px) { .mag { grid-template-columns: 1fr; } .switchboard, .rules, .duo, .duo--wide { grid-template-columns: 1fr; } .doors { grid-template-columns: 1fr; } .board { grid-template-columns: repeat(2, 1fr); } .ft { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .head-strip .strip-addr { display: none; } nav.primary { position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; justify-content: center; gap: 2px; margin: 0; padding: calc(var(--headfull) + 32px) var(--gutter) 40px; background: var(--navy-deep); opacity: 0; visibility: hidden; transform: translateY(-2%); transition: opacity .45s var(--ease), transform .5s var(--ease), visibility .45s; overflow-y: auto; } body.nav-open nav.primary { opacity: 1; visibility: visible; transform: none; z-index: 1; } nav.primary a { font-family: var(--f-display); font-weight: 300; font-size: clamp(28px, 7vw, 40px); color: #fff; padding: 10px 0; border-bottom: 1px solid var(--navy-line); display: flex; align-items: baseline; gap: 16px; } nav.primary a::after { left: 0; right: auto; width: 40px; bottom: 8px; } nav.primary a.is-active { color: var(--gold-lit); } .nav-ar { display: inline; font-family: var(--f-ar); font-size: 15px; color: rgba(255, 255, 255, .45); margin-left: auto; } .menu-toggle { display: block; } .head-cta { display: none; } body.nav-open { overflow: hidden; } body.nav-open header.site { color: #fff; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } body.nav-open .brand-dark { opacity: 0; } body.nav-open .brand-light { opacity: 1; } .hero-copy { padding-bottom: clamp(120px, 22vh, 180px); } .hero-veil { background: linear-gradient(to top, var(--cream) 0%, rgba(246, 240, 228, .97) 16%, rgba(246, 240, 228, .4) 28%, rgba(6, 18, 43, .82) 48%, rgba(6, 18, 43, .5) 66%, rgba(6, 18, 43, .18) 80%, rgba(6, 18, 43, .58) 100%); } .hero-glint { opacity: .55; width: 70vw; } .scroll-cue { display: none; } .plate-pair { grid-template-columns: 1fr 1fr; } .stub { grid-template-columns: 1fr; } .stub::before { display: none; } .stub img { width: 100%; height: 190px; } .stub .go { display: none; } .instrument form, .grid-form { grid-template-columns: 1fr; } .year-map { grid-template-columns: 1fr; } .step-up:nth-child(2), .step-up:nth-child(3) { margin-left: 0; } .path-line { display: none; } .creed-row { grid-template-columns: 1fr; gap: 6px; } .creed-row .big { font-size: clamp(34px, 12vw, 56px); } .figures { grid-template-columns: 1fr 1fr; } .col-item { grid-template-columns: 84px 1fr; } .col-item img { width: 84px; height: 64px; } .desk-facts li { grid-template-columns: 1fr; gap: 4px; } .step-rail { flex-direction: column; border-bottom: 0; } .step-rail button { padding: 14px 0; border-bottom: 1px solid var(--line); } .step-rail button::after { right: 0; bottom: -1px; } } @media (max-width: 620px) { body { font-size: 16px; } .head-strip .strip-mail { display: none; } .head-strip { font-size: 12px; } .board { grid-template-columns: 1fr; } .ft { grid-template-columns: 1fr; } .figures { grid-template-columns: 1fr; } .figures div { padding: 16px 0 4px; border-bottom: 1px solid var(--line); } .line { grid-template-columns: 48px 1fr; } .line img { width: 48px; height: 48px; } .line .jack { display: none; } .cal { grid-template-columns: repeat(7, minmax(88px, 1fr)); min-width: 640px; } .moment img { height: 320px; } } /* ========================================================================== REDUCED MOTION — freeze the film on its poster, cut the decoration ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } html.js [data-rise] { opacity: 1 !important; transform: none !important; } html.js [data-draw] { transform: scaleX(1) !important; } html.js .w > i { transform: none !important; } html.js main { animation: none; } /* the film is frozen on its poster by site.js (video.load() with no play) */ .hero-glint, .scroll-cue i::after { display: none; } .sheet-track { animation: none !important; transform: none !important; } .sheet { overflow-x: auto; } .sheet::before { mask-image: none; -webkit-mask-image: none; } .roomwipe { display: none; } .cal-month.is-on .day.has { animation: none; } } /* fallback when JS never runs: nothing stays hidden */ html:not(.js) [data-rise], html:not(.js) [data-draw], html:not(.js) .w > i { opacity: 1; transform: none; } html:not(.js) .step-panel { display: block; } html:not(.js) nav.primary { position: static; opacity: 1; visibility: visible; }