/* ═══════════════════════════════════════════════════════════════════ Kaevor — UNIFIED CREAM THEME (2026-10-08) One palette across the WHOLE platform (marketing + academy). Loads LAST, after styles.css + design-system.css. Flips the dark "black diamond" base to the cream identity and guarantees legibility. Mains: warm cream canvas + deep navy ink. Indigo accent. Gold sparing. Legibility rule: body/card text is navy ink-soft (WCAG AA+); the pale grays used on dark are retired. ═══════════════════════════════════════════════════════════════════ */ /* ── Tokens flipped to cream (overrides styles.css :root) ──────────── */ :root{ --bg0:#f7f3ea; --bg1:#f2ece0; --surface:#ffffff; --surface2:#ffffff; --text:#0f1c3f; --muted:#4f5a73; --muted2:#5c6880; --stroke:rgba(15,28,63,.14); --stroke2:rgba(15,28,63,.08); --accent:#6c47ff; --accent2:#5a3fe0; --accentInk:#ffffff; --sheen:#b8872b; --sheen2:#a9781f; --shadow:0 24px 60px -24px rgba(15,28,63,.24), 0 8px 22px -10px rgba(15,28,63,.14); --shadow2:0 14px 34px -16px rgba(15,28,63,.20), 0 4px 12px -6px rgba(15,28,63,.10); --shadowGlow:0 0 0 1px rgba(108,71,255,.14), 0 20px 50px -16px rgba(108,71,255,.22); /* academy aliases (shared) */ --ink:#0f1c3f; --ink-soft:#33405c; --paper:#f7f3ea; --paper-2:#efe7d7; --card:#ffffff; --line:rgba(15,28,63,.12); --line-2:rgba(15,28,63,.07); --accent-d:#553bcf; --gold:#b8872b; --gold-br:#e0a73a; --good:#1f9d57; --a-shadow:0 20px 48px -24px rgba(15,28,63,.20), 0 6px 16px -8px rgba(15,28,63,.12); --a-shadow-sm:0 10px 26px -16px rgba(15,28,63,.22); } /* ── Canvas + base legibility ─────────────────────────────────────── */ body{ background:var(--paper) !important; background-attachment:scroll !important; color:var(--ink-soft) !important; } body::before{ display:none !important; } ::selection{ background:rgba(108,71,255,.18); color:var(--ink); } h1,h2,h3,h4,h5,h6{ color:var(--ink); } a{ color:var(--ink); } .muted,.muted2{ color:var(--muted) !important; } /* ── Header / nav ─────────────────────────────────────────────────── */ .header{ background:rgba(247,243,234,.85) !important; border-bottom:1px solid var(--line) !important; } .header::after{ display:none !important; } .brand:hover{ background:rgba(15,28,63,.04) !important; } .nav-link{ color:var(--ink) !important; opacity:.92; font-weight:600; } .nav-link:hover{ background:rgba(15,28,63,.05) !important; color:var(--accent) !important; } .nav-link.active{ background:rgba(108,71,255,.1) !important; color:var(--accent-d) !important; border-color:rgba(108,71,255,.25) !important; } .has-dd > .nav-link::after{ opacity:.5; } .dd{ background:#fff !important; border:1px solid var(--line) !important; box-shadow:var(--a-shadow) !important; } .dd-link{ color:var(--ink) !important; } .dd-link:hover{ background:rgba(108,71,255,.06) !important; color:var(--accent-d) !important; } .dd-title{ color:var(--muted) !important; } .icon-lines::before,.icon-lines::after,.icon-x::before,.icon-x::after{ background:var(--ink) !important; } .icon-btn{ color:var(--ink) !important; } .icon-btn:hover{ background:rgba(15,28,63,.05) !important; } /* top CTA → gold (Royal Ink) */ .nav-cta{ background:var(--gold-br) !important; color:#1a1300 !important; border:1px solid rgba(0,0,0,.06) !important; box-shadow:0 10px 24px -14px rgba(224,167,58,.7) !important; } .nav-cta:hover{ background:#d49a2f !important; } /* lang switcher */ .lang-switcher{ border-left:1px solid var(--line) !important; } .lang-switcher .lang-link{ color:var(--ink) !important; background:rgba(15,28,63,.05) !important; border:1px solid var(--line) !important; } .lang-switcher .lang-link.is-active{ color:#fff !important; background:var(--ink) !important; border-color:var(--ink) !important; box-shadow:none !important; } /* ── Mobile menu ──────────────────────────────────────────────────── */ .mobile{ background:rgba(15,28,63,.35) !important; } .mobile-top,.mobile-links{ background:#fff !important; border:1px solid var(--line) !important; box-shadow:var(--a-shadow) !important; } .mobile-title{ color:var(--ink) !important; } .mobile-links a{ background:var(--paper) !important; border:1px solid var(--line) !important; color:var(--ink) !important; } .mobile-links a:hover{ background:rgba(108,71,255,.06) !important; } .mgroup{ background:var(--paper) !important; border:1px solid var(--line) !important; } .mtitle{ color:var(--muted) !important; } .mobile-foot{ color:var(--muted) !important; } /* ── Sections ─────────────────────────────────────────────────────── */ .section-alt,.section-dark{ background:var(--paper-2) !important; border-color:var(--line) !important; } .section-head p{ color:var(--ink-soft) !important; } .partners-section{ background:var(--paper-2) !important; border-color:var(--line) !important; } .section-subtitle,.partners-section p{ color:var(--ink-soft) !important; } /* image/video sections: soften to a light wash so content stays legible */ .section-bg::before{ opacity:.06 !important; filter:none !important; } .section-bg::after{ background:linear-gradient(180deg, rgba(247,243,234,.4), rgba(247,243,234,.82)) !important; } .section-media .bg-video{ opacity:.05 !important; filter:none !important; } .section-media .media-overlay{ background:linear-gradient(180deg, rgba(247,243,234,.5), rgba(247,243,234,.85)) !important; } /* ── Hero → cream, navy text, photo as faint texture ──────────────── */ .hero{ background:var(--paper) !important; } .hero-bg.hero-bg-photo,.hero-video{ opacity:.07 !important; filter:saturate(.8) !important; } .hero-overlay{ background:linear-gradient(180deg, rgba(247,243,234,.55), rgba(247,243,234,.9)) !important; } .hero-glow,.cloud-veil{ opacity:.5 !important; } .hero h1{ color:var(--ink) !important; text-shadow:none !important; } .lead{ color:var(--ink-soft) !important; } .gradient-text{ background:none !important; -webkit-text-fill-color:var(--accent) !important; color:var(--accent) !important; } .pill{ background:#fff !important; border:1px solid var(--line) !important; color:var(--ink) !important; box-shadow:var(--a-shadow-sm) !important; } /* ── Stats / cards / features ─────────────────────────────────────── */ .stat,.feature,.sector,.project,.card-media,.impact-card,.logos,.map,.locations, .gallery-frame,.gallery-meta,.t-card,.newsletter,.faq-item,.form,.contact-aside, .team-card,.course-card,.tscroll-item,.logo-tile,.step-item,.gallery-viewport{ background:#fff !important; border:1px solid var(--line) !important; box-shadow:var(--a-shadow-sm) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } .feature:hover,.card-media:hover,.team-card:hover,.course-card:hover,.tscroll-item:hover,.impact-card:hover{ border-color:rgba(108,71,255,.35) !important; box-shadow:var(--a-shadow) !important; } .stat-num{ color:var(--ink) !important; } .stat-label{ color:var(--muted) !important; } /* gradient numbers → solid navy for legibility */ .impact-card h3,.impact-stat-num{ background:none !important; -webkit-text-fill-color:var(--ink) !important; color:var(--ink) !important; } .impact-stat{ background:#fff !important; border:1px solid var(--line) !important; } .impact-stat-label{ color:var(--ink-soft) !important; } .card-media p,.feature p,.sector p,.project p,.impact-card p{ color:var(--ink-soft) !important; } .card-top p{ color:var(--ink-soft) !important; } .card-media .media,.course-thumb,.team-photo,.vid-panel{ background:#eef0f6 !important; border-color:var(--line) !important; } .sector-ic,.mini-ic{ background:rgba(108,71,255,.1) !important; border:1px solid rgba(108,71,255,.25) !important; } .sector-foot,.team-role,.link{ color:var(--accent-d) !important; } .course-badge{ background:rgba(15,28,63,.85) !important; color:#fff !important; } .soon{ background:rgba(224,167,58,.14) !important; color:var(--gold) !important; } .mini{ background:#fff !important; border:1px solid var(--line) !important; color:var(--ink) !important; } .badge,.tag{ background:rgba(108,71,255,.08) !important; border:1px solid rgba(108,71,255,.22) !important; color:var(--accent-d) !important; } .step-num{ color:rgba(108,71,255,.22) !important; } /* ── Callout / CTA bar ────────────────────────────────────────────── */ .callout-inner{ background:linear-gradient(135deg, rgba(108,71,255,.08), rgba(224,167,58,.06)) !important; border:1px solid var(--line) !important; box-shadow:var(--a-shadow-sm) !important; } /* ── Testimonial scroller ─────────────────────────────────────────── */ .tscroll-quote{ color:var(--ink-soft) !important; } .tscroll-stars{ color:var(--gold-br) !important; } .tscroll-name,.tscroll-author{ color:var(--ink) !important; } .tscroll-role{ color:var(--muted) !important; } .tscroll-author{ border-top:1px solid var(--line) !important; } /* ── Logos: show real colour on cream ─────────────────────────────── */ .logo-tile img,.logo-strip-item img{ filter:grayscale(100%) brightness(.4) opacity(.75) !important; } .logo-tile:hover img,.logo-strip-item img:hover{ filter:grayscale(0%) brightness(1) opacity(1) !important; } /* ── Forms ────────────────────────────────────────────────────────── */ input,select,textarea{ background:#fff !important; border:1px solid var(--line) !important; color:var(--ink) !important; } input::placeholder,textarea::placeholder{ color:var(--muted) !important; } label{ color:var(--ink) !important; } select option{ background:#fff !important; color:var(--ink) !important; } .faq-q{ color:var(--ink) !important; } .faq-q:hover{ background:rgba(15,28,63,.04) !important; } .faq-a,.bullets,.role-grid-col ul{ color:var(--ink-soft) !important; } .map-placeholder{ color:var(--muted) !important; border-color:var(--line) !important; background:var(--paper-2) !important; } /* ── Buttons ──────────────────────────────────────────────────────── */ .btn-primary{ background:var(--ink) !important; color:#fff !important; box-shadow:0 14px 30px -16px rgba(15,28,63,.55) !important; } .btn-primary:hover{ background:#17264e !important; } .btn-ghost{ background:#fff !important; color:var(--ink) !important; border:1px solid var(--line) !important; backdrop-filter:none !important; } .btn-ghost:hover{ border-color:var(--ink) !important; background:rgba(15,28,63,.03) !important; } /* ── Footer (navy anchor) ─────────────────────────────────────────── */ .footer{ background:var(--ink) !important; border-top:1px solid var(--line) !important; } .footer::before{ display:none !important; } .footer-col h4{ color:rgba(255,255,255,.72) !important; } .footer-col a{ color:rgba(255,255,255,.82) !important; } .footer-col a:hover{ color:#fff !important; } .footer-bottom{ color:rgba(255,255,255,.6) !important; border-top:1px solid rgba(255,255,255,.12) !important; } .footer-social a{ background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.14) !important; color:#fff !important; } .to-top{ background:rgba(255,255,255,.08) !important; color:#fff !important; border:1px solid rgba(255,255,255,.14) !important; } .footer .brand-logo{ filter:brightness(0) invert(1); opacity:.9; } /* ── Modal ────────────────────────────────────────────────────────── */ .modal-card{ background:#fff !important; border:1px solid var(--line) !important; box-shadow:var(--a-shadow) !important; } .modal-backdrop{ background:rgba(15,28,63,.5) !important; } /* ── Dividers / misc ──────────────────────────────────────────────── */ .card-divider,.aside-divider{ background:var(--line) !important; } .wa-float-tooltip{ background:var(--ink) !important; color:#fff !important; border:1px solid var(--ink) !important; } /* ── Mobile guards ────────────────────────────────────────────────── */ @media (max-width:600px){ html,body{ overflow-x:hidden !important; max-width:100%; } .tscroll{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; max-width:100%; } } /* ── Headline accents + faint-gold legibility fixes ── */ .champ{ color:#8a6410 !important; font-style:normal; } .h-two em,.cx-two em{ color:var(--accent) !important; font-style:normal; } /* any inline champagne-gold text → legible deep gold (overrides inline) */ [style*="color:#f3d9a8"],[style*="color: #f3d9a8"]{ color:#b8872b !important; } /* ── Faint inline light body text → legible navy ── */ [style*="rgba(241,245,249"]{ color:var(--ink-soft) !important; } /* ── Home stats / impact video band → cream ── */ .impact-video-section{ background:var(--paper-2) !important; } .impact-video-section .impact-vid{ opacity:.05 !important; filter:none !important; } .impact-video-section .impact-overlay{ background:linear-gradient(135deg, rgba(247,243,234,.88), rgba(239,231,215,.92)) !important; } .team-photo-overlay{ background:linear-gradient(180deg,transparent 62%, rgba(15,28,63,.5) 100%) !important; } .event-main-overlay,.event-mini-overlay{ background:linear-gradient(180deg,transparent 45%, rgba(15,28,63,.6) 100%) !important; } /* ═══ FIX PASS (2026-10-08b) ═══════════════════════════════════════ */ /* 1) Mobile: stack multi-column inline grids (they must not stay in columns) */ @media (max-width:980px){ [style*="grid-template-columns:repeat(3"],[style*="grid-template-columns: repeat(3"], [style*="grid-template-columns:repeat(4"],[style*="grid-template-columns: repeat(4"]{ grid-template-columns:1fr 1fr !important; } } @media (max-width:640px){ [style*="grid-template-columns:repeat(2"],[style*="grid-template-columns: repeat(2"], [style*="grid-template-columns:repeat(3"],[style*="grid-template-columns: repeat(3"], [style*="grid-template-columns:repeat(4"],[style*="grid-template-columns: repeat(4"], [style*="grid-template-columns:1fr 1fr"],[style*="grid-template-columns: 1fr 1fr"]{ grid-template-columns:1fr !important; } } /* 2) Restore VIDEO heroes (the cream flip must not hide a hero video). Photo / no-video heroes stay cream; only heroes WITH a