/* ========================================================= Casamento Laura & Henrique — folha de estilo Tema campestre/botânico, neutros suaves + dourado. Troque de tema mudando o atributo data-theme no . ========================================================= */ /* ---------- Temas (tokens) ---------- */ :root, [data-theme="romantic"] { --bg: #faf6ee; --bg2: #f1e8d8; --ink: #3e392e; --muted: #837a68; --accent: #b2924e; --accent2: #c8ae7a; --line: #dccca6; --photo-radius: 300px 300px 16px 16px; } [data-theme="botanic"] { --bg: #f3f1e7; --bg2: #e7e9db; --ink: #34392e; --muted: #6f7561; --accent: #7e8c66; --accent2: #9ba983; --line: #c7cdb4; --photo-radius: 300px 300px 16px 16px; } [data-theme="editorial"] { --bg: #f8f5ef; --bg2: #ece7dc; --ink: #2a2722; --muted: #8c8475; --accent: #9a7b45; --accent2: #b89a66; --line: #d8cdb8; --photo-radius: 6px; } /* ---------- Base ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: "Jost", sans-serif; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background 0.4s ease, color 0.4s ease; } /* ---------- Elementos compartilhados ---------- */ .eyebrow { font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; } .section-head { text-align: center; } .section-title { margin: 0; font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: clamp(28px, 4.6vw, 52px); color: var(--ink); } .divider { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 34px 0 30px; } .divider--center { margin: 18px auto 60px; } .divider__line { width: 54px; height: 1px; background: var(--line); } .divider__diamond { width: 8px; height: 8px; background: var(--accent); transform: rotate(45deg); } .divider--dark .divider__line { width: 36px; background: var(--accent2); opacity: 0.7; } .divider--dark .divider__diamond { width: 6px; height: 6px; background: var(--accent2); } .btn { display: inline-flex; align-items: center; gap: 10px; font-family: "Jost", sans-serif; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; padding: 15px 32px; border-radius: 999px; cursor: pointer; } .btn--solid { color: #fff; background: var(--accent); border: none; box-shadow: 0 10px 26px -12px var(--accent); } .btn--outline { color: var(--ink); background: transparent; border: 1px solid var(--ink); } /* ---------- Hero ---------- */ .hero { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 96px 24px 56px; } .hero__kicker { font-size: clamp(8px, 1.55vw, 13px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 30px; } .hero__names { font-family: "Pinyon Script", cursive; font-weight: 400; color: var(--ink); font-size: clamp(40px, 8.5vw, 104px); line-height: 1.12; margin: 0; letter-spacing: 0.01em; white-space: nowrap; } .hero__names .amp { font-family: "Cormorant Garamond", serif; font-style: italic; color: var(--accent); font-size: 0.46em; vertical-align: 0.22em; padding: 0 0.1em; } .hero__date { margin: 0; font-family: "Cormorant Garamond", serif; font-size: clamp(19px, 2.6vw, 27px); letter-spacing: 0.05em; color: var(--ink); white-space: nowrap; } .hero__place { margin: 14px 0 0; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .hero__photo { width: min(880px, 92%); height: clamp(360px, 58vh, 560px); margin: 52px 0 0; border-radius: var(--photo-radius); overflow: hidden; box-shadow: 0 30px 70px -28px rgba(62, 57, 46, 0.45); border: 1px solid var(--line); } .hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; /* recorte um pouco mais baixo */ display: block; } .scrollcue { margin-top: 38px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .scrollcue__label { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); } .scrollcue__line { display: block; width: 1px; height: 34px; background: var(--accent); animation: scrollcue 2s ease-in-out infinite; } @keyframes scrollcue { 0%, 100% { transform: translateY(0); opacity: 0.45; } 50% { transform: translateY(8px); opacity: 1; } } /* ---------- Contagem regressiva ---------- */ .countdown { background: var(--bg2); padding: 84px 24px; transition: background 0.4s ease; } .countdown .section-head { margin-bottom: 46px; } .countdown__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(18px, 5vw, 68px); max-width: 880px; margin: 0 auto; } .cd { text-align: center; min-width: 74px; } .cd__num { display: block; font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: clamp(54px, 9vw, 86px); line-height: 1; color: var(--ink); } .cd__num--accent { color: var(--accent); } .cd__label { display: block; margin-top: 12px; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); } /* ---------- Detalhes ---------- */ .details { padding: 96px 24px; } .cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; max-width: 1080px; margin: 0 auto; } .card { flex: 1 1 260px; max-width: 320px; text-align: center; padding: 42px 28px; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; } .card--col { display: flex; flex-direction: column; align-items: center; } .card__mark { display: inline-block; width: 10px; height: 10px; border: 1px solid var(--accent); transform: rotate(45deg); margin-bottom: 22px; } .card__eyebrow { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; } .card__title { margin: 0 0 8px; font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 25px; line-height: 1.2; color: var(--ink); } .card__text { margin: 0; font-size: 15px; letter-spacing: 0.04em; color: var(--muted); } .card__btn { margin-top: auto; display: inline-block; font-family: "Jost", sans-serif; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); text-decoration: none; padding: 10px 22px; border: 1px solid var(--accent); border-radius: 999px; } .card__btns { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .attire { display: flex; align-items: flex-end; justify-content: center; gap: 22px; } /* ---------- RSVP ---------- */ .rsvp { background: var(--bg2); padding: 96px 24px; text-align: center; transition: background 0.4s ease; } .rsvp__text { max-width: 560px; margin: 0 auto 14px; font-size: 17px; line-height: 1.7; color: var(--muted); text-wrap: pretty; } .rsvp__deadline { margin: 0 auto 40px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .rsvp__btns { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: center; } .rsvp__transport { max-width: 480px; margin: 32px auto 0; display: flex; flex-direction: column; align-items: center; gap: 12px; } .rsvp__transport-icon { flex-shrink: 0; } .rsvp__transport-text { margin: 0; font-size: 14px; line-height: 1.6; letter-spacing: 0.03em; color: var(--muted); } /* ---------- Presente ---------- */ .gift { padding: 96px 24px; text-align: center; } .gift__text { max-width: 580px; margin: 0 auto 44px; font-size: 17px; line-height: 1.7; color: var(--muted); text-wrap: pretty; } .pix { max-width: 460px; margin: 0 auto; padding: 38px 32px; background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; } .pix__eyebrow { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; } .pix__qr { display: block; width: 220px; height: 220px; max-width: 100%; margin: 0 auto 24px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 6px; } /* ---------- Footer ---------- */ .footer { background: var(--ink); color: #fbf8f1; text-align: center; padding: 72px 24px; } .footer__names { font-family: "Pinyon Script", cursive; font-size: clamp(40px, 7vw, 68px); line-height: 1; margin: 0 0 18px; } .footer__date { margin: 0; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: #d8cfc0; }