/* ========================================================================== DESIGN SYSTEM & VARIABLES ========================================================================== */ :root { /* 1. Darkest: Near-black Burgundy */ --color-maroon-dark: #18070C; /* 2. Primary: Deep Burgundy / Maroon */ --color-maroon-deep: #420A18; --color-maroon-main: #3A0715; --color-maroon-light: #5A1224; /* 3. Secondary: Antique Gold */ --color-gold-deep: #9E7C3B; --color-gold-main: #C6A15B; --color-gold-bright: #E2C78E; --color-gold-glow: rgba(198, 161, 91, 0.35); /* 4. Supporting: Warm Ivory / Parchment */ --color-cream-bg: #F6F0E5; --color-cream-card: #F9F5EC; --color-cream-dark: #EADFCF; /* 5. Optional Accent: Muted Rose & Text System */ --color-rose-accent: #A87578; --color-text-dark: #240C12; --color-text-muted: #6E4A50; --color-text-light: #F6F0E5; /* Typography System — 5 Tiers */ --font-display: 'Cormorant Garamond', 'Georgia', serif; --font-heading: 'Cinzel', 'Times New Roman', serif; --font-serif: 'Cormorant', 'Garamond', serif; --font-body: 'Montserrat', 'Helvetica Neue', sans-serif; --font-arabic: 'Amiri', 'Traditional Arabic', 'Noto Naskh Arabic', serif; /* Legacy aliases for backward compatibility */ --font-title: var(--font-display); --font-script: var(--font-display); --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.35); --shadow-gold: 0 0 20px rgba(198, 161, 91, 0.35); --shadow-deep: 0 20px 50px rgba(24, 7, 12, 0.85); --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-full: 9999px; --transition-fast: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --transition-smooth: 0.5s cubic-bezier(0.16, 1, 0.3, 1); --transition-bounce: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); /* Luxury Motion Design System */ --ease-invitation: cubic-bezier(.22, 1, .36, 1); --motion-fast: 350ms; --motion-medium: 700ms; --motion-slow: 1000ms; } /* ========================================================================== RESET & BASE STYLES ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; height: 100%; background-color: var(--color-maroon-dark); background-image: radial-gradient(ellipse at 30% 20%, rgba(90, 18, 36, 0.35) 0%, transparent 60%), radial-gradient(ellipse at 70% 80%, rgba(66, 10, 24, 0.28) 0%, transparent 55%), radial-gradient(ellipse at 50% 50%, rgba(42, 8, 16, 0.5) 0%, rgba(24, 7, 12, 1) 100%); color: var(--color-text-light); font-family: var(--font-body); font-size: 16px; line-height: 1.6; overflow: hidden; /* Lock scroll to scroll container */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; } /* Sparkle Canvas */ #sparkleCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: 0.7; } /* Floating Music Button */ .music-btn { position: fixed; top: 24px; right: 24px; z-index: 100; width: 32px; height: 32px; border-radius: 50%; /* muted, less saturated background with partial transparency */ background: rgba(94, 30, 45, 0.45); border: 1.2px solid var(--color-gold-main); color: var(--color-gold-bright); display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(6px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); transition: opacity var(--motion-fast) var(--ease-invitation), border-color var(--motion-fast) var(--ease-invitation), background var(--motion-fast) var(--ease-invitation); opacity: 0.75; } .music-btn .music-icon { display: inline-block; transition: transform var(--motion-medium) var(--ease-invitation); } .music-btn:hover { transform: none !important; opacity: 0.95; border-color: var(--color-gold-bright); } /* When music is playing */ .music-btn.playing { opacity: 0.95; background: rgba(94, 30, 45, 0.6); } .music-btn.playing .music-icon { transform: rotate(15deg); } /* Muted/paused state – dimmer appearance */ .music-btn.paused { opacity: 0.5; background: rgba(94, 30, 45, 0.2); } .music-btn:hover, .music-btn:active { transform: none !important; } /* ========================================================================== ROYAL ROMAN NUMERAL STORY PROGRESS INDICATOR ========================================================================== */ .story-progress-container { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 101; display: flex; align-items: center; gap: 10px; background: rgba(18, 5, 8, 0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 5px 16px; border-radius: var(--radius-full); border: 1px solid rgba(198, 161, 91, 0.3); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } .story-roman-numeral { font-family: var(--font-heading); font-size: 0.74rem; font-weight: 600; letter-spacing: 1px; color: rgba(246, 240, 229, 0.4); transition: all 0.3s ease; cursor: pointer; } .story-roman-numeral.active { color: var(--color-gold-bright); font-weight: 800; text-shadow: 0 0 8px rgba(212, 175, 55, 0.6); transform: scale(1.15); } .story-roman-numeral.completed { color: rgba(212, 175, 55, 0.75); } .story-roman-dot { color: rgba(198, 161, 91, 0.3); font-size: 0.55rem; } .story-subtle-nav { display: none !important; } .subtle-nav-btn { pointer-events: auto; width: 38px; height: 38px; border-radius: 50%; background: rgba(24, 7, 12, 0.45); border: 1px solid rgba(198, 161, 91, 0.35); color: var(--color-gold-bright); font-family: var(--font-heading); font-size: 1.3rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(8px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); transition: all var(--transition-fast); opacity: 0.7; } .subtle-nav-btn:hover, .subtle-nav-btn:active { opacity: 1; background: rgba(58, 7, 21, 0.85); border-color: var(--color-gold-main); transform: scale(1.1); box-shadow: 0 0 12px var(--color-gold-glow); } .subtle-nav-btn.hidden-nav { opacity: 0; pointer-events: none; } /* Staggered Entrance Animations for Story Mode */ .anim-item { opacity: 0; transform: translateY(18px); transition: opacity var(--motion-medium) var(--ease-invitation), transform var(--motion-medium) var(--ease-invitation), filter var(--motion-medium) var(--ease-invitation); will-change: opacity, transform, filter; position: relative; z-index: 5; } .anim-fade-down { transform: translateY(-18px); } .anim-fade-up { transform: translateY(18px); } .anim-zoom-in { transform: translateY(18px) scale(0.97); } .anim-fade-in { transform: translateY(10px); } .page.active-story .anim-item { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } .delay-1 { transition-delay: 120ms; } .delay-2 { transition-delay: 240ms; } .delay-3 { transition-delay: 360ms; } .delay-4 { transition-delay: 480ms; } .delay-5 { transition-delay: 600ms; } /* ========================================================================== STAGE 1: THE ENVELOPE (LANDING SCREEN) ========================================================================== */ /* Hide Controls Before Envelope Opening */ body.is-unopened .story-progress-container, body.is-unopened #musicToggle { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(-14px) !important; transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .story-progress-container, #musicToggle { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .stage-envelope { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, #420614 0%, #24020A 50%, #0F0104 100%); opacity: 1; visibility: visible; transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.9s cubic-bezier(0.4, 0, 0.2, 1); padding: 20px; } .stage-envelope.fade-out { opacity: 0; visibility: hidden; pointer-events: none; } .envelope-container { perspective: 1000px; width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; position: relative; } .envelope-light-bloom { position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%) scale(0.6); width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(226, 199, 142, 0.38) 0%, rgba(198, 161, 91, 0.12) 50%, transparent 75%); pointer-events: none; z-index: 0; opacity: 0.6; filter: blur(20px); transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.3s cubic-bezier(0.16, 1, 0.3, 1); } .stage-envelope.unveiling .envelope-light-bloom { transform: translate(-50%, -50%) scale(1.7); opacity: 1; } .envelope { position: relative; width: 100%; height: 230px; background: linear-gradient(135deg, #4A0516 0%, #2D030D 60%, #1A0207 100%); border-radius: 12px; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), 0 8px 25px rgba(26, 3, 9, 0.5), inset 0 0 0 1px rgba(212, 175, 55, 0.35), inset 0 0 20px rgba(0, 0, 0, 0.4); cursor: pointer; z-index: 2; transition: transform var(--motion-fast) var(--ease-invitation); } .envelope:hover { transform: translateY(-2px); } .top-flap { position: absolute; top: 0; left: 0; width: 0; height: 0; border-left: 180px solid transparent; border-right: 180px solid transparent; border-top: 125px solid #5A081B; transform-origin: top center; transition: transform var(--motion-slow) var(--ease-invitation); z-index: 5; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)); } .envelope.open .top-flap { transform: rotateX(180deg); z-index: 1; } .pocket-lining { position: absolute; inset: 5px; border-radius: 8px; background: linear-gradient(180deg, #2D030D, #1A0207); z-index: 1; } .card-preview { position: absolute; left: 5%; right: 5%; bottom: 10px; height: 200px; background: var(--color-cream-bg); border-radius: 10px 10px 0 0; border: 2px solid var(--color-gold-main); z-index: 2; transform: translateY(0); transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 1.1s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--color-text-dark); } .envelope.open .card-preview { transform: translateY(-135px) scale(1.04); box-shadow: 0 -15px 40px rgba(198, 161, 91, 0.4), 0 10px 30px rgba(0, 0, 0, 0.6); } .card-preview-header h3 { font-family: var(--font-title); font-size: 1.4rem; font-weight: 700; color: var(--color-maroon-deep); } .front-pocket { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top right, #3D0412 49.5%, transparent 50%), linear-gradient(to top left, #3D0412 49.5%, transparent 50%); border-radius: 0 0 12px 12px; z-index: 4; pointer-events: none; } .wax-seal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -45%); width: 68px; height: 68px; background: radial-gradient(circle at 35% 30%, #F5D99B 0%, #C6A15B 35%, #856424 75%, #4A3510 100%); border-radius: 50%; z-index: 6; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.65), 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.4), inset 0 -2px 4px rgba(0, 0, 0, 0.5); transition: transform var(--motion-fast) var(--ease-invitation), opacity var(--motion-medium) var(--ease-invitation); cursor: pointer; animation: sealBreathe 3.2s infinite ease-in-out; } @keyframes sealBreathe { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } } .wax-seal.seal-pressed { transform: translate(-50%, -45%) scale(0.95) !important; animation: none; } .envelope.open .wax-seal { transform: translate(-50%, -45%) scale(0) !important; opacity: 0; } .seal-inner { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid rgba(74, 5, 22, 0.65); box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 40% 40%, rgba(255, 248, 220, 0.25) 0%, transparent 80%); } .seal-monogram { font-family: var(--font-heading); font-size: 0.9rem; font-weight: 800; letter-spacing: 1.5px; color: #2D030D; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); } .seal-pulse { display: none; } .tap-instruction { margin-top: 36px; text-align: center; cursor: pointer; user-select: none; } .instruction-lead { font-family: var(--font-body); font-size: 0.55rem; letter-spacing: 0.25em; color: var(--color-gold-deep); text-transform: uppercase; font-weight: 500; display: block; margin-bottom: 6px; opacity: 0.85; } .pulse-text { font-family: var(--font-heading); font-size: 0.74rem; letter-spacing: 2.2px; color: var(--color-gold-bright); text-transform: uppercase; font-weight: 700; margin: 0; animation: gentleBreath 3s infinite ease-in-out; } @keyframes gentleBreath { 0%, 100% { opacity: 0.6; } 50% { opacity: 0.95; } } /* ========================================================================== STAGE 2: THE INVITATION VIEW (SCROLL SNAP LAYER) ========================================================================== */ .stage-card { width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0.8s ease, visibility 0.8s ease; } .stage-card.active { opacity: 1; visibility: visible; } .pages-scroll-container { width: 100%; height: 100%; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; } .page { flex: 0 0 auto; width: 100%; min-height: 100vh; min-height: 100dvh; scroll-snap-align: center; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; padding: 36px 16px; position: relative; overflow: hidden; /* Deep burgundy velvet environment per page */ background: radial-gradient(ellipse at 50% 30%, rgba(90, 18, 36, 0.22) 0%, transparent 70%), radial-gradient(ellipse at 20% 80%, rgba(66, 10, 24, 0.16) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(90, 18, 36, 0.14) 0%, transparent 50%); } /* ========================================================================== FOLIO PAGE LAYOUT ENGINE — BESPOKE ARCHETYPES (VERTICAL STORY SCENERY) ========================================================================== */ .page-inner { width: 100%; max-width: 580px; position: relative; transition: transform var(--motion-medium) var(--ease-invitation), opacity var(--motion-medium) var(--ease-invitation); opacity: 0; transform: translateY(20px); display: flex; flex-direction: column; align-items: center; margin: 0 auto; will-change: transform, opacity; } .page-inner::-webkit-scrollbar { display: none; } .page.active-story .page-inner { transform: translateY(0); opacity: 1; } .page.past-story .page-inner { opacity: 0; transform: translateY(-15px); } /* TYPE A: CEREMONIAL PAGE SURFACE (Floating Manuscript / Printed Invitation Sheet) */ .page-inner.archetype-ceremonial { max-width: 440px; height: 86%; height: 86dvh; max-height: 630px; padding: 32px 26px; justify-content: center; background: radial-gradient(ellipse at 50% 30%, rgba(255, 252, 243, 0.6) 0%, transparent 65%), linear-gradient(180deg, #FAF5EA 0%, #F3EBD8 35%, #EDE4CE 70%, #F0E8D5 100%); border-radius: 4px; border: 1.2px solid rgba(198, 161, 91, 0.38); box-shadow: 0 18px 50px rgba(10, 2, 5, 0.45), 0 6px 16px rgba(10, 2, 5, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(198, 161, 91, 0.15), inset 0 0 60px rgba(234, 223, 207, 0.3); color: var(--color-text-dark); text-align: center; } /* TYPE B: EDITORIAL FOLIO SURFACE (Crisp Vellum Layout Sheet) */ .page-inner.archetype-editorial { max-width: 520px; height: 88%; height: 88dvh; max-height: 680px; padding: 30px 24px; justify-content: flex-start; background: radial-gradient(ellipse at 50% 25%, rgba(255, 252, 243, 0.55) 0%, transparent 60%), linear-gradient(170deg, #FBF7EE 0%, #F5EDD9 30%, #EFE6D1 65%, #F2EAD8 100%); border-radius: 6px; border: 1.2px solid rgba(198, 161, 91, 0.4); box-shadow: 0 20px 55px rgba(10, 2, 5, 0.5), 0 8px 20px rgba(10, 2, 5, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(198, 161, 91, 0.12), inset 0 0 50px rgba(234, 223, 207, 0.25); color: var(--color-text-dark); text-align: center; } /* TYPE C: INTERACTIVE INSERT SURFACE (Outer Paper Folio Holding an Inset Card) */ .page-inner.archetype-interactive { max-width: 460px; height: 88%; height: 88dvh; max-height: 670px; padding: 24px 20px; justify-content: space-between; background: radial-gradient(ellipse at 50% 40%, rgba(255, 252, 243, 0.5) 0%, transparent 60%), linear-gradient(160deg, #F8F2E5 0%, #F2E9D4 35%, #EBE1CB 70%, #EFE7D3 100%); border-radius: 8px; border: 1.2px solid rgba(198, 161, 91, 0.32); box-shadow: 0 16px 45px rgba(10, 2, 5, 0.45), 0 6px 14px rgba(10, 2, 5, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(198, 161, 91, 0.1), inset 0 0 45px rgba(234, 223, 207, 0.2); color: var(--color-text-dark); text-align: center; } .card-surface { /* Legacy fallback class */ color: var(--color-text-dark); overflow: hidden; position: relative; } /* Chapter Eyebrow Badge — Editorial Metadata */ .story-chapter-badge { font-family: var(--font-body); font-size: 0.52rem; font-weight: 500; letter-spacing: 0.35em; color: var(--color-gold-deep); text-transform: uppercase; margin-bottom: 12px; opacity: 0.75; position: relative; z-index: 5; } /* Luxury Gold Foil Light Sheen Sweep Overlay */ .gold-foil-sheen { position: absolute; inset: 0; pointer-events: none; z-index: 10; border-radius: inherit; overflow: hidden; } .gold-foil-sheen::after { content: ''; position: absolute; top: -50%; left: -130%; width: 50%; height: 200%; background: linear-gradient( 110deg, transparent 20%, rgba(255, 248, 220, 0.04) 40%, rgba(226, 199, 142, 0.38) 50%, rgba(255, 248, 220, 0.04) 60%, transparent 80% ); transform: rotate(25deg); animation: goldSheenSweep 5s infinite cubic-bezier(0.25, 1, 0.5, 1); } @keyframes goldSheenSweep { 0%, 65% { transform: translateX(-150%) rotate(25deg); opacity: 0; } 70% { opacity: 1; } 85% { transform: translateX(380%) rotate(25deg); opacity: 0; } 100% { opacity: 0; } } /* Decorative Card Inner Border Frame */ .card-surface::before { display: none; } /* Decorative Card Watermark Illustration — disabled in favor of palace architecture layer */ .card-surface::after { display: none; } .corner-flourish { position: absolute; width: 36px; height: 36px; border-color: rgba(184, 148, 62, 0.35); border-style: solid; pointer-events: none; z-index: 2; } .corner-flourish.top-left { top: 14px; left: 14px; border-width: 1.5px 0 0 1.5px; } .corner-flourish.top-right { top: 14px; right: 14px; border-width: 1.5px 1.5px 0 0; } .corner-flourish.bottom-left { bottom: 14px; left: 14px; border-width: 0 0 1.5px 1.5px; } .corner-flourish.bottom-right { bottom: 14px; right: 14px; border-width: 0 1.5px 1.5px 0; } /* ========================================================================== PAGE 1: HEROFRAME / FLIP CARD FIT ========================================================================== */ .bismillah-container { margin: 6px 0 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(198, 161, 91, 0.3); width: 100%; position: relative; z-index: 5; } .bismillah-text { font-family: var(--font-arabic); font-size: clamp(1.4rem, 5vw, 1.85rem); color: var(--color-gold-main); font-weight: 700; letter-spacing: 0.5px; line-height: 1.7; } .bismillah-translation { font-family: var(--font-body); font-size: 0.6rem; color: var(--color-gold-deep); text-transform: uppercase; letter-spacing: 0.18em; margin-top: 8px; font-weight: 500; } /* Chapter I Unified Stationery Invitation Layout */ .family-invitation-lead { font-family: var(--font-serif); font-size: clamp(0.78rem, 2.2vw, 0.92rem); letter-spacing: 0.03em; color: var(--color-maroon-dark); font-style: italic; font-weight: 400; text-transform: none; margin: 4px 0 2px; line-height: 1.6; max-width: 320px; align-self: center; } .invitation-parents-name { font-family: var(--font-heading); font-size: clamp(0.62rem, 1.8vw, 0.72rem); font-weight: 600; letter-spacing: 0.22em; color: var(--color-maroon-deep); text-transform: uppercase; font-style: normal; margin-bottom: 4px; } .invitation-ornament-divider { color: var(--color-gold-main); font-size: 0.68rem; margin: 3px 0; } .invitation-body-declaration p { font-family: var(--font-serif); font-size: clamp(0.88rem, 2.5vw, 1.05rem); line-height: 1.65; color: var(--color-maroon-dark); font-weight: 400; font-style: italic; max-width: 320px; margin: 0 auto; } .invitation-ceremony-meta { display: flex; flex-direction: column; gap: 2px; font-family: var(--font-heading); color: var(--color-maroon-deep); margin: 6px 0; text-align: center; } .meta-date { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.18em; } .meta-time { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; } .meta-city { font-size: 0.68rem; letter-spacing: 0.15em; color: var(--color-gold-deep); text-transform: uppercase; } .stationery-blessing-block { margin: 18px auto; padding: 24px 20px; background: rgba(246, 240, 229, 0.7); border: 1px solid rgba(198, 161, 91, 0.4); border-radius: var(--radius-md); box-shadow: 0 4px 16px rgba(10, 2, 5, 0.05); width: 100%; max-width: 380px; text-align: center; position: relative; z-index: 5; } .blessing-title { font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700; letter-spacing: 1.5px; color: var(--color-gold-deep); text-transform: uppercase; display: block; } .blessing-rose-icon { font-size: 1.15rem; margin: 2px 0 1px; display: block; } .blessing-subtitle { font-family: var(--font-serif); font-size: 0.82rem; color: var(--color-maroon-dark); font-style: italic; font-weight: 400; margin-bottom: 8px; } .stationery-petal-btn { background: transparent; border: 1px solid var(--color-gold-main); color: var(--color-maroon-deep); font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700; letter-spacing: 1.2px; padding: 7px 18px; border-radius: var(--radius-full); cursor: pointer; transition: all var(--motion-fast) var(--ease-invitation); } .stationery-petal-btn:hover { background: rgba(198, 161, 91, 0.14) !important; border-color: var(--color-gold-bright) !important; transform: none !important; box-shadow: none !important; letter-spacing: 1.6px !important; opacity: 0.95 !important; } .blessing-counter-readout { font-family: var(--font-body); font-size: 0.6rem; color: var(--color-gold-deep); letter-spacing: 0.08em; margin-top: 6px; font-weight: 400; } .blessing-counter-readout .flower-count { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--color-maroon-deep); margin-right: 4px; } .swipe-hint-footer { font-family: var(--font-body); font-size: 0.58rem; color: var(--color-gold-deep); letter-spacing: 0.15em; margin-top: 8px; opacity: 0.7; font-weight: 400; } /* Flip Card Fitting - Fixes crop */ .flip-card-wrapper { position: relative; width: 100%; max-width: 250px; aspect-ratio: 4 / 5; /* Preserves natural caricature dimension */ margin: 0 auto; perspective: 1000px; } .flip-card { width: 100%; height: 100%; cursor: pointer; } .flip-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); } .flip-card.is-flipped .flip-card-inner { transform: rotateY(180deg); } .flip-card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 20px; overflow: hidden; border: 2px solid var(--color-gold-main); background: #FFF; } .flip-card-back { transform: rotateY(180deg); } .illustration-frame { width: 100%; height: 100%; position: relative; background: #FFF; } /* Image containment check - fit image without crop */ .couple-img { width: 100%; height: 100%; object-fit: contain; /* PERFECT FIT: Never cuts the caricature illustration */ display: block; background: #FFF; } .flip-badge { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); background: rgba(31, 3, 11, 0.85); color: var(--color-gold-bright); font-size: 0.65rem; font-weight: 600; padding: 3px 8px; border-radius: 10px; border: 1px solid rgba(212, 175, 55, 0.3); white-space: nowrap; } .flip-hint { margin-top: 8px; font-size: 0.72rem; color: var(--color-maroon-main); display: flex; align-items: center; gap: 4px; justify-content: center; font-weight: 600; } .flip-icon-anim { animation: spinSync 4s infinite linear; } @keyframes spinSync { to { transform: rotate(360deg); } } /* Scroll prompt styling */ .scroll-prompt { position: absolute; bottom: 12px; display: flex; flex-direction: column; align-items: center; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-muted); opacity: 0.8; } .chevron-down { animation: bounceDown 1.5s infinite; margin-top: 2px; font-size: 0.6rem; } @keyframes bounceDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } /* ========================================================================== PAGE 2: NAMES & BLESSING ========================================================================== */ .couple-names { margin: 4px 0 6px; width: 100%; opacity: 0; filter: blur(8px); transform: translateY(20px); will-change: opacity, filter, transform; position: relative; z-index: 5; } .page.active-story .couple-names { animation: heroNameReveal var(--motion-slow) var(--ease-invitation) forwards; animation-delay: 240ms; } @keyframes heroNameReveal { 0% { opacity: 0; filter: blur(8px); transform: translateY(20px); } 100% { opacity: 1; filter: blur(0); transform: translateY(0); } } .name { font-family: var(--font-display); font-size: clamp(2rem, 7vw, 3.2rem); color: var(--color-maroon-deep); font-weight: 500; line-height: 1.08; letter-spacing: -0.01em; } .groom-parentage { font-family: var(--font-serif); font-size: clamp(0.72rem, 2vw, 0.85rem); font-style: italic; font-weight: 400; color: var(--color-text-muted); letter-spacing: 0.03em; margin-top: 4px; } .connector-wrapper { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 3px 0; } .connector-wrapper .line { width: 50px; height: 1px; background: linear-gradient(90deg, transparent, var(--color-gold-main), transparent); } .connector-wrapper .ampersand, .connector-wrapper .connector-word { font-family: var(--font-display); font-size: clamp(1.1rem, 3.5vw, 1.5rem); color: var(--color-gold-main); line-height: 1; font-weight: 300; font-style: italic; } .invitation-text p { font-size: 0.82rem; color: var(--color-text-muted); line-height: 1.4; max-width: 290px; margin: 0 auto; } .gold-divider { color: var(--color-gold-main); font-size: 0.8rem; margin: 12px 0; } .flower-blessing-card { background: linear-gradient(135deg, var(--color-maroon-deep), var(--color-maroon-dark)); color: #FFF; border-radius: var(--radius-md); padding: 14px; width: 100%; border: 1.5px solid var(--color-gold-main); } .flower-icon-anim { font-size: 1.8rem; margin-bottom: 2px; animation: floatFlower 2.5s infinite ease-in-out; } @keyframes floatFlower { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-4px) rotate(6deg); } } .flower-blessing-card h4 { font-family: var(--font-title); font-size: 0.95rem; color: var(--color-gold-bright); } .flower-blessing-card p { font-size: 0.7rem; color: var(--color-cream-dark); margin-bottom: 8px; } .flower-counter-box { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(212, 175, 55, 0.25); border-radius: var(--radius-sm); padding: 6px; margin-bottom: 10px; } .flower-count { font-family: var(--font-title); font-size: 1.4rem; color: var(--color-gold-bright); display: block; line-height: 1; } .flower-label { font-size: 0.6rem; text-transform: uppercase; color: var(--color-gold-main); } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border-radius: var(--radius-full); font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: all var(--transition-fast); border: none; } .btn-flower { background: linear-gradient(135deg, #E25B78, var(--color-maroon-light)); color: #FFF; width: 100%; } /* ========================================================================== PAGE 3: SCRATCH-OFF & COUNTDOWN ========================================================================== */ .scratch-card-section { background: rgba(255, 253, 248, 0.95); border: 1px solid rgba(198, 161, 91, 0.35); border-radius: 12px; padding: 18px 16px; width: 100%; max-width: 480px; margin: 10px auto; box-shadow: 0 10px 30px rgba(10, 2, 5, 0.12), inset 0 0 15px rgba(198, 161, 91, 0.05); position: relative; z-index: 5; } .scratch-header { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; margin-bottom: 10px; } .scratch-header h3 { font-family: var(--font-heading); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.14em; color: var(--color-maroon-main); text-transform: uppercase; } .scratch-subtitle { font-family: var(--font-serif); font-size: 0.82rem; font-style: italic; font-weight: 400; color: var(--color-maroon-main); margin-top: 4px; } .scratch-wrapper { position: relative; width: 100%; min-height: 145px; height: 145px; border-radius: var(--radius-sm); overflow: hidden; } .revealed-content { position: absolute; inset: 0; background: linear-gradient(135deg, #FFFDF9, #F7EFE2); color: var(--color-maroon-deep); border: 1.5px solid var(--color-gold-main); border-radius: var(--radius-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px 14px 16px; box-shadow: inset 0 0 15px rgba(198, 161, 91, 0.15); } .editorial-date-artwork { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; } .editorial-day-num { font-family: var(--font-display); font-size: clamp(2.5rem, 8vw, 3.4rem); font-weight: 600; color: var(--color-maroon-deep); line-height: 0.88; letter-spacing: -0.02em; } .editorial-month-name { font-family: var(--font-heading); font-size: clamp(0.65rem, 2vw, 0.8rem); font-weight: 500; letter-spacing: 0.3em; color: var(--color-gold-deep); margin-top: 4px; } .editorial-year-num { font-family: var(--font-body); font-size: 0.64rem; letter-spacing: 0.15em; color: var(--color-text-muted); font-weight: 400; } .editorial-hairline { width: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--color-gold-main), transparent); margin: 8px auto 6px; } .editorial-meta-line { font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.14em; color: var(--color-maroon-main); font-weight: 500; text-transform: uppercase; margin-top: 2px; padding-bottom: 2px; } #scratchCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; touch-action: none; transition: opacity var(--motion-medium) var(--ease-invitation); will-change: opacity; } .scratch-hint { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); z-index: 4; background: rgba(26, 3, 9, 0.85); color: var(--color-gold-bright); font-size: 0.65rem; padding: 3px 10px; border-radius: 12px; pointer-events: none; white-space: nowrap; } .scratch-hint.hidden { display: none; } .scratch-progress { width: 100%; height: 3px; background: rgba(122, 12, 40, 0.08); margin-top: 6px; } .progress-bar { width: 0%; height: 100%; background: var(--color-gold-main); } .editorial-date-section { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 10px; padding: 12px 0; background: transparent; border-radius: 0; border-top: 1px solid rgba(198, 161, 91, 0.25); border-bottom: 1px solid rgba(198, 161, 91, 0.25); width: 100%; position: relative; z-index: 5; } .editorial-date-display { display: flex; align-items: baseline; justify-content: center; gap: 8px; line-height: 1; } .editorial-day { font-family: var(--font-title); font-size: 2.1rem; font-weight: 700; color: var(--color-maroon-deep); } .editorial-month { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; letter-spacing: 3px; color: var(--color-gold-deep); text-transform: uppercase; } .editorial-year { font-family: var(--font-title); font-size: 1.25rem; font-weight: 600; color: var(--color-maroon-main); } .editorial-time { font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 1px; color: var(--color-text-muted); margin-top: 4px; } .editorial-divider { color: var(--color-gold-main); font-size: 0.65rem; margin: 6px 0 4px; } .editorial-countdown-block { text-align: center; margin-top: 2px; } .countdown-lead { font-family: var(--font-body); font-size: 0.65rem; color: var(--color-gold-deep); text-transform: uppercase; letter-spacing: 0.2em; font-weight: 500; display: block; margin-bottom: 6px; } .countdown-digits { line-height: 1; margin: 4px 0; } .countdown-main-num { font-family: var(--font-display); font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 600; color: var(--color-maroon-deep); } .unit-label { font-family: var(--font-body); font-size: 0.58rem; letter-spacing: 0.2em; color: var(--color-gold-deep); text-transform: uppercase; font-weight: 500; margin-left: 4px; } .countdown-sub-readout { font-family: var(--font-body); font-size: 0.6rem; color: var(--color-text-muted); letter-spacing: 0.08em; margin-top: 6px; font-weight: 400; } /* ========================================================================== PAGE 4: GALLERY CAROUSEL ========================================================================== */ .moments-gallery-section { background: radial-gradient(circle at center, #FFFDF8 0%, #F7EFE2 100%); border-radius: var(--radius-md); border: 1px solid var(--color-gold-main); padding: 10px; width: 100%; } .gallery-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .gallery-title { font-family: var(--font-heading); font-size: 0.72rem; color: var(--color-maroon-main); text-transform: uppercase; } .gallery-play-btn { background: transparent; border: none; font-size: 0.8rem; cursor: pointer; } .gallery-carousel-wrapper { position: relative; width: 100%; aspect-ratio: 4 / 3.2; border-radius: var(--radius-sm); overflow: hidden; } .gallery-carousel { position: relative; width: 100%; height: 100%; } .gallery-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; background: #FFF; } .gallery-slide.active { opacity: 1; } .gallery-slide img { width: 100%; height: 100%; object-fit: contain; /* Preserves photo aspect ratio nicely */ } .slide-caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(28, 4, 11, 0.9) 30%, transparent); color: var(--color-gold-bright); font-size: 0.7rem; padding: 12px 6px 4px; } .gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; background: rgba(31, 3, 11, 0.6); color: var(--color-gold-bright); border: 1px solid rgba(212, 175, 55, 0.3); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 0.8rem; } .gallery-nav.prev { left: 6px; } .gallery-nav.next { right: 6px; } .gallery-dots { display: flex; justify-content: center; gap: 4px; margin-top: 6px; } .gallery-dots .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(122, 12, 40, 0.2); cursor: pointer; } .gallery-dots .dot.active { background: var(--color-gold-main); } /* ========================================================================== PAGE 5: VENUE CARD ========================================================================== */ /* ========================================================================== PAGE 4: VENUE & MAP STATIONERY CARD ========================================================================== */ .formal-venue-card { background: rgba(255, 253, 248, 0.95); border: 1.5px solid rgba(198, 161, 91, 0.4); border-radius: 14px; padding: 34px 22px; width: 100%; max-width: 520px; margin: 14px auto; text-align: center; box-shadow: 0 14px 35px rgba(10, 2, 5, 0.14), inset 0 0 25px rgba(198, 161, 91, 0.06); position: relative; z-index: 5; } .editorial-section-tag { font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.3em; color: var(--color-gold-deep); text-transform: uppercase; font-weight: 500; display: block; margin-bottom: 12px; } .editorial-venue-title { font-family: var(--font-display); font-size: clamp(1.6rem, 5.5vw, 2.4rem); font-weight: 500; color: var(--color-maroon-deep); letter-spacing: -0.01em; margin-bottom: 12px; line-height: 1.2; } .venue-celebration-title { font-family: var(--font-heading); font-size: 0.88rem; font-weight: 600; letter-spacing: 0.15em; color: var(--color-maroon-deep); text-transform: uppercase; } .venue-divider { color: var(--color-gold-main); font-size: 0.7rem; margin: 6px 0 12px; } .formal-venue-name { font-family: var(--font-title); font-size: 1.3rem; font-weight: 700; color: var(--color-maroon-deep); margin-bottom: 6px; } .formal-venue-location { font-family: var(--font-serif); font-size: clamp(0.85rem, 2.2vw, 0.95rem); color: var(--color-text-muted); line-height: 1.6; font-weight: 400; max-width: 300px; margin: 0 auto 18px; } .venue-datetime-flow { display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 18px 0 22px; background: transparent; border: none; padding: 0; width: 100%; } .venue-datetime-flow .flow-day { font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.25em; color: var(--color-gold-deep); text-transform: uppercase; font-weight: 500; } .venue-datetime-flow .flow-date { font-family: var(--font-display); font-size: clamp(1.2rem, 4vw, 1.65rem); font-weight: 500; color: var(--color-maroon-deep); letter-spacing: 0.01em; } .venue-datetime-flow .flow-time { font-family: var(--font-serif); font-size: clamp(0.78rem, 2vw, 0.88rem); font-style: italic; font-weight: 400; color: var(--color-maroon-main); } .venue-destination-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; } .destination-seal-btn, .calendar-seal-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-full); font-family: var(--font-body); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: all var(--motion-fast) var(--ease-invitation); } .destination-seal-btn { background: linear-gradient(135deg, var(--color-maroon-deep), var(--color-maroon-dark)); color: var(--color-gold-bright); border: 1.2px solid var(--color-gold-main); box-shadow: 0 4px 14px rgba(66, 10, 24, 0.25); } .destination-seal-btn:hover { transform: none !important; box-shadow: 0 4px 14px rgba(66, 10, 24, 0.25) !important; border-color: var(--color-gold-bright) !important; letter-spacing: 0.24em !important; opacity: 0.95 !important; } .calendar-seal-btn { background: transparent; color: var(--color-maroon-deep); border: 1.2px solid var(--color-gold-main); } .calendar-seal-btn:hover { background: rgba(198, 161, 91, 0.12) !important; transform: none !important; letter-spacing: 0.24em !important; opacity: 0.95 !important; } .seal-icon { font-size: 0.85rem; } /* ========================================================================== PAGE 6: A LITTLE TEST OF MEMORY STYLING ========================================================================== */ .memory-test-section { background: transparent; border: none; border-radius: 0; padding: 0; width: 100%; } .memory-header { text-align: center; margin-bottom: 12px; } .memory-title { font-family: var(--font-heading); font-size: 0.88rem; color: var(--color-maroon-deep); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; } .memory-divider { color: var(--color-gold-main); font-size: 0.65rem; margin: 4px 0 6px; } .memory-subtitle { font-family: var(--font-body); font-size: 0.62rem; color: var(--color-text-muted); letter-spacing: 0.05em; font-weight: 400; } .trivia-q { display: none; flex-direction: column; gap: 8px; } .trivia-q.active { display: flex; } .q-text { font-family: var(--font-serif); font-size: clamp(0.88rem, 2.4vw, 1rem); font-weight: 500; color: var(--color-maroon-deep); line-height: 1.5; } .q-options { display: flex; flex-direction: column; gap: 6px; } .btn-opt { background: transparent; border: none; border-bottom: 1px solid rgba(198, 161, 91, 0.3); padding: 10px 8px; border-radius: 0; font-family: var(--font-body); font-size: 0.78rem; color: var(--color-maroon-dark); text-align: left; cursor: pointer; transition: border-color 0.3s ease; } .btn-opt:hover { border-bottom-color: var(--color-gold-main); background: rgba(255, 253, 248, 0.6); } .btn-opt.correct { background: #FAF2E1 !important; border: 1.5px solid var(--color-gold-main) !important; color: var(--color-maroon-deep) !important; font-weight: 600; box-shadow: 0 0 10px rgba(198, 161, 91, 0.2); } .btn-opt.incorrect { background: rgba(122, 12, 40, 0.04) !important; border: 1px dashed rgba(122, 12, 40, 0.3) !important; color: var(--color-text-muted) !important; } .memory-feedback { font-family: var(--font-serif); font-size: 0.82rem; font-style: italic; font-weight: 400; color: var(--color-text-muted); text-align: center; min-height: 18px; margin-top: 4px; } .trivia-result { text-align: center; padding: 18px 14px; background: rgba(255, 253, 248, 0.95); border: 1px solid rgba(198, 161, 91, 0.35); border-radius: 10px; box-shadow: 0 8px 24px rgba(10, 2, 5, 0.08); position: relative; overflow: hidden; margin-top: 8px; transition: all 0.4s var(--ease-invitation); } .trivia-result.hidden, .hidden { display: none !important; } .trivia-result.vip-celebration { border-color: rgba(212, 175, 55, 0.65); background: linear-gradient(180deg, rgba(255, 253, 248, 0.98) 0%, rgba(253, 247, 235, 0.96) 100%); box-shadow: 0 0 20px rgba(198, 161, 91, 0.25), 0 10px 30px rgba(139, 21, 40, 0.12); animation: resultReveal 0.5s var(--ease-invitation) forwards, vipAuraPulse 3.5s ease-in-out infinite alternate; } @keyframes vipAuraPulse { 0% { box-shadow: 0 0 15px rgba(198, 161, 91, 0.2), 0 8px 25px rgba(139, 21, 40, 0.1); } 100% { box-shadow: 0 0 30px rgba(212, 175, 55, 0.4), 0 12px 35px rgba(139, 21, 40, 0.18); } } .result-crest { color: var(--color-gold-main); font-size: 0.85rem; letter-spacing: 0.15em; margin-bottom: 6px; } .result-score-badge { display: inline-block; font-family: var(--font-heading); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.18em; color: var(--color-gold-deep); background: rgba(198, 161, 91, 0.12); border: 1px solid rgba(198, 161, 91, 0.28); padding: 3px 12px; border-radius: 20px; margin-bottom: 10px; } .vip-celebration .result-score-badge { background: linear-gradient(135deg, rgba(212, 175, 55, 0.16), rgba(139, 21, 40, 0.1)); border-color: rgba(212, 175, 55, 0.5); color: var(--color-maroon-deep); } .result-title { font-family: var(--font-heading); font-size: clamp(0.88rem, 2.4vw, 1.05rem); font-weight: 600; line-height: 1.35; letter-spacing: 0.04em; color: var(--color-maroon-deep); margin-bottom: 8px; } .vip-celebration .result-title { color: #7A1222; text-shadow: 0 1px 2px rgba(198, 161, 91, 0.18); } .result-msg-box { margin-bottom: 14px; } .result-msg-lead { font-family: var(--font-serif); font-size: clamp(0.8rem, 2.1vw, 0.92rem); color: var(--color-maroon-dark); line-height: 1.5; margin-bottom: 4px; } .result-msg-sub { font-family: var(--font-serif); font-size: clamp(0.78rem, 2vw, 0.9rem); color: var(--color-maroon-deep); line-height: 1.45; font-weight: 600; font-style: italic; } .reset-memory-btn { background: transparent; border: 1.2px solid var(--color-gold-main); color: var(--color-maroon-deep); font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700; letter-spacing: 1.5px; padding: 8px 18px; border-radius: var(--radius-full); cursor: pointer; transition: all var(--transition-fast); } .reset-memory-btn:hover { background: rgba(198, 161, 91, 0.1); transform: translateY(-1px); } /* ========================================================================== PAGE 7: GUEST BOOK & BLESSINGS ========================================================================== */ .guestbook-section { background: linear-gradient(180deg, var(--color-maroon-dark), var(--color-maroon-deep)); border-radius: var(--radius-md); padding: 16px; color: var(--color-text-light); border: 1px solid var(--color-gold-main); width: 100%; text-align: left; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } /* ========================================================================== PAGE 5: ROYAL WISHES LEDGER STYLING ========================================================================== */ .royal-ledger-section { width: 100%; display: flex; flex-direction: column; height: 100%; padding: 0 4px; } .ledger-header { text-align: center; margin-bottom: 10px; } .ledger-title { font-family: var(--font-heading); font-size: clamp(0.82rem, 2.5vw, 1rem); color: var(--color-maroon-deep); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; } .ledger-divider { color: var(--color-gold-main); font-size: 0.7rem; margin: 3px 0 6px; } .ledger-subtitle { font-family: var(--font-serif); font-size: 0.72rem; color: var(--color-text-muted); font-style: italic; font-weight: 400; letter-spacing: 0.02em; } .stationery-form { display: flex; flex-direction: column; gap: 8px; background: transparent; border: none; padding: 0; margin-bottom: 10px; } .stationery-field { display: flex; flex-direction: column; gap: 2px; } .stationery-label { font-family: var(--font-body); font-size: 0.58rem; letter-spacing: 0.15em; color: var(--color-gold-deep); text-transform: uppercase; font-weight: 500; margin-bottom: 4px; display: block; } .stationery-input, .stationery-textarea { padding: 7px 10px; border-radius: var(--radius-sm); border: 1px solid rgba(198, 161, 91, 0.35); background: #FFFDF9; color: var(--color-maroon-dark); font-family: var(--font-body); font-size: 0.78rem; outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .stationery-input:focus, .stationery-textarea:focus { border-color: var(--color-gold-main); box-shadow: 0 0 8px rgba(198, 161, 91, 0.3); } .ledger-submit-btn { background: linear-gradient(135deg, var(--color-maroon-deep), var(--color-maroon-dark)); color: var(--color-gold-bright); border: 1.2px solid var(--color-gold-main); font-family: var(--font-body); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.2em; padding: 9px 14px; border-radius: var(--radius-full); cursor: pointer; transition: all var(--motion-fast) var(--ease-invitation); text-transform: uppercase; } .ledger-submit-btn:hover { transform: none !important; box-shadow: none !important; border-color: var(--color-gold-bright) !important; letter-spacing: 0.24em !important; opacity: 0.95 !important; } .parchment-wall { flex-grow: 1; overflow: hidden; display: flex; flex-direction: column; border-top: 1px dashed rgba(212, 175, 55, 0.3); padding-top: 8px; } .parchment-wall-title { font-family: var(--font-body); font-size: 0.52rem; color: var(--color-gold-deep); letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; margin-bottom: 6px; text-align: center; } .parchment-list { flex-grow: 1; max-height: 22vh; max-height: 22dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; -webkit-overflow-scrolling: touch; } .parchment-note { background: linear-gradient(135deg, #FFFDF8 0%, #F7EFE2 100%); border: 1px solid rgba(212, 175, 55, 0.4); border-radius: var(--radius-sm); padding: 8px 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } .parchment-note-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; } .parchment-author { font-family: var(--font-title); font-size: 0.78rem; font-weight: 700; color: var(--color-maroon-deep); } .parchment-time { font-family: var(--font-heading); font-size: 0.55rem; color: var(--color-text-muted); } .parchment-text { font-family: var(--font-body); font-size: 0.72rem; color: var(--color-maroon-dark); line-height: 1.3; font-style: italic; } /* ========================================================================== PAGE 7: UNTIL WE MEET GRAND FINALE ========================================================================== */ .until-we-meet-section { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100%; text-align: center; padding: 8px 4px; position: relative; z-index: 5; } .until-header { margin-bottom: 8px; } .until-title { font-family: var(--font-heading); font-size: clamp(0.88rem, 2.8vw, 1.1rem); font-weight: 500; letter-spacing: 0.18em; color: var(--color-maroon-deep); text-transform: uppercase; } .until-divider { color: var(--color-gold-main); font-size: 0.7rem; margin-top: 3px; } .blessing-calligraphy { font-family: var(--font-arabic); font-size: clamp(1.4rem, 5vw, 1.9rem); font-weight: 700; color: var(--color-gold-deep); line-height: 1.85; margin: 16px 0 10px; direction: rtl; letter-spacing: 0.5px; } .blessing-english { font-family: var(--font-serif); font-size: clamp(0.82rem, 2.2vw, 0.95rem); font-style: italic; font-weight: 400; color: var(--color-maroon-dark); line-height: 1.55; max-width: 300px; margin: 0 auto 20px; } .final-family-compliments { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; } .compliment-label { font-family: var(--font-body); font-size: 0.55rem; letter-spacing: 0.25em; color: var(--color-gold-deep); text-transform: uppercase; font-weight: 500; } .family-names { font-family: var(--font-display); font-size: clamp(0.92rem, 2.8vw, 1.1rem); font-weight: 500; color: var(--color-maroon-deep); } .final-monogram-box { margin-bottom: 14px; } .final-monogram-seal { width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--color-gold-bright), var(--color-gold-main) 70%, #9E7C3B 100%); border: 1.5px solid var(--color-gold-bright); display: flex; align-items: center; justify-content: center; margin: 0 auto; box-shadow: 0 4px 14px rgba(198, 161, 91, 0.35); } .monogram-text { font-family: var(--font-heading); font-size: 0.78rem; font-weight: 700; color: var(--color-maroon-deep); letter-spacing: 1px; } .final-share-actions { width: 100%; } .share-invitation-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 18px; background: linear-gradient(135deg, var(--color-maroon-deep), var(--color-maroon-dark)); color: var(--color-gold-bright); border: 1.2px solid var(--color-gold-main); border-radius: var(--radius-full); font-family: var(--font-body); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 16px rgba(66, 10, 24, 0.25); transition: all var(--motion-fast) var(--ease-invitation); } .share-invitation-btn:hover { transform: none !important; box-shadow: 0 4px 16px rgba(66, 10, 24, 0.25) !important; border-color: var(--color-gold-bright) !important; letter-spacing: 0.24em !important; opacity: 0.95 !important; } /* ========================================================================== PARALLAX DECORATIVE FLORAL BACKGROUND LAYERS ========================================================================== */ .parallax-container { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } .parallax-layer { position: absolute; background-repeat: no-repeat; background-size: contain; opacity: 0.12; will-change: transform; } .layer-mandala { top: 50%; left: 50%; width: 360px; height: 360px; margin-left: -180px; margin-top: -180px; opacity: 0.18; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23C6A15B' stroke-width='0.8'%3E%3Ccircle cx='200' cy='200' r='130' stroke-width='1'/%3E%3Ccircle cx='200' cy='200' r='124' stroke-dasharray='3,3' opacity='0.7'/%3E%3Ccircle cx='200' cy='200' r='118'/%3E%3Cpath d='M 180 64 Q 200 40 200 30 Q 200 40 220 64 Z' fill='%23C6A15B' opacity='0.8'/%3E%3Ccircle cx='200' cy='24' r='4' fill='%23C6A15B'/%3E%3Cpath d='M 175 140 L 175 260 M 165 140 L 185 140 M 165 260 L 185 260' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M 180 200 Q 200 170 200 200 Q 200 230 220 200' stroke-width='1.2' opacity='0.8'/%3E%3Cpath d='M 215 140 L 215 260 M 245 140 L 245 260 M 215 200 L 245 200 M 205 140 L 225 140 M 235 140 L 255 140 M 205 260 L 225 260 M 235 260 L 255 260' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M 60 200 Q 80 120 140 80 Q 90 150 110 220 Q 80 270 140 320' stroke-width='1.2'/%3E%3Cpath d='M 90 140 Q 110 130 115 150 Q 100 160 90 140' fill='%23C6A15B' opacity='0.4'/%3E%3Cpath d='M 80 220 Q 95 210 100 230 Q 85 240 80 220' fill='%23C6A15B' opacity='0.4'/%3E%3Ccircle cx='75' cy='180' r='6' fill='%23C6A15B' opacity='0.5'/%3E%3Ccircle cx='105' cy='275' r='5' fill='%23C6A15B' opacity='0.5'/%3E%3Cpath d='M 340 200 Q 320 120 260 80 Q 310 150 290 220 Q 320 270 260 320' stroke-width='1.2'/%3E%3Cpath d='M 310 140 Q 290 130 285 150 Q 300 160 310 140' fill='%23C6A15B' opacity='0.4'/%3E%3Cpath d='M 320 220 Q 305 210 300 230 Q 315 240 320 220' fill='%23C6A15B' opacity='0.4'/%3E%3Ccircle cx='325' cy='180' r='6' fill='%23C6A15B' opacity='0.5'/%3E%3Ccircle cx='295' cy='275' r='5' fill='%23C6A15B' opacity='0.5'/%3E%3Cpath d='M 200 336 L 204 346 L 214 350 L 204 354 L 200 364 L 196 354 L 186 350 L 196 346 Z' fill='%23C6A15B'/%3E%3C/svg%3E"); } .layer-floral-tl { top: -20px; left: -20px; width: 140px; height: 140px; background-image: url('data:image/svg+xml;utf8,'); } .layer-floral-tr { top: -20px; right: -20px; width: 140px; height: 140px; transform: scaleX(-1); background-image: url('data:image/svg+xml;utf8,'); } .layer-floral-bl { bottom: -20px; left: -20px; width: 140px; height: 140px; transform: scaleY(-1); background-image: url('data:image/svg+xml;utf8,'); } .layer-floral-br { bottom: -20px; right: -20px; width: 140px; height: 140px; transform: scale(-1, -1); background-image: url('data:image/svg+xml;utf8,'); } /* ========================================================================== ARISTOCRATIC GUEST REGISTER STYLING (CHAPTER II) ========================================================================== */ .guest-register-section { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 4px; position: relative; z-index: 5; } .register-header { margin-bottom: 14px; text-align: center; width: 100%; } .register-title { font-family: var(--font-heading); font-size: clamp(0.88rem, 2.8vw, 1.08rem); color: var(--color-maroon-deep); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; } .register-divider { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px auto; width: 75%; } .register-divider .divider-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--color-gold-main), transparent); } .register-divider .divider-ornament { color: var(--color-gold-main); font-size: 0.75rem; } .register-subtitle { font-family: var(--font-serif); font-size: 0.72rem; color: var(--color-text-muted); letter-spacing: 0.02em; font-style: italic; font-weight: 400; text-transform: none; } .guest-register-scroll { width: 100%; max-height: 52vh; max-height: 52dvh; overflow-y: auto; padding: 4px 6px; -webkit-overflow-scrolling: touch; } .guest-register-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 14px; width: 100%; } /* TYPE C INTERACTIVE INSET RESPONSE CARDS */ .stationery-blessing-block, .memory-test-section, .royal-ledger-section { background: rgba(255, 253, 248, 0.98); border: 1px solid rgba(198, 161, 91, 0.38); border-radius: 10px; box-shadow: 0 6px 20px rgba(10, 2, 5, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.8); padding: 20px 16px; margin: auto 0; width: 100%; } @media (max-width: 360px) { .guest-register-list { grid-template-columns: 1fr; gap: 10px; } } /* ========================================================================== VISUAL QA POLISH PASS RULES ========================================================================== */ /* ISSUE 2 — Chapter VII 3-Stage Layout & Natural Scroll Flow */ .chapter-vii-scrollable { overflow-y: auto !important; justify-content: flex-start !important; padding-top: 24px !important; padding-bottom: 40px !important; } .closing-stage-spiritual { margin: 8px 0 20px; width: 100%; text-align: center; } .closing-stage-ledger { width: 100%; margin: 16px 0 20px; } .closing-stage-wishes { width: 100%; margin-top: 12px; } /* Guestbook Underline Fields */ .stationery-input-line, .stationery-textarea-line { width: 100%; background: transparent; border: none; border-bottom: 1.5px solid rgba(198, 161, 91, 0.4); font-family: var(--font-body); font-size: 0.82rem; color: var(--color-maroon-dark); padding: 8px 4px; border-radius: 0; transition: border-color 0.3s ease; outline: none; } .stationery-input-line:focus, .stationery-textarea-line:focus { border-bottom-color: var(--color-gold-main); } /* ISSUE 3 — Chapter II Clean Register Entries */ .register-entry { display: flex; align-items: center; justify-content: center; padding: 8px 0; border-bottom: 1px solid rgba(198, 161, 91, 0.18); } .entry-name { font-family: var(--font-display); font-size: clamp(0.82rem, 2.3vw, 0.95rem); font-weight: 500; color: var(--color-maroon-dark); letter-spacing: 0.01em; text-align: center; line-height: 1.35; } /* ISSUE 4 — Interactive Buttons Stationery Styling */ .stationery-petal-btn { background: transparent; color: var(--color-maroon-deep); border: none; border-bottom: 1.5px solid var(--color-gold-main); border-radius: 0; padding: 10px 20px; font-family: var(--font-heading); font-size: 0.72rem; letter-spacing: 2px; font-weight: 600; cursor: pointer; transition: letter-spacing var(--motion-fast) var(--ease-invitation), opacity var(--motion-fast) var(--ease-invitation), border-color var(--motion-fast) var(--ease-invitation), color var(--motion-fast) var(--ease-invitation); display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; margin: 12px auto; will-change: letter-spacing, opacity, border-color, color; } .stationery-petal-btn:hover { color: var(--color-gold-deep) !important; border-bottom-color: var(--color-gold-bright) !important; letter-spacing: 2.3px !important; opacity: 0.95 !important; transform: none !important; box-shadow: none !important; } .btn-opt { background: transparent; border: none; border-bottom: 1px solid rgba(198, 161, 91, 0.3); padding: 10px 8px; border-radius: 0; font-family: var(--font-body); font-size: 0.78rem; color: var(--color-maroon-dark); text-align: left; cursor: pointer; transition: border-color var(--motion-fast) var(--ease-invitation), background var(--motion-fast) var(--ease-invitation), letter-spacing var(--motion-fast) var(--ease-invitation), color var(--motion-fast) var(--ease-invitation); will-change: border-color, background, letter-spacing, color; } .btn-opt:hover { border-bottom-color: var(--color-gold-bright) !important; background: rgba(255, 253, 248, 0.8) !important; letter-spacing: 0.02em !important; } /* ========================================================================== UNIFIED LUXURY MOTION: CHAPTER & COMPONENT REVEALS ========================================================================== */ /* Vertical Scroll Hint Indicator */ .vertical-scroll-hint { display: flex; flex-direction: column; align-items: center; margin-top: 24px; opacity: 0.8; transition: opacity 0.4s var(--ease-invitation); } .vertical-scroll-hint .hint-lead { font-family: var(--font-heading); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.22em; color: var(--color-gold-bright); text-transform: uppercase; margin-bottom: 6px; } .vertical-scroll-hint .scroll-down-icon { color: var(--color-gold-main); animation: scrollBobbing 2s infinite ease-in-out; } @keyframes scrollBobbing { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(7px); opacity: 1; } } /* Horizontal Animation Reveals within Vertical Journey */ .page .bride-name { opacity: 0; transform: translateX(24px); transition: opacity var(--motion-slow) var(--ease-invitation), transform var(--motion-slow) var(--ease-invitation); } .page.active-story .bride-name { opacity: 1; transform: translateX(0); } .page .groom-name { opacity: 0; transform: translateX(-24px); transition: opacity var(--motion-slow) var(--ease-invitation), transform var(--motion-slow) var(--ease-invitation); } .page.active-story .groom-name { opacity: 1; transform: translateX(0); } .page .connector-wrapper .line, .page .register-divider .divider-line { transform: scaleX(0); transform-origin: center; transition: transform var(--motion-slow) var(--ease-invitation); } .page.active-story .connector-wrapper .line, .page.active-story .register-divider .divider-line { transform: scaleX(1); } .page .corner-flourish.top-left, .page .corner-flourish.bottom-left { transform: translateX(-16px); opacity: 0; transition: transform var(--motion-slow) var(--ease-invitation), opacity var(--motion-slow) var(--ease-invitation); } .page .corner-flourish.top-right, .page .corner-flourish.bottom-right { transform: translateX(16px); opacity: 0; transition: transform var(--motion-slow) var(--ease-invitation), opacity var(--motion-slow) var(--ease-invitation); } .page.active-story .corner-flourish { transform: translateX(0); opacity: 0.85; } /* Chapter II Staggered Ripple Reveal */ .register-entry { opacity: 0; transform: translateY(12px); transition: opacity var(--motion-medium) var(--ease-invitation), transform var(--motion-medium) var(--ease-invitation); will-change: opacity, transform; } .page.active-story .register-entry { opacity: 1; transform: translateY(0); } .page.active-story .register-entry:nth-child(1) { transition-delay: 100ms; } .page.active-story .register-entry:nth-child(2) { transition-delay: 180ms; } .page.active-story .register-entry:nth-child(3) { transition-delay: 260ms; } .page.active-story .register-entry:nth-child(4) { transition-delay: 340ms; } .page.active-story .register-entry:nth-child(5) { transition-delay: 420ms; } .page.active-story .register-entry:nth-child(6) { transition-delay: 500ms; } .page.active-story .register-entry:nth-child(7) { transition-delay: 580ms; } .page.active-story .register-entry:nth-child(8) { transition-delay: 660ms; } /* Chapter III Scratch-Reveal Focus Effect */ .scratch-wrapper .revealed-content .editorial-day-num, .scratch-wrapper .revealed-content .editorial-month-name, .scratch-wrapper .revealed-content .editorial-year-num, .scratch-wrapper .revealed-content .editorial-hairline, .scratch-wrapper .revealed-content .editorial-meta-line { opacity: 0; filter: blur(8px); transform: translateY(8px) scale(0.97); transition: opacity var(--motion-medium) var(--ease-invitation), filter var(--motion-medium) var(--ease-invitation), transform var(--motion-medium) var(--ease-invitation); will-change: opacity, filter, transform; } .scratch-wrapper.scratched .revealed-content .editorial-day-num { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); transition-delay: 100ms; } .scratch-wrapper.scratched .revealed-content .editorial-month-name { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); transition-delay: 220ms; } .scratch-wrapper.scratched .revealed-content .editorial-year-num { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); transition-delay: 340ms; } .scratch-wrapper.scratched .revealed-content .editorial-hairline { opacity: 0.65; filter: blur(0); transform: translateY(0) scale(1); transition-delay: 460ms; } .scratch-wrapper.scratched .revealed-content .editorial-meta-line { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); transition-delay: 580ms; } .scratch-card-section { transition: transform var(--motion-slow) var(--ease-invitation), box-shadow var(--motion-slow) var(--ease-invitation), border-color var(--motion-slow) var(--ease-invitation); will-change: transform, box-shadow, border-color; } .scratch-card-section:has(.scratch-wrapper.scratched) { border-color: var(--color-gold-bright); box-shadow: 0 12px 36px rgba(198, 161, 91, 0.18); transform: scale(1.01); } /* Chapter IV Internal Editorial Reveal */ .formal-venue-card .venue-crest, .formal-venue-card .venue-header, .formal-venue-card .venue-details, .formal-venue-card .venue-datetime-flow, .formal-venue-card .venue-destination-actions { opacity: 0; transform: translateY(10px); transition: opacity var(--motion-medium) var(--ease-invitation), transform var(--motion-medium) var(--ease-invitation); will-change: opacity, transform; } .page.active-story .formal-venue-card .venue-crest { opacity: 1; transform: translateY(0); transition-delay: 150ms; } .page.active-story .formal-venue-card .venue-header { opacity: 1; transform: translateY(0); transition-delay: 250ms; } .page.active-story .formal-venue-card .venue-details { opacity: 0.85; transform: translateY(0); transition-delay: 350ms; } .page.active-story .formal-venue-card .venue-datetime-flow { opacity: 1; transform: translateY(0); transition-delay: 450ms; } .page.active-story .formal-venue-card .venue-destination-actions { opacity: 1; transform: translateY(0); transition-delay: 550ms; } /* Chapter VI Internal Editorial Reveal & Question Transitions */ .memory-test-section .memory-header, .memory-test-section .memory-body { opacity: 0; transform: translateY(12px); transition: opacity var(--motion-medium) var(--ease-invitation), transform var(--motion-medium) var(--ease-invitation); will-change: opacity, transform; } .page.active-story .memory-test-section .memory-header { opacity: 1; transform: translateY(0); transition-delay: 150ms; } .page.active-story .memory-test-section .memory-body { opacity: 1; transform: translateY(0); transition-delay: 300ms; } @keyframes questionFadeIn { 0% { opacity: 0; transform: translateY(12px); filter: blur(3px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } } .trivia-q { display: none; } .trivia-q.active { display: block; animation: questionFadeIn var(--motion-medium) var(--ease-invitation) forwards; } @keyframes resultFadeIn { 0% { opacity: 0; transform: translateY(12px); filter: blur(3px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes resultReveal { 0% { opacity: 0; transform: translateY(14px) scale(0.96); filter: blur(4px); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } .trivia-result:not(.hidden) { animation: resultReveal 0.5s var(--ease-invitation) forwards; } .reset-memory-btn { background: transparent; border: 1.2px solid var(--color-gold-main); color: var(--color-maroon-deep); font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700; letter-spacing: 1.5px; padding: 8px 18px; border-radius: var(--radius-full); cursor: pointer; transition: all var(--motion-fast) var(--ease-invitation); } .reset-memory-btn:hover { background: rgba(198, 161, 91, 0.12) !important; border-color: var(--color-gold-bright) !important; transform: none !important; letter-spacing: 1.8px !important; opacity: 0.95 !important; } /* ========================================================================== ROYAL DECORATION SYSTEM — PARCHMENT TEXTURE OVERLAY ========================================================================== */ .parchment-texture-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 0; border-radius: inherit; opacity: 0.35; background-image: /* Warm inner light glow */ radial-gradient(ellipse at 50% 25%, rgba(255, 248, 230, 0.5) 0%, transparent 55%), /* Subtle aged-paper darkening on edges */ radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(180, 160, 120, 0.18) 100%), /* Fine noise-like grain texture */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"); mix-blend-mode: multiply; } /* Inner gold border frame — engraved stationery feel */ .page-inner::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(198, 161, 91, 0.2); border-radius: 2px; pointer-events: none; z-index: 1; } /* ========================================================================== ROYAL DECORATION SYSTEM — MUGHAL PALACE ARCHITECTURE ART ========================================================================== */ .card-bg-layer { position: absolute; pointer-events: none; z-index: 0; } .card-palace-art { bottom: 0; left: 0; right: 0; height: 55%; opacity: 0.1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 300' fill='none' stroke='%23B8943E' stroke-width='0.7'%3E%3Cpath d='M340 60 Q340 15 370 10 Q400 5 400 10 Q400 5 430 10 Q460 15 460 60'/%3E%3Cpath d='M360 60 Q360 28 400 22 Q440 28 440 60'/%3E%3Crect x='320' y='60' width='160' height='140' rx='1'/%3E%3Cpath d='M355 200 Q400 140 445 200'/%3E%3Cpath d='M370 200 Q400 160 430 200'/%3E%3Cpath d='M395 8 Q399 2 403 6' fill='%23B8943E'/%3E%3Crect x='245' y='50' width='22' height='155' rx='1'/%3E%3Cpath d='M245 50 Q256 20 267 50'/%3E%3Cpath d='M253 18 L256 8 L259 18'/%3E%3Crect x='533' y='50' width='22' height='155' rx='1'/%3E%3Cpath d='M533 50 Q544 20 555 50'/%3E%3Cpath d='M541 18 L544 8 L547 18'/%3E%3Cpath d='M190 100 Q190 65 215 60 Q240 65 240 100'/%3E%3Crect x='190' y='100' width='50' height='105' rx='1'/%3E%3Cpath d='M198 205 Q215 165 232 205'/%3E%3Cpath d='M210 58 L215 48 L220 58'/%3E%3Cpath d='M560 100 Q560 65 585 60 Q610 65 610 100'/%3E%3Crect x='560' y='100' width='50' height='105' rx='1'/%3E%3Cpath d='M568 205 Q585 165 602 205'/%3E%3Cpath d='M580 58 L585 48 L590 58'/%3E%3Cpath d='M120 140 Q120 112 145 108 Q170 112 170 140'/%3E%3Crect x='120' y='140' width='50' height='65' rx='1'/%3E%3Cpath d='M128 205 Q145 175 162 205'/%3E%3Cpath d='M630 140 Q630 112 655 108 Q680 112 680 140'/%3E%3Crect x='630' y='140' width='50' height='65' rx='1'/%3E%3Cpath d='M638 205 Q655 175 672 205'/%3E%3Crect x='80' y='170' width='30' height='35' rx='1'/%3E%3Cpath d='M80 170 Q95 148 110 170'/%3E%3Crect x='690' y='170' width='30' height='35' rx='1'/%3E%3Cpath d='M690 170 Q705 148 720 170'/%3E%3Cline x1='50' y1='205' x2='750' y2='205'/%3E%3Cpath d='M285 200 Q300 182 315 200'/%3E%3Cpath d='M485 200 Q500 182 515 200'/%3E%3Cpath d='M340 60 L340 48 L342 40 L344 48 L344 60'/%3E%3Cpath d='M456 60 L456 48 L458 40 L460 48 L460 60'/%3E%3Ccircle cx='400' cy='42' r='3' opacity='0.4' fill='%23B8943E'/%3E%3Cpath d='M50 205 L50 190 Q65 180 80 190 L80 205'/%3E%3Cpath d='M720 205 L720 190 Q735 180 750 190 L750 205'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center bottom; background-size: 110% auto; } /* ========================================================================== ROYAL DECORATION SYSTEM — GOLD FLORAL CORNER ART ========================================================================== */ .card-floral-art { inset: 0; opacity: 0.11; background-image: /* Top-left royal rose vine corner */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' fill='none' stroke='%23C6A15B' stroke-width='0.8'%3E%3Cpath d='M10 5 Q30 20 20 50 Q40 30 65 25 Q45 40 55 70 Q75 45 95 40' /%3E%3Cpath d='M20 50 Q5 70 15 95' /%3E%3Ccircle cx='25' cy='25' r='7' fill='%23C6A15B' opacity='0.35'/%3E%3Ccircle cx='38' cy='42' r='4' fill='%23C6A15B' opacity='0.25'/%3E%3Cpath d='M5 65 Q25 75 18 100' /%3E%3Ccircle cx='15' cy='82' r='5' fill='%23C6A15B' opacity='0.2'/%3E%3C/svg%3E"), /* Top-right royal rose vine corner (mirrored) */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' fill='none' stroke='%23C6A15B' stroke-width='0.8'%3E%3Cg transform='translate(140 0) scale(-1 1)'%3E%3Cpath d='M10 5 Q30 20 20 50 Q40 30 65 25 Q45 40 55 70 Q75 45 95 40' /%3E%3Cpath d='M20 50 Q5 70 15 95' /%3E%3Ccircle cx='25' cy='25' r='7' fill='%23C6A15B' opacity='0.35'/%3E%3Ccircle cx='38' cy='42' r='4' fill='%23C6A15B' opacity='0.25'/%3E%3C/g%3E%3C/svg%3E"), /* Bottom-left royal rose vine corner (flipped vertically) */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' fill='none' stroke='%23C6A15B' stroke-width='0.8'%3E%3Cg transform='translate(0 140) scale(1 -1)'%3E%3Cpath d='M10 5 Q30 20 20 50 Q40 30 65 25 Q45 40 55 70' /%3E%3Ccircle cx='25' cy='25' r='7' fill='%23C6A15B' opacity='0.35'/%3E%3C/g%3E%3C/svg%3E"), /* Bottom-right royal rose vine corner (flipped both axes) */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' fill='none' stroke='%23C6A15B' stroke-width='0.8'%3E%3Cg transform='translate(140 140) scale(-1 -1)'%3E%3Cpath d='M10 5 Q30 20 20 50 Q40 30 65 25 Q45 40 55 70' /%3E%3Ccircle cx='25' cy='25' r='7' fill='%23C6A15B' opacity='0.35'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: top left, top right, bottom left, bottom right; background-size: 110px 110px; } /* ========================================================================== ROYAL DECORATION SYSTEM — RESTING ROSE PETALS (CSS-ONLY) ========================================================================== */ .card-resting-petals { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: visible; } .resting-petal { position: absolute; width: 22px; height: 28px; border-radius: 50% 50% 50% 0; background: radial-gradient(ellipse at 40% 30%, #A82035 0%, #7A1528 50%, #5A0E1D 100%); box-shadow: 1px 2px 5px rgba(24, 7, 12, 0.35); opacity: 0; animation: petalRestFloat 12s ease-in-out infinite; } /* Petals near top-right corner */ .petal-tr-1 { top: -4px; right: 18px; width: 18px; height: 23px; transform: rotate(42deg); opacity: 0.85; animation-delay: 0s; } .petal-tr-2 { top: 30px; right: -6px; width: 15px; height: 20px; transform: rotate(-28deg); opacity: 0.75; animation-delay: -4s; } /* Petals near bottom-left corner */ .petal-bl-1 { bottom: 20px; left: -8px; width: 20px; height: 26px; transform: rotate(65deg); opacity: 0.8; animation-delay: -7s; } /* Petals near bottom-right corner */ .petal-br-1 { bottom: -5px; right: 30px; width: 17px; height: 22px; transform: rotate(-55deg); opacity: 0.82; animation-delay: -2s; } .petal-br-2 { bottom: 35px; right: -4px; width: 14px; height: 18px; transform: rotate(15deg); opacity: 0.7; animation-delay: -9s; } /* Gentle breathing for resting petals — barely perceptible */ @keyframes petalRestFloat { 0%, 100% { transform: var(--petal-base-rotate, rotate(0deg)) translateY(0) translateX(0); opacity: var(--petal-base-opacity, 0.8); } 25% { transform: var(--petal-base-rotate, rotate(0deg)) translateY(-2px) translateX(1px) rotate(2deg); } 50% { transform: var(--petal-base-rotate, rotate(0deg)) translateY(-1px) translateX(-1px); opacity: calc(var(--petal-base-opacity, 0.8) * 0.9); } 75% { transform: var(--petal-base-rotate, rotate(0deg)) translateY(1px) translateX(2px) rotate(-1deg); } } /* Override to make resting petals visible (they default to opacity:0 then animate) */ .card-resting-petals .resting-petal { opacity: 0.8; } /* ========================================================================== ROYAL DECORATION SYSTEM — FLOATING BREEZE PETAL CONTAINER & ANIMATIONS ========================================================================== */ .petal-breeze-container { position: fixed; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; } .breeze-petal { position: absolute; border-radius: 50% 50% 50% 0; pointer-events: none; will-change: transform, opacity; animation: petalBreeze var(--petal-duration, 14s) var(--petal-delay, 0s) ease-in-out infinite; opacity: 0; } /* Multiple petal breeze keyframes for variety */ @keyframes petalBreeze { 0% { opacity: 0; transform: translate(var(--petal-start-x, 0px), -40px) rotate(0deg) scale(0.7); } 8% { opacity: var(--petal-max-opacity, 0.75); } 25% { transform: translate(calc(var(--petal-start-x, 0px) + 30px), 22vh) rotate(45deg) scale(1); } 50% { transform: translate(calc(var(--petal-start-x, 0px) - 15px), 48vh) rotate(120deg) scale(0.95); opacity: var(--petal-max-opacity, 0.75); } 75% { transform: translate(calc(var(--petal-start-x, 0px) + 20px), 72vh) rotate(200deg) scale(0.85); opacity: calc(var(--petal-max-opacity, 0.75) * 0.6); } 100% { transform: translate(calc(var(--petal-start-x, 0px) + 10px), 105vh) rotate(310deg) scale(0.6); opacity: 0; } } @keyframes petalBreezeAlt { 0% { opacity: 0; transform: translate(var(--petal-start-x, 0px), -30px) rotate(20deg) scale(0.8); } 10% { opacity: var(--petal-max-opacity, 0.7); } 30% { transform: translate(calc(var(--petal-start-x, 0px) - 40px), 28vh) rotate(90deg) scale(1.05); } 60% { transform: translate(calc(var(--petal-start-x, 0px) + 25px), 58vh) rotate(180deg) scale(0.9); opacity: var(--petal-max-opacity, 0.7); } 85% { transform: translate(calc(var(--petal-start-x, 0px) - 10px), 85vh) rotate(260deg) scale(0.75); opacity: calc(var(--petal-max-opacity, 0.7) * 0.4); } 100% { transform: translate(calc(var(--petal-start-x, 0px) + 5px), 108vh) rotate(340deg) scale(0.5); opacity: 0; } } @keyframes petalBreezeEdge { 0%, 100% { opacity: 0; transform: translate(0, 0) rotate(0deg); } 15% { opacity: var(--petal-max-opacity, 0.6); } 30% { transform: translate(8px, -12px) rotate(15deg); } 50% { opacity: var(--petal-max-opacity, 0.6); transform: translate(-5px, -6px) rotate(-8deg); } 70% { transform: translate(10px, -15px) rotate(20deg); } 85% { opacity: calc(var(--petal-max-opacity, 0.6) * 0.5); } } /* ========================================================================== ROYAL DECORATION SYSTEM — EDGE AGED PAPER TREATMENT ========================================================================== */ /* Top and bottom paper edges — worn/rough stationery feel */ .page-inner::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; border-radius: inherit; box-shadow: /* Soft vignette at edges */ inset 0 3px 8px rgba(200, 180, 140, 0.15), inset 0 -3px 8px rgba(180, 155, 110, 0.12), inset 3px 0 8px rgba(190, 170, 130, 0.08), inset -3px 0 8px rgba(190, 170, 130, 0.08); } /* ========================================================================== MOBILE RESPONSIVE — DECORATION ADJUSTMENTS ========================================================================== */ @media (max-width: 768px) { .page { min-height: 100vh; min-height: 100dvh; scroll-snap-align: center; scroll-snap-stop: always; padding: 36px 14px 28px; } .page[data-page="0"] { min-height: 100vh; min-height: 100dvh; padding: 36px 14px 24px; } .page-inner { max-width: 100%; } .formal-venue-card { padding: 28px 18px; margin: 10px auto; } .scratch-card-section { padding: 16px 12px; margin: 6px auto; } .editorial-venue-title { font-size: clamp(1.35rem, 5vw, 1.8rem); } } @media (max-width: 430px) { .layer-mandala { width: 300px; height: 300px; margin-left: -150px; margin-top: -150px; opacity: 0.16; } .card-palace-art { height: 45%; opacity: 0.07; } .card-floral-art { opacity: 0.06; background-size: 65px 65px; } .resting-petal { transform: scale(0.8); } .petal-tr-2, .petal-br-2 { display: none; } } @media (max-width: 360px) { .card-palace-art { height: 35%; opacity: 0.05; } .card-floral-art { background-size: 50px 50px; opacity: 0.05; } .petal-bl-1 { display: none; } } /* ========================================================================== ACCESSIBILITY: PREFERS-REDUCED-MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .parallax-layer { transform: none !important; } .seal-pulse, .tap-hand { animation: none !important; } .breeze-petal, .resting-petal { animation: none !important; opacity: 0 !important; } } /* Responsive Desktop Folio Scaling */ @media (min-width: 768px) { .page-inner.archetype-ceremonial { max-width: 500px; padding: 44px 32px; } .page-inner.archetype-editorial { max-width: 620px; padding: 36px 36px; } .page-inner.archetype-interactive { max-width: 540px; padding: 32px 28px; } }