/* ========================================================================== SAVE THE DATE — Michael & Arianne Hoja de estilos única. Escrita mobile-first. ÍNDICE 01. Variables (colores, tipografías, espaciado) 02. Reset ligero y base 03. Utilidades y piezas reutilizables 04. Textura de papel (grano) 05. Pantalla de entrada (portal) 06. Barra de navegación 07. Portada (hero) 08. Mensaje para el invitado 09. Detalles 10. Qué es un Save the Date 11. Cuenta regresiva 12. Nuestra historia 13. Promesa 14. Galería 15. Preguntas frecuentes 16. Cierre y pie 17. Lightbox 18. Animaciones de aparición 19. Puntos de quiebre (tablet / laptop / escritorio) 20. Reducción de movimiento e impresión ========================================================================== */ /* ========================================================================== 01. VARIABLES PARA CAMBIAR LOS COLORES DEL SITIO, EDITA SOLO ESTE BLOQUE. ========================================================================== */ :root { /* --- Paleta boho --- */ --forest-green: #26351f; --deep-olive: #35452b; --sage-green: #78856a; --warm-cream: #f5efd7; --soft-ivory: #fbf8ee; --sand-beige: #d8c7a5; --warm-taupe: #9b8264; --chocolate: #4a3526; --muted-gold: #b4955f; --dark-text: #28261f; --soft-white: #fffdf7; /* --- Roles (usa estos en el resto del CSS) --- */ --fondo: var(--soft-ivory); --fondo-alt: var(--warm-cream); --fondo-oscuro: var(--forest-green); --texto: var(--dark-text); --texto-suave: #5a5346; --texto-claro: var(--soft-white); --acento: var(--muted-gold); --linea: rgba(155, 130, 100, 0.32); /* --- Tipografías --- */ --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif; --font-body: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif; --font-script: "Allura", "Segoe Script", cursive; /* --- Escala de espaciado --- */ --e1: 0.5rem; --e2: 1rem; --e3: 1.5rem; --e4: 2.5rem; --e5: 4rem; --e6: 6rem; /* --- Medidas --- */ --ancho: 72rem; --ancho-angosto: 44rem; --borde-suave: 1.25rem; --alto-barra: 3.5rem; /* --- Curva y duración de las transiciones --- */ --suave: cubic-bezier(0.22, 0.61, 0.36, 1); --dur: 0.5s; /* --- Grano de papel: ruido SVG, sin imágenes externas --- */ --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); } /* ========================================================================== 02. RESET LIGERO Y BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { /* clip (no hidden) para no romper position: sticky */ overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { overflow-x: clip; background-color: var(--fondo); color: var(--texto); font-family: var(--font-body); font-weight: 300; font-size: 1.0625rem; line-height: 1.75; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* La pantalla de entrada bloquea el scroll hasta que el invitado entra: no debe aparecer barra de scroll ni poder moverse la página por detrás. OJO — hay que declararlo en Y en . Ponerlo solo en NO funciona: el overflow de body se propaga al viewport únicamente cuando tiene overflow visible, y aquí html usa overflow-x: clip (para evitar el scroll horizontal), lo que corta esa propagación. */ html.js:not(.portal-omitido):not(.portal-cerrado), html.js:not(.portal-omitido):not(.portal-cerrado) body { overflow: hidden; /* Refuerzo para iOS, donde overflow: hidden solo no siempre detiene el arrastre elástico de la página. */ height: 100%; overscroll-behavior: none; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } a { color: var(--chocolate); text-decoration-thickness: 1px; text-underline-offset: 0.2em; } h1, h2, h3 { font-family: var(--font-display); font-weight: 300; line-height: 1.12; letter-spacing: 0.01em; text-wrap: balance; } p { text-wrap: pretty; } /* Foco visible y consistente en todo el sitio */ :focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 3px; } /* Que el ancla no quede debajo de la barra fija */ :target { scroll-margin-top: calc(var(--alto-barra) + var(--e2)); } section[id] { scroll-margin-top: calc(var(--alto-barra) + var(--e2)); } /* Sprite de íconos: invisible pero usable por (display:none lo rompería) */ .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* ========================================================================== 03. UTILIDADES Y PIEZAS REUTILIZABLES ========================================================================== */ .sr-solo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .salto-enlace { position: absolute; left: var(--e2); top: -4rem; z-index: 1200; padding: 0.6rem 1rem; background: var(--forest-green); color: var(--texto-claro); border-radius: 0 0 0.5rem 0.5rem; text-decoration: none; transition: top 0.2s var(--suave); } .salto-enlace:focus { top: 0; } .envoltura { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2.5rem); } .envoltura--angosta { max-width: var(--ancho-angosto); } .seccion { padding-block: clamp(3.5rem, 11vw, 7rem); } .encabezado { margin-bottom: clamp(2rem, 6vw, 3.25rem); text-align: center; } /* Cejilla: el texto pequeño en mayúsculas espaciadas, detalle de papelería */ .cejilla { font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.34em; text-transform: uppercase; color: var(--warm-taupe); margin-bottom: var(--e2); } .cejilla--claro { color: var(--sand-beige); } .titulo { font-size: clamp(2rem, 8.5vw, 3.25rem); color: var(--forest-green); } .titulo--claro { color: var(--soft-white); } /* Cursiva de acento: uso muy limitado, solo para dar aire */ .amp { font-family: var(--font-script); font-size: 1.35em; line-height: 0.7; color: var(--acento); font-weight: 400; } /* Rama de olivo (SVG del sprite) */ .rama { width: clamp(88px, 26vw, 132px); height: auto; aspect-ratio: 120 / 34; margin-inline: auto; color: var(--sage-green); opacity: 0.75; } .rama--claro { color: var(--sand-beige); opacity: 0.9; } /* Botón principal */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; /* área cómoda para tocar en celular */ padding: 0.85rem 1.9rem; font-family: var(--font-body); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; color: var(--texto-claro); background: var(--forest-green); border: 1px solid var(--forest-green); border-radius: 999px; transition: background-color 0.3s var(--suave), color 0.3s var(--suave), transform 0.3s var(--suave); } .btn:hover { background: var(--deep-olive); } .btn:active { transform: translateY(1px); } .btn--claro { color: var(--forest-green); background: var(--soft-white); border-color: var(--soft-white); } .btn--claro:hover { background: var(--warm-cream); } .firma { font-family: var(--font-script); font-size: clamp(1.7rem, 6vw, 2.2rem); line-height: 1.2; color: var(--warm-taupe); margin-top: var(--e3); } /* Marcos de foto -------------------------------------------------------- */ /* Arco boho: redondeado arriba, recto abajo */ .arco, .marco { margin: 0; position: relative; } .arco img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 50% 50% var(--borde-suave) var(--borde-suave) / 34% 34% var(--borde-suave) var(--borde-suave); box-shadow: 0 18px 42px -28px rgba(38, 53, 31, 0.5); } /* Filete fino siguiendo el arco: detalle de papelería */ .arco::after { content: ""; position: absolute; inset: -0.6rem; border: 1px solid var(--linea); border-radius: 50% 50% var(--borde-suave) var(--borde-suave) / 32% 32% var(--borde-suave) var(--borde-suave); pointer-events: none; } .marco img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--borde-suave); box-shadow: 0 18px 42px -28px rgba(38, 53, 31, 0.5); } .marco::after { content: ""; position: absolute; inset: 0.75rem -0.75rem -0.75rem 0.75rem; border: 1px solid var(--linea); border-radius: var(--borde-suave); z-index: -1; } /* ========================================================================== 04. TEXTURA DE PAPEL Capa de grano sobre todo el sitio: da sensación de papel impreso. ========================================================================== */ body::after { content: ""; position: fixed; inset: 0; z-index: 900; background-image: var(--grano); background-size: 180px 180px; opacity: 0.05; pointer-events: none; mix-blend-mode: multiply; } /* ========================================================================== 05. PANTALLA DE ENTRADA (PORTAL) Solo se muestra si hay JavaScript activo (clase .js en ). ========================================================================== */ .portal { display: none; } html.js:not(.portal-omitido):not(.portal-cerrado) .portal { display: grid; place-items: center; position: fixed; inset: 0; z-index: 1000; padding: var(--e3); background: radial-gradient(120% 90% at 50% 0%, var(--deep-olive) 0%, var(--forest-green) 62%); text-align: center; } /* Ruido sutil también en el portal */ .portal::before { content: ""; position: absolute; inset: 0; background-image: var(--grano); background-size: 180px 180px; opacity: 0.08; pointer-events: none; } .portal--saliendo { opacity: 0; transition: opacity 0.6s var(--suave); } .portal__caja { position: relative; max-width: 26rem; padding: clamp(2rem, 9vw, 3.25rem) clamp(1.25rem, 7vw, 2.5rem); border: 1px solid rgba(216, 199, 165, 0.35); border-radius: 999px 999px var(--borde-suave) var(--borde-suave) / 12rem 12rem var(--borde-suave) var(--borde-suave); } .portal__script { font-family: var(--font-script); font-size: clamp(1.6rem, 7vw, 2.1rem); color: var(--sand-beige); line-height: 1; } .portal__nombres { font-family: var(--font-display); font-size: clamp(2.1rem, 11vw, 3.1rem); font-weight: 300; line-height: 1.15; color: var(--soft-white); margin-top: var(--e2); } .portal__fecha { font-size: 0.75rem; letter-spacing: 0.3em; color: var(--sand-beige); margin-top: var(--e2); } .portal__linea { font-size: 0.95rem; color: rgba(251, 248, 238, 0.78); margin: var(--e3) auto var(--e4); max-width: 20rem; } .rama--portal { margin-bottom: var(--e2); } /* ========================================================================== 05b. MENÚ "AÑADIR AL CALENDARIO" Construido sobre

: abre y cierra sin JavaScript. ========================================================================== */ .cal { position: relative; display: inline-block; text-align: left; } /* El

se comporta como el botón principal */ .cal__disparador { cursor: pointer; list-style: none; /* quita el triangulito por defecto */ user-select: none; } .cal__disparador::-webkit-details-marker { display: none; } /* Safari */ .cal__disparador::marker { content: ""; } .cal__flecha { flex: none; width: 16px; height: 16px; transform: rotate(90deg); transition: transform 0.3s var(--suave); } .cal[open] .cal__flecha { transform: rotate(-90deg); } .cal__menu { position: absolute; z-index: 60; top: calc(100% + 0.6rem); left: 0; min-width: min(20rem, 84vw); list-style: none; padding: 0.4rem; background: var(--soft-white); border: 1px solid var(--linea); border-radius: var(--borde-suave); box-shadow: 0 26px 50px -28px rgba(38, 53, 31, 0.5); } /* En pantallas angostas el menú se centra bajo el botón para no salirse */ @media (max-width: 30rem) { .cal { display: block; } .cal__menu { left: 50%; transform: translateX(-50%); min-width: min(22rem, 90vw); } } .cal__opcion { display: block; padding: 0.7rem 0.9rem; min-height: 2.9rem; /* cómodo para el dedo */ text-decoration: none; border-radius: 0.7rem; transition: background-color 0.22s var(--suave); } .cal__opcion:hover { background: var(--warm-cream); } .cal__nombre { display: block; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.25; color: var(--forest-green); } .cal__pista { display: block; margin-top: 0.1rem; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--warm-taupe); } /* Separador finísimo entre opciones, detalle de papelería */ .cal__menu li + li { border-top: 1px solid rgba(155, 130, 100, 0.16); } /* La animación de apertura solo si el navegador la soporta y el usuario no pidió menos movimiento (ver sección 20). */ @supports (interpolate-size: allow-keywords) { .cal__menu { animation: cal-entra 0.24s var(--suave); } } @keyframes cal-entra { from { opacity: 0; transform: translateY(-0.4rem); } to { opacity: 1; } } @media (max-width: 30rem) { @keyframes cal-entra { from { opacity: 0; transform: translateX(-50%) translateY(-0.4rem); } to { opacity: 1; transform: translateX(-50%); } } } /* ========================================================================== 06. BARRA DE NAVEGACIÓN Fija, delgada. Aparece cuando el invitado pasa la portada. ========================================================================== */ .barra { position: fixed; top: 0; left: 0; right: 0; z-index: 800; background: rgba(251, 248, 238, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); transform: translateY(-100%); transition: transform 0.45s var(--suave); } .barra--visible { transform: translateY(0); } .barra__fila { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--e2); width: 100%; max-width: var(--ancho); min-height: var(--alto-barra); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2.5rem); } .barra__iniciales { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.2em; color: var(--forest-green); text-decoration: none; } .barra__toggle { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-right: -0.5rem; color: var(--forest-green); border-radius: 999px; } .barra__icono { width: 24px; height: 24px; } .barra__icono--cerrar { display: none; } .barra__toggle[aria-expanded="true"] .barra__icono--abrir { display: none; } .barra__toggle[aria-expanded="true"] .barra__icono--cerrar { display: block; } /* Menú móvil: tarjeta compacta, no ocupa toda la pantalla */ .nav { position: absolute; top: calc(100% + 0.5rem); right: clamp(1.25rem, 5vw, 2.5rem); width: min(78vw, 20rem); background: var(--soft-white); border: 1px solid var(--linea); border-radius: var(--borde-suave); box-shadow: 0 24px 48px -30px rgba(38, 53, 31, 0.45); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-0.5rem); transition: opacity 0.28s var(--suave), transform 0.28s var(--suave), visibility 0.28s; } .nav--abierto { opacity: 1; visibility: visible; transform: translateY(0); } .nav__lista { list-style: none; padding: 0.5rem; } .nav__lista a { display: block; padding: 0.75rem 0.9rem; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--deep-olive); text-decoration: none; border-radius: 0.6rem; transition: background-color 0.25s var(--suave); } .nav__lista a:hover { background: var(--warm-cream); } /* ========================================================================== 07. PORTADA (HERO) Composición editorial: la foto es el elemento principal y el texto vive sobre el papel. Así ningún rostro queda tapado por letras. ========================================================================== */ .hero { background: var(--fondo); } .hero__media { position: relative; isolation: isolate; } .hero__img { width: 100%; height: min(74vh, 34rem); object-fit: cover; } /* Degradado que funde la foto con el papel y sostiene la cursiva */ .hero__velo { position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient( to bottom, rgba(38, 53, 31, 0) 0%, rgba(38, 53, 31, 0.32) 55%, rgba(251, 248, 238, 0.95) 99%, var(--fondo) 100% ); } .hero__script { position: absolute; left: 0; right: 0; bottom: 0.4rem; font-family: var(--font-script); font-size: clamp(2.1rem, 11vw, 3.4rem); line-height: 1; text-align: center; color: var(--chocolate); } .hero__panel { max-width: 40rem; margin-inline: auto; padding: clamp(1.75rem, 7vw, 3rem) clamp(1.25rem, 5vw, 2.5rem) clamp(3rem, 9vw, 4.5rem); text-align: center; } .hero__nombres { display: flex; flex-direction: column; align-items: center; gap: 0.1em; font-size: clamp(2.6rem, 15vw, 4.5rem); color: var(--forest-green); } .hero__nombre { display: block; } .hero__intro { max-width: 30rem; margin: var(--e3) auto 0; color: var(--texto-suave); } .hero__fecha { margin-block: var(--e4) var(--e3); } .hero__reserva { font-family: var(--font-display); font-size: clamp(1.35rem, 5.5vw, 1.75rem); font-style: italic; color: var(--chocolate); margin-top: var(--e2); } .hero__stamp { font-family: var(--font-display); font-size: clamp(1.5rem, 7vw, 2.1rem); letter-spacing: 0.16em; color: var(--forest-green); margin-top: var(--e1); } .hero__lugar { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--warm-taupe); margin-top: var(--e2); } .hero__nota { font-size: 0.8rem; line-height: 1.6; color: var(--texto-suave); max-width: 22rem; margin: var(--e2) auto 0; } /* Confirmación tras descargar el calendario */ .hero__nota--ok { color: var(--deep-olive); font-weight: 400; } .hero__nota--error { color: #8a3b2a; } /* ========================================================================== 08. MENSAJE PARA EL INVITADO ========================================================================== */ .mensaje { background: var(--fondo-alt); } .mensaje__grid { display: grid; gap: clamp(2.5rem, 9vw, 4rem); align-items: center; } .mensaje__texto { text-align: center; } .mensaje__texto p + p { margin-top: var(--e2); } .mensaje__texto > p { color: var(--texto-suave); } .mensaje__texto .titulo { margin-bottom: var(--e3); } .arco { max-width: 26rem; margin-inline: auto; } /* ========================================================================== 09. DETALLES ========================================================================== */ .tarjetas { list-style: none; padding: 0; display: grid; gap: var(--e3); } .tarjeta { padding: clamp(1.75rem, 7vw, 2.25rem) var(--e3); text-align: center; background: var(--soft-white); border: 1px solid var(--linea); border-radius: 999px 999px var(--borde-suave) var(--borde-suave) / 4.5rem 4.5rem var(--borde-suave) var(--borde-suave); } .tarjeta__ico { width: 30px; height: 30px; margin: 0 auto var(--e2); color: var(--sage-green); } .tarjeta__label { font-family: var(--font-body); font-size: 0.65rem; font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase; color: var(--warm-taupe); } .tarjeta__valor { font-family: var(--font-display); font-size: clamp(1.25rem, 5vw, 1.5rem); line-height: 1.3; color: var(--forest-green); margin-top: 0.35rem; } .tarjeta__nota { margin-top: 0.3rem; font-size: 0.8rem; line-height: 1.4; color: var(--texto-suave); } /* --- Tarjeta del mapa --------------------------------------------------- Mapa real de Google en un