*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
–black: #0a0806;
–deep: #110e0a;
–charcoal: #1c1712;
–gold: #d4b06a;
–gold-light: #ecd68a;
–gold-dim: #9a7a48;
–cream: #f0e8d8;
–muted: #8a7a66;
–rose: #6b2d3e;
–rose-dark: #3d1520;
}
html { 
scroll-behavior: smooth;
color-scheme: dark;
}
body {
background: var(–black);
color: var(–cream);
font-family: 'EB Garamond', Georgia, serif;
overflow-x: hidden;
}
/* ── NOISE TEXTURE OVERLAY ── */
body::before {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
opacity: 0.35;
pointer-events: none;
z-index: 1000;
animation: noiseMove 20s ease-in-out infinite;
}
/* ── FIREWORKS LOAD OVERLAY ── */
#fireworks-overlay {
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
}
#fireworks-overlay canvas {
display: block;
width: 100%;
height: 100%;
}
#fireworks-overlay.fireworks-done {
opacity: 0;
transition: opacity 0.8s ease;
}
/* ── HERO ── */
.hero {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 60px 24px;
overflow: hidden;
}
.hero-bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 60% at 50% 0%, #3d1520 0%, transparent 60%),
radial-gradient(ellipse 60% 40% at 20% 100%, #1a0d14 0%, transparent 55%),
radial-gradient(ellipse 50% 30% at 80% 90%, #2a1008 0%, transparent 50%),
var(–black);
animation: gradientShift 25s ease-in-out infinite;
}
.hero-bg::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 50% at 30% 20%, rgba(61,21,32,0.4) 0%, transparent 50%),
radial-gradient(ellipse 50% 35% at 70% 80%, rgba(26,16,20,0.3) 0%, transparent 45%),
radial-gradient(ellipse 40% 25% at 10% 50%, rgba(42,16,8,0.25) 0%, transparent 40%);
animation: gradientPulse 15s ease-in-out infinite;
opacity: 0.6;
}
.hero-bg::after {
content: '';
position: absolute;
inset: 0;
background-image: 
radial-gradient(circle at 20% 30%, rgba(212,176,106,0.20) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(236,214,138,0.16) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(212,176,106,0.14) 0%, transparent 60%);
animation: shimmer 18s ease-in-out infinite;
}
/* ── FLOATING PARTICLES ── */
.hero::before {
content: '';
position: absolute;
inset: 0;
background-image: 
radial-gradient(2px 2px at 20% 30%, rgba(212,176,106,0.55), transparent),
radial-gradient(1px 1px at 60% 70%, rgba(236,214,138,0.70), transparent),
radial-gradient(1.5px 1.5px at 80% 20%, rgba(212,176,106,0.50), transparent),
radial-gradient(2px 2px at 40% 80%, rgba(107,45,62,0.45), transparent),
radial-gradient(1px 1px at 10% 50%, rgba(212,176,106,0.60), transparent),
radial-gradient(1.5px 1.5px at 90% 60%, rgba(236,214,138,0.55), transparent);
background-size: 200% 200%;
background-position: 0% 0%, 100% 50%, 50% 100%, 0% 100%, 100% 0%, 50% 50%;
animation: particlesFloat 30s ease-in-out infinite;
opacity: 0.6;
pointer-events: none;
z-index: 1;
}
/* ── SVG floral corners ── */
.floral-tl, .floral-tr, .floral-bl, .floral-br {
position: absolute;
width: 480px;
height: 480px;
opacity: 0.9;
pointer-events: none;
filter: drop-shadow(0 0 14px rgba(212,176,106,0.5));
}
.floral-tl {
top: -40px;
left: -40px;
transform: rotate(0deg);
animation: floatTL 12s ease-in-out infinite;
}
.floral-tr {
top: -40px;
right: -40px;
transform: rotate(90deg);
animation: floatTR 14s ease-in-out infinite;
}
.floral-bl {
bottom: -40px;
left: -40px;
transform: rotate(270deg);
animation: floatBL 13s ease-in-out infinite;
}
.floral-br {
bottom: -40px;
right: -40px;
transform: rotate(180deg);
animation: floatBR 15s ease-in-out infinite;
}
.hero-content { position: relative; z-index: 2; }
.hero-eyebrow {
font-family: 'Cinzel', serif;
font-size: 0.82rem;
letter-spacing: 0.35em;
color: var(–gold-dim);
text-transform: uppercase;
margin-bottom: 28px;
opacity: 0;
animation: fadeUp 1s ease 0.3s forwards;
}
.hero-names {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(4rem, 12vw, 9rem);
font-weight: 300;
line-height: 0.9;
color: var(–cream);
letter-spacing: -0.01em;
opacity: 0;
animation: fadeUp 1.2s ease 0.5s forwards;
}
.hero-names em {
font-style: italic;
color: var(–gold-light);
}
.hero-amp {
display: block;
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-size: clamp(2rem, 5vw, 3.5rem);
color: var(–gold-dim);
margin: 8px 0;
}
.hero-divider {
display: flex;
align-items: center;
gap: 16px;
justify-content: center;
margin: 36px auto;
opacity: 0;
animation: fadeUp 1s ease 0.9s forwards;
}
.hero-divider-line {
width: 80px;
height: 1px;
background: linear-gradient(to right, transparent, var(–gold-dim));
position: relative;
}
.hero-divider-line::before {
content: '❀';
position: absolute;
left: -8px;
top: 50%;
transform: translateY(-50%);
font-size: 0.5rem;
color: var(–gold);
opacity: 0.9;
}
.hero-divider-line::after {
content: '❀';
position: absolute;
right: -8px;
top: 50%;
transform: translateY(-50%);
font-size: 0.5rem;
color: var(–gold);
opacity: 0.9;
}
.hero-divider-line:last-child {
background: linear-gradient(to left, transparent, var(–gold-dim));
}
.hero-divider-icon { color: var(–gold); font-size: 1.1rem; }
.hero-date {
font-family: 'Cinzel', serif;
font-size: clamp(0.875rem, 2vw, 1.05rem);
letter-spacing: 0.25em;
color: var(–gold);
text-transform: uppercase;
opacity: 0;
animation: fadeUp 1s ease 1.1s forwards;
}
.hero-venue {
font-family: 'EB Garamond', Georgia, serif;
font-style: italic;
font-size: clamp(1.1rem, 2.5vw, 1.45rem);
color: var(–muted);
margin-top: 10px;
opacity: 0;
animation: fadeUp 1s ease 1.3s forwards;
}
.hero-scroll {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
opacity: 0;
animation: fadeUp 1s ease 2s forwards;
z-index: 2;
}
.scroll-label {
font-family: 'Cinzel', serif;
font-size: 0.72rem;
letter-spacing: 0.3em;
color: var(–gold-dim);
}
.scroll-line {
width: 1px;
height: 48px;
background: linear-gradient(to bottom, var(–gold-dim), transparent);
animation: scrollPulse 2s ease-in-out infinite;
}
/* ── SECTION BASE ── */
section {
position: relative;
padding: 100px 24px;
max-width: 900px;
margin: 0 auto;
}
section::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 1px;
background: linear-gradient(to right, transparent, var(–gold-dim) 20%, var(–gold-dim) 80%, transparent);
}
section::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 1px;
background: linear-gradient(to right, transparent, var(–gold-dim) 20%, var(–gold-dim) 80%, transparent);
}
.section-label {
font-family: 'Cinzel', serif;
font-size: 0.78rem;
letter-spacing: 0.4em;
color: var(–gold-dim);
text-transform: uppercase;
text-align: center;
margin-bottom: 16px;
}
.section-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(2.2rem, 5vw, 3.5rem);
font-weight: 300;
text-align: center;
color: var(–cream);
line-height: 1.1;
margin-bottom: 48px;
}
.section-title em { font-style: italic; color: var(–gold-light); }
.section-date {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.25rem;
font-weight: 300;
color: var(–gold);
text-align: center;
margin: -24px 0 20px;
letter-spacing: 0.02em;
text-shadow:
0 0 12px rgba(212,176,106,0.8),
0 0 24px rgba(212,176,106,0.5),
0 0 36px rgba(212,176,106,0.3);
}
.section-date-floral {
font-size: 0.6rem;
opacity: 0.9;
margin: 0 0.35em;
vertical-align: middle;
}
.section-date-time {
color: var(–gold-light);
font-weight: 400;
letter-spacing: 0.08em;
}
.gold-rule {
width: 60px;
height: 1px;
background: var(–gold-dim);
margin: 0 auto 48px;
position: relative;
}
.gold-rule::before {
content: '❀';
position: absolute;
left: -12px;
top: 50%;
transform: translateY(-50%);
font-size: 0.4rem;
color: var(–gold);
opacity: 1;
}
.gold-rule::after {
content: '❀';
position: absolute;
right: -12px;
top: 50%;
transform: translateY(-50%);
font-size: 0.4rem;
color: var(–gold);
opacity: 1;
}
/* ── FULL-WIDTH SEPARATOR ── */
.separator {
position: relative;
width: 100%;
height: 1px;
background: linear-gradient(to right, transparent, var(–gold-dim) 30%, var(–gold-dim) 70%, transparent);
margin: 0 auto;
max-width: 600px;
display: block;
}
.separator::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
background-image: radial-gradient(circle, var(–rose-dark) 0%, transparent 70%);
opacity: 0.3;
}
.separator::after {
content: '❀ ❀ ❀';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 0.5rem;
color: var(–gold);
opacity: 0.9;
letter-spacing: 0.5em;
background: var(–black);
padding: 0 8px;
}
/* ── CEREMONY & CELEBRATION ── */
.ceremony-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
background: var(–gold-dim);
border: 1px solid var(–gold-dim);
margin-top: 0;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.day-tile {
background: #3d1520;
padding: 40px 28px;
text-align: center;
position: relative;
border: 1px solid transparent;
box-shadow: inset 0 0 0 1px #c9a96e;
cursor: pointer;
user-select: none;
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.day-tile:hover {
transform: translateY(-2px);
background: #4a1a28;
box-shadow: inset 0 0 0 2px #c9a96e, 0 8px 24px rgba(0,0,0,0.3);
}
.day-tile:focus {
outline: 1px solid var(–gold-dim);
outline-offset: 2px;
}
.day-tile:focus:not(:focus-visible) {
outline: none;
}
.day-tile-corners {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
}
.day-tile-corners::before,
.day-tile-corners::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-color: #c9a96e;
border-style: solid;
border-width: 0;
pointer-events: none;
transition: border-color 0.25s ease;
}
.day-tile-corners-left::before {
top: 8px;
left: 8px;
border-top-width: 1.5px;
border-left-width: 1.5px;
}
.day-tile-corners-left::after {
bottom: 8px;
left: 8px;
border-bottom-width: 1.5px;
border-left-width: 1.5px;
}
.day-tile-corners-right::before {
top: 8px;
right: 8px;
border-top-width: 1.5px;
border-right-width: 1.5px;
}
.day-tile-corners-right::after {
bottom: 8px;
right: 8px;
border-bottom-width: 1.5px;
border-right-width: 1.5px;
}
.day-tile:hover .day-tile-corners::before,
.day-tile:hover .day-tile-corners::after {
border-color: #e2c99a;
}
.day-tile::before {
content: '';
position: absolute;
inset: 0;
border: 1px solid rgba(201,154,110,0.4);
opacity: 0.5;
pointer-events: none;
transition: opacity 0.25s ease;
}
.day-tile.expanded::before {
opacity: 0.7;
}
.day-tile::after {
content: '';
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 1px;
background: #c9a96e;
opacity: 0.8;
transition: width 0.25s ease;
}
.day-tile.expanded::after {
width: 60px;
}
.day-tile-summary {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.day-tile-text {
text-align: center;
}
.day-tile-icon {
font-size: 1.6rem;
line-height: 1;
display: block;
color: #e2c99a;
/* Align emoji with first line - emojis often sit low, nudge up to match Ceremony/Celebration text */
margin-top: -0.12em;
}
.day-tile-type {
font-family: 'Cinzel', serif;
font-size: 0.95rem;
letter-spacing: 0.35em;
color: #e2c99a;
text-transform: uppercase;
margin-bottom: 8px;
}
.day-tile-datetime {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.25rem;
font-weight: 300;
color: #e2c99a;
}
.day-tile-hint {
display: block;
font-size: 0.7rem;
letter-spacing: 0.2em;
color: rgba(201,154,110,0.7);
text-transform: uppercase;
margin-top: 10px;
}
.day-tile.expanded .day-tile-hint {
visibility: hidden;
}
.day-tile-chevron {
font-size: 0.75rem;
color: #e2c99a;
transition: transform 0.3s ease;
}
.day-tile.expanded .day-tile-chevron {
transform: rotate(180deg);
}
.day-tile-detail {
font-size: 1.05rem;
color: rgba(226,201,154,0.9);
line-height: 1.9;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
}
.day-tile.expanded .day-tile-detail {
max-height: 280px;
}
.day-tile-name {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.6rem;
font-weight: 300;
color: #e2c99a;
margin-bottom: 16px;
margin-top: 20px;
}
.day-tile-detail strong {
color: #e2c99a;
font-weight: 400;
}
/* Celebration flow: line segments only in gaps between items, animates top→bottom */
.celebration-flow .celebration-flow-inner {
display: flex;
flex-direction: column;
gap: 0;
}
.celebration-item {
display: block;
font-size: 1.05rem;
color: rgba(226,201,154,0.9);
line-height: 1.6;
padding: 0.15em 0;
opacity: 0;
transform: translateX(-6px);
}
.day-tile.expanded .celebration-item {
animation: celebration-item-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.celebration-item:nth-of-type(1) { animation-delay: 0.1s; }
.celebration-item:nth-of-type(2) { animation-delay: 0.2s; }
.celebration-item:nth-of-type(3) { animation-delay: 0.3s; }
.celebration-item:nth-of-type(4) { animation-delay: 0.4s; }
.celebration-item:nth-of-type(5) { animation-delay: 0.5s; }
@keyframes celebration-item-in {
to { opacity: 1; transform: translateX(0); }
}
.celebration-connector {
display: flex;
align-items: center;
justify-content: center;
align-self: center;
padding: 0.25em 0;
transform-origin: center;
transform: scale(0);
opacity: 0;
animation: none;
}
.celebration-arrow {
display: block;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid #c9a96e;
filter: drop-shadow(0 0 6px rgba(201,169,110,0.9)) drop-shadow(0 0 12px rgba(201,169,110,0.6)) drop-shadow(0 0 20px rgba(201,169,110,0.4));
}
.day-tile.expanded .celebration-connector {
animation: celebration-connector-reveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.celebration-connector:nth-of-type(1) { animation-delay: 0.15s; }
.celebration-connector:nth-of-type(2) { animation-delay: 0.3s; }
.celebration-connector:nth-of-type(3) { animation-delay: 0.45s; }
.celebration-connector:nth-of-type(4) { animation-delay: 0.6s; }
@keyframes celebration-connector-reveal {
0% { transform: scale(0); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
/* ── VIDEO ── */
.videos-section { background: var(–deep); padding: 80px 24px; margin: 0; max-width: 100%; }
.videos-inner { max-width: 900px; margin: 0 auto; }
.video-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 0;
}
.video-wrapper {
position: relative;
aspect-ratio: 16/9;
background: var(–charcoal);
border: 1px solid #2a2018;
overflow: hidden;
}
.video-wrapper iframe {
width: 100%;
height: 100%;
border: none;
display: block;
}
.video-placeholder {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
cursor: pointer;
color: var(–muted);
background: var(–charcoal);
border: 1px dashed var(–gold-dim);
font-style: italic;
font-size: 0.95rem;
text-align: center;
padding: 20px;
}
.video-placeholder span { font-size: 2rem; opacity: 0.5; }
.video-caption {
font-family: 'Cinzel', serif;
font-size: 0.72rem;
letter-spacing: 0.3em;
color: var(–gold-dim);
text-transform: uppercase;
text-align: center;
margin-top: 12px;
}
/* ── CAROUSEL ── */
.carousel-wrap {
position: relative;
margin-top: 48px;
max-width: 100%;
}
.carousel-wrap::before {
content: '❀ ❀ ❀';
position: absolute;
left: 50%;
top: -14px;
transform: translateX(-50%);
font-size: 0.4rem;
color: var(–gold);
opacity: 0.9;
letter-spacing: 0.4em;
}
.carousel-frame {
position: relative;
padding: 14px;
background: linear-gradient(135deg, #1a1510 0%, #0f0c08 50%, #1a1510 100%);
border: 3px solid var(–gold);
border-radius: 20px;
box-shadow:
  0 0 0 1px var(–gold-dim),
  0 0 0 4px rgba(154,122,72,0.3),
  0 0 24px rgba(212,176,106,0.2),
  0 12px 40px rgba(0,0,0,0.5),
  inset 0 0 40px rgba(61,21,32,0.2);
}
.carousel-frame::before {
content: '';
position: absolute;
inset: 8px;
border: 1px solid rgba(212,176,106,0.35);
border-radius: 12px;
pointer-events: none;
}
.frame-corner {
position: absolute;
width: 48px;
height: 48px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
pointer-events: none;
z-index: 4;
opacity: 0.95;
}
/* Floral corner SVG: vine with leaves and small flower */
.frame-tl {
top: 4px;
left: 4px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M4 44 Q4 24 24 4' stroke='%23d4b06a' stroke-width='1.5' fill='none'/%3E%3Cellipse fill='%23d4b06a' cx='8' cy='36' rx='4' ry='6' transform='rotate(-30 8 36)'/%3E%3Cellipse fill='%23ecd68a' cx='12' cy='28' rx='3' ry='5' transform='rotate(-20 12 28)'/%3E%3Cellipse fill='%23d4b06a' cx='18' cy='18' rx='3.5' ry='5.5' transform='rotate(-10 18 18)'/%3E%3Ccircle fill='%23ecd68a' cx='24' cy='8' r='3'/%3E%3Ccircle fill='%23d4b06a' cx='24' cy='8' r='1.5'/%3E%3C/svg%3E");
}
.frame-tr {
top: 4px;
right: 4px;
transform: scaleX(-1);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M4 44 Q4 24 24 4' stroke='%23d4b06a' stroke-width='1.5' fill='none'/%3E%3Cellipse fill='%23d4b06a' cx='8' cy='36' rx='4' ry='6' transform='rotate(-30 8 36)'/%3E%3Cellipse fill='%23ecd68a' cx='12' cy='28' rx='3' ry='5' transform='rotate(-20 12 28)'/%3E%3Cellipse fill='%23d4b06a' cx='18' cy='18' rx='3.5' ry='5.5' transform='rotate(-10 18 18)'/%3E%3Ccircle fill='%23ecd68a' cx='24' cy='8' r='3'/%3E%3Ccircle fill='%23d4b06a' cx='24' cy='8' r='1.5'/%3E%3C/svg%3E");
}
.frame-bl {
bottom: 4px;
left: 4px;
transform: scaleY(-1);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M4 44 Q4 24 24 4' stroke='%23d4b06a' stroke-width='1.5' fill='none'/%3E%3Cellipse fill='%23d4b06a' cx='8' cy='36' rx='4' ry='6' transform='rotate(-30 8 36)'/%3E%3Cellipse fill='%23ecd68a' cx='12' cy='28' rx='3' ry='5' transform='rotate(-20 12 28)'/%3E%3Cellipse fill='%23d4b06a' cx='18' cy='18' rx='3.5' ry='5.5' transform='rotate(-10 18 18)'/%3E%3Ccircle fill='%23ecd68a' cx='24' cy='8' r='3'/%3E%3Ccircle fill='%23d4b06a' cx='24' cy='8' r='1.5'/%3E%3C/svg%3E");
}
.frame-br {
bottom: 4px;
right: 4px;
transform: scale(-1);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M4 44 Q4 24 24 4' stroke='%23d4b06a' stroke-width='1.5' fill='none'/%3E%3Cellipse fill='%23d4b06a' cx='8' cy='36' rx='4' ry='6' transform='rotate(-30 8 36)'/%3E%3Cellipse fill='%23ecd68a' cx='12' cy='28' rx='3' ry='5' transform='rotate(-20 12 28)'/%3E%3Cellipse fill='%23d4b06a' cx='18' cy='18' rx='3.5' ry='5.5' transform='rotate(-10 18 18)'/%3E%3Ccircle fill='%23ecd68a' cx='24' cy='8' r='3'/%3E%3Ccircle fill='%23d4b06a' cx='24' cy='8' r='1.5'/%3E%3C/svg%3E");
}
.carousel {
overflow: hidden;
border-radius: 12px;
position: relative;
cursor: grab;
touch-action: pan-y;
user-select: none;
-webkit-user-select: none;
}
.carousel:active { cursor: grabbing; }
.carousel-img { pointer-events: none; user-select: none; -webkit-user-drag: none; }
.carousel-track {
display: flex;
transition: transform 0.5s ease;
}
.carousel-slide {
flex: 0 0 100%;
min-width: 0;
position: relative;
}
.carousel-slide::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 75% 75% at 50% 50%, transparent 25%, rgba(61,21,32,0.25) 55%, rgba(10,8,6,0.5) 80%, rgba(10,8,6,0.7) 100%);
pointer-events: none;
}
.carousel-img {
width: 100%;
height: auto;
aspect-ratio: 16/10;
object-fit: cover;
display: block;
}
.carousel-placeholder {
aspect-ratio: 16/10;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Cinzel', serif;
font-size: 2rem;
color: rgba(212,176,106,0.4);
background: linear-gradient(135deg, hsl(var(--hue, 340), 25%, 12%), hsl(var(--hue, 340), 20%, 8%));
border: 1px dashed rgba(154,122,72,0.4);
}
/* ── RSVP ── */
.rsvp-section {
position: relative;
padding: 100px 24px;
max-width: 680px;
margin: 0 auto;
}
.rsvp-intro {
font-family: 'EB Garamond', Georgia, serif;
font-size: 1.15rem;
font-style: italic;
color: var(–muted);
line-height: 1.7;
text-align: center;
max-width: 520px;
margin: 0 auto 32px;
}
.rsvp-bg {
position: absolute;
inset: 0;
background: radial-gradient(ellipse 70% 50% at 50% 50%, #1d0b12 0%, transparent 70%);
pointer-events: none;
}
.rsvp-form {
position: relative;
border: 2px solid rgba(154,122,72,0.7);
background: rgba(17,14,10,0.8);
padding: 56px 48px;
}
.rsvp-form::before, .rsvp-form::after {
content: '';
position: absolute;
width: 40px;
height: 40px;
border-color: var(–gold-dim);
border-style: solid;
}
.rsvp-form::before { 
top: -1px; 
left: -1px; 
border-width: 2px 0 0 2px; 
border-color: var(–rose-dark);
}
.rsvp-form::after { 
bottom: -1px; 
right: -1px; 
border-width: 0 2px 2px 0; 
border-color: var(–rose-dark);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 24px;
}
.form-group.full { grid-column: 1 / -1; }
label {
font-family: 'Cinzel', serif;
font-size: 0.72rem;
letter-spacing: 0.3em;
color: var(–gold-dim);
text-transform: uppercase;
}
input, select, textarea {
background: var(–charcoal);
border: 1px solid #2a2018;
color: var(–cream);
font-family: 'EB Garamond', Georgia, serif;
font-size: 1rem;
padding: 14px 18px;
outline: none;
transition: border-color 0.3s ease;
-webkit-appearance: none;
appearance: none;
}
input::placeholder, textarea::placeholder { color: var(–gold-dim); opacity: 0.5; }
input:focus, select:focus, textarea:focus {
border-color: var(–gold-dim);
background: #1c1712;
}
select { cursor: pointer; }
select option { background: var(–charcoal); }
textarea { resize: vertical; min-height: 100px; }
.attendance-toggle {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border: 1px solid #2a2018;
}
.attendance-toggle label {
display: flex;
align-items: center;
justify-content: center;
padding: 14px;
cursor: pointer;
font-family: 'Cinzel', serif;
font-size: 0.78rem;
letter-spacing: 0.2em;
color: var(–muted);
background: var(–charcoal);
transition: all 0.25s;
gap: 8px;
text-transform: uppercase;
}
.attendance-toggle input[type="radio"] { display: none; }
.attendance-toggle input[type="radio"]:checked + label,
.attendance-toggle label.selected {
background: #3d1520;
color: #e2c99a;
box-shadow: inset 0 0 0 1px #c9a96e;
}
@keyframes attendance-joy-pop {
0% { transform: scale(1); box-shadow: inset 0 0 0 1px #c9a96e; }
40% { transform: scale(1.06); box-shadow: inset 0 0 0 1px #c9a96e, 0 0 20px rgba(201,169,110,0.5); }
70% { transform: scale(0.98); }
100% { transform: scale(1); box-shadow: inset 0 0 0 1px #c9a96e; }
}
@keyframes attendance-decline-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.03); }
100% { transform: scale(1); }
}
.attendance-toggle label[for="yes"].selected {
animation: attendance-joy-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.attendance-toggle label[for="no"].selected {
animation: attendance-decline-pulse 0.35s ease-out;
}
.submit-btn {
width: 100%;
padding: 18px 32px;
background: transparent;
border: 1px solid var(–gold-dim);
color: var(–gold);
font-family: 'Cinzel', serif;
font-size: 0.88rem;
letter-spacing: 0.3em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 8px;
position: relative;
overflow: hidden;
}
.submit-btn::before {
content: '';
position: absolute;
inset: 0;
background: var(–rose-dark);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.submit-btn:hover { border-color: var(–gold); color: var(–gold-light); }
.submit-btn:hover::before { transform: scaleX(1); }
.submit-btn span { position: relative; z-index: 1; }
.form-note {
text-align: center;
color: var(–muted);
font-style: italic;
font-size: 1rem;
margin-top: 20px;
opacity: 0.7;
}
.success-msg {
display: none;
text-align: center;
padding: 40px;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.4rem;
font-style: italic;
color: var(–gold-light);
line-height: 1.8;
}
/* ── FOOTER ── */
footer {
position: relative;
text-align: center;
padding: 60px 24px 40px;
border-top: 1px solid var(–gold-dim);
}
footer::before {
content: '❀ ❀ ❀';
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
font-size: 0.5rem;
color: var(–gold);
opacity: 0.9;
letter-spacing: 0.8em;
background: var(–black);
padding: 0 12px;
}
footer::after {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 1px;
background: linear-gradient(to right, transparent, var(–gold-dim) 20%, var(–gold-dim) 80%, transparent);
}
.footer-names {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-size: 2rem;
color: var(–gold-dim);
margin-bottom: 12px;
}
.footer-date {
font-family: 'Cinzel', serif;
font-size: 0.72rem;
letter-spacing: 0.4em;
color: var(–muted);
text-transform: uppercase;
}
.footer-credit {
font-size: 0.65rem;
letter-spacing: 0.3em;
color: var(–muted);
opacity: 0.7;
margin-top: 16px;
}
/* ── ANIMATIONS ── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to   { opacity: 1; transform: translateY(0); }
}
@keyframes scrollPulse {
0%, 100% { opacity: 0.4; transform: scaleY(1); }
50% { opacity: 1; transform: scaleY(1.15); }
}
@keyframes gradientShift {
0%, 100% { 
background-position: 0% 0%, 0% 100%, 100% 100%;
filter: hue-rotate(0deg);
}
33% { 
background-position: 5% 5%, 10% 95%, 95% 95%;
filter: hue-rotate(5deg);
}
66% { 
background-position: -5% -5%, -10% 105%, 105% 105%;
filter: hue-rotate(-5deg);
}
}
@keyframes gradientPulse {
0%, 100% { 
opacity: 0.6;
transform: scale(1);
}
50% { 
opacity: 0.8;
transform: scale(1.05);
}
}
@keyframes shimmer {
0%, 100% { 
opacity: 0.4;
transform: translate(0, 0) scale(1);
}
25% { 
opacity: 0.7;
transform: translate(2%, -2%) scale(1.02);
}
50% { 
opacity: 0.5;
transform: translate(-1%, 1%) scale(0.98);
}
75% { 
opacity: 0.6;
transform: translate(1%, -1%) scale(1.01);
}
}
@keyframes noiseMove {
0%, 100% { 
transform: translate(0, 0);
opacity: 0.35;
}
25% { 
transform: translate(2px, -3px);
opacity: 0.4;
}
50% { 
transform: translate(-2px, 2px);
opacity: 0.3;
}
75% { 
transform: translate(1px, -1px);
opacity: 0.38;
}
}
@keyframes floatTL {
0%, 100% { 
transform: translate(0, 0) rotate(0deg) scale(1);
opacity: 0.85;
}
33% { 
transform: translate(8px, -6px) rotate(2deg) scale(1.02);
opacity: 0.95;
}
66% { 
transform: translate(-6px, 4px) rotate(-1deg) scale(0.98);
opacity: 0.75;
}
}
@keyframes floatTR {
0%, 100% { 
transform: translate(0, 0) rotate(90deg) scale(1);
opacity: 0.85;
}
33% { 
transform: translate(-8px, -4px) rotate(92deg) scale(1.02);
opacity: 0.95;
}
66% { 
transform: translate(6px, 6px) rotate(88deg) scale(0.98);
opacity: 0.75;
}
}
@keyframes floatBL {
0%, 100% { 
transform: translate(0, 0) rotate(270deg) scale(1);
opacity: 0.85;
}
33% { 
transform: translate(6px, 8px) rotate(272deg) scale(1.02);
opacity: 0.95;
}
66% { 
transform: translate(-8px, -6px) rotate(268deg) scale(0.98);
opacity: 0.75;
}
}
@keyframes floatBR {
0%, 100% { 
transform: translate(0, 0) rotate(180deg) scale(1);
opacity: 0.85;
}
33% { 
transform: translate(-6px, 8px) rotate(182deg) scale(1.02);
opacity: 0.95;
}
66% { 
transform: translate(8px, -4px) rotate(178deg) scale(0.98);
opacity: 0.75;
}
}
@keyframes particlesFloat {
0%, 100% { 
background-position: 0% 0%, 100% 50%, 50% 100%, 0% 100%, 100% 0%, 50% 50%;
opacity: 0.6;
}
25% { 
background-position: 20% 10%, 80% 60%, 70% 90%, 10% 80%, 90% 10%, 60% 60%;
opacity: 0.8;
}
50% { 
background-position: 40% 20%, 60% 70%, 90% 80%, 20% 60%, 80% 20%, 70% 70%;
opacity: 0.5;
}
75% { 
background-position: 10% 30%, 90% 40%, 30% 70%, 40% 90%, 70% 30%, 40% 40%;
opacity: 0.7;
}
}
.reveal {
opacity: 0;
transform: translateY(32px);
transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* ── ADD TO CALENDAR ── */
.calendar-wrap {
position: relative;
display: flex;
justify-content: center;
margin-top: 36px;
}
.cal-dropdown {
position: relative;
}
.cal-btn {
background: #3d1520;
border: 1px solid #c9a96e;
color: #d4b06a;
font-family: 'Cinzel', serif;
font-size: 0.82rem;
letter-spacing: 0.3em;
text-transform: uppercase;
padding: 15px 32px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.cal-btn:hover {
color: var(–gold-light);
background: #4a1a28;
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.cal-btn:focus-visible {
outline: 2px solid var(–gold);
outline-offset: 3px;
}
.cal-portal {
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
}
.cal-portal > * {
pointer-events: auto;
}
.cal-menu {
position: fixed;
transform: translateX(-50%);
margin-top: 0;
min-width: 180px;
background: #3d1520;
border: 1px solid #c9a96e;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
z-index: 10000;
}
.cal-dropdown .cal-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: 8px;
}
.cal-menu[hidden] {
display: none;
}
.cal-menu a {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 20px;
color: #fff;
font-family: 'Cinzel', serif;
font-size: 0.78rem;
text-transform: uppercase;
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease;
}
.cal-menu a:hover {
background: rgba(212,176,106,0.15);
color: #fff;
}
.cal-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.cal-icon-apple {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d4b06a'%3E%3Cpath d='M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z'/%3E%3C/svg%3E");
}
.cal-icon-google {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z'/%3E%3Cpath fill='%2334A853' d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z'/%3E%3Cpath fill='%23FBBC05' d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z'/%3E%3Cpath fill='%23EA4335' d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z'/%3E%3C/svg%3E");
}
.cal-icon-outlook {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230078D4' d='M7.88 11.91L4 22h2.5l1.5-4h2l1.5 4h2.5l-3.88-10.09H7.88zM8 16l1-3 1 3H8z'/%3E%3Cpath fill='%23D83B01' d='M22 7H2v10h7v5l5-5h8V7z'/%3E%3C/svg%3E");
}
/* ── RESPONSIVE ── */
@media (max-width: 640px) {
.ceremony-grid { grid-template-columns: 1fr; gap: 2px; }
.day-tile { padding: 32px 20px; }
.video-grid { grid-template-columns: 1fr; }
.carousel-wrap { margin-top: 32px; }
.form-row { grid-template-columns: 1fr; }
.rsvp-form { padding: 36px 24px; }
.floral-tl, .floral-tr, .floral-bl, .floral-br { width: 280px; height: 280px; opacity: 0.7; }
}
/* ── ADMIN ── */
#admin-view {
min-height: 100vh;
padding: 80px 24px;
}
#admin-login {
max-width: 480px;
margin: 0 auto;
text-align: center;
padding: 80px 0;
}
.admin-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin: 0 auto 48px;
max-width: 900px;
}
.stat-card {
background: var(–deep);
border: 1px solid #2a2018;
padding: 28px 16px;
text-align: center;
display: flex;
flex-direction: column;
gap: 8px;
}
.stat-num {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 2.8rem;
font-weight: 300;
color: var(–gold-light);
line-height: 1;
}
.stat-label {
font-family: 'Cinzel', serif;
font-size: 0.65rem;
letter-spacing: 0.35em;
color: var(–gold-dim);
text-transform: uppercase;
}
.admin-table-scroll {
max-width: 1100px;
margin: 0 auto;
overflow-x: auto;
}
.admin-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.admin-table th {
font-family: 'Cinzel', serif;
font-size: 0.65rem;
letter-spacing: 0.3em;
color: var(–gold-dim);
text-transform: uppercase;
text-align: left;
padding: 14px 16px;
border-bottom: 1px solid #2a2018;
white-space: nowrap;
}
.admin-table td {
padding: 14px 16px;
border-bottom: 1px solid #1c1712;
color: var(–cream);
vertical-align: top;
}
.admin-table .td-message {
max-width: 240px;
font-style: italic;
color: var(–muted);
font-size: 0.85rem;
}
.admin-table .td-attendance { white-space: nowrap; font-size: 0.82rem; }
.admin-table .row-yes td { background: rgba(201,154,94,0.03); }
.admin-table .row-no td { background: rgba(107,45,62,0.05); color: var(–muted); }
.admin-table tbody tr:hover td { background: rgba(201,154,94,0.07); }
#admin-error { color: var(–rose) !important; opacity: 1 !important; margin-top: -12px; margin-bottom: 16px; }
#admin-table-wrap { max-width: 1200px; margin: 0 auto; }
@keyframes shake {
0%, 100% { transform: translateX(0); }
20%       { transform: translateX(-8px); }
40%       { transform: translateX(8px); }
60%       { transform: translateX(-6px); }
80%       { transform: translateX(6px); }
}
.shake { animation: shake 0.45s ease; }
@media (max-width: 640px) {
.admin-stats { grid-template-columns: repeat(2, 1fr); }
}