/* WHA Shield — all custom classes are ws- prefixed per project convention. */ :root { --ws-primary: #4f46e5; --ws-radius: 0.75rem; --ws-sidebar-width: 260px; /* Public marketing site only — navy scale for dark hero/CTA sections. Portal/admin/auth CSS never references these, so this stays scoped to the public site by construction, not by a separate stylesheet. */ --ws-navy-950: #05070f; --ws-navy-900: #0a0f1e; --ws-navy-800: #121a2e; --ws-navy-700: #1c2740; /* Public marketing site only — emerald/security accent, layered alongside indigo (which stays the one primary CTA/link color everywhere, including these new dark sections). */ --ws-emerald-500: #10b981; --ws-emerald-400: #34d399; --ws-emerald-300: #6ee7b7; /* Spacing scale — additive; Bootstrap's g-*/py-* utilities remain the primary spacing tool, these back bespoke component paddings that don't map cleanly to a Bootstrap step. */ --ws-space-1: 0.25rem; --ws-space-2: 0.5rem; --ws-space-3: 1rem; --ws-space-4: 1.5rem; --ws-space-5: 2.5rem; --ws-space-6: 4rem; --ws-space-7: 6rem; /* Shadow scale */ --ws-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --ws-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.10); --ws-shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.16); --ws-shadow-glow: 0 0 0 1px rgba(16, 185, 129, 0.15), 0 8px 32px rgba(16, 185, 129, 0.12); /* Radius scale — new sizes; --ws-radius stays the app-wide default. */ --ws-radius-sm: 0.5rem; --ws-radius-lg: 1.25rem; --ws-radius-xl: 1.75rem; /* Public marketing site only — colorful gradient accent system layered on top of the existing indigo primary + navy/emerald pair above. Indigo (--ws-primary) stays the one link/focus/form-control color everywhere (including portal/admin); these four extra hues and the gradients built from them are only ever referenced from .ws-public- and .ws-auth-wrapper-scoped classes further down this file. */ --ws-blue: #3b82f6; --ws-violet: #8b5cf6; --ws-cyan: #22d3ee; --ws-pink: #ec4899; --ws-grad-primary: linear-gradient(135deg, var(--ws-blue), var(--ws-violet)); --ws-grad-cyan: linear-gradient(135deg, var(--ws-cyan), var(--ws-blue)); --ws-grad-pink: linear-gradient(135deg, var(--ws-violet), var(--ws-pink)); --ws-grad-dark: linear-gradient(160deg, var(--ws-navy-950), var(--ws-navy-800) 55%, #1e1b4b); } body.ws-body { background-color: var(--bs-body-bg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; } /* Public marketing site only (public-head.php sets this on ; portal, admin and auth pages use head.php directly and never get this class). Bootstrap's own --bs-primary/--bs-primary-rgb default to stock Bootstrap blue (#0d6efd) — nothing in this file overrode them at :root, so every plain .btn-primary/.text-primary/.bg-primary was rendering blue instead of the brand indigo used by the custom ws- classes (badges, CTA banner, step numbers). This scopes the real fix to the public site: most CSS-var-driven Bootstrap 5.3 components (links, text/bg utilities, focus rings, form checks) pick this up automatically via inheritance; buttons need an explicit override because Bootstrap bakes literal hex into each .btn-primary/.btn-outline-primary's local --bs-btn-* custom properties. */ .ws-public { --bs-primary: var(--ws-primary); --bs-primary-rgb: 79, 70, 229; } .ws-public .navbar-nav > .nav-item{ margin-right: 10px; } .ws-public .btn-primary { --bs-btn-bg: var(--ws-primary); --bs-btn-border-color: var(--ws-primary); --bs-btn-hover-bg: #4338ca; --bs-btn-hover-border-color: #4338ca; --bs-btn-active-bg: #3730a3; --bs-btn-active-border-color: #3730a3; --bs-btn-disabled-bg: var(--ws-primary); --bs-btn-disabled-border-color: var(--ws-primary); --bs-btn-focus-shadow-rgb: 79, 70, 229; } .ws-public .btn-outline-primary { --bs-btn-color: var(--ws-primary); --bs-btn-border-color: var(--ws-primary); --bs-btn-hover-bg: var(--ws-primary); --bs-btn-hover-border-color: var(--ws-primary); --bs-btn-active-bg: var(--ws-primary); --bs-btn-active-border-color: var(--ws-primary); --bs-btn-focus-shadow-rgb: 79, 70, 229; } .ws-cta-banner h2, .display-5, .display-6 { letter-spacing: -0.02em; font-weight: 800; } /* ---------- Auth pages ---------- */ .ws-auth-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; position: relative; overflow: hidden; background: var(--ws-grad-dark); } .ws-auth-card { width: 100%; max-width: 420px; border-radius: var(--ws-radius-lg); border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), 0 0 60px rgba(59, 130, 246, 0.12); position: relative; z-index: 1; } .ws-auth-card::before { content: ""; position: absolute; top: 0; left: 1.25rem; right: 1.25rem; height: 2px; background: var(--ws-grad-primary); border-radius: 2px; } .ws-2fa-secret code, .ws-recovery-code code { letter-spacing: 0.1em; } /* ---------- Portal shell (Customer + Admin) ---------- */ .ws-portal { display: flex; min-height: 100vh; } .ws-sidebar { width: var(--ws-sidebar-width); flex-shrink: 0; background: var(--bs-tertiary-bg); border-right: 1px solid var(--bs-border-color); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .ws-sidebar-brand { font-weight: 700; display: flex; align-items: center; gap: 0.5rem; font-size: 1.05rem; border-bottom: 1px solid var(--bs-border-color); } .ws-sidebar-brand img, .ws-public-nav img.ws-brand-logo, .ws-brand img { max-height: 60px; min-width: 100%; object-fit: contain; } .ws-auth-brand img { max-height: 56px; max-width: 220px; object-fit: contain; } .ws-nav { list-style: none; margin: 0; padding: 0.75rem; } .ws-nav-item a { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.75rem; border-radius: 0.5rem; color: var(--bs-body-color); text-decoration: none; font-size: 0.9rem; } .ws-nav-item a:hover { background: var(--bs-secondary-bg); } .ws-nav-item.active a { background: var(--ws-primary); color: #fff; } .ws-nav-group-toggle { justify-content: space-between; } .ws-nav-group-caret { margin-left: auto; font-size: 0.7rem; transition: transform 0.15s ease; } .ws-nav-group-toggle[aria-expanded="true"] .ws-nav-group-caret { transform: rotate(180deg); } .ws-nav-group-open > .ws-nav-group-toggle { color: var(--ws-primary); } .ws-nav-subnav { list-style: none; margin: 0.15rem 0 0.35rem; padding: 0; } .ws-nav-subnav .ws-nav-item a { padding: 0.45rem 0.75rem 0.45rem 2.35rem; font-size: 0.85rem; } .ws-nav-subnav .ws-nav-item a i.bi { font-size: 0.8rem; opacity: 0.85; width: 1em; text-align: center; } /* Second-level nesting (e.g. Billing Plans -> Account Credits/Coupons/...) — a child item that is itself both a link and a collapse toggle. */ .ws-nav-subgroup { display: flex; flex-wrap: wrap; align-items: center; } .ws-nav-subitem-link { flex: 1 1 auto; min-width: 0; } .ws-nav-subgroup-toggle { flex: 0 0 auto; padding: 0.45rem 0.6rem !important; color: var(--bs-secondary-color); } .ws-nav-item.active .ws-nav-subgroup-toggle { background: transparent !important; color: var(--bs-secondary-color) !important; } .ws-nav-subgroup > .ws-nav-subnav-2 { flex-basis: 100%; } .ws-nav-subnav-2 .ws-nav-item a { padding-left: 3.1rem; font-size: 0.82rem; } .ws-portal-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ws-topbar { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid var(--bs-border-color); gap: 1rem; position: sticky; top: 0; background: var(--bs-body-bg); z-index: 10; } .ws-notification-badge { position: absolute; top: -4px; right: -4px; font-size: 0.65rem; padding: 0.2em 0.4em; } .ws-notification-dropdown { width: 340px; max-width: 90vw; padding: 0; } .ws-notification-list { max-height: 320px; overflow-y: auto; } .ws-notification-item:last-child { border-bottom: 0 !important; } .ws-notification-unread { background: var(--bs-tertiary-bg, rgba(13, 110, 253, 0.06)); } .ws-impersonation-banner { background: #d97706; color: #fff; position: sticky; top: 0; z-index: 20; } .ws-impersonation-banner .btn { color: #d97706; } .ws-topbar-title { font-weight: 600; font-size: 1.1rem; } .ws-help-icon { color: var(--bs-secondary-color, #6c757d); font-size: 0.9rem; margin-left: 0.4rem; vertical-align: middle; } .ws-help-icon:hover { color: var(--bs-primary, #0d6efd); } .ws-topbar-actions { display: flex; align-items: center; gap: 0.5rem; } .ws-portal-content { padding: 1.5rem; flex: 1; } @media (max-width: 991.98px) { .ws-sidebar { position: fixed; left: -260px; z-index: 1050; transition: left 0.2s ease; } .ws-sidebar.ws-sidebar-open { left: 0; } } /* ---------- Cards / stats / tables ---------- */ .ws-card { border-radius: var(--ws-radius); } .ws-stat-card .card-body { position: relative; padding: 1.25rem; } .ws-stat-label { color: var(--bs-secondary-color); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; } .ws-stat-value { font-size: 1.75rem; font-weight: 700; margin-top: 0.25rem; } .ws-stat-icon { position: absolute; top: 1.25rem; right: 1.25rem; font-size: 1.5rem; color: var(--ws-primary); opacity: 0.35; } .ws-table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--bs-secondary-color); border-top: none; } .ws-key-reveal code { word-break: break-all; } /* ---------- Public marketing site ---------- */ .ws-public-nav { background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); transition: background-color 0.2s ease, box-shadow 0.2s ease, backdrop-filter 0.2s ease; } .ws-public-nav.ws-navbar-scrolled { background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.85); backdrop-filter: blur(8px); box-shadow: var(--ws-shadow-sm); } /* Scroll-reveal + counter animation — both no-op (content renders in its final state immediately) under prefers-reduced-motion, see ws-public.js. */ .ws-reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; } .ws-reveal.ws-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .ws-reveal { opacity: 1; transform: none; transition: none; } } .ws-trust-strip { background: var(--bs-body-bg); } .ws-trust-strip span { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: var(--bs-secondary-color); opacity: 0.72; filter: grayscale(1); transition: opacity 0.15s ease, filter 0.15s ease; } .ws-trust-strip span:hover { opacity: 1; filter: grayscale(0); } .ws-trust-strip i { color: var(--ws-emerald-500); margin-right: 0.4rem; font-size: 1rem; } .ws-hero { background: var(--ws-grad-dark); color: #e2e8f0; position: relative; overflow: hidden; /* The transparent-over-hero navbar (.ws-nav-on-hero) is a sticky element that still reserves its own box in normal flow, so without this the "transparent" nav just shows the plain page background above the hero instead of overlapping it. Pulling the hero up by roughly the navbar's height (and padding it back down by the same amount) lets the hero's dark gradient render behind the nav instead. */ margin-top: -76px; padding-top: 76px; } .ws-hero .text-secondary { color: #94a3b8 !important; } .ws-hero h1 { color: #fff; letter-spacing: -0.02em; font-weight: 800; } .ws-badge-soft { background: rgba(79, 70, 229, 0.1); color: var(--ws-primary); font-weight: 500; padding: 0.4rem 0.85rem; border-radius: 999px; display: inline-block; } /* Indigo-on-near-black has poor contrast — the dark hero gets a brighter, glass-effect variant instead of the light-section soft-indigo pill. */ .ws-hero .ws-badge-soft { background: rgba(99, 102, 241, 0.15); border: 1px solid rgba(99, 102, 241, 0.3); color: #a5b4fc; } .ws-feature-card, .ws-pricing-card { border-radius: var(--ws-radius-lg); box-shadow: var(--ws-shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease; } .ws-feature-card:hover { transform: translateY(-3px); box-shadow: var(--ws-shadow-md); } .ws-feature-card .card-body, .ws-usecase-card .card-body, .ws-article-card .card-body { padding: 1.75rem; } .ws-icon-badge { width: 3rem; height: 3rem; border-radius: var(--ws-radius-sm); background: rgba(var(--bs-primary-rgb), 0.1); color: var(--bs-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; flex-shrink: 0; } .ws-icon-badge-emerald { background: rgba(16, 185, 129, 0.12); color: var(--ws-emerald-500); } .ws-pricing-featured { border: 2px solid var(--ws-primary); box-shadow: var(--ws-shadow-lg); position: relative; } .ws-pricing-badge { position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%); background: var(--ws-primary); color: #fff; font-size: 0.75rem; font-weight: 600; padding: 0.3rem 0.9rem; border-radius: 999px; white-space: nowrap; } .ws-code-block { background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: 0.5rem; padding: 1rem; font-size: 0.85rem; overflow-x: auto; } .ws-docs-nav .list-group-item { border: none; font-size: 0.9rem; } /* API reference endpoint box (Developer Guide) — method badge + full URL, colored by HTTP method so a page full of endpoints stays scannable. */ .ws-endpoint-box { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1.1rem; border-radius: var(--ws-radius-sm, 0.5rem); border: 1px solid var(--bs-border-color); font-family: var(--bs-font-monospace); font-size: 0.95rem; flex-wrap: wrap; } .ws-endpoint-box[data-method="GET"] { background: color-mix(in srgb, var(--ws-emerald-500, #10b981) 10%, transparent); border-color: color-mix(in srgb, var(--ws-emerald-500, #10b981) 30%, transparent); } .ws-endpoint-box[data-method="POST"] { background: color-mix(in srgb, var(--ws-primary) 10%, transparent); border-color: color-mix(in srgb, var(--ws-primary) 30%, transparent); } .ws-endpoint-method { font-weight: 700; font-size: 0.75rem; letter-spacing: 0.03em; padding: 0.3rem 0.65rem; border-radius: 999px; color: #fff; flex-shrink: 0; } .ws-endpoint-box[data-method="GET"] .ws-endpoint-method { background: var(--ws-emerald-500, #10b981); } .ws-endpoint-box[data-method="POST"] .ws-endpoint-method { background: var(--ws-primary); } .ws-lang-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--bs-border-color); margin-bottom: -1px; } .ws-lang-tab { background: none; border: 1px solid transparent; border-bottom: none; padding: 0.4rem 0.85rem; font-size: 0.82rem; color: var(--bs-secondary-color); border-radius: 0.4rem 0.4rem 0 0; cursor: pointer; } .ws-lang-tab.active { color: var(--bs-body-color); background: var(--bs-tertiary-bg); border-color: var(--bs-border-color); font-weight: 600; } .ws-lang-panel { display: none; } .ws-lang-panel.active { display: block; } .ws-footer-heading { font-weight: 600; font-size: 0.85rem; margin-bottom: 0.5rem; } .ws-public-footer { background: #2e323f; border-top: none; box-shadow: inset 0 2px 0 0 transparent; position: relative; margin-top: 3rem; } .ws-public-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--ws-grad-primary); } .ws-public-footer ul li a{ color: #6c757d; text-decoration: none; } .ws-footer-heading{ color: #fff; } .ws-section-eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; font-weight: 700; color: var(--ws-primary); display: inline-flex; align-items: center; gap: 0.5rem; } .ws-section-eyebrow::before { content: ""; display: inline-block; width: 4px; height: 0.9em; border-radius: 2px; background: var(--ws-primary); } section h2.h3, section h2.mt-2 { font-weight: 800; letter-spacing: -0.01em; } .ws-stats-strip { background: var(--bs-tertiary-bg); border-top: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color); } .ws-stat-value { font-size: 2rem; font-weight: 700; } .ws-usecase-card { border-radius: var(--ws-radius-lg); height: 100%; box-shadow: var(--ws-shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease; } .ws-usecase-card:hover { transform: translateY(-3px); box-shadow: var(--ws-shadow-md); } .ws-step-number { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--ws-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; } .ws-cta-banner { background: var(--ws-grad-primary); border-radius: var(--ws-radius-lg); box-shadow: 0 20px 60px rgba(139, 92, 246, 0.35); color: #fff; position: relative; overflow: hidden; isolation: isolate; } .ws-cta-banner .btn-light { font-weight: 600; } .ws-terminal { background: #14151a; color: #d1d5db; border-radius: var(--ws-radius-lg); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: var(--ws-shadow-lg); padding: 1.25rem; font-size: 0.82rem; overflow-x: auto; } .ws-terminal .ws-terminal-prompt { color: #6ee7b7; } .ws-terminal .ws-terminal-key { color: #93c5fd; } .ws-gauge-card { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--ws-radius-lg); box-shadow: var(--ws-shadow-lg); padding: 2rem; backdrop-filter: blur(8px); } .ws-gauge-ring { width: 180px; height: 180px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .ws-gauge-inner { width: 148px; height: 148px; border-radius: 50%; background: var(--ws-navy-900); display: flex; flex-direction: column; align-items: center; justify-content: center; } .ws-gauge-score { font-size: 2.5rem; font-weight: 800; color: #fff; line-height: 1; } .ws-article-card { border-radius: var(--ws-radius-lg); transition: transform 0.15s ease, box-shadow 0.15s ease; color: inherit; } .ws-article-card:hover { transform: translateY(-2px); box-shadow: var(--ws-shadow-md); } .ws-article-thumb { height: 110px; border-radius: var(--ws-radius-lg) var(--ws-radius-lg) 0 0; background: linear-gradient(135deg, var(--ws-navy-900), var(--ws-primary) 160%); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: rgba(255, 255, 255, 0.55); } /* Stats strip only — scoped past .ws-stat-value (shared with portal stat cards elsewhere in this file) so the bigger public-site numbers don't also inflate portal dashboard stat cards. */ .ws-stats-strip .ws-stat-value { font-size: 2.75rem; font-weight: 800; letter-spacing: -0.02em; } /* Dense, long-form marketing copy blocks (headline + several paragraphs) — a content pattern the page didn't have before; capped width keeps line length readable. */ .ws-prose { max-width: 760px; } .ws-prose p { line-height: 1.75; } .ws-prose p + p { margin-top: 1rem; } /* Score-range example table */ .ws-score-table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bs-secondary-color); border-top: none; font-weight: 700; } .ws-score-table td { vertical-align: middle; } .ws-score-chip { display: inline-block; min-width: 5.5rem; text-align: center; padding: 0.3rem 0.75rem; border-radius: 0.4rem; font-weight: 700; color: #fff; font-size: 0.85rem; } /* Dark full-bleed band — a second dark section beyond the hero, giving the page the alternating light/dark rhythm reference sites use instead of one dark hero and then all-white/gray from there down. */ .ws-dark-band { background: var(--ws-grad-dark); color: #e2e8f0; position: relative; overflow: hidden; } .ws-dark-band .text-secondary { color: #94a3b8 !important; } .ws-dark-band .ws-section-eyebrow { color: var(--ws-emerald-400); } .ws-dark-band .ws-section-eyebrow::before { background: var(--ws-emerald-400); } /* Decorative "global network" graphic — a wireframe globe with scattered nodes. Illustrative only (no claim to real, live telemetry), styled to fill the same visual role as a world-coverage map. */ .ws-globe-wrap { display: flex; align-items: center; justify-content: center; padding: 1.5rem 0; } .ws-globe-wrap svg { max-width: 100%; height: auto; } .ws-widget-hidden .card-body { display: none; } .ws-widget-customizing { cursor: grab; } .ws-widget-customizing .card { border-style: dashed; } .ws-drag-handle { cursor: grab; } .ws-line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; } /* A