/*
Theme Name: Quicklaunch
Theme URI:
Author: Quicklaunch Ltd
Author URI: https://www.quicklaunch.co.uk/
Description: Parent theme.
Version: 1.0
*/
/*
MOTION PHYSIOTHERAPY & SPORTS THERAPY — STYLE GUIDE
Version: 1.0
Fonts: Syne (headings), Montserrat (body)
Base font size: 18px
Breakpoints: 1200px, 992px, 768px, 576px
*/
/*
1. GOOGLE FONTS IMPORT
*/
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Montserrat:wght@400;700&display=swap');
/*
2. CSS CUSTOM PROPERTIES
*/
:root {
/* --- Colours --- */
--color-brand-cyan: #00BFDF; /* Primary brand — cyan/teal */
--color-brand-cyan-dark: #009AB8; /* Hover state for cyan elements */
--color-dark: #111827; /* Near-black — dark section BGs, stats */
--color-dark-alt: #1C2333; /* Slightly lighter dark — card BGs on dark */
--color-body-text: #1C1C1C; /* Default body copy */
--color-muted: #6B7280; /* Secondary/muted text */
--color-light-bg: #F4F6F8; /* Subtle section alternates, FAQ BG */
--color-white: #FFFFFF;
--color-border: #E2E6EA; /* Subtle borders, dividers */
/* --- Typography — Families --- */
--font-heading: 'Syne', sans-serif;
--font-body: 'Montserrat', sans-serif;
/* --- Typography — Weights --- */
--fw-regular: 400;
--fw-medium: 500;
--fw-bold: 700;
--fw-extrabold: 800;
/* --- Typography — Base --- */
--font-size-base: 1rem; /* = 18px */
--line-height-body: 1.7;
--line-height-heading: 1.15;
/* --- Typography — Heading Scale (fluid) --- */
--fs-h1: clamp(1.778rem, 4vw, 3rem); /* 32px -> 54px */
--fs-h2: clamp(1.444rem, 3.2vw, 2.333rem); /* 26px -> 42px */
--fs-h3: clamp(1.222rem, 2.5vw, 1.778rem); /* 22px -> 32px */
--fs-h4: clamp(1.111rem, 2vw, 1.333rem); /* 20px -> 24px */
--fs-h5: clamp(1rem, 1.4vw, 1.111rem); /* 18px -> 20px */
--fs-h6: clamp(0.889rem, 1.1vw, 1rem); /* 16px -> 18px */
/* --- Typography — Display / Hero (fluid) --- */
--fs-display: clamp(2rem, 5vw, 4rem); /* 36px -> 72px */
--fs-display-lg: clamp(2.222rem, 6vw, 4.667rem); /* 40px -> 84px */
--fs-display-xl: clamp(2.5rem, 7vw, 5.3rem); /* 45px -> 84.8px */
--fs-display-md: clamp(2rem, 4vw, 3rem); /* 36px -> 54px */
/* --- Typography — Body Scale --- */
--fs-lead: clamp(1rem, 1.6vw, 1.222rem); /* 18px -> 22px */
--fs-body: 1rem; /* 18px — default body */
--fs-small: 0.833rem; /* 15px — captions, meta */
--fs-label: 0.722rem; /* 13px — eyebrow labels, nav utility */
/* --- Spacing --- */
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2.5rem;
--space-xl: 4rem;
--space-xxl: 6rem;
/* --- Radius --- */
--radius-sm: 4px;
--radius-md: 8px;
--radius-pill: 50px;
/* --- Transitions --- */
--transition-base: 0.22s ease;
--transition-slow: 0.35s ease;
/* --- Shadows --- */
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 20px rgba(0, 0, 0, 0.12);
--shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.16);
}
.fs-display-lg {font-size: var(--fs-display-lg);}
.fs-display-xl {font-size: var(--fs-display-xl);}
.fs-display-md {font-size: var(--fs-display-md);}
/*
3. RESET & BASE
*/
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px; /* Base — all rem values reference this */
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
font-weight: var(--fw-regular);
font-size: var(--fs-body);
line-height: var(--line-height-body);
color: var(--color-body-text);
background-color: var(--color-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*
4. HEADINGS
*/
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: var(--fw-medium); /* Default: Medium (500) */
line-height: var(--line-height-heading);
color: var(--color-body-text);
letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }
/* Heading on dark backgrounds */
.dark h1, .dark h2, .dark h3,
.dark h4, .dark h5, .dark h6,
.bg-dark h1, .bg-dark h2, .bg-dark h3,
.bg-dark h4, .bg-dark h5, .bg-dark h6 {
color: var(--color-white);
}
/*
5. DISPLAY / HERO TYPOGRAPHY
*/
/* Standard display heading — hero sections */
.text-display {
font-family: var(--font-heading);
font-size: var(--fs-display);
font-weight: var(--fw-extrabold);
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--color-white);
}
/* Large display variant */
.text-display-lg {
font-family: var(--font-heading);
font-size: var(--fs-display-lg);
font-weight: var(--fw-extrabold);
line-height: 1.0;
letter-spacing: -0.025em;
color: var(--color-white);
}
/* Inline cyan highlight — used within display headings
Usage: Keeping people moving.
*/
.text-highlight {
color: var(--color-brand-cyan);
}
/* Mixed weight within a heading — bold word within medium heading
Usage: wrap a word in or