<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO Meta Tags -->
<title>Mark & Lena Tracy | September 01, 2026</title>
<meta name="description" content="Join Mark and Lena Tracy as they celebrate their union. Find wedding details, our story, and RSVP.">
<meta name="keywords" content="Mark Tracy, Lena Tracy, wedding, wedding website, RSVP, Mark and Lena's wedding">
<meta name="author" content="Mark and Lena Tracy">
<meta property="og:title" content="Mark & Lena Tracy | Our Wedding Celebration">
<meta property="og:description" content="We're getting married! Join us for our celebration on September 1, 2026.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://your-domain-here.com"> <!-- Replace with your actual domain -->
<meta property="og:image" content="https://placehold.co/1200x630/fdfbf7/c0a080?text=M+%26+L">
<!-- Favicon -->
<link rel="icon" href="https://placehold.co/32x32/1a1a1a/fdfbf7?text=ML" type="image/png">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
<!-- EmailJS SDK for Email Notifications -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
<style>
/* --- Custom Theme & Animations --- */
:root {
--bg-color: #FDFBF7; /* A very light, warm cream */
--text-color: #1a1a1a;
--primary-accent: #c0a080; /* Muted, elegant gold/champagne */
--secondary-accent: #EAE6E1;
}
body {
font-family: 'Lato', sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
opacity: 0; /* Initially hide body for preloader */
transition: opacity 0.5s ease-in;
}
.font-serif { font-family: 'Cormorant Garamond', serif; }
/* --- Preloader --- */
#preloader {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background-color: var(--bg-color); z-index: 9999; display: flex;
justify-content: center; align-items: center;
transition: opacity 0.75s ease, visibility 0.75s ease;
}
#preloader .ring {
border: 2px solid var(--secondary-accent); border-top-color: var(--primary-accent);
border-radius: 50%; width: 50px; height: 50px;
animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* --- Scroll & Reveal Animations --- */
.reveal {
opacity: 0; transform: translateY(40px);
transition: opacity 1s cubic-bezier(0.645, 0.045, 0.355, 1), transform 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal.visible > * { transition-delay: calc(0.2s * var(--stagger-index, 1)); }
/* --- Navigation Styles --- */
.nav-link { position: relative; transition: color 0.3s; }
.nav-link::after {
content: ''; position: absolute; width: 0; height: 1px; bottom: -4px;
left: 50%; transform: translateX(-50%); background-color: var(--primary-accent);
transition: width 0.3s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
/* Mobile Menu */
.mobile-menu {
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.mobile-menu.open { transform: translateX(0); }
/* --- General Styles --- */
.btn-primary {
background-color: var(--text-color); color: var(--bg-color);
transition: background-color 0.3s, transform 0.3s;
}
.btn-primary:hover { background-color: #333; transform: translateY(-2px); }
.btn-primary:disabled { background-color: #999; cursor: not-allowed; }
.section-divider {
width: 80px; height: 1px; background-color: var(--primary-accent);
margin: 2rem auto;
}
/* Anti-spam honeypot field */
.honeypot {
opacity: 0;
position: absolute;
top: 0;
left: 0;
height: 0;
width: 0;
z-index: -1;
}
</style>
</head>
<body class="antialiased">
<!-- Preloader -->
<div id="preloader"><div class="ring"></div></div>
<!-- Header -->
<header class="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md shadow-sm">
<nav class="container mx-auto px-6 py-4 flex justify-between items-center">
<a href="#" class="font-serif text-3xl font-semibold tracking-wider">M & L</a>
<!-- Desktop Menu -->
<ul id="desktop-menu" class="hidden md:flex space-x-10 text-sm font-medium tracking-widest uppercase">
<li><a href="#" class="nav-link">Home</a></li>
<li><a href="#/story" class="nav-link">Our Story</a></li>
<li><a href="#/schedule" class="nav-link">Schedule</a></li>
<li><a href="#/details" class="nav-link">Details</a></li>
<li><a href="#/rsvp" class="nav-link">RSVP</a></li>
</ul>
<!-- Mobile Menu Button -->
<button id="mobile-menu-btn" class="md:hidden z-[60]">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
</button>
</nav>
</header>
<!-- Mobile Menu Panel -->
<div id="mobile-menu" class="mobile-menu fixed top-0 right-0 h-full w-full sm:w-72 bg-[var(--bg-color)] z-50 shadow-xl">
<div class="p-8 pt-24">
<ul class="flex flex-col space-y-8 text-center text-lg tracking-widest uppercase">
<li><a href="#" class="nav-link">Home</a></li>
<li><a href="#/story" class="nav-link">Our Story</a></li>
<li><a href="#/schedule" class="nav-link">Schedule</a></li>
<li><a href="#/details" class="nav-link">Details</a></li>
<li><a href="#/rsvp" class="nav-link">RSVP</a></li>
</ul>
</div>
</div>
<!-- Main Content Area (Dynamically Populated) -->
<main id="app-root" class="pt-16"></main>
<!-- Footer -->
<footer class="bg-white py-16 border-t border-gray-200">
<div class="container mx-auto px-6 text-center text-zinc-600">
<p class="font-serif text-4xl mb-3 text-zinc-800">Mark & Lena</p>
<p class="text-sm tracking-widest uppercase">AROUND SEPTEMBER 01, 2026</p>
<div class="w-12 h-px bg-zinc-300 mx-auto my-6"></div>
<p>Thank you for being a part of our story. We can't wait to celebrate with you!</p>
<p class="mt-8 text-xs">
© 2025 The Tracy Family. All Rights Reserved. <br>
For questions, please contact <a href="mailto:dmoosn@gmail.com" class="underline hover:text-zinc-900">dmoosn@gmail.com</a>.
</p>
</div>
</footer>
<!-- =========== PAGE TEMPLATES =========== -->
<!-- Home Page Template -->
<template id="home-template">
<!-- Hero Section -->
<section class="h-screen -mt-16 flex items-center justify-center bg-cover bg-center bg-fixed" style="background-image: url('https://placehold.co/1920x1080/EAE6E1/cccccc?text=+');">
<div class="text-center text-zinc-800 bg-white/70 p-12 rounded-lg shadow-xl backdrop-blur-sm reveal visible">
<h1 class="font-serif text-6xl md:text-8xl font-bold" style="--stagger-index: 1;">Mark & Lena</h1>
<p class="mt-4 text-lg md:text-xl tracking-[0.2em] uppercase" style="--stagger-index: 2;">Together Forever</p>
<div class="w-20 h-px bg-zinc-400 mx-auto my-8" style="--stagger-index: 3;"></div>
<p class="font-serif text-2xl md:text-3xl" style="--stagger-index: 4;">Around September 01, 2026</p>
</div>
</section>
<!-- Welcome Snippet -->
<section class="py-24 md:py-32">
<div class="container mx-auto px-6 text-center max-w-3xl reveal">
<h2 class="font-serif text-5xl md:text-6xl font-bold">We're Getting Married!</h2>
<div class="section-divider"></div>
<p class="text-lg leading-relaxed text-zinc-600 mb-8">
To our dearest friends and family, we are overjoyed to invite you to celebrate the beginning of our forever. This journey has been filled with love, laughter, and unforgettable moments, and we can't imagine taking this next step without you by our side. Explore our site to find all the details you'll need for our special day.
</p>
<a href="#/story" class="btn-primary font-bold tracking-widest uppercase text-sm px-10 py-4 rounded-md shadow-lg">
Read Our Story
</a>
</div>
</section>
<!-- Countdown Timer -->
<section class="py-24 md:py-32 bg-[var(--secondary-accent)]">
<div class="container mx-auto px-6 text-center max-w-4xl reveal">
<h2 class="font-serif text-5xl md:text-6xl font-bold">The Big Day</h2>
<div class="section-divider"></div>
<div id="countdown" class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center max-w-3xl mx-auto">
<div>
<p id="days" class="font-serif text-5xl md:text-7xl font-bold text-[var(--primary-accent)]">0</p>
<p class="text-sm tracking-widest uppercase mt-2">Days</p>
</div>
<div>
<p id="hours" class="font-serif text-5xl md:text-7xl font-bold text-[var(--primary-accent)]">0</p>
<p class="text-sm tracking-widest uppercase mt-2">Hours</p>
</div>
<div>
<p id="minutes" class="font-serif text-5xl md:text-7xl font-bold text-[var(--primary-accent)]">0</p>
<p class="text-sm tracking-widest uppercase mt-2">Minutes</p>
</div>
<div>
<p id="seconds" class="font-serif text-5xl md:text-7xl font-bold text-[var(--primary-accent)]">0</p>
<p class="text-sm tracking-widest uppercase mt-2">Seconds</p>
</div>
</div>