@charset "UTF-8";
/* ==================================================================
MMPark 2026 — Masonic Memorial Park Joomla 5/6 site template
Built on the pcom2026 base architecture (Paschen Communications).
(C) 2026 Paschen Communications, LLC — 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.
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 three:
640px phone — hamburger menu takes over, offers/footer 1-up
900px tablet — hero stacks, offers 2-up, welcome grid 1-up
1200px desktop — nav spacing eases up
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)
================================================================== */
/* =============================================================
MMPark 2026 — CSS custom properties
Change anything here to re-theme the whole template.
Naming follows the project convention (--color-*, --fs-*,
--flh-*, --fw-*, --br-*), inherited from the pcom2026 base.
=============================================================
*/
/* =============================================================
1a. WEBFONTS — Libre Baskerville, Cormorant Garamond,
Public Sans, Work Sans — SELF-HOSTED
The font files live in ../fonts/ and ship inside the template
package. NOTHING is fetched from Google. Great Vibes is
deliberately NOT included: the wordmark is always the supplied
logo image (logo-mmp-top-black.png / logo-mmp-top-white.png),
never live text, so no script font is needed at runtime.
Do NOT add Google Fonts tags or an @import — see the
rationale in the pcom2026 base (section 1a there): GDPR exposure,
no SRI hash possible, render-blocking on system pages. @font-face
has no ordering restriction and is valid anywhere in this file.
COVERAGE: latin + latin-ext only (English content). Libre
Baskerville ships 400, 400 italic and 700 (hero headline is
italic; section headings are bold). Cormorant Garamond ships
400/500/600 (H1 only needs 600, but 400/500 are included for
flexibility in local.css overrides). Public Sans ships
400/500/600/700 plus 400 italic — italic is included because
Joomla article content contains , same reasoning as the
pcom2026 base. Work Sans ships 400/500/600/700, no italic — it is
only ever used for UI chrome (nav, buttons, card headings).
TO ADD A WEIGHT: add the file to ../fonts/ and copy a rule below.
Referencing a weight with no matching @font-face makes the browser
fake it (synthetic bolding), which is why every weight actually
used in section 2+ is declared here.
=============================================================
*/
/* Libre Baskerville 400 italic — latin */
@font-face {
font-family: 'Libre Baskerville';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('../fonts/libre-baskerville-400-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;
}
/* Libre Baskerville 400 italic — latin-ext */
@font-face {
font-family: 'Libre Baskerville';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('../fonts/libre-baskerville-400-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;
}
/* Libre Baskerville 400 — latin */
@font-face {
font-family: 'Libre Baskerville';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/libre-baskerville-400-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;
}
/* Libre Baskerville 400 — latin-ext */
@font-face {
font-family: 'Libre Baskerville';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/libre-baskerville-400-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;
}
/* Libre Baskerville 700 — latin */
@font-face {
font-family: 'Libre Baskerville';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/libre-baskerville-700-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;
}
/* Libre Baskerville 700 — latin-ext */
@font-face {
font-family: 'Libre Baskerville';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/libre-baskerville-700-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;
}
/* Cormorant Garamond 400 — latin */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/cormorant-garamond-400-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;
}
/* Cormorant Garamond 400 — latin-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/cormorant-garamond-400-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;
}
/* Cormorant Garamond 500 — latin */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/cormorant-garamond-500-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;
}
/* Cormorant Garamond 500 — latin-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/cormorant-garamond-500-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;
}
/* Cormorant Garamond 600 — latin */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/cormorant-garamond-600-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;
}
/* Cormorant Garamond 600 — latin-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/cormorant-garamond-600-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;
}
/* Public Sans 400 italic — latin */
@font-face {
font-family: 'Public Sans';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('../fonts/public-sans-400-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;
}
/* Public Sans 400 italic — latin-ext */
@font-face {
font-family: 'Public Sans';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('../fonts/public-sans-400-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;
}
/* Public Sans 400 — latin */
@font-face {
font-family: 'Public Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/public-sans-400-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;
}
/* Public Sans 400 — latin-ext */
@font-face {
font-family: 'Public Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/public-sans-400-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;
}
/* Public Sans 500 — latin */
@font-face {
font-family: 'Public Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/public-sans-500-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;
}
/* Public Sans 500 — latin-ext */
@font-face {
font-family: 'Public Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/public-sans-500-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;
}
/* Public Sans 600 — latin */
@font-face {
font-family: 'Public Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/public-sans-600-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;
}
/* Public Sans 600 — latin-ext */
@font-face {
font-family: 'Public Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/public-sans-600-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;
}
/* Public Sans 700 — latin */
@font-face {
font-family: 'Public Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/public-sans-700-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;
}
/* Public Sans 700 — latin-ext */
@font-face {
font-family: 'Public Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/public-sans-700-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;
}
/* Work Sans 400 — latin */
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/work-sans-400-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;
}
/* Work Sans 400 — latin-ext */
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/work-sans-400-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;
}
/* Work Sans 500 — latin */
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/work-sans-500-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;
}
/* Work Sans 500 — latin-ext */
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/work-sans-500-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;
}
/* Work Sans 600 — latin */
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/work-sans-600-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;
}
/* Work Sans 600 — latin-ext */
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/work-sans-600-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;
}
/* Work Sans 700 — latin */
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/work-sans-700-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;
}
/* Work Sans 700 — latin-ext */
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/work-sans-700-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 ---- */
--color-wine: #822B31; /* PRIMARY accent: CTA buttons, links, card rules, icons */
--color-wine-dark: #5E1F24; /* button/link hover, active nav */
--color-wine-faint: #F3E7E6; /* pale wine tint — blockquote fill, subtle hover states */
--color-sage: #59894F; /* secondary: info callout rule */
--color-sage-dark: #3C6034; /* headings on sage tint */
/* ---- Warm neutrals (utility bar / hero gradients, from the existing site) ---- */
--color-taupe-light: #E4D3CE;
--color-taupe-mid: #AD908D;
--color-hero-grad-start: #DACAC4;
--color-hero-grad-end: #A18481;
/* ---- Surfaces & text ---- */
--color-bg: #FAF8F7; /* page background */
--color-surface: #FFFFFF; /* nav bar, cards */
--color-tint-cool: #DEE9F1; /* "Offers" band background */
--color-tint-cool-line: #D1D9DD; /* offers-cell dividers */
--color-tint-sage: #F2F7F1; /* "Our Offices" callout fill */
--color-text: #1F1917; /* body text */
--color-text-muted: #322C2A; /* nav, secondary text */
/* Genuinely secondary text (article meta line). --color-text-muted is only
a shade off body text, and a paler warm grey drops below 4.5:1 on
--color-bg; this is the lightest warm neutral that still clears AA at
small sizes (5.8:1 on #FAF8F7). */
--color-text-meta: #6B5F5C;
--color-footer-bg: #1C1412; /* footer background */
--color-footer-text: rgba(228, 220, 217, 0.85); /* footer body text, 85% opacity per spec */
--color-border: #E4DCD9; /* hairline borders */
/* ---- Functional ---- */
--color-link: var(--color-wine);
--color-link-hover: var(--color-wine-dark);
/* ---- Gradients & overlays ---- */
--grad-utility: linear-gradient(120deg, var(--color-taupe-light), var(--color-taupe-mid));
--grad-hero: linear-gradient(160deg, var(--color-hero-grad-start), var(--color-hero-grad-end));
--overlay-photo: linear-gradient(180deg, rgba(20, 20, 10, 0) 40%, rgba(20, 20, 10, 0.55) 100%);
/* ---- Alerts ----
Two tokens per state, and they are NOT interchangeable:
--color- faint FILL, used as the alert background
--color--border saturated ACCENT, used for the 4px left bar
Bootstrap's own alert palette, kept deliberately — a Joomla system
message should look like a Joomla system message, not fight the brand.
TO RE-COLOUR A SITE: override these in css/local.css, not here —
local.css is absent from the package, so it survives every upgrade. */
--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-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; /* H1 / page heading */
--font-head: 'Libre Baskerville', Georgia, 'Times New Roman', serif; /* H2 / hero headline (italic) */
--font-body: 'Public Sans', Arial, Helvetica, sans-serif; /* body copy, callouts, footer, eyebrow */
--font-menu: 'Work Sans', Arial, Helvetica, sans-serif; /* UI chrome: nav, buttons, H3+, card text */
/* font sizes */
--fs-300: 0.8125rem; /* 13px — utility bar / legal, eyebrow lower bound */
--fs-350: 0.875rem; /* 14px — nav link, eyebrow upper bound */
--fs-375: 0.90625rem; /* 14.5px — card / small body */
--fs-400: 1rem; /* 16px — body FLOOR */
--fs-500: 1.125rem; /* 18px — H3 / card heading */
--fs-550: 1.375rem; /* 22px — H2 mobile */
--fs-600: 1.625rem; /* 26px — H2 desktop / H1 mobile */
--fs-650: 1.75rem; /* 28px — hero headline mobile */
--fs-700: 2rem; /* 32px — H1 desktop */
--fs-900: 2.375rem; /* 38px — hero headline desktop */
/* 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);
/* line heights */
--flh-300: 1.5; /* utility bar / legal */
--flh-350: 1.15; /* nav link — incl. the 2-line case, see section 3 */
--flh-375: 1.55; /* card / small body */
--flh-400: 1.7; /* body */
--flh-500: 1.4; /* H3 / card heading */
--flh-600: 1.3; /* H2 section heading */
--flh-700: 1.2; /* H1 page heading */
--flh-900: 1.3; /* hero headline */
/* font weights */
--fw-400: 400;
--fw-500: 500;
--fw-600: 600;
--fw-700: 700;
/* ---- Radius ---- restrained, not pill-shaped */
--br-small: 3px; /* buttons */
--br-std: 4px; /* small cards */
--br-large: 6px; /* cards, callouts */
/* ---- Spacing & structure ---- */
--space-section-top: 70px; /* vertical rhythm: top of a section */
--space-section-bottom: 48px; /* vertical rhythm: bottom of a section */
--space-gutter: 48px; /* .t-wrap side padding, desktop */
--width-boxed: 1080px; /* content max-width; full-bleed bands ignore this on their outer wrapper */
--height-header: 84px;
--height-header-mobile: 64px;
--height-topbar: 34px;
/* ---- Effects ---- */
--shadow-card: 0 14px 32px rgba(28, 20, 18, 0.1);
--shadow-header: 0 2px 14px rgba(28, 20, 18, 0.06);
--transition: 0.2s ease;
/* ---- Layering (z-index scale) ----
One place to control what paints over what. Values are deliberately
high so third-party module CSS (sliders, page builders, pasted
Custom HTML) can't scroll over the sticky header. Content regions
are also isolated — see section 9. */
--z-below: -1; /* decorative layers behind their own content */
--z-base: 1; /* in-flow content that needs to sit above a ::before/::after */
--z-sticky: 900; /* sticky elements inside the page body */
--z-header: 1000; /* sticky site header — must stay clickable */
--z-dropdown: 1010; /* menu drop-downs / mobile nav panel */
--z-overlay: 1100; /* full-screen overlays (modals, off-canvas, lightboxes) */
}
/* ==================================================================
2. BASE (reset, typography, buttons, layout container)
================================================================== */
/* =============================================================
MMPark 2026 — base reset, typography, buttons, helpers
=============================================================
*/
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
/* Stop iOS/Android from silently inflating text in landscape. We set the
mobile sizes deliberately below; let them stand.
*/
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
font-family: var(--font-body);
font-weight: var(--fw-400);
font-size: var(--fs-400);
line-height: var(--flh-400);
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--color-link);
text-decoration: none;
transition: color var(--transition);
}
a:hover {
color: var(--color-link-hover);
}
h1, h2, h3, h4, h5, h6 {
color: var(--color-text);
margin: 0 0 0.5em;
}
/* EVERY heading level gets an explicit size and family. Levels left unsized
fall back to the browser default (h5 0.83em, h6 0.67em) — which renders
module and article headings smaller than the body text around them. h5/h6
therefore bottom out at body size rather than dropping below it.
*/
h1 {
font-family: var(--font-display);
font-size: var(--fs-700);
font-weight: var(--fw-600);
line-height: var(--flh-700);
}
h2 {
font-family: var(--font-head);
font-size: var(--fs-600);
font-weight: var(--fw-700);
line-height: var(--flh-600);
}
h3 {
font-family: var(--font-menu);
font-size: var(--fs-500);
font-weight: var(--fw-600);
line-height: var(--flh-500);
}
h4 {
font-family: var(--font-menu);
font-size: var(--fs-400);
font-weight: var(--fw-600);
}
h5 {
font-family: var(--font-menu);
font-size: var(--fs-400);
font-weight: var(--fw-600);
}
h6 {
font-family: var(--font-menu);
font-size: var(--fs-400);
font-weight: var(--fw-600);
text-transform: uppercase;
letter-spacing: 0.08em;
}
p {
margin: 0 0 1.1em;
}
ul, ol {
margin: 0 0 1.2em 1.25em;
}
li {
margin-bottom: 0.5em;
}
blockquote {
border-left: 4px solid var(--color-wine);
background: var(--color-wine-faint);
padding: 18px 24px;
border-radius: 0 var(--br-large) var(--br-large) 0;
margin: 1.4em 0;
color: var(--color-wine-dark);
font-weight: var(--fw-400);
}
/* Boxed content wrapper */
.t-wrap {
max-width: var(--width-boxed);
margin: 0 auto;
padding: 0 var(--space-gutter);
}
/* Vertical section rhythm — asymmetric top/bottom per the design spec */
.t-section {
padding: var(--space-section-top) 0 var(--space-section-bottom);
}
/* Buttons
.btn / .btn-primary are aliased alongside .t-btn / .t-btn-primary: Joomla
and Bootstrap both use the bare names as their own convention, and content
typed into a module is very likely to reach for them instead of the
template's own t- prefix. Scoped to just these two classes (not the full
Bootstrap button system — btn-secondary, btn-outline-*, btn-lg, etc. get
no styling here) so this doesn't reach into unrelated Bootstrap markup
elsewhere on the site. */
.t-btn, .btn {
display: inline-block;
font-family: var(--font-menu);
font-weight: var(--fw-600);
font-size: 0.9375rem; /* 15px */
line-height: 1;
padding: 13px 26px;
border-radius: var(--br-small);
border: 2px solid transparent;
cursor: pointer;
transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.t-btn-primary, .btn-primary {
background: var(--color-wine);
color: var(--color-surface);
}
.t-btn-primary:hover, .btn-primary:hover {
background: var(--color-wine-dark);
color: var(--color-surface);
}
.t-btn-ghost {
border-color: var(--color-wine);
color: var(--color-wine);
}
.t-btn-ghost:hover {
background: var(--color-wine);
color: var(--color-surface);
}
/* Eyebrow / kicker */
.t-eyebrow {
text-transform: uppercase;
letter-spacing: 0.04em;
font-family: var(--font-body);
font-size: var(--fs-350);
font-weight: var(--fw-700);
color: var(--color-wine);
}
@media only screen and (max-width: 640px) {
/* Body stays at --fs-400 (1rem / 16px). Do NOT shrink it here: phones are
held further from the eye than a monitor, so 16px is a floor, not a
target — and any under 16px makes iOS Safari zoom the page on
focus. Tighten the vertical rhythm and the display sizes instead.
*/
:root {
--space-section-top: 44px;
--space-section-bottom: 32px;
--space-gutter: 24px;
}
h1 {
font-size: var(--fs-600);
}
h2 {
font-size: var(--fs-550);
}
}
/* ==================================================================
3. HEADER (top bar, logo, nav, hamburger, mobile drawer)
================================================================== */
/* =============================================================
MMPark 2026 — top bar, header, main navigation
=============================================================
*/
/* ---- Top bar ---- */
.t-topbar {
background: var(--grad-utility);
color: var(--color-text-muted);
font-size: var(--fs-300);
font-family: var(--font-body);
}
.t-topbar .t-wrap {
/* Full-bleed band per the design spec — only text sections (Welcome,
Additional Services) are boxed to --width-boxed; chrome bands like this
one run edge to edge with just the gutter padding .t-wrap already
supplies. */
max-width: none;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
min-height: var(--height-topbar);
gap: 16px;
}
.t-topbar a {
color: var(--color-text-muted);
}
.t-topbar a:hover {
color: var(--color-wine-dark);
}
.t-topbar p {
margin: 0;
}
.t-topbar-start {
display: flex;
align-items: center;
gap: 18px;
margin-right: auto;
}
.t-topbar-start:empty {
display: none;
}
.t-topbar-end {
display: flex;
align-items: center;
gap: 18px;
}
/* ---- Header ---- */
.t-header {
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
position: sticky;
top: 0;
z-index: var(--z-header); /* see section 1 / section 9 */
box-shadow: var(--shadow-header);
}
.t-header-inner {
/* Full-bleed, same reasoning as .t-topbar .t-wrap above. */
max-width: none;
display: flex;
align-items: center;
justify-content: space-between;
min-height: var(--height-header);
gap: 24px;
}
.t-logo {
display: flex;
align-items: center;
}
/* Drive the size from max-height and let the width follow, rather than
fixing height. The global img{max-width:100%} reset squeezes the WIDTH
when the header flex row runs out of room on a small phone; with a
fixed height that squeeze renders as a horizontally squashed logo. With
height:auto the image scales proportionally instead and simply gets
smaller. */
.t-logo img {
height: auto;
max-height: 36px;
width: auto;
max-width: 100%;
min-width: 200px; /* below this the script wordmark stops being legible */
}
.t-logo a {
display: inline-flex;
align-items: center;
}
.t-header-end {
display: flex;
align-items: center;
gap: 16px;
}
/* ---- Main navigation (module output) ---- */
/* flex:1 + centered inner list visually centers the nav between the logo
and the header-end button, without a grid rewrite of the header row. */
.t-nav {
flex: 1;
display: flex;
justify-content: center;
}
.t-nav ul {
list-style: none;
display: flex;
/* stretch, not center: when one label wraps to two lines it makes the row
taller, and centred single-line items would then each sit at their own
height, putting their hover underlines on several different baselines.
Stretched, every item is the same height and the underlines line up. */
align-items: stretch;
gap: 30px;
margin: 0;
}
.t-nav li {
margin: 0;
}
/* Long labels wrap to two lines when the header row is tight, and both of the
properties below are what make that case behave.
display: NOT inline. Two reasons, and the first is a real bug:
- a border-bottom on an INLINE box is painted on every line box it
generates, so a 2-line item got the hover/active underline through its
middle as well as under it. Any non-inline display draws it once, at
the bottom of the item frame.
- an inline anchor's own line-height doesn't govern its line boxes — each
one is at least as tall as the STRUT of its block container, i.e. the
li, which inherits the body's --flh-400 (1.7). That is why the two
lines sat so far apart even though --flh-350 was 1. As a flex box the
anchor becomes the block container and its own line-height applies.
flex rather than block so the anchor also fills the stretched li and
centres a 1- or 2-line label in it. Centring is only visible on a wrapped
item: an unwrapped one is exactly as wide as its text. */
.t-nav a {
font-family: var(--font-menu);
font-weight: var(--fw-600);
font-size: var(--fs-350);
line-height: var(--flh-350);
color: var(--color-text-muted);
padding: 6px 0;
border-bottom: 2px solid transparent;
display: flex;
align-items: center;
justify-content: center;
}
.t-nav a:hover, .t-nav .active > a, .t-nav .current > a {
color: var(--color-wine);
border-color: var(--color-wine);
}
/* Non-clickable dropdown-parent headings (Joomla's own mod_menu core markup:
a menu item with no link target of its own — Menu Item Type "Heading" —
renders as