/* ============================================================
AT STUDIO — PREMIUM WEDDING TEMPLATE
Color Theme File — theme.css
© 2025 AT Studio. All Rights Reserved.
!! IMPORTANT !!
This is ONE of TWO files you edit per new client.
(The other is config.js for all content details.)
This file controls the ENTIRE COLOR THEME of the website.
Change the values inside :root {} below to match the
client's wedding color palette.
HOW TO USE:
1. Pick the client's wedding colors
2. Replace the hex values below
3. Save this file
4. The entire website recolors automatically
HOW TO FIND HEX COLOR CODES:
— Google "color picker" for a quick tool
— Visit coolors.co to browse beautiful palettes
— Visit colorhunt.co for curated wedding palettes
— Ask AT Studio to recommend a palette
LOAD ORDER IN main.html AND index.html:
theme.css must be loaded BEFORE style.css
← first
← second
============================================================
CURRENT THEME: AT Studio Signature
Champagne Gold + Warm Cream
============================================================ */
:root {
/* ============================================================
PRIMARY COLOR
The main accent color of the website.
Used for: gold lines, buttons, labels, highlights,
countdown numbers accent, botanical SVGs,
nav active states, form borders, dividers.
EXAMPLES:
Champagne Gold → #C9A96E (default — AT Studio Signature)
Rose Gold → #B76E79
Dusty Mauve → #9B7B8C
Sage Green → #7A9E7E
Navy Blue → #2C3E6B
Terracotta → #C17754
============================================================ */
--primary: #C9A96E;
/* ============================================================
SECONDARY COLOR
The main background color of the page.
Used for: page background, alternating section backgrounds,
form fields, card backgrounds on white sections.
Keep this very light — almost white but warmer.
Avoid pure white (#FFFFFF) — it looks too clinical.
EXAMPLES:
Warm Cream → #FAF7F2 (default — AT Studio Signature)
Soft Blush → #FDF5F5
Pale Sage → #F5F8F5
Warm White → #FDFAF6
Ivory → #FFFFF0
Cool Linen → #F8F6F2
============================================================ */
--secondary: #FAF7F2;
/* ============================================================
DARK COLOR
The main text color of the website.
Used for: all body text, headings, couple names,
venue names, event titles, form text.
Avoid pure black (#000000) — charcoal reads more premium.
EXAMPLES:
Charcoal → #2C2C2C (default — AT Studio Signature)
Warm Dark → #1E1B18
Deep Navy → #1A2340
Dark Olive → #2A2E1E
Espresso → #2C1810
============================================================ */
--dark: #2C2C2C;
/* ============================================================
MUTED COLOR
Secondary text color — for less important information.
Used for: dates, captions, labels, address text,
FAQ answers, footer text, placeholder text,
section subtitles.
Should be noticeably lighter than --dark but readable.
EXAMPLES:
Warm Brown → #8C7B6B (default — AT Studio Signature)
Dusty Rose Gray → #9B8B8B
Sage Muted → #7A8C7A
Cool Slate → #7B8599
Warm Taupe → #8C8074
============================================================ */
--muted: #8C7B6B;
/* ============================================================
WHITE COLOR
Used for: card backgrounds on cream sections,
text on dark backgrounds (hero, footer),
registry number box, nav background when scrolled.
Usually stays as #FFFFFF — only change if needed.
============================================================ */
--white: #FFFFFF;
/* ============================================================
BORDER COLOR
Used for: all card borders, divider lines between sections,
form field borders, gallery photo borders,
schedule card borders, FAQ item borders.
Should be very subtle — a whisper of color, not bold.
EXAMPLES:
Warm Beige → #E8DDD0 (default — AT Studio Signature)
Soft Blush → #EDD5D5
Cool Gray → #E0E0E0
Sage Tint → #D5DDD5
Gold Tint → #E0CFA8
============================================================ */
--border: #E8DDD0;
/* ============================================================
OVERLAY COLOR
The dark tint layer over the hero background photo.
Controls how much the photo is darkened for text readability.
FORMAT: rgba(red, green, blue, opacity)
The opacity value (last number) controls darkness:
0.0 = fully transparent (photo at full brightness)
0.3 = light tint (bright photos)
0.45 = medium tint (default — most photos)
0.6 = heavy tint (very bright or busy photos)
0.75 = very heavy tint (photo almost hidden)
DO NOT change the rgba format — only adjust the last number.
============================================================ */
--overlay: rgba(44, 44, 44, 0.45);
}
/* ============================================================
PRESET THEMES
============================================================
Copy and paste any of these presets into the :root above
to instantly apply a complete color theme.
Just replace all 7 values in :root with the preset values.
============================================================
THEME: AT STUDIO SIGNATURE (Default)
Classic champagne gold on warm cream. Works for any wedding.
--primary: #C9A96E;
--secondary: #FAF7F2;
--dark: #2C2C2C;
--muted: #8C7B6B;
--white: #FFFFFF;
--border: #E8DDD0;
--overlay: rgba(44, 44, 44, 0.45);
THEME: BLUSH & ROSE GOLD
Romantic pink tones. Perfect for garden and floral weddings.
--primary: #B76E79;
--secondary: #FDF5F5;
--dark: #2C1F20;
--muted: #9B7B80;
--white: #FFFFFF;
--border: #EDD5D5;
--overlay: rgba(44, 30, 32, 0.45);
THEME: SAGE & IVORY
Earthy botanical tones. Perfect for garden and outdoor weddings.
--primary: #7A9E7E;
--secondary: #F5F8F5;
--dark: #1E2A1E;
--muted: #6B8C6B;
--white: #FFFFFF;
--border: #D5DDD5;
--overlay: rgba(30, 42, 30, 0.45);
THEME: DUSTY BLUE & SILVER
Cool elegant tones. Perfect for formal and winter weddings.
--primary: #6B8CAE;
--secondary: #F5F7FA;
--dark: #1A2340;
--muted: #6B7B99;
--white: #FFFFFF;
--border: #D5DCE8;
--overlay: rgba(26, 35, 64, 0.50);
THEME: TERRACOTTA & WARM IVORY
Bold earthy tones. Perfect for rustic and boho weddings.
--primary: #C17754;
--secondary: #FBF7F2;
--dark: #2A1810;
--muted: #8C6B54;
--white: #FFFFFF;
--border: #E8D5C4;
--overlay: rgba(42, 24, 16, 0.45);
THEME: DEEP NAVY & GOLD
Bold classic tones. Perfect for formal and gala weddings.
--primary: #C9A96E;
--secondary: #F5F6FA;
--dark: #1A2340;
--muted: #6B7B99;
--white: #FFFFFF;
--border: #D5DCE8;
--overlay: rgba(26, 35, 64, 0.55);
THEME: LAVENDER & SILVER
Soft dreamy tones. Perfect for spring and garden weddings.
--primary: #8B7BAE;
--secondary: #F8F5FC;
--dark: #2A2040;
--muted: #7B6B9B;
--white: #FFFFFF;
--border: #DDD5EC;
--overlay: rgba(42, 32, 64, 0.45);
THEME: EMERALD & GOLD
Rich jewel tones. Perfect for luxury and formal weddings.
--primary: #C9A96E;
--secondary: #F5FAF6;
--dark: #1A2E1E;
--muted: #4A7A54;
--white: #FFFFFF;
--border: #C8DDC8;
--overlay: rgba(26, 46, 30, 0.50);
============================================================ */
/* ============================================================
AT STUDIO — PREMIUM WEDDING TEMPLATE
theme.css — Color Theme File
© 2025 AT Studio. All Rights Reserved.
Unauthorized copying or redistribution is prohibited.
============================================================ */