@charset "UTF-8";
/* ==================================================================
chso2026 — Christian Home School Online Joomla 5/6 site template
A fork of Paschen Communications' pcom2026 template.
(C) 2026 Christian Home School Online — GPL-2.0-or-later
THIS IS THE ONLY STYLESHEET. Edit it and upload it — there is no
build step, no SCSS, nothing to compile. The file you edit is the
file the browser loads. (Same architecture pcom2026 moved to in its
own v1.9 — see that project's CLAUDE.md "Stylesheet: SCSS dropped"
if you're wondering why this isn't SCSS partials.)
Plain, FLAT CSS — no nesting, no preprocessor syntax, no minimum
browser version. Every selector is written out in full, so this file
works in any browser that understands CSS custom properties.
Order matters: a rule further down this file beats an identical
selector further up. Section 9 is last on purpose.
To re-theme colours, fonts and sizes, edit section 1 only.
Media queries in this file, and only these four:
560px phone — hamburger menu takes over
720px phone/lg — header switches to the mobile nav toggle
900px tablet — single-column content, sidebars stack
1280px desktop — boxed content max-width, drops left sidebar
CONTENTS
1. DESIGN TOKENS (1a. self-hosted webfonts)
2. BASE
3. HEADER
4. HOME LAYOUT
5. DEFAULT LAYOUT
6. CONTENT HELPERS
7. FOOTER
8. SYSTEM PAGES
9. STACKING / Z-INDEX
================================================================== */
/* ==================================================================
1. DESIGN TOKENS (:root custom properties)
================================================================== */
/* ---- 1a. Self-hosted webfonts ----
Outfit (headings/nav) and Karla (body) are both served by Google as
variable fonts — a single physical file covers every weight on that
axis, so each weight below points at the SAME file on purpose; this
is not a duplication bug. Never re-add a Google Fonts or
@import: it would leak every visitor's IP + page URL to Google before
the page paints (GDPR), can't carry an SRI hash, and is render-
blocking on the error/offline pages. See fonts/OFL.txt for licensing. */
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('../fonts/outfit-variable-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('../fonts/outfit-variable-normal-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Karla';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('../fonts/karla-variable-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Karla';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('../fonts/karla-variable-normal-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Karla';
font-style: italic;
font-weight: 400 700;
font-display: swap;
src: url('../fonts/karla-variable-italic-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Karla';
font-style: italic;
font-weight: 400 700;
font-display: swap;
src: url('../fonts/karla-variable-italic-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
/* ---- Brand colours ----
Sampled and confirmed against the client's real logo file and live
site (2026-08): #344E2C is the corrected/authoritative brand green
— it is what the live hero band and CTA already render at — even
though the logo artwork itself still measures a slightly different
green (~#1B6031). Per client direction (2026-08), the logo file is
NOT recoloured; every UI colour below uses the corrected #344E2C
family regardless. */
--color-green: #344E2C; /* PRIMARY brand colour */
--color-green-dark: #24371E; /* headings, pressed/active state */
--color-green-hover: #51BE78; /* HOVER accent only — never a resting state */
--color-green-faint: #E9F1EA; /* pale tint — sidebar module boxes */
--color-green-faint-line: #CFE3D2;
--color-brown: #3D3014; /* logo wordmark brown */
--color-blue-band: #2F4A70; /* background-band colour ONLY */
--color-blue-band-dark: #22384F; /* footer band */
--color-cta: #FFAA3A; /* hero call-to-action accent, sampled off the live site */
--color-cta-dark: #E0901F;
/* ---- Neutrals ---- */
--color-ink: #1D2A22; /* body text */
--color-grey-light: #5C6B62;
--color-grey-faint: #F0F2EF;
--color-line: #E3E8E3;
--color-white: #FFFFFF;
--color-bg: #F8F9FA;
/* ---- On-dark text ----
Every dark band (.t-subfeature, .t-principles, .t-footer) re-scopes
--color-link / --color-text to these instead of inheriting the brand
green. This is the fix for the live site's real contrast bug: green
link text on the dark-blue "About" band was low-contrast and hard to
read. Never let a dark band inherit the default green link colour. */
--color-on-dark: #FFFFFF;
--color-on-dark-muted: #CED9D2;
/* ---- Functional ---- */
--color-link: var(--color-green);
--color-link-hover: var(--color-green-hover);
/* ---- Alerts ----
Two tokens per state: --color- is the faint FILL used as the
alert background, --color--border is the saturated ACCENT
used for the 4px left bar. Not interchangeable — see pcom2026's
TEMPLATE-GUIDE §7 for the full rationale. Bootstrap's standard alert
palette, on purpose: a Joomla system message should look like one.
Re-colour in css/local.css, not here — local.css survives upgrades. */
--color-success: #d4edda;
--color-success-border: #155724;
--color-info: #d1ecf1;
--color-info-border: #0c5460;
--color-warning: #fff3cd;
--color-warning-border: #856404;
--color-danger: #f8d7da;
--color-danger-border: #721c24;
/* ---- Typography ---- */
--font-head: 'Outfit', Arial, Helvetica, sans-serif;
--font-body: 'Karla', Arial, Helvetica, sans-serif;
--font-menu: 'Outfit', Arial, Helvetica, sans-serif;
--fs-300: 0.85rem;
--fs-400: 1rem;
--fs-500: 1.15rem;
--fs-600: 1.3rem;
--fs-700: 1.5rem;
--fs-900: 2rem;
--fs-1200: 2.6rem;
--fs-1600: 3.4rem;
/* Oversized display numeral — outside the text scale on purpose. Fluid
so it doesn't dominate a phone screen. */
--fs-error-code: clamp(3.5rem, 12vw, 6rem);
--flh-300: 1.4;
--flh-400: 1.6;
--flh-700: 1.2;
--flh-900: 1.15;
--flh-1600: 1.08;
--fw-400: 400;
--fw-500: 500;
--fw-600: 600;
--fw-700: 700;
--fw-800: 800;
/* ---- Radius ---- */
--br-small: 4px;
--br-std: 8px;
--br-large: 16px;
/* ---- Spacing & structure ---- */
--space-section: 80px;
--space-gutter: 28px;
--width-boxed: 1280px;
--height-header: 92px;
--height-header-mobile: 72px;
--height-topbar: 40px;
/* ---- Effects ---- */
--shadow-card: 0 18px 40px rgba(24, 44, 32, 0.12);
--shadow-header: 0 2px 14px rgba(24, 44, 32, 0.08);
--transition: 0.2s ease;
/* ---- Layering (z-index scale) ----
Same published scale pcom2026 uses for its sticky-header fix. High
values on purpose so third-party module CSS (sliders, page builders,
pasted Custom HTML) can never scroll over the sticky header. See
section 9 for the isolation half of the fix. */
--z-below: -1;
--z-base: 1;
--z-sticky: 900;
--z-header: 1000;
--z-dropdown: 1010;
--z-overlay: 1100;
}
/* ==================================================================
2. BASE (reset, typography, buttons, layout container)
================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure { margin: 0; padding: 0; }
body {
font-family: var(--font-body);
font-weight: var(--fw-400);
font-size: var(--fs-400);
line-height: var(--flh-400);
color: var(--color-ink);
background: var(--color-white);
}
/* EVERY heading level gets an explicit size. Levels left unsized fall
back to the browser default — h5 is 0.83em, h6 is 0.67em, i.e. smaller
than body text — the first time a third-party module emits a bare
heading tag. These are bare element selectors (0,0,1) on purpose: a
page-level class (.t-page-title, .t-sec-head h2) always outranks them. */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-head);
font-weight: var(--fw-700);
line-height: var(--flh-700);
color: var(--color-green-dark);
}
h1 { font-size: var(--fs-1200); }
h2 { font-size: var(--fs-900); }
h3 { font-size: var(--fs-700); }
h4 { font-size: var(--fs-600); }
h5 { font-size: var(--fs-500); }
h6 { font-size: var(--fs-400); }
p { margin: 0 0 1em; color: var(--color-ink); }
p:last-child { margin-bottom: 0; }
ul, ol { padding-left: 1.3em; }
ul.t-unstyled, nav ul { list-style: none; padding-left: 0; }
a { color: var(--color-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--color-link-hover); }
img { max-width: 100%; height: auto; display: block; }
blockquote { margin: 1.4em 0; padding: 0.2em 0 0.2em 1.3em; border-left: 4px solid var(--color-green); color: var(--color-grey-light); font-style: italic; }
/* Boxed content wrapper */
.t-wrap { max-width: var(--width-boxed); margin: 0 auto; padding: 0 var(--space-gutter); }
/* Vertical section rhythm */
.t-section { padding: var(--space-section) 0; }
@media only screen and (max-width: 560px) {
.t-section { padding: 52px 0; }
}
/* Buttons */
.t-btn {
display: inline-flex;
align-items: center;
gap: 0.5em;
font-family: var(--font-head);
font-weight: var(--fw-600);
font-size: var(--fs-400);
padding: 0.85em 1.7em;
border-radius: var(--br-std);
text-decoration: none;
border: 2px solid transparent;
cursor: pointer;
transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.t-btn-primary { background: var(--color-green); color: var(--color-white); }
.t-btn-primary:hover { background: var(--color-green-hover); color: var(--color-green-dark); }
.t-btn-cta { background: var(--color-cta); color: var(--color-green-dark); }
.t-btn-cta:hover { background: var(--color-cta-dark); color: var(--color-white); }
.t-btn-ghost { border-color: currentColor; color: var(--color-white); background: transparent; }
.t-btn-ghost:hover { background: var(--color-white); color: var(--color-green-dark); }
/* Eyebrow / kicker */
.t-eyebrow {
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.16em;
font-weight: var(--fw-700);
font-size: var(--fs-300);
color: var(--color-green);
font-family: var(--font-head);
}
/* ==================================================================
3. HEADER (top bar, logo, nav, hamburger, mobile drawer)
================================================================== */
/* ---- Top bar ---- */
.t-topbar { background: var(--color-blue-band-dark); color: var(--color-on-dark-muted); font-size: var(--fs-300); isolation: isolate; }
.t-topbar .t-wrap { display: flex; justify-content: space-between; align-items: center; min-height: var(--height-topbar); flex-wrap: wrap; gap: 4px 20px; }
.t-topbar a { color: var(--color-on-dark-muted); text-decoration: none; }
.t-topbar a:hover { color: var(--color-white); }
.t-topbar-start, .t-topbar-end { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* ---- Header ---- */
.t-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--color-white); box-shadow: var(--shadow-header); }
.t-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--height-header); }
/* Drive logo size from max-height and let the width follow, so the global
img{max-width:100%} reset never squashes it horizontally on a narrow
header row. Never pin a fixed height here. */
.t-logo { flex: 0 0 auto; }
.t-logo img { max-height: 52px; width: auto; height: auto; display: block; }
/* ---- Main navigation (module output) ---- */
.t-nav { flex: 1 1 auto; }
.t-nav ul { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.t-nav li { position: relative; }
.t-nav > ul > li > a {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-menu);
font-weight: var(--fw-600);
font-size: var(--fs-400);
color: var(--color-green-dark);
text-decoration: none;
padding: 10px 14px;
border-radius: var(--br-small);
}
.t-nav > ul > li > a:hover,
.t-nav > ul > li.active > a,
.t-nav > ul > li.current > a { background: var(--color-green); color: var(--color-white); }
/* Non-clickable menu items — Menu Item Type "Heading" (or "Separator")
with no link target of its own. Joomla's own mod_menu core markup
renders these as instead
of , so without this rule they fall back to unstyled inline text
that looks broken sitting next to real nav links.
TWO cases, confirmed against live markup — a heading behaves differently
depending on whether it has children:
- No children (rare/pointless in a nav, but technically legal): the
span is a direct child of