/* ========================================================================= Wedding Invitation — themeable stylesheet Everything you'd want to re-skin lives in the :root variables below. Swap colors, fonts, or sizes there and the whole card updates. ========================================================================= */ :root { /* ---- Colors -------------------------------------------------------- */ --color-bg: #faf5ec; /* paper background */ --color-envelope: #e8b98c; /* envelope front color (peach) */ --color-envelope-shade: #d59a63; /* envelope fold/crease shade (peach, darker) */ --color-envelope-shadow: rgba(76, 111, 140, 0.25); --color-text: #4c6f8c; /* headings, script text, accents (dusty blue) */ --color-text-soft: #6f93b3; /* body copy (dusty blue, lighter) */ --color-gold-light: #f3d9bc; /* wax seal highlight (peach, light) */ --color-gold: #e0a874; /* wax seal base (peach) */ --color-gold-dark: #4c6f8c; /* wax seal shadow / monogram ink (dusty blue) */ /* ---- Fonts ---------------------------------------------------------- Loaded from Google Fonts in the HTML . Swap the family names here (and the matching ) to re-theme typography. */ --font-script: 'Alex Brush', cursive; /* names, "Itinerario" */ --font-display: 'Playfair Display', serif; /* big "14", numerals */ --font-body: 'EB Garamond', serif; /* paragraphs, labels, times */ /* ---- Sizing ---------------------------------------------------------- */ --card-max-width: 480px; } /* ---- Reset / base ------------------------------------------------------ */ .invitation * { box-sizing: border-box; } .invitation { max-width: var(--card-max-width); margin: 0 auto; background-color: var(--color-bg); /* subtle paper-grain texture, purely CSS, no image assets required */ background-image: radial-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px), radial-gradient(rgba(0, 0, 0, 0.025) 1px, transparent 1px); background-size: 3px 3px, 5px 5px; background-position: 0 0, 2px 2px; color: var(--color-text-soft); font-family: var(--font-body); text-align: center; padding: 0 0 56px; overflow: hidden; } /* ========================================================================= Envelope + wax seal (pure CSS/SVG, no raster image) ========================================================================= */ .envelope-frame { position: relative; width: 100%; padding-top: 66%; /* aspect ratio for the envelope block */ background: var(--color-envelope); overflow: hidden; } .envelope-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; } .envelope-fold { fill: none; stroke: var(--color-envelope-shadow); stroke-width: 2; } .envelope-flap { fill: var(--color-envelope-shade); opacity: 0.55; } .wax-seal { position: absolute; top: 58%; left: 50%; transform: translate(-50%, -50%); width: 88px; height: 88px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--color-gold-light), var(--color-gold) 55%, var(--color-gold-dark) 100%); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35), inset 0 0 0 3px rgba(255, 255, 255, 0.15), inset 0 -4px 8px rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: center; } .wax-seal::before { /* wax-stamped ridge ring */ content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed rgba(0, 0, 0, 0.18); } .wax-seal-monogram { position: relative; width: 100%; height: 100%; font-family: var(--font-display); font-style: italic; color: var(--color-gold-dark); } .wax-seal-monogram .letter-d, .wax-seal-monogram .amp, .wax-seal-monogram .letter-n { position: absolute; transform: translate(-50%, -50%); } .wax-seal-monogram .letter-d { top: 30%; left: 32%; font-size: 32px; } .wax-seal-monogram .amp { top: 50%; left: 49%; font-size: 22px; } .wax-seal-monogram .letter-n { top: 66%; left: 65%; font-size: 32px; } /* ========================================================================= Couple names ========================================================================= */ .names { margin-top: 48px; padding: 0 32px; } .names .script-line { font-family: var(--font-script); color: var(--color-text); font-size: 44px; line-height: 1.25; display: block; } .names .ampersand { font-size: 34px; margin: 2px 0; } /* ========================================================================= Intro paragraph ========================================================================= */ .intro { margin: 32px auto 0; padding: 0 48px; max-width: 380px; font-size: 16px; line-height: 1.6; letter-spacing: 0.2px; } /* ========================================================================= Date block: SÁBADO — 14 — FEBRERO / 2026 ========================================================================= */ .date-block { margin-top: 44px; } .date-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 0 32px; } .date-label { display: flex; flex-direction: column; align-items: center; font-size: 13px; letter-spacing: 3px; font-weight: 600; color: var(--color-text); } .date-label::before { content: ""; display: block; width: 100%; height: 1px; background: var(--color-text); margin-bottom: 6px; } .date-day { font-family: var(--font-display); font-size: 56px; font-weight: 700; color: var(--color-text); line-height: 1; } .date-year { margin-top: 6px; font-size: 14px; letter-spacing: 1px; color: var(--color-text-soft); } .location { margin-top: 18px; font-size: 15px; letter-spacing: 0.5px; } /* ========================================================================= Itinerary ========================================================================= */ .itinerary { margin-top: 56px; padding: 0 36px 0 28px; } .itinerary-title { font-family: var(--font-script); color: var(--color-text); font-size: 40px; margin-bottom: 28px; } .timeline { list-style: none; margin: 0; padding: 0; position: relative; text-align: left; } /* the vertical rule connecting every itinerary row */ .timeline::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 44px; width: 1px; background: var(--color-text); opacity: 0.5; } .timeline-item { display: flex; align-items: flex-start; gap: 18px; padding: 14px 0; } .timeline-icon { flex: 0 0 32px; width: 32px; height: 32px; color: var(--color-text); } .timeline-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .timeline-content { padding-top: 2px; } .timeline-time { margin: 0 0 2px; font-size: 15px; color: var(--color-text); } .timeline-time strong { font-weight: 700; } .timeline-desc { margin: 0; font-size: 14.5px; line-height: 1.4; color: var(--color-text-soft); }