/* ==========================================================================
Roex global type scale
--------------------------------------------------------------------------
Single source of truth for heading / paragraph sizes on every public page.
Loaded after the theme CSS. The theme had ~60 different font sizes spread
over 175 page-specific heading rules, so sizes are enforced here with
!important (size + line-height only; colour, weight, spacing stay themed).
Need a one-off exception (e.g. a giant stat number)? Add class
"no-type-scale" to that element.
========================================================================== */
:root {
--font-heading: 'roex', 'Montserrat', sans-serif;
--font-body: 'Montserrat', sans-serif;
--fs-h1: clamp(40px, 5.2vw, 76px);
--fs-h2: clamp(30px, 3.6vw, 52px);
--fs-h3: clamp(22px, 2vw, 28px);
--fs-h4: clamp(20px, 1.6vw, 24px);
--fs-h5: clamp(18px, 1.3vw, 20px);
--fs-h6: clamp(16px, 1.1vw, 18px);
--fs-body: clamp(16px, 1.05vw, 18px);
--fs-small: 14px;
--lh-h1: 1.05;
--lh-h2: 1.1;
--lh-h3: 1.25;
--lh-h4: 1.3;
--lh-h5: 1.35;
--lh-h6: 1.4;
--lh-body: 1.65;
}
body {
font-family: var(--font-body);
font-size: var(--fs-body);
}
main :is(h1, h2, h3, h4, h5, h6):not(.no-type-scale),
.contact-form-section :is(h1, h2, h3, h4, h5, h6):not(.no-type-scale) {
font-family: var(--font-heading);
}
main h1:not(.no-type-scale) { font-size: var(--fs-h1) !important; line-height: var(--lh-h1) !important; }
main h2:not(.no-type-scale),
.contact-form-section h2:not(.no-type-scale) { font-size: var(--fs-h2) !important; line-height: var(--lh-h2) !important; }
main h3:not(.no-type-scale),
.contact-form-section h3:not(.no-type-scale) { font-size: var(--fs-h3) !important; line-height: var(--lh-h3) !important; }
main h4:not(.no-type-scale) { font-size: var(--fs-h4) !important; line-height: var(--lh-h4) !important; }
main h5:not(.no-type-scale) { font-size: var(--fs-h5) !important; line-height: var(--lh-h5) !important; }
main h6:not(.no-type-scale) { font-size: var(--fs-h6) !important; line-height: var(--lh-h6) !important; }
/* Heading children inherit the scale (e.g. Title accent
) */
main :is(h1, h2, h3, h4, h5, h6):not(.no-type-scale) :is(span, strong, em, b) {
font-size: inherit !important;
line-height: inherit !important;
}
main p:not(.no-type-scale),
.contact-form-section p:not(.no-type-scale) {
font-family: var(--font-body);
font-size: var(--fs-body) !important;
line-height: var(--lh-body) !important;
}
/* Long-form content (blog body) */
main :is(.blog-content, .blog-details-content, .article-content) :is(p, li) {
font-size: var(--fs-body) !important;
line-height: 1.75 !important;
}
main small:not(.no-type-scale) {
font-size: var(--fs-small) !important;
}
/* ==========================================================================
Empty states (lists with no records yet)
========================================================================== */
.empty-state {
max-width: 640px;
margin: 40px auto;
padding: 48px 24px;
text-align: center;
border: 1px dashed rgba(0, 0, 0, 0.15);
border-radius: 16px;
}
.empty-state p {
margin: 12px auto 24px;
}
.empty-state .btn-primary {
display: inline-flex;
}
/* ==========================================================================
Built-in math captcha (Admin → Website Settings → Captcha)
========================================================================== */
.captcha-group {
display: flex;
flex-direction: column;
gap: 8px;
margin: 8px 0 16px;
}
.captcha-group .captcha-question {
font-family: var(--font-body);
font-size: var(--fs-small);
font-weight: 600;
}
.captcha-group input[name="captcha_answer"] {
max-width: 220px;
}
.rc-submit-row .rc-status {
display: block;
margin-top: 10px;
font-size: var(--fs-small);
}
/* ==========================================================================
Accessibility
========================================================================== */
.skip-link {
position: absolute;
top: -100px;
left: 16px;
z-index: 10000;
padding: 12px 20px;
background: #111;
color: #fff !important;
border-radius: 8px;
font-weight: 600;
}
.skip-link:focus {
top: 16px;
}
main:focus {
outline: none;
}
/* Theme CSS removes outlines in several places; keyboard users still get a ring. */
:where(a, button, input, select, textarea, summary, label.tab, [tabindex]):focus-visible {
outline: 3px solid #10c7ca !important;
outline-offset: 2px !important;
}
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
@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, body {
scroll-behavior: auto !important;
}
}
/* width/height attributes reserve space (no layout shift); keep aspect ratio
when CSS only sets a width. :where() = zero specificity, theme heights win. */
:where(img[width][height]) {
height: auto;
}
/* Footer column titles are h2 for heading order; keep their compact size
(theme media queries set h2 to 35px !important). */
footer.footer .section h2 {
font-size: 20px !important;
line-height: 1.3 !important;
font-weight: 500;
margin-bottom: 15px;
}
/* Header nav: 8 top-level items must stay on one line at laptop widths
(992px is where the mobile menu takes over). */
.header .nav-links > li > a {
white-space: nowrap;
}
@media (min-width: 992px) and (max-width: 1279px) {
.header .nav-links {
gap: clamp(12px, 1.6vw, 22px);
}
.header .nav-links > li > a {
font-size: 14px;
gap: 4px;
}
.header .logo img {
max-width: 120px;
}
}
@media (min-width: 1280px) {
.header .nav-links > li > a {
font-size: 15px;
}
.header .nav-links {
gap: clamp(20px, 1.8vw, 32px);
}
}
@media (min-width: 992px) and (max-width: 1099px) {
.header .nav-links {
gap: 12px;
}
.header .nav-links > li > a {
font-size: 13px;
}
.header .logo img {
max-width: 104px;
}
}
/* Mobile menu toggle is a real