/*
* is the document scroll container - it must stay a normal block.
* Applying display:flex / height:100% to the root element previously broke
* viewport scrolling (window.scrollTo, native #anchor jumps, scroll-padding).
* The sticky-footer flex column belongs on only, sized with
* min-height so the body grows with its content instead of being capped.
*/
html {
height: 100%;
overflow-x: hidden;
scroll-behavior: smooth;
scroll-padding-top: 80px;
}
body {
min-height: 100%;
margin: 0;
font-family: 'Inter', 'Segoe UI', sans-serif;
line-height: 1.6;
display: flex;
flex-direction: column;
}
a {
color: var(--site-accent, #198754);
text-decoration: none;
}
a:hover, a:focus {
color: var(--site-accent-hover, #146c43);
text-decoration: none;
}
/* Navbar */
.navbar-brand img {
height: 55px;
}
/* Navbar tagline */
.navbar-brand {
min-width: 0; /* Allow flex children (tagline) to shrink for ellipsis */
}
.navbar-tagline {
display: block;
font-size: 0.65rem;
line-height: 1.2;
margin-top: 2px;
letter-spacing: 0.02em;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.navbar-brand .navbar-tagline--muted {
color: rgba(var(--site-nav-text-rgb, 255,255,255), 0.65);
}
.navbar-brand .navbar-tagline--primary {
color: rgba(var(--site-nav-text-rgb, 255,255,255), 1);
}
.navbar-brand .navbar-tagline--accent {
color: var(--site-accent, #198754);
}
@media (max-width: 575.98px) {
.navbar-tagline {
font-size: 0.75rem;
letter-spacing: 0;
}
}
@media (max-width: 400px) {
.navbar-brand img {
max-height: 40px !important;
}
}
@media (max-width: 330px) {
.navbar-brand img {
max-height: 30px !important;
}
}
@media (max-width: 275px) {
.navbar-brand img {
max-height: 20px !important;
}
}
.navbar {
position: relative;
z-index: 1050;
}
.booking-modal-offset {
padding-top: clamp(90px, 12vh, 7rem);
}
.booking-modal-offset .modal-dialog {
margin-top: 0;
}
.nav-link {
transition: color 0.3s ease-in-out, text-decoration 0.3s ease-in-out;
}
.navbar-nav {
align-items: center;
gap: 0.5rem;
}
.nav-language-flag {
width: 1rem;
height: 1rem;
min-width: 1rem;
max-width: 1rem;
min-height: 1rem;
max-height: 1rem;
object-fit: cover;
display: inline-block;
flex: 0 0 1rem;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
vertical-align: -0.125em;
}
.navbar .nav-link .nav-language-flag,
.navbar .dropdown-item .nav-language-flag {
width: 1rem !important;
height: 1rem !important;
min-width: 1rem !important;
max-width: 1rem !important;
min-height: 1rem !important;
max-height: 1rem !important;
}
@media (min-width: 992px) {
.dropdown-hover {
position: relative;
}
/* Hover bridge: the submenu sits ~0.15rem below the parent (see `top` on
.dropdown-hover > .dropdown-menu). Without a bridge, moving the cursor
across that gap leaves the parent's :hover region before reaching the
menu, so the menu closes. This invisible pseudo-element extends the
parent's hover area down over the gap. It only captures the pointer while
the parent is hovered, so it never blocks clicks on items below it. */
.dropdown-hover::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 0.6rem;
pointer-events: none;
}
.dropdown-hover:hover::after {
pointer-events: auto;
}
.dropdown-hover:hover > .dropdown-menu {
opacity: 1;
visibility: visible;
clip-path: inset(0 0 0 0 round 0.5rem);
transform: translateY(0);
pointer-events: auto;
transition:
opacity 0.38s ease,
transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
clip-path 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.dropdown-hover > .dropdown-menu {
display: block;
position: absolute;
right: 0;
left: auto;
top: calc(100% + 0.15rem);
transform: translateY(-10px);
width: auto;
min-width: fit-content;
max-width: 90vw;
white-space: nowrap;
padding: 1.5rem;
background-color: var(--site-nav-dropdown-bg, #1e1e1e);
border-radius: 0.5rem;
box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.35);
opacity: 0;
visibility: hidden;
clip-path: inset(0 0 100% 0 round 0.5rem);
transform-origin: top center;
will-change: opacity, transform;
pointer-events: none;
transition:
opacity 0.38s ease,
transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
clip-path 0.42s cubic-bezier(0.22, 1, 0.36, 1);
z-index: 9999;
}
.dropdown-column {
width: auto;
min-width: 13rem;
}
.dropdown-menu .dropdown-column {
padding: 0 1.25rem;
}
.dropdown-hover > .dropdown-menu:not(.mega-menu-2col):not(.mega-menu-3col) .mega-dropdown {
display: inline-flex;
flex-direction: column;
}
.dropdown-hover > .dropdown-menu:not(.mega-menu-2col):not(.mega-menu-3col) .dropdown-column {
min-width: 0;
}
.dropdown-hover .dropdown-header {
color: var(--site-accent, #198754);
font-weight: 600;
margin-bottom: 0.75rem;
text-align: left;
}
.dropdown-hover .dropdown-item {
color: var(--site-nav-dropdown-text, #e0e0e0);
font-size: 0.95rem;
padding: 0.25rem 0;
transition: color 0.3s ease-in-out;
}
.dropdown-hover .dropdown-item:hover {
color: var(--site-nav-dropdown-accent, var(--site-accent, #198754));
text-decoration: underline;
background-color: transparent;
}
/* Ensure Bootstrap click-toggled dropdowns are visible on desktop */
.navbar-nav .dropdown-menu.show {
opacity: 1;
visibility: visible;
clip-path: inset(0 0 0 0 round 0.5rem);
transform: translateY(0);
pointer-events: auto;
}
/* Bootstrap adds a `[data-bs-popper]` attribute when a dropdown is
click-toggled, which pulls in its built-in
`margin-top: var(--bs-dropdown-spacer)` (~2px). Our hover dropdowns are
positioned purely by `top:`, so on hover there is no such margin - meaning a
click shifted the open menu down ~2px versus its hover position (the "jump").
Zero the popper margin so click and hover resolve to the same spot. */
.dropdown-hover > .dropdown-menu,
.dropdown-hover > .dropdown-menu[data-bs-popper] {
margin-top: 0;
}
/* 2-column mega-menu: used when a dropdown has 4+ sections.
Two auto-sized grid columns so the menu shrink-wraps to its content and the
container's symmetric padding shows on BOTH edges. (A fixed max-width with
50%-wide nowrap columns made the wider right column overflow its box and eat
the right-edge padding.) */
.dropdown-hover > .dropdown-menu.mega-menu-2col {
min-width: 420px;
max-width: 90vw;
}
.mega-menu-2col .mega-dropdown {
display: grid !important;
grid-template-columns: repeat(2, max-content);
}
.mega-menu-2col .dropdown-column {
width: auto;
min-width: 0;
box-sizing: border-box;
}
/* Two-column layout for simple dropdowns with many items */
.dropdown-menu.dropdown-menu-columns {
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
min-width: 400px;
white-space: nowrap;
}
.dropdown-menu.dropdown-menu-columns > li {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
/* Three-column layout for dropdowns */
.dropdown-menu.dropdown-menu-columns-3 {
-webkit-columns: 3;
-moz-columns: 3;
columns: 3;
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
min-width: 600px;
white-space: nowrap;
}
.dropdown-menu.dropdown-menu-columns-3 > li {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
/* Three-column mega-menu layout: same auto-sized grid approach as 2col so the
menu shrink-wraps and padding stays symmetric on both edges. */
.dropdown-hover > .dropdown-menu.mega-menu-3col {
min-width: 630px;
max-width: 90vw;
}
.mega-menu-3col .mega-dropdown {
display: grid !important;
grid-template-columns: repeat(3, max-content);
}
.mega-menu-3col .dropdown-column {
width: auto;
min-width: 0;
box-sizing: border-box;
}
}
@media (max-width: 991.98px) {
.navbar-collapse {
text-align: center;
}
.site-navbar .navbar-collapse {
/* vh is the fallback; dvh tracks the live viewport so the menu stays
clear of the mobile browser's bottom toolbar (otherwise the last
items, e.g. login, get hidden behind it). */
max-height: calc(100vh - 5rem);
max-height: calc(100dvh - 5rem);
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding-bottom: 1rem;
}
/* During Bootstrap's expand/collapse height animation the inner content is
momentarily taller than the animating box. With overflow-y:auto active the
browser paints a scrollbar for that instant, which flickers in and out.
Keep overflow hidden while the menu is animating and only allow scrolling
once it is fully open (Bootstrap swaps .collapsing → .collapse.show on
transition end). */
.site-navbar .navbar-collapse.collapsing {
overflow: hidden;
}
.site-navbar .navbar-collapse.show {
overflow-y: auto;
}
.site-navbar .nav-item.dropdown > .dropdown-menu,
.site-navbar .site-theme-switcher > .dropdown-menu,
.site-navbar .site-user-menu > .dropdown-menu {
position: fixed;
left: 1rem;
right: 1rem;
top: 50%;
width: auto;
max-width: min(26rem, calc(100vw - 2rem));
margin: 0 auto;
max-height: min(80vh, 34rem);
max-height: min(80dvh, 34rem);
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding: 0.75rem;
background-color: var(--site-nav-dropdown-bg);
border: 1px solid rgba(var(--site-border-rgb), 0.65);
border-radius: 0.75rem;
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.35);
z-index: 1200;
inset-block-start: 50%;
inset-block-end: auto;
transform: translateY(calc(-50% - 0.75rem));
clip-path: inset(0 0 100% 0 round 0.75rem);
}
.site-navbar .dropdown-menu {
display: block;
background-color: transparent;
box-shadow: none;
border: none;
padding: 0;
max-width: 100%;
white-space: normal;
overflow: hidden;
max-height: 0;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
clip-path: inset(0 0 100% 0);
transform-origin: top center;
will-change: max-height, opacity, transform, clip-path;
transition:
max-height 0.65s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.4s ease,
transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
clip-path 0.45s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear 0.65s;
}
.dropdown-menu.dropdown-menu-columns,
.dropdown-menu.dropdown-menu-columns-3 {
-webkit-columns: 1;
-moz-columns: 1;
columns: 1;
}
.site-theme-menu {
min-width: 0;
}
.site-navbar .nav-item.dropdown > .dropdown-menu.show,
.site-navbar .site-theme-switcher > .dropdown-menu.show,
.site-navbar .site-user-menu > .dropdown-menu.show {
max-height: min(80vh, 34rem);
max-height: min(80dvh, 34rem);
transform: translateY(-50%);
clip-path: inset(0 0 0 0 round 0.75rem);
}
.site-theme-switcher .dropdown-toggle {
justify-content: center;
text-align: center;
}
.site-navbar .dropdown-menu.show,
.site-navbar .dropdown.show .dropdown-menu {
max-height: min(80vh, 34rem);
max-height: min(80dvh, 34rem);
opacity: 1;
visibility: visible;
transform: translateY(-50%);
clip-path: inset(0 0 0 0 round 0.75rem);
transition:
max-height 0.65s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.4s ease,
transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
clip-path 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.dropdown-menu .mega-dropdown {
display: flex;
flex-wrap: wrap;
padding: 0 1rem;
gap: 1.5rem;
justify-content: center;
}
.dropdown-menu .dropdown-column {
flex: 1 1 45%;
min-width: 200px;
text-align: center;
}
.site-navbar .dropdown-header {
padding-left: 0;
padding-right: 0;
color: var(--site-accent, #198754);
text-align: center;
margin-bottom: 0.75rem;
}
.site-navbar .dropdown-item {
color: white;
padding-left: 0;
padding-right: 0;
text-align: center;
transition: color 0.3s ease-in-out;
}
.site-navbar .dropdown-item:hover {
color: var(--site-nav-dropdown-accent, var(--site-accent, #198754));
text-decoration: underline;
background-color: transparent;
}
}
/* Jumbotron */
.jumbotron {
background: linear-gradient(rgba(33, 37, 41, 0.85), rgba(2, 31, 16, 0.85)), url('../images/background6.jpg') no-repeat center center;
background-size: cover;
padding: 4rem 1rem;
color: white;
text-align: center;
margin-bottom: 2rem;
}
.jumbotron .container {
position: relative;
z-index: 1;
padding: 2rem;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.45) 0%,
rgba(0, 0, 0, 0.25) 60%,
rgba(0, 0, 0, 0) 100%
);
border-radius: 8px;
}
.jumbotron .container::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 70%);
z-index: 0;
}
@media (max-width: 768px) {
.jumbotron {
background-attachment: scroll;
}
}
/* Cards */
.card {
border: none;
transition: box-shadow 0.2s ease;
background-color: #f8f9fa;
box-shadow: 0 0.125rem 0.4rem rgba(var(--site-accent-rgb, 25, 135, 84), 0.10);
}
/* Override Bootstrap shadow utilities to use theme colour */
.shadow-sm {
box-shadow: 0 0.125rem 0.4rem rgba(var(--site-accent-rgb, 25, 135, 84), 0.10) !important;
}
.shadow {
box-shadow: 0 0.5rem 1rem rgba(var(--site-accent-rgb, 25, 135, 84), 0.18) !important;
}
.shadow-lg {
box-shadow: 0 1rem 2rem rgba(var(--site-accent-rgb, 25, 135, 84), 0.22) !important;
}
/* Hover must use !important to override the shadow utility classes above */
.card-body {
background-color: #f8f9fa;
}
.card-title {
color: var(--site-heading, #004d00);
}
h5.fw-semibold {
font-weight: 600;
}
section i {
display: block;
margin-bottom: 0.5rem;
}
.btn-primary {
background-color: var(--site-accent, #198754);
border: none;
}
.btn-primary:hover {
background-color: var(--site-accent-hover, #146c43);
}
/* Footer */
main#main-content {
margin-bottom: 2.5rem;
}
footer {
background-color: var(--site-footer-bg, #333333);
}
footer a:hover {
color: var(--site-accent, #198754);
text-decoration: underline;
}
footer a, footer p {
color: var(--site-footer-text, #e0e0e0);
}
footer h6 {
color: var(--site-footer-text, #ffffff);
}
/* Footer presets - distinct visual treatments for the dynamic footer layout.
`padding`/`py-*` Bootstrap utilities carry !important, so the preset padding
overrides must too, or the preset appears to "do nothing". */
/* Minimal: centred, compact, understated headings. */
.footer-preset-minimal .row { justify-content: center; text-align: center; }
.footer-preset-minimal { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
.footer-preset-minimal .footer-widget h6 { font-size: .75rem; letter-spacing: .08em; opacity: .85; }
.footer-preset-minimal .footer-widget { margin-bottom: .5rem; }
/* Mega: roomy, large headings, dividers between stacked widgets. */
.footer-preset-mega { padding-top: 3rem !important; padding-bottom: 1.5rem !important; }
.footer-preset-mega .footer-widget h6 { font-size: 1.2rem; margin-bottom: 1rem; letter-spacing: .02em; }
.footer-preset-mega .footer-widget { margin-bottom: 1.5rem; }
.footer-preset-mega .footer-widget + .footer-widget { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 1rem; }
/* Theme-integrated footer. Colours come from the active theme palette
(--site-footer-bg/--site-footer-text), so the footer follows the site's
light/dark mode automatically. A "custom" footer background sets local
--ftr-bg/--ftr-text inline (with a readable light/dark text tone); the widget
markup keeps its .text-white classes and we recolour them to --ftr-text so a
light footer stays legible. */
.footer-themed {
--ftr-bg: var(--site-footer-bg, #212529);
--ftr-text: var(--site-footer-text, #ffffff);
background-color: var(--ftr-bg) !important;
color: var(--ftr-text);
}
.footer-themed h6,
.footer-themed .text-white,
.footer-themed a.text-white { color: var(--ftr-text) !important; }
.footer-themed .text-white-50 { color: var(--ftr-text) !important; opacity: .6; }
.footer-themed .btn-outline-light { color: var(--ftr-text); border-color: var(--ftr-text); }
.footer-themed .btn-outline-light:hover { background-color: var(--ftr-text); color: var(--ftr-bg); }
/* Footer bottom bar */
.footer-bottom-bar {
border-top: 1px solid rgba(var(--site-footer-text-rgb, 224, 224, 224), 0.2);
padding-top: 1rem;
margin-top: 1.5rem;
font-size: 0.85rem;
}
/* Footer divider */
hr.footer-divider {
border-top: 1px solid var(--site-border, #dee2e6);
}
/* Back to top button */
.footer-back-to-top {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--site-accent, #198754);
color: #fff;
border: none;
display: none;
align-items: center;
justify-content: center;
z-index: 1040;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
transition: opacity 0.2s;
}
.footer-back-to-top:hover { opacity: 0.85; }
/* Widget spacing within columns */
.footer-widget + .footer-widget { margin-top: 1.25rem; }
/* Business hours widget */
.footer-widget-hours dt { font-weight: 600; }
.footer-widget-hours dd { margin-bottom: 0.25rem; }
/* Footer logo */
.footer-logo { max-width: 180px; max-height: 60px; width: auto; height: auto; }
/* Newsletter signup widget */
.footer-newsletter-form .input-group { max-width: 320px; }
/* Utility */
.container.flex-grow-1 {
flex: 1;
}
hr.section-divider {
border-top: 2px solid #999;
width: 60px;
margin: 3rem auto;
}
.toast {
z-index: 1100;
}
/* Notification centre toast styles live in utilities.css so BOTH the public
site and the admin panel (which does not load style.css) render them. */
@keyframes fade-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
a, button, .nav-link, .dropdown-item {
outline: none;
}
a:focus-visible, button:focus-visible, .nav-link:focus-visible, .dropdown-item:focus-visible {
outline: 2px solid var(--site-focus, #198754);
outline-offset: 2px;
border-radius: 4px;
}
@media (max-width: 576px) {
.card-body p {
font-size: 0.95rem;
}
.jumbotron h1 {
font-size: 1.75rem;
}
.jumbotron p.lead {
font-size: 1rem;
}
footer .row {
flex-direction: column;
text-align: center;
}
}
.cert-badge {
height: 100px;
object-fit: contain;
border-radius: 8px;
transition: transform 0.3s ease;
}
.cert-badge:hover {
transform: scale(1.05);
}
.cert-item {
width: 150px;
min-width: 150px;
flex-shrink: 0;
}
.wolfhound-walk {
position: fixed;
bottom: 100px;
right: -200px;
z-index: 9999;
height: 120px;
animation: walkReverse 10s linear forwards;
display: none;
}
.wolfhound-walk.showing { display: block; }
.cursor-pointer { cursor: pointer; }
@keyframes walkReverse {
from { right: -200px; }
to { right: 100vw; }
}
#contact .form-control:focus {
border-color: var(--site-focus, #198754);
box-shadow: 0 0 0 0.25rem rgba(var(--site-focus-rgb, 25, 135, 84), 0.25);
}
#contact .btn-success {
transition: background-color 0.3s ease;
}
#contact-faq .accordion-button:focus {
box-shadow: 0 0 0 0.2rem rgba(var(--site-focus-rgb, 25, 135, 84), 0.25);
}
#contact-faq .accordion-button:not(.collapsed) {
background-color: rgba(var(--site-accent-rgb, 25, 135, 84), 0.1);
color: var(--site-heading, #004d00);
}
@keyframes fadeIn {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0); }
}
.emailDisplay a,
.phoneDisplay a {
text-decoration: none;
}
.emailDisplay a:hover,
.phoneDisplay a:hover {
text-decoration: underline;
}
.cms-text-justify {
text-align: justify;
}
.cms-gallery-img {
width: 100%;
height: 250px;
object-fit: cover;
}
/* Uploaded-video gallery items: play badge centred over the muted preview frame. */
.cms-gallery-video {
display: block;
}
/* Embed (YouTube/Vimeo) gallery items: provider icon placeholder in the grid;
the real sandboxed iframe is built only in the lightbox on demand. */
.cms-gallery-embed__icon {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 16 / 9;
background: #1a1a1a;
color: #fff;
font-size: 2.5rem;
border-radius: 0.375rem;
}
.cms-gallery-playbadge {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 3rem;
height: 3rem;
border-radius: 50%;
background: rgba(0, 0, 0, 0.55);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
pointer-events: none;
}
.cms-card-link-wrap {
display: block;
height: 100%;
border-radius: inherit;
}
.cms-card-link-wrap:hover,
.cms-card-link-wrap:focus {
text-decoration: none;
}
.cms-card-link-wrap > .card {
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
border: 1px solid rgba(var(--site-border-rgb, 222, 226, 230), 0.85);
}
.cms-card-link-wrap:hover > .card,
.cms-card-link-wrap:focus > .card {
transform: translateY(-4px);
box-shadow: 0 0.75rem 1.5rem rgba(var(--site-accent-rgb, 25, 135, 84), 0.18);
border-color: rgba(var(--site-accent-rgb, 25, 135, 84), 0.45);
}
.cms-card-link-wrap > .card::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow: inset 0 0 0 1px rgba(var(--site-accent-rgb, 25, 135, 84), 0);
transition: box-shadow 0.25s ease;
}
.cms-card-link-wrap:hover > .card::after,
.cms-card-link-wrap:focus > .card::after {
box-shadow: inset 0 0 0 1px rgba(var(--site-accent-rgb, 25, 135, 84), 0.22);
}
.cms-card-hover-lift {
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cms-card-hover-lift:hover,
.cms-card-hover-lift:focus-within {
transform: translateY(-4px);
box-shadow: 0 1rem 2rem rgba(var(--site-accent-rgb, 25, 135, 84), 0.16);
}
.py-6-cms {
padding-top: 5rem !important;
padding-bottom: 5rem !important;
}
.cms-surface-soft {
background: linear-gradient(180deg, rgba(var(--site-accent-rgb), 0.08), rgba(var(--site-surface-bg-rgb), 0.95));
}
.cms-surface-dark {
background: linear-gradient(180deg, var(--site-nav-bg), var(--site-footer-bg));
color: var(--site-nav-text);
}
.cms-surface-tint {
background: linear-gradient(180deg, rgba(var(--site-accent-rgb), 0.12), rgba(var(--site-surface-bg-rgb), 0.92));
}
.cms-content-card {
background: linear-gradient(180deg, rgba(var(--site-surface-hover-bg-rgb), 0.96), rgba(var(--site-surface-bg-rgb), 0.98));
border: 1px solid rgba(var(--site-border-rgb), 0.65);
box-shadow: 0 1rem 2rem rgba(17, 24, 39, 0.08);
}
.cms-legal-copy {
max-width: 72ch;
margin-inline: auto;
}
.cms-legal-copy p,
.cms-legal-copy li {
line-height: 1.8;
}
.cms-eyebrow {
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: 0.78rem;
font-weight: 700;
color: var(--site-accent, #198754);
}
@media (max-width: 991.98px) {
.site-navbar .navbar-collapse {
text-align: center;
}
.site-navbar .navbar-nav {
align-items: stretch;
gap: 0;
width: 100%;
}
.site-navbar .nav-item.dropdown {
width: 100%;
}
.site-navbar .dropdown-menu {
position: static !important;
transform: none !important;
width: min(100%, 38rem);
max-width: 100%;
margin: 0.25rem auto 0.75rem;
padding: 0.5rem 0;
background-color: rgba(var(--site-nav-bg-rgb), 0.38);
border-color: rgba(var(--site-nav-text-rgb), 0.18);
box-shadow: none;
}
.site-navbar .dropdown-menu .dropdown-item,
.site-navbar .dropdown-menu .dropdown-header {
text-align: center;
white-space: normal;
}
.site-navbar .mega-dropdown {
display: block !important;
}
.site-navbar .dropdown-column {
width: 100%;
min-width: 0;
padding: 0.25rem 0.75rem !important;
}
/* Authoritative closed-state collapse for mobile dropdowns.
A closed dropdown menu must add ZERO height under its parent. Several
earlier rules style `.dropdown-menu` regardless of `.show` - the stale
overlay base rule (`.nav-item.dropdown > .dropdown-menu`, padding 0.75rem
+ 1px border, specificity 0,4,0) and this block's own `padding: 0.5rem 0`
- so `max-height: 0` alone is not enough: with box-sizing:border-box the
vertical padding + border still render (~25px), leaving the "big gap" under
Adopt / Support Us. This `:not(.show)` selector (specificity 0,5,0) beats
them all and zeroes max-height, vertical padding, vertical border and
overflow for the closed state only. The `.show` rules restore the open box. */
.site-navbar .nav-item.dropdown > .dropdown-menu:not(.show),
.site-navbar .site-theme-switcher > .dropdown-menu:not(.show),
.site-navbar .site-user-menu > .dropdown-menu:not(.show) {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
border-top-width: 0;
border-bottom-width: 0;
overflow: hidden;
}
}
.cms-hero-section .cms-eyebrow {
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.cms-hero-panel {
background: rgba(var(--site-nav-bg-rgb), 0.45);
backdrop-filter: blur(3px);
border: 1px solid rgba(var(--site-border-rgb), 0.25);
border-radius: 1.5rem;
padding: 1.75rem;
}
.cms-price-card-featured {
position: relative;
transform: translateY(-6px);
}
.cms-price-card-featured::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
border: 2px solid rgba(var(--site-accent-rgb), 0.32);
pointer-events: none;
}
.cms-pricing-features ul {
padding-left: 1.1rem;
margin-bottom: 0;
}
.cms-pricing-features li + li {
margin-top: 0.45rem;
}
.cms-step-card .card-body,
.cms-price-card .card-body {
display: flex;
flex-direction: column;
}
.cms-step-number {
font-weight: 800;
font-size: 1.1rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.cms-steps-timeline {
position: relative;
padding-left: 1rem;
}
.cms-steps-timeline::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 1.05rem;
width: 2px;
background: rgba(var(--site-accent-rgb), 0.18);
}
.cms-step-timeline-item {
position: relative;
}
.cms-step-marker {
position: absolute;
left: 0;
top: 0;
width: 2.2rem;
height: 2.2rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
box-shadow: 0 0.75rem 1.5rem rgba(var(--site-accent-rgb), 0.18);
}
.cms-divider-wrap hr {
opacity: 1;
}
.cms-divider-label {
white-space: nowrap;
}
.cms-accordion-cards .accordion-button:not(.collapsed) {
background-color: rgba(var(--site-accent-rgb), 0.12);
color: var(--site-heading);
box-shadow: none;
}
.theme-accent,
.theme-accent-text,
.theme-accent-icon {
color: var(--site-accent) !important;
}
.theme-muted {
color: rgba(var(--site-body-text-rgb), 0.78) !important;
}
.theme-surface {
background-color: var(--site-surface-bg) !important;
color: var(--site-body-text) !important;
border-color: rgba(var(--site-border-rgb), 0.65) !important;
}
.theme-surface-soft {
background: linear-gradient(180deg, rgba(var(--site-accent-rgb), 0.08), rgba(var(--site-surface-bg-rgb), 0.98)) !important;
color: var(--site-body-text) !important;
border-color: rgba(var(--site-border-rgb), 0.65) !important;
}
.theme-surface-section {
background-color: var(--site-surface-bg) !important;
color: var(--site-body-text) !important;
border: 1px solid rgba(var(--site-border-rgb), 0.65);
}
.theme-card {
background-color: var(--site-surface-bg) !important;
color: var(--site-body-text) !important;
border: 1px solid rgba(var(--site-border-rgb), 0.65) !important;
}
a .theme-card {
transition: box-shadow 0.2s ease;
}
a:hover .theme-card {
box-shadow: 0 .5rem 1rem rgba(var(--site-accent-rgb), 0.25) !important;
}
.theme-card-footer {
background-color: rgba(var(--site-body-bg-rgb), 0.48) !important;
color: var(--site-body-text) !important;
border-color: rgba(var(--site-border-rgb), 0.65) !important;
}
.theme-border-accent {
border-color: var(--site-accent) !important;
}
.theme-overlay-surface {
background: rgba(var(--site-body-bg-rgb), 0.76) !important;
color: var(--site-body-text) !important;
}
.theme-event-dot {
width: 0.8rem;
height: 0.8rem;
border-radius: 999px;
display: inline-block;
background: var(--event-dot-color, var(--site-accent));
border: 1px solid rgba(var(--site-border-rgb), 0.55);
flex: 0 0 0.8rem;
}
.cms-builder-heading {
padding-top: 0.25rem;
border-top: 1px solid rgba(0, 0, 0, 0.06);
margin-top: 1rem;
}
.cms-builder-heading:first-child {
border-top: 0;
margin-top: 0;
padding-top: 0;
}
/* Collapsible field-group members (Section Design / Advanced). A dedicated
class - kept separate from Bootstrap's .d-none, which applyDependsOn() owns -
so group-collapse and conditional-field visibility never clobber each other.
A member is visible only when it has neither class. */
.cms-group-hidden { display: none !important; }
.social-icons a {
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
.social-icons a:hover {
text-decoration: none;
}
.social-icons a:hover {
transform: scale(1.1);
transition: transform 0.2s ease-in-out;
}
.fade-in-section {
opacity: 0;
transform: translateY(20px);
animation: fadeIn 0.8s ease-out forwards;
}
@keyframes fadeIn {
100% {
opacity: 1;
transform: translateY(0);
}
}
.badge.bg-secondary.text-decoration-none:hover {
color: inherit;
text-decoration: none;
}
a.badge:hover {
text-decoration: none;
color: inherit;
}
/* Keep Font Awesome glyphs inline and centered inside badges.
Overrides the broad `section i { display:block; margin-bottom }` rule,
whose bottom margin otherwise pushes the icon off-centre in flex badges. */
.badge > .fas,
.badge > .far,
.badge > .fab,
.badge > .fa-solid,
.badge > .fa-regular,
.badge > .fa-brands {
display: inline-block;
line-height: 1;
margin-bottom: 0;
}
#searchTerms {
max-width: 100%;
}
@media (max-width: 576px) {
#searchTerms {
width: 90%;
}
.list-group {
font-size: 0.9rem;
}
}
#backToTop {
display: none;
}
mark {
background-color: #ffc107;
color: black;
padding: 0 2px;
border-radius: 3px;
}
.letter-link {
text-decoration: none;
}
.letter-link:hover {
text-decoration: underline;
}
#sidebarLetters {
max-height: 80vh;
overflow-y: auto;
}
@media (max-width: 768px) {
#sidebarLetters {
max-height: none;
overflow: visible;
}
}
h2.highlight {
background-color: rgba(var(--site-accent-rgb, 25, 135, 84), 0.12);
transition: background-color 0.6s ease;
padding: 5px 10px;
border-radius: 5px;
}
#quiz-container, #result-container {
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
#progress-bar-inner {
transition: width 0.4s;
}
#quiz-container .card {
box-shadow: none !important;
transition: none !important;
transform: none !important;
border: 1px solid #ddd;
}
#quiz-container .card:hover,
#quiz-container .card:focus,
#quiz-container .card:active {
box-shadow: none !important;
transition: none !important;
transform: none !important;
}
.logo-animate {
position: relative;
display: inline-block;
line-height: 0;
overflow: hidden;
}
.logo-animate::after {
content: '';
position: absolute;
top: 25%;
left: 0;
width: 40%;
height: 50%;
background: radial-gradient(
ellipse at center,
rgba(0, 255, 135, 0.55) 0%,
rgba(0, 120, 60, 0.25) 60%,
rgba(0, 150, 75, 0) 100%
);
transform: translateX(0%) skewX(-20deg);
animation: logoSweepX 2.2s ease-out 1 forwards;
pointer-events: none;
z-index: 1;
filter: blur(2px);
border-radius: 50%;
}
.logo-animate::after {
will-change: transform, opacity;
}
@keyframes logoSweepX {
0% {
transform: translateX(0%) skewX(-20deg);
opacity: 0.3;
}
50% {
opacity: 0.9;
}
100% {
transform: translateX(100%) skewX(-20deg);
opacity: 0;
display: none;
}
}
.navbar {
position: relative;
z-index: 1050;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.profile-photo-absolute {
position: static;
margin-bottom: 2rem;
text-align: center;
}
@media (min-width: 768px) {
.profile-photo-absolute {
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%);
margin-bottom: 0;
text-align: left;
}
}
.profile-photo-wrapper {
max-width: clamp(180px, 30vw, 250px);
margin: 0 auto;
}
.profile-photo {
width: 100%;
height: auto;
border-radius: 50% / 40%;
object-fit: cover;
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
border: 5px solid #fff;
background-color: #fff;
}
@media (max-width: 767.98px) {
.profile-photo-wrapper {
max-width: 180px;
}
}
.bio-text-container {
margin-left: 0;
position: relative;
}
@media (min-width: 768px) {
.bio-text-container {
margin-left: 300px;
}
}
.bio-logo-background {
position: absolute;
top: 50%;
left: 50%;
width: 80%;
opacity: 0.07;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 0;
}
.bio-text-overlay {
position: relative;
z-index: 1;
text-align: justify;
}
.list-group-item:hover {
background-color: #e6f4ea;
transition: background-color 0.3s ease;
}
.list-group-item:hover .fa-check-circle {
transform: scale(1.2) rotate(10deg);
transition: transform 0.3s ease;
}
#quiz-container, #result-container {
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
#progress-bar-inner {
transition: width 0.5s ease;
}
#quiz-container .card,
#result-container .card {
box-shadow: none !important;
transition: none !important;
transform: none !important;
border: 1px solid #ddd;
background-color: #fff;
}
#continue-extended-container {
margin-top: 30px;
animation: fadeIn 1s ease forwards;
opacity: 0;
}
@keyframes fadeIn {
to { opacity: 1; }
}
#progress-bar {
height: 20px;
}
#progress-bar-inner {
height: 100%;
}
.card {
border: 1px solid #e1e5eb;
border-radius: 0.5rem;
transition: none;
box-shadow: none;
}
#quiz-container .btn, #result-container .btn {
min-width: 120px;
}
#email-form input[type="email"] {
max-width: 400px;
margin: 0 auto;
}
.list-group-item input[type="radio"],
.list-group-item input[type="checkbox"] {
display: none;
}
.list-group-item {
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
}
.list-group-item.active {
background-color: var(--site-accent, #198754) !important;
color: var(--site-on-accent, #fff) !important;
border-color: var(--site-accent, #198754) !important;
}
.list-group-item:hover {
background-color: rgba(var(--site-accent-rgb, 25, 135, 84), 0.12);
color: var(--site-body-text, #000);
}
#progress-bar-inner {
background-color: var(--site-accent, #198754) !important;
}
.form-check-input:checked {
background-color: var(--site-accent, #198754) !important;
border-color: var(--site-accent, #198754) !important;
}
.form-check-input:checked:focus {
box-shadow: 0 0 0 0.2rem rgba(var(--site-focus-rgb, 25, 135, 84), 0.25);
}
.form-check-label {
color: var(--site-body-text, #212529);
}
/* Auth Pages (Login, Forgot Password, Reset Password)
Modern refresh (PR9): roomier card, segmented-control method picker,
generous spacing. The previous look had crowded nav-pills and dense
input groups; now the sign-in surface reads more like a focused dialog. */
.auth-section {
min-height: 70vh;
margin: 0 calc(-0.5 * var(--bs-gutter-x, 0px));
padding-left: calc(0.5 * var(--bs-gutter-x, 0px));
padding-right: calc(0.5 * var(--bs-gutter-x, 0px));
background:
radial-gradient(ellipse at top, rgba(25, 135, 84, 0.06), transparent 60%),
radial-gradient(ellipse at bottom, rgba(13, 110, 253, 0.04), transparent 60%);
}
.auth-card {
max-width: 460px;
border-radius: 16px;
}
.auth-card .card-body {
padding: 2.25rem 2rem;
}
@media (min-width: 768px) {
.auth-card .card-body {
padding: 2.5rem 2.5rem;
}
}
.auth-card h1 {
letter-spacing: -0.01em;
}
.auth-card .nav-pills {
background: rgba(0, 0, 0, 0.035);
border-radius: 10px;
padding: 0.25rem;
gap: 0.25rem;
display: grid;
grid-template-columns: 1fr;
}
.auth-card .nav-pills.methods-2 { grid-template-columns: 1fr 1fr; }
.auth-card .nav-pills.methods-3 { grid-template-columns: 1fr 1fr 1fr; }
.auth-card .nav-pills.methods-4 { grid-template-columns: 1fr 1fr; }
.auth-card .nav-pills .nav-link {
border-radius: 7px;
padding: 0.55rem 0.75rem;
color: var(--site-body-text, #212529);
font-weight: 500;
font-size: 0.9rem;
text-align: center;
transition: background-color 120ms ease, color 120ms ease;
}
.auth-card .nav-pills .nav-link.active {
background-color: var(--bs-body-bg, #fff);
color: var(--bs-success, #198754);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.auth-card .form-label {
font-weight: 500;
font-size: 0.9rem;
margin-bottom: 0.4rem;
}
.auth-card .input-group-text {
background-color: var(--bs-body-bg, #fff);
color: var(--bs-secondary, #6c757d);
}
.auth-card .form-control {
padding-top: 0.6rem;
padding-bottom: 0.6rem;
}
.auth-card .btn {
border-radius: 8px;
}
.auth-card .btn-success {
font-weight: 600;
padding-top: 0.7rem !important;
padding-bottom: 0.7rem !important;
}
.auth-card .btn-outline-dark {
border-color: rgba(0, 0, 0, 0.15);
}
.auth-card-narrow {
max-width: 420px;
border-radius: 16px;
}
[data-bs-theme="dark"] .auth-section {
background:
radial-gradient(ellipse at top, rgba(25, 135, 84, 0.10), transparent 60%),
radial-gradient(ellipse at bottom, rgba(13, 110, 253, 0.07), transparent 60%);
}
[data-bs-theme="dark"] .auth-card .nav-pills {
background: rgba(255, 255, 255, 0.05);
}
[data-bs-theme="dark"] .auth-card .nav-pills .nav-link.active {
background-color: rgba(255, 255, 255, 0.08);
}
.js-custom-form-wrapper {
border-radius: 12px;
overflow: hidden;
}
.auth-code-input {
letter-spacing: 0.3em;
font-family: monospace;
font-size: 1.5rem;
}
.auth-code-input-sm {
letter-spacing: 0.5em;
font-family: monospace;
}
.auth-code-display {
letter-spacing: 0.15em;
}
.auth-strength-bar {
height: 4px;
border-radius: 2px;
transition: all 0.3s;
width: var(--strength-width, 0%);
}
.auth-icon-lg {
font-size: 2.5rem;
}
.auth-icon-xl {
font-size: 4rem;
}
/* 1. Kill the internal FullCalendar font-face mapping */
.fc-icon {
font-family: 'Font Awesome 7 Pro' !important; /* Force a CSP-compliant font */
font-weight: 900 !important;
font-style: normal !important;
}
/* 2. Manually map the internal icon codes to FontAwesome glyphs */
.fc-icon-chevron-left:before { content: "\f053" !important; }
.fc-icon-chevron-right:before { content: "\f054" !important; }
.fc-icon-chevrons-left:before { content: "\f100" !important; }
.fc-icon-chevrons-right:before { content: "\f101" !important; }
/* 3. Hide the hidden font-face trigger if the browser is still being stubborn */
@font-face {
font-family: 'fcicons';
src: url(data:application/x-font-ttf;base64,AAEAAAALAIAAAwAwT1MvMg8SBfAAAAC8AAAAYGNtYXAXVtKNAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZgYydxIAAAF4AAAFNGhlYWQUJ7cIAAAGrAAAADZoaGVhB20DzAAABuQAAAAkaG10eCIABhQAAAcIAAAALGxvY2ED4AU6AAAHNAAAABhtYXhwAA8AjAAAB0wAAAAgbmFtZXsr690AAAdsAAABhnBvc3QAAwAAAAAI9AAAACAAAwPAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpBgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6Qb//f//AAAAAAAg6QD//f);
font-weight: normal;
font-style: normal;
font-display: block;
}
/* Public theme overrides */
:root {
--site-accent: #198754;
--site-accent-hover: #146c43;
--site-accent-rgb: 25, 135, 84;
--site-accent-hover-rgb: 20, 108, 67;
--site-body-bg: #ffffff;
--site-body-text: #212529;
--site-body-text-rgb: 33, 37, 41;
--site-surface-bg: #f8f9fa;
--site-surface-bg-rgb: 248, 249, 250;
--site-surface-hover-bg: #ffffff;
--site-surface-hover-bg-rgb: 255, 255, 255;
--site-heading: #004d00;
--site-heading-rgb: 0, 77, 0;
--site-nav-bg: #212529;
--site-nav-bg-rgb: 33, 37, 41;
--site-nav-text: #ffffff;
--site-nav-text-rgb: 255, 255, 255;
--site-nav-dropdown-bg: #1e1e1e;
--site-nav-dropdown-bg-rgb: 30, 30, 30;
--site-nav-dropdown-text: #e0e0e0;
--site-nav-dropdown-text-rgb: 224, 224, 224;
--site-footer-bg: #333333;
--site-footer-bg-rgb: 51, 51, 51;
--site-footer-text: #e0e0e0;
--site-footer-text-rgb: 224, 224, 224;
--site-border: #dee2e6;
--site-border-rgb: 222, 226, 230;
--site-focus: #198754;
--site-focus-rgb: 25, 135, 84;
--site-navbar-toggler-filter: none;
--site-hero-overlay-start: rgba(33, 37, 41, 0.88);
--site-hero-overlay-end: rgba(25, 135, 84, 0.58);
--site-theme-transition: 180ms ease;
}
html,
body {
background-color: var(--site-body-bg);
color: var(--site-body-text);
}
.text-muted,
.text-body-secondary {
color: rgba(var(--site-body-text-rgb), 0.78) !important;
}
.text-secondary {
color: rgba(var(--site-body-text-rgb), 0.82) !important;
}
.bg-light {
background-color: var(--site-surface-bg) !important;
color: var(--site-body-text);
}
.card {
background-color: var(--site-surface-bg);
color: var(--site-body-text);
border-color: rgba(var(--site-border-rgb), 0.65);
}
.card-header,
.card-footer {
background-color: rgba(var(--site-body-bg-rgb), 0.48);
border-color: rgba(var(--site-border-rgb), 0.65);
color: inherit;
}
.card-header.bg-white,
.card-footer.bg-white {
color: #212529;
}
/* Dark mode: hardcoded `bg-white` card headers/footers (e.g. the MyAccount
dashboard cards) must follow the theme, not stay white. Bootstrap's .bg-white
utility is `!important`, so the override has to be too. */
[data-bs-theme="dark"] .card-header.bg-white,
[data-bs-theme="dark"] .card-footer.bg-white {
background-color: rgba(var(--site-body-bg-rgb), 0.48) !important;
color: var(--site-body-text);
}
body,
.card,
.accordion-item,
.dropdown-menu,
.list-group-item,
.cookie-consent-banner {
transition:
background-color var(--site-theme-transition),
border-color var(--site-theme-transition),
color var(--site-theme-transition),
box-shadow var(--site-theme-transition);
}
main,
section,
.container,
.card-body,
.accordion-body {
color: inherit;
}
h1,
h2,
h3,
h4,
h5,
h6,
.card-title {
color: var(--site-heading);
}
.modal-header .modal-title,
.offcanvas-header .offcanvas-title {
color: inherit;
}
a {
color: var(--site-accent);
}
a:hover,
a:focus {
color: var(--site-accent-hover);
}
.text-success,
.text-success-emphasis,
.text-primary,
.text-primary-emphasis {
color: var(--site-accent) !important;
}
i.text-success,
i.text-success-emphasis,
i.text-primary,
i.text-primary-emphasis,
.fas.text-success,
.far.text-success,
.fab.text-success,
.fas.text-primary,
.far.text-primary,
.fab.text-primary {
color: var(--site-accent) !important;
}
.site-navbar,
.site-navbar.navbar-dark.bg-dark {
background-color: var(--site-nav-bg) !important;
position: sticky;
top: 0;
z-index: 1080;
}
/* Bootstrap modals must render above the sticky site navbar (z-index 1080).
Defaults are 1055/1050 which leaves the modal header hidden behind the navbar. */
.modal {
z-index: 1090;
}
.modal-backdrop {
z-index: 1085;
}
/* Policy PDF embed in the View modal - give the