/* =========================== TrainingEra Group — Final Styles =========================== */ /* Design Tokens */ :root { --avocado: #798F68; --artichoke: #737F53; --mindful: #BCB8AD; --light_mindful: #E2E0D8; --charcoal: #1C1C1C; --offwhite: #F5F5F5; --header-h: 56px; --footer-h: 80px; /* reserve footer space to avoid layout shifts */ } /* =========================== Page Transition Fade =========================== */ /* This is the default state */ #main-content { opacity: 1; transition: opacity 0.25s ease; /* smooth fade over 250ms */ } /* When navigating, JS adds 'page-fading-out' to */ .page-fading-out #main-content { opacity: 0; } /* Disable transitions while the page is initializing to reduce jitter */ html.preload * { transition: none !important; animation: none !important; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; /* site is single-screen; never show scrollbars */ } /* =========================== BODY =========================== */ body { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 400; color: var(--charcoal); letter-spacing: 0.2px; background: #fff; display: flex; flex-direction: column; min-height: 100%; } main { flex: 1 0 auto; } /* Ensure seamless background under Who/What/Why */ #main-content { background: var(--mindful); } /* Skip link visibility on focus (moved from inline) */ .visually-hidden-focusable { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .visually-hidden-focusable:focus { position: static; width: auto; height: auto; padding: .5rem; background: #fff; outline: 2px solid #000; } /* (Removed tiny-overflow scrollbar hack to prevent any scrollbar flashes) */ /* =========================== HEADINGS =========================== */ h1, h2, h3 { font-family: 'Playfair Display', serif; font-weight: 400; letter-spacing: 0.3px; } h1 { line-height: 1.06; } h2 { line-height: 1.12; } /* =========================== HEADER =========================== */ /* Reserve header space and fade the injected markup in without layout shift */ #site-header { min-height: var(--header-h); opacity: 0; transition: opacity .2s ease; } #site-header.is-ready { opacity: 1; } .sqs-site-header { position: sticky; top: 0; z-index: 1000; min-height: var(--header-h); padding-block: 10px; padding-inline: 24px; display: flex; align-items: center; justify-content: space-between; background-color: var(--avocado); backdrop-filter: blur(6px); box-shadow: 0 2px 14px rgba(0, 0, 0, .08); } .sqs-site-header .brand { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 24px; color: var(--light_mindful); text-decoration: none; letter-spacing: 0.3px; line-height: 1; display: flex; align-items: center; } .sqs-site-header .nav { display: flex; gap: 28px; } /* Navigation links now match the logo color */ .sqs-site-header .nav a { font-family: 'Playfair Display', serif; font-weight: 500; font-size: 16px; color: var(--light_mindful); text-decoration: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); position: relative; padding-block: 8px; padding-inline: 2px; border: 0; letter-spacing: 0.3px; line-height: 1; transition: opacity .2s ease; } .sqs-site-header .nav a:hover { opacity: .86; } /* Active page underline also matches the logo color */ .sqs-site-header .nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--mindful); opacity: .95; } /* =========================== HERO =========================== */ .hero { position: relative; overflow: hidden; color: #fff; display: grid; place-items: center; text-align: center; min-height: 66vh; padding: 36px 0; /* If we switch to fallback, this image is painted via CSS var */ background-position: center center; background-size: cover; background-repeat: no-repeat; } .hero.home { background-image: linear-gradient( 160deg, var(--mindful) 0%, #9FA694 35%, #6C6E6B 70%, var(--charcoal) 100% ); } /* Fallback mode: only applied if video errors */ .hero.use-fallback { background-image: var(--hero-fallback), linear-gradient( 160deg, var(--mindful) 0%, #9FA694 35%, #6C6E6B 70%, var(--charcoal) 100% ); } /* Fade-in for video once ready */ .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0; /* start hidden to avoid flash/jitter */ transition: opacity .4s ease; /* smooth reveal */ } .hero.is-ready .hero-video { opacity: 1; } /* video becomes visible when ready */ .hero.use-fallback .hero-video { display: none; } .hero::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.30); z-index: 1; } .hero .container { position: relative; z-index: 2; } .hero h1 { font-size: clamp(36px, 6vw, 45px); } .hero .lead { font-size: clamp(16px, 2.2vw, 25px); } .hero h1, .hero .lead { color: var(--light_mindful); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); } @media (max-width: 900px) { .hero { min-height: 54vh; padding: 24px 0; } } /* Respect reduced motion (video is paused by JS; keep CSS neutral) */ @media (prefers-reduced-motion: reduce) { .hero-video { transition: none; } } /* =========================== BUTTONS =========================== */ .btn { display: inline-block; border-radius: 999px; padding: 12px 22px; background: var(--artichoke); color: var(--light_mindful); text-decoration: none; font-family: 'Inter', sans-serif; font-weight: 400; box-shadow: 0 8px 18px rgba(115, 127, 83, .25); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; margin-top: 8px; margin-bottom: 0; } .btn:hover { background: var(--avocado); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(121, 143, 104, .28); } /* =========================== INFO SECTION (WHO / WHAT / WHY) =========================== */ section.info { padding: 0; margin: 0; background: var(--mindful); /* Removed content-visibility / contain-intrinsic-size to avoid height swaps */ } /* Container wrapper */ .container { width: min(1300px, 92%); margin-inline: auto; } /* Grid layout */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 150px; row-gap: 12px; justify-items: center; align-items: center; min-height: 220px; } /* Center everything inside each column */ .grid-3 > div { text-align: center; } /* Header typography - applies ONLY to h2 */ section.info h2 { margin: 0 0 6px; font-weight: 600; font-size: clamp(22px, 2.2vw, 26px); } /* Body text typography - applies ONLY to p */ section.info p { margin: 0 0 6px; line-height: 1.45; font-weight: 300; } /* Ensure last element (e.g., button) has no extra spacing */ section.info .grid-3 > div > :last-child { margin-bottom: 0 !important; } /* =========================== RESPONSIVE ADJUSTMENTS =========================== */ @media (max-width: 1100px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .grid-3 { grid-template-columns: 1fr; } } /* =========================== FOOTER (two columns) =========================== */ /* Reserve footer space and fade injected markup in without shift */ /* Footer placeholder: reserve space, but hide it after injection */ #site-footer{ min-height: var(--footer-h); /* spacer to avoid CLS before inject */ opacity: 0; transition: opacity .2s ease; background: var(--charcoal); /* optional: match footer so no visible band pre-inject */ } #site-footer.is-ready{ opacity: 1; min-height: 0; /* <-- remove spacer once real footer is in */ } .site-footer { margin-top: auto; background: var(--charcoal); border-top: 1px solid rgba(226,224,216,.35); color: var(--light_mindful); font-family: Georgia, serif; font-size: 0.8rem; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .footer-inner { width: 100%; max-width: 2200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; align-items: start; justify-content: space-between; padding: 10px 20px; gap: 40px; } .footer-inner > div:first-child { justify-self: start; text-align: left; } .footer-inner > div:last-child { justify-self: end; text-align: left; } .site-footer h4 { margin: 0 0 2px; font-size: 14px; font-family: 'Playfair Display', serif; font-weight: 400; letter-spacing: 0.3px; } .site-footer p, .site-footer a { margin: 0; line-height: 1.3; font-size: 13px; color: var(--mindful); } .site-footer a { color: var(--offwhite); text-decoration: none; opacity: 0.9; font-weight: 400; } .site-footer a:hover { opacity: 1; text-decoration: underline; } /* Mobile footer layout */ @media (max-width: 860px) { .footer-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 10px 20px; gap: 24px; } .footer-inner > div { justify-self: center; } } /* =========================== HAMBURGER (inline SVG version) =========================== */ .te-navbar-toggle { margin-left: auto; background: transparent; padding: 6px; line-height: 0; cursor: pointer; /* a11y hit area */ min-width: 44px; min-height: 44px; border-radius: 8px; /* drives the SVG stroke color via `currentColor` */ color: var(--light_mindful); } .te-navbar-toggle:focus-visible { outline: 2px solid rgba(226,224,216,.9); outline-offset: 2px; } /* SVG sizing/feedback */ .te-navbar-toggle .te-burger { display: block; width: 28px; height: 20px; } .te-navbar-toggle:hover .te-burger, .te-navbar-toggle:focus-visible .te-burger { opacity: 0.9; } /* =========================== OFF-CANVAS (BRAND CHARCOAL + LIGHT TEXT) =========================== */ .bg-mindful { background: var(--charcoal) !important; } .offcanvas.bg-mindful { --bs-offcanvas-bg: var(--charcoal); --bs-offcanvas-color: var(--light_mindful); --bs-link-color: var(--light_mindful); --bs-nav-link-color: var(--light_mindful); background-color: var(--charcoal) !important; color: var(--light_mindful) !important; box-shadow: -14px 0 40px rgba(0,0,0,.28); } /* Backdrop polish */ .offcanvas-backdrop.show { backdrop-filter: blur(2px); } /* Close button visible on dark bg */ .btn-close-lightmindful { filter: invert(90%) sepia(5%) saturate(200%) hue-rotate(10deg) brightness(100%) contrast(95%); } /* Drawer title + general text color */ .offcanvas.bg-mindful .offcanvas-title, .offcanvas.bg-mindful .brand, .offcanvas.bg-mindful .nav-link, .offcanvas.bg-mindful a, .offcanvas.bg-mindful p, .offcanvas.bg-mindful li, .offcanvas.bg-mindful span { color: var(--light_mindful) !important; } /* Off-canvas title "Menu" should match brand typography */ .offcanvas .offcanvas-title.brand { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 24px; letter-spacing: 0.3px; line-height: 1; color: var(--light_mindful); } /* Divider under the drawer header (title area) */ .offcanvas.bg-mindful .offcanvas-header { border-bottom: 1px solid rgba(226,224,216,.35); margin-bottom: .25rem; } /* Drawer list layout + items */ .offcanvas .nav { gap: .25rem !important; } .offcanvas .nav-link { display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem; border-radius: .5rem; color: var(--light_mindful) !important; text-decoration: none; font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 500; text-shadow: none; transition: background .15s ease, opacity .15s ease; } /* Icon sizing/alignment */ .offcanvas .nav-link .bi { font-size: 1.1rem; width: 1.35rem; flex: 0 0 1.35rem; opacity: .95; } /* Soft brand-tinted hover box (and keyboard focus) */ .offcanvas .nav-link:hover, .offcanvas .nav-link:focus-visible { background: rgba(226,224,216,.12); background: color-mix(in srgb, var(--light_mindful) 12%, transparent); outline: 0; } /* Remove underline for current page inside the drawer */ .offcanvas .nav-link[aria-current="page"]::after { display: none !important; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .offcanvas { transition: none !important; } } /* =========================== MOBILE HEADER =========================== */ @media (max-width: 767px) { .sqs-site-header { padding: 10px 16px; } }