/* ============================================================================ Alma Pulse — Events & RSVP : shared published-page theme CSS Ported from work/event-rsvp-builder-mockup.html (builder canvas / guest preview). Consumed by the public /e/:slug page (Task 5). Builder-only chrome is NOT here. The page should also link Google Fonts (Montserrat) in its . ============================================================================ */ :root{ --purple:#442C5C; --purple-deep:#2D1B43; --purple-soft:#5B3E76; --haze1:#442C5C; --haze2:#1a0f2e; --peach:#FFBD98; --peach-soft:#FFD6BC; --peach-deep:#E89977; --gold:#D8B66E; --gold-soft:#E7CE92; --gold-deep:#C9A656; --grey:#302E2F; --cream:#f5f2ef; --paper:#ffffff; --ink:#1f1530; --muted:#8a8294; --line:#e7e2ec; --good:#34c77b; --font:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --shadow:0 8px 30px rgba(45,27,67,.10); --shadow-sm:0 3px 12px rgba(45,27,67,.08); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{font-family:var(--font);-webkit-font-smoothing:antialiased} /* ===== Page container (full-width public page) ===== */ .page{background:#fff;min-height:100vh;overflow:hidden} /* ===== Rendered page themes (shared by builder canvas + guest preview) ===== */ .pg{font-family:var(--font)} .pg .b-hero{padding:54px 40px;position:relative;overflow:hidden} .pg .b-hero .diag{position:absolute;inset:0;opacity:.4;pointer-events:none;background: linear-gradient(135deg,transparent 48.5%,currentColor 48.5%,currentColor 49.7%,transparent 49.7%), linear-gradient(135deg,transparent 53%,currentColor 53%,currentColor 53.9%,transparent 53.9%); background-size:220px 220px;background-repeat:no-repeat} .pg .kicker{font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:600;opacity:.85;margin:0 0 12px;position:relative} .pg .b-hero h1{font-size:34px;font-weight:900;line-height:1.08;margin:0;position:relative;max-width:80%} .pg .b-hero .when{margin:16px 0 0;font-size:14px;font-weight:600;position:relative;display:flex;gap:8px;align-items:center} .pg .sec{padding:30px 40px} .pg h2.sh{font-size:20px;font-weight:800;margin:0 0 12px} .pg p.tx{font-size:14.5px;line-height:1.65;margin:0 0 12px} /* Text block is a div.tx carrying rich (sanitised) HTML — inline px sizes, bold, bullets, links. The container's inline style sets the base size/line-height. */ .pg div.tx{font-size:14.5px;line-height:1.65} .pg .tx ul,.pg .tx ol{padding-left:24px;margin:8px 0} .pg .tx li{margin:4px 0} .pg .tx b,.pg .tx strong{font-weight:800} .pg .tx a{color:var(--peach);text-decoration:underline} .pg.t2 .tx a,.pg.t3 .tx a{color:var(--purple)} .pg .imgph{border-radius:12px;height:230px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.9);font-size:13px;font-weight:600;background-color:#42305a;background-size:cover;background-position:center} /* Full-size image (default "fit:full"): whole flyer at natural aspect ratio. */ .pg .evimg{display:block;width:100%;height:auto;border-radius:12px} .pg .vidph{border-radius:12px;aspect-ratio:16/9;background-color:#1a0f2e;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:inset 0 0 0 2000px rgba(26,15,46,.32)} /* Vertical (portrait) media block for phone videos / Instagram reels */ .pg .vidph[data-orient="v"]{aspect-ratio:9/16;max-width:min(440px,94vw);margin-left:auto;margin-right:auto} /* Inline uploaded-video first-frame: fills the .vidph box; the play overlay (.play) stays centered on top via the parent's flex centering + z-index. */ .pg .vidph .evvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:12px;background:#000} /* Poster image (e.g. a YouTube thumbnail) fills the band like a real thumbnail — 16:9 maxres with object-fit:cover, sitting under the play overlay. */ .pg .vidph .vidph-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:12px} .pg .vidph .play{position:relative;z-index:2;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--purple)} .play svg{width:30px;height:30px;margin-left:2px} .pg .vidph .play svg{width:30px;height:30px;margin-left:2px} .fs-hint{position:absolute;top:12px;right:12px;display:flex;align-items:center;gap:5px;background:rgba(45,27,67,.78);color:#fff;font-size:11px;font-weight:600;padding:5px 9px;border-radius:8px;opacity:0;transition:.15s} .fs-hint svg{width:13px;height:13px} .vidph:hover .fs-hint{opacity:1} .pg .vidph .vidtag{position:absolute;left:12px;bottom:12px;background:rgba(45,27,67,.82);color:#fff;font-size:12px;font-weight:600;padding:6px 11px;border-radius:8px} /* "Video added" affordance: when a video url is set the .vidph gets .has-video, forcing the dark box (even over a faint poster) and showing this label so a successful upload is ALWAYS visibly reflected — incl. .mov, which Chrome can't render inline. */ .pg .vidph.has-video{box-shadow:inset 0 0 0 2000px rgba(26,15,46,.55)} .pg .vidph.has-video .play{background:#fff} .pg .vidph .vidset{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:5px;background:rgba(68,44,92,.92);color:#fff;font-size:12px;font-weight:700;padding:6px 11px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.25)} .pg .speakers{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:16px} .pg .spk{text-align:center} .pg .spk .av{width:92px;height:92px;border-radius:50%;margin:0 auto 10px;background:linear-gradient(135deg,var(--peach),var(--peach-deep));background-size:cover;background-position:center;display:grid;place-items:center;color:var(--purple);font-weight:800;font-size:28px;box-shadow:0 4px 14px rgba(45,27,67,.2)} .pg .spk-avwrap{position:relative;width:92px;margin:0 auto 10px;display:inline-block;vertical-align:top} .pg .spk-avwrap .av{margin:0} .pg .spk .nm{font-size:13.5px;font-weight:700} .pg .spk .rl{font-size:11.5px;opacity:.7} /* International-guest credential chip: rectangular flag (natural shape) + label, sits below the role. Peach-tinted so it reads on every theme, light or dark. */ .pg .spk-intl{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:3px 9px 3px 4px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.03em;line-height:1;white-space:nowrap;background:rgba(255,189,152,.16);border:1px solid rgba(255,189,152,.5)} .pg .spk-intl img{width:20px;height:14px;border-radius:2.5px;object-fit:cover;display:block;box-shadow:0 1px 2px rgba(0,0,0,.28)} .pg .spk-intl span{opacity:.9} .pg .sponsors{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .pg .spon{height:46px;min-width:110px;border-radius:9px;background:rgba(120,90,150,.12);display:grid;place-items:center;font-size:12px;font-weight:700;opacity:.75;padding:0 14px} /* Sponsor with a logo: a roomier white chip so the artwork reads properly on dark themes; the logo itself is bigger with rounded corners. */ .pg .spon.spon-logo{height:auto;min-height:64px;padding:12px 18px;background:#fff;opacity:1;border-radius:14px} .pg .spon .sponlogo{max-height:52px;max-width:190px;object-fit:contain;display:block;border-radius:10px} /* Large option: the logo IS the chip, filling the frame edge to edge. */ .pg .spon.spon-logo.spon-lg{padding:0;overflow:hidden;min-height:0} .pg .spon.spon-lg .sponlogo{max-height:96px;max-width:280px;border-radius:14px} /* Logo colour: White renders the artwork as a white silhouette straight on the theme background (no white chip) — for dark wordmarks on dark themes. Dark forces a dark silhouette on the white chip. */ .pg .spon.spon-logo.tint-white{background:transparent;box-shadow:none} .pg .spon.tint-white .sponlogo{filter:brightness(0) invert(1)} .pg .spon.tint-dark .sponlogo{filter:brightness(0) opacity(.82)} .pg .mapph{height:200px;border-radius:12px;background: linear-gradient(0deg,rgba(68,44,92,.06),rgba(68,44,92,.06)), repeating-linear-gradient(0deg,#e8edf0,#e8edf0 22px,#dfe6ea 22px,#dfe6ea 24px), repeating-linear-gradient(90deg,#e8edf0,#e8edf0 22px,#dfe6ea 22px,#dfe6ea 24px); position:relative;border:1px solid var(--line)} .pg .mapph .mpin{position:absolute;left:50%;top:46%;transform:translate(-50%,-100%);font-size:30px;color:var(--peach-deep);filter:drop-shadow(0 3px 4px rgba(0,0,0,.3))} .pg .mapph .madr{position:absolute;left:12px;bottom:12px;background:#fff;border-radius:9px;padding:8px 11px;font-size:12px;font-weight:600;color:var(--grey);box-shadow:var(--shadow-sm)} /* Tidy geocoded map (Leaflet + OSM tiles). Built only from numeric lat/lng. Clean rounded card, subtle border, minimal chrome (small zoom + © OSM only). */ .pg .evmap-wrap{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line)} .pg .evmap{width:100%;height:240px;border:0;display:block;background:#e8edf0;z-index:0} .pg .evmap .leaflet-control-attribution{font-size:10px;background:rgba(255,255,255,.7)} .pg .evmap .leaflet-control-zoom{border:none;box-shadow:0 1px 4px rgba(0,0,0,.18)} .pg .evmap .leaflet-control-zoom a{width:26px;height:26px;line-height:26px} .pg .evmap-wrap .madr{position:absolute;left:12px;bottom:12px;background:#fff;border-radius:9px;padding:8px 11px;font-size:12px;font-weight:600;color:var(--grey);box-shadow:var(--shadow-sm);max-width:calc(100% - 24px);z-index:500} .pg .mapbtn{display:flex;width:fit-content;align-items:center;gap:8px;margin:14px auto 0;padding:11px 22px;border-radius:26px;font-size:13.5px;font-weight:700;text-decoration:none;background:var(--purple);color:#fff;box-shadow:0 6px 18px rgba(68,44,92,.35)} .pg .mapbtn:hover{background:var(--purple-deep)} .pg.t2 .mapbtn{background:var(--purple);color:#fff} .pg.t2 .mapbtn:hover{background:var(--purple-deep)} .pg .rsvpbtn{display:inline-block;padding:15px 34px;border-radius:30px;font-size:15px;font-weight:800;background:var(--peach);color:var(--purple);text-decoration:none} .pg .divider{height:1px;background:rgba(120,90,150,.18);margin:6px 40px} /* HCP-only audience: badge pinned top-left over the header + TGA disclaimer. .page is position:relative-able (it already clips with overflow:hidden). */ .page{position:relative} /* Black & white badge. Base stays position:absolute for the builder canvas (badge floats over the hero there); inside the disclaimer it's reset to in-flow so it can't overlap the text. */ .hcp-badge{position:absolute;top:14px;left:14px;z-index:20; background:#141414;color:#fff;border:1px solid rgba(255,255,255,.22); font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase; padding:7px 12px;border-radius:20px;box-shadow:0 3px 12px rgba(0,0,0,.35); display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .hcp-badge:before{content:'⚕';font-size:13px;line-height:1} .hcp-disclaimer{margin:0;padding:13px 18px;font-size:12.5px;line-height:1.5;font-weight:600; background:rgba(255,189,152,.16);color:var(--purple-deep,#2D1B43); border-bottom:1px solid var(--line,#e7e2ec); display:flex;align-items:center;gap:14px;flex-wrap:wrap} .hcp-disclaimer .hcp-badge{position:static;top:auto;left:auto;flex:0 0 auto} .hcp-disclaimer .hcp-disc-txt{flex:1 1 240px;min-width:0} .pg.t1 .hcp-disclaimer{background:rgba(255,189,152,.14);color:#fff} /* parking */ .pg .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px} .pg .gcell{position:relative;height:130px;border-radius:12px;background-size:cover;background-position:center;background-color:#42305a;overflow:hidden} .pg .gcell .glbl{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(45,27,67,.88),transparent);color:#fff;font-size:11px;font-weight:600;padding:16px 8px 7px;text-align:center} .pg .steps{display:block;margin:18px 0 0;padding:0;counter-reset:st;list-style:none} .pg .steps li{position:relative;padding:0 0 15px 42px;font-size:14px;line-height:1.5} .pg .steps li:before{counter-increment:st;content:counter(st);position:absolute;left:0;top:-3px;width:29px;height:29px;border-radius:50%;background:var(--peach);color:var(--purple);font-weight:800;font-size:13px;display:grid;place-items:center} .pg .parknote{margin-top:4px;background:rgba(255,189,152,.16);border-left:3px solid var(--peach-deep);border-radius:8px;padding:12px 14px;font-size:13px;font-weight:600} /* theme 1 — Bold Purple */ .pg.t1{background:linear-gradient(165deg,var(--haze1),var(--haze2));color:#fff} .pg.t1 .b-hero{color:var(--peach)} .pg.t1 .b-hero h1{color:#fff} .pg.t1 .kicker{color:var(--peach)} .pg.t1 h2.sh{color:var(--peach)} .pg.t1 .spk .rl,.pg.t1 p.tx{color:rgba(255,255,255,.88)} /* theme 2 — Light Elegant */ .pg.t2{background:var(--paper);color:var(--grey)} .pg.t2 .b-hero{background:var(--cream);color:var(--peach-deep)} .pg.t2 .b-hero h1{color:var(--purple-deep)} .pg.t2 .kicker{color:var(--peach-deep)} .pg.t2 h2.sh{color:var(--purple)} .pg.t2 .b-hero .when{color:var(--purple-soft)} .pg.t2 .rsvpbtn{background:var(--purple);color:#fff} .pg.t2 .spon{background:rgba(68,44,92,.07)} /* theme 3 — Image Hero */ .pg.t3{background:var(--paper);color:var(--grey)} .pg.t3 .b-hero{color:#fff;min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;background-size:cover;background-position:center; background-image:linear-gradient(0deg,rgba(45,27,67,.92),rgba(45,27,67,.25)),var(--hero,linear-gradient(135deg,#8a6aa6,#2d1b43))} .pg.t3 .b-hero h1{color:#fff} .pg.t3 .kicker{color:var(--peach)} .pg.t3 h2.sh{color:var(--purple)} .pg.t3 .rsvpbtn{background:var(--peach);color:var(--purple)} /* theme 4 — Onyx (black + peach) */ .pg.t4{background:#0c0c0e;color:#ECEAEF} .pg.t4 .b-hero{color:var(--peach);background:linear-gradient(165deg,#17151a,#08080a)} .pg.t4 .b-hero h1{color:#fff} .pg.t4 .kicker{color:var(--peach)} .pg.t4 h2.sh{color:var(--peach)} .pg.t4 .spk .rl,.pg.t4 p.tx{color:rgba(255,255,255,.82)} .pg.t4 .rsvpbtn{background:var(--peach);color:#17151a} .pg.t4 .divider{background:rgba(255,255,255,.10)} .pg.t4 .spon{background:rgba(255,255,255,.06)} .pg.t4 .hcp-disclaimer{background:rgba(255,189,152,.12);color:rgba(255,255,255,.9)} /* theme 5 — Noir Gold (black + champagne gold) */ .pg.t5{background:#0c0b0d;color:#ECE8E2} .pg.t5 .b-hero{color:var(--gold);background:linear-gradient(165deg,#171419,#070608)} .pg.t5 .b-hero h1{color:#fff} .pg.t5 .kicker{color:var(--gold)} .pg.t5 h2.sh{color:var(--gold)} .pg.t5 .spk .rl,.pg.t5 p.tx{color:rgba(255,255,255,.80)} .pg.t5 .rsvpbtn{background:linear-gradient(135deg,var(--gold-soft),var(--gold-deep));color:#1a1206} .pg.t5 .spk .av{background:linear-gradient(135deg,var(--gold-soft),var(--gold-deep));color:#1a1206} .pg.t5 .mapbtn{background:linear-gradient(135deg,var(--gold-soft),var(--gold-deep));color:#1a1206} .pg.t5 .steps li:before{background:linear-gradient(135deg,var(--gold-soft),var(--gold-deep));color:#1a1206} .pg.t5 .parknote{background:rgba(216,182,110,.12);border-left-color:var(--gold-deep)} .pg.t5 .divider{background:rgba(216,182,110,.22)} .pg.t5 .spon{background:rgba(216,182,110,.10)} .pg.t5 .hcp-disclaimer{background:rgba(216,182,110,.12);color:rgba(255,255,255,.9)} /* theme 6 — Midnight (indigo-black gradient + peach) */ .pg.t6{background:linear-gradient(165deg,#1b1430,#05040a);color:#EDE9F4} .pg.t6 .b-hero{color:var(--peach)} .pg.t6 .b-hero h1{color:#fff} .pg.t6 .kicker{color:var(--peach)} .pg.t6 h2.sh{color:var(--peach)} .pg.t6 .spk .rl,.pg.t6 p.tx{color:rgba(255,255,255,.84)} .pg.t6 .rsvpbtn{background:var(--peach);color:var(--purple)} .pg.t6 .divider{background:rgba(255,255,255,.12)} .pg.t6 .spon{background:rgba(255,255,255,.06)} .pg.t6 .hcp-disclaimer{background:rgba(255,189,152,.12);color:rgba(255,255,255,.9)} /* theme 7 — Hero (premium dark ground + glassy media frame; from the mockup) */ .pg.t7{background: radial-gradient(120% 80% at 78% -6%, rgba(255,189,152,.14), transparent 46%), radial-gradient(100% 66% at 12% 3%, rgba(122,74,134,.42), transparent 54%), linear-gradient(168deg,#3a2650 0%,#150c22 44%,#0d0812 100%);color:#EDE9F4} .pg.t7 .b-hero{color:var(--peach)} .pg.t7 .b-hero h1{color:#fff} .pg.t7 .kicker{color:var(--peach)} .pg.t7 h2.sh{color:var(--peach)} .pg.t7 .spk .rl,.pg.t7 p.tx{color:rgba(255,255,255,.84)} .pg.t7 .rsvpbtn{background:var(--peach);color:var(--purple)} .pg.t7 .divider{background:rgba(255,255,255,.12)} .pg.t7 .spon{background:rgba(255,255,255,.06)} .pg.t7 .hcp-disclaimer{background:rgba(255,189,152,.12);color:rgba(255,255,255,.9)} /* The "frame": image / video / map get a rounded, glassy panel + soft depth, and the video play button turns glassy (backdrop-blur) like the mockup. */ .pg.t7 .vidph,.pg.t7 .evimg,.pg.t7 .imgph{border-radius:24px;border:1px solid rgba(255,255,255,.12);box-shadow:0 34px 80px -34px rgba(0,0,0,.75)} .pg.t7 .vidph{background-color:#120b1e} .pg.t7 .vidph .play{background:rgba(255,255,255,.20);border:1px solid rgba(255,255,255,.4);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .pg.t7 .evmap-wrap,.pg.t7 .mapph{border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 34px 80px -34px rgba(0,0,0,.7)} /* theme 8 — Hero Light (bright premium ground + glassy frame; light twin of t7) */ .pg.t8{background: radial-gradient(120% 80% at 78% -6%, rgba(255,189,152,.30), transparent 46%), radial-gradient(110% 70% at 10% 2%, rgba(68,44,92,.06), transparent 55%), linear-gradient(168deg,#fbf7f4 0%,#f3eef5 58%,#efe9f2 100%);color:var(--grey)} .pg.t8 .b-hero{color:var(--peach-deep)} .pg.t8 .b-hero h1{color:var(--purple-deep)} .pg.t8 .kicker{color:var(--peach-deep)} .pg.t8 h2.sh{color:var(--purple)} .pg.t8 .b-hero .when{color:var(--purple-soft)} .pg.t8 .spk .rl{color:var(--muted)} .pg.t8 p.tx{color:#4a4550} .pg.t8 .tx a{color:var(--purple)} .pg.t8 .rsvpbtn{background:var(--purple);color:#fff} .pg.t8 .divider{background:rgba(68,44,92,.12)} .pg.t8 .spon{background:rgba(68,44,92,.05)} .pg.t8 .hcp-disclaimer{background:rgba(68,44,92,.06);color:var(--grey)} /* The "frame": rounded panel with a soft purple-tinted depth on the light ground. */ .pg.t8 .vidph,.pg.t8 .evimg,.pg.t8 .imgph{border-radius:24px;border:1px solid rgba(68,44,92,.10);box-shadow:0 30px 70px -34px rgba(68,44,92,.35)} .pg.t8 .evmap-wrap,.pg.t8 .mapph{border-radius:24px;overflow:hidden;border:1px solid rgba(68,44,92,.10);box-shadow:0 30px 70px -34px rgba(68,44,92,.30)} /* theme 9 — Space (deep-space nebula photo + glassy frame) */ .pg.t9{background: linear-gradient(180deg,rgba(10,4,18,.5),rgba(10,4,18,.82)), url('/images/hub-nebula-bg.png') center/cover no-repeat, #0E0618;color:#F3EDF9} .pg.t9 .b-hero{color:var(--peach)} .pg.t9 .b-hero h1{color:#fff} .pg.t9 .kicker{color:var(--peach)} .pg.t9 h2.sh{color:var(--peach)} .pg.t9 .spk .rl,.pg.t9 p.tx{color:rgba(255,255,255,.85)} .pg.t9 .rsvpbtn{background:var(--peach);color:var(--purple)} .pg.t9 .divider{background:rgba(255,255,255,.14)} .pg.t9 .spon{background:rgba(255,255,255,.06)} .pg.t9 .hcp-disclaimer{background:rgba(255,189,152,.12);color:rgba(255,255,255,.9)} .pg.t9 .vidph,.pg.t9 .evimg,.pg.t9 .imgph{border-radius:24px;border:1px solid rgba(255,255,255,.14);box-shadow:0 34px 80px -34px rgba(0,0,0,.85)} .pg.t9 .vidph{background-color:#0b0514} .pg.t9 .vidph .play{background:rgba(255,255,255,.20);border:1px solid rgba(255,255,255,.4);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .pg.t9 .evmap-wrap,.pg.t9 .mapph{border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 34px 80px -34px rgba(0,0,0,.8)} /* theme custom — a user-picked 5-colour palette. The colours arrive as inline CSS vars on .pg.custom (set by the builder canvas + the worker public page): --c-bg / --c-bg2 (background gradient), --c-accent (+ --c-accent-ink for the readable button text), --c-heading, --c-body, --c-card. */ .pg.custom{background:linear-gradient(165deg,var(--c-bg,#442C5C),var(--c-bg2,#2d1b40));color:var(--c-body,#EDE7F2)} .pg.custom .b-hero{color:var(--c-accent,#FFBD98)} .pg.custom .b-hero h1{color:var(--c-heading,#fff)} .pg.custom .kicker{color:var(--c-accent,#FFBD98)} .pg.custom .b-hero .when{color:var(--c-accent,#FFBD98)} .pg.custom h2.sh{color:var(--c-accent,#FFBD98)} .pg.custom .spk .rl,.pg.custom p.tx{color:var(--c-body,#EDE7F2)} .pg.custom .rsvpbtn{background:var(--c-accent,#FFBD98);color:var(--c-accent-ink,#2d1b43)} .pg.custom .spon{background:var(--c-card,rgba(255,255,255,.06))} .pg.custom .divider{background:rgba(128,128,128,.28)} /* RSVP form text sits on the dark page bg on dark themes → make it readable (white heading + labels). Light themes (t2/t3/t8) keep the branded purple. */ .pg:is(.t1,.t4,.t5,.t6,.t7,.t9) .rsvp-form h3, .pg:is(.t1,.t4,.t5,.t6,.t7,.t9) .rsvp-fld label, .pg:is(.t1,.t4,.t5,.t6,.t7,.t9) .rsvp-hcp-check{color:#fff} .pg:is(.t1,.t4,.t5,.t6,.t7,.t9) .rsvp-hcp-txt{color:rgba(255,255,255,.9)} .pg:is(.t1,.t4,.t5,.t6,.t7,.t9) .rsvp-sub, .pg:is(.t1,.t4,.t5,.t6,.t7,.t9) .rsvp-consent, .pg:is(.t1,.t4,.t5,.t6,.t7,.t9) .rsvp-fine{color:rgba(255,255,255,.74)} /* ============================================================================ Split "invitation" layout for the public /e/:slug page. Poster (cover) pinned on the left; the themed content column (.evx-content keeps `pg tN` so block + theme CSS still apply) scrolls on the right with an auto invitation header and the RSVP card. Stacks on mobile. ============================================================================ */ .evx{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;background:#0a0510} /* LEFT — header image (poster) shown FULL & uncropped on a solid dark panel. */ .evx-poster{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:44px;background:radial-gradient(720px 620px at 50% 32%,#1a1232,#0a0510 72%)} .evx-poster .evx-pimg{max-width:100%;max-height:calc(100vh - 84px);object-fit:contain;border-radius:14px;box-shadow:0 40px 90px rgba(0,0,0,.55)} .evx-poster .evx-plogo{position:absolute;top:24px;left:30px;z-index:2;color:#fff;font-weight:900;font-size:21px;letter-spacing:.04em;text-shadow:0 2px 10px rgba(0,0,0,.5)} /* branded fallback when no image */ .evx-poster.evx-nofill{background:radial-gradient(700px 520px at 30% 22%, #5a3f75, transparent 60%), linear-gradient(165deg,#3a2552,#0a0510);align-items:flex-end;justify-content:flex-start;padding:46px} .evx-poster .evx-pfallback{color:#fff} .evx-poster .evx-pfallback .ttl{font-size:30px;font-weight:900;line-height:1.06;max-width:92%} /* RIGHT — content column (keeps `pg tN` for block CSS), narrow. */ .evx-content{min-height:100vh} .evx-inner{max-width:476px;margin:0 auto;padding:60px 36px 50px} .evx-inner .sec{padding:22px 0} .evx-hero{padding:0 0 4px} .evx-eyebrow{font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:700;color:var(--peach);margin:0 0 13px} .evx-hero h1{font-size:clamp(26px,2.6vw,34px);font-weight:900;line-height:1.06;letter-spacing:-.01em;color:#fff;margin:0 0 16px} .evx-meta{display:flex;flex-direction:column;gap:8px;margin-bottom:4px} .evx-meta .m{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:#EDE9F4} .evx-meta .m svg{width:17px;height:17px;color:var(--peach);flex:0 0 auto} .evx-meta .m.muted{color:rgba(255,255,255,.62);font-weight:500} .evx-rule{height:1px;background:rgba(255,255,255,.10);margin:8px 0} .evx-rsvpcard{background:#fff;border-radius:20px;box-shadow:0 26px 60px rgba(0,0,0,.5);overflow:hidden;margin:22px 0 8px} .evx-foot{padding:40px 0 50px;text-align:center} .evx-foot .fl{font-weight:900;font-size:19px;color:#fff;letter-spacing:.04em} .evx-foot .ft{font-size:12px;color:rgba(255,255,255,.5);margin-top:5px;letter-spacing:.04em} /* Light themes: dark-on-light hero + footer text. */ .pg.t2 .evx-hero h1,.pg.t3 .evx-hero h1{color:var(--purple-deep)} .pg.t2 .evx-meta .m,.pg.t3 .evx-meta .m{color:var(--grey)} .pg.t2 .evx-meta .m.muted,.pg.t3 .evx-meta .m.muted{color:var(--muted)} .pg.t2 .evx-rule,.pg.t3 .evx-rule{background:rgba(45,27,67,.12)} .pg.t2 .evx-foot .fl,.pg.t3 .evx-foot .fl{color:var(--purple)} .pg.t2 .evx-foot .ft,.pg.t3 .evx-foot .ft{color:var(--muted)} .pg.t5 .evx-eyebrow,.pg.t5 .evx-meta .m svg{color:var(--gold)} @media(max-width:900px){ .evx{grid-template-columns:1fr} .evx-poster{position:relative;height:auto;padding:34px} .evx-poster .evx-pimg{max-height:74vh} .evx-inner{max-width:520px;padding:34px 22px 30px} .evx-hero{padding:6px 0 4px} } /* ============================================================================ Public page = single column themed page (WYSIWYG with the builder) + a themed RSVP form. Content is centred; the RSVP form adapts to the page theme. ============================================================================ */ .evpub{max-width:880px;margin:0 auto;padding:0 0 10px} .evrsvp{padding:10px 0 30px} .evpub-foot{text-align:center;padding:18px 0 48px} /* Real Alma logo (transparent PNG) via a mask so it takes the footer text colour per theme: white on dark themes, purple on the light ones (t2/t3). */ .evpub-foot .efl{display:block;width:104px;height:36px;margin:0 auto;font-size:0;color:#fff;background-color:currentColor;-webkit-mask:url('/images/alma-logo.png') center/contain no-repeat;mask:url('/images/alma-logo.png') center/contain no-repeat} .evpub-foot .eft{font-size:12px;color:rgba(255,255,255,.5);margin-top:4px} .pg.t2 .evpub-foot .efl,.pg.t3 .evpub-foot .efl{color:var(--purple)} .pg.t2 .evpub-foot .eft,.pg.t3 .evpub-foot .eft{color:var(--muted)} /* RSVP form card. Field defaults live in event-rsvp.js; here it's themed. */ .pg .rsvp-form{max-width:470px;margin:0 auto;border-radius:20px;padding:26px 26px 30px;box-shadow:0 18px 50px rgba(0,0,0,.32)} .pg.t2 .rsvp-form,.pg.t3 .rsvp-form{background:#fff;border:1px solid var(--line)} /* Dark themes (t1/t4/t5/t6): glass-dark card, light text. */ .pg.t1 .rsvp-form,.pg.t4 .rsvp-form,.pg.t5 .rsvp-form,.pg.t6 .rsvp-form{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);color:#EDE9F4;backdrop-filter:blur(8px)} .pg.t1 .rsvp-form h3,.pg.t4 .rsvp-form h3,.pg.t5 .rsvp-form h3,.pg.t6 .rsvp-form h3, .pg.t1 .rsvp-success h2,.pg.t4 .rsvp-success h2,.pg.t5 .rsvp-success h2,.pg.t6 .rsvp-success h2{color:#fff} .pg.t1 .rsvp-sub,.pg.t4 .rsvp-sub,.pg.t5 .rsvp-sub,.pg.t6 .rsvp-sub{color:rgba(255,255,255,.78)} .pg.t1 .rsvp-fld label,.pg.t4 .rsvp-fld label,.pg.t5 .rsvp-fld label,.pg.t6 .rsvp-fld label{color:#fff} /* Step indicator label → white on dark themes */ .pg.t1 .rsvp-prog span,.pg.t4 .rsvp-prog span,.pg.t5 .rsvp-prog span,.pg.t6 .rsvp-prog span{color:#fff} /* Buttons → purple with white text (t1/t4/t6); t5 keeps its gold accent */ .pg.t1 .rsvp-cta,.pg.t4 .rsvp-cta,.pg.t6 .rsvp-cta, .pg.t1 .rsvpbtn,.pg.t4 .rsvpbtn,.pg.t6 .rsvpbtn{background:linear-gradient(135deg,#6a4a86,#442c5c);color:#fff;box-shadow:0 10px 26px rgba(0,0,0,.4)} .pg.t1 .rsvp-cta:hover,.pg.t4 .rsvp-cta:hover,.pg.t6 .rsvp-cta:hover, .pg.t1 .rsvpbtn:hover,.pg.t4 .rsvpbtn:hover,.pg.t6 .rsvpbtn:hover{background:linear-gradient(135deg,#7a56a0,#503473);color:#fff} .pg.t1 .rsvp-fld input,.pg.t1 .rsvp-fld select,.pg.t4 .rsvp-fld input,.pg.t4 .rsvp-fld select,.pg.t5 .rsvp-fld input,.pg.t5 .rsvp-fld select,.pg.t6 .rsvp-fld input,.pg.t6 .rsvp-fld select{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff} .pg.t1 .rsvp-fld input::placeholder,.pg.t4 .rsvp-fld input::placeholder,.pg.t5 .rsvp-fld input::placeholder,.pg.t6 .rsvp-fld input::placeholder{color:rgba(255,255,255,.42)} .pg.t1 .rsvp-fld input:focus,.pg.t1 .rsvp-fld select:focus,.pg.t4 .rsvp-fld input:focus,.pg.t4 .rsvp-fld select:focus,.pg.t6 .rsvp-fld input:focus,.pg.t6 .rsvp-fld select:focus{border-color:var(--peach)} .pg.t1 .rsvp-fld select option,.pg.t4 .rsvp-fld select option,.pg.t5 .rsvp-fld select option,.pg.t6 .rsvp-fld select option{color:#1f1530} .pg.t1 .rsvp-prog i,.pg.t4 .rsvp-prog i,.pg.t5 .rsvp-prog i,.pg.t6 .rsvp-prog i{background:rgba(255,255,255,.14)} .pg.t1 .rsvp-prog i.on,.pg.t4 .rsvp-prog i.on,.pg.t6 .rsvp-prog i.on{background:var(--peach)} .pg.t1 .rsvp-back,.pg.t4 .rsvp-back,.pg.t5 .rsvp-back,.pg.t6 .rsvp-back{background:rgba(255,255,255,.1);color:#fff} .pg.t1 .rsvp-back:hover,.pg.t4 .rsvp-back:hover,.pg.t5 .rsvp-back:hover,.pg.t6 .rsvp-back:hover{background:rgba(255,255,255,.16)} .pg.t1 .rsvp-consent,.pg.t4 .rsvp-consent,.pg.t5 .rsvp-consent,.pg.t6 .rsvp-consent{color:rgba(255,255,255,.82)} .pg.t1 .rsvp-fine,.pg.t4 .rsvp-fine,.pg.t5 .rsvp-fine,.pg.t6 .rsvp-fine{color:rgba(255,255,255,.5)} .pg.t1 .rsvp-hcp-txt,.pg.t4 .rsvp-hcp-txt,.pg.t5 .rsvp-hcp-txt,.pg.t6 .rsvp-hcp-txt, .pg.t1 .rsvp-hcp-check,.pg.t4 .rsvp-hcp-check,.pg.t5 .rsvp-hcp-check,.pg.t6 .rsvp-hcp-check{color:#fff} .pg.t1 .rsvp-ac-list,.pg.t4 .rsvp-ac-list,.pg.t5 .rsvp-ac-list,.pg.t6 .rsvp-ac-list{background:#1a1228;border-color:rgba(255,255,255,.16)} .pg.t1 .rsvp-ac-list button,.pg.t4 .rsvp-ac-list button,.pg.t5 .rsvp-ac-list button,.pg.t6 .rsvp-ac-list button{color:#EDE9F4} .pg.t1 .rsvp-ac-list button:hover,.pg.t4 .rsvp-ac-list button:hover,.pg.t5 .rsvp-ac-list button:hover,.pg.t6 .rsvp-ac-list button:hover{background:rgba(255,255,255,.07)} /* Noir Gold accents */ .pg.t5 .rsvp-cta,.pg.t5 .rsvp-prog i.on{background:linear-gradient(135deg,var(--gold-soft),var(--gold-deep));color:#1a1206} .pg.t5 .rsvp-fld input:focus,.pg.t5 .rsvp-fld select:focus{border-color:var(--gold)} /* ===== Live countdown card (light) at the top of the public page ===== */ .evcd{background:#fff;border-radius:18px;max-width:470px;margin:34px auto 30px;padding:22px 22px 24px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.3);color:#42295a} .evcd-clk{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:#E89977;margin-bottom:14px} .evcd-clk svg{width:16px;height:16px} .evcd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:18px} .evcd .u{background:#f4f0ec;border:1px solid #e8e1da;border-radius:13px;padding:11px 2px} .evcd .u .n{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;color:#42295a;line-height:1} .evcd .u .l{font-size:10px;color:#9089a0;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-top:5px} .evcd .u.sec .n{animation:evcdpulse 1s infinite ease-in-out} @keyframes evcdpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.14);opacity:.7}} .evcd-started{display:none;font-size:17px;font-weight:800;color:#15a34a;padding:4px 0 16px} .evcd.ended .evcd-grid,.evcd.ended .evcd-clk{display:none} .evcd.ended .evcd-started{display:block} .evcd-btn{display:block;width:100%;border:none;border-radius:13px;padding:14px;font-family:inherit;font-weight:800;font-size:15px;color:#fff;text-decoration:none;background:linear-gradient(135deg,#6a4a86,#442c5c);box-shadow:0 10px 24px rgba(68,44,92,.4);cursor:pointer;transition:.15s} .evcd-btn:hover{background:linear-gradient(135deg,#7a56a0,#503473)} @media(prefers-reduced-motion:reduce){.evcd .u.sec .n{animation:none}} /* ── Ticket price block (builder 'price') ───────────────────────────────── Neutral greys so the card reads on both dark and light themes; the peach step dots carry the brand. Amount inherits the page's text colour. */ .pg .prc-card{max-width:420px;margin:0 auto;text-align:center;padding:22px 24px 20px;border-radius:18px;background:rgba(128,118,140,.12);border:1.5px solid rgba(128,118,140,.28)} .pg .prc-kick{font-size:10px;letter-spacing:2.2px;text-transform:uppercase;font-weight:800;color:var(--peach,#FFBD98);margin-bottom:8px} .pg .prc-amt{font-size:38px;font-weight:800;line-height:1} .pg .prc-per{font-size:13px;font-weight:600;opacity:.72} .pg .prc-sub{font-size:12px;opacity:.75;margin-top:9px} .pg .prc-steps{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;font-size:12px;font-weight:700;flex-wrap:wrap} .pg .prc-steps b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--peach,#FFBD98);color:var(--purple,#442C5C);font-size:11px;margin-right:6px} .pg .prc-arrow{opacity:.55}