/* ========================================================= MOR INVITACIONES — Plantilla de invitación digital Mobile-first. Paletas intercambiables vía [data-theme] en . ========================================================= */ /* ---------- Paletas de tema ---------- */ :root, [data-theme="rosa"] { --color-primary: #b8506a; --color-primary-dark: #8a3a4e; --color-secondary: #f3d9c9; --color-accent: #d9a066; --color-bg: #fffaf7; --color-bg-alt: #fbeee6; --color-text: #3a2c2c; --color-text-soft: #7a6a63; --gradient-hero: linear-gradient(160deg, #f3d9c9 0%, #f7e6dd 55%, #fffaf7 100%); } [data-theme="esmeralda"] { --color-primary: #1f5c4d; --color-primary-dark: #123f34; --color-secondary: #cfe3da; --color-accent: #b98d4a; --color-bg: #f7fbf9; --color-bg-alt: #e9f2ee; --color-text: #1e2b27; --color-text-soft: #5a6b65; --gradient-hero: linear-gradient(160deg, #cfe3da 0%, #e5f0ea 55%, #f7fbf9 100%); } [data-theme="dorado"] { --color-primary: #8a6d1f; --color-primary-dark: #5f4a12; --color-secondary: #efe0b8; --color-accent: #4a4137; --color-bg: #fffdf6; --color-bg-alt: #f6edd3; --color-text: #2c2717; --color-text-soft: #6b6250; --gradient-hero: linear-gradient(160deg, #efe0b8 0%, #f5ecd4 55%, #fffdf6 100%); } [data-theme="lila"] { --color-primary: #6d4e8a; --color-primary-dark: #4a3360; --color-secondary: #e3d6ef; --color-accent: #b98ec9; --color-bg: #fbf8fd; --color-bg-alt: #f1e9f7; --color-text: #2c2333; --color-text-soft: #6d6076; --gradient-hero: linear-gradient(160deg, #e3d6ef 0%, #eee5f5 55%, #fbf8fd 100%); } /* ---------- Reset base ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: "Poppins", "Segoe UI", sans-serif; background: var(--color-bg); color: var(--color-text); line-height: 1.6; overflow-x: hidden; } h1, h2, h3, .font-display { font-family: "Playfair Display", "Georgia", serif; } a { color: inherit; text-decoration: none; } .hidden { display: none !important; } img { max-width: 100%; display: block; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } .container { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 20px; } .section { padding: 64px 0; } .section-title { text-align: center; font-size: 2rem; color: var(--color-primary-dark); margin-bottom: 8px; } .section-subtitle { text-align: center; color: var(--color-text-soft); font-size: 0.95rem; margin-bottom: 36px; } .divider { width: 60px; height: 3px; background: var(--color-accent); margin: 16px auto 32px; border-radius: 2px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: 999px; font-weight: 600; font-size: 0.95rem; transition: transform 0.2s ease, box-shadow 0.2s ease; } .btn-primary { background: var(--color-primary); color: #fff; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.35); } .btn-primary:hover { transform: translateY(-2px); } .btn-outline { background: transparent; border: 2px solid var(--color-primary); color: var(--color-primary-dark); } .btn-whatsapp { background: #25d366; color: #fff; } /* ---------- Placeholder de imagen (hasta recibir las fotos reales) ---------- */ .img-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: repeating-linear-gradient( 45deg, var(--color-bg-alt), var(--color-bg-alt) 10px, var(--color-secondary) 10px, var(--color-secondary) 20px ); border: 2px dashed var(--color-accent); border-radius: 16px; color: var(--color-text-soft); font-size: 0.8rem; text-align: center; padding: 12px; width: 100%; height: 100%; min-height: 160px; } .img-placeholder .icon { font-size: 1.8rem; } /* ---------- Pantalla de bienvenida ---------- */ #welcome-screen { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px; background: var(--gradient-hero); transition: opacity 0.6s ease, visibility 0.6s ease; } #welcome-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; } .welcome-kicker { letter-spacing: 2px; text-transform: uppercase; font-size: 0.75rem; color: var(--color-text-soft); margin-bottom: 18px; } .welcome-names { font-size: 2.6rem; color: var(--color-primary-dark); margin-bottom: 6px; } .welcome-guest { font-size: 1.05rem; color: var(--color-primary); margin-bottom: 28px; } .welcome-date { font-size: 0.95rem; color: var(--color-text-soft); margin-bottom: 40px; } .tap-button { width: 96px; height: 96px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 1.8rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.4); animation: pulse 2.2s infinite; } .tap-hint { margin-top: 16px; font-size: 0.85rem; color: var(--color-text-soft); } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } /* ---------- Nav ---------- */ #site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(6px); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); } .nav-brand { font-family: "Playfair Display", serif; font-weight: 600; color: var(--color-primary-dark); font-size: 1.1rem; } .nav-toggle { font-size: 1.4rem; color: var(--color-primary-dark); } .nav-menu { position: fixed; top: 60px; right: -100%; width: 70%; max-width: 280px; height: calc(100vh - 60px); background: var(--color-bg); box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08); padding: 24px; transition: right 0.35s ease; display: flex; flex-direction: column; gap: 18px; } .nav-menu.open { right: 0; } .nav-menu a { font-size: 1rem; color: var(--color-text); padding: 6px 0; border-bottom: 1px solid var(--color-bg-alt); } /* ---------- Hero ---------- */ #hero { padding-top: 120px; text-align: center; background: var(--gradient-hero); } #hero .hero-image { aspect-ratio: 4 / 3; max-width: 420px; margin: 0 auto 28px; } #hero .claim { font-size: 1rem; letter-spacing: 1px; color: var(--color-text-soft); text-transform: uppercase; margin-bottom: 10px; } #hero .names { font-size: 2.8rem; color: var(--color-primary-dark); } #hero .date-human { margin-top: 14px; font-size: 1.05rem; color: var(--color-primary); } /* ---------- Cuenta regresiva ---------- */ #countdown { background: var(--color-bg-alt); } .countdown-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 480px; margin: 0 auto; } .countdown-item { background: #fff; border-radius: 16px; padding: 18px 6px; text-align: center; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.15); } .countdown-number { font-size: 1.8rem; font-weight: 700; color: var(--color-primary); font-family: "Playfair Display", serif; } .countdown-label { font-size: 0.7rem; text-transform: uppercase; color: var(--color-text-soft); letter-spacing: 1px; } /* ---------- Historia ---------- */ #historia .historia-img { aspect-ratio: 1 / 1; max-width: 320px; margin: 0 auto 28px; } #historia .frase { font-family: "Playfair Display", serif; font-style: italic; text-align: center; color: var(--color-primary-dark); font-size: 1.1rem; margin-bottom: 20px; } #historia .texto { text-align: center; color: var(--color-text-soft); max-width: 520px; margin: 0 auto; } /* ---------- Ubicaciones ---------- */ #detalles { background: var(--color-bg-alt); } .location-cards { display: grid; gap: 20px; } .location-card { background: #fff; border-radius: 20px; padding: 26px; text-align: center; box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.15); } .location-card .icon { font-size: 1.8rem; margin-bottom: 10px; } .location-card h3 { color: var(--color-primary-dark); margin-bottom: 6px; } .location-card p { color: var(--color-text-soft); font-size: 0.92rem; margin-bottom: 4px; } .location-card .btn { margin-top: 16px; } /* ---------- Dress code ---------- */ #dresscode { text-align: center; } .dresscode-badge { display: inline-flex; align-items: center; gap: 10px; background: var(--color-secondary); color: var(--color-primary-dark); padding: 10px 22px; border-radius: 999px; font-weight: 600; margin-bottom: 18px; } #dresscode p { max-width: 460px; margin: 0 auto; color: var(--color-text-soft); } /* ---------- Galería ---------- */ #galeria { background: var(--color-bg-alt); } .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .gallery-grid .img-placeholder, .gallery-grid img { aspect-ratio: 1 / 1; border-radius: 12px; cursor: pointer; } /* Lightbox */ #lightbox { position: fixed; inset: 0; background: rgba(20, 12, 12, 0.92); display: flex; align-items: center; justify-content: center; z-index: 90; padding: 20px; } #lightbox.hidden { display: none; } #lightbox img, #lightbox .img-placeholder { max-width: 100%; max-height: 80vh; } #lightbox-close { position: absolute; top: 20px; right: 24px; color: #fff; font-size: 2rem; } /* ---------- Álbum QR ---------- */ #album-qr { text-align: center; } .qr-box { width: 180px; height: 180px; margin: 0 auto 20px; } /* ---------- RSVP ---------- */ #rsvp { background: var(--color-bg-alt); } .rsvp-form { background: #fff; border-radius: 20px; padding: 28px; box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.15); display: flex; flex-direction: column; gap: 16px; } .form-group label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--color-text-soft); margin-bottom: 6px; } .form-group input[type="text"], .form-group input[type="number"], .form-group textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--color-secondary); border-radius: 10px; font-family: inherit; font-size: 0.95rem; background: var(--color-bg); } .form-group textarea { resize: vertical; min-height: 80px; } .radio-group { display: flex; gap: 10px; } .radio-option { flex: 1; text-align: center; border: 2px solid var(--color-secondary); border-radius: 12px; padding: 12px; font-weight: 600; color: var(--color-text-soft); } .radio-option input { display: none; } .radio-option.selected { border-color: var(--color-primary); background: var(--color-secondary); color: var(--color-primary-dark); } .rsvp-actions { display: flex; flex-direction: column; gap: 12px; } .rsvp-success { display: none; text-align: center; padding: 24px; background: #fff; border-radius: 20px; box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.15); } .rsvp-success.show { display: block; } .rsvp-success .icon { font-size: 2.4rem; margin-bottom: 10px; } /* ---------- Regalos ---------- */ #regalos { text-align: center; } .gift-card { background: #fff; border: 2px dashed var(--color-accent); border-radius: 20px; padding: 28px; max-width: 400px; margin: 0 auto; } .alias-box { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--color-bg-alt); border-radius: 12px; padding: 12px 16px; margin: 16px 0; font-weight: 700; color: var(--color-primary-dark); letter-spacing: 0.5px; } .copy-btn { font-size: 1.1rem; color: var(--color-primary); } /* ---------- Trivia ---------- */ #trivia { background: var(--color-bg-alt); text-align: center; } .trivia-card { background: #fff; border-radius: 20px; padding: 26px; box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.15); max-width: 480px; margin: 0 auto; } .trivia-question { font-family: "Playfair Display", serif; font-size: 1.15rem; color: var(--color-primary-dark); margin-bottom: 20px; } .trivia-options { display: flex; flex-direction: column; gap: 10px; } .trivia-option { border: 2px solid var(--color-secondary); border-radius: 12px; padding: 12px; font-weight: 500; text-align: left; } .trivia-option.correct { border-color: #2f9e58; background: #e7f8ee; } .trivia-option.incorrect { border-color: #c94b4b; background: #fbe9e9; } .trivia-progress { font-size: 0.8rem; color: var(--color-text-soft); margin-bottom: 14px; } /* ---------- Footer ---------- */ #site-footer { text-align: center; padding: 40px 20px 100px; color: var(--color-text-soft); font-size: 0.85rem; } #site-footer .brand { font-family: "Playfair Display", serif; color: var(--color-primary-dark); font-size: 1.05rem; margin-bottom: 6px; } /* ---------- Botones flotantes ---------- */ .floating-btn { position: fixed; bottom: 20px; z-index: 70; width: 54px; height: 54px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.35); } #music-toggle { left: 20px; } #cta-rsvp { right: 20px; } /* ---------- Selector de tema (solo demo / interno) ---------- */ #theme-demo-switcher { position: fixed; top: 70px; right: 12px; z-index: 65; background: rgba(255, 255, 255, 0.9); border-radius: 14px; padding: 8px; display: flex; gap: 6px; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.25); } .theme-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); } .theme-swatch[data-theme-value="rosa"] { background: #b8506a; } .theme-swatch[data-theme-value="esmeralda"] { background: #1f5c4d; } .theme-swatch[data-theme-value="dorado"] { background: #8a6d1f; } .theme-swatch[data-theme-value="lila"] { background: #6d4e8a; } /* ========================================================= Panel de administración (admin.html) ========================================================= */ .admin-header { background: var(--color-primary); color: #fff; padding: 24px 20px; } .admin-header h1 { font-size: 1.4rem; } .admin-header p { font-size: 0.85rem; opacity: 0.9; } .admin-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 20px; } .stat-card { background: #fff; border-radius: 14px; padding: 16px; text-align: center; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.15); } .stat-number { font-size: 1.6rem; font-weight: 700; color: var(--color-primary); font-family: "Playfair Display", serif; } .stat-label { font-size: 0.72rem; color: var(--color-text-soft); text-transform: uppercase; letter-spacing: 0.5px; } .admin-actions { display: flex; gap: 10px; padding: 0 20px 20px; flex-wrap: wrap; } .admin-table-wrap { padding: 0 20px 60px; overflow-x: auto; } table.admin-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; font-size: 0.85rem; min-width: 560px; } table.admin-table th, table.admin-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--color-bg-alt); } table.admin-table th { background: var(--color-bg-alt); color: var(--color-primary-dark); font-size: 0.75rem; text-transform: uppercase; } .badge-si { color: #2f9e58; font-weight: 700; } .badge-no { color: #c94b4b; font-weight: 700; } .empty-state { text-align: center; padding: 60px 20px; color: var(--color-text-soft); } @media print { #music-toggle, #cta-rsvp, .admin-actions, #theme-demo-switcher { display: none !important; } } /* ---------- Responsive ---------- */ @media (min-width: 640px) { .countdown-grid { gap: 20px; } .location-cards { grid-template-columns: 1fr 1fr; } .gallery-grid { grid-template-columns: repeat(3, 1fr); } .admin-stats { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 900px) { .welcome-names, #hero .names { font-size: 3.4rem; } }