:root { --bg: #050308; --bg-2: #0a060e; --ink: #cec8d4; --muted: #746c7e; --pumpkin: #9b1c1c; /* primary accent: dried blood */ --pumpkin-deep: #5a0c0c; --blood: #6b0202; --witch: #8a8f9c; /* secondary accent: ashen grave-grey */ --glow: rgba(155, 28, 28, 0.4); --card: rgba(14, 9, 18, 0.78); --border: rgba(155, 28, 28, 0.16); --on-primary: #f0e6e6; /* text/icon color on top of --pumpkin */ --display: "Cinzel", Georgia, serif; --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; } /* ===================================================================== Party theme palette. theme.js sets data-theme on and paints the matching copy from themes/.json. ===================================================================== */ /* "Gods & Monsters" — gold, marble, and midnight over Olympus. */ body[data-theme="mythology"] { --bg: #02040a; --bg-2: #050914; --ink: #c3d2e4; /* moonlit silver-blue */ --muted: #8293a9; --pumpkin: #8fbfe8; /* cold lightning blue */ --pumpkin-deep: #315d88; --witch: #a9c9e7; /* pale storm-lit marble */ --glow: rgba(111, 177, 230, 0.3); --card: rgba(9, 10, 16, 0.86); --border: rgba(143, 191, 232, 0.2); --on-primary: #06101b; } /* Storm over Olympus: cold slate above, a bruise of gold where the lightning sits behind the cloud, and the horizon guttering out into black. */ body[data-theme="mythology"]::before { background: radial-gradient(950px 520px at 52% -10%, rgba(83, 99, 126, 0.34) 0%, transparent 64%), radial-gradient(1100px 650px at 8% 4%, #151d2c 0%, transparent 64%), radial-gradient(1050px 600px at 94% 8%, #101827 0%, transparent 62%), radial-gradient(760px 420px at 54% -8%, rgba(111, 177, 230, 0.14) 0%, transparent 64%), linear-gradient(180deg, #080d18 0%, #030711 48%, #010308 100%); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--serif); font-size: 19px; line-height: 1.6; color: var(--ink); background-color: var(--bg); min-height: 100vh; } [hidden] { display: none !important; } /* ===================================================================== The backdrop is three fixed layers, painted back to front: body::before (-3) the sky .scene (-2) storm clouds, lightning, and the colonnade body::after (-1) the gloom vignette, which unifies the two above All are fixed and composited on their own layer so they are NOT re-rasterized on every scroll frame (the old background-attachment: fixed on was the source of the scroll jank). ===================================================================== */ /* Sky. Per-theme ::before rules override this default (red) gradient. */ body::before { content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none; background: radial-gradient(1200px 800px at 50% -15%, #1a040c 0%, transparent 58%), radial-gradient(900px 700px at 85% 15%, #0c0409 0%, transparent 55%), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); } /* Gloom vignette — pulls the edges of the page down into the dark. */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(135% 115% at 50% 30%, transparent 44%, rgba(0, 0, 0, 0.74) 100%); } /* ===================================================================== The scene: a storm rolling behind a marble colonnade. Decorative only — the markup is aria-hidden, and every layer is pointer-events: none. ===================================================================== */ .scene { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; } /* Generated stormcloud matte: slightly oversized so it can drift without exposing an edge. A dark overlay protects text contrast at every crop. */ .scene__clouds { position: absolute; inset: -6%; background: linear-gradient(180deg, rgba(1, 3, 8, 0.08), rgba(1, 3, 8, 0.38)), url("media/stormclouds.png") center top / cover no-repeat; filter: saturate(0.78) contrast(1.12) brightness(0.72); animation: storm-drift 55s ease-in-out infinite alternate; will-change: transform; } /* Wind-driven rain catches just enough light to texture the darkness. */ .scene__rain { position: absolute; inset: -20% -25%; opacity: 0.2; background-image: repeating-linear-gradient( 104deg, transparent 0 12px, rgba(174, 193, 216, 0.26) 13px, transparent 14px 27px ); background-size: 38px 110px; mask-image: linear-gradient(180deg, transparent 2%, #000 24%, #000 84%, transparent 100%); animation: driving-rain 1.1s linear infinite; will-change: transform; } /* A far-off strike behind the cloud — brief, and a long wait between. */ .scene__flash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(90% 62% at 55% -8%, rgba(226, 235, 255, 0.95) 0%, rgba(119, 145, 190, 0.36) 38%, transparent 70%), linear-gradient(180deg, rgba(107, 133, 178, 0.12), transparent 60%); animation: lightning 17s ease-out infinite; } /* ---------- Marble colonnade ---------- */ .pillar { position: absolute; top: 0; bottom: 0; width: clamp(54px, 7.5vw, 112px); /* Grooves, then floor/ceiling grime, then the cylinder shading itself — lit down the right-hand edge, so the light reads as coming from the centre of the page. The right pillar is the same drawing, mirrored. */ background-image: repeating-linear-gradient( 90deg, rgba(0, 0, 0, 0.6) 0 2px, rgba(0, 0, 0, 0.14) 2px 6px, rgba(255, 255, 255, 0.05) 6px 11px, rgba(0, 0, 0, 0.14) 11px 15px, rgba(0, 0, 0, 0.6) 15px 17px ), linear-gradient( 180deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.12) 70%, rgba(0, 0, 0, 0.9) 100% ), linear-gradient( 90deg, #0b0e14 0%, #1e2430 24%, #38404f 58%, #4d5768 86%, #232a36 100% ); box-shadow: inset 0 0 46px rgba(0, 0, 0, 0.55); } .pillar--left { left: 0; } .pillar--right { right: 0; transform: scaleX(-1); } /* Capital and base — the slabs that cap the shaft, slightly overhanging. */ .pillar::before, .pillar::after { content: ""; position: absolute; left: -10%; right: -10%; height: clamp(16px, 2vw, 30px); } .pillar::before { top: 0; background: linear-gradient(180deg, #596375 0%, #2c3340 58%, #161a22 100%); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.7); } .pillar::after { bottom: 0; background: linear-gradient(0deg, #4f596a 0%, #262c38 58%, #13171e 100%); box-shadow: 0 -10px 26px rgba(0, 0, 0, 0.7); } /* Narrow screens: the colonnade would crowd the text, so thin it out, then drop it entirely once the content needs the full width. */ @media (max-width: 1100px) { .pillar { opacity: 0.55; } } @media (max-width: 820px) { .pillar { display: none; } } @keyframes storm-drift { from { transform: translate3d(-1.5%, -0.5%, 0) scale(1.015); } to { transform: translate3d(1.5%, 0.75%, 0) scale(1.035); } } @keyframes driving-rain { from { transform: translate3d(-3%, -8%, 0); } to { transform: translate3d(3%, 8%, 0); } } /* Mostly dead air, then a double-strike: bright, gutter, brighter, gone. */ @keyframes lightning { 0%, 62% { opacity: 0; } 63% { opacity: 0.34; } 64.2% { opacity: 0.06; } 65% { opacity: 0.26; } 68% { opacity: 0; } 100% { opacity: 0; } } .muted { color: var(--muted); font-size: 0.9em; } /* ---------- Buttons ---------- */ .btn { display: inline-block; font-family: var(--serif); font-size: 1.1rem; letter-spacing: 0.03em; padding: 0.75em 1.6em; border-radius: 999px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.25s ease, background 0.25s ease; } .btn--primary { background: linear-gradient(180deg, var(--pumpkin) 0%, var(--pumpkin-deep) 100%); color: var(--on-primary); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 0 0 0 var(--glow), 0 8px 30px -10px #000; animation: pulse 5.5s ease-in-out infinite; } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 0 28px 4px var(--glow), 0 10px 34px -8px var(--pumpkin-deep); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--border); } .btn--ghost:hover { border-color: var(--pumpkin); color: var(--pumpkin); } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--glow), 0 8px 30px -8px var(--pumpkin-deep); } 50% { box-shadow: 0 0 26px 6px var(--glow), 0 8px 30px -8px var(--pumpkin-deep); } } /* ---------- Intro splash ---------- */ .intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; text-align: center; overflow: hidden; /* Not quite opaque — the storm and the colonnade read through the splash, so the page opens on the scene the guest is about to walk into. */ background: radial-gradient(760px 560px at 50% 48%, var(--glow), transparent 72%), linear-gradient(180deg, rgba(4, 6, 12, 0.9) 0%, rgba(3, 4, 9, 0.94) 100%); transition: opacity 0.8s ease, visibility 0.8s ease; } .intro.is-leaving { opacity: 0; visibility: hidden; } .intro__inner { position: relative; z-index: 2; padding: 2rem; animation: rise 1s ease both; } .intro__eyebrow, .hero__eyebrow { text-transform: uppercase; letter-spacing: 0.35em; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.5rem; } .intro__title { font-family: var(--display); font-weight: 400; font-size: clamp(3rem, 12vw, 7rem); line-height: 0.95; margin: 0.2em 0; color: var(--pumpkin); text-shadow: 0 0 14px var(--glow), 0 8px 36px #000, 0 2px 4px #000; letter-spacing: 0.06em; } .intro__sub { color: var(--muted); margin: 1.2rem 0 2rem; font-style: italic; } .intro__quiet { display: block; margin: 1.25rem auto 0; background: none; border: none; color: var(--muted); font-family: var(--serif); font-size: 0.95rem; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .intro__quiet:hover { color: var(--ink); } /* Drifting fog */ .intro__fog { position: absolute; inset: -20% -20% 0 -20%; z-index: 1; background: radial-gradient(closest-side, rgba(22, 24, 20, 0.5), transparent 70%) 10% 80% / 55% 55% no-repeat, radial-gradient(closest-side, rgba(14, 15, 18, 0.5), transparent 70%) 80% 90% / 65% 65% no-repeat, radial-gradient(closest-side, rgba(90, 92, 96, 0.06), transparent 70%) 50% 100% / 70% 50% no-repeat; animation: drift 16s ease-in-out infinite alternate; pointer-events: none; } @keyframes drift { from { transform: translateX(-4%) translateY(0); } to { transform: translateX(4%) translateY(-3%); } } @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* ---------- Video ---------- */ .video { position: fixed; inset: 0; z-index: 90; background: #000; display: grid; place-items: center; } .video__el { width: 100%; height: 100%; object-fit: cover; } .video__overlay { position: absolute; bottom: 6vh; right: 5vw; z-index: 2; } /* ---------- Music toggle ---------- */ .music-toggle { position: fixed; top: 1rem; right: 1rem; z-index: 80; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5em 1em; border-radius: 999px; border: 1px solid var(--border); background: rgba(11, 6, 16, 0.7); backdrop-filter: blur(6px); color: var(--ink); font-family: var(--serif); font-size: 0.95rem; cursor: pointer; } .music-toggle:hover { border-color: var(--pumpkin); } .music-toggle__icon { color: var(--pumpkin); } .music-toggle[aria-pressed="false"] { color: var(--muted); } .music-toggle[aria-pressed="false"] .music-toggle__icon { color: var(--muted); } /* ---------- Content layout ---------- */ .content { max-width: 1000px; margin: 0 auto; padding: 0 1.25rem 4rem; animation: rise 1s ease both; } .hero { text-align: center; padding: clamp(4rem, 12vh, 9rem) 1rem 3rem; } .hero__title { font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 9vw, 5.5rem); margin: 0.1em 0 0.2em; color: var(--pumpkin); text-shadow: 0 0 14px var(--glow), 0 8px 38px #000, 0 2px 4px #000; line-height: 1; letter-spacing: 0.04em; } .hero__tag { font-size: clamp(1.2rem, 3vw, 1.7rem); font-style: italic; color: var(--ink); margin: 0 0 2rem; } .section { padding: 3rem 0; border-top: 1px solid var(--border); } .section__title { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 6vw, 3.2rem); color: var(--witch); text-shadow: 0 2px 20px #000; text-align: center; margin: 0 0 1.5rem; letter-spacing: 0.12em; text-transform: uppercase; } .section__lead { font-size: 1.25rem; text-align: center; max-width: 46ch; margin: 0 auto 1.5rem; } .theme p { max-width: 60ch; margin: 0 auto 1rem; text-align: center; } .theme .section__lead { margin-bottom: 1.6rem; } /* ---------- Party contests ---------- */ .contest__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; } .contest-card { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 1.75rem 1.5rem; text-align: center; } .contest-card__number { display: block; color: var(--muted); font-family: var(--display); font-size: 0.85rem; letter-spacing: 0.18em; margin-bottom: 0.65rem; } .contest-card h3 { color: var(--pumpkin); font-family: var(--display); font-size: 1.35rem; font-weight: 400; letter-spacing: 0.04em; margin: 0 0 0.75rem; } .contest-card p { margin: 0; } /* ---------- Party photos ---------- */ .photos { text-align: center; } .photos .section__lead { margin-bottom: 1.6rem; } /* ---------- Detail cards ---------- */ .details__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin-bottom: 2.5rem; } .detail-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem; text-align: center; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .detail-card:hover { transform: translateY(-4px); border-color: var(--pumpkin); box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.85); } .detail-card h3 { font-family: var(--display); font-weight: 400; letter-spacing: 0.04em; font-size: 1.5rem; color: var(--pumpkin); margin: 0 0 0.5rem; } .detail-card p { margin: 0; color: var(--ink); } .rsvp-cta { text-align: center; } .rsvp-cta p:first-child { font-size: 1.4rem; font-style: italic; margin-bottom: 1rem; } .rsvp-cta .muted { margin-top: 1rem; } /* ---------- RSVP form ---------- */ .rsvp-form, .rsvp-thanks { max-width: 520px; margin: 2rem auto 0; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 1.75rem; } .field { margin-bottom: 1.25rem; } .field > label, .field legend { display: block; font-size: 1.05rem; letter-spacing: 0.02em; margin-bottom: 0.5rem; color: var(--ink); } .req { color: var(--pumpkin); } .rsvp-form input[type="text"], .rsvp-form textarea { width: 100%; font-family: var(--serif); font-size: 1.05rem; color: var(--ink); background: rgba(11, 6, 16, 0.6); border: 1px solid var(--border); border-radius: 10px; padding: 0.7em 0.9em; resize: vertical; } .rsvp-form input[type="text"]::placeholder, .rsvp-form textarea::placeholder { color: rgba(154, 143, 176, 0.6); } .rsvp-form input[type="text"]:focus, .rsvp-form textarea:focus { outline: none; border-color: var(--pumpkin); box-shadow: 0 0 0 3px var(--glow); } .field--choice { border: none; margin: 0 0 1.25rem; padding: 0; } .choice { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .choice input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .choice__btn { display: block; text-align: center; padding: 0.8em 0.5em; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; color: var(--muted); transition: all 0.2s ease; } .choice__btn:hover { border-color: var(--pumpkin); color: var(--ink); } .choice input[type="radio"]:checked + .choice__btn { border-color: var(--pumpkin); color: var(--on-primary); background: linear-gradient(180deg, var(--pumpkin) 0%, var(--pumpkin-deep) 100%); font-weight: 600; } .choice input[type="radio"]:focus-visible + .choice__btn { box-shadow: 0 0 0 3px var(--glow); } .rsvp-form__error { color: #ff9a9a; background: rgba(138, 3, 3, 0.25); border: 1px solid rgba(138, 3, 3, 0.5); border-radius: 10px; padding: 0.6em 0.9em; margin: 0 0 1rem; font-size: 0.98rem; } .rsvp-form__returning { color: var(--muted); font-style: italic; margin: 0 0 1.25rem; } #rsvpSubmit { width: 100%; } #costumeField.is-hidden { display: none; } /* ---------- RSVP thank-you ---------- */ .rsvp-thanks { text-align: center; } .rsvp-thanks__title { font-size: 1.6rem; margin: 0 0 0.5rem; } #thanksHeadline { font-family: var(--display); color: var(--pumpkin); letter-spacing: 0.03em; } #thanksBody { color: var(--ink); margin: 0 0 1.5rem; } /* ---------- Admin page ---------- */ .admin { max-width: 960px; margin: 0 auto; padding: 3rem 1.25rem 4rem; } .admin__header { text-align: center; margin-bottom: 2rem; } .admin__title { font-family: var(--display); font-weight: 400; font-size: clamp(2.4rem, 8vw, 4rem); color: var(--pumpkin); text-shadow: 0 0 18px var(--glow); margin: 0; } .admin__keyform { max-width: 420px; margin: 2rem auto; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem; text-align: center; } .admin__keyrow { display: flex; gap: 0.5rem; margin-top: 0.75rem; } .admin__keyform input { flex: 1; font-family: var(--serif); font-size: 1.05rem; color: var(--ink); background: rgba(11, 6, 16, 0.6); border: 1px solid var(--border); border-radius: 10px; padding: 0.6em 0.9em; } .admin__keyform input:focus { outline: none; border-color: var(--pumpkin); } .admin__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-bottom: 2rem; } .admin__stat { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.25rem 1rem; text-align: center; } .admin__stat-num { display: block; font-family: var(--display); font-size: 2.6rem; color: var(--pumpkin); line-height: 1; } .admin__stat-label { display: block; margin-top: 0.4rem; color: var(--muted); font-size: 0.95rem; } .admin__toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 1rem; } .admin__search { flex: 1; min-width: 180px; font-family: var(--serif); font-size: 1rem; color: var(--ink); background: rgba(11, 6, 16, 0.6); border: 1px solid var(--border); border-radius: 999px; padding: 0.55em 1em; } .admin__search:focus { outline: none; border-color: var(--pumpkin); } .admin__toolbar .btn { font-size: 0.95rem; padding: 0.5em 1.1em; } .admin__tablewrap { overflow-x: auto; background: var(--card); border: 1px solid var(--border); border-radius: 14px; } .admin__table { width: 100%; border-collapse: collapse; font-size: 1rem; } .admin__table th, .admin__table td { text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top; } .admin__table th { color: var(--witch); font-weight: 600; letter-spacing: 0.03em; } .admin__table tr:last-child td { border-bottom: none; } .badge { display: inline-block; padding: 0.2em 0.7em; border-radius: 999px; font-size: 0.85rem; font-weight: 600; } .badge--yes { background: rgba(46, 160, 67, 0.25); color: #7ee29a; } .badge--no { background: rgba(138, 3, 3, 0.25); color: #ff9a9a; } .admin__empty { text-align: center; padding: 2rem 1rem; } .admin__back { text-align: center; margin-top: 2rem; } .admin__back a { color: var(--muted); text-decoration: none; } .admin__back a:hover { color: var(--pumpkin); } /* ---------- FAQ ---------- */ .faq__list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.85rem; } .faq__item { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .faq__item summary { cursor: pointer; padding: 1rem 1.25rem; font-size: 1.2rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--ink); transition: color 0.2s ease; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: "\002B"; color: var(--pumpkin); font-size: 1.4rem; transition: transform 0.2s ease; } .faq__item[open] summary::after { content: "\2212"; } .faq__item summary:hover { color: var(--pumpkin); } .faq__body { padding: 0 1.25rem 1.1rem; color: var(--muted); } .faq__body p { margin: 0; } /* ---------- Footer ---------- */ .footer { text-align: center; padding: 4rem 1rem 1rem; border-top: 1px solid var(--border); margin-top: 2rem; } .footer__sign { font-size: 1.5rem; font-style: italic; color: var(--ink); margin-bottom: 0.25rem; } #replayBtn { margin-top: 1.5rem; } /* ---------- Motion preferences ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* The storm holds still: clouds park where they are, no lightning at all. */ .scene__clouds, .scene__rain { animation: none !important; } .scene__flash { animation: none !important; opacity: 0; } }