/* ============================================================ reuni-alumni-flyer-homecoming — "Homecoming" reunion poster ------------------------------------------------------------ Design language: a vintage poster pinned to a notice board. Cream paper, navy ink, mustard + maroon pennants, typewriter captions, a taped yearbook photo, a perforated ticket stub. Progressive enhancement: • `.js` (inline in ) → minimal capability flag. • `.invite-ready` (main.js) → locks the 100dvh shell & hides inactive panels. Without it the page is normal-flow and every panel is readable — the no-JS fallback. • `.no-motion` (fail-open) → kills entrance animations. ============================================================ */ :root { --paper: #fbf5e6; --paper-deep: #f3ead4; --ink: #1d2b53; /* deep navy */ --maroon: #7a2e3d; --gold: #c99b2e; --gold-deep: #a67c1d; --charcoal: #3a352b; --muted: #6f6756; --error: #a13a3a; --backdrop: #e7dcc0; --line: rgba(29, 43, 83, 0.18); --font-display: "Anton", "Arial Narrow", sans-serif; --font-body: "Lora", Georgia, serif; --font-type: "Special Elite", "Courier New", monospace; --radius: 6px; --shadow: 0 10px 30px rgba(52, 43, 20, 0.18); } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); color: var(--charcoal); background: radial-gradient(1200px 600px at 50% -10%, rgba(255, 255, 255, 0.5), transparent 60%), var(--backdrop); line-height: 1.5; } img { display: block; max-width: 100%; height: auto; } a { color: var(--gold-deep); } button { font-family: inherit; } /* ============================================================ THE ONE-SCREEN SHELL Without .invite-ready the stage is normal flow (no-JS fallback: everything scrolls, every panel visible). With it, we lock the viewport and let only the active panel scroll internally. ============================================================ */ .stage { min-height: 100vh; min-height: 100dvh; } .invite-ready .stage { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; } .panels { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .invite-ready .panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* inactive panels are hidden only once the app has booted */ .invite-ready .panel:not(.is-active) { display: none; } /* ============================================================ TABS — a ticket-stub strip ============================================================ */ .tabs { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 4px; padding: 10px max(14px, env(safe-area-inset-left)) 9px max(14px, env(safe-area-inset-right)); background: var(--paper); border-bottom: 1px dashed var(--line); box-shadow: 0 2px 0 rgba(52, 43, 20, 0.06); position: relative; z-index: 5; } .tabs:empty { display: none; } .tabs__btn { appearance: none; border: 0; background: transparent; color: var(--muted); font-family: var(--font-display); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; padding: 9px 16px; border-radius: 999px; cursor: pointer; transition: color 0.18s ease, background 0.18s ease; } .tabs__btn:hover { color: var(--ink); } .tabs__btn:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; } .tabs__btn.is-active { color: var(--paper); background: var(--ink); } /* narrow screens: keep every tab label readable — the strip wraps to a second row instead of scrolling or truncating, and targets stay big */ @media (max-width: 560px) { .tabs__btn { font-size: 12px; padding: 10px 13px; } } /* ============================================================ PANELS ============================================================ */ .panel { padding: 0; } .panel:focus { outline: none; } /* ============================================================ THE POSTER ============================================================ */ .poster { max-width: 860px; margin: 0 auto; padding: 0 26px 40px; background: linear-gradient(var(--paper), var(--paper-deep)); box-shadow: var(--shadow); border: 1px solid rgba(58, 53, 43, 0.12); position: relative; } /* bunting */ .bunting { margin: 0 -26px; padding: 14px 18px 2px; display: flex; justify-content: center; gap: 3px; background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(29,43,83,0.06) 14px 17px, transparent 17px 34px), #f6efdd; } .bunting__f { width: 26px; height: 34px; clip-path: polygon(0 0, 100% 0, 50% 100%); } .bunting__f--navy { background: var(--ink); } .bunting__f--maroon { background: var(--maroon); } .bunting__f--gold { background: var(--gold); } /* banner */ .poster__banner { margin: 18px -26px 0; padding: 22px 26px 26px; text-align: center; color: var(--paper); background: var(--ink); border-top: 4px solid var(--gold); border-bottom: 4px solid var(--gold); position: relative; } .poster__banner::before, .poster__banner::after { content: "✦"; position: absolute; top: -16px; color: var(--gold); font-size: 15px; background: var(--paper); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--gold); line-height: 1; } .poster__banner::before { left: 30px; } .poster__banner::after { right: 30px; } /* personal greeting (hidden until the platform injects a `name`) */ .poster__guest { margin: 0 0 10px; font-family: var(--font-type); font-size: 13px; letter-spacing: 0.14em; color: rgba(251, 245, 230, 0.85); } .poster__guest[hidden] { display: none; } .poster__eyebrow { margin: 0 0 4px; font-family: var(--font-type); font-size: 13px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); } .poster__class { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(38px, 9vw, 64px); line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; } .poster__motto { margin: 10px 0 0; font-family: var(--font-type); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(251, 245, 230, 0.75); } /* headline */ .poster__headline { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 34px; } .poster__years { font-family: var(--font-display); font-size: clamp(96px, 26vw, 190px); line-height: 0.9; color: var(--maroon); text-shadow: 3px 3px 0 rgba(122, 46, 61, 0.12); user-select: none; } .poster__words { display: flex; flex-direction: column; align-items: flex-start; } .poster__word { font-family: var(--font-display); font-size: clamp(34px, 9vw, 62px); line-height: 0.95; text-transform: uppercase; color: var(--ink); letter-spacing: 0.02em; } .poster__tagline { margin: 26px auto 0; max-width: 34em; text-align: center; font-size: 17px; line-height: 1.55; color: var(--charcoal); } .poster__tagline em { font-family: var(--font-type); font-style: normal; font-size: 14px; color: var(--muted); } /* polaroid yearbook photo */ .polaroid { margin: 34px auto 0; max-width: 420px; padding: 12px 12px 14px; background: #fffdf6; box-shadow: 4px 6px 18px rgba(52, 43, 20, 0.22); transform: rotate(-1.6deg); position: relative; } .polaroid__link { display: block; color: inherit; text-decoration: none; cursor: zoom-in; } .polaroid__link:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; } .polaroid__img { overflow: hidden; background: linear-gradient(135deg, #d9cfae, #bfb28c); /* fallback while loading */ line-height: 0; } .polaroid__img img { width: 100%; } .polaroid__img picture img { width: 100%; } /* the platform may swap the photo for a on live invites */ .polaroid__tape { position: absolute; top: -14px; left: 50%; width: 108px; height: 30px; margin-left: -54px; background: rgba(201, 155, 46, 0.55); transform: rotate(-2deg); box-shadow: 0 1px 3px rgba(52, 43, 20, 0.25); clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%); } .polaroid__caption { margin: 12px 4px 0; font-family: var(--font-type); font-size: 13px; text-align: center; color: var(--charcoal); letter-spacing: 0.04em; } /* ============================================================ OFFICIAL FLYER / BANNER (optional) — a framed, taped strip on the poster for hosts who already have a designed event flyer; guests can confirm they're in the right place. Tap to view it full size + zoom (lightbox). Delete the whole