/* =============================================================================
GETSITEGO — THEME CONTROL PANEL
-----------------------------------------------------------------------------
This is the ONLY file you need to edit to restyle the entire site.
Everything else (base.css, components.css, layout.css) reads from here.
HOW TO CHANGE COLORS -> edit "2. BRAND PALETTE" below.
HOW TO CHANGE FONTS -> edit "1. FONTS" below, and swap the to Google
Fonts in the of each HTML page.
ALTERNATE PALETTES -> see the bottom of this file. Put data-palette="warm"
on the tag to switch a whole page's colors.
Handy for per-industry template pages.
========================================================================== */
:root {
/* This site is a light design. Saying so stops phones in dark mode from
re-colouring form controls, scrollbars and the like on their own. */
color-scheme: light;
/* ---------------------------------------------------------------------------
1. FONTS
Change these two lines to restyle all typography.
Remember to also update the Google Fonts in each HTML file's .
------------------------------------------------------------------------ */
--font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-weight-body: 400;
--font-weight-medium: 500;
--font-weight-semi: 600;
--font-weight-bold: 700;
--font-weight-heading: 800;
--letter-spacing-heading: -0.02em;
--letter-spacing-caps: 0.04em;
--line-height-body: 1.65;
--line-height-heading: 1.15;
/* ---------------------------------------------------------------------------
2. BRAND PALETTE (raw colors — change these to rebrand)
------------------------------------------------------------------------ */
--brand: #4B5EFC; /* main brand color */
--brand-dark: #2F3ECF; /* hover / pressed states */
--brand-light: #7C8BFF; /* gradients, soft accents */
--brand-tint: #EEF0FF; /* pale background wash */
--accent: #C6FF4D; /* high-attention CTA color */
--accent-dark: #A6DE2E;
--accent-ink: #0B0F2B; /* text color used ON the accent */
--neutral-900: #0B0F2B; /* headings / dark surfaces */
--neutral-600: #565C7A; /* body copy */
--neutral-300: #E7E8F5; /* borders */
--neutral-100: #F2F2FC; /* alternate section background */
--neutral-50: #FAFAFC; /* page background */
--white: #FFFFFF;
--success: #17A673;
--warning: #E5A50A;
--danger: #D93A4B;
/* ---------------------------------------------------------------------------
3. SEMANTIC COLORS (what the components actually use)
Point these at different palette values rather than hardcoding anywhere.
------------------------------------------------------------------------ */
--color-primary: var(--brand);
--color-primary-dark: var(--brand-dark);
--color-primary-light: var(--brand-light);
--color-primary-tint: var(--brand-tint);
--color-on-primary: var(--white);
--color-accent: var(--accent);
--color-accent-dark: var(--accent-dark);
--color-on-accent: var(--accent-ink);
--color-ink: var(--neutral-900); /* headings */
--color-body: var(--neutral-600); /* paragraphs */
--color-bg: var(--neutral-50); /* page background */
--color-bg-alt: var(--neutral-100); /* banded sections */
--color-surface: var(--white); /* cards */
--color-surface-dark: var(--neutral-900); /* inverted cards */
--color-border: var(--neutral-300);
--color-star: var(--accent-dark);
--color-focus: var(--brand);
/* ---------------------------------------------------------------------------
4. TYPE SCALE (fluid — clamp(min, preferred, max))
------------------------------------------------------------------------ */
--fs-display: clamp(2.4rem, 5.5vw, 3.8rem);
--fs-h2: clamp(1.9rem, 3.4vw, 2.7rem);
--fs-h3: clamp(1.4rem, 2.2vw, 1.8rem);
--fs-h4: 1.05rem;
--fs-lede: 1.2rem;
--fs-lg: 1.1rem;
--fs-base: 1rem;
--fs-sm: 0.92rem;
--fs-xs: 0.85rem;
--fs-2xs: 0.78rem;
/* ---------------------------------------------------------------------------
5. SPACING
------------------------------------------------------------------------ */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--section-padding: 120px;
--section-padding-mobile: 80px;
--grid-gap: 24px;
/* ---------------------------------------------------------------------------
6. SHAPE & DEPTH
------------------------------------------------------------------------ */
--radius-sm: 12px;
--radius-md: 20px;
--radius-lg: 32px;
--radius-pill: 999px;
--shadow-sm: 0 4px 16px rgba(11, 15, 43, .06);
--shadow-md: 0 16px 40px rgba(75, 94, 252, .14);
--shadow-lg: 0 24px 60px rgba(11, 15, 43, .16);
/* ---------------------------------------------------------------------------
7. LAYOUT
------------------------------------------------------------------------ */
--container: 1180px;
--container-narrow: 760px;
--gutter: 24px;
--header-height: 78px;
/* ---------------------------------------------------------------------------
8. MOTION
------------------------------------------------------------------------ */
--ease: cubic-bezier(.4, .2, .2, 1);
--transition: .2s var(--ease);
--transition-slow: .5s var(--ease);
}
/* =============================================================================
ALTERNATE PALETTES
-----------------------------------------------------------------------------
Add data-palette="..." to the tag of any page to re-skin it without
touching a line of component CSS. Useful for the industry template pages:
a dental demo and a steakhouse demo shouldn't look the same.
Only the semantic tokens need overriding.
========================================================================== */
/* Deep green + sand — trades, landscaping, outdoors, food */
:root[data-palette="forest"] {
--brand: #1F7A5A;
--brand-dark: #14573F;
--brand-light: #4FB08A;
--brand-tint: #E8F5EF;
--accent: #F5C451;
--accent-dark: #DDA92F;
--accent-ink: #10231C;
--neutral-900: #10231C;
--neutral-600: #4F6058;
--neutral-300: #DCE8E2;
--neutral-100: #EFF6F2;
--neutral-50: #FAFCFB;
}
/* Warm terracotta — restaurants, cafés, salons, hospitality */
:root[data-palette="warm"] {
--brand: #D9563F;
--brand-dark: #B23E2A;
--brand-light: #F08A72;
--brand-tint: #FDEEE9;
--accent: #F7C948;
--accent-dark: #DDAE2A;
--accent-ink: #2B1410;
--neutral-900: #2B1410;
--neutral-600: #6E5A54;
--neutral-300: #EEE0DB;
--neutral-100: #FAF2EF;
--neutral-50: #FDFAF9;
}
/* Clinical teal — dental, medical, veterinary, wellness */
:root[data-palette="clinical"] {
--brand: #0E8C9B;
--brand-dark: #096A76;
--brand-light: #4FC2CE;
--brand-tint: #E6F6F8;
--accent: #9BE870;
--accent-dark: #7CC953;
--accent-ink: #06232A;
--neutral-900: #06232A;
--neutral-600: #4E6970;
--neutral-300: #DCEAED;
--neutral-100: #EFF7F9;
--neutral-50: #FAFDFD;
}
/* Charcoal + gold — legal, accounting, consulting, real estate */
:root[data-palette="slate"] {
--brand: #2C3E56;
--brand-dark: #1B2839;
--brand-light: #5D7793;
--brand-tint: #ECF0F5;
--accent: #C9A227;
--accent-dark: #A9861A;
--accent-ink: #FFFFFF;
--neutral-900: #131C27;
--neutral-600: #56637A;
--neutral-300: #E1E6ED;
--neutral-100: #F1F4F8;
--neutral-50: #FAFBFD;
}