/* ==========================================================================
OERL ENHANCE — premium foundation layer
Loaded LAST (after main.css) so its declarations win.
Sections: 1) BRAND PALETTE 2) THEME / DARK MODE 3) LOGO & HEADER
4) COMPONENT POLISH 5) FAQ ACCORDION 6) UTILITIES
Brand: Primary #3fa3d7 Secondary #fa6c20
========================================================================== */
/* ==========================================================================
1) BRAND PALETTE
The stock template shipped a navy (#191d88) primary + amber (#f7a400)
secondary that were never replaced with the real OERL brand. We rewire the
*accent* range of each tonal scale to the brand hues. The deep 700–900
navies and the dedicated --tg-heading-color are intentionally left alone so
dark sections, footers and heading text keep their premium depth & contrast.
========================================================================== */
:root {
/* Primary — OERL blue */
--tg-theme-primary-50: #eef7fc;
--tg-theme-primary-100: #cfeaf7;
--tg-theme-primary-200: #a6d8ef;
--tg-theme-primary-300: #78c3e6;
--tg-theme-primary-400: #55b1dd;
--tg-theme-primary-500: #3fa3d7; /* brand */
--tg-theme-primary-600: #2f8fc4; /* hover / darker fill */
/* 700–900 kept as the original deep navies for dark surfaces */
/* Secondary — OERL orange */
--tg-theme-secondary-50: #fff3ec;
--tg-theme-secondary-100: #ffe0cf;
--tg-theme-secondary-200: #fdc0a0;
--tg-theme-secondary-300: #fca173;
--tg-theme-secondary-400: #fb8546;
--tg-theme-secondary-500: #fa6c20; /* brand */
--tg-theme-secondary-600: #e85a12; /* hover / darker fill */
--tg-theme-secondary-700: #c1490d;
--tg-theme-secondary-800: #8f370b;
--tg-theme-secondary-900: #5f2507;
/* Base aliases used by some components */
--tg-theme-primary: #3fa3d7;
--tg-theme-secondary: #fa6c20;
/* Deeper brand tints used by the enhance layer for accessible text-on-white */
--oerl-primary-ink: #1f6f9e; /* AA on white for links / small text */
--oerl-secondary-ink: #c1490d;
--oerl-primary-soft: #eef7fc;
--oerl-secondary-soft: #fff3ec;
}
/* In dark mode, lift the accents slightly so they read on dark surfaces. */
[data-bs-theme="dark"] {
--tg-theme-primary-500: #57b4e2;
--tg-theme-primary-600: #3fa3d7;
--tg-theme-secondary-500: #ff7d38;
--tg-theme-secondary-600: #fa6c20;
--tg-theme-primary: #57b4e2;
--tg-theme-secondary: #ff7d38;
--oerl-primary-ink: #7cc6ea;
--oerl-secondary-ink: #ff9a63;
}
/* Solid brand-blue bands that carry white text. The stock template filled
these with the old navy primary; #3fa3d7 alone would drop white text below
AA, so we use a premium deep→brand gradient that keeps contrast on the
(left-aligned) copy while staying unmistakably OERL blue. */
.banner-two-col.home-10,
.choose__area-four,
.operating__box,
.request__content-two,
.call-back-wrap,
.testimonial__area-two,
.testimonial__area-three {
background-color: #124a68 !important;
background-image: linear-gradient(120deg, #103b56 0%, #1c6a97 46%, var(--tg-theme-primary-500) 100%) !important;
}
/* Tailwind utility overrides that are used inline throughout the markup and
were previously resolving to the stock amber/navy. */
.text-secondary {
color: var(--tg-theme-secondary-500) !important;
}
.text-primary {
color: var(--tg-theme-primary-500) !important;
}
a.text-secondary:hover {
color: var(--tg-theme-secondary-600) !important;
}
/* Selection + accent colour follow the brand. */
::selection {
background: var(--tg-theme-primary-500);
color: #fff;
}
:root {
accent-color: var(--tg-theme-primary-500);
}
/* ==========================================================================
2) THEME / DARK MODE (complete rebuild)
The stock template only shipped ~19 dark rules and left hard-coded
white, so text flipped light while surfaces stayed white → invisible. We set
real dark surfaces, layer cards/forms/tables, and keep AA contrast.
========================================================================== */
:root {
--oerl-surface: #ffffff;
--oerl-surface-2: #f6f8fc;
--oerl-border-soft: var(--tg-border-1);
}
[data-bs-theme="dark"] {
color-scheme: dark;
/* Our brand :root re-defined the light accent tints; they out-cascade the
template's dark remap, so restore dark-appropriate tints for surfaces. */
--tg-theme-primary-50: #0e1832;
--tg-theme-primary-100: #16224a;
--tg-theme-secondary-50: #1e1408;
--tg-theme-secondary-100: #2a1c0c;
--oerl-bg: #0b1327;
--oerl-bg-2: #0e1832;
--oerl-surface: #111d3c;
--oerl-surface-2: #16224a;
--oerl-border-soft: rgba(255, 255, 255, 0.1);
--oerl-border-strong: rgba(255, 255, 255, 0.17);
--oerl-text: #c7cddd;
--oerl-heading: #f3f5fb;
--oerl-muted: #98a2bd;
--tg-body-color-dark: #c7cddd;
--tg-heading-color-dark: #f3f5fb;
}
/* Smooth cross-fade only while toggling (added/removed by color-modes.js). */
.theme-transition,
.theme-transition * {
transition:
background-color 0.4s ease,
border-color 0.4s ease,
color 0.4s ease,
box-shadow 0.4s ease,
fill 0.4s ease !important;
}
/* Base surface */
[data-bs-theme="dark"] body {
background-color: var(--oerl-bg);
color: var(--oerl-text);
}
/* Section / card / panel surfaces that were hard-coded light. */
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .card-services-type-01,
[data-bs-theme="dark"] .services__item-three,
[data-bs-theme="dark"] .services__item-four,
[data-bs-theme="dark"] .services__item-five,
[data-bs-theme="dark"] .blog__post-two,
[data-bs-theme="dark"] .blog__post-four,
[data-bs-theme="dark"] .pricing__box,
[data-bs-theme="dark"] .features__item-two,
[data-bs-theme="dark"] .experience__box-four,
[data-bs-theme="dark"] .about__award-box-two,
[data-bs-theme="dark"] .testimonial__form,
[data-bs-theme="dark"] .testimonial__item-three,
[data-bs-theme="dark"] .team__content-four,
[data-bs-theme="dark"] .offCanvas__info,
[data-bs-theme="dark"] .search__popup,
[data-bs-theme="dark"] .tgmobile__menu-box,
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .collapse-custom,
[data-bs-theme="dark"] .tgmenu__navbar-wrap > ul > li .sub-menu {
background-color: var(--oerl-surface) !important;
border-color: var(--oerl-border-soft) !important;
color: var(--oerl-text);
}
[data-bs-theme="dark"] .card-services-type-01 {
border: 1px solid var(--oerl-border-soft) !important;
}
/* Headings on dark surfaces */
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .title,
[data-bs-theme="dark"] .card-title {
color: var(--oerl-heading);
}
/* Form controls */
[data-bs-theme="dark"] input[type="text"],
[data-bs-theme="dark"] input[type="email"],
[data-bs-theme="dark"] input[type="tel"],
[data-bs-theme="dark"] input[type="url"],
[data-bs-theme="dark"] input[type="number"],
[data-bs-theme="dark"] input[type="search"],
[data-bs-theme="dark"] input[type="date"],
[data-bs-theme="dark"] input[type="password"],
[data-bs-theme="dark"] textarea,
[data-bs-theme="dark"] select,
[data-bs-theme="dark"] .form-grp input,
[data-bs-theme="dark"] .form-grp textarea {
background-color: var(--oerl-surface-2) !important;
border: 1px solid var(--oerl-border-soft) !important;
color: var(--oerl-heading) !important;
}
[data-bs-theme="dark"] input::placeholder,
[data-bs-theme="dark"] textarea::placeholder {
color: var(--oerl-muted) !important;
opacity: 1;
}
[data-bs-theme="dark"] input:focus,
[data-bs-theme="dark"] textarea:focus,
[data-bs-theme="dark"] select:focus {
border-color: var(--tg-theme-primary-500) !important;
box-shadow: 0 0 0 3px rgba(63, 163, 215, 0.18) !important;
outline: none;
}
/* Tables */
[data-bs-theme="dark"] table,
[data-bs-theme="dark"] .table {
color: var(--oerl-text);
}
[data-bs-theme="dark"] table th,
[data-bs-theme="dark"] .table th {
color: var(--oerl-heading);
}
[data-bs-theme="dark"] table td,
[data-bs-theme="dark"] table th,
[data-bs-theme="dark"] .table td,
[data-bs-theme="dark"] .table th {
border-color: var(--oerl-border-soft) !important;
}
/* Net-new pages used hard-coded inline light backgrounds (#fff / #f7f9fc soft
bands). Remap them to dark surfaces in dark mode. Only active in dark. */
[data-bs-theme="dark"] [style*="background:#f7f9fc"],
[data-bs-theme="dark"] [style*="background: #f7f9fc"],
[data-bs-theme="dark"] [style*="background:#f8f9fc"] {
background-color: var(--oerl-bg-2) !important;
}
[data-bs-theme="dark"] [style*="background:#fff"],
[data-bs-theme="dark"] [style*="background: #fff"],
[data-bs-theme="dark"] [style*="background:#ffffff"] {
background-color: var(--oerl-surface) !important;
border-color: var(--oerl-border-soft) !important;
}
/* Borders & dividers that used light values */
[data-bs-theme="dark"] hr {
border-color: var(--oerl-border-soft);
}
/* Muted / secondary text helpers used across pages */
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-gray,
[data-bs-theme="dark"] small {
color: var(--oerl-muted) !important;
}
/* Premium elevation for cards in dark mode */
[data-bs-theme="dark"] .services__item-three,
[data-bs-theme="dark"] .services__item-four,
[data-bs-theme="dark"] .blog__post-two,
[data-bs-theme="dark"] .pricing__box {
box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.8);
}
/* ==========================================================================
3) LOGO & HEADER
Stock nav crammed a 190×150 raster into 34px so only the torch showed. We
switch to the crisp SVG, size it responsively, keep it vertically centred,
and swap to the white lockup on dark surfaces.
========================================================================== */
.oerl-logo-link {
display: inline-flex;
align-items: center;
line-height: 0;
}
.oerl-logo {
display: block;
width: auto;
height: auto;
}
.oerl-logo--white {
display: none;
}
[data-bs-theme="dark"] .oerl-logo--color {
display: none;
}
[data-bs-theme="dark"] .oerl-logo--white {
display: block;
}
.tgmenu__nav .logo .oerl-logo,
.tgmenu__nav .logo img {
max-height: 80px;
}
.tgmobile__menu .nav-logo .oerl-logo,
.tgmobile__menu .nav-logo img {
max-height: 46px;
}
.offCanvas__logo .oerl-logo,
.offCanvas__logo img {
max-height: 46px;
}
.fw-logo img,
.fw-logo .oerl-logo {
max-height: 66px !important;
}
@media (max-width: 1199px) {
.tgmenu__nav .logo .oerl-logo,
.tgmenu__nav .logo img {
max-height: 75px;
}
}
@media (max-width: 767px) {
.tgmenu__nav .logo .oerl-logo,
.tgmenu__nav .logo img,
.tgmobile__menu .nav-logo .oerl-logo,
.tgmobile__menu .nav-logo img {
max-height: 60px;
}
.fw-logo img,
.fw-logo .oerl-logo {
max-height: 56px !important;
}
}
/* Keep the sticky/condensed header vertically balanced with the taller logo. */
.tgmenu__nav {
min-height: 74px;
}
/* Header, 992–1199 band. The stock template hid both .header-btn items
(theme switcher + CTA) here and let the action icons overflow the white
rounded wrap. The switcher now lives on its own .header-switcher li so
only the CTA hides, and nav/action spacing tightens to fit the 960px
container without clipping. */
@media (min-width: 992px) and (max-width: 1204.98px) {
/* main.css stops hiding the CTA at 1200 but the full action set only
fits from ~1205 — keep it hidden through the 1200–1204 sliver. */
.tg-header__area .tgmenu__action ul .header-btn {
display: none;
}
.tg-header__area .tgmenu__nav {
flex-wrap: nowrap;
}
.tg-header__area .tgmenu__nav .logo .oerl-logo,
.tg-header__area .tgmenu__nav .logo img {
max-height: 60px;
}
.tg-header__area .tgmenu__navbar-wrap > ul > li {
margin-right: 10px;
}
.tg-header__area .tgmenu__navbar-wrap > ul > li a {
font-size: 14px;
}
.tg-header__area .tgmenu__wrap {
padding: 0 14px;
}
.tg-header__area .tgmenu__action ul {
margin-left: 6px;
}
.tg-header__area .tgmenu__action ul li {
margin-left: 10px;
}
.tg-header__area .tgmenu__action ul .offCanvas-menu .menu-tigger {
width: 42px;
height: 42px;
}
}
/* Banner, 992–1199 band. main.css halves .banner-col-1 below 1200 for the
stock side-by-side variants, but home-10 already nests it in a lg:w-7/12
grid column — halving it again squeezed the copy to ~29% of the container
and opened a ~300px dead gap before the banner image. Keep the text at the
full width of its column and pin the image to its desktop 40% (main.css
also declares 50% here; it loses the cascade today, but be explicit). */
@media (min-width: 992px) and (max-width: 1199.98px) {
.banner-two-col.home-10 .banner-col-1 {
width: 100%;
}
.banner-two-col.home-10 .banner-col-2 {
width: 40%;
}
}
/* ==========================================================================
4) COMPONENT POLISH (Lucide icons, focus rings, buttons)
========================================================================== */
.oerl-ico {
display: inline-block;
vertical-align: middle;
width: 1em;
height: 1em;
}
i[data-lucide] {
width: 1.15em;
height: 1.15em;
vertical-align: -0.15em;
}
/* Buttons — complete the interaction states the template never defined.
Colors are untouched; this only adds pressed/disabled behaviour. */
.btn:active {
transform: translateY(1px);
}
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
opacity: 0.55;
pointer-events: none;
}
/* Visible, on-brand keyboard focus for accessibility. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--tg-theme-primary-500);
outline-offset: 2px;
border-radius: 4px;
}
/* ==========================================================================
5) FAQ ACCORDION (accessible, animated, consistent)
========================================================================== */
.oerl-faq {
max-width: 900px;
margin-inline: auto;
}
.oerl-faq__item {
background: var(--oerl-surface);
border: 1px solid var(--oerl-border-soft);
border-radius: 14px;
margin-bottom: 16px;
overflow: hidden;
transition:
border-color 0.25s ease,
box-shadow 0.25s ease;
}
.oerl-faq__item.is-open {
border-color: var(--tg-theme-primary-500);
box-shadow: 0 14px 34px -22px rgba(63, 163, 215, 0.55);
}
.oerl-faq__h {
margin: 0;
}
.oerl-faq__q {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 20px 24px;
background: transparent;
border: 0;
text-align: left;
font-size: 17px;
font-weight: 700;
color: var(--tg-heading-color);
cursor: pointer;
line-height: 1.4;
}
.oerl-faq__q:hover {
color: var(--tg-theme-primary-500);
}
.oerl-faq__chev {
flex: 0 0 auto;
color: var(--tg-theme-primary-500);
transition: transform 0.3s ease;
}
.oerl-faq__item.is-open .oerl-faq__chev {
transform: rotate(180deg);
}
.oerl-faq__a {
height: 0;
overflow: hidden;
transition: height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.oerl-faq__a-in {
padding: 0 24px 22px;
color: var(--tg-body-color);
font-size: 15.5px;
line-height: 1.75;
}
[data-bs-theme="dark"] .oerl-faq__a-in {
color: var(--oerl-text);
}
/* ==========================================================================
5b) LIGHTBOX
========================================================================== */
.oerl-lb-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: rgba(6, 11, 24, 0.92);
opacity: 0;
visibility: hidden;
transition:
opacity 0.3s ease,
visibility 0.3s ease;
backdrop-filter: blur(4px);
}
.oerl-lb-overlay.is-open {
opacity: 1;
visibility: visible;
}
.oerl-lb-figure {
margin: 0;
max-width: 90vw;
max-height: 86vh;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.oerl-lb-img {
max-width: 90vw;
max-height: 78vh;
border-radius: 10px;
display: block;
box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
opacity: 0;
transform: scale(0.96);
transition:
opacity 0.35s ease,
transform 0.35s ease;
}
.oerl-lb-img.is-in {
opacity: 1;
transform: scale(1);
}
.oerl-lb-cap {
color: #e7edf6;
font-size: 15px;
text-align: center;
max-width: 760px;
}
.oerl-lb-count {
position: absolute;
top: 24px;
left: 28px;
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.05em;
}
.oerl-lb-close {
position: absolute;
top: 16px;
right: 22px;
width: 46px;
height: 46px;
border: 0;
background: rgba(255, 255, 255, 0.1);
color: #fff;
font-size: 26px;
line-height: 1;
border-radius: 12px;
cursor: pointer;
transition: background 0.2s ease;
}
.oerl-lb-close:hover {
background: var(--tg-theme-secondary-500);
}
.oerl-lb-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 54px;
height: 54px;
border: 0;
background: rgba(255, 255, 255, 0.1);
color: #fff;
font-size: 20px;
border-radius: 50%;
cursor: pointer;
transition:
background 0.2s ease,
transform 0.2s ease;
}
.oerl-lb-nav:hover {
background: var(--tg-theme-primary-500);
}
.oerl-lb-prev {
left: 22px;
}
.oerl-lb-next {
right: 22px;
}
@media (max-width: 575px) {
.oerl-lb-nav {
width: 44px;
height: 44px;
}
.oerl-lb-prev {
left: 10px;
}
.oerl-lb-next {
right: 10px;
}
.oerl-lb-count {
top: 18px;
left: 16px;
}
}
/* Gallery thumb affordance */
.oerl-gallery-item {
position: relative;
display: block;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--oerl-border-soft);
cursor: pointer;
}
.oerl-gallery-item img {
transition: transform 0.5s ease;
display: block;
width: 100%;
}
.oerl-gallery-item:hover img {
transform: scale(1.06);
}
.oerl-gallery-item::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(6, 11, 24, 0.55), transparent 55%);
opacity: 0;
transition: opacity 0.3s ease;
}
.oerl-gallery-item:hover::after {
opacity: 1;
}
.oerl-gallery-plus {
position: absolute;
z-index: 2;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0.8);
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--tg-theme-secondary-500);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.3s ease;
}
.oerl-gallery-item:hover .oerl-gallery-plus {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.oerl-gallery-cap {
position: absolute;
z-index: 2;
left: 16px;
bottom: 14px;
right: 16px;
color: #fff;
font-size: 14px;
font-weight: 600;
opacity: 0;
transform: translateY(8px);
transition: all 0.3s ease;
}
.oerl-gallery-item:hover .oerl-gallery-cap {
opacity: 1;
transform: translateY(0);
}
/* ==========================================================================
6) UTILITIES
========================================================================== */
.oerl-gradient-text {
background: linear-gradient(90deg, var(--tg-theme-primary-500), var(--tg-theme-secondary-500));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.oerl-eyebrow {
display: inline-block;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--tg-theme-secondary-500);
margin-bottom: 14px;
}
[data-bs-theme="dark"] .oerl-eyebrow {
color: var(--tg-theme-secondary-500);
}
/* ==========================================================================
7) SOCIAL ICONS + MOBILE THEME TOGGLE (Phase F)
Shared, touch-friendly (>=44px) social buttons and a native settings-row
style mobile theme toggle. Theme-aware; JS binding is unchanged.
========================================================================== */
/* Shared social-icon buttons — applied to the mobile menu and off-canvas rows.
Rounded, brand-tinted tiles that fill on hover/focus/active. */
.tgmobile__menu-bottom .social-links ul,
.offCanvas__social-icon {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
padding: 0;
margin: 0;
}
.tgmobile__menu-bottom .social-links ul { justify-content: center; padding-top: 18px; }
.tgmobile__menu-bottom .social-links ul li { list-style: none; }
.tgmobile__menu-bottom .social-links ul li a,
.offCanvas__social-icon a {
width: 44px;
height: 44px;
margin: 0; /* reset the off-canvas margin-right */
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
border-radius: 12px;
color: var(--tg-theme-primary-500);
background: var(--oerl-primary-soft);
border: 1px solid var(--oerl-border-soft);
transition: transform .25s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
[data-bs-theme="dark"] .tgmobile__menu-bottom .social-links ul li a,
[data-bs-theme="dark"] .offCanvas__social-icon a {
background: var(--oerl-surface-2);
}
.tgmobile__menu-bottom .social-links ul li a:hover,
.tgmobile__menu-bottom .social-links ul li a:focus-visible,
.offCanvas__social-icon a:hover,
.offCanvas__social-icon a:focus-visible {
color: #fff;
background: var(--tg-theme-primary-500);
transform: translateY(-3px);
box-shadow: 0 12px 22px -10px rgba(63, 163, 215, .65);
}
.tgmobile__menu-bottom .social-links ul li a:active,
.offCanvas__social-icon a:active { transform: translateY(-1px); }
/* Mobile theme toggle — a full-width settings row: label + sliding switch.
The whole row is the .dark-light-switcher the JS binds to. State is driven
by [data-bs-theme] so no JS change is needed. */
.tgmobile__theme { padding: 4px 0 2px; }
.tgmobile__theme .dark-light-switcher {
width: 100%;
height: auto;
min-height: 52px;
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 16px;
border-radius: 14px;
background: var(--oerl-surface-2) !important;
border: 1px solid var(--oerl-border-soft);
color: var(--tg-heading-color);
font-size: 15px;
font-weight: 600;
}
[data-bs-theme="dark"] .tgmobile__theme .dark-light-switcher { color: var(--oerl-heading); }
.oerl-tt__label { display: inline-flex; align-items: center; gap: 11px; }
.oerl-tt__label i { font-size: 17px; width: 20px; text-align: center; color: var(--tg-theme-secondary-500); }
.oerl-tt__track {
position: relative;
flex: none;
width: 46px;
height: 26px;
border-radius: 999px;
background: var(--tg-theme-primary-200);
transition: background-color .3s ease;
}
.oerl-tt__knob {
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
transition: transform .3s ease;
}
[data-bs-theme="dark"] .oerl-tt__track { background: var(--tg-theme-secondary-500); }
[data-bs-theme="dark"] .oerl-tt__knob { transform: translateX(20px); }
/* ==========================================================================
8) FLOATING STAT / FEATURE CARDS (Phase H)
HTML/Tailwind recreations of the template's static stat-card images. Shared
.oerl-scard* bases; theme-aware; each floats in its section wrapper exactly
where the old ![]()
sat. Palette: brand orange + deep navy/blue.
========================================================================== */
:root { --oerl-scard-navy:#14164a; --oerl-scard-track:#eceff5; }
[data-bs-theme="dark"] { --oerl-scard-navy:#5b7cff; --oerl-scard-track:rgba(255,255,255,.12); }
.oerl-scard {
background:var(--oerl-surface); border:1px solid var(--oerl-border-soft);
border-radius:16px; padding:18px 18px 16px;
box-shadow:0 18px 40px -22px rgba(20,24,60,.35);
font-family:inherit; text-align:left;
}
.oerl-badge-card, .oerl-callout { text-align:left; }
[data-bs-theme="dark"] .oerl-scard { box-shadow:0 18px 40px -20px rgba(0,0,0,.7); }
/* Header: big percentage + caption */
.oerl-scard__hd { display:flex; align-items:center; gap:12px; }
.oerl-scard__pct { font-size:40px; font-weight:800; line-height:1; color:var(--tg-heading-color); letter-spacing:-.01em; }
[data-bs-theme="dark"] .oerl-scard__pct { color:var(--oerl-heading); }
.oerl-scard__cap { font-size:15px; font-weight:700; line-height:1.2; color:var(--tg-heading-color); }
[data-bs-theme="dark"] .oerl-scard__cap { color:var(--oerl-heading); }
/* Vertical bar chart */
.oerl-scard__bars { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; height:74px; margin-top:18px; }
.oerl-bar { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; }
.oerl-bar__track { position:relative; width:9px; height:100%; border-radius:20px; background:var(--oerl-scard-track); display:flex; align-items:flex-end; }
.oerl-bar__fill { width:100%; border-radius:20px; }
.oerl-bar__fill--o { background:var(--tg-theme-secondary-500); }
.oerl-bar__fill--n { background:var(--oerl-scard-navy); }
.oerl-bar__lb { font-size:11px; font-weight:500; color:var(--tg-body-color); }
/* Horizontal progress lines */
.oerl-scard__lines { display:flex; flex-direction:column; gap:11px; margin-top:14px; }
.oerl-line { height:9px; border-radius:20px; background:var(--oerl-scard-track); overflow:hidden; }
.oerl-line__fill { height:100%; border-radius:20px; background:var(--tg-theme-secondary-500); }
/* Labeled progress rows */
.oerl-scard__rows { display:flex; flex-direction:column; gap:12px; margin-top:14px; }
.oerl-prow__top { display:flex; justify-content:space-between; font-size:13px; font-weight:700; color:var(--tg-heading-color); margin-bottom:6px; }
[data-bs-theme="dark"] .oerl-prow__top { color:var(--oerl-heading); }
.oerl-prow__bar { height:8px; border-radius:20px; background:var(--oerl-scard-track); overflow:hidden; }
.oerl-prow__bar span { display:block; height:100%; border-radius:20px; background:var(--tg-theme-secondary-500); }
/* Icon + metric badge (small pill card) */
.oerl-badge-card { display:inline-flex; align-items:center; gap:14px; padding:14px 20px 14px 14px;
background:var(--oerl-surface); border:1px solid var(--oerl-border-soft); border-radius:16px;
box-shadow:0 18px 40px -22px rgba(20,24,60,.35); }
[data-bs-theme="dark"] .oerl-badge-card { box-shadow:0 18px 40px -20px rgba(0,0,0,.7); }
.oerl-badge-card__ico { flex:none; width:48px; height:48px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center;
background:var(--tg-theme-secondary-500); color:#fff; font-size:19px; }
.oerl-badge-card__ico i[data-lucide] { width:22px; height:22px; }
.oerl-badge-card__n { font-size:26px; font-weight:800; line-height:1; color:var(--tg-heading-color); }
[data-bs-theme="dark"] .oerl-badge-card__n { color:var(--oerl-heading); }
.oerl-badge-card__l { font-size:13.5px; color:var(--tg-body-color); margin-top:3px; }
/* Feature callout card */
.oerl-callout { position:relative; display:flex; gap:16px; align-items:flex-start; max-width:300px;
background:var(--oerl-surface); border:1px solid var(--oerl-border-soft); border-radius:16px; padding:20px;
box-shadow:0 18px 44px -24px rgba(20,24,60,.35); }
[data-bs-theme="dark"] .oerl-callout { box-shadow:0 18px 44px -22px rgba(0,0,0,.7); }
.oerl-callout__ico { flex:none; width:52px; height:52px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center;
background:var(--oerl-secondary-soft); color:var(--tg-theme-secondary-500); font-size:21px; }
[data-bs-theme="dark"] .oerl-callout__ico { background:rgba(250,108,32,.16); }
.oerl-callout__ico i[data-lucide] { width:24px; height:24px; }
.oerl-callout__t { font-size:16px; font-weight:700; color:var(--tg-heading-color); margin:2px 0 6px; }
[data-bs-theme="dark"] .oerl-callout__t { color:var(--oerl-heading); }
.oerl-callout__p { font-size:13px; line-height:1.55; color:var(--tg-body-color); margin:0; }
.oerl-callout__badge { position:absolute; top:-14px; right:-14px; width:44px; height:44px; border-radius:12px;
display:inline-flex; align-items:center; justify-content:center; background:var(--tg-theme-secondary-500); color:#fff;
font-size:17px; box-shadow:0 10px 22px -8px rgba(250,108,32,.7); }
.oerl-callout__badge i[data-lucide] { width:22px; height:22px; }
/* Stat-card helpers: metric box (e.g. 15K), soft line, responsive shrink. */
.oerl-scard, .oerl-badge-card, .oerl-callout { max-width:100%; }
.oerl-scard--row { display:flex; gap:16px; align-items:center; }
.oerl-metric-box { flex:none; width:64px; height:56px; border-radius:12px; background:var(--tg-theme-primary-50);
color:var(--tg-heading-color); display:inline-flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; }
[data-bs-theme="dark"] .oerl-metric-box { color:var(--oerl-heading); background:var(--oerl-surface-2); }
.oerl-line__fill--soft { opacity:.5; }
/* Re-anchor recreated cards that the template positioned through img:nth-child()
selectors, which no longer match the cards. Values mirror the original
image geometry so the cards sit exactly where the images did. */
.about__img-wrap-three > .oerl-badge-card { position:absolute; left:-10%; bottom:18%; z-index:2; }
@media (max-width:767.98px){ .about__img-wrap-three > .oerl-badge-card { display:none; } }
.choose__img-wrap-five { position:relative; }
.choose__img-wrap-five > .oerl-badge-card { position:absolute; left:17%; bottom:8%; z-index:2; }
.choose__img-wrap-five > .oerl-callout,
.choose__img-wrap-five > .oerl-scard--row { position:absolute; right:0; bottom:15%; z-index:2; }
/* choose-img-wrap / choose__img-wrap-three also floated the card via img
selectors — re-anchor the bars card, mirroring the responsive shifts. */
.choose-img-wrap > .oerl-scard { position:absolute; left:-16%; bottom:0; z-index:2; }
@media (max-width:1199.98px){ .choose-img-wrap > .oerl-scard { left:-9%; } }
@media (max-width:991.98px){ .choose-img-wrap > .oerl-scard { left:-2%; } }
@media (max-width:767.98px){ .choose-img-wrap > .oerl-scard { display:none; } }
.choose__img-wrap-three > .oerl-scard { position:absolute; left:9%; top:30%; z-index:2; }
@media (max-width:1199.98px){ .choose__img-wrap-three > .oerl-scard { left:0; } }
@media (max-width:767.98px){ .choose__img-wrap-three > .oerl-scard { display:none; } }