/* ── ELIZA JANE REILLY — Custom CSS for Squarespace 7.1 ── */
/* COLOR VARIABLES */
:root {
–ink: #1a1410;
–parchment: #f5f0e8;
–warm-white: #faf8f3;
–rust: #b5451b;
–gold: #c8932a;
–slate: #4a5568;
–muted: #8a8070;
–rule: #d4c9b0;
}
/* ── GLOBAL BODY ── */
body {
background-color: var(–warm-white) !important;
font-family: ‘Libre Baskerville’, Georgia, serif !important;
color: var(–ink) !important;
}
/* ── NAVIGATION / HEADER ── */
.header-nav,
.Site-header,
header.Header,
.header {
background-color: var(–ink) !important;
border-bottom: 3px solid var(–rust) !important;
}
/* Nav links */
.header-nav-item a,
.Header-nav .nav-item a,
nav[data-nc-base=”header”] a,
.site-navigation a {
font-family: ‘DM Sans’, sans-serif !important;
font-size: 0.75rem !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
color: var(–parchment) !important;
opacity: 0.8;
transition: opacity 0.2s, color 0.2s !important;
}
.header-nav-item a:hover,
nav[data-nc-base=”header”] a:hover {
color: var(–gold) !important;
opacity: 1 !important;
}
/* Site title in nav */
.site-title a,
.Header-branding a,
.header-title a {
font-family: ‘Playfair Display’, serif !important;
font-weight: 700 !important;
color: var(–parchment) !important;
letter-spacing: 0.03em !important;
}
/* ── HEADINGS ── */
h1, h2, h3, h4,
.sqsrte-large,
[data-rte-preserve-empty] h1,
[data-rte-preserve-empty] h2 {
font-family: ‘Playfair Display’, serif !important;
color: var(–ink) !important;
letter-spacing: -0.01em !important;
line-height: 1.15 !important;
}
h1 { font-size: clamp(2.2rem, 4vw, 3.8rem) !important; font-weight: 900 !important; }
h2 { font-size: clamp(1.6rem, 2.5vw, 2.2rem) !important; font-weight: 700 !important; }
h3 { font-size: 1.25rem !important; font-weight: 700 !important; }
h4 { font-size: 1rem !important; font-weight: 700 !important; }
/* ── BODY TEXT ── */
p, li, blockquote,
.sqsrte-normal {
font-family: ‘Libre Baskerville’, Georgia, serif !important;
font-size: 0.975rem !important;
line-height: 1.8 !important;
color: var(–slate) !important;
}
/* ── BUTTONS ── */
.sqs-block-button-element,
.sqsf-submit-btn,
a.sqs-block-button-element {
font-family: ‘DM Sans’, sans-serif !important;
font-size: 0.78rem !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
background-color: var(–rust) !important;
color: #fff !important;
border: none !important;
border-radius: 2px !important;
padding: 0.75rem 1.75rem !important;
transition: background 0.2s !important;
}
.sqs-block-button-element:hover {
background-color: #c94e20 !important;
}
/* Outline button variant — add class “outline-btn” to button block */
.outline-btn .sqs-block-button-element {
background: transparent !important;
border: 1px solid var(–ink) !important;
color: var(–ink) !important;
}
/* ── HERO / BANNER SECTION ── */
.Index-page:first-child,
section.page-section:first-of-type,
.sqs-layout .sqs-row:first-child {
background-color: var(–ink) !important;
}
/* Hero text color override for dark backgrounds */
.Index-page:first-child h1,
.Index-page:first-child h2,
.Index-page:first-child p {
color: var(–parchment) !important;
}
/* ── SECTION BACKGROUNDS ── */
/* Alternate section backgrounds for visual rhythm */
.page-section:nth-child(even) {
background-color: var(–parchment) !important;
}
.page-section:nth-child(odd) {
background-color: var(–warm-white) !important;
}
/* ── BLOG CARDS ── */
.BlogList-item,
.blog-item,
article.entry {
border-bottom: 1px solid var(–rule) !important;
padding-bottom: 2rem !important;
margin-bottom: 2rem !important;
}
.BlogList-item-title,
.entry-title {
font-family: ‘Playfair Display’, serif !important;
font-size: 1.3rem !important;
font-weight: 700 !important;
color: var(–ink) !important;
line-height: 1.3 !important;
}
.BlogList-item-title a,
.entry-title a {
color: var(–ink) !important;
text-decoration: none !important;
transition: color 0.2s !important;
}
.BlogList-item-title a:hover,
.entry-title a:hover {
color: var(–rust) !important;
}
.BlogList-item-meta,
.entry-dateline {
font-family: ‘DM Sans’, sans-serif !important;
font-size: 0.72rem !important;
color: var(–muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
}
/* ── LINKS ── */
a {
color: var(–rust) !important;
transition: color 0.2s !important;
}
a:hover { color: #c94e20 !important; }
/* ── BLOCKQUOTES ── */
blockquote {
font-family: ‘Playfair Display’, serif !important;
font-style: italic !important;
font-size: 1.3rem !important;
line-height: 1.5 !important;
color: var(–ink) !important;
border-left: 3px solid var(–rust) !important;
padding-left: 1.5rem !important;
margin: 2rem 0 !important;
}
/* ── DIVIDERS / RULES ── */
hr, .sqs-block-horizontalrule hr {
border-color: var(–rule) !important;
border-width: 1px !important;
}
/* ── FOOTER ── */
footer, .Footer, .site-footer {
background-color: var(–ink) !important;
color: var(–parchment) !important;
border-top: 3px solid var(–rust) !important;
}
footer p, footer a,
.Footer p, .Footer a {
font-family: ‘DM Sans’, sans-serif !important;
font-size: 0.78rem !important;
color: rgba(245,240,232,0.55) !important;
}
footer a:hover, .Footer a:hover {
color: var(–gold) !important;
}
/* ── FORM FIELDS ── */
input[type=”text”],
input[type=”email”],
textarea {
font-family: ‘Libre Baskerville’, serif !important;
border: 1px solid var(–rule) !important;
border-radius: 2px !important;
padding: 0.75rem 1rem !important;
background: var(–warm-white) !important;
color: var(–ink) !important;
}
input:focus, textarea:focus {
border-color: var(–gold) !important;
outline: none !important;
}
/* ── IMAGE BLOCKS ── */
.sqs-block-image img {
border-radius: 2px !important;
}
/* ── SPACING REFINEMENTS ── */
.sqs-layout .sqs-row {
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}
/* ── CATEGORY / TAG LABELS ── */
.blog-category,
.entry-category a,
.tag-item a {
font-family: ‘DM Sans’, sans-serif !important;
font-size: 0.65rem !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.18em !important;
color: var(–rust) !important;
background: rgba(181,69,27,0.08) !important;
padding: 0.2rem 0.6rem !important;
border-radius: 2px !important;
text-decoration: none !important;
}
/* ── MOBILE REFINEMENTS ── */
@media (max-width: 767px) {
h1 { font-size: 2.2rem !important; }
h2 { font-size: 1.6rem !important; }
.sqs-layout .sqs-row { padding-top: 2rem !important; padding-bottom: 2rem !important; }
}