/* ========================================================================== Corteksa theme for SquashTM 15.0.0 -------------------------------------------------------------------------- WHAT THIS IS The Corteksa palette applied over SquashTM's own stylesheet. Served by Caddy in place of /squash/styles-.css; the line below pulls SquashTM's real stylesheet back in, and everything after it overrides. See docs/branding.md. WHY @import AND NOT A COPY Shipping a modified copy of SquashTM's 675 KB stylesheet would mean a SquashTM upgrade silently serving last version's CSS to this version's DOM — actively broken, not merely unstyled. Importing means we carry ~200 lines of overrides and the upstream CSS always comes from the running app. WHY !important IS EVERYWHERE, AND IS CORRECT HERE SquashTM applies its theme as INLINE custom properties on at runtime (verified in the browser: document.documentElement carries --nav-main-color and 23 siblings). Inline declarations beat normal author rules, so a plain :root block would lose. An author !important declaration beats an inline normal one — that is the only lever that works, and it is the documented cascade, not a hack. Do not remove these. REVERTING ONE THING The palette is variables-only in §2. Deleting a line restores SquashTM's value for it. §3 onward touches real rules and is where care is needed. ========================================================================== */ @import url("_corteksa-squash-base.css"); /* ========================================================================== 1. The Corteksa palette Source: Corteksa Projects/landing/app/globals.css (.crm-demo block), which is the canonical brand token set. Read, not guessed — and not modified. ========================================================================== */ :root { --ck-violet: #7a55f0; /* --primary, identical in light and dark */ --ck-violet-bright: #9b7ff5; --ck-violet-deep: #4b2fb0; --ck-ink: #14111c; /* --background, dark: violet-tinted near-black */ --ck-ink-deep: #0d0b12; /* --card, dark */ --ck-ink-raised: #1c1826; /* --secondary, dark */ --ck-ink-line: #2a2535; /* --border, dark */ --ck-canvas: #f4f4f3; /* --background, light */ --ck-surface: #ffffff; /* --card, light */ --ck-text: #1f2328; /* --foreground, light */ --ck-text-muted: #656d76; /* --muted-foreground, light */ --ck-line: #ebebed; /* --border, light */ --ck-danger: #d1242f; /* --destructive, light */ --ck-radius: 8px; /* --radius: 0.5rem */ } /* ========================================================================== 2. Repoint SquashTM's theme variables at the palette Every name below is one SquashTM sets inline on . Nothing invented. ========================================================================== */ :root { /* The side navigation — which is what "brand it Corteksa" mostly means. */ --nav-main-color: var(--ck-ink) !important; /* Surfaces. Backgrounds and borders ONLY. No text colour is set from this block, and none should be — see the note immediately below. */ --background-color: var(--ck-canvas) !important; --container-background-color: var(--ck-surface) !important; --container-border-color: var(--ck-line) !important; } /* ========================================================================== EVERY TEXT COLOUR IS DELIBERATELY LEFT TO SQUASHTM -------------------------------------------------------------------------- An earlier revision of this file unified all nine workspace accent colours on the Corteksa violet. That turned every heading, tree node name and grid title violet, which reads as "everything on this page is a link". The owner asked for SquashTM's colours back on 2026-09-05. THIS IS A DECISION, NOT AN OMISSION. Do not re-add those overrides. What is preserved by not touching it — SquashTM's per-workspace accent, which is functional wayfinding: the colour tells you which workspace you are in before you read the heading. Test cases / Automation / Action words green #037F4C Requirements blue #0078ae Campaigns purple #751AA3 Custom reports crimson #a2104d Bugtracker orange #f69422 Administration navy #435979 Home ink #191D35 It drives headings, tree node names, the active navigation item, tab underlines, link hovers and row hover/selection tints — so leaving --current-workspace-* alone restores all of those at once. --label-color, --gray-accented-color, --selected-color and --user-value-color are untouched for the same reason: every one of them is a text colour. Corteksa's identity is carried by the chrome instead — the logo, the dark navigation, the login call to action and the user avatar. ========================================================================== */ /* ========================================================================== 3. Spacing SquashTM's content card is padded 10px and rounded 5px, which leaves tables and forms almost touching their own border. These are safe to change because the app's reset sets box-sizing: border-box globally, so padding grows inward and cannot push a `full-height` container into overflow. NOTHING HERE CHANGES A WIDTH, A HEIGHT, A DISPLAY MODE OR A FLEX RULE. The whole layout is `full-height full-width overflow-hidden` flexbox, and that is exactly the kind of layout that breaks when you nudge box metrics. Only padding, radius, colour and border are touched. ========================================================================== */ .sqtm-large-grid-container { padding: 16px !important; border-radius: var(--ck-radius) !important; } /* The vertical anchor strip's icons sit flush against the panel edges. */ .anchor-bar { padding-block: 6px !important; } /* The workspace tree column: its action toolbar and the tree beneath it share an edge with no separation, and the tree's first row starts hard against the navigation. The selector is the toolbar's own class combination — the component wrapper is a per-workspace tag name (sqtm-app-test-case-workspace- tree, …-requirement-…, one per workspace) that CSS cannot match generically. */ .m-5.font-20-px.flex-fixed-size.flex-row { border-bottom: 1px solid var(--ck-line) !important; padding-bottom: 6px !important; margin-bottom: 8px !important; } .sqtm-core-prevent-selection-in-grid { padding-left: 8px !important; } /* ========================================================================== 4. Corners SquashTM ships --rounding-factor: 0 — every input, button, card and dropdown is a hard rectangle. Corteksa's system is 0.5rem. Rounding is applied to the specific component classes rather than globally with `*`, because a blanket radius also rounds table cells, scrollbars and dividers, which looks broken. ========================================================================== */ .ant-btn, .ant-input, .ant-input-affix-wrapper, .ant-select-selector, .ant-modal-content, .ant-dropdown-menu, .ant-tooltip-inner, .ant-tag, .sqtm-overlay-border { border-radius: 6px !important; } .ant-btn-circle, .ant-avatar { border-radius: 50% !important; } /* ========================================================================== 5. Typography legibility Grid headers ship uppercase at a small size, which is the least legible combination in the app and the one an operator reads most. Sentence case at a slightly heavier weight reads faster without changing any box metrics. NOTE: no `color` here. Case and weight are legibility; the colour is SquashTM's and stays SquashTM's, per the text-colour note in §2. ========================================================================== */ .sqtm-grid-header-cell, .sqtm-grid-header-cell * { text-transform: none !important; letter-spacing: 0.01em !important; font-weight: 600 !important; } /* ========================================================================== 6. Focus visibility The default focus ring is the old navy at low contrast. Accessible keyboard focus matters more on an internal tool than anywhere else, because this is where people live all day. The ring follows --current-workspace-main-color rather than the brand violet, so it stays coherent with whichever workspace accent SquashTM is showing. ========================================================================== */ .ant-input:focus, .ant-input-focused, .ant-input-affix-wrapper:focus-within, .ant-select-focused .ant-select-selector, .ant-btn:focus-visible { border-color: var(--current-workspace-main-color) !important; box-shadow: 0 0 0 3px var(--current-workspace-box-shadow-color) !important; } /* ========================================================================== 7. Side navigation The nav is the one surface where Corteksa's dark palette does real work, so it gets the tuning the rest of the app does not need. ========================================================================== */ /* --- Separators ---------------------------------------------------------- SquashTM draws these as a 1px div filled with #36395f — a blue-navy picked to sit on its own #191D35 sidebar. On Corteksa's violet-black it reads as a distinctly BLUE line, most visibly the one directly under the logo. They are also inconsistent out of the box: three run edge to edge at 170px and the one between Executions and Reporting is inset to 130px, for no reason that survives looking at it. Margin here makes all four inset to the same 16px as the navigation labels, so the separators line up with the text they separate instead of cutting across the panel. */ .sqtm-nav-bar-divider { background-color: var(--ck-ink-line) !important; margin: 8px 16px !important; } /* One of the four sits inside a wrapper carrying SquashTM's .p-l-20 .p-r-20 utility classes, so it inherited 20px of padding ON TOP of the margin above and came out 40px narrower than its siblings. Zeroing the wrapper is what makes all four the same width. :has() scopes this to wrappers that actually contain a divider — .p-l-20 and .p-r-20 are generic utilities used all over the application, and blanket- zeroing them would re-space unrelated screens. */ .ant-menu-dark .p-l-20.p-r-20:has(> .sqtm-nav-bar-divider) { padding-inline: 0 !important; } /* --- Items -------------------------------------------------------------- SquashTM paints the selected item as a full-bleed rectangle, edge to edge across the panel and squared off against both sides. Insetting it and rounding the corners is the single change that most separates this from "a 2014 admin template", and it costs no layout: these are block-level children of a vertical menu, so a horizontal margin simply narrows them. Both selectors are needed because the two kinds of entry differ: a plain workspace link IS the

, while a submenu's highlight is a

inside its

. Styling only one leaves Automation and Administration square while everything above them is rounded. */ .ant-menu-dark .ant-menu-item, .ant-menu-dark .ant-menu-submenu-title { margin-inline: 8px !important; width: auto !important; border-radius: 6px !important; } /* Hover feedback before an item is active. SquashTM has none at all, so the navigation feels dead until something is clicked. */ .ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected):hover, .ant-menu-dark .ant-menu-submenu-title:hover { background-color: var(--ck-ink-raised) !important; } /* --- The logo block ----------------------------------------------------- 60px tall with the wordmark held 10px off every edge, which puts it almost against the top of the window and crowds it against the separator below. Widening the block's own padding gives the mark room without moving anything else: the wordmark is an SVG that letterboxes into whatever box it is given (see scripts/brand/build-brand-assets.sh), so it re-centres itself. */ li.home-workspace-link { padding-block: 6px 8px !important; } /* Navigation entries removed on owner request, 2026-09-05: "Action words" (SquashTM's BDD keyword workspace, unused here) and "Help" (links out to Squash's own documentation, which is not this platform's). SquashTM has no setting for either — core_config carries feature flags for milestones, quick test and automation servers, and nothing for these — so hiding the entries is the available lever. TWO SELECTOR STYLES, ON PURPOSE. SquashTM labels its navigation two different ways and each entry only has one of them: - workspace links carry a class, e.g. .action-word-workspace-link - submenus carry data-test-navbar-field-id, e.g. "help" The data attribute is the better anchor where it exists: it is SquashTM's own test hook, so it is meant to be stable, unlike a styling class. THESE ARE COSMETIC, NOT PERMISSIONS. Both destinations still exist and still resolve if someone types the URL. To make one genuinely unreachable, change the profile in Administration — a stylesheet cannot enforce access. */ li.action-word-workspace-link, li[data-test-navbar-field-id="help"] { display: none !important; } /* The user avatar at the foot of the nav ships a hard-coded teal-green (rgb(17,166,124)) as an INLINE style, so it survived the variable remap and was the one thing on screen still wearing SquashTM's palette. Inline is why this needs !important; ant-avatar-lg + circle is the nav's avatar specifically, not the small ones used inside grids. :not(.admin-avatar) IS LOad-BEARING. The same three classes are worn by the "leave administration" button, whose icon is drawn with fill="currentColor". Painting its background violet left a violet glyph on a violet disc — an invisible control. It keeps SquashTM's own light treatment, which also reads correctly as a different kind of action from an identity chip. */ nz-avatar.ant-avatar-lg.ant-avatar-circle:not(.admin-avatar) { background-color: var(--ck-violet) !important; } /* ========================================================================== 9. Login page The first screen anyone sees, and the most brand-forward. Its submit button inherits --nav-main-color, so with the Corteksa ink applied it rendered as a near-black slab; Corteksa's design system puts --primary on primary actions. Scoped to .login-page so no other .ant-btn-lg in the app is affected. ========================================================================== */ /* FIVE CLASSES ON PURPOSE — DO NOT SHORTEN THIS SELECTOR. Angular emits the login component's own style as .submit-button[_ngcontent-XXX] .ant-btn[_ngcontent-XXX] { background: var(--nav-main-color) !important } in a