/* * WEB HOST PUNE Tools: design system (v0.8.0, dark only since v1.8). * * Built on the WEB HOST PUNE brand kit (dark theme): primary red #E31E24, * near-black surfaces, typeface Poppins. switches * Bootstrap 5.3 to its dark colour mode; this file then sets the brand * through Bootstrap's own CSS variables (no Bootstrap rebuild), followed by * the app's own components (sidebar, top bar, KPI cards...). * * Accessibility (v1.8): every text colour below is WCAG AAA (7:1 or more) on * the page and card surfaces: * text #F5F5F7 (18:1), secondary #C9C9CE (11:1), muted #ADADB4 (7.4:1+), * red text #FF7A7E (7.2:1+), success #3DDC84, warning #FBBF24, info #60A5FA. * Brand red #E31E24 is 4.2:1 on black, so it is used for fills, glows and * icons only; large red headings use #EE2A30 (4.7:1, AAA for large text) and * primary buttons are white on #B01218 (7.1:1). * PDFs, e-mails and the printable invoice have their own light styles. */ /* ---------- Fonts (self-hosted, latin subset) ---------- */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700.woff2') format('woff2'); } /* ---------- Brand tokens ---------- */ :root, [data-bs-theme="dark"] { color-scheme: dark; /* Brand red: fills and accents */ --whp-red: #E31E24; --whp-red-hover: #C4161C; --whp-red-deep: #B01218; /* button fill: white text 7.1:1 */ --whp-red-active: #8E0E13; --whp-red-display: #EE2A30; /* large bold headings only: 4.7:1 = AAA for large text */ --whp-red-text: #FF7A7E; /* red text and links on dark: 7.2:1+ */ --whp-red-text-hover: #FF9A9D; --whp-red-soft: rgba(227, 30, 36, 0.14); --whp-red-glow: 0 0 0 1px rgba(227, 30, 36, 0.55), 0 8px 24px rgba(227, 30, 36, 0.28); /* Surfaces, from back to front */ --whp-bg: #0B0B0C; --whp-surface: #151517; --whp-surface-2: #1E1E21; --whp-surface-3: #26262A; /* hover and header fills only (no coloured small text on it) */ --whp-sidebar: #0E0E10; /* Text */ --whp-text: #F5F5F7; --whp-text-2: #C9C9CE; --whp-muted: #ADADB4; /* Lines */ --whp-line: rgba(255, 255, 255, 0.08); --whp-line-strong: rgba(255, 255, 255, 0.16); --whp-line-focus: rgba(255, 255, 255, 0.32); /* Status: text colours (AAA) and solid fills for white-text badges */ --whp-success: #3DDC84; --whp-warning: #FBBF24; --whp-danger: #FF7A7E; --whp-info: #60A5FA; --whp-success-solid: #0F5F2E; --whp-danger-solid: #B01218; --whp-secondary-solid: #3F3F46; --whp-radius-sm: 8px; --whp-radius: 12px; --whp-radius-lg: 16px; --whp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --whp-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.35); --whp-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.5), 0 24px 48px rgba(0, 0, 0, 0.45); --whp-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.04); /* thin top light on cards */ --whp-focus: 0 0 0 3px rgba(255, 122, 126, 0.55); --whp-sidebar-width: 248px; --whp-topbar-height: 64px; /* Bootstrap 5.3 variables */ --bs-font-sans-serif: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --bs-body-font-family: var(--bs-font-sans-serif); --bs-body-font-size: 0.9375rem; --bs-body-line-height: 1.6; --bs-body-color: var(--whp-text-2); --bs-body-color-rgb: 201, 201, 206; --bs-body-bg: var(--whp-bg); --bs-body-bg-rgb: 11, 11, 12; --bs-emphasis-color: var(--whp-text); --bs-emphasis-color-rgb: 245, 245, 247; --bs-secondary-color: var(--whp-muted); --bs-secondary-color-rgb: 173, 173, 180; --bs-secondary-bg: var(--whp-surface-2); --bs-secondary-bg-rgb: 30, 30, 33; --bs-tertiary-color: var(--whp-muted); --bs-tertiary-bg: var(--whp-surface-2); --bs-tertiary-bg-rgb: 30, 30, 33; --bs-heading-color: var(--whp-text); --bs-border-color: var(--whp-line-strong); --bs-border-color-translucent: var(--whp-line); --bs-border-radius: var(--whp-radius-sm); --bs-border-radius-lg: var(--whp-radius); --bs-border-radius-xl: var(--whp-radius-lg); --bs-primary: var(--whp-red-deep); --bs-primary-rgb: 176, 18, 24; --bs-primary-text-emphasis: var(--whp-red-text); --bs-primary-bg-subtle: #2A0D0F; --bs-primary-border-subtle: #6B1418; --bs-success: var(--whp-success-solid); --bs-success-rgb: 15, 95, 46; --bs-warning: var(--whp-warning); --bs-warning-rgb: 251, 191, 36; --bs-danger: var(--whp-danger-solid); --bs-danger-rgb: 176, 18, 24; --bs-info: var(--whp-info); --bs-info-rgb: 96, 165, 250; --bs-secondary: var(--whp-secondary-solid); --bs-secondary-rgb: 63, 63, 70; --bs-dark: var(--whp-bg); --bs-dark-rgb: 11, 11, 12; --bs-link-color: var(--whp-red-text); --bs-link-color-rgb: 255, 122, 126; --bs-link-hover-color: var(--whp-red-text-hover); --bs-link-hover-color-rgb: 255, 154, 157; --bs-focus-ring-color: rgba(255, 122, 126, 0.55); --bs-code-color: var(--whp-red-text); } /* ---------- Base ---------- */ body { min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; background: var(--whp-bg); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--whp-text); font-weight: 600; letter-spacing: -0.02em; } strong, b { color: var(--whp-text); } a { text-underline-offset: 3px; } hr { border-color: var(--whp-line-strong); opacity: 1; } ::selection { background: rgba(227, 30, 36, 0.45); color: #FFFFFF; } :focus-visible { outline: none; box-shadow: var(--whp-focus); } .tabular, .kpi-value, .home-stat-value, .price-card-price, .verdict-count, .table td { font-variant-numeric: tabular-nums; } /* v1.8: Bootstrap utilities that stay light in its dark mode, mapped to AAA dark colours. */ .text-muted { color: var(--whp-muted) !important; } .text-secondary { color: var(--whp-muted) !important; } .text-body { color: var(--whp-text-2) !important; } .text-success { color: var(--whp-success) !important; } .text-danger { color: var(--whp-danger) !important; } .text-warning { color: var(--whp-warning) !important; } .text-info { color: var(--whp-info) !important; } .text-primary { color: var(--whp-red-text) !important; } .bg-white, .bg-light { background-color: var(--whp-surface-2) !important; } .bg-light.text-dark, .bg-white.text-dark { color: var(--whp-text) !important; } .text-dark { color: #0B0B0C !important; } /* only on the light fills below (warning, info) */ .badge.bg-warning, .badge.bg-info { color: #0B0B0C; } .badge.bg-success, .badge.bg-danger, .badge.bg-secondary, .badge.bg-primary, .badge.bg-dark { color: #FFFFFF; } .badge.bg-dark { background-color: #000000 !important; border: 1px solid var(--whp-line-strong); } .border { border-color: var(--whp-line-strong) !important; } /* ---------- Buttons ---------- */ .btn { --bs-btn-font-weight: 500; --bs-btn-border-radius: var(--whp-radius-sm); --bs-btn-focus-box-shadow: var(--whp-focus); transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; } .btn-primary { --bs-btn-color: #FFFFFF; --bs-btn-bg: var(--whp-red-deep); --bs-btn-border-color: #C4161C; --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: var(--whp-red-deep); --bs-btn-hover-border-color: var(--whp-red); --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: var(--whp-red-active); --bs-btn-active-border-color: var(--whp-red); --bs-btn-disabled-color: #FFFFFF; --bs-btn-disabled-bg: var(--whp-red-deep); --bs-btn-disabled-border-color: var(--whp-red-deep); font-weight: 600; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(0, 0, 0, 0.5); } .btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--whp-red-glow); } .btn-primary:focus-visible { box-shadow: var(--whp-focus); } .btn-outline-primary { --bs-btn-color: var(--whp-red-text); --bs-btn-border-color: rgba(255, 122, 126, 0.55); --bs-btn-hover-bg: var(--whp-red-deep); --bs-btn-hover-border-color: var(--whp-red); --bs-btn-hover-color: #FFFFFF; --bs-btn-active-bg: var(--whp-red-active); --bs-btn-active-border-color: var(--whp-red); --bs-btn-active-color: #FFFFFF; } .btn-outline-secondary, .btn-outline-dark { --bs-btn-color: var(--whp-text-2); --bs-btn-bg: transparent; --bs-btn-border-color: var(--whp-line-strong); --bs-btn-hover-bg: var(--whp-surface-2); --bs-btn-hover-border-color: var(--whp-line-focus); --bs-btn-hover-color: var(--whp-text); --bs-btn-active-bg: var(--whp-surface-3); --bs-btn-active-border-color: var(--whp-line-focus); --bs-btn-active-color: var(--whp-text); --bs-btn-disabled-color: var(--whp-muted); --bs-btn-disabled-border-color: var(--whp-line); } .btn-dark { --bs-btn-color: var(--whp-text); --bs-btn-bg: var(--whp-surface-2); --bs-btn-border-color: var(--whp-line-strong); --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: var(--whp-surface-3); --bs-btn-hover-border-color: var(--whp-line-focus); } .btn-light { --bs-btn-color: #0B0B0C; --bs-btn-bg: #F5F5F7; --bs-btn-border-color: #F5F5F7; --bs-btn-hover-bg: #FFFFFF; --bs-btn-hover-border-color: #FFFFFF; } .btn-success { --bs-btn-color: #FFFFFF; --bs-btn-bg: var(--whp-success-solid); --bs-btn-border-color: #15803D; --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: #0C4F26; --bs-btn-hover-border-color: #22A355; --bs-btn-active-bg: #0A4220; } .btn-danger { --bs-btn-color: #FFFFFF; --bs-btn-bg: var(--whp-danger-solid); --bs-btn-border-color: #C4161C; --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: var(--whp-red-active); --bs-btn-hover-border-color: var(--whp-red); --bs-btn-active-bg: #6E0B0F; } .btn-outline-success { --bs-btn-color: var(--whp-success); --bs-btn-border-color: rgba(61, 220, 132, 0.45); --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: var(--whp-success-solid); --bs-btn-hover-border-color: #22A355; --bs-btn-active-bg: #0C4F26; --bs-btn-active-color: #FFFFFF; } .btn-outline-danger { --bs-btn-color: var(--whp-danger); --bs-btn-border-color: rgba(255, 122, 126, 0.45); --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: var(--whp-danger-solid); --bs-btn-hover-border-color: var(--whp-red); --bs-btn-active-bg: var(--whp-red-active); --bs-btn-active-color: #FFFFFF; } .btn-link { --bs-btn-color: var(--whp-red-text); --bs-btn-hover-color: var(--whp-red-text-hover); --bs-btn-disabled-color: var(--whp-muted); } .btn-close { --bs-btn-close-opacity: 0.7; } /* ---------- Forms ---------- */ .form-label { font-weight: 500; color: var(--whp-text-2); } .form-text { color: var(--whp-muted); } .form-control, .form-select { color: var(--whp-text); background-color: var(--whp-surface-2); border-color: var(--whp-line-strong); border-radius: var(--whp-radius-sm); } .form-control::placeholder { color: #8E8E95; opacity: 1; } /* placeholders are hints, not content (4.5:1+) */ .form-control:disabled, .form-select:disabled, .form-control[readonly] { color: var(--whp-muted); background-color: var(--whp-surface); } .form-control:hover, .form-select:hover { border-color: var(--whp-line-focus); } .form-control:focus, .form-select:focus { color: var(--whp-text); background-color: var(--whp-surface-2); border-color: var(--whp-red-text); box-shadow: var(--whp-focus); } .input-group-text { color: var(--whp-text-2); background-color: var(--whp-surface-3); border-color: var(--whp-line-strong); } /* v1.7: clearly visible empty checkboxes and switches ("Keep me logged in") */ .form-check-input { background-color: var(--whp-surface-2); border: 1.5px solid #8E8E95; } .form-check-input:hover { border-color: #C9C9CE; } .form-check-input:checked { background-color: var(--whp-red-deep); border-color: var(--whp-red); } .form-switch .form-check-input:not(:checked) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ADADB4'/%3e%3c/svg%3e"); } /* v1.7: admin users "Online" */ .user-online { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; color: var(--whp-success); } .user-online-dot { display: inline-block; width: 8px; height: 8px; margin-right: 0.3rem; border-radius: 50%; background: var(--whp-success); box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.2); vertical-align: middle; } .user-online .user-online-dot { margin-right: 0; } .form-check-input:focus { border-color: var(--whp-red-text); box-shadow: var(--whp-focus); } /* ---------- Cards & surfaces ---------- */ .card { --bs-card-border-color: var(--whp-line); --bs-card-border-radius: var(--whp-radius); --bs-card-bg: var(--whp-surface); --bs-card-color: var(--whp-text-2); --bs-card-cap-bg: transparent; box-shadow: var(--whp-highlight), var(--whp-shadow-sm); } .card.shadow-sm { box-shadow: var(--whp-highlight), var(--whp-shadow) !important; } .card-header { background: transparent; border-bottom-color: var(--whp-line); font-weight: 600; color: var(--whp-text); } .card-footer { background: transparent; border-top-color: var(--whp-line); } .modal { --bs-modal-bg: var(--whp-surface); --bs-modal-border-color: var(--whp-line-strong); --bs-modal-header-border-color: var(--whp-line); --bs-modal-footer-border-color: var(--whp-line); --bs-modal-color: var(--whp-text-2); } .modal-content { box-shadow: var(--whp-shadow-lg); } .modal-backdrop { --bs-backdrop-opacity: 0.7; } .offcanvas { --bs-offcanvas-bg: var(--whp-surface); --bs-offcanvas-color: var(--whp-text-2); } /* ---------- Tables ---------- */ .table { --bs-table-color: var(--whp-text-2); --bs-table-bg: transparent; --bs-table-border-color: var(--whp-line); --bs-table-hover-bg: rgba(255, 255, 255, 0.035); --bs-table-hover-color: var(--whp-text); --bs-table-striped-bg: rgba(255, 255, 255, 0.02); --bs-table-active-bg: rgba(255, 255, 255, 0.05); vertical-align: middle; } .table > thead th { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--whp-muted); background: var(--whp-surface-2); border-bottom-width: 1px; border-bottom-color: var(--whp-line-strong); white-space: nowrap; } .table > thead th a { color: inherit !important; } .table-responsive { border-radius: var(--whp-radius); } /* ---------- Badges, alerts, nav, pagination, dropdowns ---------- */ .badge { font-weight: 600; letter-spacing: 0.01em; border-radius: 999px; padding: 0.38em 0.7em; } .alert { border-radius: var(--whp-radius); border-width: 1px; } .alert-danger { --bs-alert-bg: #2A0D0F; --bs-alert-border-color: #6B1418; --bs-alert-color: #FFB3B5; --bs-alert-link-color: #FFD1D2; } .alert-success { --bs-alert-bg: #0A2416; --bs-alert-border-color: #14532D; --bs-alert-color: #A7F3C5; --bs-alert-link-color: #D1FADF; } .alert-warning { --bs-alert-bg: #2A2006; --bs-alert-border-color: #6B5310; --bs-alert-color: #FDE68A; --bs-alert-link-color: #FEF3C7; } .alert-info { --bs-alert-bg: #0B1E33; --bs-alert-border-color: #1E3A5F; --bs-alert-color: #BFDBFE; --bs-alert-link-color: #DBEAFE; } .alert-light, .alert-secondary { --bs-alert-bg: var(--whp-surface-2); --bs-alert-border-color: var(--whp-line-strong); --bs-alert-color: var(--whp-text-2); --bs-alert-link-color: var(--whp-red-text-hover); } .alert-light a:not(.btn), .alert-secondary a:not(.btn) { color: var(--whp-red-text-hover); } /* raised grey box: lighter red keeps 8:1 */ .nav-pills { --bs-nav-pills-link-active-bg: var(--whp-red-deep); --bs-nav-pills-link-active-color: #FFFFFF; } .nav-link { --bs-nav-link-color: var(--whp-text-2); --bs-nav-link-hover-color: var(--whp-text); } .nav-tabs { --bs-nav-tabs-border-color: var(--whp-line-strong); --bs-nav-tabs-link-active-bg: var(--whp-surface); --bs-nav-tabs-link-active-color: var(--whp-text); --bs-nav-tabs-link-active-border-color: var(--whp-line-strong) var(--whp-line-strong) var(--whp-surface); --bs-nav-tabs-link-hover-border-color: var(--whp-line) var(--whp-line) var(--whp-line-strong); } /* v1.8: rounded page buttons with small gaps (all paginations) */ .pagination { gap: 4px; } .pagination .page-link { min-width: 2.1rem; text-align: center; border-radius: var(--whp-radius-sm) !important; font-variant-numeric: tabular-nums; } .pagination .page-item.active .page-link { box-shadow: 0 0 12px rgba(227, 30, 36, 0.35); } .pagination { --bs-pagination-color: var(--whp-text-2); --bs-pagination-bg: var(--whp-surface); --bs-pagination-border-color: var(--whp-line-strong); --bs-pagination-hover-color: var(--whp-text); --bs-pagination-hover-bg: var(--whp-surface-2); --bs-pagination-hover-border-color: var(--whp-line-focus); --bs-pagination-active-bg: var(--whp-red-deep); --bs-pagination-active-border-color: var(--whp-red); --bs-pagination-active-color: #FFFFFF; --bs-pagination-disabled-color: var(--whp-muted); --bs-pagination-disabled-bg: var(--whp-surface); --bs-pagination-disabled-border-color: var(--whp-line); --bs-pagination-focus-box-shadow: var(--whp-focus); } .dropdown-menu { --bs-dropdown-bg: var(--whp-surface-2); --bs-dropdown-color: var(--whp-text-2); --bs-dropdown-border-color: var(--whp-line-strong); --bs-dropdown-link-color: var(--whp-text-2); --bs-dropdown-link-hover-color: var(--whp-text); --bs-dropdown-link-hover-bg: var(--whp-surface-3); --bs-dropdown-link-active-bg: var(--whp-red-deep); --bs-dropdown-link-active-color: #FFFFFF; --bs-dropdown-divider-bg: var(--whp-line-strong); --bs-dropdown-header-color: var(--whp-muted); border-radius: var(--whp-radius); box-shadow: var(--whp-shadow-lg); } .progress { --bs-progress-bar-bg: var(--whp-red); --bs-progress-bg: var(--whp-surface-3); border-radius: 999px; } .breadcrumb { --bs-breadcrumb-divider-color: var(--whp-muted); --bs-breadcrumb-item-active-color: var(--whp-muted); font-size: 0.875rem; } .tooltip { --bs-tooltip-bg: #F5F5F7; --bs-tooltip-color: #0B0B0C; } .popover { --bs-popover-bg: var(--whp-surface-2); --bs-popover-border-color: var(--whp-line-strong); --bs-popover-body-color: var(--whp-text-2); --bs-popover-header-bg: var(--whp-surface-3); --bs-popover-header-color: var(--whp-text); } code { color: var(--whp-red-text); } /* ===================================================================== App components ===================================================================== */ /* ---------- App shell: sidebar + content ---------- */ .app-shell { display: flex; min-height: 100vh; } .app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .app-content { flex: 1 1 auto; padding: 1.5rem; } @media (min-width: 992px) { .app-content { padding: 2rem 2.25rem; } } /* * The sidebar is Bootstrap's responsive offcanvas (.offcanvas-lg): a slide-out * drawer below 992px, an ordinary column above. Bootstrap forces the drawer * transparent on large screens, so the background lives on the wrapper * there, and on the drawer itself (--bs-offcanvas-bg) on small ones. */ .app-sidebar-wrap { flex: 0 0 auto; } @media (min-width: 992px) { .app-sidebar-wrap { position: sticky; top: 0; height: 100vh; width: var(--whp-sidebar-width); background: var(--whp-sidebar); border-right: 1px solid var(--whp-line); overflow-y: auto; } } .app-sidebar { --bs-offcanvas-width: var(--whp-sidebar-width); --bs-offcanvas-bg: var(--whp-sidebar); --bs-offcanvas-color: var(--whp-text-2); color: var(--whp-text-2); height: 100%; display: flex; flex-direction: column; } .app-sidebar-body { display: flex; flex-direction: column; flex: 1 1 auto; overflow-y: auto; padding-bottom: 0.5rem; } .app-sidebar-brand { display: flex; align-items: center; height: var(--whp-topbar-height); padding: 0 1.25rem; border-bottom: 1px solid var(--whp-line); } .app-sidebar-brand { gap: 0.75rem; } .app-sidebar-brand img { height: 30px; width: auto; max-width: 100%; } @media (max-width: 991.98px) { .app-sidebar-brand img { height: 26px; } } .app-sidebar-section { padding: 1.25rem 1.25rem 0.4rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--whp-muted); } .app-sidebar .nav { padding: 0 0.75rem; gap: 2px; } .app-sidebar .nav-link { position: relative; display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; border-radius: var(--whp-radius-sm); color: var(--whp-text-2); font-weight: 500; font-size: 0.9rem; transition: background-color 0.15s ease, color 0.15s ease; } .app-sidebar .nav-link svg { flex: 0 0 18px; width: 18px; height: 18px; opacity: 0.85; } .app-sidebar .nav-link:hover { background: rgba(255, 255, 255, 0.05); color: #FFFFFF; } /* v1.8: active item = soft red tint + slim red bar (premium, not a solid block) */ .app-sidebar .nav-link.active { background: linear-gradient(90deg, rgba(227, 30, 36, 0.22), rgba(227, 30, 36, 0.06)); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(227, 30, 36, 0.25); } .app-sidebar .nav-link.active::before { content: ''; position: absolute; left: -0.75rem; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--whp-red); box-shadow: 0 0 12px rgba(227, 30, 36, 0.8); } .app-sidebar .nav-link.active svg { opacity: 1; color: var(--whp-red-text); } /* v1.8: sidebar upgrade card (Free / expired Pro); hidden when the sidebar is collapsed to icons */ .sidebar-upgrade { margin: auto 0.75rem 0.75rem; padding: 1rem; border-radius: var(--whp-radius); border: 1px solid rgba(227, 30, 36, 0.35); background: radial-gradient(120% 100% at 0% 0%, rgba(227, 30, 36, 0.22), rgba(227, 30, 36, 0) 60%), var(--whp-surface); box-shadow: var(--whp-highlight), 0 0 24px rgba(227, 30, 36, 0.08); } .sidebar-upgrade + .app-sidebar-footer { margin-top: 0; } .sidebar-upgrade-title { margin: 0 0 0.25rem; font-weight: 700; color: #FFFFFF; } .sidebar-upgrade-text { margin: 0 0 0.75rem; font-size: 0.78rem; line-height: 1.5; color: var(--whp-text-2); } @media (min-width: 992px) { .sidebar-collapsed .sidebar-upgrade { display: none; } } /* v1.8: plan chip in the top bar */ .plan-chip { display: inline-flex; align-items: center; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; } .plan-chip-pro { color: #1A1A1A; background: linear-gradient(135deg, #F7D774 0%, #E3A92B 100%); box-shadow: 0 2px 10px rgba(227, 169, 43, 0.3); } .plan-chip-free { color: var(--whp-text-2); background: var(--whp-surface-2); border: 1px solid var(--whp-line-strong); } .plan-chip-free:hover { color: #FFFFFF; border-color: var(--whp-red); } .plan-chip-expired { color: #FFFFFF; background: var(--whp-red-deep); border: 1px solid var(--whp-red); } .app-sidebar-footer { margin-top: auto; padding: 1rem 1.25rem; border-top: 1px solid var(--whp-line); font-size: 0.75rem; color: var(--whp-muted); } .app-sidebar-footer a { color: var(--whp-text-2); } /* v1.2.4: collapsible sidebar (large screens only; small screens keep the drawer). is set by the top-bar button, saved per browser. */ .app-sidebar-icon { display: none; } @media (min-width: 992px) { .app-sidebar-wrap { transition: width 0.2s ease; overflow-x: hidden; } html.sidebar-collapsed { --whp-sidebar-width: 72px; } .sidebar-collapsed .app-sidebar-brand { justify-content: center; padding: 0; } .sidebar-collapsed .app-sidebar-logo { display: none; } .sidebar-collapsed .app-sidebar-icon { display: block; height: 36px; width: 36px; } .sidebar-collapsed .app-sidebar-section { font-size: 0; padding: 0.9rem 0.9rem 0.5rem; } .sidebar-collapsed .app-sidebar-section::after { content: ""; display: block; border-top: 1px solid var(--whp-line-strong); } .sidebar-collapsed .app-sidebar .nav { padding: 0 0.75rem; } .sidebar-collapsed .app-sidebar .nav-link { position: relative; justify-content: center; padding: 0.65rem 0; } .sidebar-collapsed .app-sidebar .nav-link.active::before { left: -0.75rem; } .sidebar-collapsed .app-sidebar .nav-link > span:not(.badge) { display: none; } .sidebar-collapsed .app-sidebar .nav-link .badge { position: absolute; top: 2px; right: 2px; font-size: 0.6rem; padding: 0.2em 0.45em; } .sidebar-collapsed .app-sidebar-footer { padding: 1rem 0; text-align: center; } .sidebar-collapsed .app-sidebar-footer a { margin: 0 !important; } .sidebar-collapsed .app-sidebar-footer a span, .sidebar-collapsed .app-sidebar-footer > div { display: none; } } .app-footer { padding: 1rem 2.25rem 1.5rem; font-size: 0.75rem; color: var(--whp-muted); } .app-footer a { color: var(--whp-text-2); } /* ---------- Top bar ---------- */ .app-topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: 0.75rem; height: var(--whp-topbar-height); padding: 0 1.5rem; background: rgba(11, 11, 12, 0.78); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--whp-line); } .app-topbar-title { font-weight: 600; font-size: 1rem; color: var(--whp-text); margin: 0; } .app-topbar .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: var(--whp-radius-sm); } .app-avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #2A2A2E, #18181B); color: #FFFFFF; font-size: 0.8125rem; font-weight: 600; box-shadow: inset 0 0 0 1px var(--whp-line-strong); } /* ---------- Page header ---------- */ .page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; } .page-header h1 { font-size: 1.5rem; margin: 0; } .page-header .page-subtitle { color: var(--whp-muted); margin: 0.25rem 0 0; font-size: 0.9rem; } /* ---------- KPI cards ---------- */ .kpi-card { position: relative; height: 100%; padding: 1.1rem 1.25rem; background: var(--whp-surface); border: 1px solid var(--whp-line); border-radius: var(--whp-radius); box-shadow: var(--whp-highlight), var(--whp-shadow-sm); } .kpi-card .kpi-label { font-size: 0.8125rem; font-weight: 500; color: var(--whp-muted); margin: 0; } .kpi-card .kpi-value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--whp-text); margin: 0.25rem 0 0; } .kpi-card.kpi-accent::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--whp-red); box-shadow: 0 0 12px rgba(227, 30, 36, 0.6); } .kpi-card .kpi-note { font-size: 0.75rem; color: var(--whp-muted); margin: 0.2rem 0 0; } /* v1.8: icon chip (top right), larger value, hover lift; green chip on the "Passed" card */ .kpi-icon { position: absolute; top: 1rem; right: 1rem; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; color: var(--whp-text-2); background: var(--whp-surface-2); border: 1px solid var(--whp-line-strong); } .kpi-card:has(.kpi-icon) { padding-right: 3.75rem; transition: border-color 0.15s ease, transform 0.15s ease; } .kpi-card:has(.kpi-icon):hover { border-color: var(--whp-line-strong); transform: translateY(-1px); } .kpi-card:has(.kpi-icon) .kpi-value { font-size: 2rem; margin-top: 0.4rem; } .kpi-card.kpi-accent .kpi-icon { color: var(--whp-success); background: rgba(61, 220, 132, 0.1); border-color: rgba(61, 220, 132, 0.3); box-shadow: 0 0 14px rgba(61, 220, 132, 0.15); } .kpi-card.kpi-accent:has(.kpi-icon)::before { background: var(--whp-success); box-shadow: 0 0 12px rgba(61, 220, 132, 0.5); } /* "Passed" = green, not red */ /* v1.8: coloured KPI cards (e.g. Link Library): value, icon chip and a thin top edge in one tone. All tones are WCAG AAA on the card (blue 7.2, green 10.2, teal 9.8, violet 9.9, gold 10.9 : 1). */ .kpi-tone { --tone: var(--whp-text); --tone-rgb: 245, 245, 247; overflow: hidden; } .kpi-tone-blue { --tone: #60A5FA; --tone-rgb: 96, 165, 250; } .kpi-tone-green { --tone: #3DDC84; --tone-rgb: 61, 220, 132; } .kpi-tone-teal { --tone: #2DD4BF; --tone-rgb: 45, 212, 191; } .kpi-tone-violet { --tone: #C4B5FD; --tone-rgb: 196, 181, 253; } .kpi-tone-gold { --tone: #FBBF24; --tone-rgb: 251, 191, 36; } .kpi-tone::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--tone); opacity: 0.85; } .kpi-card.kpi-tone .kpi-value { color: var(--tone); } .kpi-tone .kpi-icon { color: var(--tone); background: rgba(var(--tone-rgb), 0.1); border-color: rgba(var(--tone-rgb), 0.3); } @media (max-width: 575.98px) { .kpi-card:has(.kpi-icon) { padding: 0.9rem 2.75rem 0.9rem 1rem; } .kpi-icon { top: 0.75rem; right: 0.75rem; width: 30px; height: 30px; border-radius: 8px; } .kpi-icon svg { width: 15px; height: 15px; } .kpi-card:has(.kpi-icon) .kpi-value { font-size: 1.65rem; } } /* ---------- Projects ---------- */ .project-avatar { border-radius: var(--whp-radius-sm); object-fit: cover; flex: 0 0 auto; border: 1px solid var(--whp-line-strong); } /* v1.7.1: fitted logos (whole image visible) on a white tile (most logos are made for white) */ img.project-avatar, .project-avatar-fit { object-fit: contain; background: #FFFFFF; } .project-avatar-initials { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2A2A2E, #18181B); color: #FFFFFF; font-weight: 600; border: 1px solid var(--whp-line-strong); } .project-card { transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .project-card:hover { border-color: var(--whp-line-strong); box-shadow: var(--whp-highlight), var(--whp-shadow) !important; transform: translateY(-1px); } .min-w-0 { min-width: 0; } /* v1.8: dashboard project cards: ringed logo, domain with link icon, actions in a footer row */ .project-card .project-avatar { box-shadow: 0 0 0 3px var(--whp-surface), 0 0 0 4px var(--whp-line-strong); } .project-card:hover .project-avatar { box-shadow: 0 0 0 3px var(--whp-surface), 0 0 0 4px rgba(227, 30, 36, 0.6); } .project-card .fw-semibold { color: var(--whp-text); } .project-card-domain { display: flex; align-items: center; gap: 0.3rem; font-size: 0.8125rem; color: var(--whp-muted); } .project-card-domain svg { flex: 0 0 auto; opacity: 0.8; } .project-card-actions { margin: 0 -1rem -1rem; padding: 0.75rem 1rem; border-top: 1px solid var(--whp-line); background: rgba(255, 255, 255, 0.015); border-radius: 0 0 var(--whp-radius) var(--whp-radius); } /* v1.8: results bar (segments with gaps + glow) and legend chips */ .results-bar { --bs-progress-height: 10px; gap: 3px; background: transparent; overflow: visible; } .results-bar > .progress { border-radius: 999px; background: transparent; overflow: visible; } .results-bar .progress-bar { border-radius: 999px; } .results-bar .bg-success { box-shadow: 0 0 10px rgba(61, 220, 132, 0.35); } .results-bar .bg-warning { box-shadow: 0 0 10px rgba(251, 191, 36, 0.35); } .results-bar .bg-danger { box-shadow: 0 0 10px rgba(227, 30, 36, 0.45); } .results-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--whp-surface-2); border: 1px solid var(--whp-line); color: var(--whp-text-2); } .results-chip strong { color: var(--whp-text); } .results-chip-pct { color: var(--whp-muted); } .legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; } .onboarding-steps { max-width: 420px; padding-left: 1.25rem; color: var(--whp-text-2); } .onboarding-steps li { margin-bottom: 0.5rem; } .btn-more { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; color: var(--whp-muted); border: 0; border-radius: var(--whp-radius-sm); } .btn-more:hover, .btn-more:focus-visible, .btn-more[aria-expanded="true"] { color: var(--whp-text); background: var(--whp-surface-3); } .back-link { display: inline-block; margin-bottom: 0.35rem; font-size: 0.8125rem; font-weight: 500; color: var(--whp-muted); text-decoration: none; } .back-link:hover { color: var(--whp-text); } .logo-preview { flex: 0 0 64px; } .logo-preview-empty { background: var(--whp-surface-2); color: var(--whp-muted); } .btn-more-outline { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 38px; padding: 0; } .verdict-tile { display: flex; flex-direction: column; height: 100%; padding: 0.9rem 1rem; background: var(--whp-surface); border: 1px solid var(--whp-line); border-radius: var(--whp-radius-sm); color: inherit; text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .verdict-tile:hover, .verdict-tile:focus-visible { border-color: var(--whp-line-focus); box-shadow: var(--whp-shadow-sm); color: inherit; } .verdict-tile .verdict-label { font-size: 0.8125rem; font-weight: 500; color: var(--whp-muted); } .verdict-tile .verdict-count { font-size: 1.6rem; font-weight: 700; line-height: 1.25; color: var(--whp-text); } .verdict-tile.is-active { border-color: var(--whp-red); box-shadow: inset 0 0 0 1px var(--whp-red), 0 0 16px rgba(227, 30, 36, 0.2); } .verdict-filter-tag { display: inline-block; margin-left: 0.35rem; padding: 0 0.4rem; font-size: 0.6875rem; font-weight: 600; border-radius: 999px; background: var(--whp-red-deep); color: #FFFFFF; vertical-align: 1px; } .verdict-tile .verdict-hint { font-size: 0.75rem; color: var(--whp-muted); } /* v1.8: verdict tiles: own colour per verdict (top edge, icon chip, glow when active) and the share in % */ .verdict-tile { position: relative; overflow: hidden; padding: 1rem 1.1rem; border-radius: var(--whp-radius); --verdict: var(--whp-muted); --verdict-rgb: 173, 173, 180; } .verdict-tile::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--verdict); opacity: 0.85; } .verdict-passed { --verdict: var(--whp-success); --verdict-rgb: 61, 220, 132; } .verdict-warning { --verdict: var(--whp-warning); --verdict-rgb: 251, 191, 36; } .verdict-failed { --verdict: var(--whp-danger); --verdict-rgb: 255, 122, 126; } .verdict-icon { position: absolute; top: 0.9rem; right: 0.9rem; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; color: var(--verdict); background: rgba(var(--verdict-rgb), 0.1); border: 1px solid rgba(var(--verdict-rgb), 0.25); } .verdict-tile .verdict-count { display: flex; align-items: baseline; gap: 0.5rem; font-size: 1.85rem; letter-spacing: -0.02em; } .verdict-pct { font-size: 0.875rem; font-weight: 600; letter-spacing: 0; color: var(--whp-muted); } .verdict-tile:hover, .verdict-tile:focus-visible { border-color: rgba(var(--verdict-rgb), 0.45); } .verdict-tile.is-active { border-color: var(--verdict); box-shadow: inset 0 0 0 1px var(--verdict), 0 0 20px rgba(var(--verdict-rgb), 0.18); background: linear-gradient(180deg, rgba(var(--verdict-rgb), 0.07), rgba(var(--verdict-rgb), 0) 70%), var(--whp-surface); } /* v1.8: stat strip as small cells */ .stat-strip > div { padding: 0.55rem 0.9rem; border-radius: var(--whp-radius-sm); background: var(--whp-surface-2); border: 1px solid var(--whp-line); } .stat-strip strong { color: var(--whp-text); font-variant-numeric: tabular-nums; } .verdict-tile .verdict-label { padding-right: 2.6rem; } /* room for the icon chip, so the "filtered" tag wraps below it */ @media (max-width: 575.98px) { .verdict-icon { width: 28px; height: 28px; top: 0.75rem; right: 0.75rem; } } .stat-strip { display: flex; flex-wrap: wrap; gap: 0.6rem; padding-top: 1.25rem; border-top: 1px solid var(--whp-line); } /* v1.8: cells (see above) */ @media (max-width: 575.98px) { .stat-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } } .stat-strip > div > span { display: block; font-size: 0.75rem; color: var(--whp-muted); } /* v1.8: live scan progress panel (components/scan_progress.view.php + assets/js/scan-progress.js). One colour per stage: --sp (text/dot, AAA on the card) and --sp-rgb (glows). */ .scan-progress { --sp: var(--whp-red-text); --sp-rgb: 227, 30, 36; margin-bottom: 1.25rem; padding: 1rem 1.1rem; border-radius: var(--whp-radius); background: linear-gradient(180deg, rgba(var(--sp-rgb), 0.07), rgba(var(--sp-rgb), 0) 70%), var(--whp-surface-2); border: 1px solid rgba(var(--sp-rgb), 0.28); } .scan-progress[data-state="queued"], .scan-progress[data-state="stopped"] { --sp: var(--whp-muted); --sp-rgb: 173, 173, 180; } .scan-progress[data-state="retrying"] { --sp: var(--whp-warning); --sp-rgb: 251, 191, 36; } .scan-progress[data-state="finishing"], .scan-progress[data-state="complete"] { --sp: var(--whp-success); --sp-rgb: 61, 220, 132; } .sp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; margin-bottom: 0.65rem; } .sp-status { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0.7rem 0.2rem 0.55rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; color: var(--sp); background: rgba(var(--sp-rgb), 0.12); border: 1px solid rgba(var(--sp-rgb), 0.35); } .sp-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--sp); box-shadow: 0 0 8px rgba(var(--sp-rgb), 0.9); } .sp-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(var(--sp-rgb), 0.6); animation: sp-ping 1.4s ease-out infinite; } .scan-progress[data-state="complete"] .sp-dot::after, .scan-progress[data-state="stopped"] .sp-dot::after { animation: none; opacity: 0; } .sp-note { flex: 1 1 260px; font-size: 0.875rem; color: var(--whp-text-2); } .sp-pct { margin-left: auto; font-size: 1.6rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--whp-text); font-variant-numeric: tabular-nums; } .sp-bar { position: relative; height: 10px; border-radius: 999px; overflow: hidden; background: var(--whp-surface-3); } .sp-bar-fill { position: relative; height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgba(var(--sp-rgb), 0.75), rgb(var(--sp-rgb))); box-shadow: 0 0 12px rgba(var(--sp-rgb), 0.55); transition: width 0.6s ease; overflow: hidden; } .sp-bar-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%); transform: translateX(-100%); animation: sp-shine 1.8s ease-in-out infinite; } .scan-progress[data-state="complete"] .sp-bar-fill::after, .scan-progress[data-state="stopped"] .sp-bar-fill::after, .scan-progress[data-state="queued"] .sp-bar-fill::after { animation: none; } .sp-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.85rem; } .sp-chip { padding: 0.45rem 0.7rem; border-radius: var(--whp-radius-sm); background: var(--whp-surface); border: 1px solid var(--whp-line); min-width: 0; } .sp-chip > span { display: block; font-size: 0.72rem; color: var(--whp-muted); } .sp-chip strong { display: block; font-size: 0.95rem; color: var(--whp-text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-retry { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.7rem; padding: 0.45rem 0.7rem; border-radius: var(--whp-radius-sm); font-size: 0.85rem; color: var(--whp-warning); background: rgba(251, 191, 36, 0.08); border: 1px solid rgba(251, 191, 36, 0.3); } .sp-retry[hidden] { display: none; } .sp-retry-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--whp-warning); animation: sp-blink 1.2s ease-in-out infinite; } .sp-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; margin-top: 0.7rem; font-size: 0.78rem; color: var(--whp-muted); } .sp-heartbeat::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 0.4rem; border-radius: 50%; background: var(--whp-success); vertical-align: 1px; } .sp-heartbeat.is-stale::before { background: var(--whp-warning); } .sp-flash { animation: sp-flash 0.9s ease-out; } @keyframes sp-ping { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } } @keyframes sp-shine { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } } @keyframes sp-blink { 50% { opacity: 0.35; } } @keyframes sp-flash { 0% { text-shadow: 0 0 14px rgba(255, 255, 255, 0.9); } 100% { text-shadow: none; } } @media (max-width: 991.98px) { .sp-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 420px) { .sp-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-pct { font-size: 1.35rem; } } @media (prefers-reduced-motion: reduce) { .sp-dot::after, .sp-bar-fill::after, .sp-retry-dot, .sp-flash { animation: none; } .sp-bar-fill { transition: none; } } .stat-strip strong { font-weight: 600; } .change-list { list-style: none; padding: 0; } .change-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; font-size: 0.875rem; } .change-list li strong { margin-left: auto; } .url-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; line-height: 1.6; } .url-counter { color: var(--whp-muted); white-space: nowrap; } .url-counter strong { color: var(--whp-text); } .url-counter.is-over, .url-counter.is-over strong { color: var(--whp-danger); } .review-details { background: var(--whp-surface); border: 1px solid var(--whp-line); border-radius: var(--whp-radius-sm); padding: 0.75rem 1rem; } .review-details summary { cursor: pointer; font-size: 0.875rem; } .review-details .review-list { margin-top: 0.5rem; } .review-list { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; padding-left: 2.5rem; margin-bottom: 0; } .review-list li { padding: 0.2rem 0; overflow-wrap: anywhere; } .review-list-scroll { max-height: 360px; overflow-y: auto; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-right: 1rem; } .review-list-scroll li::marker { color: var(--whp-muted); } .project-table { table-layout: auto; } .project-table td:first-child { max-width: 0; width: 100%; } .project-table td:not(:first-child) { white-space: nowrap; } .project-table th, .project-table td, .table-clean th, .table-clean td { padding: 0.85rem 1rem; } .project-table thead th, .table-clean thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--whp-muted); font-weight: 600; background: transparent; } .project-table tbody tr:last-child td, .table-clean tbody tr:last-child td { border-bottom: 0; } /* ---------- Empty state ---------- */ .empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--whp-muted); } .empty-state .empty-state-title { font-size: 1.05rem; font-weight: 600; color: var(--whp-text); margin-bottom: 0.35rem; } /* ---------- Public pages (home, login, sign-up) ---------- */ .public-topbar { background: rgba(11, 11, 12, 0.8); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--whp-line); } .public-topbar .navbar-brand img { height: 34px; width: auto; } .public-topbar .container { flex-wrap: nowrap; gap: 0.75rem; } .public-topbar .btn { white-space: nowrap; } @media (max-width: 575.98px) { .public-topbar .navbar-brand img { height: 24px; } .public-topbar .btn { padding: 0.3rem 0.6rem; } } @media (max-width: 399.98px) { .public-topbar .navbar-brand img { height: 20px; } .public-topbar .btn { font-size: 0.8125rem; } } /* Very small phones (320px): keep one top-bar action (the forms link to the other page), and make room for Cloudflare's fixed 300px-wide widget. */ @media (max-width: 359.98px) { .public-topbar .btn-outline-secondary { display: none; } .auth-form-panel { padding-left: 0.625rem; padding-right: 0.625rem; } } .auth-shell { display: grid; grid-template-columns: minmax(0, 1fr); } /* minmax: let the column shrink below its content width on tiny screens */ .auth-benefits li { position: relative; padding-left: 1.9rem; margin-bottom: 0.85rem; color: var(--whp-text-2); } .auth-benefits li::before { content: ''; position: absolute; left: 0; top: 0.2rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--whp-red-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M12.7 4.7a1 1 0 0 1 0 1.4l-5 5a1 1 0 0 1-1.4 0l-2.5-2.5a1 1 0 1 1 1.4-1.4l1.8 1.8 4.3-4.3a1 1 0 0 1 1.4 0'/%3E%3C/svg%3E") center / 70% no-repeat; } .auth-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.5rem 0; color: var(--whp-muted); font-size: 0.8125rem; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--whp-line-strong); } .btn-social { display: flex; align-items: center; justify-content: center; gap: 0.6rem; background: var(--whp-surface-2); font-size: 0.95rem; } @media (min-width: 992px) { .auth-shell { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } } .auth-brand-panel { display: none; position: relative; overflow: hidden; padding: 3rem; color: var(--whp-text-2); background: radial-gradient(120% 90% at 0% 0%, #3A0B0D 0%, #120607 40%, var(--whp-sidebar) 70%); border-right: 1px solid var(--whp-line); } @media (min-width: 992px) { .auth-brand-panel { display: flex; flex-direction: column; justify-content: center; } } .auth-brand-panel > img { align-self: flex-start; } /* flex column would stretch the logo */ .auth-brand-panel h2 { color: #FFFFFF; font-size: 2rem; line-height: 1.25; } .auth-brand-panel .accent { color: var(--whp-red-text); } .auth-form-panel { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.25rem; } .auth-card { width: 100%; max-width: 420px; } /* ---------- Status card (verify email, notices) ---------- */ .status-card { max-width: 480px; margin: 2rem auto; padding: 2.5rem 2rem; text-align: center; background: var(--whp-surface); border: 1px solid var(--whp-line); border-radius: var(--whp-radius-lg); box-shadow: var(--whp-highlight), var(--whp-shadow); } .status-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; margin-bottom: 1.25rem; } .status-icon-brand { background: var(--whp-red-soft); color: var(--whp-red-text); } .status-icon-success { background: rgba(61, 220, 132, 0.12); color: var(--whp-success); } .status-icon-danger { background: rgba(255, 122, 126, 0.12); color: var(--whp-danger); } .status-steps { padding-left: 1.25rem; color: var(--whp-text-2); } .status-steps li { margin-bottom: 0.4rem; } /* ---------- Home page ---------- */ /* v1.8: full-width dark hero. The page container stays as it is; two pseudo layers stretch to the viewport width behind the content: a red glow (behind the example card and in the top corners, never behind the headline, which keeps 4.7:1 on black) and a fine grid that fades out. CSS only. */ html, body { overflow-x: clip; } /* the 100vw layers must not cause sideways scrolling */ .home-hero { position: relative; isolation: isolate; text-align: center; padding: 4.5rem 0 3rem; margin-top: -1.5rem; } .home-hero::before, .home-hero::after { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none; } .home-hero::before { background: radial-gradient(45% 32% at 50% 88%, rgba(227, 30, 36, 0.24) 0%, rgba(227, 30, 36, 0) 70%), radial-gradient(28% 34% at 0% 0%, rgba(227, 30, 36, 0.14) 0%, rgba(227, 30, 36, 0) 70%), radial-gradient(28% 34% at 100% 0%, rgba(227, 30, 36, 0.10) 0%, rgba(227, 30, 36, 0) 70%); } .home-hero::after { background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 56px 56px; background-position: center top; -webkit-mask-image: radial-gradient(75% 65% at 50% 30%, #000 25%, transparent 80%); mask-image: radial-gradient(75% 65% at 50% 30%, #000 25%, transparent 80%); } .home-hero .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.95rem; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--whp-line-strong); color: var(--whp-text); font-size: 0.8125rem; font-weight: 500; margin-bottom: 1.5rem; box-shadow: var(--whp-highlight); } .home-hero .eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--whp-red); box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.25), 0 0 10px rgba(227, 30, 36, 0.9); } .home-hero h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.12; font-weight: 700; letter-spacing: -0.03em; max-width: 820px; margin: 0 auto 1rem; } .home-hero h1 .accent { color: var(--whp-red-display); } .home-hero .lead { max-width: 660px; margin: 0 auto 2rem; color: var(--whp-text-2); font-size: 1.15rem; line-height: 1.7; } @media (max-width: 575.98px) { .home-hero { padding: 3rem 0 2rem; } .home-hero .lead { font-size: 1.05rem; } } .feature-card { height: 100%; padding: 1.5rem; background: var(--whp-surface); border: 1px solid var(--whp-line); border-radius: var(--whp-radius); box-shadow: var(--whp-highlight), var(--whp-shadow-sm); transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease; } .feature-card:hover { border-color: var(--whp-line-strong); box-shadow: var(--whp-highlight), var(--whp-shadow); transform: translateY(-2px); } .feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--whp-radius-sm); background: var(--whp-red-soft); border: 1px solid rgba(227, 30, 36, 0.3); color: var(--whp-red-text); margin-bottom: 1rem; } .check-list { list-style: none; padding: 0; margin: 0; } .check-list li { position: relative; padding-left: 1.6rem; margin-bottom: 0.55rem; color: var(--whp-text-2); } .check-list li::before { content: '✓'; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--whp-success); } /* ---------- Content pages (/bot) ---------- */ .prose-page { max-width: 760px; margin: 0 auto; } .prose-page h2 { font-size: 1.15rem; margin-top: 2rem; } .prose-page code { color: var(--whp-red-text); background: var(--whp-red-soft); padding: 0.1rem 0.35rem; border-radius: 4px; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--whp-line); background: var(--whp-sidebar); color: var(--whp-muted); font-size: 0.8125rem; } .site-footer a { color: var(--whp-text-2); } .site-footer a:hover { color: var(--whp-text); } /* v1.8: full footer (content pages) */ .site-footer-full { position: relative; margin-top: 3rem; background: linear-gradient(180deg, #0E0E10, #08080A); } .site-footer-full::before { content: ''; position: absolute; top: -1px; left: 50%; width: min(640px, 80%); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, rgba(227, 30, 36, 0), rgba(227, 30, 36, 0.8), rgba(227, 30, 36, 0)); } .site-footer-full img { height: 32px; width: auto; } .site-footer-about { max-width: 380px; font-size: 0.875rem; line-height: 1.7; color: var(--whp-muted); } .site-footer-heading { margin: 0 0 0.85rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--whp-text); } .site-footer-links { list-style: none; margin: 0; padding: 0; } .site-footer-links li { margin-bottom: 0.55rem; } .site-footer-links a { display: inline-block; padding: 0.1rem 0; font-size: 0.875rem; text-decoration: none; color: var(--whp-text-2); transition: color 0.15s ease; } .site-footer-links a:hover { color: var(--whp-red-text); } .site-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; padding: 1.25rem 0 1.5rem; border-top: 1px solid var(--whp-line); font-size: 0.8125rem; color: var(--whp-muted); } @media (max-width: 399.98px) { .table-clean th, .table-clean td { padding: 0.75rem 0.5rem; } } /* ---------- Results table (v0.8.0) ---------- */ .results-card { overflow: hidden; } .results-table th, .results-table td { padding: 0.45rem 0.55rem; font-size: 0.8125rem; } /* v1.2.4: compact, more data per screen */ .results-table .badge { font-size: 0.75rem; } .results-table thead th { white-space: nowrap; border-bottom-color: var(--whp-line-strong); } .sort-link { color: inherit; text-decoration: none; } .sort-link:hover, .sort-link.is-sorted { color: var(--whp-text); } .sort-arrow { display: inline-block; margin-left: 0.15rem; opacity: 0.45; font-size: 0.8em; } .sort-link.is-sorted .sort-arrow { opacity: 1; } .result-url { color: var(--whp-text); text-decoration: none; } .result-url:hover { color: var(--whp-red-text); text-decoration: underline; } /* v1.8: results table: coloured row edge and reason symbol per verdict */ .result-row { --row-edge: transparent; } .result-passed { --row-edge: var(--whp-success); } .result-warning { --row-edge: var(--whp-warning); } .result-failed { --row-edge: var(--whp-danger); } .result-unverified { --row-edge: #71717A; } .results-table td[data-col="url"], .results-table td.result-edge { position: relative; } .results-table td[data-col="url"]::before, .results-table td.result-edge::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--row-edge); } .reason-icon { display: inline-block; width: 1.1em; margin-right: 0.3rem; font-weight: 700; text-align: center; color: var(--row-edge); } .result-unverified .reason-icon { color: var(--whp-muted); } /* v1.8: sticky header in its own scroll area (tablets and up) and a sticky URL column */ @media (min-width: 768px) { .results-scroll { max-height: min(78vh, 960px); overflow: auto; border-radius: var(--whp-radius); } .results-scroll .results-table > thead th { position: sticky; top: 0; z-index: 3; background: var(--whp-surface-2); box-shadow: inset 0 -1px 0 var(--whp-line-strong); } } .results-table th[data-col="url"], .results-table td[data-col="url"] { position: sticky; left: 0; z-index: 2; --bs-table-bg: var(--whp-surface); } .results-table > thead th[data-col="url"] { z-index: 4; background: var(--whp-surface-2); } .results-table th[data-col="url"]::after, .results-table td[data-col="url"]::after { content: ''; position: absolute; top: 0; bottom: 0; right: -12px; width: 12px; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)); } .results-scroll.is-scrolled-x th[data-col="url"]::after, .results-scroll.is-scrolled-x td[data-col="url"]::after { opacity: 1; } .filter-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.6rem; border: 1px solid var(--whp-line-strong); border-radius: 999px; background: var(--whp-surface-2); color: var(--whp-text-2); text-decoration: none; } .filter-chip:hover { border-color: var(--whp-line-focus); color: var(--whp-text); } /* v1.8: results toolbar and filter bar */ .results-count { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.7rem; border-radius: 999px; background: var(--whp-surface-2); border: 1px solid var(--whp-line-strong); color: var(--whp-text-2); } .results-count strong { color: var(--whp-text); font-variant-numeric: tabular-nums; } .input-icon { position: relative; } .input-icon > svg { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); color: var(--whp-muted); pointer-events: none; } .input-icon > .form-control { padding-left: 2rem; } .btn-chevron { display: inline-flex; transition: transform 0.15s ease; } [aria-expanded="true"] > .btn-chevron { transform: rotate(180deg); } /* ---------- Monitoring timeline (v0.8.0) ---------- */ .timeline-list { list-style: none; padding: 0; margin: 0; } .timeline-item { background: var(--whp-surface); border: 1px solid var(--whp-line); border-left-width: 4px; border-radius: var(--whp-radius-sm); padding: 0.85rem 1rem; margin-bottom: 0.6rem; } .timeline-critical { border-left-color: var(--whp-red); } .timeline-warning { border-left-color: var(--whp-warning); } .timeline-info { border-left-color: var(--whp-info); } /* ---------- Admin overview (v0.8.0) ---------- */ .chart-box { position: relative; height: 220px; } .kpi-link { transition: border-color 0.15s ease, box-shadow 0.15s ease; } a:hover > .kpi-link { border-color: var(--whp-line-focus); box-shadow: var(--whp-highlight), var(--whp-shadow); } /* ---------- Admin users (v0.8.0) ---------- */ .app-avatar-sm { width: 32px; height: 32px; font-size: 0.75rem; flex: 0 0 auto; } .app-avatar-lg { width: 56px; height: 56px; font-size: 1.15rem; flex: 0 0 auto; } @media (min-width: 576px) { .user-table td:first-child { min-width: 220px; } } @media (max-width: 575.98px) { .user-table td:first-child { max-width: 0; width: 100%; } } .detail-list { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0.45rem 0.75rem; font-size: 0.875rem; } .detail-list dt { font-weight: 500; color: var(--whp-muted); } .detail-list dd { margin: 0; overflow-wrap: anywhere; } /* ---------- Admin logs & settings (v0.8.0) ---------- */ .page-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--whp-line-strong); overflow-x: auto; } .page-tab { padding: 0.55rem 0.9rem; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--whp-muted); font-weight: 500; text-decoration: none; white-space: nowrap; } .page-tab:hover { color: var(--whp-text); } .page-tab.active { color: var(--whp-text); border-bottom-color: var(--whp-red); } .settings-card { transition: border-color 0.15s ease, box-shadow 0.15s ease; } .settings-card:hover { border-color: var(--whp-line-focus); box-shadow: var(--whp-highlight), var(--whp-shadow); } .log-message { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; overflow-wrap: anywhere; white-space: pre-wrap; min-width: 260px; } /* ---------- System health (v0.8.1) ---------- */ .health-list { list-style: none; margin: 0; padding: 0; } .health-item { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.7rem 1rem; border-bottom: 1px solid var(--whp-line); font-size: 0.875rem; } .health-item:last-child { border-bottom: 0; } .health-icon { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; margin-top: 1px; } .health-value { color: var(--whp-text-2); text-align: right; overflow-wrap: anywhere; } .health-hint { margin-top: 0.3rem; font-size: 0.8125rem; color: var(--whp-muted); } .health-pill { font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px; } .health-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: 1px; } .health-ok { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); } .health-warning { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); } .health-problem { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); } .health-info { background: var(--bs-secondary-bg-subtle); color: var(--bs-secondary-text-emphasis); } .health-dot.health-ok { background: var(--whp-success); } .health-dot.health-warning { background: var(--whp-warning); } .health-dot.health-problem { background: var(--whp-red); } .health-dot.health-info { background: var(--whp-muted); } /* ---------- Admin user picker (v0.8.2) ---------- */ .user-picker { position: relative; } .user-picker-menu { position: absolute; z-index: 1050; top: calc(100% + 4px); left: 0; right: 0; max-height: 280px; overflow-y: auto; margin: 0; padding: 0.25rem; list-style: none; background: var(--whp-surface-2); border: 1px solid var(--whp-line-strong); border-radius: var(--whp-radius-sm); box-shadow: var(--whp-shadow-lg); } .user-picker-menu [role="option"] { display: flex; flex-direction: column; padding: 0.4rem 0.6rem; border-radius: 6px; cursor: pointer; } .user-picker-menu [role="option"]:hover, .user-picker-menu [role="option"].active { background: var(--whp-surface-3); } .user-picker-name { font-size: 0.875rem; font-weight: 500; color: var(--whp-text); } .user-picker-email { font-size: 0.75rem; color: var(--whp-muted); overflow-wrap: anywhere; } .user-picker-empty { padding: 0.5rem 0.6rem; font-size: 0.8125rem; color: var(--whp-muted); } .user-picker-chip { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 31px; padding: 0.2rem 0.5rem 0.2rem 0.75rem; font-size: 0.875rem; border: 1px solid var(--whp-line-focus); border-radius: var(--whp-radius-sm); background: var(--whp-surface-2); color: var(--whp-text); min-width: 0; } .btn-close-sm { width: 0.6em; height: 0.6em; flex: 0 0 auto; } /* ---------- Analytics consent bar (v0.8.4) ---------- */ .consent-bar { position: fixed; z-index: 1080; left: 16px; right: 16px; bottom: 16px; max-width: 760px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; padding: 0.85rem 1rem; color: #FFFFFF; background: var(--whp-surface-2); border: 1px solid var(--whp-line-strong); border-radius: var(--whp-radius); box-shadow: var(--whp-shadow-lg); } .consent-bar p { flex: 1 1 320px; color: var(--whp-text-2); } /* ---------- Homepage sections (v0.8.4) ---------- */ .hero-note { margin: 1rem 0 0; font-size: 0.875rem; color: var(--whp-muted); } /* v1.5: homepage counters */ .home-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0 auto 2.5rem; max-width: 960px; } .home-stat { background: var(--whp-surface); border: 1px solid var(--whp-line); border-radius: var(--whp-radius); padding: 1.1rem 1rem; text-align: center; box-shadow: var(--whp-highlight); } .home-stat-value { display: block; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--whp-text); } .home-stat-label { display: block; margin-top: 0.35rem; font-size: 0.8125rem; color: var(--whp-muted); } @media (max-width: 767.98px) { .home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* v1.7: homepage hero example, stats icons, live activity strip, workflow, ratings */ .home-stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 0.5rem; border-radius: 50%; background: var(--whp-red-soft); color: var(--whp-red-text); } .hero-rating { margin-top: 0.6rem; font-size: 0.9rem; color: var(--whp-muted); } .hero-rating-stars { color: var(--whp-warning); letter-spacing: 0.08em; margin-right: 0.35rem; } .hero-preview { max-width: 940px; margin: 2.75rem auto 0; text-align: left; background: var(--whp-surface); border: 1px solid var(--whp-line-strong); border-radius: var(--whp-radius); box-shadow: var(--whp-highlight), var(--whp-shadow-lg), 0 0 80px rgba(227, 30, 36, 0.08); overflow: hidden; } .hero-preview-bar { display: flex; align-items: center; gap: 0.35rem; padding: 0.55rem 0.9rem; background: var(--whp-surface-2); border-bottom: 1px solid var(--whp-line); } .hero-preview-bar span { width: 10px; height: 10px; border-radius: 50%; background: #3F3F46; } .hero-preview-bar span:first-child { background: var(--whp-red); } .hero-preview-bar em { margin-left: auto; font-style: normal; font-size: 0.75rem; color: var(--whp-muted); } .hero-preview-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; } .hero-preview-table th { padding: 0.55rem 0.75rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--whp-muted); border-bottom: 1px solid var(--whp-line-strong); white-space: nowrap; } .hero-preview-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--whp-line); white-space: nowrap; color: var(--whp-text-2); } .hero-preview-table tr:last-child td { border-bottom: 0; } .hero-preview-url { filter: blur(3.5px); user-select: none; color: var(--whp-text); } @media (max-width: 767.98px) { .hero-preview-table th:nth-child(3), .hero-preview-table td:nth-child(3), .hero-preview-table th:nth-child(4), .hero-preview-table td:nth-child(4), .hero-preview-table th:nth-child(7), .hero-preview-table td:nth-child(7), .hero-preview-table th:nth-child(8), .hero-preview-table td:nth-child(8) { display: none; } .hero-preview-table th, .hero-preview-table td { padding: 0.5rem 0.45rem; } .hero-preview-url { display: inline-block; max-width: 92px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } } .home-activity { display: flex; align-items: center; gap: 0.6rem; max-width: 960px; margin: -1.25rem auto 2.5rem; padding: 0.7rem 1rem; background: var(--whp-surface); border: 1px solid var(--whp-line); border-radius: 999px; font-size: 0.9rem; } .home-activity-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--whp-success); box-shadow: 0 0 0 4px rgba(61, 220, 132, 0.2); animation: home-pulse 2s ease-in-out infinite; } .home-activity-label { flex: 0 0 auto; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--whp-success); } .home-activity-list { position: relative; flex: 1 1 auto; height: 1.4rem; margin: 0; padding: 0; list-style: none; overflow: hidden; } .home-activity-list li { position: absolute; inset: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--whp-text-2); opacity: 0; transform: translateY(0.6rem); transition: opacity 0.4s ease, transform 0.4s ease; } .home-activity-list li.is-active { opacity: 1; transform: none; } .home-activity-cta { flex: 0 0 auto; font-weight: 600; text-decoration: none; color: var(--whp-red-text); } @keyframes home-pulse { 50% { box-shadow: 0 0 0 7px rgba(61, 220, 132, 0.05); } } @media (prefers-reduced-motion: reduce) { .home-activity-dot { animation: none; } .home-activity-list li { transition: none; } } @media (max-width: 575.98px) { .home-activity { border-radius: var(--whp-radius); } .home-activity-cta { display: none; } } .home-workflow-card { position: relative; } .home-workflow-step { position: absolute; top: 1rem; right: 1rem; font-size: 2rem; font-weight: 700; line-height: 1; color: rgba(255, 255, 255, 0.1); } /* decorative number */ .rating-prompt { border-left: 4px solid var(--whp-warning); } .rating-stars { display: inline-flex; flex-direction: row-reverse; gap: 0.15rem; border: 0; padding: 0; } .rating-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; } .rating-stars label { font-size: 1.6rem; line-height: 1; color: #52525B; cursor: pointer; transition: color 0.1s ease; } .rating-stars label:hover, .rating-stars label:hover ~ label, .rating-stars input:checked ~ label { color: var(--whp-warning); } .rating-stars input:focus-visible + label { outline: 2px solid var(--whp-red-text); outline-offset: 2px; border-radius: 4px; } .rating-comment { width: 260px; max-width: 100%; } /* v1.7.1: account menu arrow (points up while the menu is open) */ .account-menu-caret { display: inline-flex; color: var(--whp-muted); transition: transform 0.15s ease; } .account-menu-toggle:hover .account-menu-caret { color: var(--whp-text); } .account-menu-toggle[aria-expanded="true"] .account-menu-caret { transform: rotate(180deg); } /* v1.7.1: "My rating" and homepage review cards */ .my-rating-stars { font-size: 1.8rem; line-height: 1; color: var(--whp-warning); letter-spacing: 0.05em; } .my-rating-comment { margin: 0; padding-left: 1rem; border-left: 3px solid var(--whp-warning); font-size: 1.05rem; color: var(--whp-text); } .review-card { display: flex; flex-direction: column; padding: 1.25rem; background: var(--whp-surface); border: 1px solid var(--whp-line); border-radius: var(--whp-radius); box-shadow: var(--whp-highlight), var(--whp-shadow-sm); } .review-stars { color: var(--whp-warning); font-size: 1.1rem; letter-spacing: 0.06em; margin-bottom: 0.6rem; } .review-stars-off { color: #52525B; } .review-text { flex: 1 1 auto; margin: 0; color: var(--whp-text-2); font-size: 0.975rem; line-height: 1.6; } .review-author { display: flex; align-items: center; gap: 0.65rem; } .review-author strong { color: var(--whp-text); } /* v1.7.1: Google-style rating line, verified tick, plan badge */ .serp-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: 0.95rem; color: var(--whp-muted); } .serp-rating-value { font-weight: 600; color: var(--whp-text); } .serp-rating-stars { color: var(--whp-warning); font-size: 1.05rem; letter-spacing: 0.04em; } .serp-rating-off { color: #52525B; } .review-verified { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.72rem; font-weight: 600; color: var(--whp-success); } .review-plan { padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } .review-plan-pro { background: var(--whp-red-deep); color: #FFFFFF; } .review-plan-free { background: var(--whp-surface-3); color: var(--whp-text-2); } .review-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; font-weight: 700; color: #FFFFFF; background: linear-gradient(135deg, var(--whp-red), var(--whp-red-active)); } /* v1.7.2: homepage review slider: native scroll + snap, no library. Fixed card widths so nothing shifts (CLS 0); the full comment stays in the HTML for search engines, the slider only clamps it visually (full text on /reviews). */ .review-slider { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: 4px 2px 14px; scrollbar-width: thin; scrollbar-color: #3F3F46 transparent; } .review-slider:focus-visible { outline: 2px solid var(--whp-red-text); outline-offset: 2px; border-radius: var(--whp-radius); } .review-slide { flex: 0 0 min(320px, 86%); scroll-snap-align: start; } .review-slide .review-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; } .review-nav { width: 34px; height: 34px; padding: 0; font-size: 1.25rem; line-height: 1; } @media (prefers-reduced-motion: reduce) { .review-slider { scroll-behavior: auto; } } .home-section { padding: 3rem 0; border-top: 1px solid var(--whp-line); } @media (min-width: 992px) { .home-section { padding: 4rem 0; } } /* v1.8: section labels (red text 7.8:1) and larger section headings */ .section-label { display: inline-flex; align-items: center; gap: 0.55rem; margin: 0 0 0.6rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--whp-red-text); } .section-label::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: var(--whp-red); box-shadow: 0 0 8px rgba(227, 30, 36, 0.8); } .home-section h2.h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.025em; } /* v1.8: feature cards: faint edge, red gradient edge on hover (padding-box fill + border-box edge) */ .feature-card { border: 1px solid transparent; background: linear-gradient(var(--whp-surface), var(--whp-surface)) padding-box, linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04) 45%, rgba(255, 255, 255, 0.06)) border-box; } .feature-card:hover { border-color: transparent; background: linear-gradient(var(--whp-surface), var(--whp-surface)) padding-box, linear-gradient(160deg, rgba(227, 30, 36, 0.75), rgba(255, 255, 255, 0.06) 50%, rgba(227, 30, 36, 0.25)) border-box; box-shadow: var(--whp-highlight), var(--whp-shadow), 0 0 32px rgba(227, 30, 36, 0.08); } .feature-card h3 { color: var(--whp-text); } /* v1.8: steps joined by a faint red line on wide screens (it shows in the gaps between the cards) */ .home-steps { position: relative; } .home-steps li { position: relative; z-index: 1; } @media (min-width: 1200px) { .home-steps::before { content: ''; position: absolute; z-index: 0; left: 2rem; right: 2rem; top: calc(1.1rem + 16px); height: 1px; background: linear-gradient(90deg, rgba(227, 30, 36, 0), rgba(227, 30, 36, 0.7), rgba(227, 30, 36, 0)); } } /* v1.8: verdict list as rows in one card */ .home-verdict-list { background: var(--whp-surface); border: 1px solid var(--whp-line); border-radius: var(--whp-radius); overflow: hidden; } .home-verdict-row { display: flex; gap: 0.85rem; align-items: baseline; padding: 0.8rem 1rem; font-size: 0.875rem; border-bottom: 1px solid var(--whp-line); } .home-verdict-row:last-child { border-bottom: 0; } .home-answer { font-size: 1.125rem; line-height: 1.7; color: var(--whp-text); } .home-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); } .home-steps li { display: flex; gap: 0.85rem; background: var(--whp-surface); border: 1px solid var(--whp-line); border-radius: var(--whp-radius); padding: 1.1rem; box-shadow: var(--whp-highlight); } .home-step-number { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #FFFFFF; background: var(--whp-red-deep); box-shadow: 0 0 0 1px rgba(227, 30, 36, 0.5), 0 0 14px rgba(227, 30, 36, 0.35); } .home-check-table th[scope="row"] { font-weight: 600; color: var(--whp-text); } .home-check-table td, .home-check-table th { font-size: 0.9375rem; } .home-verdict { min-width: 86px; } .home-faq { display: grid; gap: 0.75rem; max-width: 900px; } .home-faq details { background: var(--whp-surface); border: 1px solid var(--whp-line); border-radius: var(--whp-radius); padding: 1rem 1.25rem; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .home-faq details:hover { border-color: var(--whp-line-strong); } .home-faq details[open] { border-color: rgba(227, 30, 36, 0.45); box-shadow: inset 3px 0 0 var(--whp-red), var(--whp-highlight); } .home-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; color: var(--whp-text); } .home-faq summary::-webkit-details-marker { display: none; } .home-faq summary::after { content: '+'; color: var(--whp-red-text); font-weight: 700; font-size: 1.2rem; line-height: 1; } .home-faq details[open] summary::after { content: '−'; } .home-faq details p { margin-top: 0.6rem; } /* v1.8: final call to action: glow from below plus the hero's fading grid. The glow stays under the button, away from the heading and text (AAA on the dark card). */ .home-cta { position: relative; overflow: hidden; isolation: isolate; margin-top: 1rem; padding: 3.5rem 1.5rem; text-align: center; color: #FFFFFF; border: 1px solid rgba(227, 30, 36, 0.35); border-radius: var(--whp-radius-lg); background: radial-gradient(60% 55% at 50% 115%, rgba(227, 30, 36, 0.35) 0%, rgba(227, 30, 36, 0) 70%), var(--whp-surface); box-shadow: var(--whp-highlight), 0 24px 64px rgba(0, 0, 0, 0.5); } .home-cta::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(70% 80% at 50% 100%, #000 20%, transparent 75%); mask-image: radial-gradient(70% 80% at 50% 100%, #000 20%, transparent 75%); } .home-cta h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); letter-spacing: -0.025em; } @media (min-width: 992px) { .home-cta { padding: 4.5rem 2rem; } } .home-cta h2 { color: #FFFFFF; } .home-cta p { color: var(--whp-text-2); } @media (max-width: 575.98px) { .home-check-table td:last-child, .home-check-table th:last-child { display: none; } } /* ---------- Error page (v1.8) ---------- */ .error-page { position: relative; isolation: isolate; max-width: 640px; margin: 0 auto; padding: 4rem 0 3rem; text-align: center; } .error-page::before { content: ''; position: absolute; z-index: -1; inset: 0 -20% 30%; background: radial-gradient(50% 45% at 50% 25%, rgba(227, 30, 36, 0.18) 0%, rgba(227, 30, 36, 0) 70%); pointer-events: none; } .error-code { margin: 0 0 0.5rem; font-size: clamp(5rem, 16vw, 8rem); font-weight: 700; line-height: 1; letter-spacing: -0.05em; color: transparent; background: linear-gradient(180deg, #FFFFFF 10%, rgba(255, 255, 255, 0.25)); -webkit-background-clip: text; background-clip: text; } /* decorative (aria-hidden); the h1 says it in words */ .error-text { margin: 0 auto 2rem; max-width: 460px; font-size: 1.05rem; color: var(--whp-text-2); } /* ---------- Legal pages (v0.8.4) ---------- */ .legal-page { padding-bottom: 2rem; } .legal-page li { margin-bottom: 0.4rem; } .legal-summary { margin: 1.25rem 0; padding: 1rem 1.15rem; background: var(--whp-surface); border: 1px solid var(--whp-line); border-left: 4px solid var(--whp-red); border-radius: var(--whp-radius-sm); } .auth-legal { font-size: 0.8125rem; color: var(--whp-muted); } /* ---------- Plans & billing (v0.9.0) ---------- */ /* v1.8: premium plan card. Free / expired: red gradient edge + glow; Pro: thin green edge. */ .plan-card.plan-free, .plan-card.plan-pro_expired { border: 1px solid transparent; background: radial-gradient(70% 120% at 100% 0%, rgba(227, 30, 36, 0.12), rgba(227, 30, 36, 0) 60%) padding-box, linear-gradient(var(--whp-surface), var(--whp-surface)) padding-box, linear-gradient(135deg, rgba(227, 30, 36, 0.8), rgba(255, 255, 255, 0.06) 45%, rgba(227, 30, 36, 0.3)) border-box; box-shadow: var(--whp-highlight), var(--whp-shadow), 0 0 40px rgba(227, 30, 36, 0.06); } .plan-card.plan-pro { border-color: rgba(61, 220, 132, 0.3); box-shadow: var(--whp-highlight), inset 0 2px 0 rgba(61, 220, 132, 0.6), var(--whp-shadow-sm); } .plan-card .h5 { color: var(--whp-text); } .plan-card .progress { height: 6px; } .plan-card .progress-bar { box-shadow: 0 0 10px currentColor; } .plan-card .progress-bar.bg-success { color: rgba(61, 220, 132, 0.6); } .plan-card .progress-bar.bg-warning { color: rgba(251, 191, 36, 0.6); } .plan-card .progress-bar.bg-danger { color: rgba(227, 30, 36, 0.7); } .plan-upsell { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-top: 1rem; padding: 0.75rem 1rem; border-radius: var(--whp-radius-sm); background: rgba(227, 30, 36, 0.08); border: 1px solid rgba(227, 30, 36, 0.25); font-size: 0.875rem; } .plan-upsell-title { font-weight: 700; letter-spacing: 0.02em; color: var(--whp-text); } .plan-upsell-list { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 0; padding: 0; list-style: none; color: var(--whp-text-2); } .plan-upsell-list li { position: relative; padding-left: 1.1rem; } .plan-upsell-list li::before { content: '✓'; position: absolute; left: 0; font-weight: 700; color: var(--whp-red-text-hover); } .plan-upsell-link { margin-left: auto; font-weight: 600; text-decoration: none; color: var(--whp-red-text-hover); white-space: nowrap; } .plan-upsell-link:hover { color: #FFFFFF; } .price-card { position: relative; display: flex; flex-direction: column; padding: 1.75rem 1.5rem; background: var(--whp-surface); border: 1px solid var(--whp-line); border-radius: var(--whp-radius-lg); box-shadow: var(--whp-highlight), var(--whp-shadow-sm); } .price-card-featured { border: 1px solid rgba(227, 30, 36, 0.6); box-shadow: var(--whp-highlight), 0 0 0 1px rgba(227, 30, 36, 0.35), 0 16px 48px rgba(227, 30, 36, 0.18); background: linear-gradient(180deg, rgba(227, 30, 36, 0.08), rgba(227, 30, 36, 0) 40%), var(--whp-surface); } .price-card-ribbon { position: absolute; top: -0.75rem; right: 1.25rem; padding: 0.15rem 0.7rem; font-size: 0.75rem; font-weight: 600; color: #FFFFFF; background: var(--whp-red-deep); border: 1px solid var(--whp-red); border-radius: 999px; } .price-card-price { font-size: 2.25rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--whp-text); } .price-card-price span { font-size: 0.95rem; font-weight: 500; letter-spacing: 0; color: var(--whp-muted); } .price-card-features { list-style: none; padding: 0; margin: 0 0 1rem; } .price-card-features li { position: relative; padding: 0.3rem 0 0.3rem 1.5rem; } .price-card-features li::before { content: '✓'; position: absolute; left: 0; font-weight: 700; color: var(--whp-red-text); } /* v1.8: premium price cards: bigger price, divider, ticks in circles (red on Pro), taller buttons */ .price-card { padding: 2rem 1.75rem; } .price-card h3 { color: var(--whp-text); } .price-card-price { font-size: clamp(2.25rem, 4vw, 2.85rem); letter-spacing: -0.03em; } .price-card-features { margin-top: 0.5rem; padding-top: 1.25rem; border-top: 1px solid var(--whp-line); } .price-card-features li { padding: 0.4rem 0 0.4rem 2rem; color: var(--whp-text-2); } .price-card-features li::before { content: ''; top: 0.55rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--whp-surface-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23F5F5F7' d='M12.7 4.7a1 1 0 0 1 0 1.4l-5 5a1 1 0 0 1-1.4 0l-2.5-2.5a1 1 0 1 1 1.4-1.4l1.8 1.8 4.3-4.3a1 1 0 0 1 1.4 0'/%3E%3C/svg%3E") center / 70% no-repeat; } .price-card-featured .price-card-features li::before { background-color: var(--whp-red-deep); box-shadow: 0 0 8px rgba(227, 30, 36, 0.45); } .price-card .btn { padding: 0.75rem 1rem; font-weight: 600; } .price-card-featured .btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 24px rgba(227, 30, 36, 0.3); } /* v1.8: /reviews summary card */ .reviews-summary { background: radial-gradient(90% 80% at 100% 0%, rgba(251, 191, 36, 0.06), rgba(251, 191, 36, 0) 60%), var(--whp-surface); } .reviews-summary-value { font-size: 2.75rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; } .reviews-summary .progress-bar { box-shadow: 0 0 10px rgba(251, 191, 36, 0.45); } .payment-qr { max-width: 240px; width: 100%; height: auto; background: #FFFFFF; padding: 8px; border-radius: var(--whp-radius-sm); } /* QR codes need a light quiet zone to scan */ /* ---------- Announcements (v1.1) ---------- */ .announcement { position: relative; display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.25rem; margin-bottom: 0.75rem; background: var(--whp-surface); border: 1px solid var(--whp-line); border-left: 4px solid var(--whp-muted); border-radius: var(--whp-radius); box-shadow: var(--whp-highlight), var(--whp-shadow-sm); } .announcement-body { flex: 1 1 auto; min-width: 0; } .announcement-tag { display: inline-block; margin-bottom: 0.35rem; padding: 0.05rem 0.55rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #FFFFFF; background: var(--whp-secondary-solid); border-radius: 999px; } .announcement-title { margin: 0 0 0.25rem; font-weight: 600; color: var(--whp-text); } .announcement-text { margin: 0; font-size: 0.9375rem; color: var(--whp-text-2); overflow-wrap: anywhere; } .announcement-close { flex: 0 0 auto; margin: 0; } .announcement-important { border-left-color: var(--whp-red); background: linear-gradient(90deg, rgba(227, 30, 36, 0.12), rgba(227, 30, 36, 0.02)), var(--whp-surface); } .announcement-important .announcement-tag { background: var(--whp-red-deep); } /* v1.5.1: rich announcement content: paragraphs, check lists, offer cards with badges */ .announcement-text p { margin: 0 0 0.5rem; } .announcement-text p:last-child { margin-bottom: 0; } .announcement-checks { list-style: none; padding: 0; margin: 0.25rem 0 0.6rem; } .announcement-checks li { position: relative; padding-left: 1.35rem; margin-bottom: 0.3rem; } .announcement-checks li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--whp-red-text); } .announcement-cards { display: grid; gap: 0.85rem; margin: 0.75rem 0; } .announcement-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .announcement-card { padding: 0.9rem 1rem; border: 1px solid var(--whp-line); border-radius: var(--whp-radius-sm); background: var(--whp-surface-2); } .announcement-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin-bottom: 0.55rem; } .announcement-card-name { font-size: 1rem; color: var(--whp-text); } .announcement-chips { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; } .announcement-chip { display: inline-block; padding: 0.12rem 0.55rem; font-size: 0.72rem; font-weight: 600; border-radius: 999px; background: var(--whp-surface-3); color: var(--whp-text); white-space: nowrap; } .announcement-chip-metric { background: var(--whp-red-deep); color: #FFFFFF; } .announcement-chip-good { background: var(--whp-success-solid); color: #FFFFFF; } .announcement-card .announcement-checks { margin-bottom: 0; } /* v1.5.1: "Offer" type = premium dark card with red glow and a gold tag */ .announcement-offer { border: 1px solid #2B2B2B; border-left: 4px solid var(--whp-red); color: #FFFFFF; background: radial-gradient(120% 140% at 100% 0%, rgba(227, 30, 36, 0.28) 0%, rgba(227, 30, 36, 0) 55%), linear-gradient(135deg, #121212 0%, #1C1C1C 60%, #241011 100%); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(227, 30, 36, 0.12); } .announcement-offer .announcement-tag { background: linear-gradient(135deg, #F7D774 0%, #E3A92B 100%); color: #1A1A1A; letter-spacing: 0.08em; box-shadow: 0 2px 8px rgba(227, 169, 43, 0.35); } .announcement-offer .announcement-title { font-size: 1.2rem; font-weight: 700; color: #FFFFFF; } .announcement-offer .announcement-text { color: var(--whp-text-2); } .announcement-offer .announcement-card { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); backdrop-filter: blur(4px); } .announcement-offer .announcement-card-name { color: #FFFFFF; font-size: 1.05rem; } .announcement-offer .announcement-chip { background: rgba(255, 255, 255, 0.14); color: #FFFFFF; } .announcement-offer .announcement-chip-metric { background: var(--whp-red-deep); } .announcement-offer .announcement-chip-good { background: var(--whp-success-solid); } .announcement-offer .announcement-checks li::before { color: #F7D774; } .announcement-offer .announcement-text p:last-child { font-size: 0.8125rem; color: var(--whp-muted); } .announcement-offer .announcement-cta { padding: 0.45rem 1.1rem; font-weight: 600; box-shadow: 0 6px 18px rgba(227, 30, 36, 0.35); } .announcement-feature { border-left-color: var(--whp-info); } .announcement-feature .announcement-tag { background: var(--whp-info); color: #0B0B0C; }