/* ========================================================================== Pittsburgh Spirit Alumni Reunion — Global Stylesheet Colors: black, gold, white (original Spirit palette) Type is intentionally oversized: primary audience is 60+, mostly on phones. ========================================================================== */ :root { --black: #0D0D0D; --ink: #1C1C1C; --charcoal: #2A2A2A; --gold: #FFB81C; --gold-deep: #D4930A; --gold-pale: #FFE9AE; --cream: #FAF6EC; --white: #FFFFFF; --gray: #6B6B6B; --gray-light: #D9D5CC; --max: 1120px; --narrow: 760px; --head: 'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif; --body: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --shadow: 0 4px 20px rgba(0,0,0,.10); --shadow-lg: 0 12px 40px rgba(0,0,0,.18); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--body); font-size: 1.1875rem; /* 19px base — deliberately large */ line-height: 1.65; color: var(--ink); background: var(--cream); } img { max-width: 100%; display: block; } a { color: var(--gold-deep); } a:hover { color: var(--ink); } .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; } .wrap--narrow { max-width: var(--narrow); } /* ---------- Typography ---------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--head); font-weight: 700; line-height: 1.05; letter-spacing: .01em; margin: 0 0 .5em; text-transform: uppercase; } h1 { font-size: clamp(2.75rem, 8vw, 5rem); } h2 { font-size: clamp(2rem, 5vw, 3rem); } h3 { font-size: clamp(1.4rem, 3vw, 1.85rem); } h4 { font-size: 1.25rem; letter-spacing: .04em; } p { margin: 0 0 1.15em; } .lede { font-size: clamp(1.25rem, 2.4vw, 1.5rem); line-height: 1.5; color: var(--charcoal); } .eyebrow { font-family: var(--head); font-size: 1.05rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 .75rem; } .eyebrow--on-dark { color: var(--gold); } .rule { width: 72px; height: 5px; background: var(--gold); border: 0; margin: 0 0 1.5rem; } .center { text-align: center; } .center .rule { margin-left: auto; margin-right: auto; } /* ---------- Preview banner ------------------------------------------------ PREVIEW-ONLY. Delete this block, and the .preview-bar markup at the top of each page's , when the site goes live on pittsburghspirit.com. -------------------------------------------------------------------------- */ .preview-bar { background: var(--gold); color: var(--black); text-align: center; padding: 12px 20px; font-family: var(--head); font-size: clamp(.95rem, 2vw, 1.15rem); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; border-bottom: 3px solid var(--black); } .preview-bar strong { font-weight: 700; } .preview-bar span { display: block; font-weight: 500; text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: .95rem; margin-top: 2px; } /* ---------- Header / Nav -------------------------------------------------- */ .site-header { background: var(--black); border-bottom: 4px solid var(--gold); position: sticky; top: 0; z-index: 100; } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 108px; } .brand { display: flex; align-items: center; gap: 16px; text-decoration: none; } .brand svg { flex: none; } /* Official Spirit wordmark. Dark-background artwork only. */ .brand-logo { height: 74px; width: auto; flex: none; display: block; } .brand-text { display: flex; flex-direction: column; line-height: 1.2; padding-left: 16px; border-left: 2px solid var(--charcoal); } .brand-name { font-family: var(--head); font-weight: 700; font-size: 1.6rem; letter-spacing: .06em; color: var(--white); text-transform: uppercase; } .brand-sub { font-family: var(--head); font-size: .95rem; font-weight: 600; letter-spacing: .16em; color: var(--gold); text-transform: uppercase; } .nav-toggle { display: none; background: none; border: 2px solid var(--gold); color: var(--gold); font-family: var(--head); font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; padding: 10px 16px; border-radius: 3px; cursor: pointer; } .nav { display: flex; align-items: center; gap: 4px; } .nav a { font-family: var(--head); font-size: 1.3rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--white); padding: 12px 16px; border-radius: 3px; transition: color .15s, background .15s; } .nav a:hover { color: var(--gold); background: rgba(255,184,28,.1); } .nav a.is-current { color: var(--gold); box-shadow: inset 0 -3px 0 var(--gold); } .nav a.nav-cta { background: var(--gold); color: var(--black); margin-left: 10px; padding: 14px 26px; } .nav a.nav-cta:hover { background: var(--gold-pale); color: var(--black); } /* ---------- Buttons ------------------------------------------------------- */ .btn { display: inline-block; font-family: var(--head); font-size: 1.25rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; text-align: center; padding: 18px 40px; border: 3px solid var(--gold); border-radius: 3px; cursor: pointer; background: var(--gold); color: var(--black); transition: transform .12s, background .15s, color .15s; } .btn:hover { background: var(--gold-pale); border-color: var(--gold-pale); color: var(--black); transform: translateY(-2px); } .btn--ghost { background: transparent; color: var(--gold); } .btn--ghost:hover { background: var(--gold); color: var(--black); border-color: var(--gold); } .btn--dark { background: var(--black); border-color: var(--black); color: var(--white); } .btn--dark:hover { background: var(--charcoal); border-color: var(--charcoal); color: var(--gold); } .btn--block { display: block; width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: 16px; } .btn-row--center { justify-content: center; } /* ---------- Hero ---------------------------------------------------------- */ .hero { position: relative; background: var(--black); color: var(--white); padding: clamp(56px, 9vw, 104px) 0 clamp(56px, 9vw, 96px); overflow: hidden; } /* diagonal gold stripes, faint — period athletic feel */ .hero::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( -60deg, rgba(255,184,28,.06) 0px, rgba(255,184,28,.06) 3px, transparent 3px, transparent 26px ); pointer-events: none; } .hero .wrap { position: relative; z-index: 1; } /* 1981-82 media guide artwork, centred in the open space between the text column and the right edge of the page. Absolutely positioned so it cannot shift any existing content, and hidden where there is no room for it. The artwork is the original scan — a yellow rectangle — so it is framed with a border and shadow to read as a printed card against the black. */ .hero-player { position: absolute; left: 75%; top: 50%; transform: translate(-50%, -50%); height: min(calc(100% - 40px), 520px); width: auto; border: 4px solid var(--black); border-radius: 3px; box-shadow: 0 14px 44px rgba(0,0,0,.55); z-index: 0; pointer-events: none; user-select: none; } @media (max-width: 1100px) { .hero-player { display: none; } } .hero h1 { color: var(--white); margin-bottom: .2em; } .hero h1 .gold { color: var(--gold); display: block; } /* Large Spirit wordmark above the headline on the home page */ .hero-logo { width: min(340px, 68vw); height: auto; margin: 0 0 2rem; display: block; } .hero-dates { font-family: var(--head); font-size: clamp(1.5rem, 3.6vw, 2.25rem); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 0 0 .5rem; } .hero-where { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--gray-light); margin: 0 0 2.25rem; } .hero-note { margin-top: 1.75rem; font-size: 1.05rem; color: var(--gray-light); } /* ---------- Deadline banner ----------------------------------------------- */ .alert-bar { background: var(--gold); color: var(--black); padding: 16px 0; font-family: var(--head); font-size: clamp(1.05rem, 2.2vw, 1.3rem); font-weight: 600; letter-spacing: .04em; text-align: center; text-transform: uppercase; } .alert-bar strong { font-weight: 700; } /* ---------- Sections ------------------------------------------------------ */ .section { padding: clamp(56px, 8vw, 96px) 0; } .section--dark { background: var(--black); color: var(--white); } .section--dark h2, .section--dark h3 { color: var(--white); } .section--dark p { color: var(--gray-light); } .section--ink { background: var(--white); } /* ---------- Cards / schedule ---------------------------------------------- */ .grid { display: grid; gap: 28px; } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .card { background: var(--white); border: 1px solid var(--gray-light); border-top: 6px solid var(--gold); border-radius: 4px; padding: 34px 30px; box-shadow: var(--shadow); } .card h3 { margin-bottom: .35em; } .card-day { font-family: var(--head); font-size: 1rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 .35rem; } .card-meta { list-style: none; margin: 1.25rem 0 0; padding: 0; border-top: 1px solid var(--gray-light); } .card-meta li { display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--gray-light); font-size: 1.05rem; } .card-meta .label { flex: none; width: 96px; font-family: var(--head); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); } .price-tag { display: inline-block; background: var(--black); color: var(--gold); font-family: var(--head); font-size: 1.5rem; font-weight: 700; letter-spacing: .06em; padding: 6px 18px; border-radius: 3px; margin-bottom: 1rem; } /* ---------- Hotels -------------------------------------------------------- */ .hotel { background: var(--white); border: 1px solid var(--gray-light); border-left: 8px solid var(--gold); border-radius: 4px; padding: 32px 30px; box-shadow: var(--shadow); display: flex; flex-direction: column; } .hotel h3 { margin-bottom: .25em; } .hotel-rate { font-family: var(--head); font-size: 2rem; font-weight: 700; color: var(--ink); line-height: 1; margin: 0 0 .15rem; } .hotel-rate span { font-size: 1rem; font-weight: 500; color: var(--gray); letter-spacing: .06em; } .hotel-detail { list-style: none; padding: 0; margin: 1.25rem 0 1.75rem; font-size: 1.02rem; } .hotel-detail li { padding: 7px 0; border-bottom: 1px dotted var(--gray-light); } .hotel-detail .k { font-family: var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--gray); margin-right: 8px; } .hotel-detail code { font-family: var(--head); font-size: 1.15rem; letter-spacing: .12em; background: var(--gold-pale); padding: 2px 10px; border-radius: 3px; color: var(--ink); } .hotel .btn-row { margin-top: auto; } /* ---------- Forms --------------------------------------------------------- */ .form-card { background: var(--white); border: 1px solid var(--gray-light); border-top: 6px solid var(--gold); border-radius: 4px; padding: clamp(28px, 5vw, 48px); box-shadow: var(--shadow-lg); } fieldset { border: 0; padding: 0; margin: 0 0 2.5rem; } legend { font-family: var(--head); font-size: 1.4rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); padding: 0; margin-bottom: 1.25rem; width: 100%; border-bottom: 3px solid var(--gold); padding-bottom: .5rem; } .field { margin-bottom: 1.5rem; } label { display: block; font-family: var(--head); font-size: 1.15rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin-bottom: .4rem; } .hint { font-size: .98rem; color: var(--gray); margin: -.15rem 0 .5rem; text-transform: none; letter-spacing: 0; font-family: var(--body); font-weight: 400; } input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea { width: 100%; font-family: var(--body); font-size: 1.15rem; padding: 15px 16px; border: 2px solid var(--gray-light); border-radius: 3px; background: var(--white); color: var(--ink); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255,184,28,.25); } textarea { min-height: 120px; resize: vertical; } .field-row { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .check { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border: 2px solid var(--gray-light); border-radius: 3px; margin-bottom: 12px; cursor: pointer; background: var(--white); } .check:hover { border-color: var(--gold); } .check input { width: 26px; height: 26px; flex: none; margin-top: 2px; accent-color: var(--gold-deep); } .check span { font-family: var(--body); font-size: 1.08rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink); } .req { color: #B3261E; } /* ---------- Notices ------------------------------------------------------- */ .notice { background: var(--gold-pale); border-left: 8px solid var(--gold); border-radius: 3px; padding: 24px 28px; margin: 0 0 2rem; } .notice h4 { margin-bottom: .4em; color: var(--ink); } .notice p:last-child { margin-bottom: 0; } .notice--dark { background: var(--charcoal); border-left-color: var(--gold); color: var(--gray-light); } .notice--dark h4 { color: var(--gold); } .placeholder { border: 3px dashed var(--gray-light); border-radius: 4px; background: var(--white); padding: 48px 28px; text-align: center; color: var(--gray); } .placeholder .ph-title { font-family: var(--head); font-size: 1.3rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); margin-bottom: .4rem; } /* ---------- Payment step (RSVP page) -------------------------------------- */ /* Revealed in place after the RSVP is accepted. See site.js. */ .pay-confirm { background: var(--black); border-radius: 4px; padding: 36px 32px; text-align: center; color: var(--gray-light); } .pay-confirm h3 { color: var(--gold); margin: 0 0 .4em; } .pay-confirm p { margin-bottom: 0; } .pay-tick { font-size: 3rem; line-height: 1; color: var(--gold); margin: 0 0 .4rem; } .pay-summary { border: 2px solid var(--gray-light); border-radius: 4px; margin: 0 0 1.75rem; } .pay-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 20px; } .pay-row + .pay-row { border-top: 2px solid var(--gray-light); } .pay-row--total { background: var(--gold-pale); font-family: var(--head); font-weight: 700; font-size: 1.6rem; color: var(--ink); } .pay-note { background: var(--gold-pale); border-left: 6px solid var(--gold); padding: 14px 18px; font-size: 1rem; margin: 0 0 1.5rem; } /* Shown only when the guest has to change the quantity on Stripe themselves. Deliberately loud: the quiet version of this warning was missed by a real guest, who underpaid by $55. */ .pay-warn { background: #FFF4D6; border: 3px solid var(--gold-deep); border-left-width: 10px; border-radius: 3px; padding: 18px 20px; margin: 0 0 1.5rem; font-size: 1.05rem; line-height: 1.55; color: #4A3000; } .pay-warn strong { color: #2E1E00; } .pay-alt { font-size: 1rem; color: var(--gray); margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 2px solid var(--gray-light); } .form-error { background: #FDECEC; border-left: 6px solid #B3261E; color: #7A1912; padding: 14px 18px; margin: 1.25rem 0 0; border-radius: 3px; } /* ---------- History timeline ---------------------------------------------- */ .timeline { list-style: none; margin: 0; padding: 0; position: relative; } .timeline::before { content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 4px; background: var(--gold); border-radius: 2px; } .timeline li { position: relative; padding: 0 0 2.5rem 52px; } .timeline li::before { content: ''; position: absolute; left: 0; top: 6px; width: 26px; height: 26px; border-radius: 50%; background: var(--black); border: 4px solid var(--gold); } .timeline .year { font-family: var(--head); font-size: 1.6rem; font-weight: 700; letter-spacing: .06em; color: var(--gold-deep); line-height: 1; margin-bottom: .35rem; } .section--dark .timeline .year { color: var(--gold); } .stat-row { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 2.5rem 0 0; } .stat { text-align: center; padding: 28px 16px; background: rgba(255,184,28,.08); border: 1px solid rgba(255,184,28,.3); border-radius: 4px; } .stat .num { font-family: var(--head); font-size: 3rem; font-weight: 700; color: var(--gold); line-height: 1; } .stat .lbl { font-family: var(--head); font-size: .95rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-light); margin-top: .5rem; } /* ---------- Closing call-to-action with crest ----------------------------- */ .cta-split { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; align-items: center; gap: clamp(32px, 6vw, 72px); } /* IMPORTANT: the Spirit logo is artwork drawn for a dark background — the "PITTSBURGH" text and the outlines around "SPIRIT" are white. Only ever place it on black or charcoal, never on the cream or white sections. */ .cta-mark { justify-self: center; width: 100%; max-width: 300px; } .cta-mark img, .cta-mark svg { width: 100%; height: auto; display: block; } .cta-body .rule { margin-left: 0; margin-right: 0; } @media (max-width: 720px) { .cta-split { grid-template-columns: 1fr; text-align: center; } .cta-mark { max-width: 200px; } .cta-body .rule { margin-left: auto; margin-right: auto; } } /* ---------- Photo grid ---------------------------------------------------- Column-based masonry so the old photos keep their real proportions — nothing gets cropped, portraits and landscapes sit together happily. -------------------------------------------------------------------------- */ .photo-grid { columns: 3; column-gap: 22px; } .photo-grid figure { break-inside: avoid; margin: 0 0 22px; } .photo-grid img { width: 100%; height: auto; display: block; border: 4px solid var(--black); border-radius: 3px; box-shadow: var(--shadow); cursor: zoom-in; transition: transform .16s, border-color .16s, box-shadow .16s; } .photo-grid img:hover, .photo-grid img:focus { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow-lg); outline: none; } @media (max-width: 900px) { .photo-grid { columns: 2; } } @media (max-width: 560px) { .photo-grid { columns: 1; } } /* Placeholder tile, still used where images haven't arrived */ .photo-slot { aspect-ratio: 4 / 3; border: 3px dashed var(--gray-light); border-radius: 4px; background: var(--white); display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; font-family: var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--gray); font-size: .95rem; } /* ---------- Split feature (poster beside text) ---------------------------- */ .split-feature { display: grid; grid-template-columns: minmax(220px, 330px) 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; } .poster { margin: 0; } .poster img { width: 100%; height: auto; display: block; border: 5px solid var(--black); border-radius: 4px; box-shadow: var(--shadow-lg); cursor: zoom-in; transition: transform .16s, border-color .16s; } .poster img:hover, .poster img:focus { border-color: var(--gold); transform: translateY(-3px); outline: none; } @media (max-width: 760px) { .split-feature { grid-template-columns: 1fr; } .poster { max-width: 280px; margin: 0 auto; } } /* ---------- Invitation video (home page) ---------------------------------- */ /* Text left, portrait phone video right. Collapses to one column on phones, where the video sits centred under the text. */ .video-feature { display: grid; grid-template-columns: 1fr minmax(230px, 300px); gap: clamp(32px, 5vw, 64px); align-items: center; } .invite-video { margin: 0; } .invite-video video { width: 100%; height: auto; display: block; background: var(--black); border: 5px solid var(--black); border-radius: 4px; box-shadow: var(--shadow-lg); } .invite-video figcaption { margin-top: .8rem; text-align: center; font-size: .98rem; line-height: 1.45; color: var(--gray); } @media (max-width: 860px) { .video-feature { grid-template-columns: 1fr; } .invite-video { max-width: 300px; margin: 2rem auto 0; } } /* ---------- Lightbox ------------------------------------------------------ */ .lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.94); display: none; align-items: center; justify-content: center; padding: 28px; } .lightbox.is-open { display: flex; } .lightbox img { max-width: 100%; max-height: 88vh; border: 4px solid var(--gold); border-radius: 3px; } .lightbox-close { position: absolute; top: 22px; right: 26px; background: transparent; border: 2px solid var(--gold); color: var(--gold); font-family: var(--head); font-size: 1.15rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 12px 22px; border-radius: 3px; cursor: pointer; } .lightbox-close:hover { background: var(--gold); color: var(--black); } /* ---------- FAQ ----------------------------------------------------------- */ .faq { border-top: 2px solid var(--gray-light); } .faq details { border-bottom: 2px solid var(--gray-light); } .faq summary { cursor: pointer; list-style: none; font-family: var(--head); font-size: 1.3rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 22px 44px 22px 0; position: relative; color: var(--ink); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 2rem; color: var(--gold-deep); line-height: 1; } .faq details[open] summary::after { content: '\2013'; } .faq details > *:not(summary) { margin-bottom: 1.25rem; } /* ---------- Footer -------------------------------------------------------- */ .site-footer { background: var(--black); border-top: 5px solid var(--gold); color: var(--gray-light); padding: 64px 0 40px; font-size: 1.02rem; } .site-footer h4 { color: var(--gold); font-size: 1.05rem; letter-spacing: .16em; margin-bottom: 1rem; } .site-footer a { color: var(--white); text-decoration: none; } .site-footer a:hover { color: var(--gold); text-decoration: underline; } .footer-grid { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: .6rem; } .footer-bottom { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--charcoal); font-size: .95rem; /* White and semibold rather than grey. This is the smallest text on the site and the audience is 60-80; grey on black was hard to read. 600 is the heaviest Barlow weight loaded for body text — 700 would make the browser fake it and look smeared. */ color: var(--white); font-weight: 600; } /* ---------- Responsive ---------------------------------------------------- */ @media (max-width: 860px) { .nav-toggle { display: block; } .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--black); border-bottom: 4px solid var(--gold); padding: 12px 20px 24px; } .nav.is-open { display: flex; } .nav a { padding: 16px 8px; font-size: 1.25rem; border-bottom: 1px solid var(--charcoal); } .nav a.nav-cta { margin: 14px 0 0; padding: 18px; border-bottom: 0; } .site-header .wrap { position: relative; } } @media (max-width: 520px) { body { font-size: 1.125rem; } .btn { display: block; width: 100%; padding: 18px 24px; } .btn-row { flex-direction: column; } .card-meta .label { width: 82px; } .brand-name { font-size: 1.3rem; } } @media print { .site-header, .site-footer, .btn, .alert-bar { display: none; } body { background: #fff; font-size: 12pt; } } /* ---------- Site credit --------------------------------------------------- */ /* Deliberately quieter than the event text above it: this is attribution, not information anyone came for. Still 12px minimum and well above the 4.5:1 contrast floor, so it stays legible for the 60+ audience. */ .site-credit { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--charcoal); font-size: .82rem; font-weight: 400; color: #9A9A9A; } .site-credit a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; } .site-credit a:hover, .site-credit a:focus-visible { color: var(--gold-pale); } /* Names of alumni already committed, on the home page. Slightly larger than body copy and a touch more line spacing — it is a list being scanned for a familiar name, not a paragraph being read. */ .attendee-list { font-size: 1.15rem; line-height: 1.9; font-weight: 500; color: var(--ink); } /* ---------- Splash / pre-landing page (index.html) ------------------------- Standalone: no site header, no footer. Two doors — alumni into the site, fans to the dinner and match tickets. Buttons are full width and oversized because most of this audience is on a phone. -------------------------------------------------------------------------- */ .splash-body { background: var(--black); color: var(--white); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: clamp(28px, 6vw, 64px) 20px; } .splash-stripes { position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient( -60deg, rgba(255,184,28,.06) 0px, rgba(255,184,28,.06) 3px, transparent 3px, transparent 26px); } .splash { position: relative; z-index: 1; width: 100%; max-width: 940px; text-align: center; } .splash-crest { width: min(330px, 74vw); height: auto; margin: 0 auto 26px; } .splash h1 { font-size: clamp(2rem, 5.4vw, 3.25rem); line-height: 1.05; margin: 0 0 18px; color: var(--white); } .splash h1 .gold { color: var(--gold); display: block; } .splash-guests { font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.55; color: var(--cream); max-width: 640px; margin: 0 auto 6px; } .splash-hounds { margin: 16px 0 24px; } .splash-hounds img { width: 98px; height: auto; margin: 0 auto; } .splash-when { font-family: var(--head); font-weight: 700; text-transform: uppercase; font-size: clamp(1.35rem, 3.2vw, 2rem); letter-spacing: .08em; color: var(--gold); margin: 0 0 34px; } .splash-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; text-align: left; margin-bottom: 34px; } .splash-door { border: 3px solid var(--charcoal); border-radius: 4px; padding: 26px 24px; display: flex; flex-direction: column; } .splash-door--alumni { border-color: var(--gold); } .splash-door h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); letter-spacing: .06em; margin: 0 0 6px; color: var(--white); } .splash-door--alumni h2 { color: var(--gold); } .splash-sub { font-family: var(--head); font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; } .splash-door p { font-size: 1.02rem; line-height: 1.55; color: var(--cream); margin: 0 0 22px; } .splash-door p:last-of-type { flex: 1; } .splash-door .btn { margin-bottom: 12px; } .splash-door .btn:last-child { margin-bottom: 0; } .splash-deadline { border-top: 2px solid var(--charcoal); padding-top: 24px; font-family: var(--head); font-weight: 700; text-transform: uppercase; font-size: clamp(1.1rem, 2.6vw, 1.6rem); letter-spacing: .06em; color: var(--gold); margin: 0; } @media (max-width: 640px) { .splash-door { padding: 22px 18px; } }