/*
Theme Name: Blocksy Child
Theme URI: https://creativethemes.com/blocksy/
Description: Blocksy Child Theme
Author: Creative Themes
Author URI: https://creativethemes.com
Template: blocksy
Version: 1.0.0
Text Domain: blocksy-child
*/
/* ==========================================================================
RIRS DESIGN SYSTEM
Resurgence Institute of Resuscitation Sciences
--------------------------------------------------------------------------
One stylesheet, three jobs:
1. Define the RIRS tokens (colour, type, spacing, radius, shadow)
2. Re-map Blocksy's palette + WooCommerce so the theme speaks RIRS
3. Re-map Tutor LMS's own CSS variables so the LMS stops looking bolted on
Loaded from functions.php AFTER the parent, so :root:root beats Blocksy's
inline :root palette without needing !important everywhere.
========================================================================== */
/* --------------------------------------------------------------------------
1. TOKENS
-------------------------------------------------------------------------- */
:root {
--rirs-bg: #faf8f4;
--rirs-bg-alt: #eaf3fa;
--rirs-white: #ffffff;
--rirs-border: #d9dee6;
--rirs-border-soft: #e8ecf1;
--rirs-ink: #171d26;
--rirs-ink-soft: #4e5969;
--rirs-ink-faint: #5f6875;
--rirs-navy: #0e2036;
--rirs-navy-2: #182e4b;
--rirs-navy-3: #24405f;
--rirs-blue: #1c6ea4;
--rirs-blue-hover: #155a87;
--rirs-blue-dark: #10486d;
--rirs-blue-soft: #e6f0f7;
--rirs-gold: #efca61;
--rirs-success: #1c7a52;
--rirs-success-soft: #e6f4ee;
--rirs-warning: #a5701a;
--rirs-warning-soft: #fdf4e3;
--rirs-danger: #b23b3b;
--rirs-font-display: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
--rirs-font-body: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
--rirs-radius-sm: 8px;
--rirs-radius: 12px;
--rirs-radius-lg: 18px;
--rirs-shadow-sm: 0 1px 2px rgba(14, 32, 54, .06), 0 1px 3px rgba(14, 32, 54, .05);
--rirs-shadow: 0 2px 6px rgba(14, 32, 54, .07), 0 8px 24px rgba(14, 32, 54, .06);
--rirs-shadow-lg: 0 4px 12px rgba(14, 32, 54, .08), 0 18px 48px rgba(14, 32, 54, .10);
--rirs-section-y: 80px;
}
@media (max-width: 999px) {
:root { --rirs-section-y:56px; }
}
/* --------------------------------------------------------------------------
2. BLOCKSY PALETTE RE-MAP
Blocksy prints its palette on :root inline. :root:root outranks it.
-------------------------------------------------------------------------- */
:root:root {
--theme-palette-color-1: var(--rirs-blue);
--theme-palette-color-2: var(--rirs-blue-hover);
--theme-palette-color-3: var(--rirs-ink);
--theme-palette-color-4: var(--rirs-ink-soft);
--theme-palette-color-5: var(--rirs-border);
--theme-palette-color-6: var(--rirs-bg-alt);
--theme-palette-color-7: var(--rirs-bg);
--theme-palette-color-8: var(--rirs-white);
--theme-text-color: var(--rirs-ink-soft);
--theme-headings-color: var(--rirs-ink);
--theme-link-initial-color: var(--rirs-blue);
--theme-link-hover-color: var(--rirs-blue-hover);
--theme-border-color: var(--rirs-border);
--theme-content-spacing: 1.4em;
--theme-button-border-radius: var(--rirs-radius);
--theme-button-background-initial-color: var(--rirs-blue);
--theme-button-background-hover-color: var(--rirs-blue-hover);
--theme-button-text-initial-color: var(--rirs-white);
--theme-button-text-hover-color: var(--rirs-white);
--theme-font-family: var(--rirs-font-body);
--theme-headings-font-family: var(--rirs-font-display);
}
/* --------------------------------------------------------------------------
3. BASE TYPOGRAPHY
-------------------------------------------------------------------------- */
body,
body.woocommerce,
.entry-content {
font-family: var(--rirs-font-body);
font-size:17px;
line-height: 1.65;
color: var(--rirs-ink-soft);
background-color: var(--rirs-bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6,
.entry-title,
.wp-block-heading,
.site-title {
font-family: var(--rirs-font-display);
color: var(--rirs-ink);
letter-spacing: -0.015em;
line-height: 1.18;
font-weight:800;
}
h1, .entry-title { font-size:clamp(28px, 4.2vw, 42px); font-weight:800; }
h2 { font-size:clamp(21px, 3.1vw, 34px); }
h3 { font-size:clamp(17px, 2.2vw, 21px); font-weight:600; }
h4 { font-size:17px; font-weight:600; }
p { margin-bottom: 1.1em; }
a { color: var(--rirs-blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--rirs-blue-hover); }
strong, b { color: var(--rirs-ink); font-weight:600; }
blockquote {
border-left: 3px solid var(--rirs-blue);
background: var(--rirs-blue-soft);
padding: 16px 24px;
border-radius: 0 var(--rirs-radius) var(--rirs-radius) 0;
font-style: normal;
color: var(--rirs-ink);
}
hr, .wp-block-separator {
border: 0;
border-top: 1px solid var(--rirs-border);
opacity: 1;
}
::selection { background: var(--rirs-blue); color: #fff; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--rirs-blue);
outline-offset: 2px;
border-radius: var(--rirs-radius-sm);
}
/* --------------------------------------------------------------------------
4. BUTTONS
-------------------------------------------------------------------------- */
.ct-button,
.wp-block-button__link,
.wp-element-button,
input[type="submit"],
button[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.wpforms-submit,
.tutor-btn.tutor-btn-primary {
font-family: var(--rirs-font-display);
font-weight:600;
font-size:15px;
line-height: 1.2;
letter-spacing: 0;
text-transform: none;
padding: 16px 24px;
border-radius: var(--rirs-radius);
border: 1.5px solid transparent;
background-color: var(--rirs-blue);
color: var(--rirs-white);
box-shadow: var(--rirs-shadow-sm);
transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
cursor: pointer;
}
.ct-button:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover,
.wpforms-submit:hover,
.tutor-btn.tutor-btn-primary:hover {
background-color: var(--rirs-blue-hover);
color: var(--rirs-white);
box-shadow: var(--rirs-shadow);
transform: translateY(-1px);
}
.ct-button-ghost,
.is-style-outline .wp-block-button__link,
.woocommerce a.button.wc-backward,
.woocommerce .cart .button[name="update_cart"],
.tutor-btn.tutor-btn-outline-primary {
background-color: transparent;
color: var(--rirs-blue);
border: 1.5px solid var(--rirs-blue);
box-shadow: none;
}
.ct-button-ghost:hover,
.is-style-outline .wp-block-button__link:hover,
.woocommerce a.button.wc-backward:hover,
.woocommerce .cart .button[name="update_cart"]:hover,
.tutor-btn.tutor-btn-outline-primary:hover {
background-color: var(--rirs-blue);
color: var(--rirs-white);
border-color: var(--rirs-blue);
}
.woocommerce .button.disabled,
.woocommerce .button:disabled,
button:disabled,
input[type="submit"]:disabled {
opacity: .55;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* --------------------------------------------------------------------------
5. FORMS
-------------------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="password"], input[type="search"], input[type="number"], input[type="date"],
select, textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single,
.wpforms-field input, .wpforms-field textarea, .wpforms-field select {
font-family: var(--rirs-font-body);
font-size:15px;
line-height: 1.5;
color: var(--rirs-ink);
background-color: var(--rirs-white);
border: 1px solid var(--rirs-border);
border-radius: var(--rirs-radius);
padding: 16px 16px;
box-shadow: none;
transition: border-color .15s ease, box-shadow .15s ease;
width: 100%;
max-width: 100%;
height: auto;
min-height: 48px;
}
input:focus, select:focus, textarea:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
border-color: var(--rirs-blue);
box-shadow: 0 0 0 3px rgba(28, 110, 164, .14);
outline: none;
}
label,
.woocommerce form .form-row label,
.wpforms-field-label {
font-family: var(--rirs-font-display);
font-weight:600;
font-size:15px;
color: var(--rirs-ink);
margin-bottom: 8px;
display: block;
}
.woocommerce form .form-row .required { color: var(--rirs-danger); text-decoration: none; }
.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 24px;
padding-left: 0;
color: var(--rirs-ink);
}
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 12px; right: 10px; }
.select2-dropdown { border-color: var(--rirs-border); border-radius: var(--rirs-radius); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--rirs-blue); }
/* --------------------------------------------------------------------------
6. WOOCOMMERCE
-------------------------------------------------------------------------- */
.woocommerce-page,
.woocommerce { font-family: var(--rirs-font-body); }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
border-top: 0;
border-left: 3px solid var(--rirs-blue);
border-radius: var(--rirs-radius);
background: var(--rirs-blue-soft);
color: var(--rirs-ink);
font-family: var(--rirs-font-body);
padding: 16px 24px 16px 24px;
box-shadow: var(--rirs-shadow-sm);
}
.woocommerce-message { border-left-color: var(--rirs-success); background: var(--rirs-success-soft); }
.woocommerce-error { border-left-color: var(--rirs-danger); background: #fbeeee; }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }
.woocommerce table.shop_table {
border: 1px solid var(--rirs-border);
border-radius: var(--rirs-radius-lg);
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
background: var(--rirs-white);
box-shadow: var(--rirs-shadow-sm);
}
.woocommerce table.shop_table th {
font-family: var(--rirs-font-display);
font-weight:600;
font-size:13px;
letter-spacing: .06em;
color: var(--rirs-ink-faint);
background: var(--rirs-bg-alt);
padding: 16px 16px;
border-bottom: 1px solid var(--rirs-border);
}
.woocommerce table.shop_table td {
padding: 16px 16px;
border-top: 1px solid var(--rirs-border-soft);
color: var(--rirs-ink-soft);
}
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
background: var(--rirs-bg-alt);
color: var(--rirs-ink);
font-weight:600;
}
.woocommerce .order-total th,
.woocommerce .order-total td { font-size:17px; font-family: var(--rirs-font-display); font-weight:800; }
.woocommerce .price,
.woocommerce span.amount,
.woocommerce bdi {
font-family: var(--rirs-font-display);
font-weight:600;
color: var(--rirs-ink);
}
.woocommerce-checkout #customer_details { margin-bottom: 8px; }
#order_review_heading {
font-family: var(--rirs-font-display);
font-size:21px;
margin-top: 32px;
}
.woocommerce-checkout #payment {
background: var(--rirs-white);
border: 1px solid var(--rirs-border);
border-radius: var(--rirs-radius-lg);
box-shadow: var(--rirs-shadow-sm);
padding: 8px 0 0;
}
.woocommerce-checkout #payment ul.payment_methods {
border-bottom: 1px solid var(--rirs-border-soft);
padding: 16px 24px;
}
.woocommerce-checkout #payment ul.payment_methods li {
border: 1px solid var(--rirs-border);
border-radius: var(--rirs-radius);
padding: 16px 16px;
margin-bottom: 8px;
background: var(--rirs-white);
transition: border-color .15s ease, background-color .15s ease;
list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li:hover { border-color: var(--rirs-blue); }
.woocommerce-checkout #payment ul.payment_methods li label {
font-family: var(--rirs-font-display);
font-weight:600;
font-size:15px;
color: var(--rirs-ink);
display: inline;
cursor: pointer;
}
.woocommerce-checkout #payment div.payment_box {
background: var(--rirs-bg-alt);
border-radius: var(--rirs-radius);
color: var(--rirs-ink-soft);
font-size:15px;
margin-top: 16px;
padding: 16px 16px;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment div.form-row.place-order { padding: 16px 24px 24px; }
.woocommerce #place_order { width: 100%; padding: 16px 24px; font-size:15px; }
.woocommerce ul.order_details {
background: var(--rirs-white);
border: 1px solid var(--rirs-border);
border-radius: var(--rirs-radius-lg);
box-shadow: var(--rirs-shadow-sm);
padding: 24px 24px;
margin: 0 0 32px;
display: flex;
flex-wrap: wrap;
gap: 24px 40px;
}
.woocommerce ul.order_details li {
border: 0;
margin: 0;
padding: 0;
font-family: var(--rirs-font-display);
font-weight:800;
font-size:17px;
color: var(--rirs-ink);
text-transform: none;
list-style: none;
}
.woocommerce ul.order_details li strong {
display: block;
font-family: var(--rirs-font-body);
font-weight:600;
font-size:13px;
letter-spacing: .05em;
color: var(--rirs-ink-faint);
margin-bottom: 4px;
}
.woocommerce-order p.woocommerce-thankyou-order-received,
.woocommerce-order .woocommerce-notice--success {
font-family: var(--rirs-font-display);
font-size:21px;
font-weight:600;
color: var(--rirs-ink);
line-height: 1.4;
}
.woocommerce ul.products li.product {
background: var(--rirs-white);
border: 1px solid var(--rirs-border);
border-radius: var(--rirs-radius-lg);
overflow: hidden;
box-shadow: var(--rirs-shadow-sm);
transition: box-shadow .2s ease, transform .2s ease;
}
.woocommerce ul.products li.product:hover {
box-shadow: var(--rirs-shadow);
transform: translateY(-2px);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: var(--rirs-font-display);
font-weight:600;
color: var(--rirs-ink);
}
.woocommerce .stock.in-stock {
color: var(--rirs-success);
font-family: var(--rirs-font-display);
font-weight:600;
}
.woocommerce .stock.out-of-stock {
color: var(--rirs-danger);
font-family: var(--rirs-font-display);
font-weight:600;
}
.rirs-utr-box {
background: var(--rirs-white);
border: 1px solid var(--rirs-border);
border-left: 3px solid var(--rirs-blue);
border-radius: var(--rirs-radius-lg);
box-shadow: var(--rirs-shadow-sm);
padding: 24px 24px;
margin: 0 0 32px;
}
.rirs-utr-box h2, .rirs-utr-box h3 { margin-top: 0; font-size:21px; }
.rirs-utr-box p { color: var(--rirs-ink-soft); }
.rirs-utr-box input[type="text"] { max-width: 340px; }
/* --------------------------------------------------------------------------
7. TUTOR LMS RE-MAP
-------------------------------------------------------------------------- */
:root:root {
--tutor-color-primary: #1c6ea4;
--tutor-color-primary-rgb: 28, 110, 164;
--tutor-color-primary-hover: #155a87;
--tutor-color-primary-light: #e6f0f7;
--tutor-color-secondary: #0e2036;
--tutor-color-success: #1c7a52;
--tutor-color-success-rgb: 28, 122, 82;
--tutor-color-warning: #a5701a;
--tutor-color-danger: #b23b3b;
--tutor-color-black: #171d26;
--tutor-body-color: #4e5969;
--tutor-color-text-primary: #171d26;
--tutor-color-text-subsued: #4e5969;
--tutor-color-text-hints: #5f6875;
--tutor-color-muted: #5f6875;
--tutor-border-color: #d9dee6;
--tutor-color-gray: #eaf3fa;
--tutor-color-gray-10: #f4f7fa;
--tutor-color-gray-20: #eaf3fa;
--tutor-color-white: #ffffff;
--tutor-body-font-family: var(--rirs-font-body);
--tutor-heading-font-family: var(--rirs-font-display);
--tutor-border-radius-6: 6px;
--tutor-border-radius-8: 8px;
--tutor-border-radius-10: 10px;
}
.tutor-wrap,
.tutor-course-details-page,
[class*="tutor-"] { font-family: var(--rirs-font-body); }
.tutor-wrap h1, .tutor-wrap h2, .tutor-wrap h3, .tutor-wrap h4,
.tutor-course-details-title,
.tutor-fs-4, .tutor-fs-5, .tutor-fs-6 {
font-family: var(--rirs-font-display);
color: var(--rirs-ink);
}
.tutor-btn {
font-family: var(--rirs-font-display);
font-weight:600;
border-radius: var(--rirs-radius);
}
.tutor-card {
border: 1px solid var(--rirs-border);
border-radius: var(--rirs-radius-lg);
box-shadow: var(--rirs-shadow-sm);
overflow: hidden;
transition: box-shadow .2s ease, transform .2s ease;
}
.tutor-card:hover { box-shadow: var(--rirs-shadow); transform: translateY(-2px); }
.tutor-course-name a,
.tutor-course-card-title a { font-family: var(--rirs-font-display); color: var(--rirs-ink); font-weight:600; }
.tutor-course-name a:hover,
.tutor-course-card-title a:hover { color: var(--rirs-blue); }
.tutor-form-control,
.tutor-form-select { border-radius: var(--rirs-radius); border-color: var(--rirs-border); }
.tutor-dashboard-permalinks a,
.tutor-nav-link { font-family: var(--rirs-font-display); font-weight:600; }
.tutor-nav-link.is-active,
.tutor-dashboard-permalinks li.active a { color: var(--rirs-blue); }
.tutor-progress-bar span,
.tutor-progress-value { background-color: var(--rirs-blue); }
/* --------------------------------------------------------------------------
8. HEADER / FOOTER / NAV
-------------------------------------------------------------------------- */
.ct-header [data-row] { border-bottom-color: var(--rirs-border); }
.ct-header [data-row="top"] {
background-color: var(--rirs-navy);
color: rgba(255, 255, 255, .85);
font-size:15px;
}
.ct-header [data-row="top"] a { color: rgba(255, 255, 255, .85); }
.ct-header [data-row="top"] a:hover { color: #fff; }
.ct-header [data-id="menu"] .menu > li > a,
.header-menu-1 .menu > li > a {
font-family: var(--rirs-font-display);
font-weight:600;
font-size:15px;
letter-spacing: 0;
}
.site-footer,
footer.ct-footer {
background-color: var(--rirs-navy);
color: rgba(255, 255, 255, .78);
}
footer.ct-footer a { color: rgba(255, 255, 255, .78); }
footer.ct-footer a:hover { color: #fff; }
footer.ct-footer h1, footer.ct-footer h2, footer.ct-footer h3,
footer.ct-footer h4, footer.ct-footer .widget-title {
color: #fff;
font-family: var(--rirs-font-display);
font-size:15px;
letter-spacing: .05em;
font-weight:600;
}
footer.ct-footer [data-row] { border-top-color: rgba(255, 255, 255, .12); }
/* --------------------------------------------------------------------------
9. RIRS COMPONENTS
-------------------------------------------------------------------------- */
.rirs-eyebrow {
font-family: var(--rirs-font-display);
font-weight:600;
font-size:13px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--rirs-blue);
margin-bottom: 16px;
display: block;
}
.rirs-section { padding-block: var(--rirs-section-y); }
.rirs-section--tint { background: var(--rirs-bg-alt); }
.rirs-section--navy { background: var(--rirs-navy); color: rgba(255,255,255,.82); }
.rirs-section--navy h1, .rirs-section--navy h2, .rirs-section--navy h3 { color: #fff; }
.rirs-nextbatch {
background: var(--rirs-navy-2);
color: #fff;
padding: 16px 0;
}
.rirs-nextbatch__inner {
max-width: 1160px;
margin: 0 auto;
padding: 0 32px;
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
flex-wrap: wrap;
}
.rirs-nextbatch__tag {
font-family: var(--rirs-font-display);
font-weight:600;
font-size:13px;
letter-spacing: .08em;
color: var(--rirs-navy-2);
background: var(--rirs-gold);
padding: 8px 8px;
border-radius:8px;
}
.rirs-nextbatch__title { font-family: var(--rirs-font-display); font-weight:600; font-size:15px; color: #fff; }
.rirs-nextbatch__meta { font-size:15px; color: #c5cfdb; }
.rirs-nextbatch__cta {
font-family: var(--rirs-font-display);
font-weight:600;
font-size:15px;
color: #fff;
border-bottom: 2px solid var(--rirs-gold);
padding-bottom: 2px;
white-space: nowrap;
text-decoration: none;
}
.rirs-nextbatch__cta:hover { color: #fff; opacity: .85; }
.rirs-card {
background: var(--rirs-white);
border: 1px solid var(--rirs-border);
border-radius: var(--rirs-radius-lg);
box-shadow: var(--rirs-shadow-sm);
padding: 32px;
transition: box-shadow .2s ease, transform .2s ease;
}
.rirs-card:hover { box-shadow: var(--rirs-shadow); transform: translateY(-2px); }
.rirs-facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1px;
background: var(--rirs-border);
border: 1px solid var(--rirs-border);
border-radius: var(--rirs-radius-lg);
overflow: hidden;
}
.rirs-facts__item { background: var(--rirs-white); padding: 24px 24px; }
.rirs-facts__label {
font-size:13px;
letter-spacing: .06em;
color: var(--rirs-ink-faint);
margin-bottom: 8px;
}
.rirs-facts__value {
font-family: var(--rirs-font-display);
font-weight:800;
font-size:21px;
color: var(--rirs-ink);
line-height: 1.25;
}
.rirs-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--rirs-font-display);
font-weight:600;
font-size:13px;
letter-spacing: .03em;
padding: 8px 8px;
border-radius: 999px;
background: var(--rirs-blue-soft);
color: var(--rirs-blue-dark);
}
.rirs-badge--success { background: var(--rirs-success-soft); color: var(--rirs-success); }
.rirs-badge--warning { background: var(--rirs-warning-soft); color: var(--rirs-warning); }
.rirs-pending {
border: 1.5px dashed var(--rirs-border);
border-radius: var(--rirs-radius-lg);
background: transparent;
padding: 24px 32px;
color: var(--rirs-ink-faint);
}
.rirs-waiting-overdue { color: #b23b3b; font-weight:600; }
.rirs-waiting-ok { color: #4e5969; }
/* --------------------------------------------------------------------------
10. PRINT
-------------------------------------------------------------------------- */
@media print {
.ct-header, footer.ct-footer, .rirs-nextbatch, .woocommerce-message { display: none !important; }
body { background: #fff; color: #000; font-size: 12pt; }
.woocommerce table.shop_table, .woocommerce ul.order_details { box-shadow: none; }
}
/* --------------------------------------------------------------------------
11. BATCH LIST + LAYOUT HELPERS
Used by [rirs_batches], [rirs_next_batch] and the page block markup.
-------------------------------------------------------------------------- */
.rirs-batchlist { display: flex; flex-direction: column; gap: 16px; }
.rirs-batchlist__row {
display: grid;
grid-template-columns: 190px 1fr auto;
gap: 24px;
align-items: center;
background: var(--rirs-white);
border: 1px solid var(--rirs-border);
border-radius: var(--rirs-radius-lg);
padding: 16px 24px;
box-shadow: var(--rirs-shadow-sm);
transition: box-shadow .2s ease;
}
.rirs-batchlist__row:hover { box-shadow: var(--rirs-shadow); }
.rirs-batchlist__date {
font-family: var(--rirs-font-display);
font-weight:800;
font-size:17px;
color: var(--rirs-ink);
}
.rirs-batchlist__title {
font-family: var(--rirs-font-display);
font-weight:600;
font-size:17px;
color: var(--rirs-ink);
}
.rirs-batchlist__meta { font-size:15px; color: var(--rirs-ink-soft); margin-top: 3px; }
.rirs-batchlist__action { display: flex; align-items: center; gap: 16px; }
.rirs-batchlist__fee {
font-family: var(--rirs-font-display);
font-weight:800;
font-size:17px;
color: var(--rirs-ink);
white-space: nowrap;
}
.rirs-seats { font-family: var(--rirs-font-display); font-weight:600; color: var(--rirs-success); }
.rirs-grid { display: grid; gap: 24px; }
.rirs-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rirs-grid--3 { grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }
.rirs-grid--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.rirs-stat__value {
font-family: var(--rirs-font-display);
font-weight:800;
font-size:42px;
line-height: 1;
color: var(--rirs-blue);
}
.rirs-stat__label { font-size:15px; color: var(--rirs-ink-soft); margin-top: 8px; }
.rirs-section--navy .rirs-stat__value { color: var(--rirs-gold); }
.rirs-section--navy .rirs-stat__label { color: rgba(255, 255, 255, .72); }
.rirs-quote {
background: var(--rirs-white);
border: 1px solid var(--rirs-border);
border-radius: var(--rirs-radius-lg);
box-shadow: var(--rirs-shadow-sm);
padding: 32px;
}
.rirs-quote__text { font-size:15px; color: var(--rirs-ink); line-height: 1.6; }
.rirs-quote__who {
margin-top: 16px;
font-family: var(--rirs-font-display);
font-weight:600;
font-size:15px;
color: var(--rirs-ink);
}
.rirs-quote__role { font-size:13px; color: var(--rirs-ink-faint); }
.rirs-accred {
display: flex;
align-items: center;
justify-content: center;
gap: 16px 40px;
flex-wrap: wrap;
padding: 24px 0;
}
.rirs-accred__item {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--rirs-font-display);
font-weight:600;
font-size:15px;
color: var(--rirs-ink-soft);
}
@media (max-width: 781px) {
.rirs-batchlist__row { grid-template-columns: 1fr; gap: 8px; }
.rirs-batchlist__action { justify-content: flex-start; }
.rirs-stat__value { font-size:34px; }
}
/* --------------------------------------------------------------------------
12. PAGE HEADING + HEADER CORRECTIONS
-------------------------------------------------------------------------- */
/* Output by the the_content filter in functions.php. */
.rirs-pagehead {
margin: 0 0 40px;
padding-bottom: 24px;
border-bottom: 1px solid var(--rirs-border);
}
.rirs-pagehead__title { margin: 0; }
.rirs-pagehead__sub {
margin: 16px 0 0;
font-size:21px;
line-height: 1.55;
color: var(--rirs-ink-soft);
max-width: 62ch;
}
/* The header's top row carries only the account link, so it should not read
as a coloured band in its own right. */
.ct-header [data-row="top"] { background-color: transparent; }
/* Blocksy's type-3 menu fills the active item with a solid block of accent
colour. Against navy and blue that reads as a button, not as "you are
here" - an underline says the same thing without shouting. */
.ct-header [data-menu="type-3"] .menu > li > a::before {
background-color: transparent !important;
}
.ct-header [data-menu="type-3"] .menu > li.current-menu-item > a,
.ct-header [data-menu="type-3"] .menu > li.current_page_item > a,
.ct-header [data-menu="type-3"] .menu > li.current-menu-ancestor > a,
.ct-header [data-menu="type-3"] .menu > li.current-menu-parent > a {
color: var(--rirs-blue) !important;
background: transparent !important;
box-shadow: inset 0 -2px 0 0 var(--rirs-blue);
}
/* --------------------------------------------------------------------------
13. HOMEPAGE + FULL-WIDTH SECTIONS
The front page content area is full width and uses WordPress's constrained
layout, so a section only needs the alignfull class to break the band out.
-------------------------------------------------------------------------- */
.rirs-inner { max-width: 1160px; margin: 0 auto; padding-inline: 32px; }
.rirs-band { padding-block: var(--rirs-section-y); }
.rirs-band--tint { background: var(--rirs-bg-alt); }
.rirs-band--navy { background: var(--rirs-navy); color: rgba(255, 255, 255, .8); }
.rirs-band--navy h1,
.rirs-band--navy h2,
.rirs-band--navy h3 { color: #fff; }
.rirs-band--navy a { color: #fff; }
/* Hero */
.rirs-hero {
position: relative;
display: flex;
align-items: center;
min-height: 560px;
overflow: hidden;
}
.rirs-hero__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.rirs-hero__scrim {
position: absolute;
inset: 0;
background: linear-gradient(100deg, rgba(11, 26, 45, .94) 0%, rgba(14, 32, 54, .85) 45%, rgba(20, 42, 68, .5) 100%);
}
.rirs-hero__inner {
position: relative;
width: 100%;
max-width: 1160px;
margin: 0 auto;
padding: 96px 32px;
}
.rirs-hero__body { max-width: 620px; }
.rirs-hero__eyebrow {
font-family: var(--rirs-font-display);
font-weight:600;
font-size:13px;
letter-spacing: .08em;
text-transform: uppercase;
color: #74c2ee;
display: block;
}
.rirs-hero h1 {
color: #fff;
font-size:clamp(28px, 4.4vw, 42px);
line-height: 1.12;
margin: 16px 0 0;
}
.rirs-hero__lead {
color: #e0e5eb;
font-size:17px;
line-height: 1.6;
max-width: 545px;
margin: 24px 0 0;
}
.rirs-hero__actions { display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
.rirs-hero__note { color: #b5bfcb; font-size:15px; margin: 16px 0 0; }
.rirs-btn-ghost {
background: transparent;
border: 1.5px solid rgba(255, 255, 255, .55);
color: #fff;
box-shadow: none;
}
.rirs-btn-ghost:hover {
background: rgba(255, 255, 255, .12);
border-color: #fff;
color: #fff;
}
/* Course card */
.rirs-course { display: flex; flex-direction: column; height: 100%; }
.rirs-course__code {
font-family: var(--rirs-font-display);
font-weight:800;
font-size:21px;
color: var(--rirs-ink);
margin: 16px 0 0;
}
.rirs-course__name { font-size:15px; color: var(--rirs-ink-faint); margin: 2px 0 0; }
.rirs-course__body { margin: 16px 0 0; font-size:15px; }
.rirs-course__facts {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
margin: 16px 0 0;
font-size:15px;
color: var(--rirs-ink-soft);
padding-top: 16px;
border-top: 1px solid var(--rirs-border-soft);
}
.rirs-course__fee {
font-family: var(--rirs-font-display);
font-weight:800;
font-size:21px;
color: var(--rirs-ink);
margin: 16px 0 0;
}
.rirs-course__fee small { display: block; font-family: var(--rirs-font-body); font-weight:400; font-size:13px; color: var(--rirs-ink-faint); }
.rirs-course__link { margin-top: 24px; padding-top: 0; }
.rirs-cta__phone {
font-family: var(--rirs-font-display);
font-weight:800;
font-size:28px;
color: #fff;
}
@media (max-width: 781px) {
.rirs-hero { min-height: 440px; }
.rirs-hero__inner { padding: 64px 24px; }
.rirs-inner { padding-inline: 24px; }
}
/* --------------------------------------------------------------------------
14. CORRECTIONS AFTER THE FIRST PASS ON STAGING
-------------------------------------------------------------------------- */
/* Stats sitting on navy: the accent blue is too close to the background to
read, so the gold does the work there. */
.rirs-band--navy .rirs-stat__value { color: var(--rirs-gold); }
.rirs-band--navy .rirs-stat__label { color: rgba(255, 255, 255, .72); }
/* Push the "learn about" link to the bottom of every course card so the four
cards line up however differently their titles wrap. */
.rirs-course__link { margin-top: auto; padding-top: 24px; }
/* Outline button on a light background. */
.rirs-btn-outline {
background-color: transparent;
color: var(--rirs-blue);
border: 1.5px solid var(--rirs-blue);
box-shadow: none;
}
.rirs-btn-outline:hover {
background-color: var(--rirs-blue);
color: var(--rirs-white);
border-color: var(--rirs-blue);
}
/* Blocksy paints the header's top row a blue of its own that is not in this
palette. Its background is set inline, so this needs the weight. */
.ct-header [data-row="top"] { background-color: var(--rirs-navy) !important; }
/* The footer's middle row keeps a light background from the theme settings,
which left light text on a light panel once the palette changed. Paint the
row to match the rest of the footer. */
footer.ct-footer [data-row="middle"] { background-color: var(--rirs-navy); }
footer.ct-footer [data-row="middle"] p,
footer.ct-footer [data-row="middle"] li,
footer.ct-footer [data-row="middle"] span,
footer.ct-footer [data-row="middle"] div { color: rgba(255, 255, 255, .78); }
footer.ct-footer [data-row="middle"] a { color: rgba(255, 255, 255, .82); }
footer.ct-footer [data-row="middle"] a:hover { color: #fff; }
footer.ct-footer [data-row="middle"] h1,
footer.ct-footer [data-row="middle"] h2,
footer.ct-footer [data-row="middle"] h3,
footer.ct-footer [data-row="middle"] h4,
footer.ct-footer [data-row="middle"] h5,
footer.ct-footer [data-row="middle"] .widget-title { color: #fff; }
footer.ct-footer [data-row="bottom"] { border-top: 1px solid rgba(255, 255, 255, .12); }
/* Payment method rows are flex, which was squashing the radio into an
ellipse. Pin it, and let the payment box take a row of its own. */
.woocommerce-checkout #payment ul.payment_methods li {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 8px;
}
.woocommerce-checkout #payment ul.payment_methods li > input[type="radio"] {
flex: 0 0 16px;
width: 16px;
height: 16px;
min-height: 0;
margin: 0;
padding: 0;
}
.woocommerce-checkout #payment ul.payment_methods li > label { flex: 1 1 auto; margin: 0; }
.woocommerce-checkout #payment ul.payment_methods li > label img { max-height: 26px; width: auto; margin-left: 8px; }
.woocommerce-checkout #payment ul.payment_methods li > .payment_box { flex: 1 0 100%; }
/* Batch facts on a product page sit under the price, so they want a little
air above and below. */
.rirs-facts--product { margin: 8px 0 24px; }
/* Any checkbox or radio elsewhere in a form gets the same treatment, so the
field styling above never stretches one. */
input[type="checkbox"], input[type="radio"] {
width: auto;
min-height: 0;
height: auto;
padding: 0;
}
/* --------------------------------------------------------------------------
15. FOOTER — matched to the homepage artboard
The whole footer is one widget in Footer Widget Area 3, so the four
columns come from this grid rather than from Blocksy's column config.
-------------------------------------------------------------------------- */
:root {
--rirs-foot-bg: #051223;
--rirs-foot-line: #1a2532;
--rirs-foot-text: #b5bfcb;
--rirs-foot-copy: #5f6875;
}
footer.ct-footer [data-row="middle"] {
background-color: var(--rirs-foot-bg);
padding-top: 64px;
padding-bottom: 0;
}
/* One full-width column: the layout below does the work. */
footer.ct-footer [data-row="middle"] .ct-container,
footer.ct-footer [data-row="middle"] .ct-container-full {
display: block;
}
footer.ct-footer [data-row="middle"] [data-column] {
width: 100%;
max-width: none;
padding: 0;
}
footer.ct-footer [data-row="middle"] [data-column]:empty { display: none; }
footer.ct-footer [data-row="middle"] .widget { margin: 0; padding: 0; }
footer.ct-footer [data-row="middle"] .widget-title { display: none; }
.rirs-foot {
display: grid;
grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
gap: 40px;
padding-bottom: 48px;
color: var(--rirs-foot-text);
font-size:13px;
line-height: 1.65;
}
.rirs-foot__brandline { display: flex; align-items: center; gap: 8px; }
.rirs-foot__brandline img { height: 34px; width: auto; border-radius:8px; display: block; }
.rirs-foot__mark {
font-family: var(--rirs-font-display);
font-weight:800;
font-size:15px;
color: #fff;
}
.rirs-foot__blurb {
font-size:13px;
line-height: 1.65;
margin: 16px 0 0;
max-width: 280px;
color: var(--rirs-foot-text);
}
.rirs-foot__title {
font-family: var(--rirs-font-display);
font-weight:600;
font-size:15px;
color: #fff;
margin: 0;
text-transform: none;
letter-spacing: 0;
}
.rirs-foot__links,
.rirs-foot__facts {
display: flex;
flex-direction: column;
margin: 16px 0 0;
padding: 0;
list-style: none;
font-size:13px;
}
.rirs-foot__links { gap: 8px; }
.rirs-foot__facts { gap: 16px; line-height: 1.6; }
.rirs-foot__links a { color: var(--rirs-foot-text); text-decoration: none; }
.rirs-foot__links a:hover { color: #fff; }
.rirs-foot__social { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.rirs-foot__social span,
.rirs-foot__social a {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--rirs-foot-line);
display: flex;
align-items: center;
justify-content: center;
color: var(--rirs-foot-text);
}
.rirs-foot__social a:hover { background: var(--rirs-blue); color: #fff; }
/* Blocksy's own copyright row, restyled to the artboard's bottom bar. */
footer.ct-footer [data-row="bottom"] {
background-color: var(--rirs-foot-bg);
border-top: 1px solid var(--rirs-foot-line);
padding-top: 24px;
padding-bottom: 24px;
text-align: center;
font-size:13px;
color: var(--rirs-foot-copy);
}
footer.ct-footer [data-row="bottom"] .ct-container { justify-content: center; }
footer.ct-footer [data-row="bottom"] * { color: var(--rirs-foot-copy); }
@media (max-width: 999px) {
.rirs-foot { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 600px) {
.rirs-foot { grid-template-columns: 1fr; gap: 32px; }
.rirs-foot__blurb { max-width: none; }
}
/* --------------------------------------------------------------------------
16. GALLERY — the delivered-batch grid, in the same language as the cards
-------------------------------------------------------------------------- */
.rirs-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 24px;
}
.rirs-gallery__item {
display: flex;
flex-direction: column;
background: var(--rirs-white);
border: 1px solid var(--rirs-border);
border-radius: var(--rirs-radius-lg);
overflow: hidden;
box-shadow: var(--rirs-shadow-sm);
text-decoration: none;
color: inherit;
transition: box-shadow .2s ease, transform .2s ease;
}
.rirs-gallery__item:hover { box-shadow: var(--rirs-shadow); transform: translateY(-2px); }
.rirs-gallery__media {
display: block;
aspect-ratio: 3 / 2;
overflow: hidden;
background: var(--rirs-bg-alt);
}
.rirs-gallery__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .4s ease;
}
.rirs-gallery__item:hover .rirs-gallery__media img { transform: scale(1.04); }
.rirs-gallery__body { display: block; padding: 16px 24px 24px; }
.rirs-gallery__title {
display: block;
font-family: var(--rirs-font-display);
font-weight:600;
font-size:15px;
line-height: 1.35;
color: var(--rirs-ink);
}
.rirs-gallery__venue {
display: block;
margin-top: 8px;
font-size:15px;
color: var(--rirs-ink-soft);
}
/* --------------------------------------------------------------------------
17. FOOTER — winning against the theme's own footer colour
Blocksy sets the footer background from the Customizer with a selector
more specific than ours, which left white artboard text on a near-white
panel. This is a deliberate override of a theme setting, so it earns the
!important rather than an escalating specificity war.
Only the column holding the designed footer is shown, so a stray widget
left in another footer area cannot reappear underneath it.
-------------------------------------------------------------------------- */
footer.ct-footer,
footer.ct-footer [data-row="middle"],
footer.ct-footer [data-row="bottom"] {
background-color: var(--rirs-foot-bg) !important;
}
footer.ct-footer [data-row="middle"] [data-column]:not(:has(.rirs-foot)) {
display: none;
}
/* The theme adds 100px of its own padding inside the footer row, which sat
on top of the artboard's 64/48 and left a lake of empty navy. Zero it and
let the row's own spacing stand. */
footer.ct-footer [data-row="middle"] > .ct-container,
footer.ct-footer [data-row="middle"] > .ct-container-full {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* --------------------------------------------------------------------------
18. FACULTY CARDS (About page)
-------------------------------------------------------------------------- */
.rirs-person { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.rirs-person__photo {
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--rirs-bg-alt);
}
.rirs-person__photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
.rirs-person__name {
margin: 24px 24px 0;
font-size:21px;
font-weight:800;
line-height: 1.25;
}
.rirs-person__quals {
margin: 8px 24px 0;
font-size:15px;
letter-spacing: .04em;
color: var(--rirs-blue);
font-family: var(--rirs-font-display);
font-weight:600;
}
.rirs-person__role {
margin: 16px 24px 24px;
font-size:15px;
line-height: 1.6;
color: var(--rirs-ink-soft);
}
.rirs-person__quals:last-child { margin-bottom: 24px; }
/* --------------------------------------------------------------------------
19. THREE THINGS THE PALETTE REMAP BROKE
-------------------------------------------------------------------------- */
/* 1. Batch post heroes.
Blocksy lays the post title over the featured photo in white. The blanket
heading colour in section 3 was overriding that, so every batch page had a
near-black title sitting on a dark photograph. */
.hero-section[data-type="type-2"] h1,
.hero-section[data-type="type-2"] h2,
.hero-section[data-type="type-2"] .page-title,
.hero-section[data-type="type-2"] .entry-meta,
.hero-section[data-type="type-2"] .entry-meta a,
.hero-section[data-type="type-2"] .breadcrumbs,
.hero-section[data-type="type-2"] .breadcrumbs a {
color: #fff;
}
.hero-section[data-type="type-2"] .page-title {
text-shadow: 0 2px 18px rgba(5, 18, 35, .55);
}
.hero-section[data-type="type-2"] .entry-meta a:hover { color: var(--rirs-gold); }
/* 2. Dropdown menus.
Blocksy binds the dropdown panel to palette colour 4, which this design
uses for body text - so the menu opened as a muddy grey slab, and the
hover colour on top of it had almost nothing to work against. Give the
dropdown its own surface instead of borrowing a text colour. */
.ct-header .sub-menu,
.ct-header [data-id="menu"] .sub-menu {
background-color: var(--rirs-white) !important;
border: 1px solid var(--rirs-border);
border-radius: var(--rirs-radius);
box-shadow: var(--rirs-shadow);
padding: 8px;
}
.ct-header .sub-menu li > a,
.ct-header .sub-menu .ct-menu-link {
color: var(--rirs-ink) !important;
border-radius: var(--rirs-radius-sm);
padding: 8px 16px;
font-size:15px;
}
.ct-header .sub-menu li > a:hover,
.ct-header .sub-menu li > a:focus-visible,
.ct-header .sub-menu li.current-menu-item > a {
background-color: var(--rirs-blue-soft) !important;
color: var(--rirs-blue-dark) !important;
}
.ct-header .sub-menu li + li { border-top: 0; }
/* Top-level hover: keep it to a colour change and the underline, so nothing
relies on a tinted panel behind the text. */
.ct-header [data-id="menu"] .menu > li > a:hover {
color: var(--rirs-blue) !important;
background-color: transparent !important;
}
/* 3. The photo grid on a batch post.
WordPress's flex gallery wrapped rows unevenly and gave the photographs no
edges. Same card treatment as everywhere else. */
.entry-content .wp-block-gallery.has-nested-images {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
gap: 16px;
margin-block: 30px;
}
.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image {
width: 100% !important;
max-width: none;
margin: 0;
border: 1px solid var(--rirs-border);
border-radius: var(--rirs-radius-lg);
overflow: hidden;
box-shadow: var(--rirs-shadow-sm);
background: var(--rirs-bg-alt);
transition: box-shadow .2s ease, transform .2s ease;
}
.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image:hover {
box-shadow: var(--rirs-shadow);
transform: translateY(-2px);
}
.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image img {
width: 100%;
height: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
border-radius:0;
}
.entry-content .wp-block-gallery.has-nested-images figcaption {
font-size:13px;
color: var(--rirs-ink-soft);
padding: 8px 16px;
background: var(--rirs-white);
}
/* --------------------------------------------------------------------------
20. PAGE HEAD SPACING + THE IRCF CERTIFICATE
-------------------------------------------------------------------------- */
/* These pages are set to "no content spacing" in the theme, so the page
heading was landing directly under the header with nothing between them.
It has to be padding rather than margin: WordPress's layout styles zero the
top margin of whatever comes first in the content, which is exactly this. */
.rirs-pagehead { padding-top: 56px; }
@media (max-width: 781px) {
.rirs-pagehead { padding-top: 32px; }
}
/* The IRCF authorisation, shown beside what it authorises. */
.rirs-cert {
display: grid;
grid-template-columns: minmax(220px, 300px) 1fr;
gap: 32px;
align-items: start;
margin: 24px 0 0;
}
.rirs-cert__doc { margin: 0; }
.rirs-cert__doc img {
display: block;
width: 100%;
height: auto;
border: 1px solid var(--rirs-border);
border-radius: var(--rirs-radius-lg);
box-shadow: var(--rirs-shadow-sm);
background: var(--rirs-white);
transition: box-shadow .2s ease, transform .2s ease;
}
.rirs-cert__doc a:hover img { box-shadow: var(--rirs-shadow); transform: translateY(-2px); }
.rirs-cert__doc figcaption {
margin-top: 8px;
font-size:13px;
line-height: 1.5;
color: var(--rirs-ink-faint);
}
.rirs-cert__body > p:first-child { margin-top: 0; }
@media (max-width: 700px) {
.rirs-cert { grid-template-columns: 1fr; gap: 24px; }
.rirs-cert__doc { max-width: 320px; }
}
/* --------------------------------------------------------------------------
21. SPACING BETWEEN FULL-BLEED SECTIONS, AND AT THE END OF A PAGE
-------------------------------------------------------------------------- */
/* WordPress gives every block in the content a block-gap margin. Between two
full-bleed bands that shows up as a stripe of page background - most
visibly between the hero and the navy next-batch bar. These sections carry
their own padding, so they should sit flush. */
.entry-content > .alignfull { margin-block: 0; }
/* Inner pages end on a card, which was landing hard against the footer. The
homepage is exempt: its last section is a full-bleed band that is meant to
run into the footer. Keyed off the page heading, which only inner pages have. */
.entry-content:has(> .rirs-pagehead) { padding-bottom: 72px; }
@media (max-width: 781px) {
.entry-content:has(> .rirs-pagehead) { padding-bottom: 48px; }
}
/* The certificate is portrait and tall; the text beside it was short, which
left a hole above the next heading. Narrower document, and the column
beside it now carries the detail that was missing. */
.rirs-cert { grid-template-columns: minmax(200px, 260px) 1fr; }
.rirs-cert__facts {
margin: 24px 0 0;
padding: 0;
border-top: 1px solid var(--rirs-border);
}
.rirs-cert__facts div {
display: grid;
grid-template-columns: minmax(150px, 210px) 1fr;
gap: 8px 24px;
padding: 16px 0;
border-bottom: 1px solid var(--rirs-border-soft);
}
.rirs-cert__facts dt {
font-family: var(--rirs-font-display);
font-weight:600;
font-size:13px;
letter-spacing: .05em;
color: var(--rirs-ink-faint);
margin: 0;
}
.rirs-cert__facts dd {
margin: 0;
font-size:15px;
color: var(--rirs-ink);
}
@media (max-width: 600px) {
.rirs-cert__facts div { grid-template-columns: 1fr; gap: 3px; padding: 8px 0; }
}
/* --------------------------------------------------------------------------
22. CONTACT PAGE, SHARED DEFINITION LIST, AND WPFORMS
-------------------------------------------------------------------------- */
.rirs-contact {
display: grid;
grid-template-columns: minmax(280px, 400px) 1fr;
gap: 32px;
align-items: start;
margin-top: 8px;
}
.rirs-contact__form { min-width: 0; }
.rirs-contact__form h2 { font-size:28px; }
.rirs-newsletter { margin-top: 32px; }
.rirs-newsletter .wpforms-container { margin-top: 16px; }
.rirs-deflist { margin: 16px 0 0; padding: 0; border-top: 1px solid var(--rirs-border); }
.rirs-deflist div {
display: grid;
grid-template-columns: 92px 1fr;
gap: 8px 16px;
padding: 16px 0;
border-bottom: 1px solid var(--rirs-border-soft);
}
.rirs-deflist dt {
font-family: var(--rirs-font-display);
font-weight:600;
font-size:13px;
letter-spacing: .05em;
color: var(--rirs-ink-faint);
margin: 0;
padding-top: 2px;
}
.rirs-deflist dd { margin: 0; font-size:15px; line-height: 1.55; color: var(--rirs-ink); }
.wpforms-container { margin: 0; }
.wpforms-container .wpforms-field { padding: 0 0 16px; }
.wpforms-container .wpforms-field-label {
font-family: var(--rirs-font-display);
font-weight:600;
font-size:15px;
color: var(--rirs-ink);
margin-bottom: 8px;
}
.wpforms-container .wpforms-field-sublabel { font-size:13px; color: var(--rirs-ink-faint); font-weight:400; }
.wpforms-container .wpforms-required-label { color: var(--rirs-danger); }
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container textarea,
.wpforms-container select {
background: var(--rirs-white);
border: 1px solid var(--rirs-border);
border-radius: var(--rirs-radius);
padding: 16px 16px;
font-size:15px;
font-family: var(--rirs-font-body);
color: var(--rirs-ink);
max-width: 100%;
}
.wpforms-container textarea { min-height: 150px; }
.wpforms-container .wpforms-error { color: var(--rirs-danger); font-size:13px; }
.wpforms-container input.wpforms-error,
.wpforms-container textarea.wpforms-error { border-color: var(--rirs-danger); }
.wpforms-confirmation-container-full {
background: var(--rirs-success-soft);
border: 1px solid var(--rirs-success);
border-left-width: 3px;
border-radius: var(--rirs-radius);
color: var(--rirs-ink);
padding: 16px 24px;
}
@media (max-width: 860px) { .rirs-contact { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 480px) { .rirs-deflist div { grid-template-columns: 1fr; gap: 2px; } }
/* =================================================================
23. ONLINE COURSES ARCHIVE
Tutor prints an empty five-star widget on courses with no reviews,
which reads as a zero rating. Hide it until a real rating exists.
================================================================= */
.tutor-course-ratings:not(:has(.tutor-icon-star-bold)):not(:has(.tutor-icon-star-half-bold)){
display:none;
}
.rirs-course-archive .entry-header{
padding-top:56px;
padding-bottom:8px;
}
/* =================================================================
24. NO DOUBLE PAGE TITLE
Every page carries its own .rirs-pagehead, so the theme's built-in
page title would repeat it. Hide the theme's one wherever ours is
present. Pages with a real hero (the front page) never get a
.rirs-pagehead, so their hero is untouched.
================================================================= */
article.type-page:has(> .hero-section):has(.rirs-pagehead) > .hero-section{
display:none;
}
/* =================================================================
25. CHECKOUT POLICY NOTE
================================================================= */
.rirs-checkout-note{
margin:0 0 16px;
padding:16px 16px;
border-radius:var(--rirs-radius-sm,8px);
background:var(--rirs-surface-2,#e8ecf1);
color:var(--rirs-ink-soft,#4e5969);
font-size:15px;
line-height:1.55;
}
.rirs-checkout-note a{
color:var(--rirs-blue,#1c6ea4);
text-decoration:underline;
}
/* =================================================================
26. SINGLE COURSE PAGE - THE BCLS ARTBOARD LANGUAGE
Tutor's markup stays exactly where it is. Only the surface changes,
so enrolment, the curriculum list and the lesson player keep working.
================================================================= */
/* --- Header band ------------------------------------------------ */
body.single-courses .tutor-course-details-page > .hero-section{
padding-top:56px;
padding-bottom:24px;
border-bottom:1px solid var(--rirs-border);
margin-bottom:40px;
}
body.single-courses .tutor-course-details-header::before{
content:"Online course";
display:block;
font-family:var(--rirs-font-display);
font-weight:600;
font-size:13px;
letter-spacing:.08em;
color:var(--rirs-blue);
}
body.single-courses h1.tutor-course-details-title{
font-family:var(--rirs-font-display);
font-weight:800;
font-size:clamp(28px, 4.4vw, 42px);
line-height:1.1;
letter-spacing:-.015em;
color:var(--rirs-navy);
margin-top:16px;
}
body.single-courses .tutor-course-details-top{
margin-top:16px;
font-size:15px;
color:var(--rirs-ink-soft);
}
/* An empty five-star row reads as a zero rating. */
body.single-courses .tutor-course-details-ratings:not(:has(.tutor-icon-star-bold)):not(:has(.tutor-icon-star-half-bold)){
display:none;
}
/* --- Thumbnail and tabs ----------------------------------------- */
body.single-courses .tutor-course-thumbnail img{
border-radius:12px;
}
body.single-courses .tutor-nav{
border-bottom:1px solid var(--rirs-border);
}
body.single-courses .tutor-nav-link{
font-family:var(--rirs-font-display);
font-weight:600;
font-size:15px;
color:var(--rirs-ink-soft);
}
body.single-courses .tutor-nav-link.is-active,
body.single-courses .tutor-nav-link[aria-current]{
color:var(--rirs-navy);
box-shadow:inset 0 -2px 0 var(--rirs-blue);
}
body.single-courses .tutor-course-content-title,
body.single-courses .tutor-course-details-content h2,
body.single-courses .tutor-course-details-widget-title{
font-family:var(--rirs-font-display);
font-weight:600;
color:var(--rirs-navy);
letter-spacing:-.015em;
}
/* --- Curriculum rows, as on the artboard ------------------------ */
body.single-courses .tutor-course-content-list-item{
border:1px solid var(--rirs-border);
border-radius:12px;
background:var(--rirs-white);
padding:16px 16px;
margin-bottom:8px;
}
body.single-courses .tutor-course-content-list-item-title{
font-family:var(--rirs-font-display);
font-weight:600;
color:var(--rirs-ink);
}
/* --- Booking sidebar -------------------------------------------- */
@media (min-width:1200px){
body.single-courses .tutor-single-course-sidebar{
position:sticky;
top:24px;
}
}
body.single-courses .tutor-sidebar-card{
border:1px solid var(--rirs-border);
border-radius:var(--rirs-radius-lg);
background:var(--rirs-white);
box-shadow:var(--rirs-shadow-sm);
overflow:hidden;
}
body.single-courses .tutor-sidebar-card .tutor-card-body{
padding:24px 24px 24px;
}
body.single-courses .tutor-course-sidebar-card-pricing span{
font-family:var(--rirs-font-display);
font-weight:800;
font-size:34px;
line-height:1;
color:var(--rirs-navy);
}
body.single-courses .tutor-course-sidebar-card-pricing del,
body.single-courses .tutor-course-sidebar-card-pricing del span{
font-family:var(--rirs-font-body);
font-weight:400;
font-size:15px;
color:var(--rirs-ink-faint);
}
body.single-courses .tutor-sidebar-card .tutor-btn-block{
width:100%;
justify-content:center;
border-radius:var(--rirs-radius);
font-family:var(--rirs-font-display);
font-weight:600;
font-size:15px;
padding-block:14px;
}
/* Facts, as the four-cell strip on the artboard. */
body.single-courses .tutor-sidebar-card .tutor-card-footer{
padding:0 24px 24px;
border-top:0;
}
body.single-courses .tutor-sidebar-card .tutor-card-footer > ul.tutor-ul{
display:grid;
grid-template-columns:1fr 1fr;
gap:1px;
margin:0;
padding:0;
list-style:none;
background:var(--rirs-border);
border:1px solid var(--rirs-border);
border-radius:12px;
overflow:hidden;
}
body.single-courses .tutor-sidebar-card .tutor-card-footer > ul.tutor-ul > li{
margin:0 !important;
padding:16px 16px;
background:var(--rirs-white);
font-size:15px;
line-height:1.4;
align-items:flex-start;
}
body.single-courses .tutor-sidebar-card .tutor-card-footer > ul.tutor-ul > li span{
color:var(--rirs-ink-soft);
}
@media (max-width:480px){
body.single-courses .tutor-sidebar-card .tutor-card-footer > ul.tutor-ul{
grid-template-columns:1fr;
}
}
/* --- Course description prose ----------------------------------- */
body.single-courses .tutor-course-details-content{
font-size:15px;
line-height:1.7;
color:var(--rirs-ink-soft);
}
body.single-courses .tutor-course-details-content table{
width:100%;
border-collapse:collapse;
border:1px solid var(--rirs-border);
border-radius:12px;
overflow:hidden;
margin:16px 0;
font-size:15px;
}
body.single-courses .tutor-course-details-content table td,
body.single-courses .tutor-course-details-content table th{
padding:16px 16px;
border:0;
border-bottom:1px solid var(--rirs-border-soft);
vertical-align:top;
text-align:left;
}
body.single-courses .tutor-course-details-content table tr:last-child td{
border-bottom:0;
}
body.single-courses .tutor-course-details-content table tr:first-child td{
font-family:var(--rirs-font-display);
font-weight:600;
color:var(--rirs-navy);
background:var(--rirs-bg-alt);
}
body.single-courses .tutor-course-details-content ul,
body.single-courses .tutor-course-details-content ol{
padding-left:24px;
}
body.single-courses .tutor-course-details-content li{
margin-bottom:8px;
}
/* =================================================================
27. CHECKOUT - THE CHECKOUT ARTBOARD
================================================================= */
/* A checkout is not a place to browse. Keep the logo, lose the rest. */
body.woocommerce-checkout .ct-header [data-id="menu"],
body.woocommerce-checkout .ct-header [data-id="cart"],
body.woocommerce-checkout .ct-header [data-id="account"],
body.woocommerce-checkout .ct-header [data-id="trigger"]{
display:none !important;
}
.rirs-checkout-secure{
display:flex;
align-items:center;
gap:8px;
justify-content:flex-end;
margin:0 0 24px;
font-family:var(--rirs-font-display);
font-weight:600;
font-size:13px;
color:var(--rirs-ink-soft);
}
.rirs-checkout-secure::before{
content:"";
width:15px;
height:15px;
flex:0 0 auto;
background:var(--rirs-success);
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* --- Section headings ------------------------------------------- */
body.woocommerce-checkout .woocommerce h3,
body.woocommerce-checkout #order_review_heading{
font-family:var(--rirs-font-display);
font-weight:600;
font-size:21px;
color:var(--rirs-navy);
letter-spacing:-.015em;
}
/* --- The summary line: a date, a course, a place ---------------- */
.rirs-sum__item{
display:flex;
gap:16px;
align-items:flex-start;
}
.rirs-sum__chip{
flex:0 0 auto;
min-width:62px;
text-align:center;
background:var(--rirs-navy);
color:#fff;
border-radius:12px;
padding:8px 16px;
line-height:1;
}
.rirs-sum__day{
display:block;
font-family:var(--rirs-font-display);
font-weight:800;
font-size:21px;
font-variant-numeric:tabular-nums;
}
.rirs-sum__mon{
display:block;
margin-top:4px;
font-family:var(--rirs-font-display);
font-weight:600;
font-size:13px;
letter-spacing:.07em;
}
.rirs-sum__body{ display:block; }
.rirs-sum__title{
display:block;
font-family:var(--rirs-font-display);
font-weight:600;
font-size:15px;
line-height:1.35;
color:var(--rirs-ink);
}
.rirs-sum__meta{
display:block;
margin-top:8px;
font-size:13px;
line-height:1.5;
color:var(--rirs-ink-soft);
}
/* --- Notes under the summary ------------------------------------ */
.rirs-sum__notes{
margin-top:16px;
border:1px solid var(--rirs-border);
border-radius:var(--rirs-radius-lg);
overflow:hidden;
background:var(--rirs-white);
}
.rirs-sum__note{
margin:0;
padding:16px 16px;
font-size:13px;
line-height:1.55;
color:var(--rirs-ink-soft);
}
.rirs-sum__note--time{
background:var(--rirs-bg-alt);
border-bottom:1px solid var(--rirs-border);
}
/* --- Payment methods as cards ----------------------------------- */
body.woocommerce-checkout ul.wc_payment_methods{
padding:0;
margin:0;
list-style:none;
display:flex;
flex-direction:column;
gap:16px;
}
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method{
border:1px solid var(--rirs-border);
border-radius:12px;
background:var(--rirs-white);
padding:16px 16px;
margin:0;
}
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method:has(input:checked){
border:2px solid var(--rirs-blue);
background:#f7fbfd;
padding:16px 16px;
}
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method > label{
font-family:var(--rirs-font-display);
font-weight:600;
font-size:15px;
color:var(--rirs-ink);
display:inline-flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
}
body.rirs-cart-seat li.payment_method_bacs > label::after{
content:"Seat held 48 hours";
font-family:var(--rirs-font-display);
font-weight:600;
font-size:13px;
letter-spacing:.07em;
color:var(--rirs-warning);
background:var(--rirs-warning-soft);
padding:4px 8px;
border-radius:8px;
white-space:nowrap;
}
body.rirs-cart-seat li[class*="payment_method_razorpay"] > label::after{
content:"Payment instant, seat on approval";
font-family:var(--rirs-font-display);
font-weight:600;
font-size:13px;
letter-spacing:.07em;
color:var(--rirs-success);
background:var(--rirs-success-soft);
padding:4px 8px;
border-radius:8px;
white-space:nowrap;
}
body.woocommerce-checkout .payment_box{
background:var(--rirs-bg-alt);
border-radius:12px;
padding:16px 16px;
margin:16px 0 0;
font-size:15px;
line-height:1.6;
color:var(--rirs-ink-soft);
}
body.woocommerce-checkout .payment_box::before{ display:none; }
/* --- The button says what it does ------------------------------- */
body.woocommerce-checkout .rirs-placeorder,
body.woocommerce-checkout #place_order{
width:100%;
display:block;
border-radius:var(--rirs-radius);
font-family:var(--rirs-font-display);
font-weight:600;
font-size:15px;
padding-block:15px;
}
/* --- Sticky summary on wide screens ----------------------------- */
/* Sticky belongs on the whole right column. Sticking #order_review
alone slides it down over the notes that follow it. */
@media (min-width:1000px){
body.woocommerce-checkout .ct-order-review{
position:sticky;
top:24px;
align-self:start;
}
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total th{
font-family:var(--rirs-font-display);
font-weight:800;
color:var(--rirs-navy);
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td{
font-size:21px;
font-variant-numeric:tabular-nums;
}
/* =================================================================
28. TRACK RECORD BAND
Three figures of very different widths in equal thirds left the
last one stranded at the far edge. Group them instead.
================================================================= */
.rirs-band .rirs-grid--3:has(.rirs-stat__value){
display:flex;
flex-wrap:wrap;
gap:24px 80px;
margin-top:32px;
padding-top:32px;
border-top:1px solid rgba(255,255,255,.16);
}
.rirs-band .rirs-grid--3:has(.rirs-stat__value) > *{
flex:0 0 auto;
min-width:120px;
}
.rirs-band--navy .rirs-stat__value{
line-height:1;
}
.rirs-band--navy .rirs-stat__label{
margin-top:8px;
}
@media (max-width:600px){
.rirs-band .rirs-grid--3:has(.rirs-stat__value){
gap:24px 48px;
}
}
/* =================================================================
29. FOOTER COPYRIGHT BAR
================================================================= */
/* Section 15 already set this row to 20px; match that selector so the
smaller value actually wins. */
footer.ct-footer [data-row="bottom"]{
padding-block:12px;
}
footer.ct-footer [data-row="bottom"] > .ct-container{
padding-block:0;
}
footer.ct-footer [data-row="bottom"] [data-column]{
padding-block:0;
}
.ct-footer-copyright,
.ct-footer-copyright p{
margin:0;
font-size:13px;
line-height:1.5;
}
/* =================================================================
30. MOBILE
Most visitors arrive on a phone. Everything below is either a tap
target that was too small to hit, or a layout that was squeezed.
================================================================= */
/* --- The menu button was 18px square ---------------------------- */
.ct-header-trigger.ct-toggle{
padding:16px !important;
min-width:44px;
min-height:44px;
box-sizing:border-box;
align-items:center;
justify-content:center;
margin-inline-end:-11px;
}
/* --- A badge should hug its text, not stretch the card ---------- */
.rirs-badge{
display:inline-flex;
width:auto;
align-self:flex-start;
}
/* --- Payment radios were stretching into ovals ------------------ */
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method > input[type="radio"]{
flex:0 0 auto;
width:18px;
height:18px;
align-self:flex-start;
margin-top:4px;
}
/* The theme draws the radio as a dot on the label. Making the label a
flex row stretched that dot into a tall oval. */
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method > label::before{
display:inline-block;
flex:0 0 auto;
width:16px;
height:16px;
min-width:16px;
align-self:center;
vertical-align:-3px;
margin-right:8px;
}
@media (max-width:781px){
/* The next-batch link was the main call to action and 28px tall. */
.rirs-nextbatch__cta{
display:block;
width:100%;
box-sizing:border-box;
text-align:center;
padding:16px 16px;
border:1px solid rgba(255,255,255,.34);
border-bottom:1px solid rgba(255,255,255,.34);
border-radius:var(--rirs-radius);
background:rgba(255,255,255,.08);
text-decoration:none;
}
/* Footer links sat 19px apart, which is hard to hit. */
.rirs-foot__links a{
display:inline-block;
padding-block:7px;
}
/* Checkout: the seat title had a third of the width to wrap in. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table{
table-layout:fixed;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table th.product-total,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total{
width:118px;
}
/* A price broken across two lines reads as two prices. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table th{
white-space:nowrap;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name,
body.woocommerce-checkout .woocommerce-checkout-review-order-table th.product-name{
white-space:normal;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td{
font-size:21px;
}
body.woocommerce-checkout .rirs-sum__title{
font-size:15px;
}
/* On a phone the chip beside the title left it 99px to wrap in. */
body.woocommerce-checkout .rirs-sum__item{
flex-direction:column;
gap:8px;
}
body.woocommerce-checkout .rirs-sum__chip{
min-width:0;
width:-moz-fit-content;
width:fit-content;
padding:8px 16px;
}
/* Two form fields side by side left the phone field clipped. */
.wpforms-container .wpforms-field.wpforms-one-half{
width:100% !important;
margin-left:0 !important;
float:none !important;
}
.wpforms-container .wpforms-submit{
width:100%;
justify-content:center;
}
}
@media (max-width:600px){
/* Three stat cards stacked full height turned three numbers into
three screens of scrolling. */
.rirs-grid--3:has(.rirs-stat__value){
grid-template-columns:1fr 1fr;
gap:8px;
}
.rirs-stat{
padding:16px 16px;
}
.rirs-stat__value{
font-size:28px;
}
.rirs-stat__label{
font-size:13px;
}
}
@media (max-width:600px){
/* The certificate sat beside its text in a fixed 200px column,
which left the text 111px and pushed it off the screen.
rirs-cert stacks below 600px. */
.rirs-cert{
grid-template-columns:1fr;
}
.rirs-cert__doc{
max-width:240px;
}
}
/* =================================================================
31. TAP TO CALL IN THE MOBILE HEADER
The phone number is now in the mobile header row. Left as plain
text it wrapped over four lines and made the header 144px tall,
so it is drawn as a call button instead: icon and number where
there is room, icon alone on narrow phones. The number stays in
the markup either way, so screen readers still read it out.
================================================================= */
@media (max-width:999px){
/* 40px of gutter on each side of a phone header is a lot of the
screen. 20px leaves room for the call button. */
.ct-header [data-row] > .ct-container{
padding-inline:20px;
}
.ct-header [data-row*="middle"] [data-id="text"]{
font-size:0;
line-height:0;
white-space:nowrap;
margin-inline:auto 10px;
}
/* The element carries the accreditation badge and a "Call us:"
label as well as the number. Neither belongs in a phone header. */
.ct-header [data-row*="middle"] [data-id="text"] .entry-content,
.ct-header [data-row*="middle"] [data-id="text"] p{
font-size:0;
line-height:0;
margin:0;
}
.ct-header [data-row*="middle"] [data-id="text"] img{
display:none;
}
/* A 115px logo, a call button and a menu button do not all fit
across a phone. The logo gives up the least by shrinking. */
.ct-header [data-row*="middle"] [data-id="logo"] .site-logo-container img{
max-width:96px;
height:auto;
}
.ct-header [data-row*="middle"] [data-id="text"] a{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
height:40px;
padding:0 16px;
border-radius:999px;
background:var(--rirs-blue);
color:#fff;
font-family:var(--rirs-font-display);
font-weight:600;
font-size:13px;
line-height:1;
text-decoration:none;
white-space:nowrap;
}
.ct-header [data-row*="middle"] [data-id="text"] a:hover,
.ct-header [data-row*="middle"] [data-id="text"] a:focus{
background:var(--rirs-blue-hover);
color:#fff;
}
.ct-header [data-row*="middle"] [data-id="text"] a::before{
content:"";
flex:0 0 auto;
width:16px;
height:16px;
background:currentColor;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
}
/* Below this the number will not sit beside the logo and the menu
button without crowding, so the button becomes the icon alone. */
/* Below this the logo, the number and the menu button will not sit
across a phone without crowding, so the button becomes the icon
alone. The number is still in the markup for screen readers. */
@media (max-width:419px){
.ct-header [data-row*="middle"] [data-id="text"] a{
width:40px;
padding:0;
gap:0;
font-size:0;
}
}
/* =========================================================
32. COMING SOON — BCLS + CCLS ANNOUNCEMENT PANEL
========================================================= */
.rirs-soon{
position:relative;
overflow:hidden;
border-radius:var(--rirs-radius-lg);
background:linear-gradient(135deg,var(--rirs-navy) 0%,var(--rirs-navy-2) 52%,var(--rirs-blue-dark) 100%);
color:#fff;
box-shadow:var(--rirs-shadow-lg);
isolation:isolate;
}
.rirs-soon::before{
content:"";
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
opacity:.16;
background-repeat:no-repeat;
background-position:right -40px bottom -10px;
background-size:760px auto;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 760 200'%3E%3Cpath d='M0 128h96l18-40 20 78 26-118 24 92 18-42 22 30h48l16-26 20 60 26-96 22 74 16-32h72l18-44 20 84 26-124 24 96 18-44 22 32h48l16-28 20 62 26-98 22 76 16-34h64' fill='none' stroke='%23efca61' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.rirs-soon::after{
content:"";
position:absolute;
z-index:0;
pointer-events:none;
width:420px;
height:420px;
right:-140px;
top:-190px;
border-radius:50%;
background:radial-gradient(circle,rgba(239,202,97,.20) 0%,rgba(239,202,97,0) 68%);
}
.rirs-soon > *{position:relative;z-index:1}
.rirs-soon__grid{
display:grid;
grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);
gap:0;
align-items:stretch;
}
.rirs-soon__body{padding:48px 48px 40px}
.rirs-soon__flag{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 16px 8px 16px;
border-radius:999px;
background:var(--rirs-gold);
color:var(--rirs-navy);
font-family:var(--rirs-font-body);
font-size:13px;
font-weight:800;
letter-spacing:.14em;
line-height:1;
}
.rirs-soon__flag::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:var(--rirs-navy);
animation:rirs-soon-pulse 1.8s ease-in-out infinite;
}
@keyframes rirs-soon-pulse{
0%,100%{transform:scale(1);opacity:1}
50%{transform:scale(.55);opacity:.45}
}
@media (prefers-reduced-motion:reduce){
.rirs-soon__flag::before{animation:none}
}
.rirs-soon__title{
margin:24px 0 0;
font-family:var(--rirs-font-display);
font-size:clamp(28px, 3.2vw, 42px);
line-height:1.12;
letter-spacing:-.01em;
font-weight:600;
color:#fff;
}
.rirs-soon__title em{
font-style:normal;
color:var(--rirs-gold);
}
.rirs-soon__lede{
margin:16px 0 0;
max-width:60ch;
font-size:15px;
line-height:1.65;
color:rgba(255,255,255,.82);
}
.rirs-soon__list{
list-style:none;
margin:24px 0 0;
padding:0;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px 32px;
}
.rirs-soon__list li{
position:relative;
padding-left:32px;
font-size:15px;
line-height:1.5;
color:rgba(255,255,255,.9);
}
.rirs-soon__list li::before{
content:"";
position:absolute;
left:0;
top:2px;
width:18px;
height:18px;
border-radius:50%;
background:rgba(239,202,97,.18);
box-shadow:inset 0 0 0 1px rgba(239,202,97,.5);
}
.rirs-soon__list li::after{
content:"";
position:absolute;
left:6px;
top:7px;
width:7px;
height:4px;
border-left:2px solid var(--rirs-gold);
border-bottom:2px solid var(--rirs-gold);
transform:rotate(-45deg);
}
.rirs-soon__actions{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:16px 24px;
margin:32px 0 0;
}
.rirs-soon__btn{
display:inline-flex;
align-items:center;
gap:8px;
padding:16px 32px;
border-radius:999px;
background:var(--rirs-gold);
color:var(--rirs-navy) !important;
font-family:var(--rirs-font-body);
font-size:15px;
font-weight:600;
line-height:1;
text-decoration:none !important;
border:0;
box-shadow:0 10px 24px rgba(0,0,0,.22);
transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.rirs-soon__btn:hover,
.rirs-soon__btn:focus-visible{
background:#f6d97e;
transform:translateY(-2px);
box-shadow:0 14px 30px rgba(0,0,0,.28);
color:var(--rirs-navy) !important;
}
.rirs-soon__btn::after{
content:"\2192";
font-size:17px;
line-height:1;
transition:transform .18s ease;
}
.rirs-soon__btn:hover::after{transform:translateX(3px)}
.rirs-soon__ghost{
display:inline-flex;
align-items:center;
padding:16px 24px;
border-radius:999px;
border:1px solid rgba(255,255,255,.34);
color:#fff !important;
font-size:15px;
font-weight:600;
line-height:1;
text-decoration:none !important;
transition:border-color .18s ease,background .18s ease;
}
.rirs-soon__ghost:hover,
.rirs-soon__ghost:focus-visible{
border-color:var(--rirs-gold);
background:rgba(255,255,255,.07);
color:#fff !important;
}
.rirs-soon__fine{
margin:24px 0 0;
font-size:13px;
line-height:1.6;
color:rgba(255,255,255,.62);
}
/* --- price rail --- */
.rirs-soon__rail{
display:flex;
flex-direction:column;
justify-content:center;
padding:48px 40px;
background:rgba(255,255,255,.07);
border-left:1px solid rgba(255,255,255,.14);
backdrop-filter:blur(2px);
}
.rirs-soon__pricelabel{
display:block;
font-size:13px;
font-weight:600;
letter-spacing:.14em;
color:rgba(255,255,255,.6);
}
.rirs-soon__price{
display:block;
margin:8px 0 0;
font-family:var(--rirs-font-display);
font-size:clamp(34px, 4.4vw, 42px);
font-weight:600;
line-height:1;
color:var(--rirs-gold);
letter-spacing:-.02em;
}
.rirs-soon__pricenote{
display:block;
margin:8px 0 0;
font-size:15px;
line-height:1.55;
color:rgba(255,255,255,.72);
}
.rirs-soon__meta{
margin:24px 0 0;
padding:24px 0 0;
border-top:1px solid rgba(255,255,255,.16);
display:grid;
gap:16px;
}
.rirs-soon__meta div{display:grid;gap:4px}
.rirs-soon__meta dt{
font-size:13px;
font-weight:600;
letter-spacing:.13em;
color:rgba(255,255,255,.55);
}
.rirs-soon__meta dd{
margin:0;
font-size:15px;
font-weight:600;
line-height:1.4;
color:#fff;
}
/* --- responsive --- */
@media (max-width:900px){
.rirs-soon__grid{grid-template-columns:1fr}
.rirs-soon__body{padding:40px 32px 32px}
.rirs-soon__rail{
border-left:0;
border-top:1px solid rgba(255,255,255,.14);
padding:32px;
}
.rirs-soon::before{background-size:620px auto;background-position:right -60px bottom -20px}
}
@media (max-width:600px){
.rirs-soon__body{padding:32px 24px 24px}
.rirs-soon__rail{padding:24px 24px}
.rirs-soon__list{grid-template-columns:1fr;gap:8px}
.rirs-soon__actions{gap:16px}
.rirs-soon__btn,
.rirs-soon__ghost{width:100%;justify-content:center}
.rirs-soon__lede{font-size:15px}
.rirs-soon::before{opacity:.12;background-size:520px auto}
}
/* =========================================================
33. RESERVED BATCHES ON THE CALENDAR
A contracted batch is real work and belongs on the
schedule, but it is not for sale. It reads as quieter than
a bookable row without looking broken or unavailable.
========================================================= */
.rirs-batchlist__row--reserved{
background:linear-gradient(90deg,rgba(28,110,164,.05) 0%,rgba(28,110,164,0) 62%);
box-shadow:inset 3px 0 0 var(--rirs-blue);
}
.rirs-batchlist__flag{
display:inline-block;
margin-left:8px;
padding:3px 8px;
border-radius:999px;
border:1px solid rgba(28,110,164,.34);
background:var(--rirs-blue-soft, rgba(28,110,164,.08));
color:var(--rirs-blue-dark);
font-family:var(--rirs-font-body);
font-size:13px;
font-weight:600;
letter-spacing:.09em;
line-height:1.5;
vertical-align:2px;
white-space:nowrap;
}
.rirs-batchlist__note{
margin-top:8px;
font-size:13px;
line-height:1.5;
color:var(--rirs-ink-faint);
max-width:56ch;
}
.rirs-batchlist__fee--quiet{
color:var(--rirs-ink-faint) !important;
font-weight:600 !important;
white-space:nowrap;
}
.rirs-batchlist__ask{
display:inline-flex;
align-items:center;
gap:8px;
font-family:var(--rirs-font-body);
font-size:15px;
font-weight:600;
line-height:1;
color:var(--rirs-blue) !important;
text-decoration:none !important;
white-space:nowrap;
border-bottom:1px solid rgba(28,110,164,.34);
padding-bottom:2px;
transition:color .16s ease,border-color .16s ease;
}
.rirs-batchlist__ask::after{
content:"\2192";
font-size:15px;
line-height:1;
}
.rirs-batchlist__ask:hover,
.rirs-batchlist__ask:focus-visible{
color:var(--rirs-blue-dark) !important;
border-color:var(--rirs-blue-dark);
}
.rirs-batchlist__state{
display:inline-block;
padding:8px 16px;
border-radius:999px;
background:var(--rirs-surface-2, #eaf3fa);
color:var(--rirs-ink-soft);
font-family:var(--rirs-font-body);
font-size:13px;
font-weight:600;
line-height:1.3;
white-space:nowrap;
}
@media (max-width:781px){
.rirs-batchlist__flag{
margin-left:0;
margin-top:8px;
display:block;
width:fit-content;
}
.rirs-batchlist__note{font-size:13px}
.rirs-batchlist__ask{white-space:normal}
}
/* =========================================================
34. THE ACCOUNT ICON IN THE TOP BAR
An unmarked circle is not an invitation to sign in, so the
signed-out icon carries a word next to it.
========================================================= */
.rirs-login-label{
margin-left:8px;
font-family:var(--rirs-font-body);
font-size:13px;
font-weight:600;
line-height:1;
color:inherit;
white-space:nowrap;
vertical-align:middle;
}
[data-id="account"] > a{
display:inline-flex;
align-items:center;
}
@media (max-width:419px){
.rirs-login-label{display:none}
}
/* =========================================================
35. THE TWO ITEMS ADDED TO THE ACCOUNT DROPDOWN
Blocksy styles its own dropdown entries through variables
that do not reach anything added later, so these carry
their own colour and spacing. Without it they are there but
invisible, which reads as an empty white box.
========================================================= */
[data-id="account"] .rirs-dash > a,
[data-id="account"] .rirs-out > a{
display:block;
padding:8px 24px;
font-family:var(--rirs-font-body);
font-size:15px;
font-weight:600;
line-height:1.4;
color:var(--rirs-ink) !important;
background:transparent;
text-decoration:none !important;
white-space:nowrap;
transition:color .15s ease,background .15s ease;
}
[data-id="account"] .rirs-dash > a:hover,
[data-id="account"] .rirs-out > a:hover,
[data-id="account"] .rirs-dash > a:focus-visible,
[data-id="account"] .rirs-out > a:focus-visible{
color:var(--rirs-blue) !important;
background:var(--rirs-bg-alt);
}
[data-id="account"] .rirs-dash,
[data-id="account"] .rirs-out{
list-style:none;
margin:0;
display:block;
}
[data-id="account"] ul.rirs-made{
margin:0;
padding:8px 0;
list-style:none;
}
/* Blocksy leaves the account dropdown links without a resting colour on
this install, so every entry was white on white and only appeared on
hover. Give them all a colour, not just the ones we add. */
[data-id="account"] .ct-header-account-dropdown a,
[data-id="account"] .ct-header-account-dropdown .ct-menu-link{
color:var(--rirs-ink) !important;
}
[data-id="account"] .ct-header-account-dropdown a:hover,
[data-id="account"] .ct-header-account-dropdown a:focus-visible{
color:var(--rirs-blue) !important;
}
/* =========================================================
36. MY LEARNING BELONGS IN THE MOBILE MENU
A seventh item pushed Training Calendar and Gallery into a
More dropdown for signed-in visitors, which is a poor trade
for a link the account menu already carries. It stays in
the mobile menu, where there is room and where the account
icon is fiddliest to reach.
========================================================= */
#header-menu-1 .rirs-learn-menu{
display:none !important;
}
.mobile-menu .rirs-learn-menu{
display:block;
}
/* ---------------------------------------------------------------------
* 38. EMPTY BAND COLLAPSE
*
* The Coming Soon band is a page section that holds a shortcode. When
* every announcement has retired itself the shortcode returns nothing
* and the section was left standing as 168px of empty tint. Collapse
* any band whose inner wrapper has no content.
* ------------------------------------------------------------------ */
.rirs-band:has( > .rirs-inner:empty ){
display:none;
}
/* ---------------------------------------------------------------------
* 39. HEADER: ONE ROW
*
* The account item moved out of the old top strip and now sits beside
* the cart. That costs width, and the main menu was spilling Gallery
* and Contact into a More dropdown. Tighten the menu spacing enough to
* hold all six items, and give the account icon room beside the cart.
* ------------------------------------------------------------------ */
#header-menu-1{
--menu-items-spacing:30px;
}
[data-column="end"] [data-id="account"]{
margin-left:4px;
}
/* ---------------------------------------------------------------------
* 40. ONE BUTTON SYSTEM
*
* The site's own buttons already agreed with each other. Tutor's course
* card buttons and the mini cart did not, so they are pulled onto the
* same metrics here rather than a new style being invented.
* ------------------------------------------------------------------ */
:root{
--rirs-btn-min-h:55px;
--rirs-btn-py:16px;
--rirs-btn-px:24px;
--rirs-btn-fs:15px;
}
a.rirs-btn-outline,
a.rirs-btn-ghost,
.list-item-button .tutor-btn,
body.single-courses .tutor-btn,
body.tutor-lms.woocommerce a.button,
body.tutor-lms.woocommerce button.button,
.ct-cart-actions .button,
.ct-cart-content .button{
min-height:var(--rirs-btn-min-h);
padding:var(--rirs-btn-py) var(--rirs-btn-px);
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
font-family:var(--rirs-font-display);
font-size:var(--rirs-btn-fs);
font-weight:600;
line-height:1.2;
letter-spacing:0;
border-radius:var(--rirs-radius);
text-align:center;
}
.list-item-button .tutor-btn{
width:100%;
}
/* ---------------------------------------------------------------------
* 41. WHY RIRS
*
* Replaces the Introduction / Mission / Vision cards. Eyebrow and
* heading on the left, four short reasons on the right. Every claim
* here is one the site already makes elsewhere.
* ------------------------------------------------------------------ */
.rirs-why{
display:grid;
grid-template-columns:minmax(0,0.9fr) minmax(0,1.3fr);
gap:48px;
align-items:start;
}
.rirs-why__title{
font-family:var(--rirs-font-display);
font-size:clamp(28px, 3.2vw, 42px);
font-weight:800;
line-height:1.12;
letter-spacing:-.01em;
color:var(--rirs-ink);
margin:8px 0 16px;
}
.rirs-why__lead{
margin:0 0 24px;
font-size:17px;
line-height:1.6;
color:var(--rirs-ink-soft);
max-width:40ch;
}
.rirs-why__list{
list-style:none;
margin:0;
padding:0;
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
gap:32px;
}
.rirs-why__item{
margin:0;
}
.rirs-why__icon{
width:48px;
height:48px;
border-radius:999px;
background:var(--rirs-blue-soft);
color:var(--rirs-blue);
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:16px;
}
.rirs-why__icon svg{
width:24px;
height:24px;
display:block;
}
.rirs-why__name{
font-family:var(--rirs-font-display);
font-size:17px;
font-weight:600;
line-height:1.3;
color:var(--rirs-ink);
margin:0 0 8px;
}
.rirs-why__note{
margin:0;
font-size:15px;
line-height:1.55;
color:var(--rirs-ink-soft);
}
@media (max-width: 999px){
.rirs-why{
grid-template-columns:1fr;
gap:32px;
}
.rirs-why__list{
gap:24px;
}
}
@media (max-width: 599px){
.rirs-why__list{
grid-template-columns:1fr;
}
}
/* ---------------------------------------------------------------------
* 42. PROGRAMME CARD ICONS
* ------------------------------------------------------------------ */
.rirs-course__icon{
width:48px;
height:48px;
border-radius:999px;
background:var(--rirs-blue-soft);
color:var(--rirs-blue);
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:16px;
}
.rirs-course__icon svg{
width:24px;
height:24px;
display:block;
}
/* The duration badge moves to the card corner so the icon can lead. */
.rirs-course{
position:relative;
}
.rirs-course .rirs-badge{
position:absolute;
top:24px;
right:24px;
margin:0;
}
.rirs-course__icon{
margin-top:0;
}
/* An eyebrow on a navy band needs the light blue, not the mid blue. */
.rirs-band--navy .rirs-eyebrow,
.rirs-band--navy .rirs-why__name{
color:#74c2ee;
}
/* ---------------------------------------------------------------------
* 45. HEADER END CLUSTER
*
* The cart icon sat on the row centre and the account icon sat 3px
* above it, because the account link laid its icon and label out on a
* text baseline. Everything in the cluster is centred here, both icons
* go up from 15px to 18px, and the phone loses its Call us prefix in
* favour of an icon.
* ------------------------------------------------------------------ */
[data-column="end"] [data-items]{
align-items:center;
}
[data-id="cart"],
[data-id="account"]{
display:flex;
align-items:center;
}
[data-id="account"] .ct-account-item,
[data-id="cart"] .ct-cart-item,
[data-id="cart"] a{
display:inline-flex;
align-items:center;
gap:8px;
line-height:1;
}
[data-id="cart"] .ct-icon,
[data-id="cart"] svg,
[data-id="account"] svg{
width:18px;
height:18px;
}
.rirs-login-label{
display:inline-flex;
align-items:center;
line-height:1;
}
[data-id="text"] p{
display:flex;
align-items:center;
gap:24px;
margin:0;
}
[data-id="text"] a[href^="tel:"]{
display:inline-flex;
align-items:center;
gap:8px;
line-height:1;
}
[data-id="text"] a[href^="tel:"]::before{
content:"";
flex:0 0 18px;
width:18px;
height:18px;
background-color:currentColor;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.2 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.2 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* ---------------------------------------------------------------------
* 46. PARTICIPANT FIELDS
*
* The profession text box is optional to WooCommerce so that it never
* blocks checkout while hidden, but it is required once it appears.
* Hiding the optional tag keeps the label honest.
* ------------------------------------------------------------------ */
#rirs_profession_other_field .optional{
display:none;
}
#rirs_title_field select,
#rirs_gender_field select,
#rirs_profession_field select{
width:100%;
}
/* The participant download link inside the dashboard widget. */
#rirs_batches .rirs-dashdl{
margin-top:6px;
font-size:12px;
}
/* --------------------------------------------------------------------------
23. A FULL-WIDTH HEADER, FLOATING OVER THE HERO
The header band used to stop at the 1290px container, leaving cream strips
down both sides while everything below it ran edge to edge. The background
moves to the row so it spans the window; the content stays on the same grid.
-------------------------------------------------------------------------- */
#header [data-row*="middle"] {
background-color: #fff;
}
#header [data-row*="middle"] > .ct-container {
background-color: transparent;
}
body.home #header {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 60;
transition: background-color .25s ease, box-shadow .25s ease;
}
body.home .rirs-hero {
padding-top: 76px;
/* Fill the screen down to the next-batch band, so the fold lands cleanly
on the strip below it. --rirs-fold is measured in the footer script and
covers the band plus the admin bar when one is showing. */
min-height: calc(100vh - var(--rirs-fold, 70px));
min-height: calc(100svh - var(--rirs-fold, 70px));
}
body.home:not(.rirs-stuck) #header [data-row*="middle"] {
background-color: transparent;
}
body.home:not(.rirs-stuck) #header [data-row*="middle"]::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 190px;
pointer-events: none;
background: linear-gradient( 180deg, rgba(6,18,35,.72) 0%, rgba(6,18,35,.42) 45%, rgba(6,18,35,0) 100% );
}
body.home #header [data-row*="middle"] > .ct-container {
position: relative;
z-index: 1;
}
body.home:not(.rirs-stuck) #header #header-menu-1 > li > a,
body.home:not(.rirs-stuck) #header [data-id="text"] p,
body.home:not(.rirs-stuck) #header [data-id="text"] a,
body.home:not(.rirs-stuck) #header [data-id="cart"] a,
body.home:not(.rirs-stuck) #header [data-id="account"] a,
body.home:not(.rirs-stuck) #header [data-id="trigger"] button {
color: #fff;
}
body.home:not(.rirs-stuck) #header [data-id="cart"] svg,
body.home:not(.rirs-stuck) #header [data-id="account"] svg,
body.home:not(.rirs-stuck) #header [data-id="trigger"] svg {
fill: currentColor;
color: #fff;
}
body.home:not(.rirs-stuck) #header [data-id="text"] a::before {
background-color: #fff;
}
body.home:not(.rirs-stuck) #header [data-id="text"] img {
background: #fff;
border-radius: 50%;
padding: 2px;
box-shadow: 0 0 0 1px rgba(255,255,255,.55);
}
body.home.rirs-stuck #header {
position: fixed;
background-color: #fff;
box-shadow: 0 1px 0 rgba(15,26,45,.07), 0 8px 24px rgba(15,26,45,.07);
}
body.admin-bar.home.rirs-stuck #header {
top: 32px;
}
@media (max-width: 782px) {
body.admin-bar.home.rirs-stuck #header {
top: 46px;
}
}
@media (max-width: 999px) {
body.home .rirs-hero {
padding-top: 68px;
}
}
/* The header text item wraps its content in .entry-content, which was picking
up the page's cream background and drawing a slab behind the badge. */
#header [data-id="text"] .entry-content {
background: transparent;
}
body.home:not(.rirs-stuck) #header ul.menu > li > .ct-menu-link,
body.home:not(.rirs-stuck) #header ul.menu > li > .ct-menu-link:hover,
body.home:not(.rirs-stuck) #header ul.menu > li > .ct-menu-link:focus,
body.home:not(.rirs-stuck) #header [data-id="text"] p,
body.home:not(.rirs-stuck) #header [data-id="text"] a,
body.home:not(.rirs-stuck) #header [data-id="cart"],
body.home:not(.rirs-stuck) #header [data-id="cart"] a,
body.home:not(.rirs-stuck) #header [data-id="cart"] .ct-cart-price,
body.home:not(.rirs-stuck) #header [data-id="account"] a {
color: #fff;
}
body.home:not(.rirs-stuck) #header ul.menu > li.current-menu-item > .ct-menu-link,
body.home:not(.rirs-stuck) #header ul.menu > li.current_page_item > .ct-menu-link {
color: #fff;
}
body.home:not(.rirs-stuck) #header .current-menu-item > .ct-menu-link::after,
body.home:not(.rirs-stuck) #header .current_page_item > .ct-menu-link::after {
background-color: #fff;
border-color: #fff;
}
/* The active item and the dropdown chevrons set their colour with more weight
than the rest of the menu, so the reversed state has to say so plainly. */
body.home:not(.rirs-stuck) #header ul.menu > li > .ct-menu-link,
body.home:not(.rirs-stuck) #header ul.menu > li.current-menu-item > .ct-menu-link,
body.home:not(.rirs-stuck) #header ul.menu > li.current_page_item > .ct-menu-link,
body.home:not(.rirs-stuck) #header ul.menu > li.current-menu-ancestor > .ct-menu-link {
color: #fff !important;
}
body.home:not(.rirs-stuck) #header ul.menu > li > .ct-menu-link .ct-icon,
body.home:not(.rirs-stuck) #header [data-id="cart"] .ct-icon,
body.home:not(.rirs-stuck) #header [data-id="account"] .ct-icon,
body.home:not(.rirs-stuck) #header [data-id="trigger"] .ct-icon {
fill: #fff !important;
}
/* Dropdown panels keep their own light background, so the links inside them
must stay dark whatever the bar above is doing. */
body.home #header .sub-menu .ct-menu-link {
color: #171d26 !important;
}
body.home #header .sub-menu .ct-icon {
fill: #171d26 !important;
}
/* --------------------------------------------------------------------------
24. GOOGLE REVIEWS SECTION
-------------------------------------------------------------------------- */
.rirs-reviews {
/* It sits inside a section that already has its own heading and padding. */
padding: 0;
}
.rirs-reviews__head {
text-align: center;
max-width: 640px;
margin: 4px auto 36px;
}
.rirs-reviews__eyebrow {
font-family: var(--rirs-font-display);
font-size: 13px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--rirs-blue);
margin: 0 0 8px;
}
.rirs-reviews__title {
margin: 0 0 16px;
}
.rirs-reviews__score {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 15px;
color: var(--rirs-ink-soft);
}
.rirs-reviews__num strong {
font-family: var(--rirs-font-display);
font-size: 18px;
color: var(--rirs-ink);
}
.rirs-reviews__sep {
color: var(--rirs-border);
}
.rirs-stars {
position: relative;
display: inline-block;
font-size: 19px;
line-height: 1;
letter-spacing: 3px;
color: #d9dee6;
white-space: nowrap;
}
.rirs-stars::before {
content: "\2605\2605\2605\2605\2605";
}
.rirs-stars::after {
content: "\2605\2605\2605\2605\2605";
position: absolute;
inset: 0;
width: var(--rirs-star-fill, 100%);
overflow: hidden;
color: var(--rirs-gold);
}
.rirs-stars--sm {
font-size: 15px;
letter-spacing: 2px;
}
.rirs-reviews__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: start;
}
.rirs-review {
background: var(--rirs-white);
border: 1px solid var(--rirs-border-soft);
border-radius: var(--rirs-radius-lg);
padding: 28px 26px;
box-shadow: var(--rirs-shadow-sm);
display: flex;
flex-direction: column;
gap: 14px;
height: 100%;
}
.rirs-reviews .rirs-review__text {
margin: 0;
padding: 0;
border: 0;
background: none;
font-style: normal;
font-size: 15.5px;
line-height: 1.65;
color: var(--rirs-ink-soft);
quotes: none;
}
.rirs-review__by {
margin: 0;
font-family: var(--rirs-font-display);
font-weight: 600;
font-size: 14.5px;
color: var(--rirs-ink);
}
/* Long reviews are clamped with a Read more toggle. No JavaScript: the
checkbox is visually hidden and the label drives the expansion. */
.rirs-review__toggle {
position: absolute;
opacity: 0;
pointer-events: none;
width: 1px;
height: 1px;
}
.rirs-review__body {
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rirs-review__toggle:checked ~ .rirs-review__body {
-webkit-line-clamp: unset;
overflow: visible;
}
.rirs-review__more {
display: inline-block;
margin-top: 8px;
font-size: 14.5px;
font-weight: 600;
color: var(--rirs-blue);
cursor: pointer;
}
.rirs-review__more::after {
content: "Read more";
}
.rirs-review__toggle:checked ~ .rirs-review__more::after {
content: "Show less";
}
.rirs-review__toggle:focus-visible ~ .rirs-review__more {
outline: 2px solid var(--rirs-blue);
outline-offset: 3px;
border-radius: 3px;
}
.rirs-review__foot {
display: flex;
align-items: center;
gap: 12px;
margin: auto 0 0;
padding-top: 4px;
}
.rirs-review__avatar {
flex: 0 0 auto;
width: 38px;
height: 38px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--rirs-blue-soft);
color: var(--rirs-blue-dark);
font-family: var(--rirs-font-display);
font-weight: 600;
font-size: 16px;
line-height: 1;
}
.rirs-review__src {
margin-left: auto;
display: flex;
align-items: center;
opacity: .85;
}
.rirs-reviews__links {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 24px;
margin: 40px 0 0;
}
.rirs-reviews__links .rirs-btn-outline {
text-decoration: none;
}
.rirs-reviews__write {
font-size: 15px;
color: var(--rirs-ink-faint);
text-decoration: underline;
text-underline-offset: 3px;
}
.rirs-reviews__write:hover {
color: var(--rirs-blue);
}
@media (max-width: 999px) {
.rirs-reviews__list {
grid-template-columns: 1fr;
gap: 16px;
}
.rirs-reviews__head {
margin-bottom: 32px;
}
.rirs-reviews__links {
flex-direction: column;
gap: 16px;
}
}
/* ============================================================
25. A batch that has already run
==========================================================*/
.rirs-batch-done {
display: inline-block;
font-family: var(--rirs-font-body);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--rirs-ink-soft);
background: var(--rirs-bg-alt);
border: 1px solid var(--rirs-border-soft);
border-radius: 999px;
padding: 5px 14px;
}
.rirs-batch-done__note {
margin-top: 20px;
font-size: 15px;
color: var(--rirs-ink-faint);
}
/* ============================================================
26. Online Courses, with nothing to list yet
==========================================================*/
.rirs-nocourse {
max-width: 640px;
margin: 8px auto 0;
padding: 36px 32px;
text-align: center;
background: var(--rirs-white);
border: 1px solid var(--rirs-border-soft);
border-radius: var(--rirs-radius);
box-shadow: var(--rirs-shadow-sm);
}
.rirs-nocourse__lead {
font-family: var(--rirs-font-display);
font-weight: 700;
font-size: 21px;
color: var(--rirs-ink);
margin: 0 0 10px;
}
.rirs-nocourse p {
margin: 0;
font-size: 16px;
line-height: 1.65;
color: var(--rirs-ink-soft);
}
/* ============================================================
27. Other upcoming batches, at the foot of a batch page
==========================================================*/
.rirs-otherbatches {
width: min(100%, 90vw);
max-width: 1290px;
margin: 64px auto 8px;
}
.rirs-otherbatches h2 {
font-family: var(--rirs-font-display);
font-weight: 700;
font-size: 26px;
letter-spacing: -0.01em;
color: var(--rirs-ink);
margin: 0 0 20px;
}
.rirs-otherbatches__all {
margin: 20px 0 0;
font-size: 15px;
}
.rirs-otherbatches__all a {
color: var(--rirs-blue);
font-weight: 600;
text-decoration: none;
}
.rirs-otherbatches__all a:hover {
text-decoration: underline;
}
/* ============================================================
28. A batch page has no photograph, so the slot carries facts
==========================================================*/
body.rirs-batch-page .woocommerce-product-gallery {
display: none !important;
}
.rirs-brief {
flex: 1 1 0;
min-width: 0;
align-self: flex-start;
background: var(--rirs-white);
border: 1px solid var(--rirs-border-soft);
border-radius: var(--rirs-radius);
box-shadow: var(--rirs-shadow-sm);
padding: 28px 30px;
}
.rirs-brief__title {
font-family: var(--rirs-font-display);
font-weight: 700;
font-size: 19px;
letter-spacing: -0.01em;
color: var(--rirs-ink);
margin: 0 0 10px;
}
.rirs-brief__title + .rirs-brief__title,
.rirs-brief__link + .rirs-brief__title {
margin-top: 26px;
padding-top: 24px;
border-top: 1px solid var(--rirs-border-soft);
}
.rirs-brief__lede {
margin: 0 0 12px;
font-size: 15.5px;
line-height: 1.65;
color: var(--rirs-ink-soft);
}
.rirs-brief__link {
margin: 0;
font-size: 15px;
}
.rirs-brief__link a {
color: var(--rirs-blue);
font-weight: 600;
text-decoration: none;
}
.rirs-brief__link a:hover {
text-decoration: underline;
}
.rirs-brief__steps {
margin: 0;
padding-left: 20px;
}
.rirs-brief__steps li {
margin: 0 0 10px;
font-size: 15.5px;
line-height: 1.65;
color: var(--rirs-ink-soft);
}
.rirs-brief__steps li:last-child {
margin-bottom: 0;
}
.rirs-brief__note {
margin: 18px 0 0;
padding-top: 16px;
border-top: 1px solid var(--rirs-border-soft);
font-size: 14.5px;
color: var(--rirs-ink-faint);
}
@media (max-width: 800px) {
.rirs-brief { padding: 22px 20px; }
}
/* -------------------------------------------------------------------------
29. Facts grid: a last row that is not full
---------------------------------------------------------------------- */
/* The hairlines between cells were the container background showing through
a 1px gap. That works while every row is full; a batch with four facts in
a three-column row left the tail painted as a solid grey block. The lines
are now drawn by each cell instead, so leftover space stays white. */
.rirs-facts { background: var(--rirs-white); }
.rirs-facts__item { box-shadow: 0 0 0 1px var(--rirs-border); }
/* -------------------------------------------------------------------------
30. Shop furniture on a batch page
---------------------------------------------------------------------- */
/* The Category line under the Book button is WooCommerce scaffolding: with a
single category it tells a visitor nothing, and it reads as a shop listing
on a page that is a dated training course. Blocksy prints it directly
rather than through the WooCommerce hook, so it is hidden here along with
the divider that sits immediately above it. */
body.rirs-batch-page .product_meta,
body.rirs-batch-page .ct-product-divider[data-id="divider_2"] { display: none; }