/* ============================================================ THE DELHI UNION — The Bound Constitution Deep blue morocco binding, gold tooling, paper leaves. ============================================================ */ /* fonts.css is linked directly in — no @import chain */ :root { --blue-abyss: #081226; --blue-binding: #0d1f4a; --blue-board: #13295d; --blue-royal: #1e3e8f; --gold: #c5a45c; --gold-bright: #e9cf8e; --gold-deep: #8f7434; --gold-ink: #7a6229; /* gold for small text on paper — AA at label sizes */ --paper: #f7f2e7; --paper-shade: #ede6d5; --ink: #141b2e; --ink-soft: #3d4660; --white-soft: #f4f1e9; --white-dim: #b9c1d9; --serif: "Libre Caslon Text", "Iowan Old Style", Georgia, serif; --display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif; --devanagari: "Tiro Devanagari Hindi", serif; --ease: cubic-bezier(0.22, 0.6, 0.2, 1); --container: 1200px; --wide: 1360px; } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* No scroll-behavior:smooth — Lenis owns smoothing on desktop, and the CSS property makes Lenis's per-frame native scrollTo animate forever. */ body { font-family: var(--serif); font-size: 17px; line-height: 1.7; color: var(--ink); background: var(--blue-binding); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ::selection { background: var(--gold); color: var(--blue-abyss); } .dev { font-family: var(--devanagari); font-style: normal; } /* ---------- label / eyebrow ---------- */ .label { font-family: var(--serif); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 400; } .label .dev { text-transform: none; letter-spacing: 0.06em; font-size: 13px; } .on-blue .label, .label.gold { color: var(--gold); } .on-paper .label { color: var(--gold-ink); } /* ---------- rules & ornament ---------- */ .rule-gold { border: 0; height: 1px; background: rgba(197, 164, 92, 0.35); } .rule-double { height: 7px; border: 0; border-top: 1px solid rgba(197, 164, 92, 0.8); border-bottom: 1px solid rgba(197, 164, 92, 0.45); } .rosette { color: var(--gold); } .rosette svg { display: block; margin: 0 auto; } /* drawn-in rules */ .draw { transform: scaleX(0); transform-origin: left center; transition: transform 1.1s var(--ease); } .draw.center { transform-origin: center; } .in .draw, .draw.in { transform: scaleX(1); } /* ---------- reveal motion ---------- */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: 0.08s; } .reveal.d2 { transition-delay: 0.16s; } .reveal.d3 { transition-delay: 0.24s; } .reveal.d4 { transition-delay: 0.32s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal, .draw { opacity: 1 !important; transform: none !important; transition: none !important; } * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* ---------- nav ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: color-mix(in srgb, var(--blue-binding) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(197, 164, 92, 0.35); transition: background 0.4s var(--ease); } .nav-inner { max-width: var(--wide); margin: 0 auto; padding: 0 32px; height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .device { display: inline-block; border: 1px solid var(--gold); outline: 1px solid rgba(197, 164, 92, 0.4); outline-offset: 3px; color: var(--gold); padding: 7px 14px 6px; font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; white-space: nowrap; transition: color 0.3s var(--ease), border-color 0.3s var(--ease); } .device:hover { color: var(--gold-bright); border-color: var(--gold-bright); } .nav-links { display: flex; align-items: center; gap: 34px; list-style: none; } .nav-links a { color: var(--white-dim); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; padding: 6px 0; position: relative; transition: color 0.3s var(--ease); } .nav-links a:hover { color: var(--gold-bright); } .nav-links a[aria-current="page"] { color: var(--gold); } .nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 4px; height: 4px; background: var(--gold); transform: translateX(-50%) rotate(45deg); } .nav-burger { display: none; background: none; border: 0; cursor: pointer; padding: 10px; flex-direction: column; gap: 6px; } .nav-burger span { display: block; width: 26px; height: 1px; background: var(--gold); transition: transform 0.35s var(--ease), opacity 0.35s var(--ease); } /* mobile menu */ .mobile-menu { position: fixed; inset: 0; z-index: 99; background: var(--blue-abyss); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 0.45s var(--ease), visibility 0s linear 0.45s; } .mobile-menu.open { opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s; } @media (min-width: 761px) { .mobile-menu { display: none; } } .mobile-menu a { color: var(--white-soft); font-family: var(--display); font-size: 32px; font-style: italic; padding: 12px 24px; transition: color 0.3s var(--ease); } .mobile-menu a:hover, .mobile-menu a[aria-current="page"] { color: var(--gold-bright); } .mobile-menu .label { color: var(--gold); margin-bottom: 20px; } body.menu-open { overflow: hidden; } body.menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.menu-open .nav-burger span:nth-child(2) { opacity: 0; } body.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------- tooling frame ---------- */ .tooling { position: absolute; inset: 26px; pointer-events: none; border: 1px solid rgba(197, 164, 92, 0.75); } .tooling::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(197, 164, 92, 0.35); } .tooling .corner { position: absolute; width: 14px; height: 14px; } .tooling .corner::before, .tooling .corner::after { content: ""; position: absolute; background: rgba(197, 164, 92, 0.9); } .tooling .corner::before { width: 14px; height: 1px; } .tooling .corner::after { width: 1px; height: 14px; } .tooling .c-tl { top: -7px; left: -7px; } .tooling .c-tr { top: -7px; right: -7px; } .tooling .c-bl { bottom: -7px; left: -7px; } .tooling .c-br { bottom: -7px; right: -7px; } .tooling .c-tl::before, .tooling .c-tl::after { top: 6px; left: 0; } .tooling .c-tl::after { top: 0; left: 6px; } .tooling .c-tr::before { top: 6px; right: 0; } .tooling .c-tr::after { top: 0; right: 6px; } .tooling .c-bl::before { bottom: 6px; left: 0; } .tooling .c-bl::after { bottom: 0; left: 6px; } .tooling .c-br::before { bottom: 6px; right: 0; } .tooling .c-br::after { bottom: 0; right: 6px; } /* ---------- buttons ---------- */ .btn { display: inline-block; border: 1px solid var(--gold); color: var(--gold); background: transparent; cursor: pointer; font-family: var(--serif); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; padding: 15px 30px 13px; transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease); } .btn:hover { color: var(--gold-bright); border-color: var(--gold-bright); background: rgba(197, 164, 92, 0.1); } .btn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; } .on-paper .btn, .btn.ink { border-color: var(--ink); color: var(--ink); } .on-paper .btn:hover, .btn.ink:hover { background: rgba(20, 27, 46, 0.06); color: var(--ink); } .textlink { border-bottom: 1px solid rgba(197, 164, 92, 0.5); padding-bottom: 2px; transition: border-color 0.3s var(--ease), color 0.3s var(--ease); } .on-blue .textlink { color: var(--white-soft); } .on-blue .textlink:hover { color: var(--gold-bright); border-color: var(--gold-bright); } .on-paper .textlink { color: var(--blue-royal); border-color: rgba(30, 62, 143, 0.35); } .on-paper .textlink:hover { border-color: var(--blue-royal); } a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* ---------- surfaces ---------- */ .on-blue { background: var(--blue-binding); color: var(--white-soft); } .on-abyss { background: var(--blue-abyss); color: var(--white-soft); } .on-paper { background: var(--paper); color: var(--ink); } .leaf { position: relative; } .leaf::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 26px; background: linear-gradient(to bottom, rgba(8, 18, 38, 0.28), transparent); pointer-events: none; } .container { max-width: var(--container); margin: 0 auto; padding: 0 32px; } .container.wide { max-width: var(--wide); } /* ---------- hero cover ---------- */ .cover { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 130px 32px 190px; background: radial-gradient(ellipse 120% 90% at 50% 10%, rgba(30, 62, 143, 0.35), transparent 60%), radial-gradient(ellipse 140% 100% at 50% 110%, rgba(8, 18, 38, 0.9), transparent 65%), var(--blue-binding); overflow: hidden; } .cover-mark { margin-bottom: 34px; } .cover-title { font-family: var(--display); font-weight: 400; color: var(--gold); font-size: clamp(40px, 7.2vw, 92px); letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.08; text-wrap: balance; } /* Gold leaf is a material, not a flat color: a raked light crosses it slowly. */ @supports (background-clip: text) or (-webkit-background-clip: text) { .cover-title { background: linear-gradient(105deg, #8f7434 0%, #b3924c 22%, #c5a45c 36%, #f0d998 50%, #c5a45c 64%, #a8874a 80%, #8f7434 100%); background-size: 250% 100%; background-position: var(--sheen) 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: leaf-sheen 11s var(--ease) infinite; } } @keyframes leaf-sheen { 0%, 55% { background-position: 120% 0; } 85%, 100% { background-position: -20% 0; } } .cover-sub { margin-top: 26px; } .cover-tagline { font-family: var(--display); font-style: italic; color: var(--white-soft); font-size: clamp(22px, 3vw, 36px); line-height: 1.35; margin-top: 40px; text-wrap: balance; } .cover-ctas { margin-top: 54px; display: flex; gap: 28px; align-items: center; justify-content: center; flex-wrap: wrap; } .cover-scroll { position: absolute; bottom: 46px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--gold); } .cover-scroll .stem { width: 1px; height: 56px; background: linear-gradient(to bottom, transparent, var(--gold)); animation: stem 2.6s var(--ease) infinite; } @keyframes stem { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* ---------- frontispiece (latest motion) ---------- */ .frontis { position: relative; padding: 150px 0 130px; } .frontis .eyebrow { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin-bottom: 44px; } .motion-display { font-family: var(--display); font-style: italic; font-weight: 400; color: var(--white-soft); text-align: center; font-size: clamp(30px, 4.6vw, 62px); line-height: 1.28; max-width: 20ch; margin: 0 auto; position: relative; text-wrap: balance; } .motion-display .q { color: var(--gold); font-style: normal; font-size: 1.6em; line-height: 0; vertical-align: -0.32em; margin-right: 0.08em; } .frontis-actions { margin-top: 56px; text-align: center; } /* bench strip on frontispiece */ .bench-strip { margin-top: 84px; } .bench-strip-head { display: flex; align-items: center; gap: 22px; margin-bottom: 36px; } .bench-strip-head .rule-gold { flex: 1; } .bench-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 30px 22px; max-width: var(--wide); margin: 0 auto; } /* ---------- portrait plates ---------- */ .plate { text-align: center; } .plate-frame { position: relative; border: 1px solid rgba(197, 164, 92, 0.65); padding: 5px; background: rgba(8, 18, 38, 0.4); transition: border-color 0.35s var(--ease); } .plate-frame img { width: 100%; aspect-ratio: 3 / 3.7; object-fit: cover; transition: transform 0.5s var(--ease); } .plate:hover .plate-frame { border-color: var(--gold-bright); } .plate-name { margin-top: 14px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white-soft); line-height: 1.45; } .plate-role { margin-top: 4px; font-size: 12.5px; font-style: italic; color: var(--white-dim); line-height: 1.5; } .on-paper .plate-frame { background: var(--paper-shade); border-color: rgba(143, 116, 52, 0.55); } .on-paper .plate-name { color: var(--ink); } .on-paper .plate-role { color: var(--ink-soft); } /* ---------- section headers ---------- */ .section-head { text-align: center; margin-bottom: 64px; } .section-head .label { display: inline-flex; align-items: center; gap: 14px; } .section-head .label::before, .section-head .label::after { content: ""; width: 44px; height: 1px; background: currentColor; opacity: 0.4; } .section-title { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.2; margin-top: 18px; text-wrap: balance; } .section-intro { max-width: 62ch; margin: 20px auto 0; color: var(--ink-soft); font-size: 17px; } .on-blue .section-intro, .on-abyss .section-intro { color: var(--white-dim); } /* ---------- proceedings archive rows ---------- */ .proceedings { padding: 130px 0 140px; } .proc-list { border-top: 1px solid rgba(143, 116, 52, 0.4); } .proc-row { display: grid; grid-template-columns: 110px 1fr 200px; gap: 30px; align-items: baseline; padding: 40px 8px; border-bottom: 1px solid rgba(143, 116, 52, 0.3); transition: background 0.35s var(--ease); } .proc-row:hover { background: rgba(237, 230, 213, 0.55); } .proc-no { font-family: var(--display); font-size: 26px; color: var(--gold-deep); letter-spacing: 0.04em; } .proc-no small { display: block; font-family: var(--serif); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 4px; color: var(--gold-ink); } .proc-topic { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; } .proc-motion { font-family: var(--display); font-style: italic; font-size: clamp(21px, 2.2vw, 29px); line-height: 1.35; color: var(--ink); transition: color 0.3s var(--ease); text-wrap: balance; } .proc-row:hover .proc-motion { color: var(--blue-royal); } .proc-meta { text-align: right; font-size: 14px; color: var(--ink-soft); line-height: 1.8; } .proc-meta .status { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); } .proc-foot { margin-top: 52px; text-align: center; } /* ---------- house wall ---------- */ .house { padding: 130px 0 140px; } .house-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 40px 26px; } @media (max-width: 980px) { .house-wall { grid-template-columns: repeat(3, 1fr); } } .house-foot { margin-top: 64px; text-align: center; } /* ---------- photo band ---------- */ .band { position: relative; overflow: hidden; } .band img.bg { width: 100%; height: min(78vh, 720px); object-fit: cover; } .band .scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 18, 38, 0.88) 0%, rgba(8, 18, 38, 0.25) 45%, rgba(8, 18, 38, 0.15) 100%); } .band-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 56px 32px; text-align: center; color: var(--white-soft); } .band-caption .big { font-family: var(--display); font-style: italic; font-size: clamp(24px, 3vw, 40px); line-height: 1.3; max-width: 26ch; margin: 18px auto 0; text-wrap: balance; } /* ---------- conversations ---------- */ .convo { padding: 130px 0 140px; } .convo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; } .convo-card { display: block; } .convo-still { position: relative; border: 1px solid rgba(143, 116, 52, 0.5); padding: 5px; background: var(--paper-shade); } .convo-still img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .convo-still .play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--paper); opacity: 0.92; transition: transform 0.35s var(--ease); } .convo-card:hover .play { transform: scale(1.06); } .convo-title { font-family: var(--display); font-size: 21px; line-height: 1.4; margin-top: 20px; transition: color 0.3s var(--ease); text-wrap: balance; } .convo-card:hover .convo-title { color: var(--blue-royal); } .convo-meta { margin-top: 8px; font-size: 13.5px; color: var(--ink-soft); font-style: italic; } /* ---------- membership invite ---------- */ .member-invite { position: relative; padding: 150px 32px; text-align: center; overflow: hidden; } .member-invite .inner { position: relative; max-width: 720px; margin: 0 auto; } .member-creed { font-family: var(--display); font-style: italic; font-size: clamp(24px, 3vw, 38px); line-height: 1.4; color: var(--white-soft); margin-top: 26px; text-wrap: balance; } .member-privileges { margin: 48px auto 0; max-width: 620px; text-align: left; list-style: none; } .member-privileges li { display: flex; gap: 18px; align-items: baseline; padding: 18px 4px; border-bottom: 1px solid rgba(197, 164, 92, 0.25); color: var(--white-dim); font-size: 16px; } .member-privileges li:first-child { border-top: 1px solid rgba(197, 164, 92, 0.25); } .member-privileges .n { font-family: var(--display); color: var(--gold); font-size: 15px; min-width: 26px; } .member-invite .btn { margin-top: 52px; } /* ---------- press line ---------- */ .pressline { padding: 60px 32px; text-align: center; border-top: 1px solid rgba(197, 164, 92, 0.2); } .pressline p { color: var(--white-dim); font-style: italic; font-size: 16px; max-width: 70ch; margin: 14px auto 0; } .pressline a { color: var(--gold); border-bottom: 1px solid rgba(197, 164, 92, 0.4); transition: color 0.3s var(--ease); } .pressline a:hover { color: var(--gold-bright); } /* ---------- footer ---------- */ .footer { position: relative; padding: 90px 32px 48px; } .footer-inner { max-width: var(--wide); margin: 0 auto; } .footer-top { display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between; align-items: flex-start; padding-bottom: 56px; } .footer-id .device { margin-bottom: 18px; } .footer-id p { color: var(--white-dim); font-size: 14.5px; max-width: 34ch; font-style: italic; } .footer-cols { display: flex; gap: 72px; flex-wrap: wrap; } .footer-col .label { color: var(--gold); display: block; margin-bottom: 18px; } .footer-col ul { list-style: none; } .footer-col li { margin-bottom: 10px; } .footer-col a { color: var(--white-dim); font-size: 14.5px; transition: color 0.3s var(--ease); } .footer-col a:hover { color: var(--gold-bright); } .footer-bottom { border-top: 1px solid rgba(197, 164, 92, 0.25); padding-top: 30px; display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; color: rgba(185, 193, 217, 0.75); font-size: 13px; } .footer-bottom .colophon { font-style: italic; } /* ---------- proceeding detail ---------- */ .proc-hero { position: relative; padding: 170px 32px 110px; text-align: center; } .proc-hero .eyebrow { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin-bottom: 40px; } .proc-hero .motion-display { max-width: 22ch; } .proc-hero-meta { margin-top: 42px; color: var(--white-dim); font-size: 15px; font-style: italic; } .proc-body { padding: 110px 0 60px; } .proc-desc { max-width: 66ch; margin: 0 auto; font-size: 18px; line-height: 1.85; color: var(--ink); } .proc-desc p + p { margin-top: 1.4em; } .proc-desc .dropcap::first-letter { font-family: var(--display); font-size: 3.4em; line-height: 0.82; float: left; padding: 0.08em 0.12em 0 0; color: var(--blue-royal); } /* division of the house */ .division { padding: 110px 0 130px; } .division-cols { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0 90px; } .division-aisle { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: linear-gradient(to bottom, var(--gold-deep), rgba(143, 116, 52, 0.35)); } .division-aisle .rosette { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); background: var(--paper); padding: 0 6px; color: var(--gold-deep); } .division-col-head { text-align: center; margin-bottom: 46px; } .division-col-head .side-name { font-family: var(--display); font-size: 24px; margin-top: 12px; } .bench-list { list-style: none; display: flex; flex-direction: column; gap: 34px; } .bench-member .bench-in { display: flex; gap: 22px; align-items: center; transition: transform 0.4s var(--ease); } .bench-member .bench-in:hover { transform: translateY(-3px); } .bench-member .bench-in:hover .name { color: var(--blue-royal); } .bench-member.opp .bench-in { flex-direction: row-reverse; text-align: right; } .bench-portrait { flex: 0 0 86px; } .bench-portrait img { width: 86px; height: 104px; object-fit: cover; border: 1px solid rgba(143, 116, 52, 0.55); padding: 3px; background: var(--paper-shade); } .bench-info .order { display: block; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-ink); } .bench-info .name { display: block; font-family: var(--display); font-size: 20px; line-height: 1.3; margin-top: 5px; transition: color 0.3s var(--ease); } .bench-info .role { display: block; font-size: 14px; font-style: italic; color: var(--ink-soft); margin-top: 4px; line-height: 1.5; } .chair-block { margin-top: 80px; text-align: center; } .chair-block .bench-member { justify-content: center; text-align: left; display: inline-flex; } /* the film */ .film { padding: 120px 0 140px; } .film-plate { position: relative; border: 1px solid rgba(197, 164, 92, 0.65); padding: 6px; background: rgba(8, 18, 38, 0.5); max-width: 980px; margin: 0 auto; } .film-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; } .film-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 4s var(--ease); } .film-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .film-play { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 20px; align-items: center; justify-content: center; cursor: pointer; border: 0; width: 100%; background: linear-gradient(to top, rgba(8, 18, 38, 0.72), rgba(8, 18, 38, 0.18)); color: var(--white-soft); } .film-play .label { color: var(--gold-bright); } .film-play:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -8px; } .film-play .ring { width: 84px; height: 84px; border: 1px solid var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold-bright); transition: transform 0.35s var(--ease), background 0.35s var(--ease); } .film-play:hover .ring { transform: scale(1.08); background: rgba(197, 164, 92, 0.14); } /* prev/next */ .proc-pager { border-top: 1px solid rgba(197, 164, 92, 0.25); } .proc-pager .cols { display: grid; grid-template-columns: 1fr 1fr; max-width: var(--wide); margin: 0 auto; } .pager-link { padding: 52px 40px; display: block; transition: background 0.35s var(--ease); } .pager-link:hover { background: rgba(197, 164, 92, 0.07); } .pager-link.next { text-align: right; border-left: 1px solid rgba(197, 164, 92, 0.25); } .pager-link.prev:only-child { border-right: 0; } .pager-link .label { color: var(--gold); } .pager-link .t { display: block; font-family: var(--display); font-style: italic; font-size: 21px; color: var(--white-soft); margin-top: 12px; } /* ---------- generic page hero (interior) ---------- */ .page-hero { position: relative; padding: 190px 32px 110px; text-align: center; } .page-hero .section-title { font-size: clamp(36px, 4.6vw, 60px); color: var(--white-soft); } .page-hero .section-intro { color: var(--white-dim); } /* ---------- about ---------- */ .mission { padding: 130px 0; } .mission-quote { font-family: var(--display); font-style: italic; text-align: center; font-size: clamp(24px, 3.2vw, 40px); line-height: 1.45; max-width: 26ch; margin: 0 auto; text-wrap: balance; } .mission-body { max-width: 66ch; margin: 56px auto 0; font-size: 18px; line-height: 1.85; } .mission-body p + p { margin-top: 1.4em; } .format { padding: 120px 0 140px; } .format-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(197, 164, 92, 0.3); border: 1px solid rgba(197, 164, 92, 0.3); max-width: 1000px; margin: 0 auto; } .format-cell { background: var(--blue-binding); padding: 46px 44px; } .format-cell .n { font-family: var(--display); color: var(--gold); font-size: 30px; } .format-cell h3 { font-family: var(--display); font-weight: 400; font-size: 22px; margin-top: 16px; color: var(--white-soft); } .format-cell p { margin-top: 12px; color: var(--white-dim); font-size: 15.5px; line-height: 1.7; } .committee { padding: 130px 0 140px; } .committee-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 40px 22px; } @media (max-width: 1150px) { .committee-grid { grid-template-columns: repeat(4, 1fr); } } /* ---------- membership page ---------- */ .member-page-body { padding: 120px 0 140px; } .member-two { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 90px; align-items: start; max-width: 1080px; margin: 0 auto; } .member-text h2 { font-family: var(--display); font-weight: 400; font-size: 30px; margin-bottom: 22px; } .member-text p { color: var(--ink-soft); line-height: 1.85; } .member-text p + p { margin-top: 1.2em; } .member-text .rule-gold { margin: 40px 0; background: rgba(143, 116, 52, 0.35); } .apply-panel { border: 1px solid rgba(143, 116, 52, 0.5); padding: 44px 40px; background: var(--paper-shade); position: sticky; top: 110px; } .apply-panel h3 { font-family: var(--display); font-weight: 400; font-size: 24px; margin-top: 14px; } .apply-panel p { font-size: 15px; color: var(--ink-soft); margin-top: 14px; line-height: 1.7; } .apply-panel .btn { margin-top: 30px; width: 100%; text-align: center; } .apply-panel .fine { font-size: 13px; font-style: italic; margin-top: 18px; } /* ---------- analysis long read ---------- */ .longread { padding: 110px 0 140px; } .longread-body { max-width: 66ch; margin: 0 auto; font-size: 18px; line-height: 1.9; } .longread-body p + p { margin-top: 1.5em; } .longread-body p:first-of-type::first-letter { font-family: var(--display); font-size: 3.4em; line-height: 0.82; float: left; padding: 0.08em 0.12em 0 0; color: var(--blue-royal); } .longread-body h2 { font-family: var(--display); font-weight: 400; font-size: 26px; margin: 2.2em 0 0.8em; } /* ---------- 404 ---------- */ .notfound { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 32px; position: relative; } .notfound .section-title { color: var(--white-soft); } /* ---------- gallery strip (about) ---------- */ .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: var(--wide); margin: 0 auto; padding: 0 32px; } .gallery figure { border: 1px solid rgba(197, 164, 92, 0.45); padding: 5px; background: rgba(8, 18, 38, 0.4); } .gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } /* ============================================================ Responsive ============================================================ */ @media (max-width: 980px) { .convo-grid { grid-template-columns: 1fr 1fr; } .member-two { grid-template-columns: 1fr; gap: 60px; } .apply-panel { position: static; } .format-grid { grid-template-columns: 1fr; } .division-cols { grid-template-columns: 1fr; gap: 70px; } .division-aisle { display: none; } .division-col + .division-col { border-top: 1px solid rgba(143, 116, 52, 0.4); padding-top: 60px; } .bench-member.opp .bench-in { flex-direction: row; text-align: left; } .proc-pager .cols { grid-template-columns: 1fr; } .pager-link.next { border-left: 0; border-top: 1px solid rgba(197, 164, 92, 0.25); text-align: left; } } /* ============================================================ Material physics — registered properties, scroll timelines, view transitions, pointer-raked light. Every effect is the world's own: light across gold leaf, a leaf turning, a rule being drawn down the aisle. All degrade to the static page. ============================================================ */ @property --sheen { syntax: ""; initial-value: 120%; inherits: false; } @property --glint-x { syntax: ""; initial-value: 50%; inherits: true; } @property --glint-y { syntax: ""; initial-value: 30%; inherits: true; } /* Pointer-raked light: one radial specular pool that follows the reader's hand across the binding. Set via --glint-x/--glint-y from main.js. */ .glint-field { position: relative; } .glint-field::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(560px circle at var(--glint-x) var(--glint-y), rgba(233, 207, 142, 0.09), rgba(233, 207, 142, 0.03) 40%, transparent 65%); opacity: 0; transition: opacity 0.8s var(--ease); } .glint-field.lit::after { opacity: 1; } .cover .cover-stack, .frontis > .container, .member-invite > .inner { position: relative; z-index: 2; } /* The cover ceremony: the frame settles, then the stack rises through it. */ .cover .tooling { animation: frame-settle 1.6s var(--ease) both; } .cover .tooling .corner { animation: corner-in 0.9s var(--ease) 1s both; } @keyframes frame-settle { from { opacity: 0; transform: scale(1.012); } to { opacity: 1; transform: none; } } @keyframes corner-in { from { opacity: 0; } to { opacity: 1; } } .cover-stack > * { animation: rise-through 1.1s var(--ease) both; } .cover-stack > *:nth-child(1) { animation-delay: 0.25s; } .cover-stack > *:nth-child(2) { animation-delay: 0.42s; } .cover-stack > *:nth-child(3) { animation-delay: 0.62s; } .cover-stack > *:nth-child(4) { animation-delay: 0.8s; } .cover-stack > *:nth-child(5) { animation-delay: 1s; } @keyframes rise-through { from { opacity: 0; transform: translateY(22px); clip-path: inset(0 0 100% 0); } 60% { clip-path: inset(0 0 0% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 -20% 0); } } /* Scroll-driven staging (cover recession, band breathing, the aisle being drawn) is orchestrated by the rAF engine in main.js — one passive scroll listener, compositor-only properties, identical in every engine. */ .band img.bg { will-change: transform; transform: scale(1.06); } .division-aisle { transform-origin: top center; } /* The leaf turns: page entrances/exits are orchestrated in main.js as a brief settle — deterministic across engines. The entering page rises from the binding. */ html.leaf-out { opacity: 0; transition: opacity 0.24s ease; } @media not (prefers-reduced-motion: reduce) { html.leaf-in body { animation: leaf-open 0.55s var(--ease) both; } } @keyframes leaf-open { from { opacity: 0; } to { opacity: 1; } } /* Reading ribbon — the bookmark: a gold thread that marks progress through a long read. */ .ribbon { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 101; background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-bright)); transform-origin: left center; transform: scaleX(var(--read, 0)); } /* Device sheen on hover — the boxed wordmark catches the light. */ .device { position: relative; overflow: hidden; } .device::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -30%; width: 24%; background: linear-gradient(100deg, transparent, rgba(233, 207, 142, 0.28), transparent); transform: translateX(-120%) skewX(-18deg); transition: transform 0.9s var(--ease); } .device:hover::after { transform: translateX(560%) skewX(-18deg); } /* Bench members enter from their own side of the aisle. */ .bench-member.prop.reveal { transform: translateX(-22px); } .bench-member.opp.reveal { transform: translateX(22px); } .bench-member.reveal { opacity: 0; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .bench-member.reveal.in { opacity: 1; transform: none; } /* Focus ceremony: keyboard focus draws the same gold the pointer earns. */ :focus-visible { outline-color: var(--gold-bright); } @media (prefers-reduced-motion: reduce) { .cover-stack > *, .cover .tooling, .cover .tooling .corner { animation: none !important; opacity: 1 !important; clip-path: none !important; transform: none !important; } .glint-field::after { display: none; } .device::after { display: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } .bench-member.reveal { opacity: 1; transform: none; } } @media (max-width: 760px) { body { font-size: 16px; } .nav-links { display: none; } .nav-burger { display: flex; } .tooling { inset: 14px; } .container, .nav-inner { padding-left: 22px; padding-right: 22px; } .proc-row { grid-template-columns: 1fr; gap: 12px; padding: 32px 4px; } .proc-no { display: flex; align-items: baseline; gap: 12px; font-size: 22px; } .proc-meta { text-align: left; display: flex; gap: 18px; align-items: baseline; } .convo-grid { grid-template-columns: 1fr; gap: 44px; } .gallery { grid-template-columns: 1fr; } .band img.bg { height: 60vh; } .bench-row { grid-template-columns: repeat(2, 1fr); } .house-wall, .committee-grid { grid-template-columns: repeat(2, 1fr); } .frontis { padding: 110px 0 96px; } .proceedings, .house, .convo, .committee, .mission, .format { padding-top: 88px; padding-bottom: 96px; } .footer-cols { gap: 44px; } }