/* Office of Public Delivery Color schemes fill the same seven slots — see :root. No neutral ground. */ /* ---------- Fonts ---------- Self-hosted from fonts/web/: PP Valve Stencil (wordmark), PP Neue Montreal Extrabold (About headings), PP Neue Montreal Text (body), PP Fuji (masthead), PP Object Sans (About body + burst/sticker accents). Zodiak (display serif) is the one remaining Fontshare CDN load — see . */ @font-face { font-family: 'PP Valve Stencil'; src: url('fonts/web/PPValve-StencilExtraboldItalic.woff2') format('woff2'), url('fonts/web/PPValve-StencilExtraboldItalic.woff') format('woff'); font-weight: 800; font-style: italic; font-display: swap; } @font-face { font-family: 'PP Neue Montreal'; src: url('fonts/web/PPNeueMontreal-Extrabold.woff2') format('woff2'), url('fonts/web/PPNeueMontreal-Extrabold.woff') format('woff'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'PP Neue Montreal Text'; src: url('fonts/web/PPNeueMontrealText-Book.woff2') format('woff2'), url('fonts/web/PPNeueMontrealText-Book.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'PP Neue Montreal Text'; src: url('fonts/web/PPNeueMontrealText-Bold.woff2') format('woff2'), url('fonts/web/PPNeueMontrealText-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'PP Object Sans'; src: url('fonts/web/PPObjectSans-Regular.woff2') format('woff2'), url('fonts/web/PPObjectSans-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'PP Object Sans'; src: url('fonts/web/PPObjectSans-Bold.woff2') format('woff2'), url('fonts/web/PPObjectSans-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'PP Object Sans'; src: url('fonts/web/PPObjectSans-Heavy.woff2') format('woff2'), url('fonts/web/PPObjectSans-Heavy.woff') format('woff'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'PP Fuji'; src: url('fonts/web/PPFuji-Light.woff2') format('woff2'), url('fonts/web/PPFuji-Light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'PP Fuji'; src: url('fonts/web/PPFuji-Regular.woff2') format('woff2'), url('fonts/web/PPFuji-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'PP Fuji'; src: url('fonts/web/PPFuji-Bold.woff2') format('woff2'), url('fonts/web/PPFuji-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } /* Every scheme fills the same slots: ink (text, footer) · paper (light panels) · pop (loud accent: header, buttons, stickers, selection) · deep (hero ground) · hot (call-band and portrait ground) · calm (functions ground) · accent (focus rings, hovers, form controls). hot-ink/hot-hover are the text colors on the hot ground — dark schemes flip them light. deep-ink/deep-title are the text colors on the deep ground — pastel schemes flip them dark. */ /* Scheme: Open Hours — ink, paper, chartreuse, cerulean, terracotta, mint. */ :root { --ink: #16181a; --paper: #f3f3f4; --pop: #cafe48; --deep: #007090; --hot: #e94f37; --calm: #62a87c; --accent: #007090; --hot-ink: var(--ink); --hot-hover: var(--paper); --deep-ink: var(--paper); --deep-title: var(--pop); /* Call band ground. Alternates used during design: deep, ink, calm. */ --call-band: var(--hot); --serif: 'Zodiak', Georgia, serif; --sans: 'PP Neue Montreal Text', Helvetica, Arial, sans-serif; --stencil: 'PP Valve Stencil', Helvetica, Arial, sans-serif; --rule: 2px solid var(--ink); --hairline: 1px solid rgba(22, 24, 26, 0.45); } /* Scheme: After Hours — space indigo, honeydew, royal gold, cherry rose, dusty denim. */ [data-theme="after-hours"] { --ink: #2c2c54; --paper: #e1efe6; --pop: #efcb68; --deep: #2c2c54; --hot: #a40e4c; --calm: #e1efe6; --accent: #6290c3; --hot-ink: var(--paper); --hot-hover: var(--pop); --hairline: 1px solid rgba(44, 44, 84, 0.45); } /* Scheme: Early Hours — rich mahogany, porcelain, vanilla custard, blush rose, maya blue. Mahogany is the ink, so the deep and hot grounds carry dark text instead of light. */ [data-theme="early-hours"] { --ink: #360a14; --paper: #f9f7f3; --pop: #eddea4; --deep: #c96480; --hot: #68bbf3; --calm: #f9f7f3; --accent: #c96480; --deep-ink: var(--ink); --deep-title: var(--paper); --hairline: 1px solid rgba(54, 10, 20, 0.45); } /* The About page runs its own pairing: Montreal headings on Object Sans body. Heading rules pull from --serif, so overriding the variables here restyles the whole page. */ .page-about { --serif: 'PP Neue Montreal', Helvetica, Arial, sans-serif; --sans: 'PP Object Sans', Helvetica, Arial, sans-serif; } .page-about .hero__title { letter-spacing: -0.015em; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--deep); } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: clip; } a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; } a:hover { color: var(--pop); } ::selection { background: var(--pop); color: var(--ink); } input, textarea, button { font-family: var(--sans); font-size: 19px; color: var(--ink); border-radius: 0; } input:focus, textarea:focus { outline: 3px solid var(--accent); outline-offset: -3px; } :focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; } /* ---------- Header ---------- */ .site-header { position: relative; border-bottom: var(--rule); background: var(--pop); } .wordmark { font-family: var(--stencil); font-weight: 800; font-style: italic; letter-spacing: 0.02em; } .site-header__bar { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 28px; flex-wrap: wrap; padding: 26px 5vw 20px; } .site-header__brand { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; } a.site-header__brand { border-bottom: none; } /* The mark worn as a sticker, 18F-style; the prose never says GPO. */ .site-header__badge { display: inline-block; background: var(--ink); color: var(--pop); padding: 0.3em 0.4em 0.36em; font-size: clamp(17px, 2.2vw, 32px); line-height: 1; } .site-header__name { font-family: 'PP Fuji', Helvetica, Arial, sans-serif; font-size: clamp(26px, 3.6vw, 54px); font-weight: 300; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.05; } .site-header__nav { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 19px; line-height: 1.35; } .site-header__tools { display: flex; align-items: center; gap: 24px; } /* Scheme picker — one chip per scheme showing its own colors; the active chip wears a ring. Chip stripes are literal colors on purpose: every chip must keep showing its scheme regardless of which one is applied. */ .scheme-picker { display: flex; align-items: center; gap: 10px; } .scheme-swatch { width: 22px; height: 22px; padding: 0; border: 2px solid var(--ink); cursor: pointer; } .scheme-swatch[data-theme-choice="open-hours"] { background: linear-gradient(135deg, #007090 0 34%, #e94f37 0 67%, #cafe48 0); } .scheme-swatch[data-theme-choice="after-hours"] { background: linear-gradient(135deg, #2c2c54 0 34%, #a40e4c 0 67%, #efcb68 0); } .scheme-swatch[data-theme-choice="early-hours"] { background: linear-gradient(135deg, #c96480 0 34%, #68bbf3 0 67%, #eddea4 0); } .scheme-swatch[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; } /* The global pop hover would vanish against the pop header. */ .site-header a:hover { color: var(--accent); } /* ---------- Hero ---------- */ .hero { padding: 8vh 5vw 7vh; background: var(--deep); color: var(--deep-ink); } .hero--about { padding: 7vh 5vw 6vh; } .hero__title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5.6vw, 92px); line-height: 0.95; letter-spacing: -0.02em; max-width: 24ch; text-wrap: balance; color: var(--deep-title); } .hero--about .hero__title { font-size: clamp(40px, 7.4vw, 132px); line-height: 0.9; max-width: 20ch; } .hero__columns { display: flex; flex-wrap: wrap; gap: 4vh 4vw; margin-top: 5vh; } .hero__columns p { margin: 0; font-size: 20px; line-height: 1.5; text-wrap: pretty; } .hero__col--wide { flex: 1 1 400px; max-width: 46ch; } .hero__col--narrow { flex: 1 1 340px; max-width: 40ch; margin-left: auto; } /* ---------- Call band ---------- */ .call-band { background: var(--call-band); color: var(--hot-ink); padding: 5vh 5vw 5.5vh; border-top: var(--rule); border-bottom: var(--rule); position: relative; } /* Sale-tag burst pinning the number as the Phone-a-Friend line. */ .call-band__burst { position: absolute; top: -3vh; right: 6vw; width: clamp(130px, 15vw, 210px); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--pop); color: var(--ink); font-family: 'PP Object Sans', var(--sans); font-weight: 700; font-size: clamp(13px, 1.3vw, 19px); line-height: 1.2; text-transform: uppercase; transform: rotate(-11deg); clip-path: polygon(50.0% 0.0%, 58.0% 9.8%, 69.1% 3.8%, 72.8% 15.9%, 85.4% 14.6%, 84.1% 27.2%, 96.2% 30.9%, 90.2% 42.0%, 100.0% 50.0%, 90.2% 58.0%, 96.2% 69.1%, 84.1% 72.8%, 85.4% 85.4%, 72.8% 84.1%, 69.1% 96.2%, 58.0% 90.2%, 50.0% 100.0%, 42.0% 90.2%, 30.9% 96.2%, 27.2% 84.1%, 14.6% 85.4%, 15.9% 72.8%, 3.8% 69.1%, 9.8% 58.0%, 0.0% 50.0%, 9.8% 42.0%, 3.8% 30.9%, 15.9% 27.2%, 14.6% 14.6%, 27.2% 15.9%, 30.9% 3.8%, 42.0% 9.8%); pointer-events: none; z-index: 5; } .call-band__number { display: block; border: none; font-weight: 700; font-size: clamp(40px, 11.4vw, 186px); line-height: 0.92; letter-spacing: -0.03em; } .call-band__number:hover { color: var(--hot-hover); } .call-band__actions { margin-top: 3.5vh; display: flex; flex-wrap: wrap; gap: 2.5vh 3vw; align-items: center; } /* Says out loud who the button is for — the band otherwise reads as a line for people who already work inside the failing system. */ .call-band__note { margin: 0; flex: 1 1 320px; max-width: 48ch; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; text-wrap: pretty; } /* ---------- Buttons ---------- */ .button { border: var(--rule); background: var(--pop); color: var(--ink); padding: 17px 24px; line-height: 1.15; cursor: pointer; font-weight: 700; } .button:hover { background: var(--ink); color: var(--pop); } .button--send { padding: 15px 24px; } .button--close { border: var(--rule); background: transparent; padding: 8px 14px; line-height: 1.15; cursor: pointer; font-weight: 400; } .button--close:hover { background: var(--ink); color: var(--paper); } /* ---------- Purpose ---------- */ .purpose { padding: 6vh 5vw; background: var(--paper); color: var(--ink); border-top: var(--rule); } .purpose__columns { display: flex; flex-wrap: wrap; gap: 3vh 4vw; } /* No heading here — one statement, set large enough to be the room's only voice. */ .purpose__columns p { margin: 0; flex: 1 1 380px; max-width: 40ch; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.4; text-wrap: pretty; } /* ---------- Claim / Call for Problems ---------- Pop ground so it reads as the loudest thing on the page. The front page sets its claim here; the RFP page keeps the standing ask and the address. */ .cfp { padding: 6vh 5vw; background: var(--pop); color: var(--ink); border-top: var(--rule); } .cfp__title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4.4vw, 72px); line-height: 0.98; letter-spacing: -0.02em; max-width: 26ch; text-wrap: balance; } .cfp__mail { margin: 3.5vh 0 0; font-size: clamp(24px, 3.4vw, 54px); line-height: 1.1; letter-spacing: -0.02em; word-break: break-word; } .cfp__mail a { font-weight: 700; } /* The global pop hover would vanish against the pop ground. */ .cfp a:hover { color: var(--accent); } /* ---------- Functions ---------- */ .functions { padding: 6vh 5vw; background: var(--calm); color: var(--ink); border-top: var(--rule); } .function { display: flex; flex-wrap: wrap; gap: 1.5vh 4vw; align-items: baseline; padding: 3vh 0; border-bottom: var(--hairline); } .function:first-child { padding-top: 0; } .function:last-child { padding-bottom: 0; border-bottom: none; } .function__name { margin: 0; flex: 1 1 420px; font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 6.2vw, 98px); line-height: 0.9; letter-spacing: -0.02em; } .function__desc { margin: 0; flex: 1 1 300px; max-width: 46ch; font-size: clamp(15px, 1.6vw, 19px); line-height: 1.5; } /* ---------- Events (front page) ---------- The office in a room, then the next few dates. Hot ground — the same slot the About portrait sits on, so the photo stays loud in every scheme. Rows link to events.html rather than carrying their own copy. */ .events { padding: 6vh 5vw 7vh; background: var(--hot); color: var(--hot-ink); border-top: var(--rule); } .events__photo { display: block; width: 100%; aspect-ratio: 5 / 2; object-fit: cover; object-position: 50% 62%; background-color: var(--pop); background-image: repeating-linear-gradient(118deg, rgba(22, 24, 26, 0.16) 0 1px, transparent 1px 10px); } .events__credit { margin: 12px 0 0; font-family: 'PP Object Sans', var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.8; } .events__title { margin: 5vh 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4.4vw, 72px); line-height: 0.98; letter-spacing: -0.02em; max-width: 22ch; text-wrap: balance; } .events__list { margin: 4vh 0 0; padding: 0; list-style: none; } /* Hairlines take currentColor — the ink hairline vanishes on dark hot grounds (After Hours sets ink and deep to the same indigo). */ .events__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 3vw; padding: 2.4vh 0; border-bottom: none; border-top: 1px solid color-mix(in srgb, currentColor 45%, transparent); } .events__row:hover { color: var(--hot-hover); } .events__date { flex: 0 0 9ch; font-weight: 700; font-size: clamp(17px, 1.8vw, 22px); } .events__name { flex: 1 1 320px; font-family: var(--serif); font-size: clamp(24px, 2.8vw, 44px); line-height: 1.02; letter-spacing: -0.015em; } .events__place { flex: 0 1 auto; margin-left: auto; font-size: clamp(15px, 1.5vw, 19px); opacity: 0.85; } .events__more { margin: 4.5vh 0 0; font-size: clamp(19px, 2vw, 24px); font-weight: 700; } .events__more a:hover { color: var(--hot-hover); } /* ---------- Events page ---------- A meetup roll set as a ledger: date column, the name, and the event's own link when it has one. */ .event-band { padding: 6vh 5vw 7vh; background: var(--paper); color: var(--ink); border-top: var(--rule); } /* Calm matches paper in two schemes; the rule above keeps the seam. */ .event-band--past { background: var(--calm); } .event-band__title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5vw, 84px); line-height: 0.92; letter-spacing: -0.02em; } .event-band__note { margin: 2vh 0 0; font-size: 19px; line-height: 1.5; max-width: 52ch; } .event-list { margin: 4.5vh 0 0; padding: 0; list-style: none; } /* Rows bleed a step past the text edge so the hover ground reads as a band, not a highlight stuck to the letters. */ .event { position: relative; display: flex; flex-wrap: wrap; gap: 2.5vh 4vw; padding: 3.5vh clamp(12px, 1.4vw, 20px); margin: 0 calc(-1 * clamp(12px, 1.4vw, 20px)); border-top: var(--hairline); } .event--linked:hover, .event--linked:has(a:focus-visible) { background: var(--pop); } .event__when { flex: 0 0 118px; } /* Dates run day–month–year, stacked: the big day, then the month, then the year in the detail slot. */ .event__month { display: block; margin-top: 6px; font-family: 'PP Object Sans', var(--sans); font-weight: 700; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; } .event__day { display: block; font-family: var(--serif); font-size: clamp(42px, 4.6vw, 72px); line-height: 0.9; letter-spacing: -0.02em; } .event__detail { display: block; margin-top: 10px; font-size: 15px; line-height: 1.4; } .event__body { flex: 1 1 360px; max-width: 56ch; } .event__title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3vw, 46px); line-height: 1; letter-spacing: -0.02em; } .event__meta { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-family: 'PP Object Sans', var(--sans); font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .event__tag { border: 2px solid currentColor; padding: 3px 9px 4px; } .event__desc { margin: 14px 0 0; font-size: 19px; line-height: 1.5; text-wrap: pretty; } /* Before app.js runs, the CTA shows the spelled address; the script swaps in a seat link carrying the event in its subject line. */ .event__cta { margin: 0; flex: 0 0 auto; margin-left: auto; align-self: center; font-size: 16px; line-height: 1.4; } .event__cta a { display: inline-block; border: var(--rule); background: var(--pop); color: var(--ink); padding: 15px 22px; font-weight: 700; font-size: 19px; line-height: 1.15; } /* The seat link claims the whole row. */ .event__cta a::after { content: ''; position: absolute; inset: 0; } .event--linked:hover .event__cta a { background: var(--ink); color: var(--pop); } .event--past .event__day { font-size: clamp(34px, 3.6vw, 56px); } /* Date ranges run long — keep them inside the date column. */ .event__when .event__day--range { font-size: clamp(24px, 2.6vw, 38px); } /* Press and recap links under a name, shown as bare domains. */ .event__links { margin: 10px 0 0; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.4; } /* ---------- Prose ---------- Body copy for About and Call for Problems. One measure, no headings — the argument turns on .prose__turn lines instead. */ .prose { padding: 6vh 5vw; background: var(--paper); color: var(--ink); border-top: var(--rule); } .prose--calm { background: var(--calm); } .prose__inner { max-width: 60ch; } .prose p { margin: 20px 0 0; font-size: 20px; line-height: 1.55; text-wrap: pretty; } .prose p:first-child { margin-top: 0; } .prose strong { font-weight: 700; } /* Examples run the full band in as many columns as fit, each under its own rule — the single narrow column read as a cramped list. */ .prose .prose__lead { margin: 0; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.3; max-width: 34ch; } .example-list { margin: 4vh 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); column-gap: 5vw; } .example-list li { padding: 18px 0; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.35; border-top: var(--hairline); text-wrap: pretty; } /* The line the paragraphs around it are working toward. */ .prose .prose__turn { margin: 5vh 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.4vw, 52px); line-height: 1.02; letter-spacing: -0.02em; max-width: 20ch; text-wrap: balance; } .prose .prose__turn:first-child { margin-top: 0; } /* ---------- About: the person ---------- */ .person { border-top: var(--rule); padding: 6vh 5vw; display: flex; flex-wrap: wrap; gap: 4vh 4vw; align-items: flex-start; background: var(--hot); color: var(--hot-ink); } .person__frame { flex: 1 1 300px; max-width: 400px; } .person__portrait { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background-color: var(--pop); background-image: repeating-linear-gradient(118deg, rgba(22, 24, 26, 0.16) 0 1px, transparent 1px 10px); } .person__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; } .person__text { flex: 1 1 440px; max-width: 50ch; } .person__name { margin: 0; font-family: var(--serif); font-size: clamp(28px, 3.2vw, 52px); line-height: 1.05; letter-spacing: -0.02em; } .person__bio { margin: 22px 0 0; font-size: 20px; line-height: 1.5; text-wrap: pretty; } .person__bio p { margin: 0 0 16px; } .person__bio p:last-child { margin-bottom: 0; } /* ---------- Footer ---------- */ .site-footer { padding: 36px 5vw 120px; border-top: var(--rule); background: var(--ink); color: var(--paper); display: flex; flex-wrap: wrap; gap: 28px 48px; justify-content: space-between; align-items: flex-start; } .site-footer--about { padding-top: 30px; } /* The footer speaks in the masthead's voice — Fuji Light, like the header. */ .site-footer__block { font-family: 'PP Fuji', Helvetica, Arial, sans-serif; font-weight: 300; font-size: 20px; line-height: 1.7; flex: 0 0 auto; white-space: nowrap; } .site-footer__name { margin-top: 14px; } /* The mark lives quietly down here; the header carries the full name. */ .site-footer__wordmark { display: block; font-size: 34px; margin-bottom: 14px; } .site-footer__fullname { text-transform: uppercase; letter-spacing: 0.04em; } .site-footer__legal { display: block; margin-top: 14px; font-size: 14px; opacity: 0.7; } .site-footer__back { font-size: 19px; line-height: 1.7; flex: 0 0 auto; } /* ---------- Sticker ---------- */ .sticker-dock { position: fixed; right: 0; bottom: 0; z-index: 40; display: flex; } .sticker-dock[hidden] { display: none; } .sticker { display: block; background: var(--pop); color: var(--ink); border: none; border-top: var(--rule); border-left: var(--rule); padding: 14px 20px 15px; font-family: 'PP Object Sans', var(--sans); font-size: 19px; line-height: 1.25; cursor: pointer; white-space: nowrap; width: max-content; } .sticker:hover { background: var(--ink); color: var(--pop); } .sticker span { display: block; } .sticker__label { font-weight: 700; } /* ---------- Intake panel ---------- */ .intake-dialog { position: fixed; inset: 0; margin: 0; padding: 40px 20px; border: none; background: transparent; width: 100%; max-width: none; height: 100%; max-height: none; overflow: auto; justify-content: center; align-items: flex-start; } .intake-dialog[open] { display: flex; } .intake-dialog::backdrop { background: rgba(22, 24, 26, 0.6); } .intake-panel { background: var(--paper); border: var(--rule); width: 100%; max-width: 660px; padding: 28px 30px 32px; color: var(--ink); } .intake-panel__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 18px; border-bottom: var(--rule); } .intake-panel__title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.05; } .intake-panel__call { margin: 10px 0 0; font-size: 19px; line-height: 1.45; } .intake-panel__call a { font-weight: 700; } .intake-panel a:hover { color: var(--accent); } .intake-received { padding: 26px 0 4px; } .intake-received p { margin: 0; font-size: 20px; line-height: 1.5; max-width: 52ch; } .intake-form { display: flex; flex-direction: column; gap: 18px; padding-top: 22px; } .intake-form__note { margin: 0; font-size: 19px; line-height: 1.45; max-width: 52ch; } .intake-field { display: flex; flex-direction: column; gap: 7px; font-size: 19px; line-height: 1.35; } .intake-field__hint { font-size: 16px; line-height: 1.4; } .intake-field input[type="text"], .intake-field textarea { border: var(--rule); background: #ffffff; padding: 11px 12px; width: 100%; } .intake-field textarea { resize: vertical; line-height: 1.45; } .intake-field--check { flex-direction: row; align-items: center; gap: 11px; } .intake-field--check input { width: 18px; height: 18px; accent-color: var(--accent); } .intake-form__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding-top: 4px; } .intake-form__status { font-size: 19px; line-height: 1.35; } [hidden] { display: none !important; } /* ---------- Small screens ---------- */ @media (max-width: 640px) { .site-header__bar { padding: 18px 5vw 14px; } .hero { padding: 6vh 5vw; } .hero--about { padding: 5vh 5vw; } .hero__columns { margin-top: 4vh; } .hero__columns p, .person__bio, .intake-received p { font-size: 18px; } .hero__col--narrow { margin-left: 0; } /* The burst owns the band's top-right corner and the number starts below it — poking above the band covers the statement text, and there's no horizontal room beside the number. */ .call-band { padding: 136px 5vw 4.5vh; } .call-band__burst { width: 104px; top: 14px; right: 4vw; font-size: 11px; } /* Keep the number legible instead of letting the fluid size collapse. */ .call-band__number { font-size: clamp(44px, 13.5vw, 64px); } .functions { padding: 5vh 5vw; } .events { padding: 5vh 5vw 6vh; } .events__photo { aspect-ratio: 3 / 2; } .events__title { margin-top: 4vh; } .events__row { padding: 2vh 0; } .events__place { margin-left: 0; flex: 1 1 100%; order: 3; } .event { gap: 1.5vh 4vw; padding-top: 3vh; padding-bottom: 3vh; } /* The date folds into one line above the title. */ .event__when { flex: 1 1 100%; display: flex; align-items: baseline; gap: 10px; } .event__day { margin-top: 0; font-size: 30px; } .event--past .event__day { font-size: 30px; } .event__detail { margin: 0 0 0 auto; text-align: right; } .event__cta { margin-left: 0; flex: 1 1 100%; } .event__cta a { display: block; text-align: center; padding: 14px 20px; } .person { padding: 5vh 5vw; } .person__frame { max-width: none; } .site-footer { flex-direction: column; gap: 24px; padding: 28px 5vw 108px; } .site-footer__block { white-space: normal; } .sticker { padding: 10px 16px 11px; font-size: 16px; } .intake-dialog { padding: 0; } .intake-panel { max-width: none; min-height: 100%; border-left: none; border-right: none; border-bottom: none; padding: 22px 5vw 40px; } .intake-form__actions .button--send { width: 100%; padding: 16px 24px; } }