*/
/* ============================================================
COLOR PALETTE — edit these to change the whole site at once
============================================================ */
:root {
--luxury-bg: #f8f6f2; /* warm off-white background */
--luxury-bg-dark: #1c1c1c; /* deep charcoal for dark sections */
--luxury-text: #1c1c1c; /* main text color */
--luxury-text-light: #f8f6f2;/* text on dark backgrounds */
--luxury-accent: #c9a24b; /* richer, more "gilded" gold */
--luxury-border: #d8d2c4; /* soft hairline borders */
}
/* ============================================================
BACKGROUND — overall site background
============================================================ */
body {
background-color: var(--luxury-bg) !important;
color: var(--luxury-text) !important;
}
/* Section backgrounds — Squarespace wraps sections in .page-section */
.page-section {
background-color: var(--luxury-bg) !important;
}
/* Optional: make every OTHER section a deep charcoal for contrast.
Remove this block if you want a single flat background instead. */
.page-section:nth-of-type(even) {
background-color: var(--luxury-bg-dark) !important;
color: var(--luxury-text-light) !important;
}
.page-section:nth-of-type(even) h1,
.page-section:nth-of-type(even) h2,
.page-section:nth-of-type(even) h3,
.page-section:nth-of-type(even) p {
color: var(--luxury-text-light) !important;
}
/* ============================================================
TYPOGRAPHY — the fastest way to read "luxury"
============================================================ */
/* Headlines: elegant serif, wide letter-spacing */
h1, h2, h3,
.Header-branding-logo,
.sqs-block-html h1,
.sqs-block-html h2 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 500 !important;
letter-spacing: 0.04em !important;
text-transform: none !important;
}
h1 { font-size: 3.2rem !important; }
h2 { font-size: 2.2rem !important; }
h3 { font-size: 1.5rem !important; letter-spacing: 0.08em !important; }
/* Body text: clean, light-weight sans-serif */
p, li, span, a,
.sqs-block-html p {
font-family: 'Jost', 'Helvetica Neue', sans-serif !important;
font-weight: 300 !important;
line-height: 1.75 !important;
letter-spacing: 0.01em !important;
}
/* Navigation: wide-tracked small caps feel */
.header-nav-item a {
font-family: 'Jost', sans-serif !important;
font-weight: 400 !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
font-size: 0.8rem !important;
}
/* ============================================================
BUTTONS — understated, not flashy
============================================================ */
.sqs-block-button-element {
background-color: transparent !important;
border: 1px solid var(--luxury-accent) !important;
color: var(--luxury-text) !important;
border-radius: 0 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
font-size: 0.75rem !important;
padding: 14px 32px !important;
transition: all 0.4s ease !important;
}
.sqs-block-button-element:hover {
background-color: var(--luxury-accent) !important;
color: #fff !important;
}
/* ============================================================
DIVIDERS / BORDERS — thin, quiet lines instead of heavy rules
============================================================ */
hr, .divider {
border-color: var(--luxury-border) !important;
opacity: 0.6 !important;
}
/* ============================================================
IMAGES — keep them, just give them a touch of restraint
============================================================ */
img {
filter: saturate(0.9) contrast(1.02) !important;
}
/* Subtle fade-in feel on image blocks (works on most 7.1 templates) */
.image-block-outer-wrapper {
transition: opacity 0.6s ease !important;
}
/* ============================================================
SITE-SPECIFIC — Gilded Heart Salon
============================================================ */
/* Give the homepage intro text blocks room to breathe */
.fluid-engine .sqs-block-html {
padding: 40px !important;
}
/* Editorial hover-zoom on the salon photo grid */
.image-block-outer-wrapper img {
transition: transform 0.6s ease !important;
}
.image-block-outer-wrapper:hover img {
transform: scale(1.03) !important;
}
Gilded Heart Salon LLC
