/* ================================================================ ENHANCE ACADEMY THEME (KSA) Applied via `class="enhance-theme"` on of KSA pages (/ksa/index.html, /ksa/enhance-personal-trainer.html). Site chrome (SAS-CCE header/footer) stays SAS-branded. KSA-specific UI takes on the Enhance Academy palette: Signature yellow + clean cream surfaces + black ink for text. No heavy black-dominant backgrounds, no Saudi green. ================================================================ */ .enhance-theme { --enhance-yellow: #F2D028; /* signature Enhance yellow accent */ --enhance-yellow-d: #D4B214; /* hover/deeper yellow */ --enhance-yellow-l: #FBEFAB; /* tint */ --enhance-ink: #0E0E0E; /* near-black for text only */ --enhance-ink-soft: #2A2A2A; --enhance-cream: #FAF7EE; /* warm off-white surface */ --enhance-cream-2: #F2EBD4; /* deeper cream */ --enhance-yellow-tint: rgba(242, 208, 40, 0.18); } /* ----- Hero overlay tint (LIGHT overlay over the photo, not heavy black) ----- */ .enhance-theme .hero.hero--photo::before, .enhance-theme .hero--photo::before { background: linear-gradient(135deg, rgba(14, 14, 14, 0.55) 0%, rgba(14, 14, 14, 0.30) 100%) !important; } .enhance-theme .hero .eyebrow, .enhance-theme .eyebrow { color: var(--enhance-yellow) !important; letter-spacing: 0.08em; } /* ----- Hero H1: yellow + larger for KSA hero photo ----- */ .enhance-theme .hero h1 { color: var(--enhance-yellow) !important; font-size: clamp(2.4rem, 5.5vw, 4.2rem); text-shadow: 0 2px 12px rgba(0,0,0,0.45); letter-spacing: -0.01em; } /* ----- Hero badges: yellow outline on dark photo ----- */ .enhance-theme .hero__badges span { background: rgba(242, 208, 40, 0.16); border: 1px solid rgba(242, 208, 40, 0.55); color: #fff; } /* ----- Career strip: cream surface, dark text, yellow CTA ----- */ .enhance-theme .career { background: var(--enhance-cream); color: var(--enhance-ink); } .enhance-theme .career strong, .enhance-theme .career small { color: var(--enhance-ink); } .enhance-theme .career strong { color: var(--enhance-ink); font-weight: 700; } .enhance-theme .career small { color: var(--enhance-ink-soft); opacity: 0.85; } .enhance-theme .career__icon { color: var(--enhance-yellow-d); } .enhance-theme .career .btn--on-dark { background: var(--enhance-yellow); color: var(--enhance-ink); border-color: var(--enhance-yellow); font-weight: 700; } .enhance-theme .career .btn--on-dark:hover { background: var(--enhance-yellow-d); border-color: var(--enhance-yellow-d); color: var(--enhance-ink); } /* ----- Pricing: featured plan = yellow border ----- */ .enhance-theme .plan--featured { border: 2px solid var(--enhance-yellow) !important; } .enhance-theme .plan__badge { background: var(--enhance-yellow); color: var(--enhance-ink); font-weight: 700; } .enhance-theme .plan__price-amt { color: var(--enhance-ink); } .enhance-theme .plan__title { color: var(--enhance-ink); } /* ----- Early-bird banner: cream + yellow accent ----- */ .enhance-theme .earlybird { background: var(--enhance-cream); border-left: 4px solid var(--enhance-yellow); color: var(--enhance-ink); margin-bottom: 36px; } .enhance-theme .earlybird__icon { background: var(--enhance-yellow-tint); color: var(--enhance-yellow-d); } .enhance-theme .earlybird__title { color: var(--enhance-ink); } .enhance-theme .earlybird__title span { color: var(--enhance-yellow-d); } .enhance-theme .earlybird__sub { color: var(--enhance-ink); opacity: 0.82; } .enhance-theme .earlybird__sub strong { color: var(--enhance-ink); opacity: 1; } .enhance-theme .earlybird__price { background: var(--enhance-yellow); color: var(--enhance-ink); font-weight: 800; } /* ----- Primary CTAs = yellow with dark text ----- */ .enhance-theme .btn.btn--primary { background: var(--enhance-yellow); color: var(--enhance-ink); border-color: var(--enhance-yellow); font-weight: 700; } .enhance-theme .btn.btn--primary:hover { background: var(--enhance-yellow-d); border-color: var(--enhance-yellow-d); color: var(--enhance-ink); } /* ----- Includes: yellow-tinted icons ----- */ .enhance-theme .include__icon { background: var(--enhance-yellow-tint); color: var(--enhance-yellow-d); } .enhance-theme .include__title { color: var(--enhance-ink); } /* ----- Accreditation cards ----- */ .enhance-theme .card .card__title { color: var(--enhance-ink); } .enhance-theme .card .card__tag { background: var(--enhance-yellow-tint); color: var(--enhance-yellow-d); } /* ----- Discount table: yellow band header, ink text ----- */ .enhance-theme .discount-table h3 { background: var(--enhance-yellow); color: var(--enhance-ink); } .enhance-theme .discount-table .price--active { color: var(--enhance-yellow-d); } .enhance-theme .discount-table .who { color: var(--enhance-ink); } /* ----- Reserve form heading ----- */ .enhance-theme #reserve h2 { color: var(--enhance-ink); } /* ----- Co-brand badge row ----- */ .enhance-theme .cobrand-row { display: flex; gap: 28px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 24px 16px; background: var(--enhance-cream); border-radius: 12px; margin: 24px 0; } .enhance-theme .cobrand-row img { height: 72px; width: auto; flex-shrink: 0; } .enhance-theme .cobrand-row .cobrand-x { color: var(--enhance-yellow-d); font-size: 1.8rem; font-weight: 300; font-family: serif; } /* ----- Section accents (e.g., bg-sand on KSA → cream) ----- */ .enhance-theme .bg-sand { background: var(--enhance-cream); } /* ----- Override the "section--photo-dark" overlay for KSA to be lighter ----- */ .enhance-theme .section--photo-dark::before { background: linear-gradient(135deg, rgba(14, 14, 14, 0.62) 0%, rgba(14, 14, 14, 0.38) 100%) !important; }