/* Polyment landing v2: the home page as a campaign for "the university, invented today", on direction A. Loaded after site.css and hero-directions.css (gold-rule.css is folded into site.css). The hero parts (.v2-hero, .wl, .aim, .terms-line, .hx-art.is-armed) stand on their own; rules for the rest of the page sit under .v2 (the sheet). Directional spacing is logical (inline start and end), so the Arabic mirror is a translation, not a rebuild. Filled buttons are for forms only; every other button on the page is the secondary (outline) style. */ /* ---------- running header -------------------------------------------------- */ .v2 .nav-links { gap: 12px; } .v2 .nav-links a { min-width: 44px; padding: 10px 8px; text-align: center; } /* 44px targets */ .v2 .logo, .v2-footer .logo { min-height: 44px; } .nav-cta { display: none; } @media (min-width: 641px) and (max-width: 860px) { /* tablets keep the action beside the menu */ .nav-cta { display: inline-flex; margin-inline-start: auto; } .v2 .navbar { gap: 12px; } } /* ---------- 1 · hero --------------------------------------------------------- */ .v2-hero .hx-status { max-width: none; text-wrap: balance; } /* one line at 1440; balanced lines on phones */ .nw { white-space: nowrap; } /* phones wrap only between fields */ .v2-hero .hx-lead { max-width: 52ch; } /* ---------- the hero's answer (3 Oct) --------------------------------------- The lead is now one short answer under the question, then the call to action (.hx-lead.hx-hook). The answer ends in a goal on its own line, written on a pencil rule like a blank being filled in: the internship, the scholarship, your dream job. The goal retypes in step with the drawing (js/site.js reads the drawing's own clock), so the hero keeps one motion: a goal is written, then the route inks toward it. The goal's line is a one-cell grid holding all three goals unseen, so it is always as wide as the longest ("the scholarship.") and nothing around it moves. */ .v2-hero .hx-hook { margin-top: 26px; } .hx-answer { font-family: var(--font-serif); font-weight: 500; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.22; letter-spacing: -.012em; color: var(--navy); font-variation-settings: "opsz" 72; } .hx-goal { display: grid; width: max-content; max-width: 100%; margin-top: .1em; padding-bottom: .05em; border-bottom: 1.5px solid var(--graphite-soft); /* pencil: the blank. The goal is written on it in ink. */ } .hx-goal > span { grid-area: 1 / 1; white-space: nowrap; } .hx-goal-size { visibility: hidden; padding-inline-end: 8px; } /* room for the caret too */ .hx-goal-caret { display: none; } .hx-hook.is-typing .hx-goal-caret { display: inline-block; width: 2px; height: 1em; margin-inline-start: 2px; vertical-align: -.14em; background: currentColor; } @media (forced-colors: active) { /* forced colours would paint the caret Canvas, unseen */ .hx-hook.is-typing .hx-goal-caret { forced-color-adjust: none; background: CanvasText; } } .hx-cta { margin-top: 14px; } /* The terms line: every item carries its dot at its start, and the first item on each line hides its dot outside the clipped list, so no line ever starts with a dot. */ .terms-line { grid-area: terms; display: flex; flex-wrap: wrap; overflow: hidden; margin: 14px 0 0; padding: 0; list-style: none; font-size: 14.5px; line-height: 1.55; color: var(--slate); } .terms-line li { position: relative; margin-inline: -1.3em 1.3em; padding-inline-start: 1.3em; } .terms-line li::before { content: "·"; content: "·" / ""; position: absolute; inset-inline-start: 0; inset-block-start: 0; width: 1.3em; text-align: center; color: var(--graphite); } /* ---------- the hero drawing loops (25 Sep; kept looping 3 Oct) ------------ One 7 s cycle: it draws for 2.5 s (pencil 0 to 0.9 s, ink 0.9 to 1.9 s, gold 1.95 to 2.45 s), holds finished for 4 s, then the ink and gold fade back to pencil over 0.5 s (6.5 to 7 s) and it draws again. The pencil lines and the nodes draw once; everything inked or gilded runs on a 7 s cycle that starts at 0.9 s, so on every later cycle the pencil rests for 0.9 s before the ink, and the fade sits at 80% to 87.14% of each cycle. The hero's goal (above) retypes on this same clock: it deletes while the ink fades and types while the pencil rests. One class, is-held, pauses every animation in place. */ .v2-hero .hx-art.is-held .hx-draw, .v2-hero .hx-art.is-held .hx-draw * { animation-play-state: paused !important; } @keyframes hx-cy-ink { 0% { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .25, 1); } 14.29% { stroke-dashoffset: 0; opacity: 1; } 80% { stroke-dashoffset: 0; opacity: 1; animation-timing-function: ease; } 87.14% { stroke-dashoffset: 0; opacity: 0; } 87.15%, 100% { stroke-dashoffset: 1; opacity: 0; } } @keyframes hx-cy-ink-a { 0% { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .25, 1); } 9.29% { stroke-dashoffset: 0; opacity: 1; } 80% { stroke-dashoffset: 0; opacity: 1; animation-timing-function: ease; } 87.14% { stroke-dashoffset: 0; opacity: 0; } 87.15%, 100% { stroke-dashoffset: 1; opacity: 0; } } @keyframes hx-cy-ink-b { 0%, 9.29% { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .25, 1); } 14.29% { stroke-dashoffset: 0; opacity: 1; } 80% { stroke-dashoffset: 0; opacity: 1; animation-timing-function: ease; } 87.14% { stroke-dashoffset: 0; opacity: 0; } 87.15%, 100% { stroke-dashoffset: 1; opacity: 0; } } @keyframes hx-cy-ring-a { 0%, 2.86% { stroke: var(--graphite-soft); fill: var(--cream); } 7.14%, 80% { stroke: var(--verdigris); fill: var(--cream-surface); } 87.14%, 100% { stroke: var(--graphite-soft); fill: var(--cream); } } @keyframes hx-cy-ring-b { 0%, 6.57% { stroke: var(--graphite-soft); fill: var(--cream); } 10.86%, 80% { stroke: var(--verdigris); fill: var(--cream-surface); } 87.14%, 100% { stroke: var(--graphite-soft); fill: var(--cream); } } @keyframes hx-cy-ring-c { 0%, 10.29% { stroke: var(--graphite-soft); fill: var(--cream); } 14.57%, 80% { stroke: var(--verdigris); fill: var(--cream-surface); } 87.14%, 100% { stroke: var(--graphite-soft); fill: var(--cream); } } @keyframes hx-cy-gl-b { 0%, 6.57% { fill: var(--graphite); } 10.86%, 80% { fill: var(--verdigris-ink); } 87.14%, 100% { fill: var(--graphite); } } @keyframes hx-cy-gl-c { 0%, 10.29% { fill: var(--graphite); } 14.57%, 80% { fill: var(--verdigris-ink); } 87.14%, 100% { fill: var(--graphite); } } @keyframes hx-cy-gl-n1 { 0%, 2.86% { fill: var(--graphite); } 7.14%, 16.43% { fill: var(--verdigris-ink); } 21.43%, 80% { fill: var(--navy); } 87.14%, 100% { fill: var(--graphite); } } @keyframes hx-cy-gild { 0%, 15.71% { opacity: 0; transform: scale(.6); animation-timing-function: cubic-bezier(.2, .7, .2, 1); } 22.86%, 80% { opacity: 1; transform: none; } 87.14% { opacity: 0; transform: none; } 87.15%, 100% { opacity: 0; transform: scale(.6); } } @keyframes hx-cy-flourish { 0%, 18.57% { opacity: 0; transform: scale(.6); animation-timing-function: cubic-bezier(.2, .7, .2, 1); } 25.71%, 80% { opacity: 1; transform: none; } 87.14% { opacity: 0; transform: none; } 87.15%, 100% { opacity: 0; transform: scale(.6); } } .v2-hero .is-playing .hx-draw .ink { stroke-dasharray: 1; animation: hx-cy-ink 7s linear .9s infinite both; } .v2-hero .is-playing .hx-draw--band .ink { animation-name: hx-cy-ink-a; } .v2-hero .is-playing .hx-draw--link .ink { animation-name: hx-cy-ink-b; } .v2-hero .is-playing .hx-draw--band .route-pencil { animation-duration: .5s; } .v2-hero .is-playing .hx-draw--link .route-pencil { animation-duration: .45s; } .v2-hero .is-playing .hx-draw .n1 .ring { animation: hx-cy-ring-a 7s linear .9s infinite both; } .v2-hero .is-playing .hx-draw .n2 .ring { animation: hx-cy-ring-b 7s linear .9s infinite both; } .v2-hero .is-playing .hx-draw .n3 .ring { animation: hx-cy-ring-c 7s linear .9s infinite both; } .v2-hero .is-playing .hx-draw .n1 .gl { animation: hx-cy-gl-n1 7s linear .9s infinite both; } .v2-hero .is-playing .hx-draw .n2 .gl { animation: hx-cy-gl-b 7s linear .9s infinite both; } .v2-hero .is-playing .hx-draw .n3 .gl { animation: hx-cy-gl-c 7s linear .9s infinite both; } .v2-hero .is-playing .hx-draw .gild { animation: hx-cy-gild 7s linear .9s infinite both; } .v2-hero .is-playing .hx-draw .flourish { animation: hx-cy-flourish 7s linear .9s infinite both; } /* The drawing loops, and the goal with it, so it carries a pause (WCAG 2.2.2): a quiet round button at its corner, on every device, "Pause the animation" / "Play the animation". The letter's button (.lt-motion) shares these rules and, once its typing ends, replays it (.is-replay, the site's own turning arrow). A button goes (.is-done) only before its motion starts and under reduced motion; js/site.js sets that, moving keyboard focus off the button first, so no CSS rule hides it under reduced motion. */ .hx-motion { grid-area: art; align-self: end; justify-self: end; position: relative; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--cream-surface); color: var(--slate); cursor: pointer; } .hx-motion:hover { color: var(--navy); border-color: var(--graphite-soft); } .hx-motion svg { width: 16px; height: 16px; } .hx-motion .i-play, .hx-motion .i-replay, .hx-motion.is-paused .i-pause, .hx-motion.is-replay .i-pause { display: none; } .hx-motion.is-paused .i-play, .hx-motion.is-replay .i-replay { display: block; } .hx-motion.is-done { display: none; } /* not started yet, a held Tweak, or reduced motion: nothing to pause or replay */ /* ---------- the hero below 981px: the drawing is the hero's background ---------- Anchored at the top end. The seal (Q) sits beside the status line and the first headline line; the sketch runs behind the text at 25%; the walked route, inked and gilded, sits in a band between the lead and the form, and climbs the end margin to the seal, never under text. The form sits on a raised white card so no line crosses a field. Tablets get one column beside the text instead. */ .v2-hero .hx-title { max-width: 8.4em; } /* two lines everywhere: "What if university / were invented today?" */ .hx-card { display: contents; } /* desktop: the form, terms and trust line place themselves */ .hx-draw--top, .hx-draw--link, .hx-draw--band, .hx-draw--tab { display: none; } .hx-draw .faint { opacity: .25; } /* the sketch behind the text */ .hx-draw .gl-core-md { font-size: 21px; } @media (max-width: 980px) { .v2 .v2-hero .hx-grid { position: relative; grid-template-areas: "status" "h1" "lead" "band" "card" "watch" "gloss"; grid-template-rows: auto auto auto 54px auto auto auto; } .v2 .v2-hero .hx-status, .v2 .v2-hero .hx-title, .v2 .v2-hero .hx-lead { position: relative; z-index: 1; } .v2 .v2-hero .hx-art { grid-area: status-start / 1 / band-end / 2; position: relative; z-index: 0; margin: 0; align-self: stretch; pointer-events: none; } .v2 .v2-hero .hx-art .hx-draw { position: absolute; width: auto; height: auto; } .v2 .v2-hero .hx-art .hx-draw--wide { display: none; } .v2 .v2-hero .hx-art .hx-draw--top { display: block; top: 0; inset-inline-end: -12px; width: 240px; height: 240px; } /* the seal sits 18px in from the screen edge */ .v2 .v2-hero .hx-art .hx-draw--link { display: block; top: 32px; bottom: 36px; inset-inline-end: -10px; width: 60px; } /* from the seal's centre to C's centre; its bow runs 10px into the gutter */ .v2 .v2-hero .hx-art .hx-draw--band { display: block; bottom: 0; inset-inline-end: 0; width: 100%; max-width: 350px; } .hx-card { display: block; grid-area: card; position: relative; z-index: 1; max-width: 592px; padding: 12px 16px 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-card); } .v2 .v2-hero .hx-form { margin: 0; max-width: none; } .v2 .v2-hero .terms-line { margin-top: 12px; } .v2 .v2-hero .hx-motion { grid-area: band; align-self: end; justify-self: start; margin: 0 0 8px; } /* the band's start corner, 8px clear of the card */ .v2 .v2-hero .hx-watch { margin-top: 12px; } .v2 .v2-hero .hx-gloss { margin-top: 18px; } } @media (min-width: 641px) and (max-width: 980px) { .v2 .v2-hero .hx-lead { max-width: 42ch; } /* leaves the column beside the text for the drawing */ .v2 .v2-hero .hx-art { min-height: 300px; } /* the answer is shorter than the old lead: the column keeps its 300px, so the seal never rises past the status line */ .v2 .v2-hero .hx-grid { grid-template-rows: auto auto auto 24px auto auto auto; } .v2 .v2-hero .hx-art .hx-draw--top, .v2 .v2-hero .hx-art .hx-draw--link, .v2 .v2-hero .hx-art .hx-draw--band { display: none; } .v2 .v2-hero .hx-art .hx-draw--tab { display: block; bottom: 0; inset-inline-end: 0; width: 260px; height: 300px; } .v2 .v2-hero .hx-motion { justify-self: end; margin-inline-end: 216px; } /* the column's start corner */ } @media (max-width: 640px) { /* the button still ends above 640px on a 390 phone */ .v2-hero.hx { padding-top: 12px; } .v2-hero .hx-status { margin-bottom: 6px; } .v2-hero .hx-title { font-size: 38px; } .v2-hero .hx-lead { margin-top: 12px; padding-inline-end: 12px; font-size: 16px; line-height: 1.5; } /* air between the text and the margin route */ .hx-answer { font-size: clamp(20px, 5.6vw, 22px); } /* "It would start from your goal:" keeps one line down to 320px */ .hx-cta { margin-top: 8px; } .hx-card { margin-inline: -12px; padding: 12px 10px 14px; } /* bleeds into the gutter, so the chips keep one row */ .v2-hero .aim { margin-bottom: 12px; } .v2-hero .hx-label { margin-bottom: 6px; } .terms-line { font-size: 14px; } } /* ---------- the founding-seat form: one component, every state (deck 1.14) --- */ .wl { position: relative; max-width: 560px; } .wl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "input button" "msg msg"; column-gap: 10px; align-items: start; } .wl-row .input { grid-area: input; min-height: 54px; } .wl-row .btn { grid-area: button; min-width: 244px; } /* no shift when the label changes */ .wl-msg { grid-area: msg; display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; font-size: .90625rem; line-height: 1.45; font-weight: 600; color: var(--slate); } .wl-msg:empty { margin: 0; } /* Every state's message sits in the paragraph as hidden children (LV-3), so it is never :empty; at rest, with all of them hidden, it takes no room either. */ .hx-form .wl-msg:not(:has(> :not([hidden]))) { margin: 0; } /* .hx-form: outranks hero-directions.css's .hx-form .form-message:not(:empty) */ .wl-msg svg { flex: none; width: 18px; height: 18px; margin-top: 1px; } .wl-msg.is-error { color: var(--terracotta-deep); } .wl-msg.is-step { color: var(--navy); } /* "One more step": a thing to do, not an error */ .wl-msg [data-msg="domain"] strong { font-weight: 700; overflow-wrap: anywhere; } /* JavaScript off: css/noscript.css hides the fields (nothing can post natively) and this line says how to sign up instead. */ .wl-noscript { margin: 0; font-size: .96875rem; line-height: 1.55; color: var(--ink); } .wl-row .input[aria-invalid="true"] { border: 2px solid var(--terracotta); padding-inline: 15px; } .wl-row .input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px var(--terracotta-wash); } /* The kit focuses a field when it flags it, so the error look is the focused one: the ring goes terracotta too, never a green ring round a red field. */ .wl-row .input[aria-invalid="true"]:focus-visible { outline-color: var(--terracotta); } .wl-row .input[readonly] { color: var(--slate); } .wl-row .btn.is-busy, .wl-row .btn.is-busy:disabled { /* sending: working, not dead */ background: var(--verdigris-deep); color: #fff; opacity: 1; filter: none; box-shadow: none; cursor: progress; transform: none; } .wl .hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; } .wl-done { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; padding: 16px 18px 18px; background: var(--cream-surface); border: 1px solid var(--line); border-radius: var(--r-lg); } .wl-done:focus { outline: none; } .wl-done-mark { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--verdigris); background: var(--verdigris-wash); color: var(--verdigris-ink); } .wl-done-mark svg { width: 20px; height: 20px; } .wl-done-title { padding-top: 1px; font-size: 1.125rem; line-height: 1.35; font-weight: 700; color: var(--navy); } .wl-done-body { font-size: .96875rem; line-height: 1.55; color: var(--ink); } @media (max-width: 640px) { .wl-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "input" "msg" "button"; } .wl-row .btn { width: 100%; min-width: 0; margin-top: 10px; } /* full width: the 244px no-shift floor has no job here */ .wl-done { grid-template-columns: minmax(0, 1fr); } .wl-done-mark { grid-row: auto; width: 36px; height: 36px; margin-bottom: 6px; } } /* ---------- the aiming chips: optional, first step of the form ---------------- */ /* Native radios named "interest", so a chosen chip fills the form's existing field answer with the full field name, whatever the chip shows. Each radio sits over its own chip, a 44px tap area. "I'm aiming at:" sits above the chips at every width. On phones the chips take short labels (Quantum, AI, Robotics, Other) and all four share one row, so none hides off screen; a narrower form (a 320 phone; both phone forms are the same width) sets them two by two. A pencil roundel inks in when a chip is chosen, so the choice is never colour alone and a chip never changes width. */ .wl { container-type: inline-size; } .aim { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; margin: 0 0 16px; padding: 0; border: 0; } .aim-legend { float: left; float: inline-start; flex: 0 0 100%; margin: 0; margin-inline-start: 2px; padding: 0; font-size: .875rem; line-height: 1.4; font-weight: 600; color: var(--navy); } .aim-row { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; } .aim-chip { position: relative; isolation: isolate; flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding-block: 0; padding-inline: 10px 14px; font-size: .9375rem; font-weight: 600; line-height: 1.2; color: var(--navy); white-space: nowrap; cursor: pointer; user-select: none; } .aim-short { display: none; } .aim-face { position: absolute; inset: 0; z-index: -1; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--cream-surface); } .aim-input { position: absolute; inset: -2px -1px; z-index: 1; width: auto; height: auto; margin: 0; opacity: 0; cursor: pointer; } .aim-chip:hover .aim-face { background: #fff; border-color: var(--graphite-soft); } .aim-mark { flex: none; width: 16px; height: 16px; } .aim-ring { fill: none; stroke: var(--line-control); stroke-width: 1.5; } /* the unchosen roundel: 4.1:1 on the face, 4.3:1 on hover */ .aim-tick { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; } .aim-input:checked ~ .aim-face { background: var(--verdigris-wash); border-color: var(--verdigris); } .aim-input:checked ~ .aim-text { color: var(--verdigris-ink); } .aim-input:checked ~ .aim-mark .aim-ring { fill: var(--verdigris); stroke: var(--verdigris); } .aim-input:checked ~ .aim-mark .aim-tick { opacity: 1; } .aim-input:focus-visible ~ .aim-face { outline: 3px solid var(--verdigris); outline-offset: 2px; } @media (max-width: 640px) { .aim-row { flex: 1 1 100%; gap: 5px; } .aim-chip { flex: 1 1 auto; justify-content: center; gap: 4px; padding-inline: 7px 9px; font-size: .875rem; } .aim-mark { width: 14px; height: 14px; } .aim-long { display: none; } .aim-short { display: inline; } } /* All four short chips need about 310px; a narrower form sets them two by two. Should a phone's fonts run wider still, the row wraps rather than hiding a chip. */ @container (max-width: 319px) { .aim-chip { flex: 1 1 calc(50% - 3px); } } /* ---------- the form checks (Step 10, 25 Sep) ------------------------------------- */ /* "Which field? (optional)" shows only while "Something else" is chosen, between the chips and the email field; choosing another option hides it, keeping what was typed for when "Something else" comes back (it is sent only with that). As people type, up to five suggestions open under it on a raised white card; a tap fills the box, and whatever else they type is kept. The box's two messages and the email's "empty" message share the error style: the icon, the words beside the field, the field ruled in terracotta, never colour alone. The email hint, "Did you mean …?", is help, not an error: no error colour, no alert icon, the field left as it is. After sending, "Check your inbox" names the address, with "Change it" to bring the form back. */ .wl-other { margin: 0 0 16px; } .hx-optional { font-weight: 500; color: var(--slate); } .wl-combo { position: relative; } .wl-combo .input { min-height: 54px; } .wl-combo .input[aria-invalid="true"] { border: 2px solid var(--terracotta); padding-inline: 15px; } .wl-combo .input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px var(--terracotta-wash); } .wl-combo .input[aria-invalid="true"]:focus-visible { outline-color: var(--terracotta); } /* as .wl-row's, above */ .wl-suggest { position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-card); } .wl-suggest li { min-height: 44px; padding: 11px 12px; border-radius: 10px; font-size: 1rem; line-height: 1.375rem; color: var(--ink); cursor: pointer; } .wl-suggest li strong { font-weight: 700; color: var(--navy); } .wl-suggest li:hover, .wl-suggest li.is-active { background: var(--verdigris-wash); } /* The option the arrow keys have reached (aria-activedescendant; focus stays in the box) is the one Enter picks: a verdigris rule round it, 4.9:1 on the list and 4.0:1 on the wash, not the tint alone. */ .wl-suggest li.is-active { outline: 2px solid var(--verdigris); outline-offset: -2px; } @media (forced-colors: active) { .wl-suggest li.is-active { outline-color: Highlight; } } .wl-msg.is-hint { flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; background: var(--cream-surface); border: 1px solid var(--line); border-radius: var(--r-md); font-size: .9375rem; font-weight: 500; color: var(--ink); } .wl-hint-text strong { font-weight: 700; color: var(--navy); overflow-wrap: anywhere; } .wl-hint-actions { display: flex; flex-wrap: wrap; gap: 8px; } .wl-row .wl-hint-actions .btn { grid-area: auto; width: auto; min-width: 0; min-height: 44px; margin: 0; padding: 0 14px; font-size: .90625rem; } .wl-done-sent { grid-column: 2; margin-top: 6px; font-size: .9375rem; line-height: 1.5; color: var(--ink); } .wl-done-sent strong { color: var(--navy); overflow-wrap: anywhere; } .wl-change { /* a text button; 44px tall without a taller line */ padding: 12px 2px; margin: -12px -2px; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 700; color: var(--verdigris-ink); text-decoration: underline; text-decoration-color: rgba(47, 125, 107, .45); text-decoration-thickness: 1.5px; text-underline-offset: .18em; } .wl-change:hover { text-decoration-color: var(--verdigris); } @media (max-width: 640px) { .wl-done-sent { grid-column: auto; } .v2-hero .wl-other { margin-bottom: 12px; } } /* ---------- the page: more air, shorter lines ------------------------------- */ .v2 { --measure-v2: 52ch; } /* 70 characters or fewer a line */ .v2 .passage { padding: clamp(48px, 6vw, 88px) 0 clamp(36px, 4.4vw, 60px); } .v2 .passage .prose { max-width: var(--measure-v2); } .v2 .rubric { margin-bottom: 20px; } .h-line { display: block; } /* one sentence per line in two-sentence headings */ .passage-intro { max-width: var(--measure-v2); margin: -4px 0 26px; font-size: clamp(1.0625rem, 1.0125rem + .16vw, 1.1875rem); line-height: 1.6; color: var(--slate); } .passage-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; margin-top: 30px; } .passage-foot .catchword { margin: 0; margin-inline-start: auto; } .more { display: inline-flex; align-items: center; min-height: 44px; font-size: .96875rem; font-weight: 700; color: var(--verdigris-ink); text-decoration: underline; text-decoration-color: rgba(47, 125, 107, .45); text-decoration-thickness: 1.5px; text-underline-offset: 5px; } .more:hover { text-decoration-color: var(--verdigris); } .inline-link { padding-block: 12px; color: var(--verdigris-ink); text-decoration: underline; text-decoration-color: rgba(47, 125, 107, .45); text-decoration-thickness: 1.5px; text-underline-offset: .18em; } .inline-link:hover { text-decoration-color: var(--verdigris); } .v2 .initial { float: inline-start; margin: .12em 0 6px; margin-inline-end: 18px; } /* ---------- 5 · a look inside the workshop (the plates) ----------------------- */ .plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; } .vplate { margin: 0; min-width: 0; } .vplate--lead { grid-column: 1 / -1; } .vplate-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--r-lg); } .vplate-sketch { position: absolute; inset: 0; width: 100%; height: 100%; } .vplate-sketch * { vector-effect: non-scaling-stroke; } .vplate-sketch .pg { fill: none; stroke: var(--graphite); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .vplate-play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; display: grid; place-items: center; padding: 0; border: 2px solid var(--verdigris); border-radius: 50%; background: var(--cream-surface); color: var(--verdigris-ink); cursor: pointer; transition: background-color .2s, transform .18s var(--ease-out); } .vplate-play:hover { background: var(--verdigris-wash); transform: translateY(-1px); } .vplate-play svg { width: 26px; height: 26px; transform: translateX(2px); } .vplate-cap { margin-top: 14px; } .vplate-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; } .vplate-head .pill { align-self: center; } .vplate-cap h3 { font-size: 1.3125rem; } .vplate--lead .vplate-cap h3 { font-size: var(--fs-title); } .vplate-cap p { margin-top: 8px; max-width: var(--measure-v2, 60ch); font-size: 1rem; line-height: 1.55; color: var(--ink); } /* What happens in each clip, in words: the lines of its caption file as a list, closed under the caption until asked for (the clips have no voice-over, WCAG 1.2.3). One quiet verdigris line with a 44 px target; the chevron turns when it is open. */ .vplate-desc { margin-top: 2px; } .vplate-desc > summary { display: block; width: fit-content; min-height: 44px; padding-block: 11px; list-style: none; cursor: pointer; font-family: var(--font-sans); font-size: .9375rem; font-weight: 700; line-height: 1.375rem; color: var(--verdigris-ink); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: 5px; transition: text-decoration-color .2s; } .vplate-desc > summary::-webkit-details-marker { display: none; } .vplate-desc > summary:hover { text-decoration-color: rgba(47, 125, 107, .45); } /* The ring hugs the 44 px target: the site's 3 px offset would lay it over the caption line above and the first line of the open list below. 6 px of inline room (taken back by the margin, so the words stay on the caption's edge) keeps it off the first and last letters. */ .vplate-desc > summary { padding-inline: 6px; margin-inline: -6px; } .vplate-desc > summary:focus-visible { outline-offset: 0; } .vplate-desc-mark { display: inline-block; width: 16px; height: 16px; margin-inline-start: 6px; vertical-align: -3px; transition: transform .2s var(--ease-out); } .vplate-desc[open] .vplate-desc-mark { transform: rotate(180deg); } .vplate-desc ol { display: grid; gap: 6px; max-width: var(--measure-v2, 60ch); margin: 0 0 4px; padding-inline-start: 1.6em; font-size: .9375rem; line-height: 1.55; color: var(--ink); } .vplate-desc li { padding-inline-start: 2px; text-wrap: pretty; } .vplate-desc li::marker { color: var(--slate); font-variant-numeric: tabular-nums; } .vplate-controls { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-block: 4px; padding-inline: 4px 12px; background: var(--cream-surface); border: 1px solid var(--line); border-radius: var(--r-md); } .vctl { flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--navy); cursor: pointer; } .vctl:hover { background: var(--cream-2); } .vctl svg { width: 22px; height: 22px; } .vseek { flex: 1 1 auto; min-width: 60px; height: 44px; margin: 0; accent-color: var(--verdigris); cursor: pointer; } .vtime { flex: none; font-family: var(--font-mono); font-size: .78125rem; letter-spacing: .02em; color: var(--slate); white-space: nowrap; } .vcc { flex: none; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: transparent; font-family: var(--font-sans); font-size: .875rem; font-weight: 700; color: var(--navy); cursor: pointer; } .vcc[aria-pressed="true"] { background: var(--verdigris-wash); border-color: var(--verdigris); color: var(--verdigris-ink); } /* The caption strip (Captions on) lies along the top of the picture, where the .vtt cues put it (line:1): the bottom of each clip carries text of its own, which the strip must never cover or repeat beside. It takes room only while a line is current, and never takes a click meant for the video. */ .vplate-captions { position: absolute; inset-block-start: 0; inset-inline: 0; margin: 0; padding: 8px 16px 9px; pointer-events: none; background: rgba(8, 29, 58, .9); color: var(--on-navy); font-size: 1rem; line-height: 1.4; text-align: center; text-wrap: balance; } .vplate-captions:empty { display: none; } .vplate--small .vplate-captions { font-size: .9375rem; } @media (max-width: 640px) { .plates { grid-template-columns: minmax(0, 1fr); gap: 34px; } .vplate-play { width: 56px; height: 56px; } .vplate-captions, .vplate--small .vplate-captions { padding: 6px 10px 7px; font-size: .875rem; line-height: 1.35; } } /* ---------- section grounds: every section a full-width band on its own paper tone ---- */ /* Deeper paper for the three big moments and the close, lighter paper for support, and the navy band stays the page's one dark ground. No two neighbouring sections share a tone. */ .v2 .v2-hero.hx { border-bottom: 0; } .sec { grid-column: 1 / -1; min-width: 0; margin-inline: calc(-1 * var(--gutter)); padding: clamp(56px, 6.5vw, 96px) var(--gutter); } .sec.quiet, .sec--final { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w); column-gap: clamp(36px, 4.5vw, 64px); align-items: start; } .sec-main { grid-column: 1; min-width: 0; } .sec-rail { grid-column: 2; min-width: 0; } /* A quiet section with nothing in its rail (the plates, the three questions) takes the whole width rather than sitting beside an empty column, so the clips are larger on a laptop than on a tablet, never smaller. */ .sec.quiet > .sec-main:only-child { grid-column: 1 / -1; } /* An onward line ends on the content's end edge in every section, the moments' and the quiet ones' alike: in a section with a rail it sits under both columns (#picture), not at the main column's end. */ .sec.quiet > .catchword { grid-column: 1 / -1; } .sec-rail--leo { align-self: end; display: flex; justify-content: center; } .sec-rail--leo img { width: 232px; height: auto; } .sec--poster { background: var(--peach-deep); } .sec--picture { background: var(--cream-surface); } .sec--parts { background: var(--line-soft); } .sec--peek { background: var(--cream-surface); } .sec--charter { background: var(--line); } .sec--faq { background: transparent; } /* the sheet's own cream */ .sec--final { background: var(--peach-deep); } .sec--picture .letter { background: var(--cream); } @media (max-width: 980px) { .sec.quiet, .sec--final { grid-template-columns: minmax(0, 1fr); } .sec-rail { display: none; } } /* No content-visibility on these sections (tried for PA-2, 30 Sep): it cut the longest load task from ~700 to ~260 ms, but every jump to #peek, #charter, #faq or #join then landed hundreds of px off, as the placeholder heights gave way to the real ones mid-scroll. */ /* ---------- the three big moments: full width, display type, more air ------------ */ /* Display caps are in em (S5): 14.712em = the old 24ch and 12.26em = 20ch of Fraunces 600 at opsz 144, so the metric-matched fallback face (css/site.css) breaks the lines where Fraunces will. The problem (a poster), the four parts (the centerpiece) and the founding charter (the conversion moment) span the sheet. Everything between them is quieter. */ .sec.moment { padding: clamp(72px, 9vw, 136px) var(--gutter) clamp(56px, 7vw, 104px); } .moment .rubric { margin-bottom: 0; } .moment .rubric h2 { max-width: 14.712em; font-family: var(--font-display); font-size: var(--fs-moment); line-height: 1.06; letter-spacing: -.015em; font-variation-settings: "opsz" 144; } .moment .rubric svg { width: 26px; height: 26px; margin-top: .45em; } .moment-intro { max-width: 46ch; margin-top: 18px; font-size: clamp(1.125rem, .7625rem + .65vw, 1.375rem); line-height: 1.5; color: var(--slate); } .moment > .catchword.onward { margin-top: clamp(36px, 4.4vw, 64px); } /* 2 · the problem, as a poster: the heading set largest, three lines one each, a smaller closing line */ .poster .rubric h2.poster-title { max-width: 12.26em; font-size: var(--fs-poster); line-height: 1.04; letter-spacing: -.02em; color: var(--navy); text-wrap: balance; } .poster .rubric:has(.poster-title) svg { margin-top: .6em; } .poster .poster-lines p { max-width: none; font-size: clamp(1.25rem, .55rem + 1.39vw, 1.75rem); text-wrap: pretty; } /* one line each where the width allows */ .poster-close { margin: clamp(36px, 4.4vw, 64px) 0 0; padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--line); font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, .3rem + 2.41vw, 2.5rem); line-height: 1.15; letter-spacing: -.012em; color: var(--navy); font-variation-settings: "opsz" 96; } .poster-lines { display: grid; gap: clamp(16px, 1.8vw, 26px); margin-top: clamp(32px, 4vw, 56px); } .poster-lines p { max-width: 34ch; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, .3rem + 2.41vw, 2.5rem); line-height: 1.2; letter-spacing: -.012em; color: var(--ink); text-wrap: balance; font-variation-settings: "opsz" 96; } /* Below 981px the lines are set at 20-21px and run to two or three lines each: text leading, and the face's own optical size for that size (a text cut) instead of the hairline display cut. */ @media (max-width: 980px) { .poster .poster-lines p { line-height: 1.34; font-family: var(--font-serif); font-variation-settings: normal; font-optical-sizing: auto; } } /* 3 · picture it (quiet) */ .letter { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 20px; align-items: center; max-width: 620px; margin: 0; padding: 24px 30px 26px; background: var(--cream-surface); border: 1px solid var(--line); border-radius: var(--r-xl); } .letter blockquote { margin: 0; } .letter blockquote p { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.3125rem, .7125rem + 1.05vw, 1.6875rem); line-height: 1.3; letter-spacing: -.01em; color: var(--navy); text-wrap: balance; font-variation-settings: "opsz" 72; } .letter-mark { width: 48px; height: 48px; } .letter-mark .lm-ring { fill: none; stroke: var(--navy); stroke-width: 1.5; } .letter-mark .lm-core { fill: var(--navy); } /* a plain navy seal: the letter stands for any goal */ /* The goal types itself on its own line. The line is a one-cell grid holding all three phrases, unseen, so it is always as wide and as tall as the longest one and nothing around it moves. */ .letter { position: relative; } .lt-line { display: grid; justify-content: start; } .lt-line > span { grid-area: 1 / 1; white-space: nowrap; } .lt-size { visibility: hidden; padding-inline-end: 4px; } /* room for the caret too */ .lt-caret { display: none; } .letter.is-typing .lt-caret { display: inline-block; width: 2px; height: 1em; margin-inline-start: 2px; vertical-align: -.14em; background: currentColor; } /* The same quiet button as the drawing, at the letter's corner: Pause while it types, then Replay. */ .letter .lt-motion { grid-area: auto; position: absolute; inset-inline-end: 12px; inset-block-end: 12px; } .after-letter { max-width: var(--measure-v2); margin-top: 22px; font-size: var(--fs-body-lead); line-height: 1.6; } @media (max-width: 640px) { .letter { grid-template-columns: minmax(0, 1fr); row-gap: 14px; padding: 20px 20px 22px; } .letter-mark { width: 40px; height: 40px; } } /* 4 · the four parts, the centerpiece: the old part in pencil, crossed out; the new part inked large beneath it as the heading (a clear step under the section's h2); a large drawing beside. */ .parts { list-style: none; margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; } .part { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(36px, 5vw, 80px); align-items: center; padding: clamp(40px, 5vw, 72px) 0; border-top: 1px solid var(--line-soft); } .part:first-child { border-top: 0; padding-top: 0; } .part-art { width: 100%; max-width: 480px; } .part-old { margin: 0 0 12px; font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.25rem, .3875rem + 1.48vw, 1.75rem); line-height: 1.2; color: var(--slate); } .part-old s { position: relative; text-decoration: none; } .part-old s::after { content: ""; position: absolute; inset-inline: -6px; top: 50%; height: 12px; transform: translateY(-40%) rotate(-2deg); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M1 6.5C18 3.5 36 7 54 4.5S86 6 99 3' fill='none' stroke='%234A4E47' stroke-width='2.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } .part-text h3 { margin: 0 0 16px; font-family: var(--font-display); font-size: var(--fs-subhead); line-height: 1.08; letter-spacing: -.015em; font-variation-settings: "opsz" 144; } .part-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 16px; } .part-head h3 { margin: 0; } .part-body { max-width: 42ch; font-size: var(--fs-body-lead); line-height: 1.6; } .part-note { max-width: 44ch; margin-top: 14px; font-size: 1rem; line-height: 1.55; } .part-note .pill { margin-inline-end: 6px; vertical-align: 1px; } .big-art { display: block; width: 100%; height: auto; overflow: visible; } .big-art .paper { fill: var(--cream-surface); stroke: var(--line); stroke-width: 2; } .big-art .fold { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 4 6; } .big-art .ink { fill: none; stroke: var(--verdigris); stroke-width: 3; stroke-linecap: round; } .big-art .pen { fill: none; stroke: var(--graphite-soft); stroke-width: 2; stroke-linecap: round; } .big-art .dash { stroke-dasharray: 5 7; } .big-art .n-ink { fill: var(--verdigris-wash); stroke: var(--verdigris); stroke-width: 2.5; } .big-art .n-open { fill: var(--cream-surface); stroke: var(--graphite); stroke-width: 2; } .big-art .n-pen { fill: var(--cream-surface); stroke: var(--graphite-soft); stroke-width: 2; stroke-dasharray: 4 5; } .big-art .gl { font-family: var(--font-serif); font-weight: 600; font-size: 17px; text-anchor: middle; dominant-baseline: central; fill: var(--verdigris-ink); } .big-art .gl-open { fill: var(--navy); } .big-art .gl-pen { fill: var(--graphite); font-weight: 500; } .big-art .gl-cream { fill: var(--cream); font-size: 22px; } .big-art .dest-ring { fill: none; stroke: var(--navy); stroke-width: 2; } .big-art .dest-core { fill: var(--navy); } .big-art .you { fill: var(--verdigris); } .big-art .you-ring { fill: none; stroke: var(--verdigris); stroke-width: 2; opacity: .45; } .big-art .lbl { font-family: var(--font-sans); font-weight: 600; font-size: 14px; fill: var(--slate); } .big-art .mono { font-family: var(--font-mono); font-weight: 600; font-size: 14px; fill: var(--slate); } .big-art .r-navy { fill: none; stroke: var(--navy); stroke-width: 4; stroke-linecap: round; } .big-art .r-text { fill: none; stroke: var(--graphite-soft); stroke-width: 3; stroke-linecap: round; } .big-art .r-line { fill: none; stroke: var(--line); stroke-width: 2; } .big-art .row { fill: var(--cream-2); } .big-art .box { fill: var(--cream-surface); stroke: var(--graphite); stroke-width: 2; } .big-art .box-done { fill: var(--verdigris-wash); stroke: var(--verdigris); stroke-width: 2; } .big-art .tick { fill: none; stroke: var(--verdigris-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .big-art .day { fill: var(--cream-surface); stroke: var(--line); stroke-width: 1.5; } .big-art .day-now { fill: var(--verdigris-wash); stroke: var(--verdigris); stroke-width: 2; } .big-art .day-busy { fill: var(--cream-2); stroke: var(--graphite-soft); stroke-width: 1.5; } .big-art .hatch { fill: none; stroke: var(--graphite-soft); stroke-width: 1.5; stroke-linecap: round; } .big-art .board { fill: var(--cream-2); stroke: var(--line); stroke-width: 2; } .big-art .card { fill: var(--cream-surface); stroke: var(--line); stroke-width: 1.5; } .big-art .pin { fill: var(--navy); } .big-art .pin-hi { fill: var(--cream); opacity: .7; } .big-art .ok { fill: var(--verdigris-wash); stroke: var(--verdigris); stroke-width: 2; } /* From 720px the parts alternate in two columns (S4, 3 Oct; was from 981px): 1 and 3 drawing at the start, 2 and 4 drawing at the end. Grid order, not left and right, so the Arabic page mirrors itself. A tablet so keeps the desktop's composition instead of a phone column with an empty end beside it. Below 720px the parts stack, drawing above the text, in one column of at most 460px kept in the middle, so a small tablet or a phone on its side has even margins rather than an empty end column. Phones: each part takes its own height (no one-screen minimum, which left a blank band of 130-270px under every part), and the parts are spaced well apart instead. */ @media (min-width: 720px) { .part:nth-child(even) .part-art { order: 2; justify-self: end; } } @media (max-width: 719px) { .part { grid-template-columns: minmax(0, 460px); justify-content: center; row-gap: 28px; } .part-art { max-width: 460px; } } @media (max-width: 640px) { .part { row-gap: 22px; padding-block: 52px 60px; } .parts { margin-top: 28px; } .part:first-child { padding-top: 8px; } } /* ---------- the status pills ------------------------------------------------ */ /* Status pills: "In testing" is site.css .pill.testing (white, navy, hairline); "Not open yet" is graphite, the colour of future work, with a dashed roundel like a locked course. */ .pill.notyet { background: rgba(154, 148, 132, .16); border: 1px dashed var(--graphite); color: var(--slate); } .pill.notyet svg { color: var(--graphite); } /* ---------- 7 · the founding charter, the conversion moment ------------------ */ /* A document on the sheet: a raised page with a double rule, the page's one illuminated initial, the fields opening first and three articles. Flat, like the rest of the sheet: no shadow. */ .charter { position: relative; max-width: 880px; margin: 0 auto; padding: clamp(36px, 5vw, 72px) clamp(22px, 5vw, 72px) clamp(32px, 4.4vw, 60px); background: var(--cream-surface); border: 1px solid var(--line); border-radius: var(--r-xl); outline: 1px solid var(--line); outline-offset: -10px; } .charter-head { text-align: center; } .charter-head > svg { display: block; width: 26px; height: 26px; margin: 0 auto 14px; color: var(--gold); } .charter-head h2 { font-family: var(--font-display); font-size: clamp(2.25rem, .2rem + 4.25vw, 3.875rem); line-height: 1.02; letter-spacing: -.02em; font-variation-settings: "opsz" 144; } .charter-sub { margin-top: 12px; font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.1875rem, .825rem + .65vw, 1.4375rem); line-height: 1.3; color: var(--slate); } .charter-intro { max-width: 50ch; margin: clamp(28px, 3.4vw, 44px) auto 0; font-size: clamp(1.125rem, 1.075rem + .16vw, 1.25rem); line-height: 1.6; } .opening { margin: clamp(28px, 3.4vw, 44px) 0 0; padding: 20px 0 22px; border-block: 1px solid var(--line); text-align: center; } .opening-lead { font-size: .90625rem; font-weight: 600; line-height: 1.4; color: var(--slate); } .seats { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 12px 0 0; padding: 0; } .seats li { display: grid; place-items: center; padding: 6px 12px; } .seats li + li { border-inline-start: 1px solid var(--line); } .seat-f { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.375rem, .5875rem + 1.53vw, 1.875rem); line-height: 1.12; letter-spacing: -.01em; color: var(--navy); text-wrap: balance; font-variation-settings: "opsz" 96; } .charter-ask { margin-top: 16px; text-align: center; font-size: 1rem; line-height: 1.5; color: var(--slate); } .articles { list-style: none; display: grid; gap: 16px; max-width: 640px; margin: clamp(28px, 3.4vw, 44px) auto 0; padding: 0; } .articles li { display: grid; grid-template-columns: 118px minmax(0, 1fr); column-gap: 16px; align-items: baseline; } .article-n { font-family: var(--font-serif); font-weight: 600; font-size: 1.1875rem; line-height: 1.4; color: var(--navy); white-space: nowrap; } .articles p { font-size: 1.125rem; line-height: 1.55; } .charter-foot { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: clamp(28px, 3.4vw, 44px); padding-top: 26px; border-top: 1px solid var(--line); text-align: center; } .small-line { font-size: .96875rem; line-height: 1.5; color: var(--slate); } @media (max-width: 640px) { .charter { outline-offset: -7px; } .seats { grid-template-columns: minmax(0, 1fr); margin-top: 4px; } .seats li { padding: 10px 2px; } .seats li + li { border-inline-start: 0; border-top: 1px solid var(--line-soft); } .seat-f { font-size: 1.375rem; } .articles li { grid-template-columns: minmax(0, 1fr); row-gap: 2px; } .charter-foot .btn { width: 100%; } } /* ---------- onward lines: the catchwords that pull the reader on ------------------ */ .catchword.onward { margin-top: clamp(28px, 3vw, 40px); font-size: var(--fs-lead); } .passage-foot .catchword.onward { margin-top: 0; } .band > .catchword { grid-column: 1 / -1; margin-top: 0; } .band .catchword a { color: var(--on-navy); text-decoration-color: rgba(244, 236, 218, .5); } .band .catchword a:hover { text-decoration-color: var(--on-navy); } /* ---------- quieter support: smaller headings, tighter rows ---------------------- */ .v2 .passage.quiet { padding: clamp(44px, 5vw, 76px) 0 clamp(36px, 4vw, 56px); } .quiet .rubric h2 { font-size: var(--fs-section); } .quiet .plates { gap: 28px 20px; } .vplate--small .vplate-cap { margin-top: 10px; } .vplate--small .vplate-cap h3 { font-size: 1.125rem; } .vplate--small .vplate-cap p { margin-top: 4px; font-size: .9375rem; line-height: 1.5; } .vplate--small .vplate-play { width: 48px; height: 48px; } .vplate--small .vplate-play svg { width: 20px; height: 20px; } .quiet .faq-list { gap: 8px; } .quiet .faq-question { padding: 14px 18px; font-size: 1.09375rem; } .quiet .faq-answer { padding: 0 18px 16px; font-size: 1rem; } /* ---------- 9 · the one navy band ------------------------------------------- */ .band { grid-column: 1 / -1; margin-inline: calc(-1 * var(--gutter)); padding: clamp(44px, 5.5vw, 76px) var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w); column-gap: clamp(36px, 4.5vw, 64px); row-gap: 26px; align-items: start; background: var(--navy); color: var(--on-navy); } .band .rubric svg { color: var(--gold-light); } /* gilding on navy */ .band h2 { color: var(--on-navy); } .band-copy > p { max-width: 54ch; font-size: 1.09375rem; line-height: 1.62; color: var(--on-navy-soft); } .v2 .band :focus-visible { outline-color: var(--on-navy); } @media (max-width: 980px) { .band { grid-template-columns: minmax(0, 1fr); } } /* ---------- 10 · three questions --------------------------------------------- */ .faq-h { margin: 0; font: inherit; letter-spacing: normal; } .v2 .faq-list { max-width: none; } .v2 .faq-answer p { max-width: var(--measure-v2); } /* ---------- 11 · the final call ---------------------------------------------- */ .v2-final .register { display: block; margin: 0; background: var(--peach); border: 1px solid var(--peach-deep); } .v2-final .register .lead { max-width: 46ch; margin: 0; } .v2-final .hx-form { margin: 22px 0 0; } .discord-line { margin-top: 12px; font-size: .9375rem; line-height: 1.5; color: var(--slate); } /* The data notice under every sign-up form: one line, not a selling claim. */ .form-privacy { margin: 12px 0 0; font-size: .90625rem; line-height: 1.5; color: var(--slate); } .form-privacy .inline-link { padding-block: 14px; } /* a 44px target without a taller line */ @media (max-width: 640px) { .form-privacy { font-size: .875rem; } } @media (max-width: 640px) { /* As the hero's card: the panel bleeds 12px into the gutter and keeps 10px inside, so its text still starts on the page's edge and both sign-up forms on a phone are the same width (same chips, same button). */ .v2-final .register { margin-inline: -12px; padding: 24px 10px; } .v2-final .rubric h2 { font-size: 1.6875rem; } } /* ---------- the colophon ------------------------------------------------------ */ .v2-footer .footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); } .v2-footer .footer-links a { overflow-wrap: anywhere; } @media (max-width: 980px) { .v2-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .v2-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; } .v2-footer .footer-brand { grid-column: 1 / -1; } } .footer-brand .signature { margin-top: 10px; font-family: var(--font-serif); font-weight: 500; font-size: 1.125rem; line-height: 1.35; color: var(--on-navy-soft); } /* ---------- the phone sticky bar ------------------------------------------- */ .stickybar { display: none; } /* Phones held upright only: on a phone turned on its side (500px tall or less) the sticky header already takes a fifth of the screen, and the bar would take another fifth (js/site.js's query is the same, so is-shown and has-stickybar are never set there). An upright phone always keeps it, however short: a 320x568 phone in Safari reports about 460px once its toolbars are counted. */ @media (max-width: 640px) and (orientation: portrait), (max-width: 640px) and (min-height: 501px) { .stickybar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--gutter); padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(244, 236, 218, .96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); visibility: hidden; } .stickybar.is-shown { visibility: visible; } .stickybar p { font-size: .90625rem; font-weight: 600; line-height: 1.3; color: var(--navy); } .stickybar .btn { flex: none; min-height: 46px; padding: 0 16px; font-size: .9375rem; } /* While the bar is up (js/site.js sets html.has-stickybar exactly then), keyboard focus and anchor jumps stop above it, not under it (WCAG 2.4.11): its 67px, 12px of air, and the phone's home-indicator inset it pads itself by. */ html.has-stickybar { scroll-padding-block-end: calc(79px + env(safe-area-inset-bottom, 0px)); } } @media (max-width: 374px) { .stickybar { flex-wrap: wrap; row-gap: 8px; } .stickybar p, .stickybar .btn { flex: 1 1 100%; } html.has-stickybar { scroll-padding-block-end: calc(106px + env(safe-area-inset-bottom, 0px)); } /* two rows: 94px */ } /* ---------- boards that hold one component ----------------------------------- */ .board { box-sizing: border-box; position: relative; overflow: hidden; background: var(--cream); color: var(--ink); font-family: var(--font-sans); font-size: 1.09375rem; line-height: 1.62; } @media (min-width: 390px) and (max-width: 640px) { /* the band is 350px wide at the end: the button keeps to its start corner */ .v2 .v2-hero .hx-motion { justify-self: end; margin-inline-end: 306px; } } @media (max-width: 340px) { /* the status line fills the width: the seal drops below it */ .v2 .v2-hero .hx-art .hx-draw--top { top: 16px; } .v2 .v2-hero .hx-art .hx-draw--link { top: 48px; } } /* Plates at runtime (js/plates.js) */ /* Owned by js/plates.js (the media task): the script only adds and removes * these classes, it never writes a style. Keep this block last in the file. * * .vplate-video: the