/* ─────────────────────────────────────────────────────────────── Invitación · Sofía & Mateo Estética: minimalista moderno, tonos tierra ─────────────────────────────────────────────────────────────── */ :root { --cream: #f4ebe4; --cream-deep: #ebe0d4; --terra: #c89a8e; /* blush rose del vestido */ --terra-deep: #a87a6e; --ink: #2a3142; /* azul marino del traje */ --ink-soft: #4a5168; --muted: rgba(42, 49, 66, 0.55); --hairline: rgba(42, 49, 66, 0.18); --paper: #f8f0e8; --bouquet: #b8a589; /* beige del bouquet seco */ --ff-display: "Cormorant Garamond", "Cormorant", "Times New Roman", serif; --ff-body: "DM Sans", "Helvetica Neue", system-ui, sans-serif; --bg-pattern: var(--cream); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--bg-pattern); color: var(--ink); font-family: var(--ff-body); font-weight: 300; font-size: 15px; line-height: 1.55; letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; overflow-x: hidden; } body { background-image: radial-gradient(ellipse at 20% 10%, rgba(200, 154, 142, 0.08), transparent 50%), radial-gradient(ellipse at 80% 90%, rgba(42, 49, 66, 0.04), transparent 50%); } /* Subtle pattern variations applied via [data-bg] on */ html[data-bg="linen"] body { background-image: radial-gradient(ellipse at 20% 10%, rgba(200, 154, 142, 0.08), transparent 50%), radial-gradient(ellipse at 80% 90%, rgba(42, 49, 66, 0.04), transparent 50%); } html[data-bg="plain"] body { background-image: none; } html[data-bg="paper"] body { background-image: repeating-linear-gradient(0deg, rgba(42,49,66,0.018) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(42,49,66,0.018) 0 1px, transparent 1px 3px); } html[data-bg="gradient"] body { background-image: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%); } /* ──────────────────────────────────────────────── ENVELOPE STAGE (intro) ──────────────────────────────────────────────── */ .envelope-stage { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-pattern); z-index: 100; perspective: 1400px; transition: opacity 800ms ease 400ms; } .envelope-stage.is-opened { opacity: 0; pointer-events: none; } .envelope-prelude { position: absolute; top: 14vh; left: 50%; transform: translateX(-50%); text-align: center; color: var(--ink-soft); opacity: 0; animation: fadeUp 1.2s ease 0.3s forwards; } .envelope-stage.is-opened .envelope-prelude { opacity: 0; transition: opacity .3s; } .envelope-prelude .eyebrow { font-family: var(--ff-body); font-size: 10px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .envelope-prelude .you { font-family: var(--ff-display); font-size: 28px; font-style: italic; font-weight: 300; letter-spacing: 0.01em; color: var(--ink); } .envelope-prelude .you em { color: var(--terra); font-style: italic; } @keyframes fadeUp { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } } .envelope-wrap { position: relative; width: min(78vw, 420px); aspect-ratio: 1.55 / 1; transform-style: preserve-3d; cursor: pointer; transition: transform 700ms cubic-bezier(.4, 0, .2, 1); } .envelope-wrap:hover { transform: translateY(-4px); } .envelope-stage.is-opened .envelope-wrap { transform: translateY(-40px) scale(1.05); transition: transform 900ms cubic-bezier(.4, 0, .2, 1); } .envelope-back { position: absolute; inset: 0; background: var(--cream-deep); border-radius: 3px; box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 18px 40px rgba(43, 37, 32, 0.14), 0 4px 12px rgba(43, 37, 32, 0.08); overflow: hidden; } /* faint paper grain */ .envelope-back::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(42,49,66,0.014) 0 2px, transparent 2px 4px); pointer-events: none; } /* the letter (invitation card) tucked inside, peeks out and slides up */ .envelope-letter { position: absolute; left: 6%; right: 6%; top: 12%; bottom: 12%; background: var(--paper); border-radius: 2px; box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 6px 18px rgba(43, 37, 32, 0.12); display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; z-index: 1; transition: transform 900ms cubic-bezier(.4, 0, .2, 1) 250ms, opacity 600ms ease 800ms; padding: 0 8%; } .envelope-stage.is-opened .envelope-letter { transform: translateY(-120%) scale(1.04); opacity: 0; } .envelope-letter .monogram { font-family: var(--ff-display); font-size: 38px; font-weight: 300; font-style: italic; color: var(--ink); letter-spacing: 0.04em; } .envelope-letter .amp { color: var(--terra); font-style: italic; margin: 0 4px; } .envelope-letter .micro { font-family: var(--ff-body); font-size: 8px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--muted); margin-top: 10px; } /* envelope flap and front — paper tone */ .envelope-flap { position: absolute; top: 0; left: 0; right: 0; height: 60%; background: linear-gradient(160deg, #e3d8c9 0%, #cfc1ad 100%); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top center; transform: rotateX(0deg); backface-visibility: visible; z-index: 3; transition: transform 800ms cubic-bezier(.55, 0, .3, 1); box-shadow: inset 0 -1px 2px rgba(42, 49, 66, 0.08); } .envelope-stage.is-opened .envelope-flap { transform: rotateX(180deg); } /* envelope front panel (covers the bottom half of letter) */ .envelope-front { position: absolute; bottom: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, #dccfbb 0%, #cebfa9 100%); z-index: 2; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; box-shadow: inset 0 1px 0 rgba(42, 49, 66, 0.06); } /* wax seal — small circular seal in the middle */ .wax-seal { position: absolute; top: 50%; left: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--terra) 0%, var(--terra-deep) 65%, #6e4a42 100%); display: flex; align-items: center; justify-content: center; font-family: var(--ff-display); font-style: italic; font-size: 22px; color: rgba(244, 235, 228, 0.95); letter-spacing: 0.03em; z-index: 4; box-shadow: 0 2px 6px rgba(110, 74, 66, 0.4), inset 0 1px 1px rgba(255,255,255,0.2), inset 0 -2px 4px rgba(0,0,0,0.18); transition: transform 500ms cubic-bezier(.5, 0, .2, 1), opacity 400ms ease 200ms; } .wax-seal::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 0.5px dashed rgba(244, 237, 228, 0.35); } .envelope-stage.is-opened .wax-seal { transform: scale(1.4) translateY(20px); opacity: 0; } .envelope-cta { position: absolute; bottom: 14vh; left: 50%; transform: translateX(-50%); text-align: center; color: var(--muted); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 400; opacity: 0; animation: pulseUp 2.4s ease 1.2s infinite; } @keyframes pulseUp { 0%, 100% { opacity: 0.45; transform: translate(-50%, 0); } 50% { opacity: 0.9; transform: translate(-50%, -3px); } } .envelope-stage.is-opened .envelope-cta { animation: none; opacity: 0; } .envelope-cta .dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--terra); margin: 0 8px; vertical-align: middle; } /* ──────────────────────────────────────────────── INVITATION CONTENT ──────────────────────────────────────────────── */ .invitation { opacity: 0; transform: translateY(20px); transition: opacity 1.2s ease, transform 1.2s ease; max-width: 560px; margin: 0 auto; padding: 80px 28px 120px; position: relative; } .invitation.is-revealed { opacity: 1; transform: translateY(0); transition-delay: 900ms; } /* Section spacing baseline */ .section { padding: 56px 0; border-top: 0.5px solid var(--hairline); position: relative; } .section.no-border { border-top: 0; } .section .eyebrow { font-size: 10px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; text-align: center; } .section h2 { font-family: var(--ff-display); font-weight: 300; font-style: italic; font-size: 38px; line-height: 1.05; letter-spacing: 0.005em; color: var(--ink); text-align: center; margin-bottom: 6px; } .section .lede { text-align: center; color: var(--ink-soft); font-size: 15px; max-width: 380px; margin: 0 auto; font-weight: 300; } /* ── Hero ─────────────────────────────────────── */ .hero { text-align: center; padding-top: 24px; position: relative; } /* Hero with full-bleed photo */ .invitation.has-hero-photo { padding-top: 0; } .hero.has-photo { margin: 0 -28px 0; padding: 0; height: 92vh; min-height: 600px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; position: relative; overflow: hidden; color: var(--cream); } .hero.has-photo .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center 35%; filter: brightness(0.78) saturate(0.92); } .hero.has-photo .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0.55) 100%); } .hero.has-photo > * { position: relative; z-index: 2; } .hero.has-photo .you-are-invited { color: rgba(244, 237, 228, 0.85); margin-bottom: 28px; margin-top: auto; } .hero.has-photo .names { color: var(--cream); text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25); } .hero.has-photo .amp { color: var(--cream); opacity: 0.85; } .hero.has-photo .meta { color: rgba(244, 237, 228, 0.92); margin-bottom: 60px; } .hero.has-photo .meta .sep { background: rgba(244, 237, 228, 0.45); } .hero.has-photo .scroll-hint { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: rgba(244, 237, 228, 0.75); margin-top: 0; } .hero.has-photo .scroll-hint::after { background: rgba(244, 237, 228, 0.45); } .hero .you-are-invited { font-size: 10px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--muted); margin-bottom: 36px; } .hero .names { font-family: var(--ff-display); font-weight: 300; font-size: clamp(56px, 12vw, 96px); line-height: 0.95; letter-spacing: -0.005em; color: var(--ink); } .hero .amp { display: block; font-style: italic; color: var(--terra); font-size: 0.6em; margin: 6px 0; font-weight: 300; } .hero .meta { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 40px; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-soft); } .hero .meta .sep { width: 24px; height: 0.5px; background: var(--hairline); } .hero .scroll-hint { margin-top: 64px; font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 12px; } .hero .scroll-hint::after { content: ""; width: 0.5px; height: 36px; background: var(--hairline); animation: scrollHint 2.2s ease-in-out infinite; transform-origin: top; } @keyframes scrollHint { 0%, 100% { transform: scaleY(0.4); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } } /* ── Quote ───────────────────────────────────── */ .quote { text-align: center; padding: 80px 0; } .quote blockquote { font-family: var(--ff-display); font-weight: 300; font-style: italic; font-size: 28px; line-height: 1.35; color: var(--ink); letter-spacing: 0.005em; max-width: 440px; margin: 0 auto; } .quote .attribution { margin-top: 24px; font-size: 10px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--muted); } /* ── Countdown ──────────────────────────────── */ .countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 36px; border-top: 0.5px solid var(--hairline); border-bottom: 0.5px solid var(--hairline); } .countdown .cd-cell { padding: 28px 8px; text-align: center; border-right: 0.5px solid var(--hairline); position: relative; } .countdown .cd-cell:last-child { border-right: 0; } .countdown .cd-num { font-family: var(--ff-display); font-weight: 300; font-size: 48px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .countdown .cd-lbl { margin-top: 12px; font-size: 9px; letter-spacing: 0.38em; text-transform: uppercase; color: var(--muted); } .countdown-done { text-align: center; font-family: var(--ff-display); font-style: italic; font-size: 24px; color: var(--terra); padding: 40px 0; } /* ── Itinerary ──────────────────────────────── */ .itinerary { display: flex; flex-direction: column; gap: 0; margin-top: 40px; } .itinerary .it-row { display: grid; grid-template-columns: 80px 1fr; gap: 24px; padding: 28px 0; border-top: 0.5px solid var(--hairline); align-items: start; } .itinerary .it-row:last-child { border-bottom: 0.5px solid var(--hairline); } .itinerary .it-time { font-family: var(--ff-display); font-style: italic; font-size: 28px; font-weight: 300; color: var(--terra); line-height: 1; padding-top: 4px; font-variant-numeric: tabular-nums; } .itinerary .it-title { font-family: var(--ff-display); font-size: 22px; font-weight: 400; letter-spacing: 0.01em; color: var(--ink); line-height: 1.2; } .itinerary .it-desc { margin-top: 6px; color: var(--ink-soft); font-size: 14px; line-height: 1.5; } /* ── Location ──────────────────────────────── */ .location { text-align: center; } .location .venue { font-family: var(--ff-display); font-weight: 400; font-size: 28px; margin-top: 28px; color: var(--ink); } .location .address { margin-top: 8px; color: var(--ink-soft); font-size: 14px; line-height: 1.6; max-width: 320px; margin-left: auto; margin-right: auto; } .location .map { position: relative; margin-top: 36px; aspect-ratio: 4 / 3; border-radius: 2px; background: var(--cream-deep); overflow: hidden; border: 0.5px solid var(--hairline); } /* schematic line map */ .map-art { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent 0 28px, rgba(42,49,66,0.04) 28px 29px), repeating-linear-gradient(-45deg, transparent 0 40px, rgba(42,49,66,0.03) 40px 41px), radial-gradient(ellipse at 50% 60%, rgba(200, 154, 142, 0.1), transparent 60%); } .map-roads { position: absolute; inset: 0; width: 100%; height: 100%; } .map-pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 6px; } .map-pin .pin-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--terra); box-shadow: 0 0 0 6px rgba(200, 154, 142, 0.22), 0 2px 4px rgba(110, 74, 66, 0.3); animation: pinPulse 2.2s ease-in-out infinite; } @keyframes pinPulse { 0%, 100% { box-shadow: 0 0 0 6px rgba(200, 154, 142, 0.22), 0 2px 4px rgba(110, 74, 66, 0.3); } 50% { box-shadow: 0 0 0 14px rgba(200, 154, 142, 0.05), 0 2px 4px rgba(110, 74, 66, 0.3); } } .map-pin .pin-label { background: var(--ink); color: var(--cream); font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; padding: 6px 10px; border-radius: 2px; white-space: nowrap; } .location .map-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; padding: 14px 28px; border: 0.5px solid var(--ink); color: var(--ink); text-decoration: none; font-size: 10px; letter-spacing: 0.36em; text-transform: uppercase; font-weight: 400; transition: all 0.2s; } .location .map-link:hover { background: var(--ink); color: var(--cream); } .location .map-link .arrow { font-family: var(--ff-body); font-size: 14px; letter-spacing: 0; } /* ── Dress Code ──────────────────────────────── */ .dresscode .codes { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 40px; } .dresscode .code-card { text-align: center; } .dresscode .code-art { aspect-ratio: 3 / 4; background: var(--cream-deep); position: relative; margin-bottom: 16px; border: 0.5px solid var(--hairline); overflow: hidden; } .dresscode .code-art::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(43,37,32,0.05) 8px 9px); } .dresscode .code-art .silhouette { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60%; height: 80%; background: var(--ink); opacity: 0.08; } .dresscode .code-art.code-she .silhouette { clip-path: polygon(45% 0, 55% 0, 60% 18%, 58% 30%, 80% 100%, 20% 100%, 42% 30%, 40% 18%); } .dresscode .code-art.code-he .silhouette { clip-path: polygon(40% 0, 60% 0, 65% 18%, 72% 30%, 70% 100%, 30% 100%, 28% 30%, 35% 18%); width: 50%; } .dresscode .code-label { font-family: var(--ff-display); font-size: 22px; font-weight: 400; color: var(--ink); margin-bottom: 4px; } .dresscode .code-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.45; } .dresscode .palette-strip { display: flex; gap: 6px; margin-top: 32px; justify-content: center; } .dresscode .palette-strip span { width: 40px; height: 40px; border-radius: 50%; border: 0.5px solid var(--hairline); } .dresscode .palette-note { text-align: center; margin-top: 14px; font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted); } /* ── Featured image (between sections) ──────── */ .featured { margin: 0 -28px; padding: 0; border-top: 0; } .featured .ft-frame { aspect-ratio: 4 / 5; background-size: cover; background-position: center; position: relative; overflow: hidden; } .featured .ft-cap { text-align: center; padding: 24px 28px 0; font-family: var(--ff-display); font-style: italic; font-size: 18px; color: var(--ink-soft); letter-spacing: 0.01em; } /* ── Gallery ──────────────────────────────── */ .gallery .grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 90px; gap: 8px; margin-top: 40px; } .gallery .ph { background: var(--cream-deep); position: relative; overflow: hidden; border: 0; } .gallery .ph .ph-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 6s cubic-bezier(.2, 0, .2, 1); } .gallery .ph:hover .ph-img { transform: scale(1.04); } /* Editorial layout: 4 images, mixed spans */ .gallery .ph.ph-1 { grid-column: 1 / span 6; grid-row: span 4; } .gallery .ph.ph-2 { grid-column: 1 / span 3; grid-row: span 3; } .gallery .ph.ph-3 { grid-column: 4 / span 3; grid-row: span 3; } .gallery .ph.ph-4 { grid-column: 1 / span 6; grid-row: span 4; } /* Placeholder fallback (no image) */ .gallery .ph.is-placeholder::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent 0 14px, rgba(43,37,32,0.04) 14px 15px); } .gallery .ph .ph-label { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 8px; z-index: 1; } /* Photo treatment via [data-photo] on html */ html[data-photo="duotone"] .ph .ph-img, html[data-photo="duotone"] .hero.has-photo .hero-bg, html[data-photo="duotone"] .featured .ft-frame { filter: grayscale(1) sepia(0.45) brightness(0.92) contrast(0.95) hue-rotate(-12deg); } html[data-photo="duotone"] .hero.has-photo .hero-bg { filter: grayscale(1) sepia(0.45) brightness(0.72) contrast(0.95) hue-rotate(-12deg); } html[data-photo="bw"] .ph .ph-img, html[data-photo="bw"] .featured .ft-frame { filter: grayscale(1) contrast(1.05); } html[data-photo="bw"] .hero.has-photo .hero-bg { filter: grayscale(1) brightness(0.7) contrast(1.05); } /* ── RSVP ──────────────────────────────── */ .rsvp form { display: flex; flex-direction: column; gap: 18px; margin-top: 40px; } .rsvp .field { display: flex; flex-direction: column; gap: 6px; } .rsvp label { font-size: 9px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--muted); } .rsvp input[type="text"], .rsvp input[type="email"], .rsvp input[type="number"], .rsvp textarea { background: transparent; border: 0; border-bottom: 0.5px solid var(--hairline); padding: 12px 0; font-family: var(--ff-body); font-size: 16px; color: var(--ink); font-weight: 300; outline: none; width: 100%; } .rsvp input::placeholder, .rsvp textarea::placeholder { color: rgba(43,37,32,0.3); } .rsvp input:focus, .rsvp textarea:focus { border-bottom-color: var(--terra); } .rsvp .yesno { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; } .rsvp .yesno button { padding: 16px 8px; border: 0.5px solid var(--hairline); background: transparent; color: var(--ink); font-family: var(--ff-display); font-style: italic; font-size: 22px; font-weight: 300; cursor: pointer; transition: all 0.2s; } .rsvp .yesno button:hover { border-color: var(--ink); } .rsvp .yesno button.active { background: var(--ink); color: var(--cream); border-color: var(--ink); } .rsvp .yesno button.no.active { background: var(--cream-deep); color: var(--ink); border-color: var(--ink); } .rsvp .submit { margin-top: 12px; padding: 16px 28px; border: 0.5px solid var(--ink); background: var(--ink); color: var(--cream); font-family: var(--ff-body); font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; font-weight: 400; cursor: pointer; transition: all 0.2s; } .rsvp .submit:hover { background: var(--terra); border-color: var(--terra); } .rsvp .submit:disabled { opacity: 0.35; cursor: not-allowed; } .rsvp .confirmation { padding: 60px 20px; text-align: center; border: 0.5px solid var(--hairline); margin-top: 28px; } .rsvp .confirmation .mark { font-family: var(--ff-display); font-style: italic; font-size: 56px; color: var(--terra); line-height: 1; margin-bottom: 16px; } .rsvp .confirmation .msg { font-family: var(--ff-display); font-size: 22px; color: var(--ink); line-height: 1.3; } .rsvp .confirmation .sub { margin-top: 12px; font-size: 13px; color: var(--ink-soft); } /* ── Footer ──────────────────────────────── */ .footer { text-align: center; padding: 80px 0 0; } .footer .sign { font-family: var(--ff-display); font-style: italic; font-size: 32px; font-weight: 300; color: var(--ink); } .footer .sign .amp { color: var(--terra); } .footer .tagline { margin-top: 18px; font-size: 10px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--muted); } /* ──────────────────────────────────────────────── MUSIC BUTTON ──────────────────────────────────────────────── */ .music-btn { position: fixed; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; background: rgba(244, 237, 228, 0.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 0.5px solid var(--hairline); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 200; transition: all 0.3s ease; color: var(--ink); opacity: 0; transform: translateY(-10px); } .music-btn.is-shown { opacity: 1; transform: translateY(0); } .music-btn:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); } .music-btn .bars { display: flex; align-items: end; gap: 2px; height: 14px; } .music-btn .bars i { display: block; width: 2px; background: currentColor; border-radius: 1px; height: 40%; } .music-btn.playing .bars i:nth-child(1) { animation: bar 0.9s ease-in-out infinite; } .music-btn.playing .bars i:nth-child(2) { animation: bar 1.3s ease-in-out infinite 0.1s; } .music-btn.playing .bars i:nth-child(3) { animation: bar 1.1s ease-in-out infinite 0.2s; } .music-btn.playing .bars i:nth-child(4) { animation: bar 0.8s ease-in-out infinite 0.3s; } @keyframes bar { 0%, 100% { height: 30%; } 50% { height: 100%; } } .music-btn:not(.playing) .bars i { height: 35%; } .music-btn:not(.playing)::after { content: ""; position: absolute; width: 22px; height: 0.5px; background: currentColor; transform: rotate(-45deg); } /* ──────────────────────────────────────────────── BLESSING (padres + padrinos) ──────────────────────────────────────────────── */ .blessing .families { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 40px; text-align: center; } .blessing .family-label { font-size: 9px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .blessing .family-names { font-family: var(--ff-display); font-size: 22px; font-weight: 400; line-height: 1.45; color: var(--ink); } .blessing .family-padrinos { text-align: center; margin-top: 44px; position: relative; } .blessing .family-divider { width: 28px; height: 0.5px; background: var(--terra); opacity: 0.6; margin: 0 auto 28px; } /* ──────────────────────────────────────────────── DOUBLE LOCATION ──────────────────────────────────────────────── */ .locations { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 40px; border-top: 0.5px solid var(--hairline); border-bottom: 0.5px solid var(--hairline); } .loc-card { padding: 32px 22px; text-align: center; border-right: 0.5px solid var(--hairline); display: flex; flex-direction: column; align-items: center; gap: 6px; } .loc-card:last-child { border-right: 0; } .loc-time { font-family: var(--ff-display); font-style: italic; font-size: 26px; font-weight: 300; color: var(--terra); font-variant-numeric: tabular-nums; line-height: 1; } .loc-type { font-size: 9px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--muted); margin-top: 4px; } .loc-name { font-family: var(--ff-display); font-size: 22px; font-weight: 400; color: var(--ink); margin-top: 12px; line-height: 1.2; } .loc-addr { color: var(--ink-soft); font-size: 13px; line-height: 1.5; margin-top: 6px; } .loc-link { margin-top: 16px; font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 0.5px solid var(--hairline); padding-bottom: 4px; transition: border-color 0.2s, color 0.2s; } .loc-link:hover { border-bottom-color: var(--terra); color: var(--terra); } .loc-link .arrow { font-size: 13px; letter-spacing: 0; margin-left: 4px; } /* Multi-pin map */ .map-pin-1 { top: 38%; left: 32%; transform: translate(-50%, -100%); } .map-pin-2 { top: 62%; left: 68%; transform: translate(-50%, -100%); } /* ──────────────────────────────────────────────── GIFTS (mesa de regalos + transferencia) ──────────────────────────────────────────────── */ .gift-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; } .gift-card { padding: 28px 22px; border: 0.5px solid var(--hairline); background: rgba(248, 240, 232, 0.4); display: flex; flex-direction: column; gap: 10px; text-align: center; } .gift-type { font-size: 9px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--muted); } .gift-name { font-family: var(--ff-display); font-size: 26px; font-weight: 400; color: var(--ink); line-height: 1; } .gift-meta { font-size: 12px; color: var(--ink-soft); letter-spacing: 0.04em; } .gift-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding: 14px 24px; border: 0.5px solid var(--ink); color: var(--ink); text-decoration: none; font-size: 10px; letter-spacing: 0.36em; text-transform: uppercase; font-weight: 400; transition: all 0.2s; align-self: center; } .gift-cta:hover { background: var(--ink); color: var(--cream); } .gift-cta .arrow { font-size: 13px; letter-spacing: 0; } .gift-bank { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; text-align: left; } .bank-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding-bottom: 8px; border-bottom: 0.5px dashed var(--hairline); } .bank-row:last-child { border-bottom: 0; padding-bottom: 0; } .bank-lbl { font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted); } .bank-val { font-size: 13px; color: var(--ink); word-break: break-all; } .bank-val.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; letter-spacing: 0.04em; } .bank-copy { appearance: none; background: transparent; border: 0.5px solid var(--hairline); color: var(--ink-soft); font-family: var(--ff-body); font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; padding: 5px 9px; cursor: pointer; transition: all 0.15s; white-space: nowrap; } .bank-copy:hover { border-color: var(--terra); color: var(--terra); } /* ──────────────────────────────────────────────── SIDE NAV (desktop) + HAMBURGER (mobile) ──────────────────────────────────────────────── */ .side-nav { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 150; display: flex; flex-direction: column; gap: 4px; opacity: 0; pointer-events: none; transition: opacity 600ms ease 1000ms; } .side-nav.is-visible { opacity: 1; pointer-events: auto; } .side-nav a { position: relative; display: flex; align-items: center; justify-content: flex-end; padding: 8px 14px 8px 0; text-decoration: none; color: var(--ink); } .side-nav .sn-dot { display: block; width: 6px; height: 6px; border-radius: 50%; background: rgba(42, 49, 66, 0.25); transition: all 0.25s ease; } .side-nav a.is-active .sn-dot { background: var(--terra); width: 8px; height: 8px; } .side-nav .sn-label { position: absolute; right: 26px; top: 50%; transform: translateY(-50%) translateX(8px); font-family: var(--ff-body); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink); background: rgba(244, 235, 228, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 6px 12px; border-radius: 2px; border: 0.5px solid var(--hairline); opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; white-space: nowrap; } .side-nav a:hover .sn-label, .side-nav a:focus-visible .sn-label { opacity: 1; transform: translateY(-50%) translateX(0); } /* Mobile hamburger button — hidden on desktop */ .nav-toggle { position: fixed; top: 18px; left: 18px; width: 40px; height: 40px; border-radius: 50%; background: rgba(244, 235, 228, 0.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 0.5px solid var(--hairline); display: none; align-items: center; justify-content: center; flex-direction: column; gap: 4px; cursor: pointer; z-index: 250; opacity: 0; transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s; padding: 0; } .nav-toggle.is-visible { opacity: 1; transform: translateY(0); } .nav-toggle span { display: block; width: 16px; height: 1px; background: var(--ink); transition: transform 0.25s, opacity 0.25s; } .nav-toggle.is-open { background: var(--ink); } .nav-toggle.is-open span { background: var(--cream); } .nav-toggle.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } .nav-overlay { position: fixed; inset: 0; background: var(--cream); z-index: 240; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .nav-overlay.is-open { opacity: 1; pointer-events: auto; } .nav-overlay::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 30%, rgba(200, 154, 142, 0.08), transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(42, 49, 66, 0.05), transparent 60%); pointer-events: none; } .nav-overlay ul { list-style: none; padding: 0; margin: 0; text-align: center; display: flex; flex-direction: column; gap: 4px; position: relative; } .nav-overlay li { opacity: 0; transform: translateY(12px); transition: opacity 0.4s ease, transform 0.4s ease; } .nav-overlay.is-open li { opacity: 1; transform: translateY(0); } .nav-overlay a { display: block; padding: 14px 24px; font-family: var(--ff-display); font-style: italic; font-size: 32px; font-weight: 300; color: var(--ink); text-decoration: none; letter-spacing: 0.005em; transition: color 0.18s; } .nav-overlay a:hover, .nav-overlay a:focus { color: var(--terra); } /* ──────────────────────────────────────────────── SITE FOOTER (branding GNZ Invitaciones) ──────────────────────────────────────────────── */ .site-footer { margin-top: 0; padding: 56px 28px 64px; text-align: center; background: var(--ink); color: rgba(244, 235, 228, 0.85); display: flex; flex-direction: column; align-items: center; gap: 18px; position: relative; } .site-footer::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 32px; height: 0.5px; background: rgba(244, 235, 228, 0.25); margin-top: 28px; } .site-footer .footer-logo { height: 56px; width: auto; max-width: 220px; object-fit: contain; opacity: 0.92; border-radius: 25px; } .site-footer .footer-text { font-family: var(--ff-display); font-style: italic; font-weight: 300; font-size: 20px; letter-spacing: 0.005em; color: rgba(244, 235, 228, 0.92); margin: 0; max-width: 340px; line-height: 1.35; } .site-footer .footer-links { display: flex; gap: 12px; margin-top: 4px; flex-wrap: wrap; justify-content: center; } .site-footer .footer-link { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border: 0.5px solid rgba(244, 235, 228, 0.3); border-radius: 999px; color: rgba(244, 235, 228, 0.92); text-decoration: none; font-family: var(--ff-body); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 400; transition: all 0.2s ease; } .site-footer .footer-link:hover { border-color: var(--terra); color: var(--terra); background: rgba(200, 154, 142, 0.08); } .site-footer .footer-link i { font-size: 14px; letter-spacing: 0; } /* Mobile adjustments */ @media (max-width: 480px) { .site-footer { padding: 48px 22px 56px; gap: 16px; } .site-footer .footer-logo { height: 48px; } .site-footer .footer-text { font-size: 18px; } .site-footer .footer-link { padding: 10px 16px; font-size: 9px; letter-spacing: 0.28em; } } /* ──────────────────────────────────────────────── SCROLL REVEAL EFFECTS Triggered via IntersectionObserver — class added once the element enters the viewport. Each section's direct children animate in cascade. ──────────────────────────────────────────────── */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1.0s cubic-bezier(.22, .61, .36, 1), transform 1.0s cubic-bezier(.22, .61, .36, 1); will-change: opacity, transform; } [data-reveal].is-revealed { opacity: 1; transform: translateY(0); } [data-reveal="fade"] { transform: none; } [data-reveal="fade"].is-revealed { transform: none; } [data-reveal="scale"] { transform: scale(1.06); transition: opacity 1.4s cubic-bezier(.22, .61, .36, 1), transform 1.6s cubic-bezier(.22, .61, .36, 1); } [data-reveal="scale"].is-revealed { transform: scale(1); } [data-reveal="slide-left"] { transform: translateX(-32px); } [data-reveal="slide-left"].is-revealed { transform: translateX(0); } [data-reveal="slide-right"] { transform: translateX(32px); } [data-reveal="slide-right"].is-revealed { transform: translateX(0); } /* Stagger children of any section marked [data-reveal-stagger] */ [data-reveal-stagger] > * { opacity: 0; transform: translateY(22px); transition: opacity 0.9s cubic-bezier(.22, .61, .36, 1), transform 0.9s cubic-bezier(.22, .61, .36, 1); will-change: opacity, transform; } [data-reveal-stagger].is-revealed > * { opacity: 1; transform: translateY(0); } [data-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay: 0ms; } [data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: 90ms; } [data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: 180ms; } [data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: 270ms; } [data-reveal-stagger].is-revealed > *:nth-child(5) { transition-delay: 360ms; } [data-reveal-stagger].is-revealed > *:nth-child(6) { transition-delay: 450ms; } [data-reveal-stagger].is-revealed > *:nth-child(7) { transition-delay: 540ms; } [data-reveal-stagger].is-revealed > *:nth-child(8) { transition-delay: 630ms; } /* Special: itinerary timeline dots ripple in one-by-one */ .itinerary[data-reveal-stagger] > * { transform: translateY(16px) translateX(-12px); } .itinerary[data-reveal-stagger].is-revealed > * { transform: translateY(0) translateX(0); } /* Countdown cells reveal as a single unit, then numbers tick in */ .countdown[data-reveal-stagger] > * { transform: translateY(0) scale(0.92); } .countdown[data-reveal-stagger].is-revealed > * { transform: translateY(0) scale(1); } /* Featured photo — slow scale-in with overlay sheen */ .featured .ft-frame { transform: scale(1.08); opacity: 0; transition: opacity 1.6s cubic-bezier(.22, .61, .36, 1), transform 2.2s cubic-bezier(.22, .61, .36, 1); } .featured.is-revealed .ft-frame { transform: scale(1); opacity: 1; } /* Gallery photos fade-up individually */ .gallery .grid[data-reveal-stagger] > * { transform: translateY(36px) scale(1.02); transition: opacity 1.0s cubic-bezier(.22, .61, .36, 1), transform 1.2s cubic-bezier(.22, .61, .36, 1); } .gallery .grid[data-reveal-stagger].is-revealed > * { transform: translateY(0) scale(1); } .gallery .grid[data-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay: 0ms; } .gallery .grid[data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: 120ms; } .gallery .grid[data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: 240ms; } /* Quote glides into view with extra emphasis */ .quote[data-reveal] { transform: translateY(40px); transition: opacity 1.4s cubic-bezier(.22, .61, .36, 1), transform 1.4s cubic-bezier(.22, .61, .36, 1); } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { [data-reveal], [data-reveal-stagger] > *, .featured .ft-frame, .gallery .grid[data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ──────────────────────────────────────────────── RESPONSIVE ──────────────────────────────────────────────── */ /* Use dynamic viewport units where supported (handles mobile browser chrome) */ @supports (height: 100dvh) { html, body { min-height: 100dvh; } .envelope-stage { min-height: 100dvh; } .hero.has-photo { height: 92dvh; } } /* ════════════════════════════════════════════════ MOBILE-SPECIFIC DESIGN (≤ 768px) Real layout shifts, not just shrinking: – Hero photo fills the whole screen – Itinerary becomes a vertical timeline – Gallery stacks full-width – Section dividers gain a small blush ornament ════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Hide desktop side-nav, show mobile hamburger */ .side-nav { display: none; } .nav-toggle { display: flex; } /* Blessing: stack families vertically with center divider */ .blessing .families { grid-template-columns: 1fr; gap: 32px; margin-top: 36px; } .blessing .families .family:not(:last-child)::after { content: ""; display: block; width: 20px; height: 0.5px; background: var(--hairline); margin: 32px auto 0; } .blessing .family-padrinos { margin-top: 32px; } /* Locations: stack vertically */ .locations { grid-template-columns: 1fr; border-left: 0; border-right: 0; } .loc-card { border-right: 0; border-bottom: 0.5px solid var(--hairline); padding: 28px 18px; } .loc-card:last-child { border-bottom: 0; } /* Gifts: stack vertically */ .gift-cards { grid-template-columns: 1fr; gap: 14px; } .gift-card { padding: 28px 22px; } /* Hero: full viewport, cinematic */ .hero.has-photo { height: 100vh; height: 100dvh; min-height: 0; } .hero.has-photo .hero-bg { background-position: center 30%; filter: brightness(0.72) saturate(0.95); } .hero.has-photo .hero-bg::after { background: linear-gradient(180deg, rgba(20, 24, 35, 0.35) 0%, rgba(20, 24, 35, 0.05) 25%, rgba(20, 24, 35, 0.15) 55%, rgba(20, 24, 35, 0.75) 100%); } .hero.has-photo .you-are-invited { margin-bottom: 24px; letter-spacing: 0.6em; font-size: 9px; } .hero.has-photo .names { font-size: clamp(64px, 17vw, 110px); letter-spacing: -0.01em; } .hero.has-photo .amp { font-size: 0.55em; margin: 2px 0; } .hero.has-photo .meta { margin-top: 32px; margin-bottom: 72px; font-size: 10px; letter-spacing: 0.38em; } /* Section ornament — small blush dot replaces the hairline divider */ .section { border-top: 0; padding: 64px 0 28px; } .section.no-border { padding-top: 36px; } .section:not(.no-border):not(.hero) { position: relative; } .section:not(.no-border):not(.hero)::before { content: ""; position: absolute; top: 28px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; background: var(--terra); border-radius: 50%; opacity: 0.85; } .section:not(.no-border):not(.hero)::after { content: ""; position: absolute; top: 30px; left: 50%; transform: translateX(-50%); width: 1px; height: 1px; box-shadow: -14px 0 0 0.5px var(--terra), 14px 0 0 0.5px var(--terra); opacity: 0.45; } /* Itinerary → vertical timeline */ .itinerary { position: relative; margin: 36px 0 0 18px; padding-left: 28px; border-left: 0.5px solid var(--hairline); } .itinerary .it-row { display: block; grid-template-columns: none; padding: 0 0 36px; border-top: 0; position: relative; } .itinerary .it-row:last-child { border-bottom: 0; padding-bottom: 0; } .itinerary .it-row::before { content: ""; position: absolute; left: -33px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--terra); box-shadow: 0 0 0 4px var(--cream); } .itinerary .it-time { font-size: 22px; color: var(--terra); padding-top: 0; margin-bottom: 6px; display: block; } .itinerary .it-title { font-size: 20px; color: var(--ink); } .itinerary .it-desc { font-size: 14px; color: var(--ink-soft); margin-top: 4px; } /* Gallery → single column full-bleed */ .gallery .grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 14px; margin: 40px -22px 0; } .gallery .ph, .gallery .ph.ph-1, .gallery .ph.ph-2, .gallery .ph.ph-3, .gallery .ph.ph-4 { grid-column: 1; grid-row: auto; aspect-ratio: 4 / 5; } .gallery .ph.ph-2 { aspect-ratio: 3 / 4; } .gallery .ph.ph-3 { aspect-ratio: 3 / 4; } /* Dress code: photos vertical on mobile, more spacing */ .dresscode .code-art { aspect-ratio: 4 / 5; } /* RSVP: bigger touch targets */ .rsvp .yesno button { padding: 22px 8px; font-size: 24px; } .rsvp .submit { padding: 20px 28px; } .rsvp input[type="text"], .rsvp input[type="email"], .rsvp input[type="number"] { font-size: 17px; padding: 14px 0; } /* Quote: more breathing, slightly bigger */ .quote { padding: 60px 0; } .quote blockquote { font-size: 26px; line-height: 1.4; } /* Footer */ .footer { padding-top: 60px; } .footer .sign { font-size: 38px; } /* Music button — push down a bit on mobile to clear the notch / status */ .music-btn { top: max(18px, env(safe-area-inset-top, 18px)); } } /* Tablet — 481px to 768px: small refinements over mobile design */ @media (min-width: 481px) and (max-width: 768px) { .invitation { padding: 70px 32px 110px; } .invitation.has-hero-photo { padding-top: 0; } .hero.has-photo { margin-left: -32px; margin-right: -32px; } .featured { margin-left: -32px; margin-right: -32px; } .gallery .grid { margin-left: -32px; margin-right: -32px; } } /* Phone — 480px and below */ @media (max-width: 480px) { .invitation { padding: 60px 22px 100px; } .invitation.has-hero-photo { padding-top: 0; } .hero.has-photo { margin-left: -22px; margin-right: -22px; } .featured { margin-left: -22px; margin-right: -22px; } .section h2 { font-size: 36px; } .countdown .cd-num { font-size: 38px; } .countdown .cd-cell { padding: 30px 8px; } .dresscode .codes { gap: 16px; } .envelope-wrap { width: min(82vw, 360px); } .envelope-letter .monogram { font-size: 32px; } .wax-seal { width: 64px; height: 64px; margin: -32px 0 0 -32px; font-size: 19px; } } /* Small phones — 360px and below: tighter densities */ @media (max-width: 360px) { .invitation { padding: 48px 18px 80px; } .hero.has-photo { margin-left: -18px; margin-right: -18px; } .featured { margin-left: -18px; margin-right: -18px; } .gallery .grid { margin-left: -18px; margin-right: -18px; } .hero.has-photo .names { font-size: clamp(54px, 16vw, 84px); } .hero .meta { flex-direction: column; gap: 10px; } .hero .meta .sep { width: 1px; height: 18px; } .countdown .cd-cell { padding: 22px 4px; } .countdown .cd-num { font-size: 30px; } .countdown .cd-lbl { font-size: 8px; letter-spacing: 0.28em; } .section h2 { font-size: 30px; } .quote blockquote { font-size: 22px; } .itinerary { margin-left: 14px; padding-left: 22px; } .itinerary .it-row::before { left: -27px; } .itinerary .it-time { font-size: 20px; } .dresscode .codes { gap: 12px; } .dresscode .code-label { font-size: 18px; } .dresscode .code-desc { font-size: 12px; } .envelope-prelude .you { font-size: 22px; } .envelope-prelude .eyebrow { font-size: 9px; letter-spacing: 0.32em; } .envelope-cta { font-size: 10px; letter-spacing: 0.24em; } } /* Short / landscape phones — keep envelope intro and hero photo from overflowing */ @media (max-height: 640px) and (orientation: landscape) { .envelope-prelude { top: 6vh; } .envelope-prelude .you { font-size: 22px; } .envelope-cta { bottom: 6vh; } .envelope-wrap { width: min(48vw, 360px); } .hero.has-photo { min-height: 0; height: 100vh; } } @media (max-height: 560px) { .envelope-prelude { display: none; } .envelope-cta { bottom: 4vh; font-size: 10px; } .hero.has-photo { min-height: 0; height: 100vh; } } /* Wide desktops — keep music button comfortable */ @media (min-width: 1280px) { .music-btn { top: 24px; right: 24px; width: 44px; height: 44px; } }