/* invitanunta — single-invitation template One shared skeleton, three palettes/motifs switched via [data-style] on . Reuses tokens from style.css (load style.css before this file). */ body[data-style="eleganta"] { --i-accent: #a8763f; --i-accent-deep: #86602f; --i-paper: #faf6ef; --i-paper-alt: #f2ebdd; --i-ink: #2b241d; --i-line: #e3d8c3; --i-font-display: Georgia, "Iowan Old Style", "Palatino Linotype", serif; } body[data-style="florala"] { --i-accent: #b8615a; --i-accent-deep: #954b45; --i-paper: #fbf3ef; --i-paper-alt: #f4e3dd; --i-ink: #34241f; --i-line: #ecd4cb; --i-font-display: Georgia, "Iowan Old Style", "Palatino Linotype", serif; } body[data-style="minimala"] { --i-accent: #2b241d; --i-accent-deep: #000000; --i-paper: #ffffff; --i-paper-alt: #f4f3f0; --i-ink: #201b16; --i-line: #e3e0d8; --i-font-display: "Iowan Old Style", "Palatino Linotype", Georgia, serif; } body.invite-body { background: var(--i-paper); color: var(--i-ink); } .invite-wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; } /* top bar */ .invite-top { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; font-size: 13px; color: var(--ink-faint); } .invite-top a.back { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); } .invite-top .exemplu-badge { background: var(--i-paper-alt); border: 1px solid var(--i-line); color: var(--i-accent-deep); padding: 5px 12px; border-radius: 999px; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; } /* hero */ .invite-hero { text-align: center; padding: 40px 0 56px; position: relative; } .invite-hero .flora { width: 130px; margin: 0 auto 18px; color: var(--i-accent); } .invite-hero .pre { font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--i-accent-deep); margin-bottom: 18px; } .invite-hero .names { font-family: var(--i-font-display); font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.08; } .invite-hero .names .amp { color: var(--i-accent); font-style: italic; } .invite-hero .date-line { margin-top: 20px; font-size: 17px; color: var(--i-ink); font-family: var(--i-font-display); } .invite-hero .venue-line { margin-top: 6px; font-size: 14.5px; color: var(--ink-soft); } /* countdown */ .countdown { display: flex; justify-content: center; gap: 14px; margin-top: 34px; flex-wrap: wrap; } .countdown .unit { background: var(--white); border: 1px solid var(--i-line); border-radius: 14px; padding: 16px 18px; min-width: 76px; text-align: center; } .countdown .unit b { display: block; font-family: var(--i-font-display); font-size: 28px; color: var(--i-accent-deep); } .countdown .unit span { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); } /* section shell */ .invite-section { padding: 52px 0; border-top: 1px solid var(--i-line); } .invite-section .label { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--i-accent-deep); text-align: center; margin-bottom: 16px; } .invite-section h2 { font-family: var(--i-font-display); font-size: clamp(1.6rem, 2.6vw, 2.2rem); text-align: center; margin-bottom: 22px; } .invite-story p { max-width: 60ch; margin: 0 auto 16px; text-align: center; color: var(--ink-soft); font-size: 15.5px; } /* timeline / details */ .event-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .event-card { background: var(--white); border: 1px solid var(--i-line); border-radius: 16px; padding: 26px; text-align: center; } .event-card .ico { width: 30px; height: 30px; margin: 0 auto 14px; color: var(--i-accent); } .event-card h3 { font-family: var(--i-font-display); font-size: 19px; margin-bottom: 6px; } .event-card p { margin: 2px 0; font-size: 14px; color: var(--ink-soft); } /* map */ .map-embed { border-radius: 18px; overflow: hidden; border: 1px solid var(--i-line); height: 320px; } .map-embed iframe { width: 100%; height: 100%; border: 0; } .map-note { text-align: center; font-size: 13px; color: var(--ink-faint); margin-top: 12px; } /* RSVP — chat-style */ .rsvp-panel { background: var(--white); border: 1px solid var(--i-line); border-radius: 22px; padding: 34px; max-width: 560px; margin: 0 auto; } .chat-thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; } .chat-bubble { align-self: flex-start; background: var(--i-paper-alt); border-radius: 16px 16px 16px 4px; padding: 12px 16px; font-size: 14.5px; max-width: 85%; color: var(--i-ink); } .chat-bubble.from-guest { align-self: flex-end; background: var(--i-accent); color: #fff; border-radius: 16px 16px 4px 16px; } .rsvp-form { display: flex; flex-direction: column; gap: 16px; } .rsvp-attend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .rsvp-attend label { text-align: center; border: 1px solid var(--i-line); border-radius: 12px; padding: 12px 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--ink-soft); } .rsvp-attend input { display: none; } .rsvp-attend label:has(input:checked) { border-color: var(--i-accent); background: var(--i-paper-alt); color: var(--i-accent-deep); } .rsvp-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .rsvp-form input, .rsvp-form select, .rsvp-form textarea { font: inherit; padding: 12px 15px; border-radius: 10px; border: 1px solid var(--i-line); background: var(--i-paper); width: 100%; } .rsvp-form input:focus, .rsvp-form select:focus, .rsvp-form textarea:focus { outline: none; border-color: var(--i-accent); background: var(--white); } .rsvp-form label.small { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: -6px; display: block; } .rsvp-submit { background: var(--i-accent); color: #fff; border: none; border-radius: 999px; padding: 14px 20px; font-weight: 600; cursor: pointer; } .rsvp-submit:hover { background: var(--i-accent-deep); } .rsvp-status { font-size: 13.5px; font-weight: 600; min-height: 20px; text-align: center; } .rsvp-status.ok { color: #4c7a4c; } .rsvp-status.err { color: #a8442f; } /* share */ .share-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } .share-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--i-line); background: var(--white); padding: 11px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); } .share-btn:hover { border-color: var(--i-accent); color: var(--i-accent-deep); } .share-btn svg { width: 16px; height: 16px; } /* persistent order CTA */ .demo-cta-float { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; display: inline-flex; align-items: center; gap: 8px; background: var(--i-accent); color: #fff; padding: 14px 24px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.4); transition: background 0.15s ease, transform 0.15s ease; } .demo-cta-float:hover { background: var(--i-accent-deep); transform: translateX(-50%) translateY(-2px); } @media (max-width: 640px) { .demo-cta-float { padding: 12px 18px; font-size: 13px; bottom: 14px; max-width: calc(100% - 32px); } } /* invite footer — extra bottom clearance so the persistent CTA pill never overlaps it */ .invite-footer { text-align: center; padding: 40px 0 108px; } .invite-footer .flora { width: 90px; margin: 0 auto 16px; color: var(--i-accent); opacity: 0.7; } .invite-footer p { font-size: 13px; color: var(--ink-faint); } .invite-footer a { color: var(--i-accent-deep); font-weight: 600; } @media (max-width: 640px) { .event-cards { grid-template-columns: 1fr; } .rsvp-form .field-row { grid-template-columns: 1fr; } .countdown .unit { min-width: 64px; padding: 12px 12px; } .countdown .unit b { font-size: 22px; } .rsvp-panel { padding: 24px 20px; } }