/* The public home page. One event, told in the order a person asks about it: when, then how long until it, then what it is, then everything else. This is its own small stylesheet rather than a slice of app.css, because a neighbour on a phone outside the building should not download 34 KB of check-in interface to read an address. The tokens and the two @font-face blocks are repeated from app.css on purpose and hold the same values. scripts/contrast.mjs reads both files and checks that they still agree, so a colour that drifts here fails the build rather than shipping quietly. */ @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 200 700; font-display: swap; src: url('/fonts/oswald-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 200 700; font-display: swap; src: url('/fonts/oswald-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/jost-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/jost-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --bg: #f3f1e6; --surface: #e9e6d8; --ink: #0a0a0a; --ink-soft: #3e3e3e; --ink-faint: #5f5c55; --line: #c6c5b3; --khaki: #c6c5b3; --black: #0a0a0a; --on-black: #f3f1e6; --on-black-soft: #91908a; --on-black-strong: #ffffff; --accent-ink: #f3f1e6; --radius: 12px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 40px; --wrap: 900px; --font: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --display: 'Oswald', 'Haettenschweiler', 'Arial Narrow', Impact, sans-serif; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; } /* A site rule elsewhere beat the attribute once and a hidden block painted anyway. This one wins. */ [hidden] { display: none !important; } /* Both languages sit in the page and the attribute on picks one. No reload, no request, no cookie. The switch is per element rather than per half of the page, so the map, the layout and the structure exist once. */ html[data-lang='en'] [data-copy='es'] { display: none; } html[data-lang='es'] [data-copy='en'] { display: none; } /* One column, 16px gutters, and a ceiling so the four detail cells and the two cards have room to sit side by side without the paragraphs turning into a line a reader loses their place in. */ .wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--s4); padding-right: var(--s4); } /* The black band. The lockup, the language toggle, and the date. */ .bar { background: var(--black); color: var(--on-black); } .bar-inner { padding-top: var(--s3); padding-bottom: var(--s3); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); } .lockup { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 16px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; color: var(--on-black); } .lockup svg { width: 59px; height: 27px; flex: 0 0 auto; display: block; } .lang { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } .lang-btn { font-family: var(--font); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; min-width: 46px; min-height: 40px; padding: 8px 10px; border-radius: 999px; border: 1.5px solid var(--on-black-soft); background: transparent; color: var(--on-black); cursor: pointer; -webkit-tap-highlight-color: transparent; } html[data-lang='en'] .lang-btn[data-set-lang='en'], html[data-lang='es'] .lang-btn[data-set-lang='es'] { background: var(--on-black); border-color: var(--on-black); color: var(--black); } /* The hero, the same black as the bar above it so the two read as one band. The date is the largest thing on the page by a wide margin, because the one question a person opens this page with is which Saturday. */ .hero { background: var(--black); color: var(--on-black); } .hero-inner { padding-top: var(--s5); padding-bottom: var(--s6); } .dateblock { margin: 0 0 var(--s5); } .date-kicker { margin: 0 0 2px; font-family: var(--display); font-size: clamp(18px, 5vw, 24px); font-weight: 500; letter-spacing: 0.22em; line-height: 1.1; text-transform: uppercase; color: var(--khaki); } .date-big { margin: 0; font-family: var(--display); font-size: clamp(62px, 19vw, 124px); font-weight: 600; letter-spacing: 0.005em; line-height: 0.92; text-transform: uppercase; color: var(--on-black-strong); } .date-hours { margin: var(--s3) 0 0; font-family: var(--display); font-size: clamp(22px, 6vw, 30px); font-weight: 500; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; color: var(--on-black); } /* The countdown. A khaki hairline under the date and then the live line, so the two never read as one sentence. */ .countdown { border-top: 1px solid var(--khaki); padding-top: var(--s4); margin-bottom: var(--s5); } .cd-line { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.4; color: var(--on-black); } .cd-time { margin: 4px 0 0; font-family: var(--display); font-size: clamp(26px, 7vw, 34px); font-weight: 500; letter-spacing: 0.02em; line-height: 1.15; color: var(--khaki); } /* Happening now is the one sentence worth shouting, so it takes the size the number would have had. The ended state is a longer sentence and a quieter piece of news, so it stays in the body face. Long sentences set in condensed caps are a headline, not a paragraph. */ .countdown[data-state='now'] .cd-line { font-family: var(--display); font-size: clamp(26px, 7vw, 34px); font-weight: 500; letter-spacing: 0.02em; line-height: 1.15; text-transform: uppercase; } .countdown[data-state='ended'] .cd-line { font-size: 18px; font-weight: 500; } h1 { margin: 0 0 var(--s2); font-family: var(--display); font-size: clamp(24px, 6.5vw, 34px); font-weight: 600; letter-spacing: 0.03em; line-height: 1.15; text-transform: uppercase; text-wrap: balance; color: var(--on-black); } .lede { margin: 0; font-size: 17px; line-height: 1.5; color: var(--on-black-soft); } /* The details strip. Two by two on a phone, four across on a desktop. The hairlines are the gap itself showing through, so a cell never carries two rules on one edge. */ .details { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--khaki); border: 1px solid var(--khaki); border-radius: var(--radius); overflow: hidden; } .details li { background: var(--bg); padding: var(--s4); min-width: 0; } .d-label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); } .d-value { display: block; font-size: 16px; line-height: 1.35; color: var(--ink); overflow-wrap: break-word; } /* One solid ink button, Add to Calendar, because that is the thing that makes a person actually turn up. Everything else is outlined. */ .actions { display: flex; flex-wrap: wrap; gap: var(--s3); } .actions-pair { margin-top: var(--s5); } .actions-pair .btn { flex: 1 1 100%; } @media (min-width: 520px) { .actions-pair .btn { flex: 1 1 0; } } .btn { font-family: var(--font); font-size: 16px; font-weight: 500; letter-spacing: 0.02em; min-height: 52px; padding: 14px 20px; border-radius: var(--radius); border: 1.5px solid var(--ink); background: transparent; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; transition: background 120ms ease, border-color 120ms ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--ink); border-color: var(--ink); color: var(--accent-ink); font-weight: 600; } .btn-primary:hover { background: #262626; border-color: #262626; } /* The map. A khaki hairline frame and nothing else, lazy loaded, so a phone on one bar of signal paints the address and the buttons first. */ .map { margin-top: var(--s5); border: 1px solid var(--khaki); border-radius: var(--radius); overflow: hidden; background: var(--surface); } .map iframe { display: block; width: 100%; height: clamp(240px, 42vw, 360px); border: 0; } /* The two cards. Stacked on a phone, side by side from tablet up. */ .cards { margin-top: var(--s5); display: grid; grid-template-columns: 1fr; gap: var(--s4); } .card { background: var(--surface); border: 1px solid var(--khaki); border-radius: var(--radius); padding: var(--s5) var(--s4); } .card h2 { margin: 0 0 var(--s3); font-family: var(--display); font-size: 21px; font-weight: 500; letter-spacing: 0.06em; line-height: 1.2; text-transform: uppercase; color: var(--ink); } .card ul { margin: 0; padding-left: 20px; } .card li { margin-bottom: var(--s2); font-size: 16px; line-height: 1.45; color: var(--ink); } .card li::marker { color: var(--ink-faint); } .card li:last-child { margin-bottom: 0; } /* The close. One paragraph, one outlined button, one line about questions. */ .closing { border-top: 1px solid var(--khaki); margin-top: var(--s6); padding-top: var(--s5); } .closing p { margin: 0 0 var(--s4); font-size: 17px; color: var(--ink); } .closing .actions .btn { flex: 1 1 100%; } @media (min-width: 520px) { .closing .actions .btn { flex: 0 1 auto; min-width: 260px; } } .closing p.closing-note { margin: var(--s4) 0 0; font-size: 16px; color: var(--ink-soft); } /* Two lines on a phone, one row from there up, so the Instagram link reads as the other half of the footer rather than something left behind at the bottom of the page. */ .foot { border-top: 1px solid var(--khaki); margin-top: var(--s6); padding: var(--s5) 0 var(--s6); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: baseline; justify-content: space-between; } .foot-note { margin: 0; font-size: 15px; color: var(--ink-faint); } .foot-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; } /* Tablet and up. The strip goes four across and the cards go two across. */ @media (min-width: 760px) { .details { grid-template-columns: repeat(4, 1fr); } .cards { grid-template-columns: 1fr 1fr; } .card { padding: var(--s5); } .hero-inner { padding-top: var(--s6); padding-bottom: 56px; } .cd-line { font-size: 19px; } .lede { font-size: 19px; } .card h2 { font-size: 23px; } .closing p { font-size: 19px; } } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:active { transform: none; } }