/* ***************************************************** ** Custom Stylesheet ** Any custom styling you want to apply should be defined here. ***************************************************** */ /* Custom CSS for Vercaa 2026 Theme * * This file allows you to customize the theme colors and styles for the entire Vercaa 2026 template. * It is the SINGLE SOURCE OF TRUTH for color/design tokens across both this classic Smarty client * area AND the Vue/Shadow-DOM cart+domain-search app (templates/orderforms/vercaa-2026-cart), whose * own --vl-* variables reference these same tokens (--vl-primary: var(--primary) etc.) — CSS custom * properties inherit through the Shadow DOM boundary even though regular styles don't, so edit colors * ONLY here, never in the cart template's own custom.css. * * Loaded AFTER theme.min.css (see includes/head.tpl), so anything declared here safely overrides the * compiled Sass output via normal cascade — no Sass build step is required for changes here to take * effect. (There is no package.json/gulpfile/node_modules in this webroot, so sass/*.scss cannot * currently be rebuilt in this environment; theme.css/theme.min.css already reference many of these * same custom properties directly — e.g. var(--bg-inverted), var(--success), var(--text) — so editing * the token values below re-themes those compiled rules too. New component CSS that theme.css does NOT * already have hooks for — the app shell header/sidebar, modals, badges, etc. — is authored directly in * this file instead of hand-patching the 290KB compiled theme.css.) */ :root { --white: #fff; /* Neutral shades (light mode base) */ --neutral-50: #fbf9fa; --neutral-100: #f4f5f7; --neutral-200: #e4e4e7; --neutral-300: #d0d5dd; --neutral-400: #9ca3af; --neutral-500: #6b7280; --neutral-600: #4b5563; --neutral-700: #374151; --neutral-800: #1f2937; --neutral-900: #111827; --neutral-950: #030712; /* Primary = the REAL Vercaa purple (2026-08-13 foundational retheme, superseding the 2026-08 green rebalance above/below this comment — that rebalance was working from an assumption, not the client's actual live site; #a83fff was sampled directly via getComputedStyle from the real production vercaa.com on 2026-08-13, the exact same sampling already anchoring the 7 Market Connect pages' own --mc-purple token in market/_tokens.css, so this now matches that sibling surface exactly rather than competing with it). Purple IS the dominant/primary accent on the real site — main CTA buttons, links, the logo — not a minor accent. -lifted is the real site's own hover shade (--mc-purple-dark, #8b2fd9, 5.99:1 on white — used for hover/press, not just a mechanical darken). -accented is a hand-tuned deep ink (8.7:1 on white, 7.4:1 on -soft) for plain link/label text and soft-tint icon chips, since the old green family's derived shades were tuned for green's lightness/saturation and would misread on purple. -soft is a pale opaque tonal tint for light-mode chip/badge backgrounds (see --primary-soft's dark-mode translucent redefinition below for the dark-surface equivalent). */ --primary: #a83fff; --primary-lifted: #8b2fd9; --primary-accented: #6b21a8; --primary-soft: #f3e9fb; /* -glow (2026-08-14 dark-mode contrast fix) — a real WCAG relative-luminance audit against the live dark theme found #a83fff itself sits at a lightness where NEITHER white nor near-black text clears 4.5:1 against it as a solid fill (white on #a83fff: 4.36:1; dark ink: 4.25:1), AND raw #a83fff used directly AS text-on-dark-surface (the "Available" domain-status label, "SAVE X%" badges, --primary-accented's old dark-mode alias) only manages 4.33-4.5:1 depending on which dark surface it sits on. No light-mode default is exercised (--primary-glow is inert until dark mode redefines it below) — kept defined here per this file's own convention of every token getting a base :root value. See the dark-mode block below for the real value + math. */ --primary-glow: var(--primary); /* Secondary = Vercaa Orange, tightened to the real site's exact sampled value (--mc-orange in market/_tokens.css). Used for secondary CTAs, promo/discount badges, highlights, and (via --warning below) the pending/warning role. */ --secondary: #f97316; --secondary-lifted: #db600b; --secondary-accented: #a54909; --secondary-soft: #fdeadd; /* Success = its OWN independently-defined green — deliberately NOT derived from --primary anymore (2026-08-13: --primary and --success used to share the exact hex #5ec269, a semantic conflation from the prior green-primary era; now that --primary is purple, every "paid" / "active" / checkmark / positive-state usage sitewide needs --success to keep reading as unambiguously green on its own). Nudged from the old #5ec269 toward the real site's supporting green (--mc-green, #22c55e) — a minor refinement (hue 127°→130°, richer/deeper), not a wholesale swap, per instruction: the point was decoupling, not reinventing the green. -accented was hand-picked (not mechanically derived) to clear 4.5:1 on both -soft (5.5:1) and white (6.1:1) — a real improvement over the pre-existing green family's own 3.9:1 on -soft. */ --success: #4cc661; --success-lifted: #3ba44d; --success-accented: #297035; --success-soft: #e5f8e8; /* Accent Purple — RETIRED as a second, competing purple hue (2026-08-13). Now that --primary itself is Vercaa's real purple, keeping a separate --accent-purple family at a different lightness/saturation would just be two visually-similar-but-not-identical purples fighting for the same "this is the purple token" role sitewide (24+ real call sites: MarketConnect category icons/empty-states, SSL EV certificate styling, ticket "in progress" avatar + stat tile, promo tooltips, sidebar active-nav indicator, language-modal decoration). Aliased to the --primary family via live var() references (not new hex) so every one of those call sites inherits the real brand purple automatically — no per-call-site edits needed, and MarketConnect in particular now correctly shares its accent color with the already-built, purple-branded standalone market/*.php pages instead of a slightly-off second purple. Token names kept for backward compatibility with existing call sites. */ --accent-purple: var(--primary); --accent-purple-lifted: var(--primary-lifted); --accent-purple-accented: var(--primary-accented); --accent-purple-soft: var(--primary-soft); /* Info = neutral informational blue — deliberately NOT one of the 3 brand colors (brand doc §12), so 2FA notices / card-authorization banners read as neutral info, not brand or warning. Aligned to the real site's exact sampled blue (--mc-blue in market/_tokens.css, "seen on the real site's info/tech icons" — a direct semantic match for this token's own role). */ --info: #3b82f6; --info-lifted: #1d6ae7; --info-accented: #1456c2; --info-soft: #e8f0fc; /* Notice = a distinct indigo, deliberately hue-shifted (2026-08-13) away from the old #6d5df2 violet, which sat too close to the new --primary purple (H246 vs H273 — read as "the same purple, slightly off" when the two appear near each other, e.g. affiliates.tpl's stat-tile row which places --info/--success/--notice tiles side by side). #6366f1 sits roughly equidistant between --info's blue (H217) and --primary's purple (H273), reading as its own clearly-distinct "indigo" family in either company, not a muddy near-purple. Still low real usage (one call site, .app-stat-tile-notice) so this is a hue correction, not a promotion to heavy use. */ --notice: #6366f1; --notice-lifted: #5154dd; --notice-accented: #4144c3; --notice-soft: #e9e9fe; /* Warning reuses the Orange secondary hue per brand doc §12 ("Warning / pending" -> Vercaa Orange). */ --warning: #f97316; --warning-lifted: #db600b; --warning-accented: #a54909; --warning-soft: var(--secondary-soft); /* Error = a distinct red, never reused for warning/promo, so orange doesn't do double duty. */ --error: #e11d3c; --error-lifted: #c81733; --error-accented: #a01229; --error-soft: #fbe4e8; /* -glow (2026-08-14 dark-mode contrast sweep finding): raw --error as text-on-dark (e.g. the avatar dropdown's "Logout" link, .app-dropdown-item-danger) only clears 4.02-4.14:1 on the real dark surfaces -- same underlying issue as --primary's, just narrower. Inert in light mode, same convention as --primary-glow. */ --error-glow: var(--error); /* Grayscale colors (light-mode default: near-black text/ink) */ --grayscale: var(--neutral-900); --grayscale-lifted: var(--neutral-800); --grayscale-accented: var(--neutral-700); /* Neutral colors */ --neutral: var(--neutral-500); --neutral-lifted: var(--neutral-600); --neutral-accented: var(--neutral-700); /* Text neutral colors */ --text-inverted: var(--white); --text-muted: var(--neutral-400); --text-lifted: var(--neutral-500); --text-accented: var(--neutral-600); --text: var(--neutral-900); /* Border neutral colors */ --border-muted: var(--neutral-200); --border: var(--neutral-300); --border-lifted: var(--neutral-400); --border-accented: var(--neutral-600); /* Background neutral colors */ --bg: var(--white); --bg-muted: var(--neutral-50); --bg-lifted: var(--neutral-100); --bg-accented: var(--neutral-200); --bg-inverted: var(--neutral-900); /* Additional colors (unchanged, kept for any existing component that references them) */ --yellow-200: #fff085; --yellow-300: #ffdf20; --teal-300: #46edd5; --teal-400: #00d5be; --emerald-300: #5ee9b5; --pink-400: #fb64b6; /* Font sizes */ --text-xs: 0.625rem; --text-sm: 0.75rem; --text-md: 0.875rem; --text-lg: 1rem; /* Typography — heading/display font (2026-08-12 foundational pass, closing the "looks like default WHMCS + colors" gap: "Modern Professional" pairing — geometric/confident Poppins for headings+display text, paired with the existing Open Sans body copy, the standard SaaS/ corporate-app pairing). --font-body made an explicit, referenceable token too (previously the Open Sans family was only ever applied via a hardcoded `body{font-family:"Open Sans",sans-serif}` rule baked into the compiled theme.min.css, not a real custom property). */ --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Spacing */ --outline-sm: 1px; --outline-md: 2px; --outline-lg: 3px; /* Rounding — sm/md/lg/xl (4/8/12/16px) stay the small-to-medium control/card scale. Added --rounding-2xl (2026-08-13 foundational retheme) at 28px to match the Market Connect pages' own --mc-radius-xl exactly (market/_tokens.css) — used deliberately, not just defined, on the hero-scale surfaces that should read at that same generous "premium" radius (the gradient banner shell); everyday cards/controls stay on the existing sm/md/lg/xl steps so this doesn't get forced everywhere. */ --rounding-sm: 0.25rem; --rounding-md: 0.5rem; --rounding-lg: 0.75rem; --rounding-xl: 1rem; --rounding-2xl: 1.75rem; /* Elevation — soft multi-layer shadow scale. Enriched 2026-08-13 to match the noticeably richer, softer "floating" shadow language already shipped on the Market Connect pages (market/*.php, e.g. --ssl-shadow: 0 24px 70px -36px rgba(15,17,21,.35)) instead of the older flatter single- layer values: each level is now a tight contact shadow + a soft, wide, negative-spread ambient shadow layered together (same dual-layer technique as those pages' --es-shadow-sm/--ox-shadow- 2), using the same rgba(15,17,21,…) near-black "ink" tint as their --mc-ink rather than pure black, for a slightly warmer, less harsh shadow. 4 levels unchanged in meaning: 1 = resting card surface, 2 = hover/raised state, 3 = dropdowns/popovers/sticky elements, 4 = modals/ dialogs (the domain-search modal's own literal `0 20px 60px rgba(0,0,0,.35)` shadow remains its own independent value, out of this pass's scope, per the existing note below). */ --elevation-1: 0 1px 2px rgba(15, 17, 21, 0.04), 0 6px 16px -6px rgba(15, 17, 21, 0.08); --elevation-2: 0 3px 8px rgba(15, 17, 21, 0.06), 0 14px 32px -12px rgba(15, 17, 21, 0.16); --elevation-3: 0 6px 16px rgba(15, 17, 21, 0.08), 0 24px 48px -16px rgba(15, 17, 21, 0.2); --elevation-4: 0 12px 28px rgba(15, 17, 21, 0.12), 0 32px 70px -24px rgba(15, 17, 21, 0.3); /* Other */ --letter-spacing: 0em; --disabled-opacity: 25%; /* ----------------------------------------------------------------- Motion tokens — measured live from hosting.com (see docs/hosting-com-motion-interaction-reference.md), not guessed. ----------------------------------------------------------------- */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* buttons/fills (Tailwind "ease") */ --ease-out: cubic-bezier(0, 0, 0.2, 1); /* hover backgrounds / nav items */ --duration-fast: 150ms; /* dropdowns/popovers (avatar menu, notif panel entrance) */ --duration-base: 200ms; /* modals, notification panel */ --duration-slow: 300ms; /* button hover fills */ --duration-drawer-open: 500ms; /* mobile sidebar drawer opening (asymmetric, per spec) */ --duration-drawer-close: 300ms; /* mobile sidebar drawer closing */ /* Stacked focus-visible ring: 2px "gap" ring + accent ring, mirrors :active for press feedback. */ --focus-ring-color: var(--primary); --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring-color); /* Always-on-brand gradient — intentionally declared OUTSIDE the [data-theme="dark"] block below so hero/promo banners never invert with the light/dark toggle (brand doc §12 "Dark-mode conventions"). Rebuilt purple-forward (2026-08-13) to match the real vercaa.com homepage's own hero treatment: a soft, layered, multi-color radial WASH rather than a hard 2-stop diagonal fill (the closest already-built local reference is monitoring.php's `.mp-hero-glow`, three radial color blooms over the page background) — reproduced here as radial blooms layered over an opaque purple linear base instead of a plain white page, since this token fills solid banner/card surfaces with white text on top and needs to stay dark/rich enough for that text to stay readable throughout, not just at one edge. Built entirely from existing tokens (var(-- primary/-lifted/-accented), var(--info), var(--secondary/-accented)) plus color-mix() — no new hex literals — so it stays in sync automatically if those tokens are ever retuned. -warm swaps the cool blue corner bloom for a warm orange one and folds a touch of --secondary into the deepest stop, same "nods to orange without looking dull" relationship the old green version had with its gold midpoint. */ --gradient-brand: radial-gradient(130% 160% at 0% 0%, rgba(255, 255, 255, 0.16) 0%, transparent 42%), radial-gradient(90% 130% at 100% 100%, color-mix(in srgb, var(--info) 42%, transparent) 0%, transparent 55%), linear-gradient(135deg, var(--primary) 0%, var(--primary-lifted) 55%, var(--primary-accented) 100%); --gradient-brand-warm: radial-gradient(130% 160% at 0% 0%, rgba(255, 255, 255, 0.18) 0%, transparent 42%), radial-gradient(90% 130% at 100% 100%, color-mix(in srgb, var(--secondary) 55%, transparent) 0%, transparent 55%), linear-gradient(135deg, var(--primary) 0%, var(--primary-lifted) 50%, color-mix(in srgb, var(--secondary-accented) 55%, var(--primary-accented) 45%) 100%); /* App-shell layout tokens */ --header-height: 64px; --sidebar-width: 263px; --sidebar-width-collapsed: 78px; } /* ----------------------------------------------------------------------- Dark mode — near-black bg with a slight cast, card surface one step lighter, off-white heading text, mid-gray secondary text (brand doc §12 "Dark-mode conventions"). Toggled via data-theme="dark" on by js/app-shell.js and persisted to localStorage. ----------------------------------------------------------------------- */ :root[data-theme="dark"] { --bg: #0c0b12; --bg-muted: #121019; --bg-lifted: #1b1926; --bg-accented: #262433; --bg-inverted: #f4f5f7; --text: #f5f3f8; --text-accented: #d9d6e1; --text-lifted: #ada9bc; /* Bumped 2026-08-14 (dark-mode contrast audit) from #78748a — that value cleared only 4.35:1 on --bg and 4.19:1 on --bg-muted (a real fail; e.g. the domain-search modal's "Was $X.XX" strikethrough price, .app-domain-row-strike, sits on --bg-muted). #9390a2 is the same hue/ saturation lifted a few points, clearing all 4 dark surfaces in real use: 6.30:1 on --bg, 6.06:1 on --bg-muted, 5.56:1 on --bg-lifted, 4.88:1 on --bg-accented. Still clearly a step below --text-lifted (8.5+:1) so the muted/secondary hierarchy is preserved, just no longer failing. */ --text-muted: #9390a2; --text-inverted: #14121c; --border: #2c2a3a; --border-muted: #201e2a; --border-lifted: #3c3950; --border-accented: #504c68; --grayscale: #f5f3f8; --grayscale-lifted: #d9d6e1; --grayscale-accented: #ada9bc; --neutral: #ada9bc; --neutral-lifted: #928da3; --neutral-accented: #78748a; /* Soft brand tints become translucent overlays instead of pale flat fills on a dark base. Recomputed 2026-08-13 from the new purple/orange/green/blue/indigo bases above (same alpha per color this file already used, just fed the new hex). --accent-purple-soft is intentionally NOT listed here anymore: it's aliased to var(--primary-soft) up in :root now (see the "Accent Purple — RETIRED" comment), and that's a live var() reference, not a literal hex, so it already auto-resolves to the translucent purple overlay defined below without needing its own dark-mode line — one less place to keep in sync. */ --primary-soft: rgba(168, 63, 255, 0.18); --secondary-soft: rgba(249, 115, 22, 0.18); --success-soft: rgba(76, 198, 97, 0.18); --warning-soft: var(--secondary-soft); --error-soft: rgba(225, 29, 60, 0.2); --info-soft: rgba(59, 130, 246, 0.22); --notice-soft: rgba(99, 102, 241, 0.2); /* The "-accented" shades (e.g. --success-accented) were tuned as dark ink sitting on PALE light-mode "-soft" pastel fills. On the translucent dark "-soft" overlays defined just above, that same dark ink reads as a muddy, low-contrast smudge — every .app-status-badge-*, .alert-*, .app-icon-circle-*, .app-text-success etc. pairing "-soft" bg with "-accented" text/icon color is affected sitewide (Home dashboard, Products & Services, Invoices, Domains empty state, Language/Currency modal). Fix: re-point each "-accented" token to its own already-defined bright base token for dark mode — same reuse-an-existing-token pattern this file's own domain-search modal already ships (.app-domain-modal's --domain-ink swaps var(--primary- accented) -> var(--primary) in dark mode for the identical reason). No new hex values introduced. --accent-purple-accented again needs no line of its own here: it's `var(--primary- accented)` in :root, a live reference, so it automatically picks up --primary-accented's dark-mode value (var(--primary)) the moment that's redefined below — the alias chain does the work that used to need its own explicit override. */ /* --primary-accented used to alias straight to var(--primary) here (raw #a83fff) "for the identical reason" domain-ink's own dark override did (see that token's comment) — i.e. swap the muddy light-mode ink for something brighter. But raw --primary itself only clears 4.33-4.5:1 on the real dark surfaces (--bg-muted/--bg), which is where the ~60 sitewide consumers of --primary-accented-as-text (icon chips on --primary-soft, KB/landing-page links, welcome-stat icons, etc.) actually sit — a real, if less dramatic, AA fail. Repointed 2026-08-14 to the new --primary-glow (#b55cff, 5.3-5.5:1 on those same surfaces) instead. NOTE: a handful of *background-fill* consumers of --primary-accented (button :active states, the domain-upsell banner CTA, 2 SSL landing-page gradients) do NOT go through this alias anymore in dark mode — they're explicitly repointed to --primary-lifted via their own dark-mode overrides further down this file, since a brighter fill would only make their hardcoded white text less readable, not more. --primary-glow's own value only exists in dark mode (see --text-muted comment above for the sibling fix); it is NOT reused for light mode. */ --primary-accented: var(--primary-glow); /* The new bright text-on-dark purple. Same H273/S100 hue+saturation as --primary itself, lightness lifted from L62 to L68 (i.e. a real "-glow" derivation of the brand color, not an unrelated hex) — clears 4.5:1+ on every real dark surface in use: 5.54:1 on --bg (#0c0b12), 5.33:1 on --bg-muted (#121019, the domain-search modal's own dialog background), 4.89:1 on --bg-lifted (#1b1926, card surfaces). Used for --primary-accented's dark alias above, the domain-search modal's --domain-ink (see domain-search-modal.css), and .text-primary/.border-primary/ .btn-outline-primary's resting state below. */ --primary-glow: #b55cff; --secondary-accented: var(--secondary); --success-accented: var(--success); --warning-accented: var(--warning); --info-accented: var(--info); --notice-accented: var(--notice); /* Real bright value (WCAG derivation: same H350/S77 hue+saturation as --error, lightness lifted L50->L61) -- clears 4.5:1+ on --bg (5.36), --bg-muted (5.16), --bg-lifted (4.73). All 5 real consumers of --error-accented are text-on-soft/generic-text roles (.alert-danger, .app-text-error, .app-icon-circle-danger, the KB downvote button) -- no background-fill consumers found, so (unlike --primary-accented) this one token can safely serve every consumer without a separate -lifted-style carve-out. */ --error-glow: #e84f67; --error-accented: var(--error-glow); --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring-color); /* Elevation shadows need noticeably more alpha on a dark base to read as depth at all — a light-mode-alpha shadow is nearly invisible against a page that's already near-black. Enriched 2026-08-13 alongside the light-mode dual-layer rebuild (see that comment above): same tight- contact + wide-ambient two-layer shape, scaled up in blur/spread/offset to match, alpha raised further still per the existing "dark needs more alpha to read at all" principle. */ --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px -6px rgba(0, 0, 0, 0.35); --elevation-2: 0 3px 8px rgba(0, 0, 0, 0.35), 0 14px 32px -12px rgba(0, 0, 0, 0.45); --elevation-3: 0 6px 16px rgba(0, 0, 0, 0.4), 0 24px 48px -16px rgba(0, 0, 0, 0.5); --elevation-4: 0 12px 28px rgba(0, 0, 0, 0.45), 0 32px 70px -24px rgba(0, 0, 0, 0.6); } /* ========================================================================= Global component rebrand — Bootstrap utility classes used site-wide that don't already reference the token system in compiled theme.css. ========================================================================= */ /* .btn-primary / .btn-outline-primary — genuine hover/press refresh (2026-08-13 foundational retheme), not just a color swap: hover now moves to the real site's own hover shade (--primary-lifted, matching the exact `background:var(--mc-purple-dark)` pattern already shipped on the Market Connect pages' buttons) with a soft colored glow + a 1px lift, instead of the old same-color-plus-brightness-filter treatment. Press/active settles back down onto --primary- accented with a tighter, closer shadow — a believable "pressed" read. */ .btn-primary { /* 2026-08-25 light-mode contrast fix (DEFERRED.md §11.2): resting-state white text on raw --primary was 4.36:1, fails WCAG AA's 4.5:1 minimum -- the site's own primary CTA button, in its own default/light theme. Real WCAG relative-luminance math (both independently re-derived): white on --primary-lifted (#8b2fd9) = 5.99:1. Exactly mirrors the 2026-08-14 dark-mode fix a few lines below (:root[data-theme="dark"] .btn-primary already uses this same --primary-lifted value for the identical reason) -- this is that same fix, applied to light mode's own base rule. :hover (--primary-lifted, 5.99:1) and :active (--primary- accented, 8.72:1) below were ALREADY safe -- only resting/idle state was ever broken. */ background: var(--primary-lifted); border-color: var(--primary-lifted); color: var(--text-inverted, #fff); box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--primary) 45%, transparent); transition: background-color var(--duration-slow) var(--ease-standard), border-color var(--duration-slow) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .btn-primary:hover, .btn-primary:focus, .btn-primary.focus { background: var(--primary-lifted); border-color: var(--primary-lifted); color: #fff; box-shadow: 0 10px 22px -6px color-mix(in srgb, var(--primary) 55%, transparent); transform: translateY(-1px); } .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active { background: var(--primary-accented); border-color: var(--primary-accented); color: #fff; box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--primary) 45%, transparent); transform: translateY(0); } .btn-outline-primary { color: var(--primary); border-color: var(--primary); background: transparent; transition: background-color var(--duration-slow) var(--ease-standard), color var(--duration-slow) var(--ease-standard), border-color var(--duration-slow) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 10px 22px -6px color-mix(in srgb, var(--primary) 45%, transparent); transform: translateY(-1px); } .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active { background: var(--primary-accented); border-color: var(--primary-accented); color: #fff; transform: translateY(0); } .badge-primary { background-color: var(--primary); } .text-primary { color: var(--primary) !important; } .bg-primary { background-color: var(--primary) !important; } .border-primary { border-color: var(--primary) !important; } /* --------------------------------------------------------------------- Dark-mode contrast fix (2026-08-14, real WCAG relative-luminance audit against the live dark theme — see the --primary-glow/--text-muted token comments above for the underlying numbers). Two distinct problems, two distinct fixes, neither touching --primary's own real-sampled-from- vercaa.com hex: 1. Solid-fill buttons/badges/pills that use raw --primary as a BACKGROUND with white text (Continue/Search buttons, "Added to basket" success states, active pill-tabs) only clear 4.25-4.36:1 in dark mode -> swapped to the EXISTING --primary-lifted (white text on #8b2fd9 is 5.99:1, already comfortably AA in every mode -- no new token needed for this half). 2. Text/border colored directly AS --primary on a dark surface (Bootstrap .text-primary/.border-primary, .btn-outline-primary's resting state) only clears 3.97-4.5:1 -> swapped to the new --primary-glow (5.3-5.5:1 on the real dark surfaces in use). --------------------------------------------------------------------- */ :root[data-theme="dark"] .btn-primary { background: var(--primary-lifted); border-color: var(--primary-lifted); color: #fff; } :root[data-theme="dark"] .btn-primary:not(:disabled):not(.disabled):active, :root[data-theme="dark"] .btn-primary:not(:disabled):not(.disabled).active { background: var(--primary-lifted); border-color: var(--primary-lifted); } :root[data-theme="dark"] .btn-outline-primary { color: var(--primary-glow); border-color: var(--primary-glow); } :root[data-theme="dark"] .btn-outline-primary:hover, :root[data-theme="dark"] .btn-outline-primary:not(:disabled):not(.disabled):active, :root[data-theme="dark"] .btn-outline-primary:not(:disabled):not(.disabled).active { background: var(--primary-lifted); border-color: var(--primary-lifted); } :root[data-theme="dark"] .badge-primary { background-color: var(--primary-lifted); } :root[data-theme="dark"] .bg-primary { background-color: var(--primary-lifted) !important; } :root[data-theme="dark"] .text-primary { color: var(--primary-glow) !important; } :root[data-theme="dark"] .border-primary { border-color: var(--primary-glow) !important; } /* --secondary/orange notification/cart-count badge (.app-icon-badge, header) — white text on raw --secondary (#f97316) is only 2.8:1 (fails badly, not borderline, in ANY theme since --secondary itself never varies by theme). Scoped as a dark-mode-only fix per this task's scope (light mode "was NOT reported as broken", left untouched). Text swapped to var(--text-inverted) rather than darkening the fill: --secondary-accented is NOT usable here — like --primary-accented, it's already re-aliased to raw var(--secondary) inside this same dark block (for its own, separate, correct text-on-soft-tint-chip role a few dozen lines down) so referencing it from here would silently resolve to the unchanged, still-failing #f97316. --secondary-lifted (#db600b) was also checked and rejected: still only 3.69:1 with white text, not enough. --text-inverted's real dark-mode value (#14121c, defined in this same :root[data-theme="dark"] block) against #f97316 is 6.61:1 — comfortably AA, and keeps the badge's fill the real, unaltered brand orange. */ :root[data-theme="dark"] .app-icon-badge { color: var(--text-inverted); } /* The following are every OTHER real sitewide consumer that fills a solid background straight from var(--primary) (not --primary-lifted) and pairs it with hardcoded white text — same underlying 4.25-4.36:1 fail as .btn-primary above, just each its own one-off selector instead of going through a shared class. Swapped to --primary-lifted for the identical reason. */ :root[data-theme="dark"] .app-domain-upsell-btn { background: var(--primary-lifted); } :root[data-theme="dark"] .tld-filters a.app-pill-btn.active { background: var(--primary-lifted); border-color: var(--primary-lifted); } :root[data-theme="dark"] .vhp-hero-search-card #btnDomainSearch, :root[data-theme="dark"] .vhp-hero-search-card #btnDomainSearch2 { background: var(--primary-lifted) !important; border-color: var(--primary-lifted) !important; } :root[data-theme="dark"] .landing-page.threesixtymonitoring .btn-primary { background-color: var(--primary-lifted) !important; border-color: var(--primary-lifted) !important; } :root[data-theme="dark"] .vrg-rail-item.is-active .vrg-rail-marker { background: var(--primary-lifted); border-color: var(--primary-lifted); } :root[data-theme="dark"] .landing-page.ssl .certificate-options { background: linear-gradient(135deg, var(--primary-lifted) 0%, var(--primary) 100%) !important; } :root[data-theme="dark"] .landing-page.ssl .validation-levels { background: linear-gradient(135deg, var(--primary-lifted) 0%, var(--primary) 60%, var(--secondary-accented) 130%) !important; } /* Second sweep pass (2026-08-14) — a handful more turned up on a full-file grep for "background: var(--primary)"/"var(--secondary)" beyond the ones already handled above: pill-select "selected" states, the ticket-open page's own copy of that same component, a client- area focus/hover fallback, the order form's ion-range-slider fill+value tooltip, and several third-party-product landing pages (SSL, CodeGuard, OX comparison table, NordVPN). Same two fixes as everywhere else: --primary-as-fill -> --primary-lifted; --secondary-as-fill kept as the real brand orange, text swapped to --text-inverted (6.61:1) instead, for the same reason documented on .app-icon-badge above. */ :root[data-theme="dark"] .app-nav-badge { color: var(--text-inverted); } :root[data-theme="dark"] .app-notif-panel .app-empty-state-icon { color: var(--text-inverted); } :root[data-theme="dark"] .app-pill-select-option.selected, :root[data-theme="dark"] .app-pill-select-option:has(input:checked) { background: var(--primary-lifted); border-color: var(--primary-lifted); } :root[data-theme="dark"] .tix-open-page .app-pill-select-option.selected, :root[data-theme="dark"] .tix-open-page .app-pill-select-option:has(input:checked) { color: var(--text-inverted); } :root[data-theme="dark"] .module-client-area .btn:focus, :root[data-theme="dark"] .module-client-area a.autoLinked:hover { background: var(--primary-lifted); } :root[data-theme="dark"] body #order-standard_cart .irs-bar, :root[data-theme="dark"] body #order-standard_cart .irs-single { background: var(--primary-lifted) !important; } :root[data-theme="dark"] .landing-page.ssl .validation-levels .item .btn { background: var(--primary-lifted) !important; } :root[data-theme="dark"] .landing-page.codeguard .order-btn { background: var(--primary-lifted) !important; } :root[data-theme="dark"] .landing-page.ox .pricing th { background: var(--primary-lifted) !important; } :root[data-theme="dark"] .landing-page.ox .pricing th.feature { color: var(--text-inverted) !important; } :root[data-theme="dark"] .nord-cycle-toggle button.active { background: var(--primary-lifted); } /* Third sweep pass (2026-08-14) — found live, via an actual getComputedStyle contrast probe on a real logged-in dashboard page, not just static grep: the "Manage" row-action button (.app-row-action-btn, Products & Services / Domains lists), the active pill-tab's count bubble, the ticket thread's staff-avatar initials, the "How can we help" quick-link icon hover state, and the standalone hosting-page hero's .vhp-btn-primary — same two fixes as the rest of this file. */ :root[data-theme="dark"] .app-row-action-btn { color: var(--primary-glow); border-color: var(--primary-glow); } :root[data-theme="dark"] .app-row-action-btn:hover { background: var(--primary-lifted); } :root[data-theme="dark"] .app-pill-tab.active .app-pill-tab-count { background: var(--primary-lifted); } :root[data-theme="dark"] .tix-thread-item.staff .tix-thread-avatar { background: var(--primary-lifted); } :root[data-theme="dark"] .app-quick-link-item:hover .app-quick-link-icon { background: var(--primary-lifted); } :root[data-theme="dark"] .vhp-btn-primary { background: var(--primary-lifted); } /* Regression catch (2026-08-14, found live via a real getComputedStyle sweep of the actual logged-in dashboard — the "Welcome, Sara" gradient banner's "Manage support tickets" pill): this button's background is a literal, always-#fff white (matching --gradient-brand's own "never inverts with the theme" design, see that token's comment) — it does NOT sit on a dark surface. Its text color is var(--primary-accented), which this file's own dark-mode block now correctly repoints to the new --primary-glow for --primary-accented's ~55 OTHER, genuinely-on-dark consumers (icon chips, KB links, etc.) — but --primary-glow (#b55cff) on this button's permanent WHITE background is only 3.54:1, an actual regression versus the pre-fix ink value (#6b21a8, 8.7:1). Pinned to --primary-lifted instead (#8b2fd9 vs white: 5.99:1 by the same symmetric-ratio math as every other --primary-lifted/white pairing above) — --primary-lifted is never redefined in dark mode, so this is a stable, always-readable purple ink specifically for this one theme-independent surface. */ :root[data-theme="dark"] .app-gradient-banner-btn:not(.app-gradient-banner-btn-outline), :root[data-theme="dark"] .app-gradient-banner-btn:not(.app-gradient-banner-btn-outline):hover { color: var(--primary-lifted); } /* --------------------------------------------------------------------- Fourth sweep pass (2026-08-14, verification-pass catch) — a real, live getComputedStyle contrast probe of every text-on---X-soft-fill consumer (not just the plain-surface --X-accented/-glow math the earlier passes above verified) turned up a THIRD distinct problem, narrower than the two documented in this block's own header comment: a handful of real components put --X-accented TEXT directly on top of that SAME token's OWN --X-soft translucent FILL (not a plain --bg/--bg-muted/etc. surface). --primary-glow/--error-glow's own derivation (see their token comments above) was measured against the plain surfaces only -- against the darker, more-saturated composite a translucent soft-tint fill actually paints, the same bright text clears only 3.4-4.4:1, live- confirmed on 4 of these (language-switcher active row: 3.84:1, account contact avatar-initials chip: 4.07:1, invoice payment-method label: 4.07:1, .alert-danger banner: 4.06:1) plus 2 more sharing the identical selector pattern (KB article vote buttons). Fix is deliberately narrow: retarget ONLY the `color` (never the background/border that carries the actual purple/red hue signal, and never any layout property) to the already-existing, always-safe var(--text-accented) neutral -- 10:1+ against every one of these real composites, live-measured. Background/ border stay on the real brand hue in every case, so the semantic color cue (still purple/still red) is untouched; only the harder-to-read colored-on-colored TEXT moves to a token guaranteed legible on any dark surface. .app-inv-pay-label specifically could NOT go the solid-lifted- fill route several other fixes in this file use for the identical underlying problem: its --primary-soft background is shared with 3 sibling rows (.app-inv-pay-amount/-due/-method) already tuned against THAT soft tint specifically -- flipping the shared card to a solid fill would drag --text-lifted's contrast on it down to 2.62:1, a new regression. Retargeting only this one label's own color sidesteps that entirely. */ :root[data-theme="dark"] #modalChooseLanguage .app-lang-row.active, :root[data-theme="dark"] .acct-avatar-chip, :root[data-theme="dark"] .app-inv-pay-label, :root[data-theme="dark"] .alert-danger, :root[data-theme="dark"] .app-kb-vote-btn:hover, :root[data-theme="dark"] .app-kb-vote-btn:focus, :root[data-theme="dark"] .app-kb-vote-btn[value="no"]:hover, :root[data-theme="dark"] .app-kb-vote-btn[value="no"]:focus { color: var(--text-accented); } .badge-success { background-color: var(--success); } .badge-warning { background-color: var(--warning); color: #fff; } .badge-danger { background-color: var(--error); } .badge-info { background-color: var(--info); } /* bootstrap-switch "ON" state -> var(--primary). NOTE (2026-08-13): --primary is Vercaa's real PURPLE again (see the token block's "Primary = the REAL Vercaa purple" comment) — the prior comment here claiming "--primary is Vercaa Green... not purple" was written for the intervening 2026-08 green-primary era and is now stale. Left functionally as-is: none of the app's real toggles (mailing-list opt-in, SSO allow, card "don't store") actually hit this selector — they all use the separately-defined `.toggle-switch-success` class a few hundred lines down, which already maps independently to --success and is unaffected by this token change — so this generic `bootstrap-switch-primary` rule appears to be defensive styling for a WHMCS-core-rendered toggle this template doesn't otherwise exercise, not a live "on = green" semantic that needed preserving. */ .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-handle-on, .bootstrap-switch-handle-on.bootstrap-switch-primary { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; } /* Global keyboard-focus ring (kept scoped to :focus-visible so it never fights existing :focus/:hover styling for mouse users — matches the motion doc's own measurement methodology). */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Same ring also fires on :active (press state) for clickable controls only — motion doc §4: "the same ring also fires on :active... a nice touch for perceived responsiveness" — so pressing a button/link gives the same visual feedback as keyboard focus. Deliberately excludes text inputs/selects/textareas: their :active state is just the mousedown instant before a normal text caret, not a meaningful "press", so ringing them there would read as a glitch flash, not feedback. */ a:active, button:active, [tabindex]:active { outline: none; box-shadow: var(--focus-ring); } /* Modal backdrop darkened to match the measured 80% black used for true (non-panel) modals. */ .modal-backdrop.show { opacity: 0.8; } /* ========================================================================= App Shell — fixed header + persistent left sidebar (logged-in only). Guests keep the original horizontal nav untouched (see header.tpl). ========================================================================= */ body[data-app-shell] { padding-top: 0; } .app-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-height); z-index: 1040; background: var(--bg); border-bottom: 1px solid var(--border-muted); box-shadow: 0 0 0 rgba(15, 17, 21, 0); transition: box-shadow var(--duration-slow) var(--ease-standard); } /* Scroll-elevation (2026-08-13, js/app-shell.js's initHeaderScroll()) — a floating-surface depth cue once the page has actually moved under the fixed header, instead of the header looking identical whether the client is at the very top of a page or three screens down. */ .app-header.app-header-scrolled { box-shadow: var(--elevation-2); } .app-topbar { height: 100%; } .app-topbar-inner { height: 100%; display: flex; align-items: center; gap: 0.6rem; padding: 0 1.25rem; } .app-logo { display: flex; align-items: center; flex-shrink: 0; margin-right: 0.5rem; } .app-logo .logo-img { max-height: 32px; } .app-logo-text { font-weight: 700; font-size: 1.125rem; color: var(--text); } .app-sidebar-mobile-toggle { display: none; border: 0; background: transparent; color: var(--text); font-size: 1.125rem; width: 40px; height: 40px; border-radius: var(--rounding-md); flex-shrink: 0; transition: background-color var(--duration-fast) var(--ease-out); } .app-sidebar-mobile-toggle:hover { background: var(--bg-muted); } .app-sidebar-mobile-toggle svg { width: 20px; height: 20px; flex-shrink: 0; } .app-pill-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border: 1px solid var(--border); background: var(--bg-muted); color: var(--text); border-radius: 999px; font-size: var(--text-md); font-weight: 600; white-space: nowrap; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } /* Subtle lift-on-hover (2026-08-13) — same interactive-affordance treatment as .btn-primary/ .btn-outline-primary now get, scaled down since this is a secondary/tertiary control. */ .app-pill-btn:hover { background: var(--bg-lifted); border-color: var(--border-lifted); color: var(--text); box-shadow: var(--elevation-1); transform: translateY(-1px); } .app-pill-btn:active { transform: translateY(0); box-shadow: none; } .app-pill-btn svg { width: 18px; height: 18px; flex-shrink: 0; } .app-topbar-spacer { flex: 1 1 auto; } .app-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 0; background: transparent; color: var(--text-accented); font-size: 1.05rem; flex-shrink: 0; transition: background-color var(--duration-slow) var(--ease-standard), color var(--duration-slow) var(--ease-standard); } .app-icon-btn:hover { background: var(--bg-muted); color: var(--text); transform: translateY(-1px); } .app-icon-btn:active { transform: translateY(0) scale(0.94); } .app-icon-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--secondary); color: #fff; font-size: 10px; line-height: 16px; font-weight: 700; text-align: center; /* Cut-out ring (2026-08-13) — a thin --bg-colored halo so the badge reads as a distinct floating dot punched out of the icon behind it (the classic iOS/Android badge treatment) instead of visually fusing with the glyph underneath at small sizes. */ box-shadow: 0 0 0 2px var(--bg), 0 2px 5px -1px color-mix(in srgb, var(--secondary) 55%, transparent); } .app-theme-icon-light { display: none; } :root[data-theme="dark"] .app-theme-icon-dark { display: none; } :root[data-theme="dark"] .app-theme-icon-light { display: inline; } /* Vercaa logo — dark-text variant for light mode, white-text variant for dark mode (the source logo.png has an opaque white background; both variants here are pre-processed transparent PNGs, see templates/vercaa-2026/images/). */ .app-logo-img-dark { display: none; } :root[data-theme="dark"] .app-logo-img-light { display: none; } :root[data-theme="dark"] .app-logo-img-dark { display: inline-block; } .app-logo .logo-img { height: 28px; width: auto; max-width: none; } .app-avatar-btn { border: 0; background: transparent; padding: 0; border-radius: 999px; flex-shrink: 0; } .app-avatar-circle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; /* Gradient fill (2026-08-13, was a flat var(--primary)) — the one avatar every client sees on every single page gets the same rich brand wash as the sidebar CTA / hero banners instead of a plain solid disc, plus a soft colored ambient shadow so it reads as a small floating chip rather than a flat tile. */ background: var(--gradient-brand); color: #fff; font-weight: 700; font-size: 0.875rem; text-transform: uppercase; box-shadow: 0 2px 10px -3px color-mix(in srgb, var(--primary) 55%, transparent); transition: box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .app-avatar-btn:hover .app-avatar-circle { box-shadow: 0 4px 16px -3px color-mix(in srgb, var(--primary) 65%, transparent); transform: translateY(-1px); } .app-avatar-btn:active .app-avatar-circle { transform: translateY(0); } /* Dropdown menus (Bootstrap 4 .dropdown / data-toggle="dropdown" — reuses the framework already loaded via theme.yaml so outside-click/escape/positioning work for free). */ .app-dropdown { position: relative; } .app-dropdown .dropdown-menu { border-radius: var(--rounding-lg); border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16); padding: 0; overflow: hidden; min-width: 280px; background: var(--bg); } /* The bundled Bootstrap dropdown JS in scripts.min.js computes Popper-less positioning offsets that assume the classic navbar
  • /