/* =========================================================================== Monty's birthday guestbook — Dodger Stadium celebration HOW TO USE THIS FILE -------------------- Everything below "THEME TOKENS" is the personality of the site: change the colours, fonts, radii, and the decorative rules in the THEME LAYER at the bottom. Everything in the FUNCTIONAL LAYER (form, cards, progress bar, focus rings, reduced motion, responsive rules) is what keeps the guestbook usable and accessible — restyle it, but don't delete it. Non-negotiables when re-theming: * :focus-visible must stay clearly visible against its background. * Body text must keep at least 4.5:1 contrast (3:1 for large headings). * overflow-x: hidden on plus max-width:100% on media — no horizontal scrollbar at 320px. * The prefers-reduced-motion block at the bottom must survive. =========================================================================== */ /* ============================ THEME TOKENS ============================ */ :root { --primary: #005A9C; --secondary: #1B2E5B; --accent: #E4572E; --surface: #F7F3EA; /* page background */ --card: #FFFFFF; /* raised cards and the form */ --ink: #16233A; /* body text */ --ink-soft: #4E5D74; /* secondary text */ --on-primary: #FFFFFF;/* text on primary surfaces */ --font-display: "Oswald", "Arial Narrow", sans-serif; --font-body: system-ui, -apple-system, "Segoe UI", sans-serif; --font-accent: "Caveat", "Segoe Script", cursive; --radius: 12px; --shadow: 0 10px 30px rgb(0 0 0 / 0.16); --wrap: 68rem; } /* ========================== FUNCTIONAL LAYER ========================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; color: var(--ink); background: var(--surface); overflow-x: hidden; /* belt for decorative overhangs */ } img, svg, video { max-width: 100%; } img, video { height: auto; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 0.5em; text-wrap: balance; } a { color: var(--primary); } .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); } /* Keyboard access -------------------------------------------------------- */ .skip-link { position: absolute; left: 0.75rem; top: -4rem; z-index: 50; background: var(--ink); color: var(--surface); padding: 0.6rem 1rem; border-radius: 0 0 10px 10px; text-decoration: none; font-weight: 700; transition: top 0.15s ease; } .skip-link:focus { top: 0; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* --------------------------------- HERO --------------------------------- */ .hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--secondary), var(--primary)); color: var(--on-primary); text-align: center; } .hero-bg { position: absolute; inset: 0; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Scrim so the heading keeps its contrast over any photo. Tune the alpha, don't remove it — text over an unscrimmed photo will fail contrast. */ .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.55)); } .hero-inner { position: relative; z-index: 1; max-width: 46rem; margin-inline: auto; padding: clamp(3rem, 8vh, 5.5rem) 1.25rem clamp(3rem, 8vh, 4.5rem); } .eyebrow { margin: 0 0 0.9rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.82rem; } .hero h1 { font-size: clamp(2.4rem, 8vw, 4.4rem); margin-bottom: 0.25em; } .hero-sub { margin: 0 auto 2.4rem; max-width: 34rem; font-size: clamp(1.05rem, 2.4vw, 1.3rem); font-weight: 600; } /* Portrait / family photo */ .portrait { position: relative; display: inline-block; margin: 0; max-width: min(460px, 92vw); background: var(--card); padding: 14px 14px 10px; border-radius: 8px; box-shadow: var(--shadow); } .portrait-photo { display: block; width: 100%; border-radius: 4px; } .portrait-caption { font-family: var(--font-accent); font-size: 1.5rem; color: var(--ink-soft); margin: 0.35rem 0 0.1rem; } /* The World Series ring, pinned to the portrait like a champion's badge. */ .ring-badge { position: absolute; top: -26px; right: -20px; width: clamp(72px, 16vw, 104px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 3px solid #C9A227; background: #0b0b0e; box-shadow: var(--shadow); transform: rotate(8deg); } .ring-badge img { display: block; width: 100%; height: 100%; object-fit: cover; } /* -------------------------------- ABOUT -------------------------------- */ .about { background: var(--surface); text-align: center; padding: clamp(2.5rem, 6vw, 4rem) 0; } .about h2 { font-size: clamp(1.9rem, 5vw, 2.7rem); color: var(--primary); } .lede { max-width: 40rem; margin: 0 auto 2.2rem; font-size: clamp(1.05rem, 2.2vw, 1.2rem); color: var(--ink-soft); } .pillars { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem 1rem; padding: 0; margin: 0; } .pillars li { display: inline-flex; align-items: center; gap: 0.55rem; background: var(--card); border: 1.5px solid color-mix(in srgb, var(--primary) 25%, transparent); border-radius: 999px; padding: 0.55rem 1.15rem; font-weight: 700; color: var(--primary); } /* ------------------------------ GUESTBOOK ------------------------------ */ .guestbook { background: var(--primary); color: var(--on-primary); padding: clamp(2.8rem, 6vw, 4.5rem) 0; } .guestbook h2 { font-size: clamp(2rem, 5vw, 2.8rem); text-align: center; color: inherit; } .section-sub { text-align: center; max-width: 34rem; margin: 0 auto 2.4rem; } /* The signing form */ .signing-card { background: var(--card); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); max-width: 40rem; margin: 0 auto 3.5rem; padding: clamp(1.3rem, 4vw, 2.2rem); } .field { margin-bottom: 1.2rem; } .field label, .file-label { display: block; font-weight: 800; margin-bottom: 0.35rem; color: var(--ink); } .file-label em { font-style: normal; font-weight: 600; color: var(--ink-soft); } .field input[type="text"], .field textarea { width: 100%; font: inherit; color: var(--ink); background: #fff; border: 2px solid color-mix(in srgb, var(--ink) 20%, transparent); border-radius: 10px; padding: 0.65rem 0.85rem; transition: border-color 0.15s ease; } .field input[type="text"]:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--primary); } .field textarea { resize: vertical; min-height: 7.5rem; } .field.invalid input, .field.invalid textarea { border-color: #c0392b; } .count { float: right; font-weight: 600; font-size: 0.8rem; color: var(--ink-soft); } .field-err { margin: 0.35rem 0 0; color: #c0392b; font-weight: 700; font-size: 0.92rem; } .field-hint { margin: 0.35rem 0 0; color: var(--ink-soft); font-size: 0.85rem; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } @media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } } /* Styled file pickers. The real input stays in the accessibility tree — it is visually hidden, NOT display:none, so it remains focusable and the