/* TradeNeon portal design tokens — canonical, dark-mode only. * * Phase 12 (2026-07-03). The single source of truth for portal design * tokens. The legacy light-mode variables.css it superseded was DELETED in * Phase 20 (along with the whole override layer); --sidebar-width (220px) * was carried over here so portal.css owns the sidebar with no legacy dep. * * The :root block below is pasted VERBATIM from Marnie's design-system.md * §2 (itself an export of the production dark theme the pre-Phase-20 sheets * rendered). Because it codifies what dark pages already render, components * built against these tokens come out near-pixel-identical to today. * * No new code may reference the legacy variables.css tokens * (--primary-color, --bg-color, --text-color, --highlight-color*, * --default-*). Add a token here instead of a literal. */ :root { /* --- Base surface --- */ --bg: rgb(9, 13, 86); /* page background (deep navy) */ --bg-translucent: rgba(9, 13, 86, 0.88); /* --bg at 88% — floating chrome over scrolling content (mobile burger) */ --surface-dropdown: #0e1268; /* popovers, calendars, menus */ /* --- Text (white at decreasing opacity) --- */ --text: #fff; /* primary */ --text-on-card: rgba(255, 255, 255, 0.85); /* body copy inside cards */ --text-muted: rgba(255, 255, 255, 0.70); /* secondary / subheads */ --text-tertiary: rgba(255, 255, 255, 0.55); /* help text, captions */ --text-faint: rgba(255, 255, 255, 0.42); /* placeholders, disabled labels */ --text-paper: #F3F6FF; /* near-white for pricing/checkout */ /* --- Accent --- */ --accent: #FF3C8D; /* brand neon pink */ --accent-2: #FF846A; /* gradient partner (orange) */ --accent-cta-text: #080B14; /* dark text on the pink gradient */ --accent-deep: #4a0080; /* purple, text on white pills */ /* --- Surfaces & borders (white-alpha glass) --- */ --card-surface: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 100%); --card-surface-bright:linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%); --card-border: rgba(255, 255, 255, 0.20); --card-border-hover: rgba(255, 255, 255, 0.40); --hairline: rgba(255, 255, 255, 0.15); /* dividers, panel headers */ /* --- Inputs --- */ --input-bg: rgba(255, 255, 255, 0.06); --input-bg-focus: rgba(255, 255, 255, 0.10); --input-border: rgba(255, 255, 255, 0.20); --input-border-focus: rgba(255, 255, 255, 0.50); --input-placeholder: rgba(255, 255, 255, 0.40); /* --- Buttons (secondary / outline) --- */ --btn-bg: rgba(255, 255, 255, 0.15); --btn-bg-hover: rgba(255, 255, 255, 0.25); --btn-border: rgba(255, 255, 255, 0.30); /* --- Semantic --- */ --success-bg: rgba(46, 204, 113, 0.18); --success-text: #b8f5cf; --green: #19E08C; /* bull/success accent (Phase 15 shop "✓ im Paket"); fixes the mockup's undefined var(--green) */ --danger-bg: rgba(255, 60, 141, 0.15); --danger-border: rgba(255, 60, 141, 0.40); --danger-text: #ffd6e6; --info-bg: rgba(102, 102, 255, 0.15); --info-border: rgba(102, 102, 255, 0.40); --info-text: #c5c5ff; /* --- Type --- */ --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; /* --- Radius --- */ --radius-sm: 6px; /* inputs, small chips */ --radius-md: 12px; /* cards, panels */ --radius-lg: 16px; /* pricing cards */ --radius-pill: 999px; /* pill buttons */ /* --- Elevation --- */ --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.30); --shadow-glow: 0 10px 40px rgba(255, 60, 141, 0.20); /* accent glow on hover */ --shadow-soft: 0 5px 15px rgba(0, 0, 0, 0.15); --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.40); /* popovers/calendars */ /* --- Motion --- */ --transition: 0.2s ease; /* --------------------------------------------------------------------- * Portal additions (phase 12) — not part of the design-system §2 export. * ------------------------------------------------------------------- */ /* Product palette (used to theme per-context buttons/accents). */ --loi-pink: #FF3C8D; /* Level of Interest */ --fi-blue: #6666FF; /* Futures Insights (gradient partner) */ --fi-turq: #17F8E0; /* Futures Insights (gradient start) */ /* Lab of Trades (LOT retail line, sold by TradeNeon Software L.L.C-FZ). * Values are Marnie's shop/order-step mockups * (02_Portal-UI/Mockups/Shop-Tab), lifted into tokens rather than * hardcoded per page. --lot is the gradient start, --lot-neon the bright * end; both need near-black button text like the FI turquoise does. */ --lot: #00AB6E; --lot-neon: #00FDA3; --lot-border: rgba(0, 253, 163, 0.34); --lot-soft: rgba(0, 171, 110, 0.12); --lot-glow: rgba(0, 253, 163, 0.28); /* Legal links (Widerruf & Co. — L-16 §2, Marnie 2026-08-21): pink reads * as a warning on a legal surface, and #FF3C8D only reaches 4.3:1 on the * summary card. #8A8AFF measures 5.95:1 on --bg and ≥5:1 at the link's * position on the card gradients. Explicitly NOT --fi-blue #6666FF * (3.6–4.1:1, below WCAG AA). CTAs keep pink — this token is for legal * reference links only. * * The LOT order pages were briefly green (2026-09-10, morning) and are * back on this token the same day: Marnie's point was that PINK reads as * a warning, not that the links wanted the product colour. So the rule * has no exception — every legal link in the portal is this blue. What * lot_order.css still needs is the SELECTOR, not a second colour; read * the specificity note there before touching either file. * * ⚠️ The 5.95:1 above is against --bg. On a --card-surface card the same * blue measures 4.68:1 at the top of the wash and 5.62:1 at the bottom — * still AA, but under the ≥5:1 this rule asks for. That applies to EVERY * card that carries a legal link, not just LOT's; it is stated here so * the next measurement starts from the right number. Reviewed on the live * page and accepted with that number known (Lennert 2026-09-10). */ --legal-link: #8A8AFF; /* THE portal button (Marnie spät XII, 2026-08-28): the system-mail * button — #6666FF → #9639F3, white text. One button for the whole * portal; the per-context re-theming (FI turquoise default, LOI pink, * LOT green, DHD teal) is RETIRED — course/product context colors live * on tradeneon.com pages, never in the portal. The customer meets this * button in every system mail; the portal must not break that chain. * Deliberately its own tokens (not --fi-blue, which happens to share * #6666FF): FI's module identity may drift, the action color must not. * The --btn-* indirection stays because .tn-btn--primary (portal.css) is * its only reader — one knob, one place. Do not point it at anything but * the action pair without a Marnie ruling. (The WP-iframe embeds never * read it: they load tokens.css without portal.css and paint their pay * buttons from --accent directly.) */ --action: #6666FF; --action-2: #9639F3; --btn-from: var(--action); --btn-to: var(--action-2); --btn-glow: rgba(102, 102, 255, 0.30); --btn-text: #FFFFFF; /* Layout (carried over from variables.css so portal.css owns the sidebar * without depending on the legacy token file). */ --sidebar-width: 220px; --sidebar-width-slim: 68px; /* collapsed icon-only rail (desktop) */ /* Nav collapse/drawer motion. Decelerating ease (fast start, slow settle) * per the sidebar spec; 400ms is snappy but readable. */ --nav-duration: 400ms; --nav-ease: cubic-bezier(0.22, 1, 0.36, 1); /* Breakpoints — documented here for reference. CSS custom properties * CANNOT be used inside @media queries, so these values are hardcoded in * portal.css / page CSS rules. Keep them in sync with this table: * 1024px 4-col -> 2-col grids * 768px dense -> single column * 600px full single column (centered, cap ~320px) */ }