/* ========================================================= VIP TRAININGEN — LIGHT MODE V1 Dark mode remains the untouched default. ========================================================= */ html[data-vip-theme="dark"] { color-scheme: dark; } html[data-vip-theme="light"] { color-scheme: light; --vip-bg:#eceef1; --vip-bg-deep:#dfe2e6; --vip-panel:rgba(255,255,255,.96); --vip-panel-soft:rgba(255,255,255,.76); --vip-white:#17181b; --vip-white-soft:rgba(23,24,27,.76); --vip-white-muted:rgba(23,24,27,.54); --vip-border:rgba(224,82,10,.50); --vip-border-soft:rgba(224,82,10,.25); --vip-orange-dark:#9e3908; --vip-shadow: 0 16px 42px rgba(32,35,40,.11); --vip-orange-glow: 0 0 24px rgba(255,106,26,.10); } /* ========================================================= THEME BUTTON ========================================================= */ .vip-theme-toggle { appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:36px; padding:7px 10px; color:var(--vip-white-soft); background:rgba(255,106,26,.04); border: 1px solid var(--vip-border-soft); border-radius:7px; font-family:var(--vip-font); font-size:11px; font-weight:700; letter-spacing:.10em; cursor:pointer; white-space:nowrap; transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease; } .vip-theme-toggle:hover { color:var(--vip-orange); background: rgba(255,106,26,.09); border-color: var(--vip-border); transform: translateY(-1px); } .vip-theme-toggle-icon { color:var(--vip-orange); font-size:15px; line-height:1; } /* ========================================================= MAIN PUBLIC SITE ========================================================= */ html[data-vip-theme="light"] body.vip-site { background: radial-gradient( 850px 520px at 50% -100px, rgba(255,106,26,.09), transparent 64% ), radial-gradient( 520px 420px at 8% 38%, rgba(255,106,26,.035), transparent 72% ), linear-gradient( 180deg, #f0f1f3 0%, #e2e4e7 100% ) !important; color:#17181b !important; } /* Header */ html[data-vip-theme="light"] .vip-header { background: rgba(239,241,244,.95) !important; border-bottom-color: rgba(0,0,0,.10) !important; } html[data-vip-theme="light"] .vip-brand-main { color:#17181b !important; } html[data-vip-theme="light"] .vip-nav a { color: rgba(23,24,27,.72); } html[data-vip-theme="light"] .vip-nav a:hover, html[data-vip-theme="light"] .vip-nav a.is-active { color:#111214 !important; background: rgba(255,106,26,.08) !important; } /* * VP logo itself deliberately remains dark. */ html[data-vip-theme="light"] .vip-logo-mark { background:#050505 !important; } html[data-vip-theme="light"] .vip-logo-p { color:#f6f6f6 !important; } /* Typography */ html[data-vip-theme="light"] body.vip-site h1, html[data-vip-theme="light"] body.vip-site h2, html[data-vip-theme="light"] body.vip-site h3, html[data-vip-theme="light"] body.vip-site h4, html[data-vip-theme="light"] body.vip-site strong { color:#17181b; } html[data-vip-theme="light"] .vip-muted, html[data-vip-theme="light"] .muted { color: rgba(23,24,27,.58) !important; } /* Main cards / blocks */ html[data-vip-theme="light"] .vip-card, html[data-vip-theme="light"] .vip-process-item, html[data-vip-theme="light"] .vip-status-panel, html[data-vip-theme="light"] .vip-booking-form, html[data-vip-theme="light"] .vip-booking-participants, html[data-vip-theme="light"] .vip-course-fact, html[data-vip-theme="light"] .vip-course-content-card, html[data-vip-theme="light"] .vip-course-note, html[data-vip-theme="light"] .vip-incompany-participants, html[data-vip-theme="light"] .vip-incompany-participant-row { background: rgba(255,255,255,.90) !important; color:#17181b !important; border-color: rgba(0,0,0,.12) !important; box-shadow: 0 8px 24px rgba(30,32,36,.045); } /* Inputs */ html[data-vip-theme="light"] body.vip-site input:not([type="checkbox"]):not([type="radio"]), html[data-vip-theme="light"] body.vip-site select, html[data-vip-theme="light"] body.vip-site textarea { background:#fff !important; color:#17181b !important; border-color: rgba(0,0,0,.23) !important; box-shadow:none !important; } html[data-vip-theme="light"] body.vip-site input::placeholder, html[data-vip-theme="light"] body.vip-site textarea::placeholder { color: rgba(23,24,27,.42) !important; } html[data-vip-theme="light"] body.vip-site select option { color:#17181b; background:#fff; } html[data-vip-theme="light"] body.vip-site input[type="date"] { color-scheme:light; } /* Buttons */ html[data-vip-theme="light"] .vip-btn-primary { color:#111 !important; } html[data-vip-theme="light"] .vip-btn-secondary { color:#17181b !important; background: rgba(255,255,255,.78) !important; border-color: rgba(0,0,0,.18) !important; } html[data-vip-theme="light"] .vip-btn-secondary:hover { color:#111 !important; background: rgba(255,106,26,.09) !important; border-color: var(--vip-orange) !important; } /* ========================================================= INCOMPANY Overrides its page-specific dark styles. ========================================================= */ html[data-vip-theme="light"] .vip-own { color:#17181b !important; } html[data-vip-theme="light"] .vip-own .panel, html[data-vip-theme="light"] .vip-own aside, html[data-vip-theme="light"] .vip-own .vip-choice, html[data-vip-theme="light"] .vip-own .vip-date-summary, html[data-vip-theme="light"] .vip-own .vip-summary-block { background:#fff !important; color:#17181b !important; border-color: rgba(0,0,0,.13) !important; } html[data-vip-theme="light"] .vip-own .vip-choice:hover { background: rgba(255,106,26,.05) !important; } html[data-vip-theme="light"] .vip-own .vip-quote-row { color:#17181b !important; border-color: rgba(0,0,0,.10) !important; } html[data-vip-theme="light"] .vip-own .vip-muted { color: rgba(23,24,27,.58) !important; } html[data-vip-theme="light"] .vip-own .vip-incompany-participants { background: rgba(255,255,255,.78) !important; } html[data-vip-theme="light"] .vip-own .vip-incompany-participant-row { background:#f7f7f8 !important; border-color: rgba(0,0,0,.11) !important; } /* ========================================================= FOOTER ========================================================= */ html[data-vip-theme="light"] .vip-footer { background: rgba(224,227,231,.94) !important; color: rgba(23,24,27,.66) !important; border-color: rgba(0,0,0,.10) !important; } /* ========================================================= LEGACY SIMPLE PUBLIC HEADER / PAYMENT ========================================================= */ html[data-vip-theme="light"] body:not(.vip-site) { background:#eceef1 !important; color:#17181b !important; } html[data-vip-theme="light"] body:not(.vip-site) .top { background:#e1e3e6 !important; border-bottom-color:#c6c9cd !important; } html[data-vip-theme="light"] body:not(.vip-site) .box, html[data-vip-theme="light"] body:not(.vip-site) .card { background:#fff !important; color:#17181b !important; border-color:#d0d3d7 !important; } html[data-vip-theme="light"] body:not(.vip-site) .muted { color:#666a70 !important; } html[data-vip-theme="light"] body:not(.vip-site) input, html[data-vip-theme="light"] body:not(.vip-site) select, html[data-vip-theme="light"] body:not(.vip-site) textarea { background:#fff !important; color:#17181b !important; border-color:#b8bcc2 !important; } /* ========================================================= MOBILE ========================================================= */ @media(max-width:620px) { .vip-nav .vip-theme-toggle { grid-column:1 / -1; width:100%; min-height:40px; } } /* VIP_LIGHT_READABILITY_V2_START */ /* ========================================================= LARGE TITLES THAT WERE STILL WHITE ========================================================= */ html[data-vip-theme="light"] .vip-status-number { color:#17181b !important; } /* ========================================================= LIVE CALCULATOR — INFORMATION BLOCK ========================================================= */ html[data-vip-theme="light"] #quoteStatus { background:#f1f2f4 !important; color:#4b4f56 !important; border-color: rgba(0,0,0,.13) !important; } html[data-vip-theme="light"] #quoteStatus p, html[data-vip-theme="light"] #quoteStatus span, html[data-vip-theme="light"] #quoteStatus strong { color:#4b4f56 !important; } /* ========================================================= VIP HOST TEGOED ========================================================= */ html[data-vip-theme="light"] #creditBox { background:#f3f4f5 !important; color:#34373c !important; border-color: rgba(255,106,26,.42) !important; } html[data-vip-theme="light"] #creditBox p, html[data-vip-theme="light"] #creditBox span { color:#4a4e54 !important; } html[data-vip-theme="light"] #creditBox h1, html[data-vip-theme="light"] #creditBox h2, html[data-vip-theme="light"] #creditBox h3, html[data-vip-theme="light"] #creditBox h4 { color:var(--vip-orange) !important; } html[data-vip-theme="light"] #creditText { color:#34373c !important; } html[data-vip-theme="light"] #creditText strong { color:var(--vip-orange) !important; } /* ========================================================= OTHER STATUS/CARD TEXT Keep headings readable on white cards ========================================================= */ html[data-vip-theme="light"] .vip-status-panel { color:#17181b !important; } html[data-vip-theme="light"] .vip-status-panel .vip-status-sub { color:#62666d !important; } html[data-vip-theme="light"] .vip-status-panel .vip-status-title { color:var(--vip-orange) !important; } /* ========================================================= KEEP ORANGE BRAND ELEMENTS ORANGE ========================================================= */ html[data-vip-theme="light"] .vip-eyebrow, html[data-vip-theme="light"] .vip-step { color:var(--vip-orange) !important; } /* VIP_LIGHT_READABILITY_V2_END */