/* =============================================================================
Gisele's Princess Closet — Magic layer
=============================================================================
Additive only. Loaded AFTER motion.css. Adds the sparkle, shimmer, ornament,
and celebration moments that make the site feel like a princess closet
instead of a form. Everything here respects prefers-reduced-motion.
What this file adds:
1. Page-level pixie-dust drift (body::before, opt-in via .has-magic)
2. Gold-thread + scalloped section dividers
3. Crown / sparkle / star inline ornaments (.ornament-*)
4. Twirl-on-hover utility (.twirl, .twirl-soft)
5. Sparkle-burst utility (.sparkle-burst, triggered on click via JS)
6. Confetti pieces (.confetti-piece, fired by magic.js)
7. Storybook background gradient (.bg-storybook, .bg-twilight)
8. Princess-pink section headings with paired sparkle glyph
9. Tile shimmer pulse (.tile-shimmer)
10. Enhanced .btn-magic with sparkle hover overlay
11. Hero-media "frame" — gold filigree ribbon
12. Reveal-from-fold (data-reveal="bloom") for grand entrances
============================================================================= */
/* ── Magic tokens ─────────────────────────────────────────────────────────── */
:root {
--magic-rose-light: #FCE4EA;
--magic-rose-pop: #F39FB1;
--magic-blush-cloud: #FFF1F5;
--magic-cream: #FFF8E6;
--magic-violet: #C8B6E2;
--magic-violet-deep: #8E6FC9;
--magic-mint: #C7E9D2;
--magic-gold-bright: #E8C977;
--magic-gold-glow: rgba(212, 168, 87, 0.45);
--magic-pink-glow: rgba(243, 159, 177, 0.45);
--magic-royal-glow: rgba(46, 79, 167, 0.30);
--magic-sparkle-1: radial-gradient(circle at 30% 30%, #fff 0 1.5px, transparent 2.5px);
--magic-sparkle-2: radial-gradient(circle at 70% 60%, var(--magic-gold-bright) 0 1.2px, transparent 2px);
}
/* ── 1. Page-level pixie dust drift ───────────────────────────────────────── */
/* Opt in by adding class="has-magic" to . Two layered SVG dust planes
that drift very slowly across the viewport. Pointer-events:none so they
never block clicks. */
body.has-magic { position: relative; }
body.has-magic::before,
body.has-magic::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background-repeat: repeat;
background-size: 360px 360px;
opacity: 0.55;
}
body.has-magic::before {
background-image:
radial-gradient(circle at 12% 18%, rgba(255,255,255,0.95) 0 1.2px, transparent 1.8px),
radial-gradient(circle at 73% 41%, rgba(232,201,119,0.85) 0 1.4px, transparent 2.2px),
radial-gradient(circle at 41% 82%, rgba(243,159,177,0.85) 0 1.0px, transparent 1.6px),
radial-gradient(circle at 88% 12%, rgba(232,201,119,0.65) 0 0.9px, transparent 1.4px);
animation: gpc-dust-drift 38s linear infinite;
}
body.has-magic::after {
background-image:
radial-gradient(circle at 22% 60%, rgba(255,255,255,0.7) 0 0.9px, transparent 1.4px),
radial-gradient(circle at 60% 22%, rgba(232,201,119,0.5) 0 1.1px, transparent 1.7px),
radial-gradient(circle at 8% 88%, rgba(243,159,177,0.55) 0 0.9px, transparent 1.4px);
background-size: 540px 540px;
animation: gpc-dust-drift-slow 64s linear infinite reverse;
opacity: 0.35;
}
body.has-magic > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
body.has-magic::before,
body.has-magic::after { animation: none; opacity: 0.25; }
}
@keyframes gpc-dust-drift {
from { background-position: 0 0, 0 0, 0 0, 0 0; }
to { background-position: 360px -240px, -300px 200px, 220px 320px, -180px -160px; }
}
@keyframes gpc-dust-drift-slow {
from { background-position: 0 0, 0 0, 0 0; }
to { background-position: -540px 360px, 420px -280px, 200px 540px; }
}
/* ── 2. Section dividers — gold filigree thread + scallop ─────────────────── */
.divider-gold {
position: relative;
height: 28px;
margin-block: clamp(8px, 2vw, 24px);
background:
radial-gradient(circle at 50% 50%, var(--gpc-gold) 0 2.5px, transparent 3.5px) center / 26px 26px repeat-x,
linear-gradient(90deg, transparent 0, var(--gpc-gold) 18%, var(--magic-gold-bright) 50%, var(--gpc-gold) 82%, transparent 100%) center / 100% 1px no-repeat;
opacity: 0.85;
}
.divider-gold::before,
.divider-gold::after {
content: "✦";
position: absolute;
top: 50%;
transform: translateY(-50%);
color: var(--gpc-gold);
background: var(--c-bg, var(--gpc-paper));
padding: 0 12px;
font-size: 1.1rem;
line-height: 1;
}
.divider-gold::before { left: 50%; transform: translate(-50%, -50%); }
.divider-gold::after { display: none; }
.divider-scallop {
height: 22px;
background:
radial-gradient(circle at 50% 0, var(--gpc-paper) 12px, transparent 13px) repeat-x;
background-size: 30px 22px;
margin-top: -22px;
position: relative;
z-index: 2;
}
.divider-scallop--rose { background-image: radial-gradient(circle at 50% 0, var(--gpc-blush) 12px, transparent 13px); }
.divider-scallop--fog { background-image: radial-gradient(circle at 50% 0, var(--gpc-fog) 12px, transparent 13px); }
/* ── 3. Ornaments (inline SVG-as-bg) ──────────────────────────────────────── */
.ornament-crown,
.ornament-sparkle,
.ornament-heart,
.ornament-ribbon {
display: inline-block;
width: 1.2em; height: 1.2em;
vertical-align: -0.25em;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin: 0 0.25em;
}
.ornament-crown {
background-image: url("data:image/svg+xml;utf8,");
}
.ornament-sparkle {
background-image: url("data:image/svg+xml;utf8,");
}
.ornament-heart {
background-image: url("data:image/svg+xml;utf8,");
}
.ornament-ribbon {
background-image: url("data:image/svg+xml;utf8,");
}
.ornament-sparkle--gold { filter: none; }
.ornament-sparkle--pink { background-image: url("data:image/svg+xml;utf8,"); }
.ornament-sparkle--violet { background-image: url("data:image/svg+xml;utf8,"); }
/* Twinkle: gentle scale + opacity on idle */
.ornament-sparkle,
.ornament-sparkle--pink,
.ornament-sparkle--gold,
.ornament-sparkle--violet {
animation: gpc-twinkle 3.8s ease-in-out infinite;
}
.ornament-sparkle:nth-of-type(2n) { animation-delay: 1.1s; }
.ornament-sparkle:nth-of-type(3n) { animation-delay: 0.5s; animation-duration: 4.6s; }
@keyframes gpc-twinkle {
0%, 100% { transform: scale(1) rotate(0); opacity: 0.85; }
50% { transform: scale(1.18) rotate(8deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.ornament-sparkle,
.ornament-sparkle--pink,
.ornament-sparkle--gold,
.ornament-sparkle--violet { animation: none; }
}
/* ── 4. Twirl-on-hover ────────────────────────────────────────────────────── */
.twirl,
.twirl-soft {
transform-origin: center bottom;
transition: transform 600ms var(--gpc-ease-out);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.twirl:hover { transform: rotate(-6deg) scale(1.04); }
.twirl-soft:hover { transform: rotate(-2.5deg) scale(1.02); }
.twirl:hover img,
.twirl-soft:hover img { transform: scale(1.06); }
}
/* ── 5. Sparkle burst on click (utility — JS sets data-burst) ─────────────── */
/* JS toggles .is-bursting on the element. We use a layered pseudo to spawn
a quick set of pink+gold dots that fade out. */
.sparkle-burst { position: relative; }
.sparkle-burst::before,
.sparkle-burst::after {
content: "";
position: absolute;
inset: -8px;
pointer-events: none;
background:
radial-gradient(circle at 20% 28%, var(--magic-gold-bright) 0 2px, transparent 3px),
radial-gradient(circle at 78% 38%, var(--magic-rose-pop) 0 2px, transparent 3px),
radial-gradient(circle at 30% 78%, var(--gpc-royal) 0 1.6px, transparent 2.4px),
radial-gradient(circle at 84% 78%, var(--magic-violet-deep) 0 1.8px, transparent 2.6px),
radial-gradient(circle at 50% 50%, var(--magic-gold-bright) 0 1.4px, transparent 2px);
opacity: 0;
transform: scale(0.4);
}
.sparkle-burst.is-bursting::before {
animation: gpc-burst 720ms var(--gpc-ease-out) forwards;
}
.sparkle-burst.is-bursting::after {
animation: gpc-burst 720ms var(--gpc-ease-out) 140ms forwards;
}
@keyframes gpc-burst {
0% { opacity: 0; transform: scale(0.4); }
35% { opacity: 1; transform: scale(1.18); }
100% { opacity: 0; transform: scale(1.5); }
}
@media (prefers-reduced-motion: reduce) {
.sparkle-burst::before,
.sparkle-burst::after { display: none; }
}
/* ── 6. Confetti pieces (JS-spawned) ──────────────────────────────────────── */
.confetti-host {
position: fixed;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 9999;
}
.confetti-piece {
position: absolute;
top: -20px;
width: 10px; height: 14px;
background: var(--magic-rose-pop);
border-radius: 2px;
opacity: 0;
transform: translateY(0) rotate(0);
animation: gpc-confetti-fall 2400ms var(--gpc-ease-standard) forwards;
}
.confetti-piece.is-gold { background: var(--magic-gold-bright); }
.confetti-piece.is-violet { background: var(--magic-violet-deep); }
.confetti-piece.is-royal { background: var(--gpc-royal); }
.confetti-piece.is-mint { background: var(--magic-mint); }
.confetti-piece.is-star {
background: transparent;
width: 14px; height: 14px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
border-radius: 0;
}
@keyframes gpc-confetti-fall {
0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); }
10% { opacity: 1; }
100% { opacity: 0; transform: translate3d(var(--cx, 40px), 105vh, 0) rotate(var(--cr, 420deg)); }
}
@media (prefers-reduced-motion: reduce) {
.confetti-host { display: none; }
}
/* ── 7. Storybook + twilight backgrounds ──────────────────────────────────── */
.bg-storybook {
background:
radial-gradient(ellipse at 20% 0%, rgba(252, 228, 234, 0.95) 0%, transparent 55%),
radial-gradient(ellipse at 92% 18%, rgba(232, 201, 119, 0.55) 0%, transparent 50%),
radial-gradient(ellipse at 50% 100%, rgba(200, 182, 226, 0.45) 0%, transparent 55%),
linear-gradient(180deg, var(--gpc-blush) 0%, var(--gpc-paper) 60%, var(--magic-blush-cloud) 100%);
}
.bg-twilight {
background:
radial-gradient(ellipse at 18% 12%, rgba(255,255,255,0.8) 0%, transparent 45%),
radial-gradient(ellipse at 80% 84%, rgba(232, 201, 119, 0.45) 0%, transparent 50%),
linear-gradient(165deg, #1b2d68 0%, #2E4FA7 35%, #4467C0 70%, #6F8FE0 100%);
color: #fff;
}
.bg-twilight h1, .bg-twilight h2, .bg-twilight h3 { color: #fff; }
.bg-twilight .voice-parent { color: rgba(255,255,255,0.86); }
/* ── 8. Sparkle-paired section headings ───────────────────────────────────── */
.section-heading--magic,
.heading--magic {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.5em;
}
.section-heading--magic::before,
.section-heading--magic::after,
.heading--magic::before,
.heading--magic::after {
content: "✦";
color: var(--gpc-gold);
font-size: 0.6em;
opacity: 0.9;
animation: gpc-twinkle 3.8s ease-in-out infinite;
}
.section-heading--magic::after { animation-delay: 1.4s; }
@media (prefers-reduced-motion: reduce) {
.section-heading--magic::before,
.section-heading--magic::after,
.heading--magic::before,
.heading--magic::after { animation: none; }
}
/* ── 9. Tile shimmer (gold sheen passes across) ───────────────────────────── */
.tile-shimmer { position: relative; overflow: hidden; }
.tile-shimmer::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(115deg,
transparent 35%,
rgba(255, 255, 255, 0.65) 50%,
rgba(232, 201, 119, 0.4) 56%,
transparent 72%);
transform: translateX(-130%);
pointer-events: none;
transition: transform 1200ms var(--gpc-ease-out);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.tile-shimmer:hover::before,
.tile-shimmer:focus-within::before { transform: translateX(130%); }
}
/* ── 10. .btn-magic enhanced — sparkle hover overlay ──────────────────────── */
.btn-magic {
position: relative;
isolation: isolate;
font-family: var(--gpc-font-head);
letter-spacing: 0.01em;
box-shadow:
0 8px 22px var(--magic-royal-glow),
0 2px 6px rgba(28,28,31,0.08),
inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-magic::before {
content: "✦";
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%) scale(0.7);
color: var(--magic-gold-bright);
opacity: 0;
transition: opacity var(--gpc-dur-normal), transform var(--gpc-dur-normal);
pointer-events: none;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.btn-magic:hover::before { opacity: 1; transform: translateY(-50%) scale(1); }
.btn-magic:hover { box-shadow:
0 12px 28px var(--magic-royal-glow),
0 4px 10px var(--magic-gold-glow),
inset 0 1px 0 rgba(255,255,255,0.3); }
}
/* ── 11. Hero media gold frame ───────────────────────────────────────────── */
.hero-frame {
position: relative;
}
.hero-frame::before {
content: "";
position: absolute;
inset: -10px;
border-radius: calc(var(--r-lg) + 8px);
background:
linear-gradient(135deg, var(--gpc-gold) 0%, var(--magic-gold-bright) 35%, var(--gpc-rose) 65%, var(--gpc-gold) 100%);
z-index: -1;
filter: blur(0.5px);
opacity: 0.85;
}
.hero-frame::after {
content: "";
position: absolute;
inset: -4px;
border-radius: calc(var(--r-lg) + 2px);
background: var(--gpc-paper);
z-index: -1;
}
/* ── 12. Reveal-bloom (grand entrance) ────────────────────────────────────── */
[data-reveal="bloom"] {
opacity: 0;
transform: translateY(36px) scale(0.94);
filter: blur(6px);
transition:
opacity 900ms var(--gpc-ease-out),
transform 900ms var(--gpc-ease-out),
filter 900ms var(--gpc-ease-out);
}
[data-reveal="bloom"].is-in {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
/* ── 13. Story chip — small contextual pill with sparkle ──────────────────── */
.story-chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, var(--gpc-blush) 0%, var(--gpc-paper) 100%);
border: 1px solid var(--gpc-gold-soft);
color: var(--gpc-royal);
padding: 6px 12px;
border-radius: var(--r-pill);
font-family: var(--gpc-font-head);
font-size: 0.9rem;
letter-spacing: 0.02em;
box-shadow: 0 1px 2px rgba(212,168,87,0.18);
}
.story-chip::before {
content: "✦";
color: var(--gpc-gold);
font-size: 0.85em;
}
/* ── 14. Party packages cards ─────────────────────────────────────────────── */
.parties-strip {
background:
radial-gradient(ellipse at 0% 50%, rgba(252, 228, 234, 0.85) 0%, transparent 55%),
radial-gradient(ellipse at 100% 50%, rgba(200, 182, 226, 0.55) 0%, transparent 55%),
var(--gpc-paper);
padding-block: clamp(48px, 8vw, 96px);
}
.parties-strip > * { max-width: var(--gpc-container-max); margin-inline: auto; padding-inline: var(--gpc-container-pad); }
.parties-grid {
display: grid;
gap: clamp(20px, 2.5vw, 28px);
grid-template-columns: 1fr;
margin-top: clamp(28px, 4vw, 44px);
padding: 0;
list-style: none;
}
@media (min-width: 700px) {
.parties-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
.parties-grid { grid-template-columns: repeat(4, 1fr); }
}
.party-card {
position: relative;
display: flex; flex-direction: column;
background: var(--gpc-paper);
border: 1px solid var(--gpc-line);
border-radius: var(--r-lg);
padding: 0 0 var(--gpc-space-5) 0;
overflow: hidden;
box-shadow: var(--gpc-shadow-sm);
transition:
transform var(--gpc-dur-normal) var(--gpc-ease-out),
box-shadow var(--gpc-dur-normal) var(--gpc-ease-out),
border-color var(--gpc-dur-normal) var(--gpc-ease-out);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.party-card:hover {
transform: translateY(-6px);
box-shadow: var(--gpc-shadow-hover);
border-color: var(--gpc-gold-soft);
}
}
.party-card figure {
margin: 0;
aspect-ratio: 4/5;
overflow: hidden;
background: var(--gpc-blush);
}
.party-card figure img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 700ms var(--gpc-ease-out);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.party-card:hover figure img { transform: scale(1.06); }
}
.party-card-body { padding: var(--gpc-space-5) var(--gpc-space-5) 0; }
.party-card-eyebrow {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--gpc-font-head);
color: var(--gpc-royal);
font-size: 0.9rem;
letter-spacing: 0.04em;
text-transform: uppercase;
margin: 0 0 8px;
}
.party-card-eyebrow::before { content: "✦"; color: var(--gpc-gold); }
.party-card h3 {
font-family: var(--gpc-font-head);
font-size: clamp(1.35rem, 2.2vw, 1.65rem);
line-height: 1.15;
margin: 0 0 var(--gpc-space-2);
color: var(--gpc-ink);
}
.party-card-price {
font-family: var(--gpc-font-head);
color: var(--gpc-royal);
font-weight: 700;
margin: var(--gpc-space-2) 0 var(--gpc-space-3);
display: flex; align-items: baseline; gap: 8px;
}
.party-card-price strong { font-size: 1.6rem; line-height: 1; }
.party-card-price small { color: var(--gpc-ink-soft); font-weight: 500; font-family: var(--gpc-font-body); font-size: 0.85rem; }
.party-card ul {
list-style: none;
padding: 0; margin: 0 0 var(--gpc-space-4);
display: grid; gap: 6px;
}
.party-card ul li {
color: var(--gpc-ink-soft);
font-size: 0.95rem;
padding-left: 22px;
position: relative;
}
.party-card ul li::before {
content: "♡";
position: absolute; left: 0;
color: var(--magic-rose-pop);
font-size: 1em;
top: 0;
}
.party-card-cta {
display: inline-flex; align-items: center; gap: 6px;
margin: 0 var(--gpc-space-5);
padding: 12px 20px;
background: var(--gpc-royal);
color: #fff;
border-radius: var(--r-pill);
text-decoration: none;
font-family: var(--gpc-font-head);
font-weight: 600;
letter-spacing: 0.02em;
align-self: flex-start;
min-height: var(--gpc-tap-min);
transition: background var(--gpc-dur-fast), box-shadow var(--gpc-dur-fast), transform var(--gpc-dur-fast);
}
.party-card-cta:hover {
background: var(--gpc-royal-soft);
box-shadow: 0 8px 20px var(--magic-royal-glow);
transform: translateY(-1px);
}
.party-card-flag {
position: absolute;
top: 14px; right: 14px;
background: var(--gpc-gold);
color: #fff;
font-family: var(--gpc-font-head);
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: var(--r-pill);
box-shadow: 0 2px 6px rgba(212, 168, 87, 0.4);
}
/* ── 15. Hero "magic ribbon" eyebrow ──────────────────────────────────────── */
.hero-ribbon {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(90deg, var(--gpc-gold) 0%, var(--magic-gold-bright) 100%);
color: #fff;
font-family: var(--gpc-font-head);
font-size: 0.95rem;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: var(--r-pill);
box-shadow: 0 4px 12px var(--magic-gold-glow);
margin-bottom: var(--gpc-space-4);
}
.hero-ribbon::before { content: "✦"; }
.hero-ribbon::after { content: "✦"; }
/* ── 16. Storybook curtain (page-load curtain reveal) ─────────────────────── */
/* Used on book/step-1 entry — two satin curtains slide open on load. */
.storybook-curtain {
position: fixed;
top: 0; bottom: 0;
width: 50vw;
z-index: 9998;
pointer-events: none;
background: linear-gradient(135deg, var(--gpc-rose) 0%, var(--magic-rose-pop) 100%);
box-shadow: 0 0 60px rgba(46, 79, 167, 0.25);
}
.storybook-curtain.left { left: 0; transform-origin: left; animation: gpc-curtain-left 1100ms var(--gpc-ease-out) 200ms forwards; }
.storybook-curtain.right { right: 0; transform-origin: right; animation: gpc-curtain-right 1100ms var(--gpc-ease-out) 200ms forwards; }
.storybook-curtain::after {
content: "";
position: absolute;
inset: 0;
background:
repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 12px, transparent 12px 24px),
linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 30%);
}
@keyframes gpc-curtain-left { to { transform: translateX(-100%); } }
@keyframes gpc-curtain-right { to { transform: translateX( 100%); } }
@media (prefers-reduced-motion: reduce) {
.storybook-curtain { display: none; }
}
/* ── 17. Step-by-step crowns (booking progress decoration) ────────────────── */
.booking-progress-dots > li.is-current::after,
.booking-progress-dots > li.is-current::marker {
/* keep accessible; visual hook for crown set by booking JS via classes */
}
.crowned-progress-dot {
position: relative;
}
.crowned-progress-dot.is-current::before {
content: "♕";
position: absolute;
top: -16px; left: 50%;
transform: translateX(-50%);
font-size: 0.95rem;
color: var(--gpc-gold);
animation: gpc-twinkle 3s ease-in-out infinite;
}
/* ── 18. Vanity utility: "first letter swash" for storybook copy ──────────── */
.swash::first-letter {
font-family: var(--gpc-font-display);
font-size: 2.2em;
font-weight: 700;
float: left;
line-height: 0.85;
padding: 4px 8px 0 0;
color: var(--gpc-royal);
}
/* ── 19. Soft hover-lift CTA with crown tip ───────────────────────────────── */
.btn-crown {
background: linear-gradient(135deg, var(--gpc-royal) 0%, var(--magic-violet-deep) 100%);
color: #fff;
border-radius: var(--r-pill);
padding: 14px 24px;
font-family: var(--gpc-font-head);
letter-spacing: 0.02em;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
box-shadow: 0 6px 20px var(--magic-royal-glow);
transition: transform var(--gpc-dur-fast), box-shadow var(--gpc-dur-fast), background var(--gpc-dur-fast);
}
.btn-crown::before { content: "♕"; color: var(--magic-gold-bright); }
.btn-crown:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px var(--magic-royal-glow), 0 4px 10px var(--magic-gold-glow);
}
/* ── 20. Parties hero — softer magenta-gold storybook ─────────────────────── */
.parties-hero {
background:
radial-gradient(ellipse at 18% 0%, rgba(243, 159, 177, 0.6) 0%, transparent 55%),
radial-gradient(ellipse at 100% 100%, rgba(232, 201, 119, 0.55) 0%, transparent 55%),
linear-gradient(180deg, var(--magic-blush-cloud) 0%, var(--gpc-paper) 100%);
padding-block: clamp(48px, 9vw, 110px);
}
/* ── Booking form visibility belt-and-braces ─────────────────────────────────
app.css makes .booking-step-content opacity:0 by default, expecting
booking.js's revealStepContent() to add .is-in via a double-RAF dance.
In production we saw cases where the RAF didn't complete on time and the
form stayed invisible. Force visibility — the form is the critical path,
we don't need the fade-in. */
.booking-step-content {
opacity: 1 !important;
transform: none !important;
}
/* ── Sticky sidebar on long grids (step-2 + others) ──────────────────────────
app.css already gives .booking-summary `position: sticky; top: 96px` at
>=960px. The original rule works fine for short content. When the cart
stack gets tall (Princess Box pre-loaded with 6 dresses + size pickers +
remove buttons), the sidebar can grow taller than the viewport so the
browser ignores sticky-stick.
Cap the sidebar's height at the available viewport real estate below
the header + progress + a touch of breathing room, and let it scroll
on overflow inside its own scroll context. */
@media (min-width: 960px) {
.booking-summary {
max-height: calc(100vh - 120px);
overflow-y: auto;
overscroll-behavior: contain;
}
/* Subtle scrollbar inside the sidebar — match the page's polished look */
.booking-summary::-webkit-scrollbar { width: 8px; }
.booking-summary::-webkit-scrollbar-track { background: transparent; }
.booking-summary::-webkit-scrollbar-thumb {
background: var(--gpc-line);
border-radius: var(--r-pill);
}
.booking-summary::-webkit-scrollbar-thumb:hover { background: var(--gpc-gold-soft); }
}
/* ── Booking summary rows (step-3 itemized sidebar) ──────────────────────── */
.booking-summary-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
border-bottom: 1px solid var(--gpc-line);
font-size: 0.92rem;
color: var(--gpc-ink);
list-style: none;
}
.booking-summary-row:last-child { border-bottom: 0; }
.booking-summary-row--head {
margin-top: 8px;
font-family: var(--gpc-font-head);
color: var(--gpc-royal);
font-size: 0.85rem;
letter-spacing: 0.04em;
text-transform: uppercase;
border-bottom: 1px solid var(--gpc-gold-soft);
}
.booking-summary-thumb {
width: 32px; height: 32px;
border-radius: 6px;
object-fit: cover;
flex-shrink: 0;
border: 1px solid var(--gpc-line);
}
.booking-summary-row-name {
flex: 1;
line-height: 1.2;
}
.booking-summary-row-name small { color: var(--gpc-ink-mute); font-size: 0.85em; }
.booking-summary-row-name em { color: var(--gpc-royal); font-style: normal; font-size: 0.82em; }
.booking-summary-row-price {
color: var(--gpc-ink-soft);
font-variant-numeric: tabular-nums;
font-size: 0.88rem;
}
.booking-summary-empty {
color: var(--gpc-ink-mute);
font-style: italic;
padding: 6px 0;
list-style: none;
}
/* ── Step-2 catalog grid layout ──────────────────────────────────────────── */
.book-catalog-grid {
display: grid;
gap: clamp(14px, 2vw, 22px);
grid-template-columns: 1fr;
margin-top: clamp(20px, 3vw, 28px);
padding: 0;
list-style: none;
}
@media (min-width: 520px) {
.book-catalog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 820px) {
.book-catalog-grid { grid-template-columns: repeat(3, 1fr); }
}
.book-catalog-card {
display: flex;
flex-direction: column;
background: var(--gpc-paper);
border: 1px solid var(--gpc-line);
border-radius: var(--r-lg);
padding: var(--gpc-space-4);
box-shadow: var(--gpc-shadow-sm);
transition: transform var(--gpc-dur-normal) var(--gpc-ease-out),
box-shadow var(--gpc-dur-normal) var(--gpc-ease-out),
border-color var(--gpc-dur-normal) var(--gpc-ease-out);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.book-catalog-card:hover {
transform: translateY(-4px);
box-shadow: var(--gpc-shadow-hover);
border-color: var(--gpc-gold-soft);
}
}
.book-catalog-card figure {
position: relative;
margin: 0 0 var(--gpc-space-3) 0;
aspect-ratio: 4/5;
overflow: hidden;
border-radius: var(--r-md);
background: var(--gpc-blush);
}
.book-catalog-card figure img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 600ms var(--gpc-ease-out);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.book-catalog-card:hover figure img { transform: scale(1.04); }
}
.book-catalog-card h3 {
font-family: var(--gpc-font-head);
font-size: 1.05rem;
line-height: 1.2;
margin: 0 0 4px;
}
.book-catalog-card .voice-parent {
color: var(--gpc-ink-soft);
font-size: 0.88rem;
margin: 0 0 var(--gpc-space-3);
text-transform: capitalize;
}
.book-catalog-size {
display: flex; align-items: center;
gap: 8px;
margin-bottom: var(--gpc-space-3);
font-size: 0.88rem;
color: var(--gpc-ink-soft);
}
.book-catalog-size select {
flex: 1;
padding: 6px 8px;
border-radius: var(--r-sm);
border: 1px solid var(--gpc-line);
background: var(--gpc-paper);
font-family: inherit;
font-size: 0.95rem;
}
.book-catalog-card .btn {
margin-top: auto;
width: 100%;
min-height: var(--gpc-tap-min);
padding: 10px 14px;
font-size: 0.95rem;
border-radius: var(--r-pill);
text-align: center;
cursor: pointer;
}
.book-catalog-loading, .book-catalog-empty {
grid-column: 1 / -1;
text-align: center;
color: var(--gpc-ink-mute);
padding: var(--gpc-space-6);
}
.book-catalog-filters {
display: grid;
gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
margin-top: var(--gpc-space-4);
}
.book-catalog-filter {
display: flex; flex-direction: column;
gap: 4px;
font-size: 0.85rem;
color: var(--gpc-ink-soft);
}
.book-catalog-filter select {
padding: 8px 10px;
border-radius: var(--r-sm);
border: 1px solid var(--gpc-line);
background: var(--gpc-paper);
font-family: inherit;
font-size: 0.95rem;
}
/* ── Pre-loaded badge on step-2 catalog cards ────────────────────────────── */
.book-catalog-card.is-preloaded {
border: 1px solid var(--gpc-gold-soft);
box-shadow: 0 2px 10px rgba(212, 168, 87, 0.18), 0 1px 2px rgba(28,28,31,0.04);
background: linear-gradient(180deg, rgba(252, 228, 234, 0.35) 0%, var(--gpc-paper) 60%);
}
.book-catalog-card .preloaded-badge {
position: absolute;
top: 10px; left: 10px;
background: linear-gradient(135deg, var(--gpc-gold) 0%, var(--magic-gold-bright) 100%);
color: #fff;
font-family: var(--gpc-font-head);
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 4px 9px;
border-radius: var(--r-pill);
box-shadow: 0 2px 6px rgba(212, 168, 87, 0.42);
z-index: 2;
}
.book-catalog-card figure { position: relative; }
/* ── Package banner dress thumbnails ─────────────────────────────────────── */
.pkg-thumbs-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: var(--gpc-space-3);
}
.pkg-thumb {
display: inline-block;
width: 56px;
height: 72px;
border-radius: 8px;
background-size: cover;
background-position: center;
background-color: var(--gpc-blush);
box-shadow: 0 2px 6px rgba(212, 168, 87, 0.18), 0 1px 2px rgba(28,28,31,0.06);
border: 2px solid var(--gpc-paper);
outline: 1px solid var(--gpc-gold-soft);
outline-offset: -1px;
transition: transform 220ms var(--gpc-ease-out), box-shadow 220ms var(--gpc-ease-out);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.pkg-thumb:hover {
transform: translateY(-2px) rotate(-2deg) scale(1.05);
box-shadow: 0 6px 14px rgba(212, 168, 87, 0.32), 0 2px 4px rgba(28,28,31,0.08);
}
}
@media (min-width: 640px) {
.pkg-thumb { width: 64px; height: 84px; }
}
/* =============================================================================
PART TWO — "Live and breathe" layer
=============================================================================
Adds idle motion (breathing), cursor-aware hovers, click ripples, and
ambient floating sparkles. Everything here gates on prefers-reduced-motion.
============================================================================= */
/* ── 21. Idle breathing (subtle scale pulse) ──────────────────────────────── */
@keyframes gpc-breathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.014); }
}
@keyframes gpc-breathe-halo {
0%, 100% { box-shadow: 0 6px 18px rgba(46, 79, 167, 0.10), 0 1px 2px rgba(28,28,31,0.04); }
50% { box-shadow: 0 14px 32px rgba(46, 79, 167, 0.18), 0 3px 8px rgba(212, 168, 87, 0.18); }
}
@keyframes gpc-breathe-soft-shadow {
0%, 100% { filter: drop-shadow(0 4px 10px rgba(46, 79, 167, 0.10)); }
50% { filter: drop-shadow(0 8px 20px rgba(46, 79, 167, 0.18)); }
}
@media (prefers-reduced-motion: no-preference) {
.breathe { animation: gpc-breathe 5.8s ease-in-out infinite; }
.breathe-slow { animation: gpc-breathe 8.4s ease-in-out infinite; }
.breathe-halo { animation: gpc-breathe-halo 5.4s ease-in-out infinite; }
.breathe-soft-shadow { animation: gpc-breathe-soft-shadow 6.2s ease-in-out infinite; }
}
/* When idle-breathing elements get hovered, pause + cede transform to :hover. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.breathe:hover, .breathe-slow:hover { animation-play-state: paused; }
}
/* ── 22. Hero ribbon idle pulse (so it draws the eye on landing) ──────────── */
@keyframes gpc-ribbon-glow {
0%, 100% { box-shadow: 0 4px 12px var(--magic-gold-glow); transform: translateY(0); }
50% { box-shadow: 0 8px 22px var(--magic-gold-glow), 0 2px 6px var(--magic-pink-glow); transform: translateY(-1px); }
}
@media (prefers-reduced-motion: no-preference) {
.hero-ribbon { animation: gpc-ribbon-glow 4.4s ease-in-out infinite; }
}
/* ── 23. Click ripple ─────────────────────────────────────────────────────── */
/* Apply .ripple-host to any clickable. JS sets --rx / --ry to the click point
inside the host (as %), then toggles .is-rippling. The wave radiates from
that point and fades. Works for buttons, anchors, cards. */
.ripple-host { position: relative; overflow: hidden; isolation: isolate; }
.ripple-host::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%),
rgba(255, 255, 255, 0.65) 0%,
rgba(232, 201, 119, 0.35) 22%,
transparent 55%);
opacity: 0;
transform: scale(0.2);
transform-origin: var(--rx, 50%) var(--ry, 50%);
transition: opacity 600ms var(--gpc-ease-out), transform 600ms var(--gpc-ease-out);
z-index: 0;
border-radius: inherit;
}
.ripple-host.is-rippling::after {
opacity: 1;
transform: scale(2.6);
transition-duration: 700ms;
}
@media (prefers-reduced-motion: reduce) {
.ripple-host::after { display: none; }
}
/* ── 24. Cursor-tracking shine ────────────────────────────────────────────── */
/* Apply .shine-follow. JS sets --mx / --my as % coordinates of the mouse
inside the element. A soft white spotlight follows the cursor. Best on
image tiles + cards. */
.shine-follow { position: relative; overflow: hidden; }
.shine-follow::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
rgba(255, 255, 255, 0.34) 0%,
rgba(255, 255, 255, 0.0) 32%);
opacity: 0;
transition: opacity var(--gpc-dur-normal) var(--gpc-ease-out);
mix-blend-mode: soft-light;
z-index: 2;
border-radius: inherit;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.shine-follow:hover::before,
.shine-follow:focus-within::before { opacity: 1; }
}
/* ── 25. Cursor-magnet button hover ──────────────────────────────────────── */
/* JS sets --mx-px / --my-px (px offset of mouse from element center). On
hover, the element translates a tiny fraction of that offset, giving it
a subtle "magnetism" toward the cursor. */
.btn-magnet {
transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow var(--gpc-dur-normal);
will-change: transform;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.btn-magnet:hover {
transform: translate(
calc(var(--mx-px, 0px) * 0.18),
calc(var(--my-px, 0px) * 0.18)
) scale(1.02);
}
}
/* ── 26. Hover-swing on dress thumbs (with momentum return) ───────────────── */
@keyframes gpc-swing-return {
0% { transform: rotate(-8deg) scale(1.05); }
35% { transform: rotate(5deg) scale(1.02); }
60% { transform: rotate(-2deg) scale(1.01); }
85% { transform: rotate(1deg) scale(1.00); }
100% { transform: rotate(0) scale(1.00); }
}
.swing-on-hover {
transform-origin: 50% 0%;
transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.swing-on-hover:hover {
transform: rotate(-3deg) scale(1.04);
}
.swing-on-hover.is-leaving {
animation: gpc-swing-return 720ms cubic-bezier(0.16, 1, 0.3, 1);
}
}
/* ── 27. Section background "breathe" (gradient brightness pulse) ─────────── */
@keyframes gpc-bg-breathe {
0%, 100% { filter: saturate(1) brightness(1); }
50% { filter: saturate(1.07) brightness(1.025); }
}
@media (prefers-reduced-motion: no-preference) {
.bg-storybook.bg-breathe,
.parties-strip.bg-breathe,
.parties-hero.bg-breathe {
animation: gpc-bg-breathe 9s ease-in-out infinite;
}
}
/* ── 28. Floating ambient sparkles (fixed-position decorative bits) ───────── */
/* Drop a few of these inside any section. They sit absolutely-positioned
and drift on their own slow timelines. The variant suffix (-1..-4)
picks a starting position, size, color, and timing offset. */
.float-sparkle {
position: absolute;
width: 18px; height: 18px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
opacity: 0.7;
pointer-events: none;
z-index: 1;
filter: drop-shadow(0 1px 2px rgba(232, 201, 119, 0.6));
}
.float-sparkle--pink {
background-image: url("data:image/svg+xml;utf8,");
filter: drop-shadow(0 1px 2px rgba(243, 159, 177, 0.6));
}
.float-sparkle--violet {
background-image: url("data:image/svg+xml;utf8,");
filter: drop-shadow(0 1px 2px rgba(142, 111, 201, 0.5));
}
.float-sparkle--sm { width: 12px; height: 12px; opacity: 0.55; }
.float-sparkle--lg { width: 26px; height: 26px; opacity: 0.85; }
@keyframes gpc-float-arc-a {
0% { transform: translate(0, 0) rotate(0) scale(1); opacity: 0.4; }
35% { transform: translate(8px, -12px) rotate(12deg) scale(1.08); opacity: 0.9; }
70% { transform: translate(-6px, -22px) rotate(-8deg) scale(0.95); opacity: 0.7; }
100% { transform: translate(0, 0) rotate(0) scale(1); opacity: 0.4; }
}
@keyframes gpc-float-arc-b {
0% { transform: translate(0, 0) rotate(0) scale(1); opacity: 0.5; }
40% { transform: translate(-10px, -8px) rotate(-14deg) scale(1.12); opacity: 1; }
75% { transform: translate(6px, -20px) rotate(10deg) scale(0.92); opacity: 0.65; }
100% { transform: translate(0, 0) rotate(0) scale(1); opacity: 0.5; }
}
@media (prefers-reduced-motion: no-preference) {
.float-sparkle { animation: gpc-float-arc-a 7.4s ease-in-out infinite; }
.float-sparkle:nth-of-type(2n) { animation: gpc-float-arc-b 9.2s ease-in-out infinite; animation-delay: -2.4s; }
.float-sparkle:nth-of-type(3n) { animation-delay: -4.8s; animation-duration: 8.6s; }
.float-sparkle:nth-of-type(4n) { animation-delay: -6.0s; animation-duration: 10.4s; }
}
@media (prefers-reduced-motion: reduce) {
.float-sparkle { opacity: 0.4; }
}
/* Allow consumers to place floats with .float-pos-* helpers. */
.float-pos-tl { top: 4%; left: 6%; }
.float-pos-tr { top: 8%; right: 10%; }
.float-pos-ml { top: 48%; left: 3%; }
.float-pos-mr { top: 52%; right: 6%; }
.float-pos-bl { bottom: 10%; left: 12%; }
.float-pos-br { bottom: 8%; right: 14%; }
/* Sections that host floats should be position:relative so they anchor. */
.has-floats { position: relative; }
/* ── 29. Mouse-follower sparkle trail (JS-spawned dots) ───────────────────── */
.cursor-spark {
position: fixed;
width: 10px; height: 10px;
pointer-events: none;
z-index: 9997;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
opacity: 0;
transform: translate(-50%, -50%) scale(0.3);
animation: gpc-cursor-fade 800ms var(--gpc-ease-out) forwards;
}
.cursor-spark.is-pink {
background-image: url("data:image/svg+xml;utf8,");
}
@keyframes gpc-cursor-fade {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
20% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.0); }
100% { opacity: 0; transform: translate(calc(-50% + var(--drift-x, 0px)), calc(-50% + var(--drift-y, 12px))) scale(0.6); }
}
@media (prefers-reduced-motion: reduce) {
.cursor-spark { display: none; }
}
/* ── 30. Card glow border (party cards on hover) ─────────────────────────── */
.party-card { isolation: isolate; }
.party-card::before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
background: linear-gradient(135deg,
rgba(232, 201, 119, 0) 0%,
rgba(243, 159, 177, 0.4) 30%,
rgba(232, 201, 119, 0.6) 50%,
rgba(46, 79, 167, 0.3) 70%,
rgba(232, 201, 119, 0) 100%);
opacity: 0;
z-index: -1;
transition: opacity var(--gpc-dur-normal);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.party-card:hover::before { opacity: 0.9; }
}
/* ── 31. Section divider with twinkle stars (alt to gold filigree) ────────── */
.divider-stars {
position: relative;
height: 30px;
margin-block: clamp(8px, 2vw, 24px);
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
.divider-stars::before,
.divider-stars::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--gpc-gold) 50%, transparent 100%);
max-width: 220px;
}
.divider-stars > span {
font-size: 1.3rem;
color: var(--gpc-gold);
animation: gpc-twinkle 3.8s ease-in-out infinite;
}
.divider-stars > span:nth-child(2) { animation-delay: 0.7s; transform: scale(1.2); }
.divider-stars > span:nth-child(3) { animation-delay: 1.4s; }
@media (prefers-reduced-motion: reduce) {
.divider-stars > span { animation: none; }
}
/* ── 32. Hero image: gentle floaty bob over kenburns ─────────────────────── */
@keyframes gpc-hero-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
@media (min-width: 820px) and (prefers-reduced-motion: no-preference) {
.hero-frame.hero-bob {
animation: gpc-hero-bob 6.8s ease-in-out infinite;
}
}
/* ── 33. Sticky CTA pulse on idle (subtle, drawing eye) ──────────────────── */
@keyframes gpc-idle-pulse {
0%, 100% { box-shadow: 0 8px 22px var(--magic-royal-glow); }
50% { box-shadow: 0 12px 32px var(--magic-royal-glow), 0 4px 12px var(--magic-gold-glow); }
}
@media (prefers-reduced-motion: no-preference) {
.pulse-idle { animation: gpc-idle-pulse 4.2s ease-in-out infinite; }
}
/* ── 34. Magic zone (mouse trail container) ───────────────────────────────── */
/* By default, the trail is body-wide on pages tagged .has-magic-trail.
Opt-out per section via .no-magic-trail. */
.has-magic-trail { cursor: default; }
.has-magic-trail .no-magic-trail { pointer-events: auto; }
/* Sparkle ornaments pair-with section headings — make them breathe more */
.section-heading--magic::before,
.section-heading--magic::after,
.heading--magic::before,
.heading--magic::after {
/* gentle drift in addition to the existing twinkle scale */
}
@keyframes gpc-twinkle-drift {
0%, 100% { transform: scale(1) translate(0, 0) rotate(0); opacity: 0.85; }
50% { transform: scale(1.22) translate(2px, -2px) rotate(10deg); opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
.section-heading--magic::before,
.heading--magic::before {
animation: gpc-twinkle-drift 4.2s ease-in-out infinite;
}
.section-heading--magic::after,
.heading--magic::after {
animation: gpc-twinkle-drift 4.2s ease-in-out infinite;
animation-delay: 2.1s;
}
}