Thistle & Rose Studios — Wedding Photography & Film
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
–navy: #1a2744;
–navy-deep: #0f1929;
–navy-mid: #243258;
–gold: #c9a96e;
–gold-light: #e8d5a8;
–gold-pale: #f7f0e2;
–cream: #faf8f4;
–cream-dark: #f0ebe0;
–text-dark: #1a2744;
–text-mid: #4a5568;
–text-light: #8a96a8;
–serif: ‘Cormorant Garamond’, Georgia, serif;
–sans: ‘Jost’, sans-serif;
}
html { scroll-behavior: smooth; }
body { font-family: var(–sans); background: var(–cream); color: var(–text-dark); overflow-x: hidden; }
/* ── NAV ── */
nav {
position: sticky; top: 0; z-index: 100;
background: rgba(250,248,244,0.96);
border-bottom: 1px solid var(–gold-light);
padding: 0 3rem;
display: flex; align-items: center; justify-content: space-between;
height: 72px;
backdrop-filter: blur(10px);
}
.nav-logo { font-family: var(–serif); font-size: 24px; font-weight: 400; color: var(–navy); letter-spacing: 0.04em; text-decoration: none; }
.nav-logo span { color: var(–gold); font-style: italic; }
.nav-links { display: flex; gap: 2.5rem; list-style: none; }
.nav-links a { font-family: var(–sans); font-size: 11px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(–text-mid); text-decoration: none; transition: color 0.2s; }
.nav-links a:hover { color: var(–gold); }
.nav-cta { font-family: var(–sans); font-size: 11px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; background: var(–navy); color: var(–gold-light); padding: 12px 26px; text-decoration: none; transition: all 0.2s; }
.nav-cta:hover { background: var(–gold); color: var(–navy); }
/* ── HERO ── */
.hero {
min-height: 92vh; display: grid; grid-template-columns: 1fr 1fr; position: relative; overflow: hidden;
}
.hero-left {
background: var(–navy-deep); display: flex; flex-direction: column; justify-content: center;
padding: 6rem 4rem 6rem 5rem; position: relative;
}
.hero-left::after {
content: ”; position: absolute; right: -1px; top: 0; bottom: 0; width: 2px; background: var(–gold);
}
.hero-eyebrow { font-family: var(–sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(–gold); margin-bottom: 1.5rem; opacity: 0; animation: fadeUp 0.7s ease 0.1s both; }
.hero-title { font-family: var(–serif); font-size: clamp(42px, 5vw, 72px); font-weight: 300; line-height: 1.08; color: #f7f0e2; margin-bottom: 1.25rem; opacity: 0; animation: fadeUp 0.7s ease 0.25s both; }
.hero-title em { font-style: italic; color: var(–gold-light); }
.hero-sub { font-family: var(–serif); font-size: 19px; font-weight: 300; font-style: italic; color: var(–gold-light); opacity: 0; line-height: 1.6; margin-bottom: 2.75rem; animation: fadeUp 0.7s ease 0.4s both; }
.hero-btn { display: inline-block; font-family: var(–sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(–navy-deep); background: var(–gold); padding: 16px 36px; text-decoration: none; transition: all 0.2s; width: fit-content; opacity: 0; animation: fadeUp 0.7s ease 0.55s both; }
.hero-btn:hover { background: var(–gold-light); }
.hero-right { background: var(–navy-mid); position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; overflow: hidden; }
.hero-photo { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; }
.hero-photo.tall { grid-row: span 2; }
/* Replace these background colors with: background-image: url(‘your-photo.jpg’); background-size: cover; background-position: center; */
.hp1 { background: linear-gradient(145deg, #243258 0%, #1a2744 100%); }
.hp2 { background: linear-gradient(145deg, #1e2e50 0%, #141f38 100%); }
.hp3 { background: linear-gradient(145deg, #2a3660 0%, #1a2744 100%); }
.hero-photo-icon { opacity: 0.2; }
.hero-photo-label { font-family: var(–serif); font-size: 11px; letter-spacing: 0.1em; color: var(–gold-light); opacity: 0.4; }
.hero-ornament { position: absolute; bottom: 1.5rem; right: 1.5rem; font-family: var(–serif); font-size: 11px; color: var(–gold); opacity: 0.5; letter-spacing: 0.08em; }
/* ── SHARED SECTION STYLES ── */
section { padding: 7rem 0; }
.container { max-width: 1140px; margin: 0 auto; padding: 0 2.5rem; }
.section-eyebrow { font-family: var(–sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(–gold); text-align: center; margin-bottom: 0.75rem; }
.section-title { font-family: var(–serif); font-size: clamp(34px, 4vw, 56px); font-weight: 300; text-align: center; color: var(–navy); line-height: 1.15; margin-bottom: 1rem; }
.section-title em { font-style: italic; color: var(–gold); }
.section-rule { width: 60px; height: 1px; background: var(–gold); margin: 0 auto 3.5rem; }
/* ── GALLERY ── */
.gallery-section { background: var(–cream); }
.gallery-tabs { display: flex; gap: 0; justify-content: center; margin-bottom: 3rem; border-bottom: 1px solid var(–gold-light); }
.tab-btn { font-family: var(–sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; padding: 12px 30px; background: none; border: none; color: var(–text-light); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.2s; }
.tab-btn.active, .tab-btn:hover { color: var(–navy); border-bottom-color: var(–gold); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.gallery-item { position: relative; overflow: hidden; aspect-ratio: 4/5; cursor: pointer; }
.gallery-item.wide { grid-column: span 2; aspect-ratio: 8/5; }
.gallery-item.tall { grid-row: span 2; aspect-ratio: 2/3; }
.gallery-fill {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
transition: transform 0.6s ease;
/* Replace background with: background-image: url(‘your-photo.jpg’); background-size: cover; background-position: center; */
}
.gallery-item:hover .gallery-fill { transform: scale(1.04); }
.g1 { background: #1e2d50; }
.g2 { background: #2a3a5c; }
.g3 { background: #162240; }
.g4 { background: #243258; }
.g5 { background: #1a2a48; }
.g6 { background: #0f1929; }
.g7 { background: #1e3060; }
.gallery-overlay { position: absolute; inset: 0; background: rgba(10,16,32,0); display: flex; align-items: flex-end; padding: 1.5rem; transition: background 0.35s; }
.gallery-item:hover .gallery-overlay { background: rgba(10,16,32,0.5); }
.gallery-caption { font-family: var(–serif); font-size: 15px; font-style: italic; color: var(–gold-light); opacity: 0; transform: translateY(10px); transition: all 0.35s; }
.gallery-item:hover .gallery-caption { opacity: 1; transform: translateY(0); }
/* ── ABOUT ── */
.about-section { background: var(–navy-deep); }
.about-inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: 6rem; align-items: center; }
.about-image-frame { position: relative; padding-bottom: 2rem; padding-right: 2rem; }
.about-photo {
width: 100%; aspect-ratio: 3/4;
/* Replace with: background-image: url(‘your-photo.jpg’); background-size: cover; background-position: center; */
background: var(–navy-mid);
display: flex; align-items: center; justify-content: center;
}
.about-photo-border { position: absolute; top: 22px; left: 22px; right: 0; bottom: 0; border: 1px solid var(–gold); opacity: 0.35; pointer-events: none; }
.about-badge { position: absolute; bottom: 0; right: 0; background: var(–gold); color: var(–navy-deep); padding: 1.4rem 1.75rem; text-align: center; }
.about-badge-num { font-family: var(–serif); font-size: 40px; font-weight: 300; line-height: 1; display: block; }
.about-badge-text { font-family: var(–sans); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; display: block; margin-top: 5px; }
.about-content .section-title { text-align: left; color: #faf8f4; }
.about-content .section-rule { margin-left: 0; }
.about-content .section-eyebrow { text-align: left; }
.about-text { font-family: var(–serif); font-size: 18px; font-weight: 300; line-height: 1.85; color: var(–gold-light); opacity: 0.82; margin-bottom: 1.25rem; }
.about-sig { font-family: var(–serif); font-size: 30px; font-weight: 300; font-style: italic; color: var(–gold); margin-top: 2rem; }
/* ── SERVICES ── */
.services-section { background: var(–cream-dark); }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.service-card { background: white; padding: 3.5rem 2.5rem; position: relative; transition: transform 0.25s; }
.service-card:hover { transform: translateY(-5px); }
.service-card.featured { background: var(–navy); }
.service-tag { font-family: var(–sans); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(–gold); margin-bottom: 1.1rem; display: block; }
.service-name { font-family: var(–serif); font-size: 30px; font-weight: 300; color: var(–navy); margin-bottom: 0.5rem; line-height: 1.15; }
.service-card.featured .service-name { color: var(–gold-light); }
.service-price { font-family: var(–serif); font-size: 42px; font-weight: 300; color: var(–gold); line-height: 1; margin-bottom: 0.2rem; }
.service-price-note { font-family: var(–sans); font-size: 11px; color: var(–text-light); letter-spacing: 0.08em; margin-bottom: 2.25rem; }
.service-card.featured .service-price-note { color: var(–gold-light); opacity: 0.55; }
.service-divider { width: 40px; height: 1px; background: var(–gold-light); margin-bottom: 1.75rem; }
.service-features { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 2.75rem; }
.service-features li { font-family: var(–sans); font-size: 13px; color: var(–text-mid); display: flex; align-items: center; gap: 12px; }
.service-card.featured .service-features li { color: var(–gold-light); opacity: 0.8; }
.service-features li::before { content: ”; display: inline-block; width: 18px; height: 1px; background: var(–gold); flex-shrink: 0; }
.service-btn { display: inline-block; font-family: var(–sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; padding: 13px 26px; text-decoration: none; border: 1px solid var(–gold); color: var(–navy); transition: all 0.2s; cursor: pointer; background: none; }
.service-btn:hover { background: var(–gold); color: white; }
.service-card.featured .service-btn { color: var(–gold); }
.service-card.featured .service-btn:hover { background: var(–gold); color: var(–navy); }
.featured-badge { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: var(–gold); color: var(–navy); font-family: var(–sans); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 18px; white-space: nowrap; }
/* ── CONTACT ── */
.contact-section { background: var(–navy-deep); }
.contact-inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: 6rem; align-items: start; }
.contact-info .section-title { text-align: left; color: #faf8f4; }
.contact-info .section-rule { margin-left: 0; }
.contact-info .section-eyebrow { text-align: left; }
.contact-text { font-family: var(–serif); font-size: 17px; font-weight: 300; font-style: italic; color: var(–gold-light); opacity: 0.75; line-height: 1.85; margin-bottom: 2.75rem; }
.contact-details { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-detail-item { display: flex; flex-direction: column; gap: 4px; }
.detail-label { font-family: var(–sans); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(–gold); }
.detail-value { font-family: var(–serif); font-size: 17px; color: #faf8f4; font-weight: 300; }
.contact-form { display: flex; flex-direction: column; gap: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.form-field { display: flex; flex-direction: column; margin-bottom: 2px; }
.form-field label { font-family: var(–sans); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(–gold); padding: 14px 18px 6px; background: rgba(255,255,255,0.05); }
.form-field input,
.form-field select,
.form-field textarea {
font-family: var(–sans); font-size: 14px; color: #faf8f4;
background: rgba(255,255,255,0.05); border: none;
padding: 0 18px 14px; outline: none;
transition: background 0.2s;
}
.form-field textarea { padding: 14px 18px; min-height: 110px; resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { background: rgba(201,169,110,0.1); }
.form-field select { appearance: none; cursor: pointer; }
.form-field select option { background: var(–navy-deep); color: #faf8f4; }
.form-submit { background: var(–gold); color: var(–navy-deep); font-family: var(–sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; padding: 20px 36px; border: none; cursor: pointer; transition: background 0.2s; width: 100%; margin-top: 2px; }
.form-submit:hover { background: var(–gold-light); }
/* ── FOOTER ── */
footer { background: #080e1a; padding: 2.5rem 3rem; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(201,169,110,0.12); flex-wrap: wrap; gap: 1rem; }
.footer-logo { font-family: var(–serif); font-size: 22px; color: var(–gold-light); opacity: 0.65; font-weight: 300; }
.footer-copy { font-family: var(–sans); font-size: 11px; color: var(–text-light); letter-spacing: 0.08em; }
.footer-social { display: flex; gap: 2rem; }
.footer-social a { font-family: var(–sans); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(–gold); opacity: 0.55; text-decoration: none; transition: opacity 0.2s; }
.footer-social a:hover { opacity: 1; }
/* ── ANIMATIONS ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
/* ── RESPONSIVE ── */
@media (max-width: 900px) {
nav { padding: 0 1.5rem; }
.nav-links { display: none; }
.hero { grid-template-columns: 1fr; min-height: auto; }
.hero-left { padding: 5rem 2rem; }
.hero-left::after { display: none; }
.hero-right { min-height: 360px; }
.about-inner { grid-template-columns: 1fr; gap: 3rem; }
.about-image-frame { max-width: 400px; }
.services-grid { grid-template-columns: 1fr; }
.contact-inner { grid-template-columns: 1fr; gap: 3rem; }
.form-row { grid-template-columns: 1fr; }
.gallery-grid { grid-template-columns: 1fr 1fr; }
.gallery-item.wide { grid-column: span 2; }
.gallery-item.tall { grid-row: auto; aspect-ratio: 4/5; }
footer { flex-direction: column; text-align: center; }
}
Thistle & Rose
Book a Date
Wedding Photography & Film
Where loveart.
Timeless imagery crafted with
Explore Our Work
<!– Replace these divs with
tags or add background-image styles pointing to your photos –>
Portrait
Ceremony
Details
Est. 2016
Our Work
A glimpse of forever
All
Photography
Cinematography
Portraits
The first dance, golden hour
Garden ceremony, Savannah
<!– Replace this div with an
tag pointing to your photo –>
250+
Weddings Captured
Our Story
We believe inquiet magic
We are Thistle & Rose Studios — a husband-and-wife creative duo based in the American South, dedicated to capturing the fleeting, luminous moments of your wedding day.
Our approach is unhurried and intimate. We blend into the background so you can be fully present, then disappear together into the edit suite to craft images that feel like memory itself.
Whether you’re exchanging vows in a sunlit garden or a candlelit cathedral, we are there — patient, watchful, and ready for every unscripted moment.
— Sophie & James Elara
Investment
Collections crafted for every love story
Photography
The Essentials
$3,200
Starting price
8 hours of coverage
One lead photographer
400+ edited gallery images
Online gallery delivery
Full print release included
Inquire Now
Most Popular
Photo + Film
The Signature
$5,800
Starting price
10 hours of coverage
Lead photographer + cinematographer
600+ edited gallery images
4–5 min cinematic wedding film
Engagement session included
Heirloom album consultation
Inquire Now
Full Experience
The Legacy
$9,500
Starting price
Unlimited day-of coverage
Two photographers + videographer
Full gallery, unlimited images
8–10 min feature film + highlights reel
Luxury heirloom album
Engagement + bridal sessions
Inquire Now
/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js
// Gallery tab filtering
document.querySelectorAll(‘.tab-btn’).forEach(btn => {
btn.addEventListener(‘click’, function () {
document.querySelectorAll(‘.tab-btn’).forEach(b => b.classList.remove(‘active’));
this.classList.add(‘active’);
});
});
// Smooth scroll for anchor links
document.querySelectorAll(‘a[href^=”#”]’).forEach(anchor => {
anchor.addEventListener(‘click’, function (e) {
const target = document.querySelector(this.getAttribute(‘href’));
if (target) {
e.preventDefault();
target.scrollIntoView({ behavior: ‘smooth’, block: ‘start’ });
}
});
});
// Sticky nav
Is this your new site? Log in to activate admin features and dismiss this message
Log In
thistleandrosestudios.com 