/* ============================================================ TryCleaning — DARK MODE (paired with theme.js; active on ). Approach: navy was used as BOTH body text and as button/nav backgrounds. We remap --navy to a near-white so all the text flips in one move, then re-darken the handful of elements that used navy as a background. Light surfaces (white / off-white) become dark/mid blue; greys become light greys. ============================================================ */ :root[data-theme="dark"]{ --tc-bg:#0d1826; /* page background — deep blue */ --tc-surface:#172642; /* cards / panels — mid blue */ --tc-surface-2:#101d33; /* inputs / insets — darker blue */ --tc-btn:#25396180; /* n/a placeholder */ --tc-btn-solid:#243a63; /* re-darkened buttons that used navy */ --tc-text:#e9eefb; /* near-white text */ --tc-muted:#9fb0cc; /* light grey secondary text */ --tc-border:rgba(255,255,255,0.12); --tc-bad:#ff9b8f; /* error text on dark surfaces (light pages fall back to #c0392b) */ --tc-good:#7ddc9a; /* success text on dark surfaces */ /* remaps of the shared tokens */ --navy:#e9eefb; /* was dark text -> light */ --navy-deep:#0a1526; /* stays dark: hero / footer / nav / sidebar */ --off-white:#172642; /* light surface -> mid blue */ --white:#FFFFFF; /* kept: also used as white-on-dark text */ --line:rgba(255,255,255,0.12); --grey:#9fb0cc; --sky-light:#7fd3fb; --good-light:#123020; --amber-light:#3a2c14; /* academy-only tokens (unused by other pages -> safe to remap globally) */ --paper:#0d1826; --ink:#e9eefb; --ink-soft:#9fb0cc; --navy-light:#16264a; } /* ============ ACADEMY (staff portal — own design system) ============ */ :root[data-theme="dark"] .academy-page{ --white:#172642; --sky-light:#12233f; } /* white / literal-#fff card surfaces */ :root[data-theme="dark"] .academy-page .login-card, :root[data-theme="dark"] .academy-page .sidebar, :root[data-theme="dark"] .academy-page .dash-card, :root[data-theme="dark"] .academy-page .s-card, :root[data-theme="dark"] .academy-page .trainee-card, :root[data-theme="dark"] .academy-page .pv-card, :root[data-theme="dark"] .academy-page .portalnav, :root[data-theme="dark"] .academy-page .profile-menu{background:var(--tc-surface)!important;border-color:var(--tc-border)!important;} /* elements that used navy as a BACKGROUND (navy is now light) -> re-darken */ :root[data-theme="dark"] .academy-page .topbar, :root[data-theme="dark"] .academy-page .pseg.active, :root[data-theme="dark"] .academy-page .pnav.active, :root[data-theme="dark"] .academy-page .module-item.active .module-num, :root[data-theme="dark"] .academy-page .trainee-avatar, :root[data-theme="dark"] .academy-page .admin-panel-header, :root[data-theme="dark"] .academy-page .btn-quiz, :root[data-theme="dark"] .academy-page .pv-btn, :root[data-theme="dark"] .academy-page .login-mark{background:var(--tc-btn-solid)!important;color:#fff!important;} /* dark gradients / full-screen panels */ :root[data-theme="dark"] .academy-page #login-screen, :root[data-theme="dark"] .academy-page .welcome-banner, :root[data-theme="dark"] .academy-page .mobile-drawer, :root[data-theme="dark"] .academy-page .mobile-drawer-header{background-color:#0a1526!important;background-image:linear-gradient(150deg,#0a1526 0%,#15264a 100%)!important;} :root[data-theme="dark"] .academy-page .admin-panel{background:var(--tc-bg)!important;} /* insets / chips / pills that used --paper (now dark) keep readable text */ :root[data-theme="dark"] .academy-page .module-num, :root[data-theme="dark"] .academy-page .mod-chip, :root[data-theme="dark"] .academy-page .tool-ic, :root[data-theme="dark"] .academy-page .stepper button, :root[data-theme="dark"] .academy-page .trainee-bar{background:var(--tc-surface-2)!important;} /* hardcoded light callouts / feedback / pills -> dark */ :root[data-theme="dark"] .academy-page .callout.warn, :root[data-theme="dark"] .academy-page .callout.danger, :root[data-theme="dark"] .academy-page .quiz-opt.incorrect, :root[data-theme="dark"] .academy-page .quiz-feedback.incorrect, :root[data-theme="dark"] .academy-page .placeholder-tag, :root[data-theme="dark"] .academy-page .rp-new, :root[data-theme="dark"] .academy-page .rp-ordered, :root[data-theme="dark"] .academy-page .rp-fulfilled{background:var(--tc-surface-2)!important;} /* hardcoded dark copy in academy */ :root[data-theme="dark"] .academy-page .content-body, :root[data-theme="dark"] .academy-page .quiz-result .result-msg, :root[data-theme="dark"] .academy-page .module-title, :root[data-theme="dark"] .academy-page .cat-label, :root[data-theme="dark"] .academy-page .tm-name, :root[data-theme="dark"] .academy-page .req-items{color:var(--tc-text)!important;} /* ---- base ---- */ :root[data-theme="dark"] body{background:var(--tc-bg);color:var(--tc-text);} :root[data-theme="dark"] section, :root[data-theme="dark"] main, :root[data-theme="dark"] .services, :root[data-theme="dark"] .reviews, :root[data-theme="dark"] #testimonials, :root[data-theme="dark"] .products, :root[data-theme="dark"] .product-showcase, :root[data-theme="dark"] .journal, :root[data-theme="dark"] .stats{background-color:var(--tc-bg);} /* ---- surfaces that were white / off-white ---- */ :root[data-theme="dark"] .card, :root[data-theme="dark"] .panel, :root[data-theme="dark"] .mode-card, :root[data-theme="dark"] .result-hero, :root[data-theme="dark"] .result-card, :root[data-theme="dark"] .product-card, :root[data-theme="dark"] .blog-card, :root[data-theme="dark"] .ac-card, :root[data-theme="dark"] .article-card, :root[data-theme="dark"] .testi-card, :root[data-theme="dark"] .service-card, :root[data-theme="dark"] .review, :root[data-theme="dark"] .train-card, :root[data-theme="dark"] .train-detail, :root[data-theme="dark"] .appitem, :root[data-theme="dark"] .pos-edit, :root[data-theme="dark"] .tpl-block, :root[data-theme="dark"] .ttpl, :root[data-theme="dark"] .stat-tile, :root[data-theme="dark"] .stat, :root[data-theme="dark"] .stat-card, :root[data-theme="dark"] .filters, :root[data-theme="dark"] .key, :root[data-theme="dark"] .dash-card, :root[data-theme="dark"] .wait-row, :root[data-theme="dark"] .pos-card, :root[data-theme="dark"] .jd-modal, :root[data-theme="dark"] .bm-them, :root[data-theme="dark"] .skills-box, :root[data-theme="dark"] .file-drop, :root[data-theme="dark"] .section, :root[data-theme="dark"] .app-row, :root[data-theme="dark"] .resume-cur, :root[data-theme="dark"] .btn-apply-red, :root[data-theme="dark"] .callout, :root[data-theme="dark"] .tc-sec, :root[data-theme="dark"] .thread, :root[data-theme="dark"] .pill, :root[data-theme="dark"] .article-featured, :root[data-theme="dark"] .article-full, :root[data-theme="dark"] .article-callout, :root[data-theme="dark"] .doc, :root[data-theme="dark"] .review-block{background:var(--tc-surface);border-color:var(--tc-border);} /* hardcoded dark body copy (#2A3A52 / #33406B) on blog/academy/privacy */ :root[data-theme="dark"] .article-body, :root[data-theme="dark"] .article-callout, :root[data-theme="dark"] .article-full, :root[data-theme="dark"] .content-body{color:var(--tc-text)!important;} /* long-form content wrappers: flip all descendant text to light */ :root[data-theme="dark"] .doc, :root[data-theme="dark"] .doc h1, :root[data-theme="dark"] .doc h2, :root[data-theme="dark"] .doc h3, :root[data-theme="dark"] .doc p, :root[data-theme="dark"] .doc li, :root[data-theme="dark"] .doc strong, :root[data-theme="dark"] .doc td, :root[data-theme="dark"] .article-full p, :root[data-theme="dark"] .article-full li, :root[data-theme="dark"] .article-full strong{color:var(--tc-text);} /* ---- dark gradients: these used var(--navy) which is now light, so pin them back to a dark gradient (no light band) ---- */ :root[data-theme="dark"] .hero, :root[data-theme="dark"] .dash-hero, :root[data-theme="dark"] .quote-hero, :root[data-theme="dark"] .af-visual, :root[data-theme="dark"] .ac-visual, :root[data-theme="dark"] .cta-strip, :root[data-theme="dark"] .welcome-banner, :root[data-theme="dark"] .code-card{background-color:#0a1526;background-image:linear-gradient(150deg,#0a1526 0%,#15264a 100%)!important;} /* ---- toggle switches (manager settings, client and applicant notification switches): the pale track vanished on dark surfaces, leaving a floating white knob. The staff app already carries this rule itself. ---- */ :root[data-theme="dark"] .pswitch-track{background:rgba(255,255,255,0.18);} /* ---- inputs ---- */ :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea, :root[data-theme="dark"] .tinput{background-color:var(--tc-surface-2);color:var(--tc-text);border-color:rgba(255,255,255,0.16);} :root[data-theme="dark"] .additem select, :root[data-theme="dark"] .additem input, :root[data-theme="dark"] .cat-size{background-color:var(--tc-surface-2)!important;color:var(--tc-text)!important;border-color:rgba(255,255,255,0.16)!important;} :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder{color:#7f8db0;} :root[data-theme="dark"] option{background:#101d33;color:var(--tc-text);} /* ---- elements that used NAVY as a BACKGROUND -> re-darken ---- */ :root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .btn:not(.btn-ghost):not(.btn-sky):not(.btn-book):not(.btn-call), :root[data-theme="dark"] .ck-btn, :root[data-theme="dark"] .home, :root[data-theme="dark"] .seg-btn.active, :root[data-theme="dark"] .seg button.active, :root[data-theme="dark"] .bm-me, :root[data-theme="dark"] .bubble.client, :root[data-theme="dark"] .toast, :root[data-theme="dark"] .contact-card, :root[data-theme="dark"] .af-avatar, :root[data-theme="dark"] .ac-avatar, :root[data-theme="dark"] .article-avatar, :root[data-theme="dark"] .blog-avatar, :root[data-theme="dark"] .testi-avatar, :root[data-theme="dark"] .role-pill, :root[data-theme="dark"] .filt.active, :root[data-theme="dark"] .seg-btn.active, :root[data-theme="dark"] .badge2{background:var(--tc-btn-solid)!important;color:#fff!important;} :root[data-theme="dark"] .btn-primary *, :root[data-theme="dark"] .contact-card *{color:#fff;} /* client portal incoming ("team") chat bubble was hardcoded #fff */ :root[data-theme="dark"] .bubble.team{background:var(--tc-surface-2)!important;border-color:var(--tc-border)!important;color:var(--tc-text)!important;} /* ghost / outline buttons stay see-through with light text (declared AFTER .btn) */ :root[data-theme="dark"] .btn-ghost{background:transparent!important;color:var(--tc-text)!important;border-color:var(--tc-border)!important;} /* sky CTA keeps dark text for contrast */ :root[data-theme="dark"] .nav-cta{color:#0b1526!important;} /* every sky button: --navy flips to light text in dark mode, so pin the text dark on the sky fill */ :root[data-theme="dark"] .btn-sky{color:#0b1526!important;} /* ---- muted / secondary text ---- */ :root[data-theme="dark"] .section-sub, :root[data-theme="dark"] .card-sub, :root[data-theme="dark"] .psub, :root[data-theme="dark"] .muted, :root[data-theme="dark"] .tr-meta, :root[data-theme="dark"] .rev-meta, :root[data-theme="dark"] .stat-label, :root[data-theme="dark"] .testi-src, :root[data-theme="dark"] .ai-meta{color:var(--tc-muted);} /* ---- trust bar (light strip on homepage) ---- */ :root[data-theme="dark"] .trust-bar{background:#0a1424;border-color:var(--tc-border);} /* ---- Instant Quote tool controls (hardcoded white-bg buttons / rows) ---- */ :root[data-theme="dark"] .stepper-btn, :root[data-theme="dark"] .task-row, :root[data-theme="dark"] .task-qty button, :root[data-theme="dark"] .btn-call, :root[data-theme="dark"] .choice, :root[data-theme="dark"] .mode-card{background:var(--tc-surface)!important;color:var(--tc-text)!important;border-color:var(--tc-border)!important;} :root[data-theme="dark"] .stepper-btn, :root[data-theme="dark"] .task-qty button, :root[data-theme="dark"] .item-remove{background:var(--tc-surface-2)!important;color:var(--tc-text)!important;border-color:var(--tc-border)!important;} :root[data-theme="dark"] .task-row.selected, :root[data-theme="dark"] .choice.selected, :root[data-theme="dark"] .pill.selected{background:rgba(79,195,247,0.16)!important;color:#fff!important;border-color:var(--sky)!important;} /* light status / explainer boxes (amber / red / inline) -> dark tint, keep accent border */ :root[data-theme="dark"] .map-status.fee, :root[data-theme="dark"] .explainer[style*="FFF6E9"], :root[data-theme="dark"] [style*="#FFF6E9"], :root[data-theme="dark"] [style*="FFF6E9"]{background:#2a2213!important;background-image:none!important;color:var(--tc-text)!important;} :root[data-theme="dark"] .map-status.no, :root[data-theme="dark"] [style*="FDEDEC"]{background:#2e1a18!important;color:var(--tc-text)!important;} /* applicant status pills (light) -> dark tint, keep their accent text colour */ :root[data-theme="dark"] .s-reviewing{background:#2a2213!important;} :root[data-theme="dark"] .s-declined, :root[data-theme="dark"] .s-new{background:var(--tc-surface-2)!important;} :root[data-theme="dark"] .map-status, :root[data-theme="dark"] .explainer{color:var(--tc-text)!important;} :root[data-theme="dark"] .pill{color:var(--tc-muted)!important;} /* sky "Book" button keeps dark text; darkens on hover */ :root[data-theme="dark"] .btn-book{color:#0b1526!important;} :root[data-theme="dark"] .btn-book:hover{background:var(--tc-btn-solid)!important;color:#fff!important;} :root[data-theme="dark"] .btn-call:hover{border-color:var(--sky)!important;} /* ---- misc ---- */ :root[data-theme="dark"] hr{border-color:var(--tc-border);} :root[data-theme="dark"] a[style*="#0D1B4B"]{color:var(--sky)!important;} /* Respect reduced-motion preferences: stop decorative hero animation. */ @media (prefers-reduced-motion: reduce){ .hero-orb,.bubble,.hero-phone-ico{animation:none !important;} html{scroll-behavior:auto;} } /* ── Social icon circles (nav ≥1380px + footer) ─────────────── */ .tc-social{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;} .tcs{width:31px;height:31px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(79,195,247,0.45);color:#fff;text-decoration:none;transition:all 0.25s ease;} .tcs svg{width:14px;height:14px;fill:currentColor;display:block;} .tcs-letter{font-family:'Playfair Display',Georgia,serif;font-weight:900;font-size:1.02rem;line-height:1;padding-bottom:2px;} a.tcs:hover{background:rgba(79,195,247,0.16);border-color:#4FC3F7;color:#4FC3F7;transform:translateY(-2px);} .tcs.soon{opacity:0.38;cursor:default;} nav .tc-social{margin-right:0.35rem;} @media(max-width:1379px){nav .tc-social{display:none;}} footer .tc-social{margin-top:1.1rem;} footer .tcs{border-color:rgba(255,255,255,0.22);color:rgba(255,255,255,0.78);} /* ---- dark mode: homepage FAQ accordions (added 2026-08-27) ---- */ :root[data-theme="dark"] .faq-item{background:var(--tc-surface,#172642)!important;border-color:rgba(255,255,255,0.09)!important;} :root[data-theme="dark"] .faq-a{color:#b9c6e4!important;} /* ---- dark mode: chat widget (chat.js injects its styles after this file, so !important) ---- */ :root[data-theme="dark"] .tc-panel{background:var(--tc-surface,#172642)!important;} :root[data-theme="dark"] .tc-msgs{background:var(--tc-surface,#172642)!important;} :root[data-theme="dark"] .tc-msg.model{background:#101d33!important;color:#e9eefb!important;} :root[data-theme="dark"] .tc-msg.model a{color:#7fd3fb!important;} :root[data-theme="dark"] .tc-cta{background:#101d33!important;border-bottom-color:rgba(255,255,255,0.09)!important;} :root[data-theme="dark"] .tc-cta a.b{background:#172642!important;color:#e9eefb!important;border-color:#2a3a5c!important;} :root[data-theme="dark"] .tc-chip{background:#101d33!important;color:#e9eefb!important;border-color:#2a3a5c!important;} :root[data-theme="dark"] .tc-chip:hover{background:#172642!important;border-color:var(--tc-sky,#4FC3F7)!important;} :root[data-theme="dark"] .tc-chip.link{background:#4FC3F7!important;color:#0D1B4B!important;border-color:#4FC3F7!important;} :root[data-theme="dark"] .tc-input{background:#101d33!important;border-top-color:rgba(255,255,255,0.09)!important;} :root[data-theme="dark"] .tc-input input{background:#0d1826!important;color:#e9eefb!important;border-color:#2a3a5c!important;} :root[data-theme="dark"] .tc-input input::placeholder{color:#9fb0cc!important;} /* ── Logo mark: real "TRY" from the brand logo, replacing the text wordmark ── */ .nav-logo{display:inline-flex;align-items:center;gap:0.14em;} .nav-logo .nl-try{height:1.15em;width:auto;display:block;transform:translateY(-0.02em);} .footer-logo{display:inline-flex;align-items:center;gap:0.14em;} .footer-logo .nl-try{height:1.2em;width:auto;display:block;}