/* ============================================================
custom.css — Single Page Site Template
Pairs with simple.css (loaded first).
HOW TO USE THIS FILE:
1. Fill in the Brand Variables block below with client values.
2. Upload the client's logo and update the header accordingly.
3. Do not edit the Layout & Components section unless the
project scope requires it.
============================================================ */
/* ------------------------------------------------------------
Brand Variables — EDIT THIS BLOCK PER CLIENT
------------------------------------------------------------ */
:root {
/* Colors */
--color-header: #1e2430; /* Header & footer background */
--color-accent: #7ec8e3; /* Primary accent: nav hover, buttons, highlights */
--color-accent-dark: #191970; /* Body link color (needs contrast on --color-body-bg) */
--color-body-bg: #f8f9fa; /* Page background */
--color-text: #1e2430; /* Primary body text */
--color-muted: #5a6270; /* Secondary / muted text */
--color-border: #d8dce2; /* Borders and rules */
--color-surface: #ffffff; /* Cards, section backgrounds */
/* Typography */
--font-body: 'Nunito Sans', system-ui, sans-serif;
/* Override simple.css variables so its components inherit client palette */
--bg: var(--color-body-bg);
--text: var(--color-text);
--text-light: var(--color-muted);
--border: var(--color-border);
--accent: var(--color-accent-dark);
--accent-hover: var(--color-accent);
--accent-bg: var(--color-surface);
}
/* ------------------------------------------------------------
Base Typography
------------------------------------------------------------ */
body {
font-size: 1rem;
font-weight: 400;
line-height: 1.7;
color: var(--color-text);
background-color: var(--color-body-bg);
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: 1.25;
color: var(--color-text);
}
p {
margin-bottom: 1rem;
}
strong {
font-weight: 700;
}
/* ------------------------------------------------------------
Links
------------------------------------------------------------ */
a,
a:visited {
color: var(--color-accent-dark);
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.15s ease;
}
a:hover {
color: var(--color-accent);
text-decoration: none;
}
/* ------------------------------------------------------------
Header
simple.css sets body > header with:
grid-column: 1 / -1 (full viewport width)
text-align: center
background-color: var(--accent-bg)
We preserve grid-column and text-align, only swap the
background and text colors for client branding.
------------------------------------------------------------ */
body > header {
background-color: var(--color-header) !important;
border-bottom: none;
color: #ffffff;
}
body > header h1 {
color: #ffffff;
}
body > header h1 a,
body > header h1 a:visited {
color: #ffffff;
text-decoration: none;
}
body > header h1 a:hover {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
}
/* Logo when present */
body > header img.logo {
height: 48px;
width: auto;
vertical-align: middle;
margin-right: 0.5rem;
}
/* ------------------------------------------------------------
Sticky Navigation
The nav is a direct child of — a sibling of ,
not inside it. This is the only way position: sticky works
correctly with simple.css's grid layout. The nav sticks to
the top of the viewport as the user scrolls past the header.
In header.php the , before .
simple.css grid gives body > * grid-column: 2 by default,
so we explicitly set grid-column: 1 / -1 for full width.
------------------------------------------------------------ */
body > nav {
position: sticky;
top: 0;
z-index: 100;
grid-column: 1 / -1;
background-color: var(--color-header);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding: 0;
font-size: 1rem;
line-height: 2;
}
body > nav ul {
align-content: space-around;
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
list-style-type: none;
margin: 0;
padding: 0;
}
body > nav ul li {
display: inline-block;
}
body > nav a,
body > nav a:visited {
margin: 0 0.5rem;
color: rgba(255, 255, 255, 0.7);
display: inline-block;
padding: 0.4rem 0.75rem;
text-decoration: none;
border: 1px solid transparent;
border-radius: 4px;
transition: color 0.15s ease, border-color 0.15s ease;
}
body > nav a:hover {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.3);
background: none;
}
body > nav a.current,
body > nav a[aria-current="page"] {
color: var(--color-accent);
border-color: var(--color-accent);
}
/* ------------------------------------------------------------
Footer
simple.css body > footer gets grid-column: 2 via body > *
so it is constrained to the content column by default.
We set grid-column: 1 / -1 to make our dark background
stretch full width, matching the header.
------------------------------------------------------------ */
body > footer {
grid-column: 1 / -1;
background-color: var(--color-header);
color: rgba(255, 255, 255, 0.55);
border-top: none;
font-size: 0.85rem;
padding: 1.5rem 1rem;
text-align: center;
margin-top: 0;
}
body > footer a,
body > footer a:visited {
color: rgba(255, 255, 255, 0.75);
text-decoration: none;
}
body > footer a:hover {
color: #ffffff;
}
/* ------------------------------------------------------------
Layout & Components — Single Page Tier
simple.css handles alignment and text flow.
These classes provide structure, spacing, and surface color.
Add overrides only when simple.css falls short.
------------------------------------------------------------ */
/* Scroll offset accounts for sticky nav height so section
headings are not hidden behind the nav bar on anchor jump. */
:target {
scroll-margin-top: 3.5rem;
}
/* Section wrappers — alternating background for visual separation.
Uses element for correct HTML semantics. */
.sp-section {
padding: 2.5rem 0;
border-bottom: 1px solid var(--color-border);
}
.sp-section:last-of-type {
border-bottom: none;
}
.sp-section h2 {
margin-top: 0;
}
/* Section images — up to 2 per content section.
Recommended source size: 800x500px landscape.
Two images sit side by side; on narrow screens they stack. */
.sp-images {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin: 1.5rem 0;
}
.sp-images img {
flex: 1 1 calc(50% - 0.5rem);
min-width: 200px;
width: 100%;
height: 220px;
object-fit: cover;
border-radius: 6px;
border: 1px solid var(--color-border);
}
/* Single image — full width */
.sp-images.sp-images--one img {
flex: 1 1 100%;
height: 280px;
}
/* Gallery grid — recommended 6 images for a clean 3x2 layout
on desktop and 2x3 on mobile with no orphaned images.
Adjust image count as needed — grid reflows automatically.
Recommended source size: 600x600px square. */
.sp-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.sp-gallery img {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: 6px;
border: 1px solid var(--color-border);
transition: opacity 0.2s ease;
}
.sp-gallery img:hover {
opacity: 0.85;
}
/* Hero h2 Centered Text */
.hero {
text-align: center;
}
/* Hero call-to-action phone link
Optional — include in hero section for service businesses
where calling is the most common visitor action. */
.sp-hero-call {
margin-top: 1.25rem;
}
.sp-hero-call a {
display: inline-block;
background-color: var(--color-header);
color: #ffffff;
text-decoration: none;
padding: 0.6rem 1.5rem;
border-radius: 6px;
font-weight: 600;
font-size: 1.05rem;
transition: background-color 0.15s ease;
}
.sp-hero-call a:hover {
background-color: var(--color-accent-dark);
color: #ffffff;
}
/* Contact info block — sits above the form in the Contact section.
Mirrors the Business Card Site layout so upgrading clients
retain phone, email, address, hours, and directions. */
.sp-contact-info {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--color-border);
}
.sp-contact-info ul {
list-style: none;
padding: 0;
margin: 0 0 1.5rem;
}
.sp-contact-info ul li {
padding: 0.4rem 0;
border-bottom: 1px solid var(--color-border);
font-size: 1.05rem;
}
.sp-contact-info ul li:last-child {
border-bottom: none;
}
.sp-contact-info .label {
font-weight: 600;
display: inline-block;
min-width: 6rem;
color: var(--color-muted);
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.sp-contact-info .button {
background-color: var(--color-header);
border-color: var(--color-header);
color: #ffffff;
border-radius: 6px;
font-weight: 600;
transition: background-color 0.15s ease;
}
.sp-contact-info .button:hover {
background-color: var(--color-accent-dark);
border-color: var(--color-accent-dark);
color: #ffffff;
}
/* Hours table within contact info */
.sp-contact-info table {
margin: 0.5rem 0 0;
width: 100%;
border-collapse: collapse;
}
.sp-contact-info td {
border: none;
padding: 0.3rem 0;
font-size: 1rem;
}
.sp-contact-info tr:nth-child(even) {
background-color: transparent;
}
.sp-contact-info .day {
font-weight: 600;
width: 9rem;
border: none;
background-color: transparent;
}
/* Contact form */
.sp-contact-form {
margin-top: 1.5rem;
}
.sp-contact-form .required {
color: var(--color-accent-dark);
margin-left: 2px;
}
.sp-contact-form input[type="text"],
.sp-contact-form input[type="email"],
.sp-contact-form textarea {
width: 100%;
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 6px;
padding: 0.6rem 0.75rem;
font-family: var(--font-body);
font-size: 1rem;
color: var(--color-text);
transition: border-color 0.15s ease;
}
.sp-contact-form input[type="text"]:focus,
.sp-contact-form input[type="email"]:focus,
.sp-contact-form textarea:focus {
border-color: var(--color-accent-dark);
outline: none;
}
.sp-contact-form input[type="submit"] {
background-color: var(--color-header);
color: #ffffff;
border: none;
border-radius: 6px;
padding: 0.65rem 2rem;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease;
margin-top: 0.5rem;
}
.sp-contact-form input[type="submit"]:hover {
background-color: var(--color-accent-dark);
}