/* ========================================================================== INNER TURTLE TRADER — SINGLE SOURCE OF TRUTH Violet + Cyan, dark. Created 2026-08. WHY THIS FILE EXISTS The site had grown five competing theme files and eleven pages that each redefined their own :root, producing eight different values for --gold and five for --ink. Nothing looked like one brand because nothing shared a definition. This file is the one place colour is decided. HOW TO USE IT Load it LAST in , after every other stylesheet, on every public page: It redefines the legacy token names used by edtech-theme.css and the older page styles, so most pages re-skin automatically without markup changes. RULE: new colour values go here and nowhere else. Do not add a :root block to a page. If you need a new colour, add a token below. ========================================================================== */ :root{ /* ---------- Surfaces (warm dark) ---------- Warm charcoal, not blue-black. The brown undertone is what stops this reading as "another neon signals site". */ --paper: #161310; /* page base */ --paper-alt: #1B1714; /* alternating band */ --surface: #221D18; /* cards / panels */ --surface-2: #2B2520; /* raised within a card */ --navy-950: #100D0B; --navy-900: #161310; --navy-800: #1E1A16; --navy-700: #2B2520; /* ---------- Text ---------- */ --ink: #F7F2EA; --ink-soft: rgba(247,242,234,.72); --ink-faint: rgba(247,242,234,.50); --on-dark: #F7F2EA; --on-dark-soft: rgba(247,242,234,.70); --on-accent: #1A1207; /* text on an amber fill */ /* ---------- Lines ---------- */ --line: rgba(247,242,234,.11); --line-strong: rgba(247,242,234,.22); --line-dark: rgba(247,242,234,.13); /* ---------- Brand: warm amber ---------- One accent colour only. Actions are WhatsApp green (--wa); amber is for emphasis and never competes with a button. The legacy --gold* names map straight onto it, which is why older pages inherit this untouched. */ --accent: #E0A44A; --accent-light: #F0BC6E; --accent-deep: #C4832A; --accent-2: #D98E3C; --accent-2-deep:#A96A22; --gold: #E0A44A; --gold-bright: #F0BC6E; --gold-deep: #F0BC6E; /* this name is used for TEXT on dark */ --gold-light: #F0BC6E; --gold-soft: rgba(224,164,74,.14); --indigo: #D98E3C; --indigo-ink: #F0BC6E; /* used for text on dark */ --indigo-soft: rgba(217,142,60,.16); /* ---------- WhatsApp — the only action colour on the site ---------- */ --wa: #25D366; --wa-deep: #1DA851; --wa-ink: #04140C; /* ---------- Status (reserved — never reuse as brand colour) ---------- */ --green: #4ADE80; --green-soft: rgba(74,222,128,.15); --danger: #F87171; --warning: #FBBF24; /* ---------- Glow / shadow ---------- */ --glow-accent: rgba(224,164,74,.16); --glow-violet: rgba(196,131,42,.14); --shadow-sm: 0 1px 2px rgba(0,0,0,.40), 0 1px 1px rgba(0,0,0,.30); --shadow-md: 0 10px 28px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.35); --shadow-lg: 0 26px 64px rgba(0,0,0,.60), 0 6px 18px rgba(0,0,0,.40); --shadow-gold: 0 14px 30px rgba(224,164,74,.22), 0 2px 10px rgba(224,164,74,.16); /* ---------- public-typography.css tokens ---------- */ --public-ink: #F7F2EA; --public-ink-strong: #FFFFFF; --public-secondary: rgba(247,242,234,.80); --public-body: rgba(247,242,234,.74); --public-muted: rgba(247,242,234,.54); --public-gold: #F0BC6E; --public-ivory: #161310; --ink-strong: #FFFFFF; --secondary: rgba(247,242,234,.80); /* ---------- Member dashboard (beginner-course.html) ---------- */ --deck-black: #100D0B; --deck-warm: #161310; --deck-navy: #161310; --deck-navy-2: #1E1A16; --deck-graphite:#2B2520; --deck-ivory: #F7F2EA; --deck-muted: rgba(247,242,234,.56); --deck-yellow: #E0A44A; --deck-yellow-2:#F0BC6E; --deck-red: #F87171; --deck-rule: rgba(224,164,74,.22); --portal-ink: #F7F2EA; --portal-ink-strong: #FFFFFF; --portal-secondary: rgba(247,242,234,.80); --portal-body: rgba(247,242,234,.74); --portal-muted: rgba(247,242,234,.54); --portal-gold: #F0BC6E; --portal-line: rgba(247,242,234,.13); --portal-sidebar-text: #F7F2EA; --portal-sidebar-muted: rgba(247,242,234,.56); --portal-sidebar-active:#F0BC6E; --yellow: #E0A44A; --red: #F87171; /* legacy aliases still referenced by older page styles */ --ivory: #161310; --ivory-soft: #221D18; --cream: #F7F2EA; --beige-50: #F7F2EA; --beige-100: rgba(247,242,234,.82); --beige-200: rgba(247,242,234,.74); --muted: rgba(247,242,234,.62); --body: rgba(247,242,234,.72); --blue: #E0A44A; --blue-deep: #C4832A; --white: #F7F2EA; } /* ---------- Page base ---------- */ body{ background:var(--paper); color:var(--ink); } /* ========================================================================== Component fixes for values that were hardcoded rather than tokenised. Each of these was a literal hex in an older stylesheet that cannot follow the tokens above, so it is corrected once here. ========================================================================== */ /* Button labels were #1E1400 (dark brown, for a gold fill). */ .edtech .btn-primary, .public-action--signup, .edtech .modal-submit, .edtech .bridge-button--primary, .button--primary, .hero-training-cta, .app-cta{ color:var(--on-accent) !important; } /* Brand mark glyph was #0c0d16 on a gold chip. */ .brand-mark{ background:linear-gradient(135deg,var(--accent-light),var(--accent-2) 130%) !important; color:var(--on-accent) !important; } /* Error / warning text was #B3261E — unreadable on a dark surface. */ .edtech .modal-error, .edtech .modal-warning, .modal-error, .status{ color:var(--danger) !important; } /* ========================================================================== public-typography.css sets a LIGHT-THEME body colour on every `p` and `li` with !important. On these dark pages that renders text at ~2:1 contrast. This block is loaded after it and restores readable values. ========================================================================== */ p, li, .hero-sub, .hero-panel p, .section-head p, .course-summary, .course-points, .course-support, .mentor-copy p, .video-copy p, .learn-card p, .testimonial-copy, .review-copy, .supporting-copy, .disclaimer, .risk-note, .footer-disclosures p, .section-copy, .testimonial-context, .reviews-trust-line, footer small{ color:var(--ink-soft) !important; } h1, h2, h3, h4, .section-heading, .course-title, .reviewer-name, .hero-title, .screen-title{ color:var(--ink) !important; } .course-price, .price, .program-price{ color:var(--ink) !important; } .eyebrow, .section-label, .course-label, .modal-label, .progress, .testimonial-label, .small-label, .broker-eyebrow{ color:var(--accent-light) !important; } .muted, .reassurance, .course-note, .field-note, .footer-note, .testimonial-disclosure, .review-trust-note{ color:var(--ink-faint) !important; } /* Form controls were built for light surfaces. */ input, select, textarea{ background:var(--surface-2) !important; border-color:var(--line-strong) !important; color:var(--ink) !important; } input::placeholder, textarea::placeholder{ color:var(--ink-faint) !important; } /* Panels that assumed a near-white background. */ .panel, .site-modal-panel, .modal-panel, .modal-dialog{ background:var(--surface) !important; border-color:var(--line) !important; color:var(--ink) !important; } /* Light illustration assets need a frame that does not glare on dark. */ .hero-visual-frame{ background:linear-gradient(160deg, rgba(237,239,255,.06), rgba(139,92,246,.08)) !important; border:1px solid var(--line) !important; } /* The hero sketch is a blue line drawing on cream. Inverting and rotating the hue back turns it into light linework on dark without needing a new asset. */ .hero-visual-frame img{ filter:invert(1) hue-rotate(180deg) saturate(.85) brightness(1.08); } /* ========================================================================== Pages that hardcoded a LIGHT header / chrome (courses, 1-to-1, mt5-guide). ========================================================================== */ #siteHeader{ background:rgba(10,8,23,.86) !important; border-bottom-color:var(--line) !important; box-shadow:0 10px 34px rgba(0,0,0,.5) !important; } .mobile-menu{ background:rgba(14,11,30,.98) !important; border-color:var(--line) !important; } /* Chips/buttons that used --ink as a DARK fill. --ink is now light, so a literal white label on it would vanish; these become accent fills instead. */ .public-action--signup, .public-action--signup:link, .public-action--signup:visited, .public-action--signup:hover, .public-action--signup:focus, .public-action--signup:focus-visible, .public-action--signup:active, .course-flag{ background:linear-gradient(135deg,var(--accent-light),var(--accent) 60%,var(--accent-deep)) !important; color:var(--on-accent) !important; border-color:transparent !important; } .public-action{ border-color:var(--line-strong) !important; color:var(--ink) !important; } .public-action--login{ color:var(--ink-soft) !important; } .public-nav-link{ color:var(--ink-soft) !important; } .public-nav-link:hover, .public-nav-link:focus-visible{ color:var(--accent-light) !important; } /* the active pill has a filled background, so its label must be on-accent */ .public-nav-link[aria-current="page"]{ background:var(--accent) !important; color:var(--on-accent) !important; } /* Legacy .button--primary had a bespoke dark-navy gradient on some pages, so the on-accent label rendered black-on-navy. Give it the canonical accent fill. */ .button--primary{ background:linear-gradient(135deg,var(--accent-light),var(--accent) 60%,var(--accent-deep)) !important; color:var(--on-accent) !important; border-color:transparent !important; } .button--secondary{ background:transparent !important; border:1px solid var(--line-strong) !important; color:var(--ink) !important; } /* Panels that hardcoded a near-white translucent fill (invisible with light text). */ .note-panel, .plain-panel, .risk-panel, .final-panel, .definition-card, .offer-card, .training-shell{ background:var(--surface) !important; border-color:var(--line) !important; } .note-panel *, .plain-panel *, .risk-panel *, .final-panel *, .definition-card *{ color:var(--ink-soft) !important; } .note-panel strong, .plain-panel strong, .risk-panel strong, .final-panel strong, .definition-card strong, .note-panel h2, .note-panel h3, .definition-card h2, .definition-card h3{ color:var(--ink) !important; } /* ========================================================================== account-pages.css (signup / login / password reset) hardcodes the old gold ramp (#f2cb63, #ffd96a) and a warm ivory. Remap to the brand palette. ========================================================================== */ .account-kicker, .password-toggle, .account-header-link, .account-link-button, .account-secondary a{ color:var(--accent-light) !important; } .account-panel, .success-panel{ background:var(--surface) !important; border-color:var(--line) !important; } .account-submit{ background:linear-gradient(135deg,var(--accent-light),var(--accent) 60%,var(--accent-deep)) !important; color:var(--on-accent) !important; border-color:transparent !important; } .account-copy, .password-hint, .account-status, .account-footer, .account-secondary{ color:var(--ink-soft) !important; } .account-shell h1, .account-shell h2, .account-field label, .success-email{ color:var(--ink) !important; } .account-field input{ background:var(--surface-2) !important; border-color:var(--line-strong) !important; } /* ========================================================================== Member dashboard component fixes. ========================================================================== */ .journey-title, .screen-title, .signals-panel h1, .journey-action-line strong, .command-bar-title, .editorial-panel h1, .open-panel h1{ color:var(--ink) !important; } .journey-lede, .journey-copy, .device-note{ color:var(--ink-soft) !important; } .course-label, .command-chip, .journey-action-line span{ color:var(--accent-light) !important; } .command-chip strong{ color:var(--ink) !important; } .primary-button{ background:linear-gradient(135deg,var(--accent-light),var(--accent) 60%,var(--accent-deep)) !important; color:var(--on-accent) !important; border-color:transparent !important; } .secondary-button, .small-button{ background:transparent !important; border:1px solid var(--line-strong) !important; color:var(--ink) !important; } .journey-node{ color:var(--ink-faint) !important; } .journey-node.is-lit{ color:var(--accent-light) !important; } /* The wordmark accent was hardcoded gold in itt-cinematic-theme.css. */ .brand span{ color:var(--accent-light) !important; text-shadow:none !important; } .header-quote{ background:rgba(139,92,246,.14) !important; border-color:rgba(139,92,246,.34) !important; color:var(--ink-soft) !important; } /* Hero washes that hardcoded the old gold tint. */ .guide-hero, .courses-hero, .review-hero, .mentor-hero{ background-image: radial-gradient(circle at 78% 16%, var(--glow-accent), transparent 34%), radial-gradient(circle at 12% 8%, var(--glow-violet), transparent 40%) !important; background-color:var(--paper) !important; } /* Tier columns / dividers that assumed a light page. */ .course-column.is-featured{ background:rgba(139,92,246,.07) !important; } .course-columns{ border-color:var(--line) !important; } .course-column + .course-column{ border-left-color:var(--line) !important; } .path-node{ background:var(--surface) !important; border-color:var(--line) !important; } .path-node.is-skipped{ background:transparent !important; } .mentorship-strip{ background:var(--surface) !important; border-color:var(--line) !important; } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; } } /* ========================================================================== WHATSAPP FUNNEL — floating button + hero contact-card Added for the WhatsApp-first pivot (Aug 2026). Injected by assets/js/whatsapp-widget.js on every public page. ========================================================================== */ .itt-wa-float{ position:fixed; z-index:9999; right:20px; bottom:20px; width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#25D366; color:#04140C; box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 0 4px rgba(37,211,102,.16); text-decoration:none; transition:transform .15s ease, box-shadow .15s ease; } .itt-wa-float svg{ width:30px; height:30px; } .itt-wa-float:hover, .itt-wa-float:focus-visible{ transform:translateY(-2px) scale(1.04); box-shadow:0 14px 36px rgba(0,0,0,.4), 0 0 0 4px rgba(37,211,102,.24); } @media (max-width:600px){ .itt-wa-float{ right:14px; bottom:14px; width:52px; height:52px; } .itt-wa-float svg{ width:26px; height:26px; } } /* -------------------------------------------------------------------------- ACTIONS ARE GREEN. Every primary CTA on the public site now ends in a WhatsApp thread, so the primary button colour IS WhatsApp green. Amber stays for emphasis only, so there is never more than one thing on screen asking to be tapped. -------------------------------------------------------------------------- */ .edtech .btn-primary, .button--primary, .public-action--signup, .btn-primary{ background:var(--wa) !important; background-image:none !important; color:var(--wa-ink) !important; box-shadow:0 10px 26px rgba(37,211,102,.22) !important; border-color:var(--wa) !important; } .edtech .btn-primary:hover, .button--primary:hover, .public-action--signup:hover, .btn-primary:hover{ background:var(--wa-deep) !important; box-shadow:0 14px 32px rgba(37,211,102,.30) !important; } /* Hero WhatsApp card (index.html) — the single action on the page. */ .wa-contact-card{ margin-top:26px; padding:22px; border-radius:18px; background:var(--surface); border:1px solid var(--line); max-width:460px; box-shadow:var(--shadow-md); } .wa-contact-card__label{ display:flex; align-items:center; gap:8px; margin-bottom:14px; font-family:var(--font-display); font-weight:700; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); } .wa-contact-card__label svg{ width:17px; height:17px; color:var(--wa); flex:0 0 auto; } .wa-contact-form{ display:grid; gap:11px; } .wa-contact-form input, .wa-contact-form select{ width:100%; padding:14px 15px; border-radius:11px; border:1px solid var(--line-strong); background:var(--paper); color:var(--ink); font-size:1rem; font-family:inherit; } .wa-contact-form input::placeholder{ color:var(--ink-faint); } .wa-contact-form input:focus, .wa-contact-form select:focus{ outline:2px solid var(--accent); outline-offset:1px; } /* itt-cinematic-theme.css (loaded on the sl-tp-training/reviews/mentor pages) has a blanket `button[type="submit"]{background:red-gradient !important}` rule. !important, so it beats this selector on specificity/order alone — matched here with !important too. */ .wa-contact-form button{ display:flex; align-items:center; justify-content:center; gap:9px; padding:16px 18px; border:0 !important; border-radius:11px; cursor:pointer; background:var(--wa) !important; background-image:none !important; color:var(--wa-ink) !important; font-weight:700; font-size:1.04rem; font-family:var(--font-display); text-shadow:none !important; box-shadow:0 10px 26px rgba(37,211,102,.22) !important; transition:background .15s ease; } .wa-contact-form button svg{ width:20px; height:20px; } .wa-contact-form button:hover{ background:var(--wa-deep) !important; } .wa-contact-card__note{ margin:12px 0 0; font-size:.78rem; color:var(--ink-faint); } /* Secondary text link under the card — deliberately quiet. */ .hero-alt-link{ display:inline-block; margin-top:20px; color:var(--ink-faint); font-size:.94rem; font-weight:600; text-decoration:none; } .hero-alt-link:hover{ color:var(--accent-light); } /* Trust line. */ .hero-trust-line{ display:flex; align-items:center; gap:10px; margin-top:26px; padding-top:20px; border-top:1px solid var(--line); font-size:.88rem; color:var(--ink-soft); } /* Post-video WhatsApp CTA on sl-tp-training.html — its original CSS painted it as a blue gradient (leftover from the old checkout-button styling). */ .post-training-review-cta{ background:var(--wa) !important; background-image:none !important; border-color:var(--wa) !important; color:var(--wa-ink) !important; box-shadow:0 10px 26px rgba(37,211,102,.22) !important; text-shadow:none !important; } .post-training-review-cta:hover{ background:var(--wa-deep) !important; filter:none !important; } .hero-trust-line .dot{ width:8px; height:8px; border-radius:50%; background:var(--wa); flex:0 0 auto; } /* -------------------------------------------------------------------------- Header — the floating nav pill still carried the old blue-black (rgba(11,15,27,.78)) from edtech-theme.css, which read cold against the warm page. Matched to --surface, and its CTA made green so there is exactly one action colour on the site. -------------------------------------------------------------------------- */ .edtech #siteHeader nav{ background:rgba(34,29,24,.86) !important; border-color:var(--line) !important; } #siteHeader .public-action--signup{ background:var(--wa) !important; background-image:none !important; color:var(--wa-ink) !important; border-color:var(--wa) !important; box-shadow:none !important; } #siteHeader .public-action--signup:hover{ background:var(--wa-deep) !important; } /* The hero's ambient wash was two cool-violet radials. Warm them. */ .hero::before{ background: radial-gradient(ellipse at 30% 10%, rgba(224,164,74,.10), transparent 55%), radial-gradient(ellipse at 85% 30%, rgba(196,131,42,.13), transparent 50%) !important; } /* Footer wash was a violet radial (rgba(76,63,224,.18)) left from the old palette. */ .edtech-footer::before{ background: radial-gradient(ellipse at 15% 0%, rgba(224,164,74,.10), transparent 45%), radial-gradient(ellipse at 85% 100%, rgba(196,131,42,.12), transparent 45%) !important; } /* EC Markets mark sits on a light chip rather than being inverted — the source PNG is black-on-white, so filter:invert() turns it into a solid block. */ .broker-trust-strip-logo, .broker-partner-logo, .broker-cta-logo{ background:#fff !important; padding:7px 12px !important; border-radius:9px !important; filter:none !important; height:34px !important; width:auto !important; object-fit:contain !important; } /* -------------------------------------------------------------------------- itt-cinematic-theme.css paints a deep-blue "space" gradient on the body and header of sl-tp-training / real-reviews / about-the-mentor, with !important. Those blue bands were the last cool surfaces left on the site. Rewritten warm. -------------------------------------------------------------------------- */ body.finance-space-background{ background: radial-gradient(circle at 86% 18%, rgba(224,164,74,.13), transparent 29%), radial-gradient(circle at 8% 58%, rgba(196,131,42,.10), transparent 28%), radial-gradient(circle at 52% 92%, rgba(224,164,74,.07), transparent 30%), linear-gradient(160deg, #131009, #1E1913 48%, #131009) !important; color:var(--ink) !important; } body.finance-space-background #siteHeader, body.finance-space-background .site-header, body.theme-neon-test #siteHeader{ background: radial-gradient(circle at 72% 0%, rgba(224,164,74,.08), transparent 32%), linear-gradient(180deg, rgba(22,19,16,.96), rgba(34,29,24,.86)) !important; border-bottom:1px solid var(--line) !important; }