/* ==============================================================================
SYNERGY ENERGY SOLUTIONS — FOUNDATION STYLESHEET (LAYER 1)
==============================================================================
PURPOSE
-------
Site-wide foundation styles: design tokens, base typography, layout
containers, accessibility helpers, the canonical button, and global
resets. Every page on the site needs this loaded first.
WORDPRESS PLACEMENT
-------------------
Concatenate or import this into the theme's main stylesheet, BEFORE the
header/footer CSS and BEFORE any page-specific CSS:
wp-content/themes/synergy/assets/css/foundation.css
In functions.php:
wp_enqueue_style(
'synergy-foundation',
get_template_directory_uri() . '/assets/css/foundation.css',
array(),
filemtime( get_template_directory() . '/assets/css/foundation.css' )
);
ARCHITECTURE — 3-LAYER STRATEGY
--------------------------------
This file is Layer 1 of 3. Why split this way?
The 22 source pages had two parallel design systems running:
SYSTEM A (modern): --brand-primary, Poppins headings, pill buttons,
responsive clamp() typography
SYSTEM B (legacy): --brand, Open Sans headings, square uppercase buttons,
fixed-px typography
Per client decision, SYSTEM A is canonical going forward.
Legacy token names (--brand, --brand-dark, --teal, --yellow, etc.) are
kept as ALIASES so any existing rules that reference them keep working.
This makes the migration safe — nothing breaks when this file replaces
the old per-page styles.
Layer 1 (this file): foundation — tokens, reset, typography, buttons,
container. ~300 lines. Site-wide. Done in one pass.
Layer 2 (later): shared components — .page-hero, .trust-bar,
.faq-list, .cta-banner, .breadcrumb, etc.
Consolidated incrementally during page conversion.
Layer 3 (per page): page-specific styles — Tesla animations, calculator
UIs, diagram styles. Enqueued only on their page.
CORPORATE IDENTITY COMPLIANCE
------------------------------
Brand colours, font specifications, and grey are taken directly from
the Synergy Energy Solutions CI guide (2024-2026 edition):
- Primary green: #a7be39
- Secondary navy: #1e4079
- Accent yellow: #ffd800 (use sparingly per client direction)
- Brand grey: #636466
- Primary font: Poppins (Bold, Medium, Regular)
- Minimum font: 9pt (any text below 9pt violates CI)
The earlier prototype iteration used a darker green (#829823), no navy
token, and amber masquerading as yellow. Those have all been corrected
to match the CI guide on 12 May 2026.
WHAT'S DELIBERATELY NOT HERE
-----------------------------
- Header / nav styles (already in master-header.html)
- Footer styles (already in master-footer.html)
- .page-hero, .trust-bar, .faq-list, .breadcrumb (deferred to Layer 2)
- Hero sliders, calculators, diagrams, comparison tables (Layer 3)
- Section padding patterns that varied per page (Layer 2)
==============================================================================
*/
/* ==============================================================================
1. DESIGN TOKENS
==============================================================================
The single source of truth for colours, fonts, shadows, radii, and timing.
Edit these and the entire site updates.
ORGANISATION:
- Brand colours (canonical) + legacy aliases
- Neutral colours (ink, text, lines, backgrounds)
- Accent / state colours
- Typography
- Shadows
- Border radius
- Transitions
*/
:root {
/* ----- BRAND COLOURS (canonical — Corporate Identity guide) -----
Source of truth: Synergy Energy Solutions CI guide.
Primary green (#a7be39) is the dominant brand colour. Use for CTAs,
primary links, focus states, and the brand gradient.
Navy (#1e4079) is the secondary brand colour — use for accent panels,
hero overlays, and decorative elements.
Yellow (#ffd800) is a brand accent — use SPARINGLY (highlights, icons,
section eyebrows). Yellow is NOT for primary CTAs or large fills.
For warning/urgency UI (e.g. SSEG announcement), use --accent-warn (amber). */
--brand-primary: #a7be39; /* primary olive-green (CI) */
--brand-primary-dark: #8ea230; /* hover / pressed state (15% darker) */
--brand-primary-light: #b4c857; /* lighter accent / hover on dark (15% lighter) */
--brand-gradient: linear-gradient(100deg, #a7be39 0%, rgba(167,190,57,0.73) 100%);
--brand-navy: #1e4079; /* secondary navy blue (CI) */
--brand-navy-dark: #1a3667; /* navy hover / pressed state */
--brand-navy-light: #405d8d; /* navy lighter / on dark surfaces */
--brand-yellow: #ffd800; /* brand accent yellow (CI) — use sparingly */
--brand-yellow-dark: #d9b800; /* yellow hover / pressed state */
--brand-grey: #636466; /* official brand grey (CI) */
/* ----- BRAND COLOURS (legacy aliases — backwards compatibility) -----
These keep older CSS rules working. New code should use the canonical
names above. Do not delete these aliases until a full audit confirms
no rule references them.
IMPORTANT: --navy stays aliased to --ink (a near-black) because 12
legacy rules use var(--navy) expecting the dark ink colour. The actual
CI navy blue is --brand-navy. Do not change this mapping without
auditing every use of var(--navy) first.
Same for --yellow: stays aliased to --accent-warn (amber) for warning
UI. The actual CI brand yellow is --brand-yellow. */
--brand: var(--brand-primary);
--brand-dark: var(--brand-primary-dark);
--brand-light: var(--brand-primary-light);
--teal: var(--brand-primary); /* legacy: was a separate colour, now aliased */
--teal-dark: var(--brand-primary-dark);
--teal-light: var(--brand-primary-light);
/* ----- INK / TEXT COLOURS ----- */
--ink: #2d3940; /* darkest — headings, dark sections */
--ink-soft: #4e4e4e; /* body text */
--muted: #636466; /* secondary text, captions — matches CI brand grey */
--heading: #333333; /* legacy alias — was used for h1-h6 colour */
--text: #636466; /* legacy alias — was used for body text (now CI grey) */
--navy: #2d3940; /* LEGACY alias for --ink (NOT the CI navy — use --brand-navy for that) */
--navy-overlay: rgba(45, 57, 64, 0.5); /* legacy — used in hero overlays */
/* ----- LINES & BORDERS ----- */
--line: #e2e2e2; /* default border colour */
/* ----- BACKGROUNDS ----- */
--bg: #ffffff; /* page background */
--bg-soft: #f7f8f4; /* alternating section background (warm off-white) */
--bg-panel: #fafbf6; /* card/panel background */
--light-bg: var(--bg-soft); /* legacy alias */
--footer-bg: #1a2024; /* dark footer (matches master-footer.html) */
/* ----- ACCENT / STATE COLOURS -----
Note the distinction between:
--accent-warn (amber #d97706) — for warning/urgency UI like the
SSEG announcement bar. Better contrast on white than yellow.
--brand-yellow (#ffd800) — official CI accent yellow. Brand decoration
only (highlights, icons, eyebrows). Defined in the brand block above. */
--accent-warn: #d97706; /* amber — warnings, urgency CTAs */
--yellow: #d97706; /* legacy alias for --accent-warn (NOT the CI brand yellow — use --brand-yellow for that) */
--green: #86CD91; /* success state */
/* ----- TYPOGRAPHY ----- */
--font-display: 'Poppins', system-ui, -apple-system, sans-serif;
--font-body: 'Open Sans', system-ui, -apple-system, sans-serif;
/* ----- SHADOWS ----- */
--shadow-sm: 0 2px 8px rgba(45,57,64,0.06);
--shadow-md: 0 8px 24px rgba(45,57,64,0.10);
--shadow-lg: 0 16px 40px rgba(45,57,64,0.14);
/* ----- BORDER RADIUS ----- */
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-pill: 999px; /* fully rounded (pill buttons) */
/* ----- TRANSITIONS ----- */
--transition-fast: 0.15s ease;
--transition-base: 0.2s ease;
--transition-slow: 0.25s ease;
}
/* ==============================================================================
2. GLOBAL RESET
==============================================================================
Modern minimal reset. Not as aggressive as Eric Meyer's, not as opinionated
as Tailwind's preflight. Just what every page needs.
*/
*, *::before, *::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
/* Respect user's reduced-motion preference (overridden below if requested) */
}
body {
margin: 0;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.7;
color: var(--ink-soft);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Prevent horizontal scroll from elements that overshoot the viewport */
overflow-x: hidden;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
height: auto;
}
/* Form elements should inherit font (browsers don't do this by default) */
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
/* ==============================================================================
3. BASE TYPOGRAPHY
==============================================================================
Headings use Poppins (display font). Body uses Open Sans.
Heading sizes use clamp() for fluid responsive scaling without media queries.
The min and max values match the source pages; the middle value scales with
viewport width.
*/
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
color: var(--ink);
margin: 0 0 0.5em;
line-height: 1.2;
font-weight: 700;
}
h1 {
font-size: clamp(2rem, 4.2vw, 3.25rem);
font-weight: 800;
letter-spacing: -0.02em;
}
h2 {
font-size: clamp(1.65rem, 2.8vw, 2.25rem);
font-weight: 700;
letter-spacing: -0.01em;
}
h3 {
font-size: 1.35rem;
font-weight: 600;
}
h4 {
font-size: 1.1rem;
font-weight: 600;
}
h5 {
font-size: 1rem;
font-weight: 600;
}
h6 {
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
p {
margin: 0 0 1em;
}
a {
color: var(--brand-primary-dark);
text-decoration: none;
transition: color var(--transition-base);
}
a:hover {
color: var(--brand-primary);
}
/* Lists — remove default padding so they sit flush with parent unless overridden */
ul, ol {
margin: 0 0 1em;
padding-left: 1.5em;
}
li {
margin-bottom: 0.4em;
}
/* Inline code & preformatted */
code, kbd, samp, pre {
font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
font-size: 0.92em;
}
/* Strong/em — explicit so they don't get lost in resets */
strong, b { font-weight: 700; }
em, i { font-style: italic; }
/* Horizontal rule */
hr {
border: 0;
border-top: 1px solid var(--line);
margin: 2em 0;
}
/* Selection colour */
::selection {
background: var(--brand-primary);
color: #fff;
}
/* ==============================================================================
4. LAYOUT CONTAINERS
==============================================================================
Two width variants used across the site.
.container — main content width (max 1180px)
.container-narrow — text-heavy content like blog posts, legal pages
*/
.container {
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
}
.container-narrow {
max-width: 960px;
margin: 0 auto;
padding: 0 24px;
}
/* ==============================================================================
5. ACCESSIBILITY HELPERS
==============================================================================
*/
/* Skip-link — keyboard users press Tab on page load and see this. */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--brand-primary);
color: #fff;
padding: 8px 16px;
z-index: 1000;
transition: top var(--transition-base);
}
.skip-link:focus {
top: 0;
color: #fff;
}
/* Visually hidden — content that screen readers should announce but eyes shouldn't see */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Visible focus ring — for keyboard users.
Modern browsers handle :focus-visible to avoid showing rings on mouse clicks. */
:focus-visible {
outline: 2px solid var(--brand-primary);
outline-offset: 2px;
border-radius: 2px;
}
/* ==============================================================================
6. CANONICAL BUTTON (System A: pill-shaped with arrow)
==============================================================================
The .btn class is the base; .btn-primary, .btn-secondary, .btn-white are
modifiers. All buttons get a → arrow after the text that slides on hover.
This deliberately matches the modern System A button (rounded, mixed case)
and overrides any legacy System B button styles (square, uppercase) that
might appear in page-specific CSS.
USAGE:
Get Quote
Learn more
View specs (use on dark backgrounds)
*/
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-display);
font-weight: 600;
font-size: 0.95rem;
padding: 12px 26px;
border-radius: var(--radius-pill);
cursor: pointer;
border: 2px solid transparent;
transition: all var(--transition-slow);
text-decoration: none;
position: relative;
white-space: nowrap;
}
.btn::after {
content: '→';
display: inline-block;
transition: transform var(--transition-slow);
}
.btn:hover::after {
transform: translateX(4px);
}
.btn-primary {
background: var(--brand-gradient);
color: #fff;
box-shadow: 0 4px 14px rgba(167,190,57,0.35);
}
.btn-primary:hover {
color: #fff;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(167,190,57,0.45);
}
.btn-secondary {
background: transparent;
color: var(--brand-primary-dark);
border-color: var(--brand-primary);
}
.btn-secondary:hover {
background: var(--brand-primary);
color: #fff;
transform: translateY(-2px);
}
.btn-white {
background: #fff;
color: var(--brand-primary-dark);
}
.btn-white:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
color: var(--brand-primary-dark);
}
/* ==============================================================================
7. RESPONSIVE FALLBACKS
==============================================================================
Small-screen adjustments for the foundation only. Layout-level responsive
rules live with their respective components.
*/
@media (max-width: 500px) {
body {
font-size: 15px;
}
.btn {
padding: 11px 22px;
font-size: 0.92rem;
}
.container,
.container-narrow {
padding: 0 18px;
}
}
/* ==============================================================================
8. MOTION PREFERENCES
==============================================================================
Respect users who've asked their OS to reduce motion (vestibular disorders,
migraine triggers, simple preference). This disables animations and smooth
scrolling globally.
*/
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
html {
scroll-behavior: auto;
}
}
/* ==============================================================================
9. PRINT STYLES
==============================================================================
Hide interactive UI, render in black on white, make links visible as URLs.
Header and footer have their own print rules in their respective stylesheets.
*/
@media print {
body {
color: #000;
background: #fff;
font-size: 11pt;
line-height: 1.5;
}
.skip-link,
.btn {
display: none !important;
}
a {
color: #000;
text-decoration: underline;
}
/* Show URL after external links in print */
a[href^="http"]:not([href*="synergyenergy.co.za"])::after {
content: " (" attr(href) ")";
font-size: 0.85em;
color: #555;
}
h1, h2, h3 {
page-break-after: avoid;
}
img {
max-width: 100% !important;
page-break-inside: avoid;
}
}
/* =========================================================
BREADCRUMB — global styling
Targets the semantic