@charset "UTF-8"; /* modernize.css — 2026-07-12 at-web surface refresh (updated same day after font feedback). ------------------------------------------------------------------ Loaded near-LAST in fragments/header/style-css.html so it wins the cascade without editing the 586 KB template style.css. Additive and isolated: delete this to fully revert. (Only table-skin.css loads after this, deliberately, so the user-selectable Modern table skin can override the `table.dataTable tbody td` rules below.) FONT DECISION: the body font stays VERDANA. An earlier version of this file swapped it to a system-UI stack; Pritesh found Verdana more readable for the dense, small (0.825em) trading tables — Verdana was engineered for on-screen legibility (large x-height, wide spacing, tuned Windows hinting) and its digits are already fixed-width. So we keep Verdana and carry only the readability-neutral wins here: a crisp light-mode card surface, (harmless, since Verdana is already tabular) tabular figures, and a shift from all-bold table bodies to REGULAR weight — emphasis kept on headers + identity/status columns (see the BODY WEIGHT block below). Dark mode restyles .card via theme-cards.css ([data-theme="dark"] .card), so the card softening below is gated to light only. Nothing here touches cell DATA, so the portfolio-v2 parity harness stays green. It also carries the 2026-07-12 BUTTON REFRESH (Option A shape/motion + Option B brand-aligned colours) — see the section at the bottom. */ :root { /* Crisp layered card surface (the 2025 dashboard look) replacing the diffuse 20px "floating glow". Kept as vars for one-place tuning / review. */ --sd-card-shadow-modern: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10); --sd-card-border-modern: 1px solid rgba(16, 24, 40, 0.08); } /* The mobile logo hard-codes `font-family: open sans`, but we dropped the Open Sans Google Fonts fetch — so pin the logo to Verdana too (matches the body, no external dependency). !important beats the high-specificity original. */ .logo-text { font-family: "Verdana", sans-serif !important; } /* Tabular figures for the data grids. Verdana already renders fixed-width digits, so this is a no-op today but keeps column alignment correct if the font ever changes. */ .dataTable tbody td, .dataTable tfoot th, table.dataTable tbody td { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* BODY WEIGHT: the base rule (table.css `tbody{font-weight:600}`) rendered every data-table body cell semibold — a wall of bold across the dense trading grids. Relax the body to regular (400) here. This loads last with the same bare-tbody scope, so it cleanly reverses that one rule. Emphasis survives automatically: headers stay bold via the browser default, and any cell carrying the .font-weight-bold class (identity / status / highlighted figures) keeps its 700 !important. Delete this block to restore the all-bold look. */ tbody { font-weight: 400; } /* Light-only card softening: replace the diffuse floating-glow shadow with a crisp layered shadow + hairline border. Gated to non-dark so dark mode's own card tokens win untouched. Specificity (0,0,2,1) beats base .card (0,0,1,0). */ html:not([data-theme="dark"]) .card { box-shadow: var(--sd-card-shadow-modern); border: var(--sd-card-border-modern); } /* ============================================================ BUTTON REFRESH — 2026-07-12 Option A (shape + motion) + Option B (brand-aligned colours). Palette (approved): primary = the stocksdeveloper.in brand blue (brand-600 #1f56e6 in light, the lighter #58a6ff in dark). success / danger / warning shift to the modern Tailwind-600 (light) and existing dark-token (dark) shades. Hue MEANING is preserved: green = BUY / save, red = SELL / delete. warning flips to amber + dark text (fixes the unreadable white-on-peach). info is retired -> primary (2 uses); inverse (0 uses) and secondary/light are left on their own colours (geometry only). Applied to BOTH themes on purpose: dark mode never gave the *generic* buttons their own palette — only the BUY/SELL trade-intent buttons were tokenised (#placeOrderButton / #buyHoldingsSubmit / #sellHoldingsSubmit / .mw2-actions ... in theme-forms.css). Those id/attr rules out-specify the generic rules below, so the trade buttons keep their exact treatment and are NOT changed here. Pure CSS, loaded last, fully revertible (delete this section). Scope is .btn-* only; SweetAlert / wizard confirm buttons are a separate surface and are intentionally left as-is. :not(:disabled):not(.disabled) guards keep disabled buttons from picking up hover/active colours. */ /* ---- A. Geometry & motion (all buttons, both themes) ---- */ .btn { border-radius: 6px; /* was 2px */ text-transform: none; /* was capitalize */ transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .06s ease; /* was: all ease-in .3s */ } .btn:hover:not(:disabled):not(.disabled) { box-shadow: 0 4px 12px rgba(15, 23, 42, .18); transform: translateY(-1px); } .btn:active:not(:disabled):not(.disabled) { transform: translateY(0); } .btn:focus-visible { outline: 2px solid #1f56e6; outline-offset: 2px; } [data-theme="dark"] .btn:focus-visible { outline-color: #58a6ff; } @media (prefers-reduced-motion: reduce) { .btn:hover, .btn:active { transform: none; } } /* ==================== B. COLOURS — LIGHT MODE ==================== */ /* primary + info(retired) -> brand-600 */ html:not([data-theme="dark"]) .btn-primary, html:not([data-theme="dark"]) .btn-info { background-color: #1f56e6; border-color: #1f56e6; color: #fff; } html:not([data-theme="dark"]) .btn-primary:hover:not(:disabled):not(.disabled), html:not([data-theme="dark"]) .btn-primary:focus:not(:disabled):not(.disabled), html:not([data-theme="dark"]) .btn-info:hover:not(:disabled):not(.disabled), html:not([data-theme="dark"]) .btn-info:focus:not(:disabled):not(.disabled) { background-color: #1a45b8; border-color: #1a45b8; color: #fff; } html:not([data-theme="dark"]) .btn-primary:active:not(:disabled):not(.disabled), html:not([data-theme="dark"]) .btn-info:active:not(:disabled):not(.disabled) { background-color: #17399c !important; border-color: #17399c; color: #fff; } /* outline primary */ html:not([data-theme="dark"]) .btn-outline-primary { color: #1f56e6; border-color: #1f56e6; background-color: transparent; } html:not([data-theme="dark"]) .btn-outline-primary:hover:not(:disabled):not(.disabled), html:not([data-theme="dark"]) .btn-outline-primary:focus:not(:disabled):not(.disabled), html:not([data-theme="dark"]) .btn-outline-primary:active:not(:disabled):not(.disabled) { background-color: #1f56e6 !important; border-color: #1f56e6; color: #fff !important; } /* success — Save / BUY */ html:not([data-theme="dark"]) .btn-success { background-color: #16a34a; border-color: #16a34a; color: #fff; } html:not([data-theme="dark"]) .btn-success:hover:not(:disabled):not(.disabled), html:not([data-theme="dark"]) .btn-success:focus:not(:disabled):not(.disabled) { background-color: #15803d; border-color: #15803d; color: #fff; } html:not([data-theme="dark"]) .btn-success:active:not(:disabled):not(.disabled) { background-color: #166534 !important; border-color: #166534; color: #fff; } /* danger — Delete / SELL */ html:not([data-theme="dark"]) .btn-danger { background-color: #dc2626; border-color: #dc2626; color: #fff; } html:not([data-theme="dark"]) .btn-danger:hover:not(:disabled):not(.disabled), html:not([data-theme="dark"]) .btn-danger:focus:not(:disabled):not(.disabled) { background-color: #b91c1c; border-color: #b91c1c; color: #fff; } html:not([data-theme="dark"]) .btn-danger:active:not(:disabled):not(.disabled) { background-color: #991b1b !important; border-color: #991b1b; color: #fff; } /* warning — amber with dark text (fixes white-on-peach) */ html:not([data-theme="dark"]) .btn-warning { background-color: #f59e0b; border-color: #f59e0b; color: #1f2937; } html:not([data-theme="dark"]) .btn-warning:hover:not(:disabled):not(.disabled), html:not([data-theme="dark"]) .btn-warning:focus:not(:disabled):not(.disabled) { background-color: #d97706; border-color: #d97706; color: #1f2937; } html:not([data-theme="dark"]) .btn-warning:active:not(:disabled):not(.disabled) { background-color: #b45309 !important; border-color: #b45309; color: #1f2937; } /* warning OUTLINE — same amber family as .btn-warning above, differing by FILL. Used for an action that sits beside a filled warning button but does NOT commit on click (Sq-off (Custom) stages an exit on the Trade tab; Sq-off (Market) sends it). style.css sets a bare .btn-outline-warning in a DIFFERENT orange (#fe6828) and gives it no dark rule at all, so both themes are pinned here instead — the higher-specificity selector wins regardless of file order. The ring is drawn as a 1px border PLUS an inset shadow rather than a 2px border: .btn has height:auto, so a thicker border really does make the button 2px taller than the solid ones beside it (measured). The inset shadow gives the same 2px weight and takes part in no layout. The resting state is a soft amber TINT, not a bare transparent frame: a hollow button sitting between two solid ones reads as secondary or disabled, when this is in fact the most-used of the three. The tint keeps it unmistakably a button while leaving a large lightness gap to the solid #f59e0b beside it, so the two still cannot be confused. Text is #92400e, not #b45309: on this tint #b45309 measures 4.51:1, which clears AA by a hundredth — #92400e gives 6.37:1. */ html:not([data-theme="dark"]) .btn-outline-warning { background-color: #fef3c7; border: 1px solid #f59e0b; color: #92400e; box-shadow: inset 0 0 0 1px #f59e0b; } html:not([data-theme="dark"]) .btn-outline-warning:hover:not(:disabled):not(.disabled), html:not([data-theme="dark"]) .btn-outline-warning:focus:not(:disabled):not(.disabled) { background-color: #fde68a; border-color: #d97706; color: #78350f; box-shadow: inset 0 0 0 1px #d97706; } html:not([data-theme="dark"]) .btn-outline-warning:active:not(:disabled):not(.disabled) { background-color: #fcd34d !important; border-color: #b45309; color: #78350f; box-shadow: inset 0 0 0 1px #b45309; } /* outline danger (my-proxies / trading-account-edit) */ html:not([data-theme="dark"]) .btn-outline-danger { color: #dc2626; border-color: #dc2626; } html:not([data-theme="dark"]) .btn-outline-danger:hover:not(:disabled):not(.disabled), html:not([data-theme="dark"]) .btn-outline-danger:focus:not(:disabled):not(.disabled), html:not([data-theme="dark"]) .btn-outline-danger:active:not(:disabled):not(.disabled) { background-color: #dc2626 !important; border-color: #dc2626; color: #fff !important; } /* ==================== B. COLOURS — DARK MODE ==================== */ /* generic buttons in dark still carried the old Bootstrap teal/green/etc.; bring them to the brand set. Trade-intent #ids keep their theme-forms.css rules (higher specificity) and are untouched. */ [data-theme="dark"] .btn-primary, [data-theme="dark"] .btn-info { background-color: #58a6ff; border-color: #58a6ff; color: #0b1220; } [data-theme="dark"] .btn-primary:hover:not(:disabled):not(.disabled), [data-theme="dark"] .btn-primary:focus:not(:disabled):not(.disabled), [data-theme="dark"] .btn-info:hover:not(:disabled):not(.disabled), [data-theme="dark"] .btn-info:focus:not(:disabled):not(.disabled) { background-color: #388bfd; border-color: #388bfd; color: #0b1220; } [data-theme="dark"] .btn-primary:active:not(:disabled):not(.disabled), [data-theme="dark"] .btn-info:active:not(:disabled):not(.disabled) { background-color: #2b7de0 !important; border-color: #2b7de0; color: #0b1220; } [data-theme="dark"] .btn-outline-primary { color: #58a6ff; border-color: #58a6ff; background-color: transparent; } [data-theme="dark"] .btn-outline-primary:hover:not(:disabled):not(.disabled), [data-theme="dark"] .btn-outline-primary:focus:not(:disabled):not(.disabled), [data-theme="dark"] .btn-outline-primary:active:not(:disabled):not(.disabled) { background-color: #58a6ff !important; border-color: #58a6ff; color: #0b1220 !important; } [data-theme="dark"] .btn-success { background-color: #3fb950; border-color: #3fb950; color: #0b1220; } [data-theme="dark"] .btn-success:hover:not(:disabled):not(.disabled), [data-theme="dark"] .btn-success:focus:not(:disabled):not(.disabled) { background-color: #4ac866; border-color: #4ac866; color: #0b1220; } [data-theme="dark"] .btn-success:active:not(:disabled):not(.disabled) { background-color: #35a344 !important; border-color: #35a344; color: #0b1220; } [data-theme="dark"] .btn-danger { background-color: #f85149; border-color: #f85149; color: #fff; } [data-theme="dark"] .btn-danger:hover:not(:disabled):not(.disabled), [data-theme="dark"] .btn-danger:focus:not(:disabled):not(.disabled) { background-color: #ff6660; border-color: #ff6660; color: #fff; } [data-theme="dark"] .btn-danger:active:not(:disabled):not(.disabled) { background-color: #e5484d !important; border-color: #e5484d; color: #fff; } [data-theme="dark"] .btn-warning { background-color: #d29922; border-color: #d29922; color: #0b1220; } [data-theme="dark"] .btn-warning:hover:not(:disabled):not(.disabled), [data-theme="dark"] .btn-warning:focus:not(:disabled):not(.disabled) { background-color: #e0a92e; border-color: #e0a92e; color: #0b1220; } [data-theme="dark"] .btn-warning:active:not(:disabled):not(.disabled) { background-color: #b8831a !important; border-color: #b8831a; color: #0b1220; } /* warning OUTLINE, dark — see the light-mode block for why this lives here, and for why the resting state is tinted rather than hollow. The tint is an alpha wash of the fill amber so it sits on whatever card colour is behind it; text is the lighter #f0c04a, not the fill amber, so it clears AA against the dark card. */ [data-theme="dark"] .btn-outline-warning { background-color: rgba(210, 153, 34, 0.20); border: 1px solid #d29922; color: #f0c04a; box-shadow: inset 0 0 0 1px #d29922; } [data-theme="dark"] .btn-outline-warning:hover:not(:disabled):not(.disabled), [data-theme="dark"] .btn-outline-warning:focus:not(:disabled):not(.disabled) { background-color: rgba(210, 153, 34, 0.32); border-color: #e0a92e; color: #f7d67e; box-shadow: inset 0 0 0 1px #e0a92e; } [data-theme="dark"] .btn-outline-warning:active:not(:disabled):not(.disabled) { background-color: rgba(210, 153, 34, 0.44) !important; border-color: #e0a92e; color: #f7d67e; box-shadow: inset 0 0 0 1px #e0a92e; } [data-theme="dark"] .btn-outline-danger { color: #f85149; border-color: #f85149; } [data-theme="dark"] .btn-outline-danger:hover:not(:disabled):not(.disabled), [data-theme="dark"] .btn-outline-danger:focus:not(:disabled):not(.disabled), [data-theme="dark"] .btn-outline-danger:active:not(:disabled):not(.disabled) { background-color: #f85149 !important; border-color: #f85149; color: #fff !important; } /* ==================== B2. PORTFOLIO ACTION TOOLBARS ==================== Every button on the Portfolio toolbars that reaches the broker. Applied via makeExitButton & co. in common.js, NOT written in the markup. Positions Sq-off (Market) .btn-exit red - IDENTICAL to Holdings Square-off Sq-off (Custom) .btn-stage brand blue Increase .btn-stage-add brand blue Sq-off Acc .btn-exit-all deeper red + hazard hatch Orders/GTT Modify .btn-act-modify amber Cancel .btn-act-cancel red Holdings Square-off .btn-stage-sell red Increase .btn-stage-buy green Reset / Select / Deselect keep .btn-secondary and must NOT be caught by any rule here - they are table controls, not order actions. HISTORY, so nobody re-derives it. Until 2026-08-23 these rows used a three-tier scheme where the two buttons with the widest blast radius (Sq-off Market, Sq-off Acc) took a SOLID graphite slab and everything else was pale, the idea being that solid meant "irreversible". Pritesh replaced it that day with the single pale look below, after seeing the Holdings pair: he wants one visual family across every tab, with the HUE carrying the meaning instead of the fill weight. He then reviewed four mock-ups the same day and settled the last two questions: Sq-off (Market) takes the Holdings Square-off values EXACTLY (hence one shared rule below, not a copy), and Sq-off Acc goes one step deeper in the same red while keeping its hatch. That is a deliberate design decision, not drift - do not reintroduce a solid fill here without asking him. Two facts the old scheme's own comments got wrong, worth keeping straight: - Neither graphite button actually fired on click. Sq-off (Market) raises a Swal confirm ("Square off at market rate?") and Sq-off Acc opens #squareOffScreen. - Cancel (Orders and GTT) DOES fire on click with no confirmation at all, and it was the one button never given a tier. Pritesh confirmed on 2026-08-23 that users know this and that it is not to be gated. Rules that still hold: 1. Exits are NOT coloured by order side. Squaring off a long is a SELL and squaring off a short is a BUY, so a green/red mapping flips from one selection to the next and is wrong half the time. Same reason green stayed off Positions/Increase. The Holdings pair is the ONE carve-out: a holding is always long, so its side is fixed. 2. Both Positions staging buttons share ONE hue: what they have in common (nothing is sent until you submit on the Trade tab) matters more than how they differ. 3. Sq-off Acc ESCALATES rather than switches - the same RED as Sq-off (Market), one step deeper, plus a hazard hatch, because its blast radius is whole accounts rather than the rows you selected. A different hue would imply a different category; it is the same category, worse. 3b. Red is not a new meaning on this screen. It already says "this closes something out" on Orders and GTT (Cancel) and on Holdings (Square-off). Positions was the only tab where that action was not red. Every contrast below is measured with the hatch composited ON TOP, because text can land on an inked stripe - that is the worst case. 4. No icons, and NO GEOMETRY IS SET HERE. Height, padding, font-size and border-width are inherited from .btn, so every action button stays pixel-identical to the grey table controls beside it (36.5px). The 2026-08 design handoff specified height:37px / padding:0 14px / 13px Verdana, which are NOT this toolbar's real values - pasting them would have made these buttons taller and their text smaller than their neighbours. Every cue here is a paint property, so nothing reflows. ------------------------------------------------------------------------------- */ /* ---- bold labels on every button that PLACES, CHANGES or CANCELS an order ---- The Portfolio toolbars mix table controls with order actions. Reset / Select / Deselect only change what you are looking at; the ten buttons below reach the broker. Weight is the one cue that separates those two groups on EVERY tab, so it is applied by consequence, not by tab. Listed explicitly by id rather than by .btn-warning / .btn-danger / .btn-success, because those classes are shared with other screens and with the margins-tab segment selectors (Equity / Commodity / Total), which are table controls and must stay regular weight. font-weight does not affect height, only label width. */ .btn-exit, .btn-exit-all, .btn-stage, .btn-stage-add, /* positions */ #modifyButton, #cancelButton, /* orders */ #modifyGttButton, #cancelGttButton, /* gtt */ #sellHoldingsButton, #buyHoldingsButton { /* holdings */ font-weight: 700; } /* Shared: only guarantees the label never wraps. No geometry. */ .btn-exit, .btn-exit-all, .btn-stage, .btn-stage-add, .btn-act-modify, .btn-act-cancel, .btn-stage-sell, .btn-stage-buy { white-space: nowrap; } /* ---- the shared pale treatment ---- ONE fill recipe for every action button: a pale tint of the button's own hue, a tinted border, and hue-coloured bold text. Only the HUE changes. Light mode uses an opaque tint; DARK mode uses an alpha wash of the same hue over whatever card colour sits behind it, never a literal dark fill - a literal fill lands DARKER than the card and reads as a hole punched in it rather than as a tinted button. That is what the old .btn-stage #14243a did, and it is why Sq-off (Custom) once looked blackish, not blue. Contrast is quoted AFTER compositing, and for the hatched button after the hatch too. */ /* ---- red: Sq-off (Market), Cancel (Orders + GTT), Holdings Square-off ---- ONE rule for all three, deliberately. Pritesh asked on 2026-08-23 for Sq-off (Market) to match Holdings Square-off EXACTLY, so they share the declaration rather than repeating the values - a copy would drift the first time one of them is retuned. Cancel was already on these values, and the three mean the same thing: this CLOSES something out. Cancel reaches the broker with no confirmation step, which Pritesh confirmed is understood by users and is deliberately not gated. Using red here also retired the white-on-#f85149 dark failure (3.35:1) that .btn-danger carried on Cancel. */ html:not([data-theme="dark"]) .btn-exit, html:not([data-theme="dark"]) .btn-act-cancel, html:not([data-theme="dark"]) .btn-stage-sell { background-color: #fef2f2; border-color: #fca5a5; color: #b91c1c; /* 5.91:1 */ } html:not([data-theme="dark"]) .btn-exit:hover:not(:disabled):not(.disabled), html:not([data-theme="dark"]) .btn-exit:focus:not(:disabled):not(.disabled), html:not([data-theme="dark"]) .btn-act-cancel:hover:not(:disabled):not(.disabled), html:not([data-theme="dark"]) .btn-act-cancel:focus:not(:disabled):not(.disabled), html:not([data-theme="dark"]) .btn-stage-sell:hover:not(:disabled):not(.disabled), html:not([data-theme="dark"]) .btn-stage-sell:focus:not(:disabled):not(.disabled) { background-color: #fee2e2; border-color: #f87171; color: #991b1b; } html:not([data-theme="dark"]) .btn-exit:active:not(:disabled):not(.disabled), html:not([data-theme="dark"]) .btn-act-cancel:active:not(:disabled):not(.disabled), html:not([data-theme="dark"]) .btn-stage-sell:active:not(:disabled):not(.disabled) { background-color: #fecaca !important; border-color: #f87171; color: #991b1b; } [data-theme="dark"] .btn-exit, [data-theme="dark"] .btn-act-cancel, [data-theme="dark"] .btn-stage-sell { background-color: rgba(248, 81, 73, .16); border-color: #8b3236; color: #ffa39e; /* 6.45:1 */ } [data-theme="dark"] .btn-exit:hover:not(:disabled):not(.disabled), [data-theme="dark"] .btn-exit:focus:not(:disabled):not(.disabled), [data-theme="dark"] .btn-act-cancel:hover:not(:disabled):not(.disabled), [data-theme="dark"] .btn-act-cancel:focus:not(:disabled):not(.disabled), [data-theme="dark"] .btn-stage-sell:hover:not(:disabled):not(.disabled), [data-theme="dark"] .btn-stage-sell:focus:not(:disabled):not(.disabled) { background-color: rgba(248, 81, 73, .26); border-color: #a83f43; color: #ffbdb9; } [data-theme="dark"] .btn-exit:active:not(:disabled):not(.disabled), [data-theme="dark"] .btn-act-cancel:active:not(:disabled):not(.disabled), [data-theme="dark"] .btn-stage-sell:active:not(:disabled):not(.disabled) { background-color: rgba(248, 81, 73, .34) !important; border-color: #a83f43; color: #ffbdb9; } /* ---- deeper red: Sq-off Acc ---- The same red one step down, so it reads as "the red one, more so" rather than as a different category. Ratios are measured with the hazard hatch composited on top, since a glyph can land on an inked stripe: resting 5.95:1, hover 6.45:1, active 5.44:1 light. */ html:not([data-theme="dark"]) .btn-exit-all { background-color: #fecaca; border-color: #ef4444; color: #7f1d1d; /* 5.95:1 on the stripe */ } html:not([data-theme="dark"]) .btn-exit-all:hover:not(:disabled):not(.disabled), html:not([data-theme="dark"]) .btn-exit-all:focus:not(:disabled):not(.disabled) { background-color: #fdbdbd; border-color: #dc2626; color: #6b1717; } html:not([data-theme="dark"]) .btn-exit-all:active:not(:disabled):not(.disabled) { background-color: #fca5a5 !important; border-color: #dc2626; color: #6b1717; } [data-theme="dark"] .btn-exit-all { background-color: rgba(248, 81, 73, .30); border-color: #b04a44; color: #ffd0cc; /* 6.02:1 */ } [data-theme="dark"] .btn-exit-all:hover:not(:disabled):not(.disabled), [data-theme="dark"] .btn-exit-all:focus:not(:disabled):not(.disabled) { background-color: rgba(248, 81, 73, .40); border-color: #c25a53; color: #ffd0cc; } [data-theme="dark"] .btn-exit-all:active:not(:disabled):not(.disabled) { background-color: rgba(248, 81, 73, .48) !important; border-color: #c25a53; color: #ffe0dd; } /* ---- brand blue: Sq-off (Custom), Increase ---- #1f56e6 / #58a6ff is the brand blue the 2026-07-12 sweep put everywhere else (links, the SweetAlert2 confirm, .btn-primary). Both open the Trade tab with the order pre-filled and send nothing on click, which is what they have in common and why they share a hue. */ html:not([data-theme="dark"]) .btn-stage, html:not([data-theme="dark"]) .btn-stage-add { background-color: #eef3ff; border-color: #b9caf8; color: #1f56e6; /* 5.35:1 */ } html:not([data-theme="dark"]) .btn-stage:hover:not(:disabled):not(.disabled), html:not([data-theme="dark"]) .btn-stage:focus:not(:disabled):not(.disabled), html:not([data-theme="dark"]) .btn-stage-add:hover:not(:disabled):not(.disabled), html:not([data-theme="dark"]) .btn-stage-add:focus:not(:disabled):not(.disabled) { background-color: #e3ebff; border-color: #94b0f4; color: #1a45b8; } html:not([data-theme="dark"]) .btn-stage:active:not(:disabled):not(.disabled), html:not([data-theme="dark"]) .btn-stage-add:active:not(:disabled):not(.disabled) { background-color: #d8e4ff !important; border-color: #94b0f4; color: #1a45b8; } [data-theme="dark"] .btn-stage, [data-theme="dark"] .btn-stage-add { background-color: rgba(88, 166, 255, .16); border-color: #2f66ab; color: #79b8ff; /* 5.41:1 */ } [data-theme="dark"] .btn-stage:hover:not(:disabled):not(.disabled), [data-theme="dark"] .btn-stage:focus:not(:disabled):not(.disabled), [data-theme="dark"] .btn-stage-add:hover:not(:disabled):not(.disabled), [data-theme="dark"] .btn-stage-add:focus:not(:disabled):not(.disabled) { background-color: rgba(88, 166, 255, .26); border-color: #3d7dc9; color: #9ccbff; } [data-theme="dark"] .btn-stage:active:not(:disabled):not(.disabled), [data-theme="dark"] .btn-stage-add:active:not(:disabled):not(.disabled) { background-color: rgba(88, 166, 255, .34) !important; border-color: #3d7dc9; color: #9ccbff; } /* ---- amber: Modify (Orders + GTT) ---- Same amber family as the solid .btn-warning these replaced (#f59e0b light / #d29922 dark), so Modify keeps the colour users already associate with it. A dedicated class rather than .btn-warning, because that class is shared with the Settings screens. */ html:not([data-theme="dark"]) .btn-act-modify { background-color: #fff8e6; border-color: #fcd34d; color: #92400e; /* 6.69:1 */ } html:not([data-theme="dark"]) .btn-act-modify:hover:not(:disabled):not(.disabled), html:not([data-theme="dark"]) .btn-act-modify:focus:not(:disabled):not(.disabled) { background-color: #fdf1d6; border-color: #fbbf24; color: #7c340b; } html:not([data-theme="dark"]) .btn-act-modify:active:not(:disabled):not(.disabled) { background-color: #fce8bd !important; border-color: #fbbf24; color: #7c340b; } [data-theme="dark"] .btn-act-modify { background-color: rgba(210, 153, 34, .16); border-color: #7a5f1e; color: #ffd479; /* 8.07:1 */ } [data-theme="dark"] .btn-act-modify:hover:not(:disabled):not(.disabled), [data-theme="dark"] .btn-act-modify:focus:not(:disabled):not(.disabled) { background-color: rgba(210, 153, 34, .26); border-color: #96762a; color: #ffe0a0; } [data-theme="dark"] .btn-act-modify:active:not(:disabled):not(.disabled) { background-color: rgba(210, 153, 34, .34) !important; border-color: #96762a; color: #ffe0a0; } /* ---- green: Holdings Increase ---- Holdings is the ONE place where colouring by order side is correct: a holding can only be long, so Square-off is always a sell and Increase always a buy (the ids say so: sellHoldings / buyHoldings). On the Positions tab the side flips with the selection, so colouring there would be wrong half the time - which is why Positions/Increase is blue. */ html:not([data-theme="dark"]) .btn-stage-buy { background-color: #f0fdf4; border-color: #86efac; color: #166534; /* 6.81:1 */ } html:not([data-theme="dark"]) .btn-stage-buy:hover:not(:disabled):not(.disabled), html:not([data-theme="dark"]) .btn-stage-buy:focus:not(:disabled):not(.disabled) { background-color: #dcfce7; border-color: #4ade80; color: #14532d; } html:not([data-theme="dark"]) .btn-stage-buy:active:not(:disabled):not(.disabled) { background-color: #bbf7d0 !important; border-color: #4ade80; color: #14532d; } [data-theme="dark"] .btn-stage-buy { background-color: rgba(63, 185, 80, .16); border-color: #2f6b41; color: #6ee787; /* 7.26:1 */ } [data-theme="dark"] .btn-stage-buy:hover:not(:disabled):not(.disabled), [data-theme="dark"] .btn-stage-buy:focus:not(:disabled):not(.disabled) { background-color: rgba(63, 185, 80, .26); border-color: #3d8553; color: #8ff0a3; } [data-theme="dark"] .btn-stage-buy:active:not(:disabled):not(.disabled) { background-color: rgba(63, 185, 80, .34) !important; border-color: #3d8553; color: #8ff0a3; } /* ---- the hazard hatch: whole-account blast radius ---- Sq-off Acc is the only button in these rows that acts on entire ACCOUNTS rather than on the rows you selected, so it keeps one marker its neighbours do not have. Dark stripes on the light fill, light stripes on the dark one - white is invisible on a pale tint. Keep the alpha low: every contrast quoted above already includes this layer, and raising it would eat the margin. */ html:not([data-theme="dark"]) .btn-exit-all { background-image: repeating-linear-gradient(135deg, rgba(31, 40, 61, .085) 0 5px, rgba(31, 40, 61, 0) 5px 11px); } [data-theme="dark"] .btn-exit-all { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 5px, rgba(255, 255, 255, 0) 5px 11px); } /* ---- focus ---- */ .btn-exit:focus-visible, .btn-act-cancel:focus-visible, .btn-stage-sell:focus-visible { outline: 2px solid #b91c1c; outline-offset: 2px; } .btn-exit-all:focus-visible { outline: 2px solid #7f1d1d; outline-offset: 2px; } .btn-stage:focus-visible, .btn-stage-add:focus-visible { outline: 2px solid #1f56e6; outline-offset: 2px; } .btn-act-modify:focus-visible { outline: 2px solid #92400e; outline-offset: 2px; } .btn-stage-buy:focus-visible { outline: 2px solid #166534; outline-offset: 2px; } [data-theme="dark"] .btn-exit:focus-visible, [data-theme="dark"] .btn-act-cancel:focus-visible, [data-theme="dark"] .btn-stage-sell:focus-visible { outline-color: #ffa39e; } [data-theme="dark"] .btn-exit-all:focus-visible { outline-color: #ffd0cc; } [data-theme="dark"] .btn-stage:focus-visible, [data-theme="dark"] .btn-stage-add:focus-visible { outline-color: #79b8ff; } [data-theme="dark"] .btn-act-modify:focus-visible { outline-color: #ffd479; } [data-theme="dark"] .btn-stage-buy:focus-visible { outline-color: #6ee787; } /* ==================== B3. COMPACT TOOLBAR ROW ==================== Every table-card toolbar in the app (portfolio, ledger, marketwatch, the setting list screens) used a 20px gutter, applied as .m-r-20 on each button. On the Positions row that is ~140px of pure whitespace across seven buttons, and the template puts the filter controls and the buttons in the SAME Bootstrap .row as two .col-sm-auto columns - so once their combined width passes the container, the whole button group drops onto a second line under the filters. Measured: the Positions row needed 1498px, against a container of vw-116. That fits a true 1920 viewport, but NOT a 1920 laptop running Windows display scaling at 125%, which reports about 1536 CSS px. That is the regression being fixed. Flex with an 8px gap replaces the per-button margins. .m-r-20 / .m-b-10 stay on the buttons in the markup (nothing depends on removing them) and are overridden here, so the global utility classes are untouched for the rest of the app. gap also supplies the row-gap, which .m-b-10 used to provide when the row wrapped. */ .pf-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .pf-toolbar > .btn { margin-right: 0; margin-bottom: 0; padding-left: 9px; /* was 11px - 4px back per button, 28px across the row */ padding-right: 9px; } /* The filter side of the same row. Each control sits in its own .col-auto, so it pays Bootstrap's 15px gutter twice; three controls is 90px of padding before anything is drawn. 4px keeps them visually separate at a fraction of the cost. Scoped to the header-controls cell, so ordinary grid columns elsewhere are untouched. */ .pf-filters > .row { margin-left: 0; margin-right: 0; } .pf-filters > .row > [class*="col-"] { padding-left: 4px; padding-right: 4px; } /* ---- group separation ---- Buttons that belong together sit at the plain 8px row gap; a boundary BETWEEN two logical groups gets exactly double that, 16px, via an extra 8px margin. Pritesh's rule, 2026-08-23: "these two logical groups should have exactly double the gap". The first rule is order-INDEPENDENT and does the main job on every tab: the table controls are the only .btn-secondary buttons in the row and they always come first, so "the first non-secondary button after a secondary one" is precisely the point where table controls end and order actions begin. It needs no maintenance when a button is added, removed or reordered. Positions Reset Select Deselect | Sq-off (Market) Orders/GTT Reset Select Deselect | Modify Holdings Reset Select Deselect | Square-off Margins Reset | Equity The two rules below it ARE order-dependent, and mark the two boundaries that exist inside the Positions action run: Sq-off (Market) stands alone, Sq-off (Custom) and Increase are a pair (both open the Trade tab), and Sq-off Acc stands alone. If that order ever changes, these two must move with it. This block also drops the old 14px isolation margins to 8px. They were sized to carry a "dark slab - pale island - dark slab" reading that no longer exists now that all the action buttons share one pale look, and dropping them buys 12px back on the Positions row, which is the row that wraps first (~1462px viewport). Applies to every table-card toolbar in the app, not just Portfolio - .pf-toolbar lives in the shared fragments/table/table-card.html. On other screens the effect is the same small thing: 16px where a grey control meets a coloured action, 8px elsewhere. */ .pf-toolbar > .btn-secondary + .btn:not(.btn-secondary) { margin-left: 8px; } .pf-toolbar > .btn-stage { margin-left: 8px; } /* Sq-off (Market) | Sq-off (Custom) */ .pf-toolbar > .btn-exit-all { margin-left: 8px; } /* Increase | Sq-off Acc */ /* ============== B4. TABLE HEAD ROW - EXPORTS SIT BESIDE THE SEARCH BOX ============== Column Order / Excel / CSV used to sit hard LEFT while the search box sat hard RIGHT, with the whole table width of empty space between them. They are both table chrome, so they now travel together at the right-hand end, buttons first and search last. Pritesh's call, 2026-08-23, and it applies to every table in the app that renders the export buttons. Done with a flex WRAPPER rather than by floating .dt-buttons right, because floats stack right-to-left in DOM order: float:right on both would have put the buttons to the RIGHT of the search box, which is the opposite of what was asked. The wrapper is declared in the DataTables `dom` string as <'dt-head'Bf> - B and f become children of a div.dt-head instead of bare siblings of the table. The `clear: none` matters. style.css sets `div.dt-buttons { clear: both }` globally; it is inert today only because B happens to precede f in the wrapper. Inside .dt-head it would push the buttons onto their own line. Marketwatch is deliberately NOT converted: it uses dom:'Brtip' (no DataTables search - it has its own box in .mw-toolbar-search) so there is nothing to sit beside. Its buttons keep the placement set in portfolio-utilities.css. */ .dt-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 6px; } .dt-head > .dt-buttons { float: none; clear: none; margin: 0; } .dt-head > .dataTables_filter { float: none; margin: 0; text-align: right; } /* ==================== B5. QUIET CHROME ================================================== The table controls (Reset / Select / Deselect) and the export buttons (Column Order / Excel / CSV) were the only SOLID buttons left on the Portfolio toolbars once the action buttons went pale - six dark slabs, none of which is an order action. Pritesh, 2026-08-23: "they are stealing the limelight which is not correct because they are the least used and least important buttons on screen." So the row now runs on three weights that track importance rather than fighting it: ghost transparent, hairline border, muted text table controls + exports pale tinted fill + bold hue-coloured text everything that reaches the broker (there is no third, solid tier - see section B2) Scoping matters in both directions. .btn-secondary is used across the Settings screens where a solid grey button is still right, so the toolbar rule is bound to .pf-toolbar. The export buttons, by contrast, SHOULD change everywhere - they are the same three buttons on every table in the app - so that rule is bound only to .dt-buttons. ------------------------------------------------------------------------------------- */ /* ---- table controls: Reset / Select / Deselect ---- */ html:not([data-theme="dark"]) .pf-toolbar > .btn-secondary { background-color: transparent; border-color: #d5dae5; color: #5b6472; /* 5.98:1 */ } html:not([data-theme="dark"]) .pf-toolbar > .btn-secondary:hover:not(:disabled):not(.disabled), html:not([data-theme="dark"]) .pf-toolbar > .btn-secondary:focus:not(:disabled):not(.disabled) { background-color: #f1f3f7; border-color: #c3cad8; color: #3f4757; } html:not([data-theme="dark"]) .pf-toolbar > .btn-secondary:active:not(:disabled):not(.disabled) { background-color: #e6e9f0 !important; border-color: #c3cad8; color: #3f4757; } [data-theme="dark"] .pf-toolbar > .btn-secondary { background-color: transparent; border-color: #39414f; color: #9aa4b2; /* 5.88:1 */ } [data-theme="dark"] .pf-toolbar > .btn-secondary:hover:not(:disabled):not(.disabled), [data-theme="dark"] .pf-toolbar > .btn-secondary:focus:not(:disabled):not(.disabled) { background-color: rgba(255, 255, 255, .08); border-color: #4b5566; color: #c9d1d9; } [data-theme="dark"] .pf-toolbar > .btn-secondary:active:not(:disabled):not(.disabled) { background-color: rgba(255, 255, 255, .13) !important; border-color: #4b5566; color: #c9d1d9; } .pf-toolbar > .btn-secondary:focus-visible { outline: 2px solid #5b6472; outline-offset: 2px; } [data-theme="dark"] .pf-toolbar > .btn-secondary:focus-visible { outline-color: #9aa4b2; } /* ---- export buttons: Column Order / Excel / CSV, on EVERY table ---- style.css styles these as `button.dt-button.btn-inverse` (0,2,1) and gives them a teal #01c2c5 hover left over from the pre-2026-07 palette, so these selectors carry the element name too and come out at (0,3,1) / (0,4,1) to win cleanly rather than relying on load order. All three buttons carry .btn-inverse: Excel and CSV set it via className in the DataTables config, Column Order via colReorderButton.js. */ html:not([data-theme="dark"]) .dt-buttons button.dt-button.btn-inverse, html:not([data-theme="dark"]) .dt-buttons div.dt-button.btn-inverse, html:not([data-theme="dark"]) .dt-buttons a.dt-button.btn-inverse { background-color: transparent; border: 1px solid #d5dae5; color: #5b6472; background-image: none; } html:not([data-theme="dark"]) .dt-buttons button.dt-button.btn-inverse:hover:not(.disabled), html:not([data-theme="dark"]) .dt-buttons div.dt-button.btn-inverse:hover:not(.disabled), html:not([data-theme="dark"]) .dt-buttons a.dt-button.btn-inverse:hover:not(.disabled) { background-color: #f1f3f7; border-color: #c3cad8; color: #3f4757; background-image: none; } [data-theme="dark"] .dt-buttons button.dt-button.btn-inverse, [data-theme="dark"] .dt-buttons div.dt-button.btn-inverse, [data-theme="dark"] .dt-buttons a.dt-button.btn-inverse { background-color: transparent; border: 1px solid #39414f; color: #9aa4b2; background-image: none; } [data-theme="dark"] .dt-buttons button.dt-button.btn-inverse:hover:not(.disabled), [data-theme="dark"] .dt-buttons div.dt-button.btn-inverse:hover:not(.disabled), [data-theme="dark"] .dt-buttons a.dt-button.btn-inverse:hover:not(.disabled) { background-color: rgba(255, 255, 255, .08); border-color: #4b5566; color: #c9d1d9; background-image: none; } /* ---- the Margins category segment: Equity | Commodity | Total ---- A "pick one of three" control, not three actions - it only re-searches the `category` column - so it is chrome, and it is built like the OPEN / CLOSED / ALL control on the Positions tab: ghost when off, brand blue when on. Applied via makeSegmentButton in common.js; the .active class is set by markMarginsSegment in portfolio-margins.js. Until 2026-08-23 these were three SOLID GREEN buttons with no active state at all, so the screen never said which category you were looking at, and green here competed with green as "buy / profit" everywhere else on the page. The old fill also measured 3.30:1 (white on #16a34a) and was one of the standing AA failures; the two states below are 5.95:1 and 5.98:1 light, 7.41:1 and 5.88:1 dark. No font-weight change between states - only colour - so clicking a segment cannot change a label's width and reflow the row. */ html:not([data-theme="dark"]) .btn-seg { background-color: transparent; border-color: #d5dae5; color: #5b6472; /* 5.98:1 */ } html:not([data-theme="dark"]) .btn-seg:hover:not(.active):not(:disabled):not(.disabled), html:not([data-theme="dark"]) .btn-seg:focus:not(.active):not(:disabled):not(.disabled) { background-color: #f1f3f7; border-color: #c3cad8; color: #3f4757; } html:not([data-theme="dark"]) .btn-seg.active { background-color: #1f56e6; border-color: #1f56e6; color: #ffffff; /* 5.95:1 */ } html:not([data-theme="dark"]) .btn-seg.active:hover:not(:disabled):not(.disabled), html:not([data-theme="dark"]) .btn-seg.active:focus:not(:disabled):not(.disabled) { background-color: #1a45b8; border-color: #1a45b8; color: #ffffff; } [data-theme="dark"] .btn-seg { background-color: transparent; border-color: #39414f; color: #9aa4b2; /* 5.88:1 */ } [data-theme="dark"] .btn-seg:hover:not(.active):not(:disabled):not(.disabled), [data-theme="dark"] .btn-seg:focus:not(.active):not(:disabled):not(.disabled) { background-color: rgba(255, 255, 255, .08); border-color: #4b5566; color: #c9d1d9; } [data-theme="dark"] .btn-seg.active { background-color: #58a6ff; border-color: #58a6ff; color: #0b1220; /* 7.41:1 */ } [data-theme="dark"] .btn-seg.active:hover:not(:disabled):not(.disabled), [data-theme="dark"] .btn-seg.active:focus:not(:disabled):not(.disabled) { background-color: #79b8ff; border-color: #79b8ff; color: #0b1220; } .btn-seg:focus-visible { outline: 2px solid #1f56e6; outline-offset: 2px; } [data-theme="dark"] .btn-seg:focus-visible { outline-color: #79b8ff; } /* ============================================================ BRAND SWEEP — dark-mode readability + SweetAlert2 (2026-07-12). The teal->brand-blue retirement itself was done at SOURCE (style.css, app.css, table.css, portfolio-utilities.css: #01a9ac->#1f56e6, #01dbdf->#2f6bff, #016d6f->#1a45b8). Below are the dark-only fixes a source edit can't cleanly express, plus the SweetAlert2 confirm button. ============================================================ */ /* Card-header DESCRIPTION text. style.css forces `.card .card-header span/pre { color:#804600 }` (dark amber) — fine on a light card, nearly invisible on the dark card surface. Retint to muted text in DARK only; light keeps the amber. */ [data-theme="dark"] .card .card-header span, [data-theme="dark"] .card .card-header pre { color: var(--text-secondary); } /* Same brown as a utility class (used on the Trade form) — lift to a readable amber in dark. */ [data-theme="dark"] .color-read-brown { color: #d29922; } /* SweetAlert2 confirm button — match the brand blue (swal2 ships its own default colour; app.css themes the popup but never the confirm button). */ .swal2-styled.swal2-confirm { background-color: #1f56e6 !important; border-radius: 6px; } .swal2-styled.swal2-confirm:hover, .swal2-styled.swal2-confirm:focus { background-color: #1a45b8 !important; } .swal2-styled.swal2-confirm:focus { box-shadow: 0 0 0 3px rgba(31, 86, 230, .40) !important; } [data-theme="dark"] .swal2-styled.swal2-confirm { background-color: #58a6ff !important; color: #0b1220 !important; } [data-theme="dark"] .swal2-styled.swal2-confirm:hover, [data-theme="dark"] .swal2-styled.swal2-confirm:focus { background-color: #388bfd !important; } [data-theme="dark"] .swal2-styled.swal2-confirm:focus { box-shadow: 0 0 0 3px rgba(88, 166, 255, .40) !important; } /* ============================================================ SCREEN HELP — the shared fragments/common/help.html panel (rendered on 9 screens). Modernized 2026-07-13: retired the full-width green "Screen Help!!!" button + green card + teal (bondi-blue) headings for a quiet, on-brand inline panel. Behavior is unchanged (still Bootstrap data-toggle=collapse) — pure restyle + a small markup tidy in the fragment. Every teal override here is SCOPED to .screen-help, so the global .color-bondi-blue / .contrast-green classes (used elsewhere) are untouched. ============================================================ */ .screen-help { margin-bottom: 1rem; } .screen-help-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .screen-help-title h5 { font-size: 15px; } .screen-help-title small { color: var(--text-secondary, #5b6472); } /* Trigger pill. It is a .btn, so it must out-specify the generic button overlay earlier in this file — hence the .screen-help scope and the :not() guards on the hover rule. */ .screen-help .screen-help-toggle { display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px 6px 11px; font-size: 13px; font-weight: 600; line-height: 1.2; border-radius: 999px; background-color: transparent; } .screen-help .screen-help-toggle .feather { font-size: 15px; line-height: 1; } .screen-help .screen-help-toggle .sh-chev { font-size: 14px; transition: transform .18s ease; opacity: .75; } /* chevron flips when the panel is open (Bootstrap drops .collapsed) */ .screen-help .screen-help-toggle:not(.collapsed) .sh-chev { transform: rotate(180deg); } /* panel shell + section headings + list markers (theme-agnostic) */ .screen-help-panel { margin-top: 12px; border-radius: 8px; } .screen-help .sub-title { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; padding-bottom: 8px; margin-bottom: 14px; } .screen-help-panel ul { list-style: none; padding-left: 0; margin-bottom: 0; } .screen-help-panel ul li { margin-bottom: 9px; } /* --- light --- */ html:not([data-theme="dark"]) .screen-help .screen-help-toggle { color: #1f56e6; border: 1px solid rgba(20, 30, 50, .14); } html:not([data-theme="dark"]) .screen-help .screen-help-toggle:hover:not(:disabled):not(.disabled), html:not([data-theme="dark"]) .screen-help .screen-help-toggle:not(.collapsed) { background-color: rgba(31, 86, 230, .08); border-color: #1f56e6; box-shadow: none; transform: none; } html:not([data-theme="dark"]) .screen-help-panel { background-color: #ffffff; border: 1px solid rgba(20, 30, 50, .12); border-left: 3px solid #1f56e6; box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 20px rgba(16, 24, 40, .05); } html:not([data-theme="dark"]) .screen-help .color-bondi-blue { color: #1f56e6; } /* --- dark --- */ [data-theme="dark"] .screen-help .screen-help-toggle { color: #58a6ff; border: 1px solid var(--border-subtle); } [data-theme="dark"] .screen-help .screen-help-toggle:hover:not(:disabled):not(.disabled), [data-theme="dark"] .screen-help .screen-help-toggle:not(.collapsed) { background-color: rgba(88, 166, 255, .12); border-color: #58a6ff; box-shadow: none; transform: none; } [data-theme="dark"] .screen-help-panel { background-color: var(--bg-card); border: 1px solid var(--border-subtle); border-left: 3px solid #58a6ff; box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 28px rgba(0, 0, 0, .4); } [data-theme="dark"] .screen-help .color-bondi-blue { color: #58a6ff; } /* ============================================================ BILLING / LEDGER — merged "Billing" tab (Balance + Plan + Payment). Modernized 2026-07-13: retires the admin-template bg-c-* gradient stat tiles and the grey-gradient Plan banner for clean, theme-aware, brand-blue surfaces. Scoped to .billing-balance / .billing-plan / .billing-sec-label so nothing else on the site is affected. Light hex is gated with html:not([data-theme="dark"]); dark uses the theme tokens. ============================================================ */ /* --- section eyebrow (.sd-sec-label = generic alias for non-billing pages) --- */ .billing-sec-label, .sd-sec-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin: 26px 0 12px; } .billing-sec-label:first-child, .sd-sec-label:first-child { margin-top: 8px; } html:not([data-theme="dark"]) .billing-sec-label, html:not([data-theme="dark"]) .sd-sec-label { color: #818b99; } [data-theme="dark"] .billing-sec-label, [data-theme="dark"] .sd-sec-label { color: var(--text-secondary); } /* --- callouts: info / warning / danger — shared left-rail note boxes (modern replacement for pastel alert-info/-warning/-danger; first used on the master-account + security setting pages 2026-07-14) --- */ .sd-callout { display: flex; align-items: flex-start; gap: .6rem; padding: .65rem .9rem; margin: .9rem 0; line-height: 1.55; border-radius: 6px; border: 1px solid transparent; border-left-width: 4px; } .sd-callout__icon { flex: 0 0 auto; margin-top: .15rem; font-size: 1.05rem; } .sd-callout__text { min-width: 0; } .sd-callout__title { font-weight: 700; } .sd-callout a { font-weight: 600; text-decoration: underline; } .sd-callout--info { background-color: #eaf4fb; border-color: #bcdcf0; border-left-color: #2196c4; color: #155b78; } .sd-callout--info .sd-callout__icon { color: #2196c4; } .sd-callout--warning { background-color: #fdf6e7; border-color: #efd9a3; border-left-color: #d6970f; color: #6b4e0e; } .sd-callout--warning .sd-callout__icon { color: #d6970f; } .sd-callout--danger { background-color: #fdeeee; border-color: #f2c6c6; border-left-color: #dc2626; color: #7c2d2d; } .sd-callout--danger .sd-callout__icon { color: #dc2626; } /* Dark mode: drive everything from theme tokens (rgba line = color-mix fallback). */ [data-theme="dark"] .sd-callout--info { background-color: rgba(121, 192, 255, .12); background-color: color-mix(in srgb, var(--accent-info) 12%, transparent); border-color: rgba(121, 192, 255, .28); border-color: color-mix(in srgb, var(--accent-info) 28%, transparent); border-left-color: var(--accent-info); color: var(--text-primary); } [data-theme="dark"] .sd-callout--info .sd-callout__icon { color: var(--accent-info); } [data-theme="dark"] .sd-callout--warning { background-color: rgba(210, 153, 34, .12); background-color: color-mix(in srgb, var(--accent-warning) 12%, transparent); border-color: rgba(210, 153, 34, .28); border-color: color-mix(in srgb, var(--accent-warning) 28%, transparent); border-left-color: var(--accent-warning); color: var(--text-primary); } [data-theme="dark"] .sd-callout--warning .sd-callout__icon { color: var(--accent-warning); } [data-theme="dark"] .sd-callout--danger { background-color: rgba(248, 81, 73, .12); background-color: color-mix(in srgb, var(--accent-danger) 12%, transparent); border-color: rgba(248, 81, 73, .28); border-color: color-mix(in srgb, var(--accent-danger) 28%, transparent); border-left-color: var(--accent-danger); color: var(--text-primary); } [data-theme="dark"] .sd-callout--danger .sd-callout__icon { color: var(--accent-danger); } /* Links inside dark callouts: the box overrides its text colour but anchors fell back to the global dark link colour, which is near-invisible on the tinted callout background. */ [data-theme="dark"] .sd-callout a { color: var(--accent-info); } /* --- Balance stat cards --- */ .billing-balance { margin-bottom: 0; } .billing-balance > [class*="col-"] { margin-bottom: 20px; } .bstat { height: 100%; display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: 10px; } .bstat__chip { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; line-height: 1; } .bstat__chip .icon-rupee { font-size: 18px; } .bstat__text { display: flex; flex-direction: column; min-width: 0; } .bstat__label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bstat__value { font-size: 20px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.15; } /* light */ html:not([data-theme="dark"]) .bstat { background-color: #ffffff; border: 1px solid rgba(20, 30, 50, .12); box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 20px rgba(16, 24, 40, .05); } html:not([data-theme="dark"]) .bstat__label { color: #5b6472; } html:not([data-theme="dark"]) .bstat__value { color: #1f2733; } html:not([data-theme="dark"]) .bstat--pos .bstat__chip { color: #16a34a; background: rgba(22, 163, 74, .10); } html:not([data-theme="dark"]) .bstat--pending .bstat__chip { color: #b9820b; background: rgba(214, 151, 15, .12); } html:not([data-theme="dark"]) .bstat--brand .bstat__chip { color: #1f56e6; background: rgba(31, 86, 230, .08); } /* dark */ [data-theme="dark"] .bstat { background-color: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 28px rgba(0, 0, 0, .4); } [data-theme="dark"] .bstat__label { color: var(--text-secondary); } [data-theme="dark"] .bstat__value { color: var(--text-primary); } [data-theme="dark"] .bstat--pos .bstat__chip { color: #3fb950; background: rgba(63, 185, 80, .14); } [data-theme="dark"] .bstat--pending .bstat__chip { color: #e3b341; background: rgba(227, 179, 65, .14); } [data-theme="dark"] .bstat--brand .bstat__chip { color: #58a6ff; background: rgba(88, 166, 255, .14); } /* --- Plan summary card --- */ .billing-plan { margin-bottom: 4px; } .bp-plan { display: grid; grid-template-columns: 1fr 1.3fr; border-radius: 10px; overflow: hidden; } .bp-left { padding: 16px 18px; } .bp-right { padding: 16px 18px; } .bp-kicker { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; } .bp-name { font-size: 22px; font-weight: 700; margin: 2px 0 11px; letter-spacing: -.01em; } .bp-mini { display: flex; gap: 22px; } .bp-mini .m { font-size: 12px; } .bp-mini .m b { display: block; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } .bp-row1 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; } .bp-to { font-size: 12.5px; } .bp-nx { font-size: 11px; font-weight: 700; letter-spacing: .04em; border-radius: 999px; padding: 3px 9px; text-transform: uppercase; } .bp-track { height: 9px; border-radius: 999px; overflow: hidden; } .bp-track > span { display: block; height: 100%; border-radius: 999px; } .bp-row2 { display: flex; justify-content: space-between; font-size: 11.5px; margin-top: 7px; } .bp-nxt { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 12px; margin-top: 13px; padding-top: 12px; } .bp-nxt b { font-weight: 700; font-variant-numeric: tabular-nums; } .bp-topnote { display: flex; align-items: center; gap: 13px; } .bp-topnote i { font-size: 24px; } .bp-topnote strong { display: block; font-size: 14px; } .bp-topnote span { font-size: 12.5px; } /* light */ html:not([data-theme="dark"]) .bp-plan { background-color: #ffffff; border: 1px solid rgba(20, 30, 50, .12); border-left: 3px solid #1f56e6; box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 20px rgba(16, 24, 40, .05); } html:not([data-theme="dark"]) .bp-left { border-right: 1px solid rgba(20, 30, 50, .07); } html:not([data-theme="dark"]) .bp-kicker { color: #818b99; } html:not([data-theme="dark"]) .bp-name { color: #1f56e6; } html:not([data-theme="dark"]) .bp-mini .m, html:not([data-theme="dark"]) .bp-to, html:not([data-theme="dark"]) .bp-row2, html:not([data-theme="dark"]) .bp-nxt { color: #5b6472; } html:not([data-theme="dark"]) .bp-mini .m b, html:not([data-theme="dark"]) .bp-to b, html:not([data-theme="dark"]) .bp-row2 b, html:not([data-theme="dark"]) .bp-nxt b, html:not([data-theme="dark"]) .bp-topnote strong { color: #1f2733; } html:not([data-theme="dark"]) .bp-nx { color: #b9820b; background: rgba(214, 151, 15, .12); } html:not([data-theme="dark"]) .bp-track { background: rgba(20, 30, 50, .10); } html:not([data-theme="dark"]) .bp-track > span { background: linear-gradient(90deg, #1f56e6, #4f82ff); } html:not([data-theme="dark"]) .bp-nxt { border-top: 1px solid rgba(20, 30, 50, .07); } html:not([data-theme="dark"]) .bp-topnote i { color: #16a34a; } html:not([data-theme="dark"]) .bp-topnote span { color: #5b6472; } /* dark */ [data-theme="dark"] .bp-plan { background-color: var(--bg-card); border: 1px solid var(--border-subtle); border-left: 3px solid #58a6ff; box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 28px rgba(0, 0, 0, .4); } [data-theme="dark"] .bp-left { border-right: 1px solid var(--border-subtle); } [data-theme="dark"] .bp-kicker { color: var(--text-secondary); } [data-theme="dark"] .bp-name { color: #58a6ff; } [data-theme="dark"] .bp-mini .m, [data-theme="dark"] .bp-to, [data-theme="dark"] .bp-row2, [data-theme="dark"] .bp-nxt { color: var(--text-secondary); } [data-theme="dark"] .bp-mini .m b, [data-theme="dark"] .bp-to b, [data-theme="dark"] .bp-row2 b, [data-theme="dark"] .bp-nxt b, [data-theme="dark"] .bp-topnote strong { color: var(--text-primary); } [data-theme="dark"] .bp-nx { color: #e3b341; background: rgba(227, 179, 65, .14); } [data-theme="dark"] .bp-track { background: rgba(255, 255, 255, .10); } [data-theme="dark"] .bp-track > span { background: linear-gradient(90deg, #58a6ff, #8ab4ff); } [data-theme="dark"] .bp-nxt { border-top: 1px solid var(--border-subtle); } [data-theme="dark"] .bp-topnote i { color: #3fb950; } [data-theme="dark"] .bp-topnote span { color: var(--text-secondary); } /* stack the plan card on small screens */ @media (max-width: 767px) { .bp-plan { grid-template-columns: 1fr; } html:not([data-theme="dark"]) .bp-left { border-right: 0; border-bottom: 1px solid rgba(20, 30, 50, .07); } [data-theme="dark"] .bp-left { border-right: 0; border-bottom: 1px solid var(--border-subtle); } } /* ============================================================================ AutoTrader top navigation + page footer — from-scratch redesign 2026-07-13 ---------------------------------------------------------------------------- Replaces the dated CodedThemes "pcoded" horizontal nav + the teal-gradient footer with a self-contained brand-ink chrome band: deep navy in light, near-black in dark. Nav + footer stay a calm "terminal" band in BOTH themes; only the page canvas flips. Markup lives in fragments/layout.html, behaviour in assets/js/topnav.js. (Design reference: claude.ai/design handoff.) Everything is namespaced --atn-* / .atn-* so it cannot collide with theme.css, Bootstrap or the pcoded template. modernize.css is the LAST sheet loaded; where an old generic `footer` rule (theme-chrome.css / gradients.css) would otherwise out-specify us in dark mode, the footer rules below are scoped under `.atn-footer` / `footer.atn-footer` so they win cleanly in both themes. Brand blue is chrome/interactive only; green/amber/red stay DATA-only. ============================================================================ */ /* ---- tokens: light (default) --------------------------------------------- */ :root { --atn-surface: #ffffff; --atn-surface-2: #f6f8fc; --atn-surface-3: #eef2f8; --atn-hairline: rgba(18, 28, 48, .10); --atn-text: #1b2333; --atn-text-strong: #0c1424; --atn-text-muted: #5a6478; --atn-text-faint: #8a93a6; --atn-brand: #1f56e6; --atn-brand-tint: #2f6bff; --atn-brand-deep: #1a45b8; --atn-brand-wash: #eaf1ff; --atn-warn: #b9820b; --atn-warn-wash: rgba(185, 130, 11, .12); --atn-warn-line: rgba(185, 130, 11, .34); --atn-down: #dc2626; --atn-chrome: #0b1a37; --atn-chrome-line: rgba(150, 178, 255, .14); --atn-chrome-text: #c4d0ea; --atn-chrome-text-str: #ffffff; --atn-chrome-muted: #8494b6; --atn-chrome-hover: rgba(255, 255, 255, .07); --atn-chrome-accent: #7aa2ff; --atn-chrome-active-bg: rgba(122, 162, 255, .16); --atn-chrome-active-bar: #7aa2ff; --atn-sh-drop: 0 16px 40px rgba(9, 18, 38, .16), 0 2px 8px rgba(9, 18, 38, .10); --atn-r-1: 4px; --atn-r-2: 7px; --atn-r-3: 11px; } /* ---- tokens: dark -------------------------------------------------------- */ [data-theme="dark"] { --atn-surface: #0f141d; --atn-surface-2: #141b26; --atn-surface-3: #1a2230; --atn-hairline: rgba(255, 255, 255, .09); --atn-text: #e6ebf3; --atn-text-strong: #f7f9fc; --atn-text-muted: #93a0b4; --atn-text-faint: #667085; --atn-brand: #58a6ff; --atn-brand-tint: #8ab4ff; --atn-brand-deep: #1f56e6; --atn-brand-wash: rgba(88, 166, 255, .14); --atn-warn: #e3b341; --atn-warn-wash: rgba(227, 179, 65, .15); --atn-warn-line: rgba(227, 179, 65, .38); --atn-down: #f85149; --atn-chrome: #0a0e15; --atn-chrome-line: rgba(255, 255, 255, .08); --atn-chrome-text: #c2ccdc; --atn-chrome-text-str: #ffffff; --atn-chrome-muted: #7c889c; --atn-chrome-hover: rgba(255, 255, 255, .06); --atn-chrome-accent: #58a6ff; --atn-chrome-active-bg: rgba(88, 166, 255, .15); --atn-chrome-active-bar: #58a6ff; --atn-sh-drop: 0 16px 44px rgba(0, 0, 0, .6), 0 2px 10px rgba(0, 0, 0, .45); } /* Neutralise the vestigial 56px top-margin the pcoded template reserved for its (now-removed) mobile header — the sticky .atn-nav supplies its own top band. */ #pcoded .pcoded-main-container { margin-top: 0 !important; } /* ---- logo ---------------------------------------------------------------- */ .atn-logo { display: inline-flex; align-items: center; gap: 10px; user-select: none; text-decoration: none; } .atn-logo:hover { text-decoration: none; } .atn-logo__tile { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(180deg, var(--atn-brand-tint), var(--atn-brand)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 1px 2px rgba(0, 0, 0, .25); } .atn-logo__tile svg { display: block; } .atn-logo__word { font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; line-height: 1; white-space: nowrap; } .atn-logo__word span { font-weight: 400; opacity: .62; } .atn-nav .atn-logo__word { color: var(--atn-chrome-text-str); } .atn-logo__tag { font-size: 9px; font-weight: 700; letter-spacing: .12em; padding: 2px 5px; border-radius: var(--atn-r-1); margin-left: 1px; border: 1px solid currentColor; line-height: 1; align-self: center; color: var(--atn-chrome-accent); } /* ---- top nav ------------------------------------------------------------- */ .atn-nav { position: sticky; top: 0; z-index: 1030; height: 54px; background: var(--atn-chrome); border-bottom: 1px solid var(--atn-chrome-line); display: flex; align-items: center; padding: 0 16px; gap: 4px; } .atn-nav__brand { display: flex; align-items: center; padding-right: 12px; margin-right: 6px; } .atn-nav__menu { display: flex; align-items: center; gap: 2px; height: 100%; } /* public (logged-out) direct link — same look as a top item, no dropdown/caret */ .atn-navlink { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 11px; border-radius: var(--atn-r-2); color: var(--atn-chrome-text); font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; text-decoration: none; white-space: nowrap; transition: background .13s ease, color .13s ease; } .atn-navlink svg { width: 16px; height: 16px; opacity: .82; } .atn-navlink:hover { background: var(--atn-chrome-hover); color: var(--atn-chrome-text-str); text-decoration: none; } .atn-navlink:hover svg { opacity: 1; } .atn-item { position: relative; height: 100%; display: flex; align-items: center; } .atn-item__btn { appearance: none; -webkit-appearance: none; border: 0; background: transparent; cursor: pointer; font-family: inherit; color: var(--atn-chrome-text); height: 38px; padding: 0 11px; border-radius: var(--atn-r-2); display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; position: relative; white-space: nowrap; transition: background .13s ease, color .13s ease; } .atn-item__btn svg { width: 16px; height: 16px; opacity: .82; } .atn-item__btn .atn-caret { width: 11px; height: 11px; opacity: .55; margin-left: -2px; transition: transform .16s ease; } .atn-item__btn:hover { background: var(--atn-chrome-hover); color: var(--atn-chrome-text-str); } .atn-item__btn:hover svg { opacity: 1; } .atn-item__btn:focus-visible { outline: 2px solid var(--atn-chrome-accent); outline-offset: 1px; } .atn-item.is-open > .atn-item__btn { background: var(--atn-chrome-active-bg); color: var(--atn-chrome-text-str); } .atn-item.is-open > .atn-item__btn .atn-caret { transform: rotate(180deg); } .atn-item.is-active > .atn-item__btn { color: var(--atn-chrome-text-str); } .atn-item.is-active > .atn-item__btn::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: -8px; height: 2px; border-radius: 2px 2px 0 0; background: var(--atn-chrome-active-bar); } /* Admin — subtle, distinct, not loud */ .atn-item--admin { margin-left: 6px; padding-left: 8px; } .atn-item--admin::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 20px; width: 1px; background: var(--atn-chrome-line); } .atn-item--admin .atn-item__btn { color: var(--atn-chrome-muted); } .atn-item--admin .atn-item__btn > svg:first-child { color: var(--atn-chrome-accent); opacity: .9; } .atn-item--admin .atn-item__btn:hover { color: var(--atn-chrome-text-str); } /* ---- dropdown panel (follows the content theme) -------------------------- */ .atn-drop { position: absolute; top: calc(100% + 7px); left: 0; min-width: 224px; background: var(--atn-surface); border: 1px solid var(--atn-hairline); border-radius: var(--atn-r-3); box-shadow: var(--atn-sh-drop); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .14s ease, transform .14s ease, visibility .14s; } .atn-item.is-open > .atn-drop { opacity: 1; visibility: visible; transform: translateY(0); } .atn-drop--right { left: auto; right: 0; } .atn-drop--wide { min-width: 250px; } .atn-drop__label { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--atn-text-faint); padding: 8px 10px 5px; } .atn-dropitem { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--atn-r-2); color: var(--atn-text); font-size: 13.5px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; position: relative; transition: background .1s ease, color .1s ease; } .atn-dropitem:hover { background: var(--atn-brand-wash); color: var(--atn-brand); text-decoration: none; } .atn-dropitem svg { width: 15px; height: 15px; color: var(--atn-text-faint); flex: none; } .atn-dropitem:hover svg { color: var(--atn-brand); } .atn-dropitem.is-current { color: var(--atn-brand); font-weight: 600; } .atn-dropitem.is-current svg { color: var(--atn-brand); } .atn-dropitem__txt { flex: 1; } .atn-drop__sep { height: 1px; background: var(--atn-hairline); margin: 5px 8px; } .atn-dropitem--danger:hover { background: rgba(220, 38, 38, .08); color: var(--atn-down); } .atn-dropitem--danger:hover svg { color: var(--atn-down); } /* ---- badges (one style; three restrained tones) -------------------------- */ .atn-badge { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1.5px 5px; border-radius: var(--atn-r-1); line-height: 1.4; margin-left: auto; } .atn-badge--new { color: var(--atn-brand); background: var(--atn-brand-wash); box-shadow: inset 0 0 0 1px rgba(31, 86, 230, .18); } .atn-badge--classic { color: var(--atn-text-muted); background: var(--atn-surface-3); box-shadow: inset 0 0 0 1px var(--atn-hairline); } .atn-badge--imp { color: var(--atn-warn); background: var(--atn-warn-wash); box-shadow: inset 0 0 0 1px var(--atn-warn-line); } [data-theme="dark"] .atn-badge--new { box-shadow: inset 0 0 0 1px rgba(88, 166, 255, .3); } /* ---- right utility cluster ----------------------------------------------- */ .atn-nav__util { margin-left: auto; display: flex; align-items: center; gap: 4px; padding-left: 8px; } .atn-util { appearance: none; -webkit-appearance: none; border: 0; background: transparent; cursor: pointer; width: 36px; height: 36px; border-radius: var(--atn-r-2); display: grid; place-items: center; position: relative; color: var(--atn-chrome-text); transition: background .13s, color .13s; } .atn-util svg { width: 18px; height: 18px; } .atn-util:hover { background: var(--atn-chrome-hover); color: var(--atn-chrome-text-str); } .atn-util:focus-visible { outline: 2px solid var(--atn-chrome-accent); outline-offset: 1px; } .atn-util-sep { width: 1px; height: 22px; background: var(--atn-chrome-line); margin: 0 4px; } /* theme toggle: show the sun in light, the moon in dark */ .atn-util .atn-i-moon { display: none; } [data-theme="dark"] .atn-util .atn-i-sun { display: none; } [data-theme="dark"] .atn-util .atn-i-moon { display: block; } /* user chip */ .atn-userchip { appearance: none; -webkit-appearance: none; border: 0; background: transparent; cursor: pointer; font-family: inherit; height: 38px; padding: 0 8px 0 5px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; color: var(--atn-chrome-text); transition: background .13s; } .atn-userchip:hover, .atn-item.is-open .atn-userchip { background: var(--atn-chrome-hover); color: var(--atn-chrome-text-str); } .atn-userchip:focus-visible { outline: 2px solid var(--atn-chrome-accent); outline-offset: 1px; } .atn-avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; text-transform: uppercase; font-size: 11.5px; font-weight: 700; color: #fff; background: linear-gradient(180deg, var(--atn-brand-tint), var(--atn-brand-deep)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); } .atn-userchip__name { font-size: 13px; font-weight: 600; line-height: 1; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .atn-userchip .atn-caret { width: 11px; height: 11px; opacity: .55; } .atn-userhead { padding: 10px 12px 8px; display: flex; gap: 11px; align-items: center; border-bottom: 1px solid var(--atn-hairline); margin: -6px -6px 6px; border-radius: var(--atn-r-3) var(--atn-r-3) 0 0; background: var(--atn-surface-2); } .atn-userhead .atn-avatar { width: 34px; height: 34px; font-size: 13px; } .atn-userhead__name { font-size: 13.5px; font-weight: 700; color: var(--atn-text-strong); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .atn-userhead__sub { font-size: 11.5px; color: var(--atn-text-muted); } /* ---- mobile hamburger + accordion (<=1200px) ----------------------------- */ .atn-ham { display: none; } .atn-mobile { display: none; } @media (max-width: 1200px) { .atn-nav__menu { display: none; } .atn-userchip__name { display: none; } .atn-ham { display: grid; } .atn-nav__util { gap: 2px; } .atn-mobile { display: block; position: fixed; inset: 54px 0 auto 0; z-index: 1025; background: var(--atn-surface); border-bottom: 1px solid var(--atn-hairline); box-shadow: var(--atn-sh-drop); max-height: calc(100vh - 54px); overflow-y: auto; padding: 8px; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .16s, transform .16s, visibility .16s; } .atn-mobile.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .atn-msec { border-bottom: 1px solid var(--atn-hairline); } .atn-msec:last-child { border-bottom: 0; } .atn-msec__btn { width: 100%; appearance: none; -webkit-appearance: none; border: 0; background: transparent; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: space-between; padding: 14px 10px; color: var(--atn-text); font-size: 14.5px; font-weight: 600; } .atn-msec__lab { display: inline-flex; align-items: center; gap: 11px; } .atn-msec__lab svg { width: 17px; height: 17px; color: var(--atn-text-muted); } .atn-msec__btn .atn-chev { width: 15px; height: 15px; color: var(--atn-text-faint); transition: transform .16s ease; } .atn-msec.is-open .atn-msec__btn { color: var(--atn-brand); } .atn-msec.is-open .atn-msec__btn .atn-chev { transform: rotate(180deg); color: var(--atn-brand); } .atn-msec.is-open .atn-msec__lab svg { color: var(--atn-brand); } .atn-msec__body { display: none; padding: 0 6px 8px; } .atn-msec.is-open .atn-msec__body { display: block; } .atn-msec__body .atn-dropitem { font-size: 14px; padding: 10px; } } @media (max-width: 640px) { .atn-logo__tag { display: none; } } /* ---- footer (main "Stocks Developer" skin; resellers keep their own) ------ Scoped under .atn-footer / footer.atn-footer so it beats the generic `[data-theme="dark"] footer` / `footer a` rules (theme-chrome, gradients) by specificity + load order in BOTH themes — fixes the old dark-mode invisible-link bug and the light-mode neon-green links. */ footer.atn-footer { background: var(--atn-chrome); border-top: 1px solid var(--atn-chrome-line); color: var(--atn-chrome-text); } .atn-footer__wrap { max-width: 1120px; margin: 0 auto; padding: 16px clamp(16px, 4vw, 40px); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .atn-footer .atn-logo__word { color: var(--atn-chrome-text-str); } .atn-footer__logo { display: flex; flex-direction: column; gap: 4px; } .atn-footer__tag { font-size: 11.5px; color: var(--atn-chrome-muted); } .atn-footer__contacts { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .atn-footer .atn-fc { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: var(--atn-r-2); color: var(--atn-chrome-text); font-size: 13px; font-weight: 500; text-decoration: none; opacity: 1; transition: background .12s, color .12s; } .atn-footer .atn-fc svg { width: 15px; height: 15px; color: var(--atn-chrome-accent); flex: none; } .atn-footer .atn-fc small { color: var(--atn-chrome-muted); font-weight: 600; margin-right: -3px; } .atn-footer .atn-fc:hover { background: var(--atn-chrome-hover); color: var(--atn-chrome-text-str); opacity: 1; text-decoration: none; } .atn-footer .atn-fc:hover svg { color: var(--atn-chrome-text-str); } .atn-footer-sep { width: 1px; height: 18px; background: var(--atn-chrome-line); } /* "Report a bug" is a real