/* ============================================================================= Wedding site styles. Two visual worlds live here: 1) the PIXEL GAME (crisp, retro) — the 2) the HAND-DRAWN PANELS (soft, painterly) — the overlays & menu ========================================================================== */ :root { --ink: #3a2f2a; --paper: #fbf3e2; --paper-edge: #e7d7b8; --accent: #e26d8a; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --script: "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive; } * { box-sizing: border-box; } /* The [hidden] attribute must always win over the display rules below, otherwise .overlay/.menu-overlay would show even when hidden. */ [hidden] { display: none !important; } /* Keep a normal text caret in typing fields (the heart cursor is set on ). */ input, textarea { cursor: text; } html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #6ab04c; font-family: var(--serif); color: var(--ink); -webkit-tap-highlight-color: transparent; } /* ---- The pixel game canvas ---- */ #game { display: block; width: 100vw; height: 100vh; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; } /* ---- Always-visible headline ---- */ #hero { position: fixed; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; z-index: 5; text-shadow: 0 2px 0 rgba(0,0,0,0.25), 0 0 18px rgba(0,0,0,0.25); color: #fff; width: min(92vw, 640px); } .hero-names { font-family: var(--script); font-size: clamp(28px, 6vw, 54px); line-height: 1.05; letter-spacing: 0.5px; } .hero-sub { font-family: var(--serif); font-size: clamp(12px, 2.4vw, 18px); letter-spacing: 2px; text-transform: uppercase; margin-top: 4px; opacity: 0.95; } /* On touch devices the ☰ menu button sits top-left; drop the centered header down a row so the date isn't hidden behind it. */ @media (pointer: coarse) { #hero { top: max(62px, calc(env(safe-area-inset-top) + 48px)); } } /* ---- Hint line ---- */ .hint { position: fixed; bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 5; background: rgba(58,47,42,0.72); color: #fff; padding: 8px 16px; border-radius: 999px; font-size: 13px; letter-spacing: 0.4px; transition: opacity 0.6s ease; pointer-events: none; } .hint.gone { opacity: 0; } /* ---- Proximity prompt above a sign ---- */ .prompt { position: fixed; z-index: 6; transform: translate(-50%, -100%); background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 8px; padding: 4px 10px; font-weight: 700; font-family: var(--serif); font-size: 14px; white-space: nowrap; box-shadow: 0 3px 0 rgba(0,0,0,0.25); pointer-events: none; } /* ---- Menu button + overlay ---- */ .menu-btn { position: fixed; top: max(14px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); z-index: 7; background: rgba(255,255,255,0.9); border: 2px solid var(--ink); border-radius: 10px; padding: 8px 12px; font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,0.2); } .menu-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,0.2); } .menu-overlay { position: fixed; inset: 0; z-index: 20; background: rgba(58,47,42,0.55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; overflow-y: auto; /* scroll on short screens */ padding: 24px; } .menu-overlay .menu-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; margin: auto; /* center, but never clip when it overflows */ } .menu-overlay .menu-x { position: absolute; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.85); background: rgba(255,255,255,0.14); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; } .menu-overlay .menu-x:active { background: rgba(255,255,255,0.28); } .menu-overlay h1 { font-family: var(--script); color: #fff; font-size: clamp(30px, 7vw, 56px); margin: 0; text-align: center; } .menu-overlay .menu-meta { color: rgba(255,255,255,0.85); font-family: var(--serif); font-size: 15px; margin: 0 0 8px; text-align: center; } .menu-overlay .menu-link { width: min(90vw, 360px); text-align: center; background: var(--paper); border: 2px solid var(--ink); border-radius: 12px; padding: 14px 18px; font-size: 20px; font-weight: 700; color: var(--ink); cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,0.25); } .menu-overlay .menu-link:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.25); } /* ---- Hand-drawn section panels ---- */ .overlay { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 20px; } .overlay-backdrop { position: absolute; inset: 0; background: rgba(58,47,42,0.55); backdrop-filter: blur(3px); } .panel { position: relative; width: min(94vw, 620px); max-height: 90vh; background: var(--paper); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 12px 40px rgba(0,0,0,0.35), inset 0 0 0 6px rgba(255,255,255,0.4); overflow: hidden; animation: pop 0.22s ease; } @keyframes pop { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } } .panel-scroll { max-height: 90vh; overflow-y: auto; padding: 0 0 28px; } .panel-art { height: 150px; background: var(--paper-edge); background-size: cover; background-position: center; border-bottom: 3px solid var(--ink); display: flex; align-items: center; justify-content: center; color: rgba(58,47,42,0.5); font-style: italic; font-size: 14px; } .panel-title { font-family: var(--script); font-size: clamp(30px, 6vw, 44px); text-align: center; margin: 18px 24px 6px; color: var(--ink); } .panel-body { padding: 0 24px; font-size: 16px; line-height: 1.5; } .panel-body .intro { text-align: center; opacity: 0.85; margin: 0 auto 20px; max-width: 46ch; } .panel-close { position: absolute; top: 10px; right: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font-size: 16px; cursor: pointer; } /* Section-specific bits */ .faq-item { border-bottom: 1px solid var(--paper-edge); } .faq-item summary { cursor: pointer; font-weight: 700; padding: 12px 0; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::before { content: "＋ "; color: var(--accent); } .faq-item[open] summary::before { content: "－ "; } .faq-item p { margin: 0 0 14px; opacity: 0.9; } .timeline { list-style: none; padding: 0; margin: 0; } .timeline li { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--paper-edge); } .timeline .t-time { flex: 0 0 84px; font-weight: 700; color: var(--accent); } .timeline .t-title { font-weight: 700; } .timeline .t-desc { opacity: 0.85; font-size: 14px; } .timeline .t-loc { opacity: 0.7; font-size: 13px; font-style: italic; } .registry-card { display: block; border: 2px solid var(--ink); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; text-decoration: none; color: var(--ink); background: #fff; box-shadow: 0 3px 0 rgba(0,0,0,0.15); } .registry-card .r-name { font-weight: 700; font-size: 18px; } .registry-card .r-desc { opacity: 0.8; font-size: 14px; } form.rsvp label { display: block; font-weight: 700; margin: 14px 0 6px; } form.rsvp input[type=text], form.rsvp input[type=email], form.rsvp input[type=number], form.rsvp select, form.rsvp textarea { width: 100%; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 10px; font-family: var(--serif); font-size: 16px; /* 16px+ stops iOS Safari from zooming in when a field is tapped */ background: #fff; } form.rsvp .radios { display: flex; gap: 18px; margin-top: 6px; } form.rsvp .radios label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; } form.rsvp button.submit { margin-top: 22px; width: 100%; padding: 14px; font-size: 18px; font-weight: 700; font-family: var(--serif); color: #fff; background: var(--accent); border: 2px solid var(--ink); border-radius: 12px; cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,0.25); } form.rsvp button.submit:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.25); } .rsvp-note { text-align: center; margin-top: 14px; font-size: 14px; opacity: 0.75; } /* ---- Photo trail: single photo view ---- */ .photo-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; background: var(--paper-edge); border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .photo-ph { display: none; position: absolute; text-align: center; font-style: italic; color: rgba(58,47,42,0.55); font-size: 14px; } .photo-ph span { font-size: 12px; opacity: 0.8; } .photo-frame.missing img { display: none; } .photo-frame.missing .photo-ph { display: block; } .photo-nav { display: flex; gap: 8px; margin-top: 14px; } .photo-nav button { flex: 1; padding: 10px; border: 2px solid var(--ink); background: #fff; border-radius: 10px; font-family: var(--serif); font-weight: 700; color: var(--ink); cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,0.15); } .photo-nav button:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,0.15); } /* ---- Photo trail: gallery grid ---- */ .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; } .gallery-item { border: none; background: none; padding: 0; cursor: pointer; text-align: center; color: var(--ink); font-family: var(--serif); } .gallery-item .thumb { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--paper-edge); border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; } .gallery-item .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .gallery-item .thumb.missing { display: flex; align-items: center; justify-content: center; } .gallery-item .thumb.missing::after { content: "🌿"; color: rgba(58,47,42,0.5); font-size: 22px; } .gallery-item .thumb.missing img { display: none; } .gallery-item .cap { display: block; font-size: 13px; margin-top: 6px; font-weight: 700; } .gallery-item:active .thumb { transform: translateY(2px); } /* ---- "Catch the Bouquet!" mini-game ---- */ .minigame { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 30%, rgba(58,47,42,0.82), rgba(30,24,26,0.94)); padding: 12px; } .mg-stage { position: relative; } .mg-canvas { display: block; height: min(92vh, 138vw); aspect-ratio: 400 / 600; width: auto; image-rendering: pixelated; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,0.5); touch-action: none; background: #cfeaf7; } /* Angry Dill uses a wide (landscape) field so Dill is far from the glass */ #ad-canvas { aspect-ratio: 760 / 540; height: auto; width: min(94vw, 126vh); } .mg-hud { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; pointer-events: none; font-family: var(--serif); font-weight: 700; } .mg-hud span { background: rgba(255,255,255,0.9); border: 2px solid var(--ink); border-radius: 999px; padding: 4px 12px; font-size: 18px; letter-spacing: 2px; } .mg-screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 22px; overflow-y: auto; text-align: center; background: rgba(251,243,226,0.94); border-radius: 16px; color: var(--ink); } .mg-screen h2 { font-family: var(--script); font-size: clamp(30px, 8vw, 46px); margin: 0; } .mg-screen h3 { margin: 4px 0; font-size: 16px; letter-spacing: 1px; text-transform: uppercase; opacity: 0.8; } .mg-sub { margin: 0; font-size: 15px; opacity: 0.85; line-height: 1.4; } .mg-controls { font-size: 13px; opacity: 0.7; } .mg-result { font-size: 22px; font-weight: 700; margin: 2px 0; } .mg-btns { display: flex; flex-direction: column; gap: 8px; width: min(80%, 260px); margin-top: 4px; } .mg-btn { padding: 12px 16px; font-family: var(--serif); font-size: 17px; font-weight: 700; color: #fff; background: var(--accent); border: 2px solid var(--ink); border-radius: 12px; cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,0.25); } .mg-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.25); } .mg-btn.mg-ghost { background: #fff; color: var(--ink); box-shadow: 0 3px 0 rgba(0,0,0,0.15); } .mg-board { width: min(90%, 300px); } .mg-board ol { list-style: none; margin: 6px 0 0; padding: 0; } .mg-board li { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-bottom: 1px dashed var(--paper-edge); font-size: 15px; } .mg-board .mg-rank { width: 20px; font-weight: 700; color: var(--accent); } .mg-board .mg-nm { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mg-board .mg-sc { font-weight: 700; } .mg-board .mg-empty { justify-content: center; opacity: 0.7; font-style: italic; border: none; } /* shown when we couldn't reach /api/scores and fell back to this browser's scores */ .mg-board-note { margin: 6px 0 0; font-size: 12px; font-style: italic; opacity: 0.55; } .mg-name { display: flex; gap: 8px; width: min(85%, 300px); } .mg-name input { flex: 1; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 10px; font-family: var(--serif); font-size: 16px; background: #fff; } .mg-name .mg-btn { width: auto; padding: 10px 16px; } @media (prefers-reduced-motion: reduce) { .panel { animation: none; } }