/* ================================================================
BASE.CSS — v6.3
Bootstrap 5 foundation — design tokens + resets + Bootstrap polish
v6.3 changes (over v6.2):
─────────────────────────────────────────────────────────────────
• §5 FIX: removed duplicate/contradictory table utilities.
.tbl-w-narrow, .tbl-w-min-md, .min-w-0 and the entire
.service-table block previously lived in BOTH §5 and the
TABLE CUSTOMIZATION section with diverging values.
TABLE CUSTOMIZATION is now the SINGLE SOURCE OF TRUTH for
all table layout. §5 keeps only non-table helpers.
• §5 FIX: .tbl-w-min-md unified to a single value (100px) and the
stray `!important` dropped — it caused the later `96px`
redeclaration to be silent dead code.
• §5 FIX: .min-w-0 declared once (was declared 3×).
── (v6.2 history) ──────────────────────────────────────────────
• §1a primary desaturated 10%; radii bumped 8→10 / 4→6
• §3 .btn:active 200ms spring; .btn-grad scoped to primary CTA
• §5 skeleton states + empty-state component
• §7 @keyframes shimmer
================================================================
SCOPE RULE:
┌─────────────────────────────────────────────────────────────┐
│ base.css → global tokens + resets + Bootstrap polish │
│ auth.css → auth shell components (#app-wrapper) │
│ guest.css → guest shell components only │
│ Shell-specific tokens NEVER live on :root │
└─────────────────────────────────────────────────────────────┘
================================================================ */
/* ================================================================
§1a GLOBAL DESIGN TOKENS
================================================================ */
:root,
[data-bs-theme="light"] {
--app-font-sans: 'Inter', 'IBM Plex Sans Arabic', system-ui, sans-serif;
--app-font-ar: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif;
--app-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
--app-fs-xs: 12px;
--app-fs-sm: 14px;
--app-fs-md: 15px;
--app-fs-lg: 18px;
--app-fs-xl: 26px;
/* v6.2: display scale — used by landing headings (replaces raw clamp()) */
--app-fs-title: 22px;
--app-fs-display-2: 28px;
--app-fs-display-1: 34px;
--app-lh-sm: 1.40;
--app-lh-md: 1.55;
--app-lh-lg: 1.65;
--app-ls-tight: -0.025em;
--app-ls-normal: -0.011em;
--app-ls-wide: 0.04em;
--app-ls-widest: 0.09em;
/* — Bootstrap body overrides — */
--bs-body-font-family: var(--app-font-sans);
--bs-body-font-size: var(--app-fs-md);
--bs-body-font-weight: 400;
--bs-body-line-height: var(--app-lh-md);
/* — Bootstrap radii — v6.2: bumped for Apple HIG 2026 compliance — */
--bs-border-radius: 10px;
--bs-border-radius-sm: 6px;
--bs-border-radius-lg: 14px;
--bs-border-radius-pill: 999px;
--app-radius-card: 16px;
--app-radius-panel: 12px;
/* — Bootstrap brand colors — v6.2: primary desaturated 10% — */
--bs-primary: #5060f0;
--bs-primary-rgb: 80, 96, 240;
--bs-secondary: #7464fc;
--bs-secondary-rgb: 116, 100, 252;
--bs-success: #2dc077;
--bs-success-rgb: 45, 192, 119;
--bs-warning: #fbd61a;
--bs-warning-rgb: 251, 214, 26;
--bs-danger: #ff3c00;
--bs-danger-rgb: 255, 60, 0;
--bs-primary-bg-subtle: rgba(80, 96, 240, 0.08);
--bs-primary-border-subtle: rgba(80, 96, 240, 0.20);
--bs-primary-text-emphasis: #2336b0;
--bs-secondary-bg-subtle: rgba(116, 100, 252, 0.08);
--bs-secondary-border-subtle: rgba(116, 100, 252, 0.20);
--bs-secondary-text-emphasis: #3D2BB5;
/* — Ink — */
--app-ink-primary: #0D0D0D;
--app-ink-secondary: #5C6878;
--app-ink-tertiary: #8993a4;
--app-ink-accent: var(--bs-primary);
--app-ink-accent-hover: #3a4ada;
/* — Surfaces — */
--app-surface-0: #F8F9FC;
--app-surface-1: #FFFFFF;
--app-surface-2: #F1F3F8;
--app-surface-3: #E6E9F0;
/* — Bootstrap surface overrides — */
--bs-body-bg: var(--app-surface-0);
--bs-body-color: var(--app-ink-primary);
--bs-secondary-bg: var(--app-surface-2);
--bs-tertiary-bg: var(--app-surface-1);
--bs-border-color: #ebecf0;
/* — Borders — */
--app-border: #ebecf0;
--app-border-strong: #dfe1e6;
/* — Shadows — */
--app-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
--app-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.04);
--app-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
--app-shadow-float: 0 12px 40px rgba(0, 0, 0, 0.14), 0 3px 10px rgba(0, 0, 0, 0.07);
/* — Vibrancy layers — */
--app-vibrancy-ultra-bg: rgba(245, 245, 255, 0.88);
--app-vibrancy-ultra-fallback: rgba(247, 247, 255, 0.97);
--app-vibrancy-ultra-blur: saturate(200%) blur(32px);
--app-vibrancy-regular-bg: rgba(255, 255, 255, 0.78);
--app-vibrancy-regular-fallback: rgba(255, 255, 255, 0.97);
--app-vibrancy-regular-blur: saturate(180%) blur(24px);
--app-vibrancy-thin-bg: rgba(255, 255, 255, 0.72);
--app-vibrancy-thin-fallback: rgba(252, 252, 255, 0.98);
--app-vibrancy-thin-blur: saturate(160%) blur(16px);
/* — Pills — */
--app-pill-balance-bg: rgba(48, 209, 88, 0.10);
--app-pill-balance-ink: #1A7F3C;
--app-pill-orders-bg: rgba(80, 96, 240, 0.10);
--app-pill-orders-ink: #2336b0;
/* — Motion — v6.2: active duration bumped to 200ms for tactile feel — */
--app-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--app-ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--app-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--app-dur-fast: 100ms;
--app-dur-base: 200ms;
--app-dur-slow: 350ms;
--app-dur-active: 200ms; /* v6.2: dedicated token for press states */
/* — Interaction — */
--app-focus-ring-computed: rgba(80, 96, 240, 0.20);
--app-accent-border-computed: rgba(80, 96, 240, 0.35);
--app-hover-light: rgba(0, 0, 0, 0.04);
--app-hover-dark: rgba(255, 255, 255, 0.06);
--app-card-gloss: rgba(255, 255, 255, 0.60);
/* — Alert color tokens — */
--alert-success-bg: rgba(45, 192, 119, 0.08);
--alert-success-border: rgba(45, 192, 119, 0.20);
--alert-danger-bg: rgba(255, 60, 0, 0.08);
--alert-danger-border: rgba(255, 60, 0, 0.20);
--alert-warning-bg: rgba(251, 214, 26, 0.08);
--alert-warning-border: rgba(251, 214, 26, 0.20);
--alert-info-bg: rgba(80, 96, 240, 0.08);
--alert-info-border: rgba(80, 96, 240, 0.20);
/* ────────────────────────────────────────────────────────────
Brand gradients — v6.1 (unchanged).
Used ONLY in: balance card (sidebar), .btn-grad (primary CTA).
Account button is now solid --app-ink-accent (see §3 below).
──────────────────────────────────────────────────────────── */
--grad-brand: linear-gradient(135deg, var(--bs-primary) 0%, var(--bs-secondary) 100%);
--grad-brand-hover: linear-gradient(135deg, #3a4ada 0%, #6050e8 100%);
--grad-brand-shadow: 0 2px 10px rgba(80, 96, 240, 0.25);
--grad-brand-shadow-hover: 0 4px 16px rgba(80, 96, 240, 0.35);
/* — Avatar gradients (landing testimonials, signup page) — */
--grad-av-violet: linear-gradient(135deg, var(--bs-primary), var(--bs-secondary));
--grad-av-green: linear-gradient(135deg, #2dc077, #1ea868);
--grad-av-amber: linear-gradient(135deg, #f5a623, #fbd61a);
--grad-av-rose: linear-gradient(135deg, #e4405f, #c0002e);
--grad-av-azure: linear-gradient(135deg, #3b82f6, #2563eb);
/* — v6.2: Skeleton shimmer tokens — */
--skeleton-base: rgba(0, 0, 0, 0.06);
--skeleton-shine: rgba(0, 0, 0, 0.02);
}
/* — RTL overrides — */
html[dir="rtl"] {
--bs-body-font-family: var(--app-font-ar);
}
/* — Dark theme — */
[data-bs-theme="dark"] {
/* v6.2: dark primary slightly adjusted for WCAG AA over dark surfaces */
--bs-primary: #7B72F5;
--bs-primary-rgb: 123, 114, 245;
--bs-success: #2dc077;
--bs-warning: #fbd61a;
--bs-warning-rgb: 251, 214, 26;
--bs-primary-bg-subtle: rgba(80, 96, 240, 0.15);
--bs-primary-border-subtle: rgba(80, 96, 240, 0.28);
--bs-primary-text-emphasis: #a8b0fd;
--bs-secondary-bg-subtle: rgba(116, 100, 252, 0.15);
--bs-secondary-border-subtle: rgba(116, 100, 252, 0.28);
--bs-secondary-text-emphasis: #b4abfd;
--app-ink-primary: #F2F2F7;
--app-ink-secondary: #8E8E9A;
--app-ink-tertiary: #48484A;
--app-ink-accent: #7B72F5;
--app-ink-accent-hover: #9188f8;
--app-surface-0: #0C0C0F;
--app-surface-1: #18181B;
--app-surface-2: #26262B;
--app-surface-3: #34343A;
--bs-body-bg: var(--app-surface-0);
--bs-body-color: var(--app-ink-primary);
--bs-secondary-bg: var(--app-surface-2);
--bs-tertiary-bg: var(--app-surface-1);
--bs-border-color: rgba(255, 255, 255, 0.08);
--app-border: rgba(255, 255, 255, 0.08);
--app-border-strong: rgba(255, 255, 255, 0.12);
--app-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
--app-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.04);
--app-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.50), 0 1px 3px rgba(0, 0, 0, 0.30);
--app-shadow-float: 0 12px 40px rgba(0, 0, 0, 0.70), 0 3px 10px rgba(0, 0, 0, 0.40);
--app-vibrancy-ultra-bg: rgba(20, 20, 22, 0.90);
--app-vibrancy-ultra-fallback: rgba(16, 16, 18, 0.98);
--app-vibrancy-regular-bg: rgba(28, 28, 30, 0.82);
--app-vibrancy-regular-fallback: rgba(18, 18, 20, 0.98);
--app-vibrancy-thin-bg: rgba(36, 36, 40, 0.75);
--app-vibrancy-thin-fallback: rgba(22, 22, 26, 0.98);
--app-pill-balance-bg: rgba(48, 209, 88, 0.14);
--app-pill-balance-ink: #2dc077;
--app-pill-orders-bg: rgba(123, 114, 245, 0.14);
--app-pill-orders-ink: #7B72F5;
--app-focus-ring-computed: rgba(80, 96, 240, 0.28);
--app-accent-border-computed: rgba(80, 96, 240, 0.45);
--app-card-gloss: rgba(255, 255, 255, 0.07);
--alert-success-bg: rgba(45, 192, 119, 0.14);
--alert-success-border: rgba(45, 192, 119, 0.28);
--alert-danger-bg: rgba(255, 60, 0, 0.14);
--alert-danger-border: rgba(255, 60, 0, 0.28);
--alert-warning-bg: rgba(251, 214, 26, 0.14);
--alert-warning-border: rgba(251, 214, 26, 0.28);
--alert-info-bg: rgba(80, 96, 240, 0.14);
--alert-info-border: rgba(80, 96, 240, 0.28);
--grad-brand-shadow: 0 2px 10px rgba(123, 114, 245, 0.20);
--grad-brand-shadow-hover: 0 4px 16px rgba(123, 114, 245, 0.30);
--skeleton-base: rgba(255, 255, 255, 0.06);
--skeleton-shine: rgba(255, 255, 255, 0.02);
}
/* ================================================================
§1c COMPONENT TOKENS
================================================================ */
:root,
[data-bs-theme="light"] {
/* — Nav link — */
--nav-link-color: var(--app-ink-secondary);
--nav-link-color-hover: var(--app-ink-primary);
--nav-link-color-active: var(--app-ink-accent);
--nav-link-bg-hover: var(--app-hover-light);
--nav-link-bg-active: var(--bs-primary-bg-subtle);
--nav-link-weight-active: 600;
/* — Dropdown item — */
--dropdown-item-color: var(--app-ink-primary);
--dropdown-item-bg-hover: var(--app-hover-light);
--dropdown-item-color-active: var(--app-ink-accent);
--dropdown-item-bg-active: var(--bs-primary-bg-subtle);
/* — Status pill — */
--pill-border-balance: rgba(22, 110, 51, 0.15);
--pill-border-orders: rgba(35, 54, 176, 0.15);
/* — Service tags — */
--tag-speed-bg: rgba(80, 96, 240, 0.10);
--tag-speed-border: rgba(80, 96, 240, 0.20);
--tag-speed-ink: #5060f0;
--tag-refill-bg: rgba(48, 209, 88, 0.10);
--tag-refill-border: rgba(48, 209, 88, 0.20);
--tag-refill-ink: #1A7F3C;
--tag-quality-bg: rgba(255, 159, 10, 0.10);
--tag-quality-border: rgba(255, 159, 10, 0.20);
--tag-quality-ink: #B86800;
--tag-popular-bg: rgba(255, 55, 95, 0.10);
--tag-popular-border: rgba(255, 55, 95, 0.20);
--tag-popular-ink: #C0002E;
--tag-stable-bg: rgba(100, 100, 120, 0.09);
--tag-stable-border: var(--app-border);
--tag-stable-ink: var(--app-ink-secondary);
/* — Service warning — */
--svc-warning-bg: rgba(255, 159, 10, 0.08);
--svc-warning-border: rgba(255, 159, 10, 0.20);
/* — Table hover — */
--table-row-hover-bg: rgba(80, 96, 240, 0.04);
/* — Focus ring (unified) — */
--comp-focus-outline: var(--app-ink-accent);
/* — Status badge tokens — */
--badge-active-bg: var(--bs-primary-bg-subtle);
--badge-active-border: var(--bs-primary-border-subtle);
--badge-active-ink: var(--bs-primary-text-emphasis);
--badge-completed-bg: rgba(45, 192, 119, 0.10);
--badge-completed-border: rgba(45, 192, 119, 0.22);
--badge-completed-ink: #1A7F3C;
--badge-pending-bg: rgba(251, 214, 26, 0.12);
--badge-pending-border: rgba(251, 214, 26, 0.30);
--badge-pending-ink: #8B6914;
--badge-processing-bg: rgba(245, 124, 0, 0.10);
--badge-processing-border: rgba(245, 124, 0, 0.26);
--badge-processing-ink: #A14F00;
--badge-partial-bg: rgba(80, 96, 240, 0.06);
--badge-partial-border: rgba(80, 96, 240, 0.18);
--badge-partial-ink: var(--bs-primary-text-emphasis);
--badge-canceled-bg: rgba(255, 60, 0, 0.08);
--badge-canceled-border: rgba(255, 60, 0, 0.22);
--badge-canceled-ink: #C0002E;
--badge-neutral-bg: var(--app-surface-2);
--badge-neutral-border: var(--app-border);
--badge-neutral-ink: var(--app-ink-secondary);
}
[data-bs-theme="dark"] {
--nav-link-bg-hover: var(--app-hover-dark);
--dropdown-item-bg-hover: var(--app-hover-dark);
--pill-border-balance: rgba(45, 192, 119, 0.22);
--pill-border-orders: rgba(123, 114, 245, 0.22);
--tag-speed-bg: rgba(80, 96, 240, 0.18);
--tag-speed-border: rgba(80, 96, 240, 0.32);
--tag-speed-ink: #a8b0fd;
--tag-refill-bg: rgba(48, 209, 88, 0.18);
--tag-refill-border: rgba(48, 209, 88, 0.32);
--tag-refill-ink: #2dc077;
--tag-quality-bg: rgba(255, 159, 10, 0.18);
--tag-quality-border: rgba(255, 159, 10, 0.30);
--tag-quality-ink: #fbd61a;
--tag-popular-bg: rgba(255, 55, 95, 0.18);
--tag-popular-border: rgba(255, 55, 95, 0.30);
--tag-popular-ink: #ff6b8a;
--tag-stable-bg: rgba(100, 100, 120, 0.16);
--tag-stable-border: var(--app-border);
--tag-stable-ink: var(--app-ink-secondary);
--svc-warning-bg: rgba(255, 159, 10, 0.14);
--svc-warning-border: rgba(255, 159, 10, 0.30);
--table-row-hover-bg: rgba(80, 96, 240, 0.08);
--comp-focus-outline: var(--app-ink-accent);
--badge-completed-bg: rgba(45, 192, 119, 0.18);
--badge-completed-border: rgba(45, 192, 119, 0.32);
--badge-completed-ink: #5DD89C;
--badge-pending-bg: rgba(251, 214, 26, 0.16);
--badge-pending-border: rgba(251, 214, 26, 0.32);
--badge-pending-ink: #FCDF4D;
--badge-processing-bg: rgba(245, 124, 0, 0.18);
--badge-processing-border: rgba(245, 124, 0, 0.34);
--badge-processing-ink: #FFB15C;
--badge-canceled-bg: rgba(255, 60, 0, 0.16);
--badge-canceled-border: rgba(255, 60, 0, 0.32);
--badge-canceled-ink: #FF6B47;
}
/* ================================================================
§2 GLOBAL RESETS
================================================================ */
*,
*::before,
*::after { box-sizing: border-box; }
html,
body {
font-family: var(--bs-body-font-family);
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html[dir="ltr"] body { letter-spacing: var(--app-ls-normal); }
html[dir="rtl"] body { letter-spacing: 0; }
*:focus:not(:focus-visible) { outline: none; }
img { max-width: 100%; height: auto; }
code, pre, kbd, samp { font-family: var(--app-font-mono); }
/* ================================================================
§3 BOOTSTRAP COMPONENT POLISH
================================================================ */
/* — Card — */
.card {
--bs-card-border-color: var(--app-border);
--bs-card-bg: var(--app-surface-1);
--bs-card-border-radius: var(--app-radius-card);
--bs-card-cap-bg: transparent;
box-shadow: var(--app-shadow-sm), inset 0 0.5px 0 var(--app-card-gloss);
}
.card-hoverable {
transition:
box-shadow var(--app-dur-base) var(--app-ease-out),
border-color var(--app-dur-base) var(--app-ease-smooth),
transform var(--app-dur-base) var(--app-ease-out);
cursor: pointer;
}
.card-hoverable:hover {
box-shadow: var(--app-shadow-md), inset 0 0.5px 0 var(--app-card-gloss);
border-color: var(--app-border-strong);
transform: translateY(-2px);
}
.card-hoverable:active { transform: scale(0.99); }
/* — Forms — */
.form-control,
.form-select {
border-color: var(--app-border);
background: var(--app-surface-0);
color: var(--app-ink-primary);
/* border-radius: intentionally omitted — Bootstrap reads --bs-border-radius (10px) */
transition:
border-color var(--app-dur-fast) var(--app-ease-smooth),
box-shadow var(--app-dur-fast) var(--app-ease-smooth);
}
.form-control:focus,
.form-select:focus {
border-color: var(--app-ink-accent);
box-shadow: 0 0 0 3px var(--app-focus-ring-computed);
background: var(--app-surface-0);
color: var(--app-ink-primary);
}
.form-control:hover:not(:focus):not([readonly]):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) {
border-color: var(--app-accent-border-computed);
}
.form-control[readonly],
.form-control:disabled {
background: var(--app-surface-2);
color: var(--app-ink-tertiary);
}
.form-control::placeholder,
.form-select::placeholder { color: var(--app-ink-tertiary); }
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
background: var(--app-surface-1);
color: var(--app-ink-primary);
border-color: var(--app-border);
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus { background: var(--app-surface-1); }
[data-bs-theme="dark"] .form-control[readonly],
[data-bs-theme="dark"] .form-control:disabled { background: var(--app-surface-2); }
.form-label {
font-size: var(--app-fs-sm);
font-weight: 600;
color: var(--app-ink-secondary);
margin-bottom: 6px;
}
/* — Nav pills — */
.nav-pills {
/*
* Use Bootstrap's own component tokens instead of selector overrides.
* These two lines replace the previous 3-property .nav-link.active block.
*/
--bs-nav-pills-link-active-bg: var(--app-ink-accent);
--bs-nav-pills-link-active-color: #fff;
}
.nav-pills .nav-link {
color: var(--nav-link-color);
border-radius: 8px;
font-size: var(--app-fs-md);
font-weight: 500;
padding: 6px 12px;
line-height: 1;
white-space: nowrap;
transition: background var(--app-dur-fast), color var(--app-dur-fast);
}
.nav-pills .nav-link:hover {
background: var(--app-surface-2);
color: var(--nav-link-color-hover);
}
/* — Dropdown — */
.dropdown-menu {
--bs-dropdown-border-color: var(--app-border);
--bs-dropdown-bg: var(--app-surface-2);
--bs-dropdown-color: var(--app-ink-primary);
--bs-dropdown-link-color: var(--app-ink-primary);
--bs-dropdown-link-hover-bg: var(--app-surface-1);
--bs-dropdown-border-radius: 12px;
--bs-dropdown-padding-y: 6px;
box-shadow: var(--app-shadow-md);
}
.dropdown-item {
font-size: var(--app-fs-md);
border-radius: 8px;
color: var(--dropdown-item-color);
}
.dropdown-item:hover:not(.active),
.dropdown-item:focus-visible:not(.active) {
background-color: var(--dropdown-item-bg-hover);
color: var(--app-ink-primary);
}
.dropdown-item.active,
.dropdown-item:active {
background-color: var(--dropdown-item-bg-active);
color: var(--dropdown-item-color-active);
}
/* — Modal — */
.modal-content {
--bs-modal-bg: var(--app-surface-2);
--bs-modal-border-color: var(--app-border);
--bs-modal-border-radius: 16px;
}
.modal-header,
.modal-footer { border-color: var(--app-border); }
.modal-title {
font-size: var(--app-fs-xl) !important;
font-weight: 700;
letter-spacing: var(--app-ls-tight);
line-height: 1.3;
}
/* — Pagination — */
.page-link {
border-color: var(--app-border);
color: var(--app-ink-primary);
background: var(--app-surface-2);
border-radius: 8px !important;
font-size: var(--app-fs-md);
margin-inline: 2px;
}
.page-link:hover {
background: var(--app-surface-1);
color: var(--app-ink-primary);
border-color: var(--app-border);
}
.page-item.active .page-link {
background: var(--app-ink-accent);
border-color: var(--app-ink-accent);
color: #fff;
}
[data-bs-theme="dark"] .page-link {
background: var(--app-surface-2);
border-color: var(--app-border);
color: var(--app-ink-primary);
}
[data-bs-theme="dark"] .page-link:hover { background: var(--app-surface-1); }
[data-bs-theme="dark"] .page-item.disabled .page-link {
background: var(--app-surface-2);
border-color: var(--app-border);
color: var(--app-ink-tertiary);
}
/* — Buttons — */
.btn {
/*
* border-radius intentionally omitted — Bootstrap reads --bs-border-radius (10px)
* which we set in :root. Hardcoding it here would create a duplicate that
* silently diverges if the token ever changes.
*/
font-size: var(--app-fs-md);
font-weight: 500;
/*
* Full transition rewrite is necessary: Bootstrap has no `transform` in its
* default .btn transition. We must redeclare all properties to avoid the
* browser merging two separate transition declarations unpredictably.
* `color` is included to match Bootstrap's original set.
*/
transition:
color var(--app-dur-fast) var(--app-ease-smooth),
background var(--app-dur-fast) var(--app-ease-smooth),
box-shadow var(--app-dur-fast) var(--app-ease-smooth),
border-color var(--app-dur-fast) var(--app-ease-smooth),
transform var(--app-dur-active) var(--app-ease-spring);
}
/* v6.2: 200ms spring for tactile press feedback */
.btn:active { transform: scale(0.97); }
/* v6.2: .btn-sm radius intentionally delegated to --bs-border-radius-sm (6px).
* Removing the hardcoded override that previously set 8px and conflicted with the token. */
.btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: var(--app-ink-accent);
--bs-btn-border-color: var(--app-ink-accent);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: var(--app-ink-accent-hover);
--bs-btn-hover-border-color: var(--app-ink-accent-hover);
--bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
--bs-btn-active-color: #fff;
--bs-btn-active-bg: var(--app-ink-accent-hover);
--bs-btn-active-border-color: var(--app-ink-accent-hover);
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: var(--app-ink-accent);
--bs-btn-disabled-border-color: var(--app-ink-accent);
box-shadow: 0 1px 3px rgba(var(--bs-primary-rgb), 0.30);
}
.btn-primary:hover {
box-shadow: 0 3px 10px rgba(var(--bs-primary-rgb), 0.35),
0 1px 3px rgba(var(--bs-primary-rgb), 0.20);
}
.btn-outline-secondary {
--bs-btn-color: var(--app-ink-primary);
--bs-btn-bg: var(--app-surface-1);
--bs-btn-border-color: var(--app-border);
--bs-btn-hover-color: var(--app-ink-primary);
--bs-btn-hover-bg: var(--app-surface-2);
--bs-btn-hover-border-color: rgba(160, 160, 176, 0.50);
--bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
--bs-btn-active-color: var(--app-ink-primary);
--bs-btn-active-bg: var(--app-surface-2);
--bs-btn-active-border-color:var(--app-border-strong);
--bs-btn-disabled-color: var(--app-ink-tertiary);
--bs-btn-disabled-bg: var(--app-surface-1);
--bs-btn-disabled-border-color: var(--app-border);
}
/*
* .btn-grad — PRIMARY CTA ONLY
*
* Discipline rule: one gradient button per page view.
* Use this class exclusively on the single most important action:
* Hero "Get Started", Order "Submit", Signup "Create Account".
* Every secondary CTA uses .btn-primary (solid) or .btn-outline-secondary.
* Violating this rule dilutes the brand signal — the gradient loses weight
* when it competes with itself.
*/
.btn-grad {
background: var(--grad-brand) !important;
border-color: transparent !important;
color: #fff !important;
box-shadow: var(--grad-brand-shadow);
transition:
transform var(--app-dur-active) var(--app-ease-spring),
box-shadow var(--app-dur-active) var(--app-ease-smooth);
}
.btn-grad:hover {
background: var(--grad-brand-hover) !important;
color: #fff !important;
transform: translateY(-1px);
box-shadow: var(--grad-brand-shadow-hover);
}
.btn-grad:active { transform: scale(0.97); }
/* — Alerts — */
.alert {
border-radius: 12px;
font-size: var(--app-fs-md);
border-inline-start-width: 3px;
border-inline-start-style: solid;
color: var(--app-ink-primary);
}
/*
* Alert overrides: we use --bs-alert-bg and --bs-alert-border-color (BS5 component tokens)
* for the fill/stroke, and add border-inline-start as our unique HIG accent line.
* This avoids writing background: and border-color: twice when the BS5 token already
* propagates to .alert's own internal variables.
*/
.alert-success {
--bs-alert-bg: var(--alert-success-bg);
--bs-alert-border-color: var(--alert-success-border);
border-inline-start-color: var(--bs-success);
}
.alert-danger {
--bs-alert-bg: var(--alert-danger-bg);
--bs-alert-border-color: var(--alert-danger-border);
border-inline-start-color: #cc2800;
}
.alert-warning {
--bs-alert-bg: var(--alert-warning-bg);
--bs-alert-border-color: var(--alert-warning-border);
border-inline-start-color: var(--bs-warning);
}
.alert-info {
--bs-alert-bg: var(--alert-info-bg);
--bs-alert-border-color: var(--alert-info-border);
border-inline-start-color: var(--app-ink-accent);
}
/* — Badge — */
.badge {
font-size: var(--app-fs-xs);
font-weight: 600;
border-radius: 6px;
}
/* — Status badge classes — */
.badge-status-active,
.badge-status-inprogress,
.badge-status-open {
background: var(--badge-active-bg);
border: 1px solid var(--badge-active-border);
color: var(--badge-active-ink);
}
.badge-status-completed,
.badge-status-answered {
background: var(--badge-completed-bg);
border: 1px solid var(--badge-completed-border);
color: var(--badge-completed-ink);
}
.badge-status-pending,
.badge-status-onhold {
background: var(--badge-pending-bg);
border: 1px solid var(--badge-pending-border);
color: var(--badge-pending-ink);
}
.badge-status-processing {
background: var(--badge-processing-bg);
border: 1px solid var(--badge-processing-border);
color: var(--badge-processing-ink);
}
.badge-status-partial {
background: var(--badge-partial-bg);
border: 1px solid var(--badge-partial-border);
color: var(--badge-partial-ink);
}
.badge-status-canceled {
background: var(--badge-canceled-bg);
border: 1px solid var(--badge-canceled-border);
color: var(--badge-canceled-ink);
}
.badge-status-expired,
.badge-status-resolved,
.badge-status-closed,
.badge-status-paused,
.badge-status-default {
background: var(--badge-neutral-bg);
border: 1px solid var(--badge-neutral-border);
color: var(--badge-neutral-ink);
}
/* — Form check — */
.form-check-input {
--bs-form-check-bg: var(--app-surface-0);
border-color: var(--app-border);
width: 1em;
height: 1em;
margin-top: 0.18em;
transition:
background-color var(--app-dur-fast) var(--app-ease-smooth),
border-color var(--app-dur-fast) var(--app-ease-smooth),
box-shadow var(--app-dur-fast) var(--app-ease-smooth);
}
.form-check-input:checked {
background-color: var(--app-ink-accent);
border-color: var(--app-ink-accent);
}
.form-check-input:hover:not(:disabled) { border-color: var(--app-ink-accent); }
.form-check-input:focus {
box-shadow: 0 0 0 3px var(--app-focus-ring-computed);
border-color: var(--app-ink-accent);
}
.form-check-label {
font-size: var(--app-fs-md);
color: var(--app-ink-primary);
}
[data-bs-theme="dark"] .form-check-input {
--bs-form-check-bg: var(--app-surface-2);
border-color: rgba(255, 255, 255, 0.20);
}
/* — Tooltip — */
.tooltip {
--bs-tooltip-bg: var(--app-surface-0);
--bs-tooltip-color: var(--app-ink-primary);
--bs-tooltip-border-radius: 7px;
--bs-tooltip-font-size: var(--app-fs-xs);
--bs-tooltip-padding-x: 8px;
--bs-tooltip-padding-y: 4px;
font-weight: 500;
}
[data-bs-theme="dark"] .tooltip {
--bs-tooltip-bg: var(--app-surface-3);
--bs-tooltip-color: var(--app-ink-primary);
}
/* — Code & pre — */
code {
font-family: var(--app-font-mono);
font-size: var(--app-fs-sm);
color: var(--app-ink-accent);
background: var(--alert-info-bg);
padding: 2px 6px;
border-radius: 5px;
letter-spacing: 0;
}
[data-bs-theme="dark"] code {
color: #a8b0fd;
background: var(--alert-info-bg);
}
pre {
font-family: var(--app-font-mono);
font-size: var(--app-fs-sm);
line-height: 1.7;
color: var(--app-ink-secondary);
background: var(--app-surface-0);
border: 1px solid var(--app-border);
border-radius: 10px;
padding: 14px 16px;
overflow-x: auto;
margin-bottom: 16px;
}
[data-bs-theme="dark"] pre { background: var(--app-surface-1); }
/* ================================================================
§4 SEGMENTED CONTROL
================================================================ */
.d3m-segmented {
display: inline-flex;
background: rgba(0, 0, 0, 0.06);
border-radius: 10px;
padding: 2px;
gap: 2px;
}
[data-bs-theme="dark"] .d3m-segmented { background: rgba(255, 255, 255, 0.08); }
.d3m-seg-item {
padding: 5px 14px;
border-radius: 8px;
border: none;
background: transparent;
font-family: var(--bs-body-font-family);
font-size: var(--app-fs-sm);
font-weight: 600;
color: var(--app-ink-secondary);
letter-spacing: var(--app-ls-normal);
cursor: pointer;
white-space: nowrap;
text-decoration: none;
transition:
background-color var(--app-dur-fast) var(--app-ease-smooth),
color var(--app-dur-fast) var(--app-ease-smooth),
box-shadow var(--app-dur-fast) var(--app-ease-smooth);
}
.d3m-seg-item:hover:not(.active):not([aria-selected="true"]) { color: var(--app-ink-primary); }
.d3m-seg-item.active,
.d3m-seg-item[aria-selected="true"] {
background: var(--bs-tertiary-bg);
color: var(--app-ink-primary);
box-shadow: var(--app-shadow-sm);
}
/* ================================================================
§5 SHARED HELPERS (non-table)
NOTE (v6.3): ALL table layout utilities — .tbl-w-narrow,
.tbl-w-min-md, .min-w-0, the .service-table sizing block, and the
service-table responsive rules — have been REMOVED from this
section. They previously lived here AND in the TABLE
CUSTOMIZATION section below with diverging values, which made the
§5 copies dead/misleading code. The TABLE CUSTOMIZATION section is
now the single source of truth for everything table-related.
================================================================ */
.content-rich img { max-width: 100%; height: auto; border-radius: 8px; }
.content-rich table { width: 100%; }
.content-rich a { word-break: break-word; }
.copy-row { display: flex; gap: 8px; align-items: center; }
@media (min-width: 768px) { .w-md-auto { width: auto !important; } }
/* — Table tab nav — */
.table-tab-nav {
flex: 1 1 auto;
min-width: 0;
display: inline-flex !important;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
background-color: var(--app-surface-2);
padding: 6px !important;
border-radius: 14px;
border: 1px solid var(--app-border);
gap: 4px;
}
.table-tab-nav::-webkit-scrollbar { display: none; }
.table-tab-nav .nav-link {
font-size: var(--app-fs-xs);
font-weight: 600;
color: var(--app-ink-secondary);
padding: 8px 16px !important;
border-radius: 10px !important;
border: none !important;
transition: all var(--app-dur-fast) var(--app-ease-smooth);
white-space: nowrap;
}
.table-tab-nav .nav-link.active {
background-color: var(--app-surface-1) !important;
color: var(--bs-primary) !important;
box-shadow: var(--app-shadow-sm) !important;
}
/* — Filter bar search — */
.filter-bar-search {
flex-shrink: 0;
min-width: 160px;
max-width: 280px;
}
.filter-bar-search .input-group {
background-color: var(--app-surface-2);
border-radius: var(--app-radius-card);
border: 1px solid var(--app-border);
transition: border-color 0.2s;
}
.filter-bar-search .input-group-text {
background: transparent !important;
border: none !important;
color: var(--app-ink-secondary);
}
.filter-bar-search .form-control {
background: transparent !important;
border: none !important;
font-size: var(--app-fs-sm);
color: var(--app-ink-primary);
}
.filter-bar-search:focus-within .input-group {
border-color: var(--bs-primary) !important;
background-color: var(--app-surface-1);
}
@media (max-width: 767.98px) {
.filter-bar-search { max-width: 100%; width: 100%; }
}
/* — Brand logo height — */
.sidebar-brand a img { height: 33px; width: auto; }
#guest-nav .navbar-brand img { height: 26px; width: auto; }
.footer-brand-logo { height: 20px; width: auto; }
/* — Category icon — */
.category-icon-img {
width: 1.1rem;
height: 1.1rem;
object-fit: contain;
flex-shrink: 0;
}
/* — Currency item — */
.currency-item {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 10px;
border-radius: 8px;
cursor: pointer;
transition: background-color var(--app-dur-fast);
font-size: var(--app-fs-md);
text-decoration: none;
color: var(--app-ink-primary);
}
.currency-item:hover { background: var(--app-hover-light); }
[data-bs-theme="dark"] .currency-item:hover { background: var(--app-hover-dark); }
/* — Separator dot — */
.app-sep-dot,
.footer-dot,
.gf-dot {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--app-ink-tertiary);
opacity: 0.35;
}
/* — Platform card grid — */
.platform-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.platform-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
width: 80px;
padding: 10px 8px;
/* v6.2: minimum touch target met via padding — visual stays 80px */
min-height: 44px;
border: 1px solid var(--app-border);
border-radius: var(--app-radius-panel);
background: var(--app-surface-1);
color: var(--app-ink-secondary);
cursor: pointer;
transition:
background var(--app-dur-fast) var(--app-ease-smooth),
border-color var(--app-dur-fast) var(--app-ease-smooth),
color var(--app-dur-fast) var(--app-ease-smooth),
box-shadow var(--app-dur-fast) var(--app-ease-smooth);
}
.platform-card__icon {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
color: var(--app-ink-accent);
}
.platform-card__icon svg { width: 100%; height: 100%; }
.platform-card__title {
font-size: var(--app-fs-xs);
font-weight: 600;
white-space: nowrap;
line-height: 1;
color: inherit;
}
.platform-card:hover:not(.active) {
background: var(--app-surface-2);
border-color: var(--app-border-strong);
color: var(--app-ink-primary);
}
.platform-card.active {
background: var(--bs-primary-bg-subtle);
border-color: var(--bs-primary-border-subtle);
color: var(--app-ink-accent);
box-shadow: var(--app-shadow-xs);
}
.platform-card.active .platform-card__icon { color: var(--app-ink-accent); }
@media (max-width: 575.98px) {
.platform-card { width: 68px; padding: 8px 4px; }
}
/* — JS-driven visibility — */
.js-hidden { display: none !important; }
/* — Brand-gradient utilities — */
.lp-grad-brand { background: var(--grad-brand); color: #fff; }
.lp-av-violet { background: var(--grad-av-violet); }
.lp-av-green { background: var(--grad-av-green); }
.lp-av-amber { background: var(--grad-av-amber); }
.lp-av-rose { background: var(--grad-av-rose); }
.lp-av-azure { background: var(--grad-av-azure); }
/*
* Aliases without lp- prefix — signup.twig and any page using .av-violet etc.
* Adding both so neither landing nor signup needs a class rename.
*/
.av-violet { background: var(--grad-av-violet); }
.av-green { background: var(--grad-av-green); }
.av-amber { background: var(--grad-av-amber); }
.av-rose { background: var(--grad-av-rose); }
.av-azure { background: var(--grad-av-azure); }
/* ───────────────────────────────────────────────────────────────
v6.2 NEW — Skeleton loading states
Use .skeleton-row inside tables, .skeleton-card inside card grids.
The shimmer animation uses only transform + opacity (GPU-friendly).
─────────────────────────────────────────────────────────────── */
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.skeleton-row,
.skeleton-card {
position: relative;
overflow: hidden;
border-radius: 8px;
background: var(--skeleton-base);
}
.skeleton-row::after,
.skeleton-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
transparent 0%,
var(--skeleton-shine) 50%,
transparent 100%
);
animation: shimmer 1.6s infinite;
}
.skeleton-row {
height: 20px;
margin-bottom: 10px;
}
.skeleton-row.skeleton-row--sm { height: 14px; width: 60%; }
.skeleton-row.skeleton-row--lg { height: 28px; }
.skeleton-card {
height: 120px;
border-radius: var(--app-radius-card);
}
/* ───────────────────────────────────────────────────────────────
v6.2 NEW — Empty state
Standardised component: .empty-state wraps an icon, heading, and CTA.
Provides warm, actionable empty states instead of bare "No orders found."
─────────────────────────────────────────────────────────────── */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 24px;
text-align: center;
gap: 12px;
}
.empty-state__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 16px;
background: var(--bs-primary-bg-subtle);
color: var(--app-ink-accent);
font-size: 22px;
margin-bottom: 4px;
}
.empty-state__title {
font-size: var(--app-fs-lg);
font-weight: 700;
letter-spacing: var(--app-ls-tight);
color: var(--app-ink-primary);
margin: 0;
}
.empty-state__body {
font-size: var(--app-fs-sm);
color: var(--app-ink-secondary);
max-width: 360px;
margin: 0;
line-height: var(--app-lh-lg);
}
/* ================================================================
TABLE CUSTOMIZATION — v6.3
────────────────────────────────────────────────────────────────
SINGLE SOURCE OF TRUTH for all table layout.
This section owns every table utility and sizing rule:
.tbl-w-narrow / .tbl-w-min-md / .min-w-0
.table-app + variants (history / service / compact-history)
all column-width rules + their responsive breakpoints.
v6.3: previously duplicated in §5 with conflicting values
(.tbl-w-min-md was 100px!important there vs 96px here;
.service-table th.table-col-name was min-width:380px there
vs 300px here; .min-w-0 declared 3×). All §5 copies removed —
the values below are now the only ones.
================================================================ */
/* — Standalone width utilities —
Kept intentionally generic (no .table-app prefix) so they can be
applied to any | / | . Where a stronger .table-app-scoped rule
exists below, that scoped rule wins inside tables by specificity. */
.tbl-w-narrow { max-width: 60px; }
.tbl-w-min-md { min-width: 100px; } /* v6.3: unified — single value, no !important */
.min-w-0 { min-width: 0 !important; }
/* — Wrapper — */
.card-table-wrapper {
background: var(--app-surface-1);
border: 1px solid var(--app-border);
border-radius: 20px;
box-shadow: var(--app-shadow-sm), inset 0 1px 0 var(--app-card-gloss);
overflow: hidden;
}
.card-table-wrapper .table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* — Base table — */
.table-app {
width: 100%;
min-width: 100%;
margin-bottom: 0 !important;
border-collapse: separate;
border-spacing: 0;
table-layout: auto;
background: var(--app-surface-1);
}
.table-app.table-app-auto { min-width: 0; }
.table-app.history-table,
.table-app.service-table {
width: 100%;
min-width: 100%;
table-layout: auto;
}
.table-app.compact-history-table {
width: 100%;
min-width: 0;
table-layout: auto;
}
/* — Header — */
.table-app thead th {
height: 40px;
padding: 10px 16px !important;
color: var(--app-ink-primary) !important;
background: var(--app-vibrancy-thin-bg) !important;
backdrop-filter: var(--app-vibrancy-thin-blur);
-webkit-backdrop-filter: var(--app-vibrancy-thin-blur);
border: 0 !important;
border-bottom: 1px solid var(--app-border-strong) !important;
font-size: var(--app-fs-xs) !important;
font-weight: 700 !important;
letter-spacing: var(--app-ls-wide);
text-transform: uppercase;
white-space: nowrap;
vertical-align: middle !important;
}
/* — Body — */
.table-app tbody td {
height: 44px;
padding: 10px 16px !important;
color: var(--app-ink-primary) !important;
background: var(--app-surface-1) !important;
border: 0 !important;
border-bottom: 1px solid var(--app-border) !important;
font-size: var(--app-fs-sm) !important;
vertical-align: middle !important;
white-space: nowrap;
}
.table-app tbody tr:last-child td { border-bottom: 0 !important; }
.table-app tbody tr { transition: background var(--app-dur-fast) var(--app-ease-smooth); }
.table-app tbody tr:hover td { background: var(--table-row-hover-bg) !important; }
/* — First/last spacing — */
.table-app thead th:first-child,
.table-app tbody td:first-child { padding-inline-start: 20px !important; }
.table-app thead th:last-child,
.table-app tbody td:last-child { padding-inline-end: 20px !important; }
.table-app thead th:first-child { border-start-start-radius: 20px; }
.table-app thead th:last-child { border-start-end-radius: 20px; }
.table-app tbody tr:last-child td:first-child { border-end-start-radius: 20px; }
.table-app tbody tr:last-child td:last-child { border-end-end-radius: 20px; }
/* — Section rows — */
.table-app .table-section-row td,
.table-app td.full-td {
background: var(--app-surface-2) !important;
color: var(--app-ink-accent) !important;
font-size: var(--app-fs-xs) !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: var(--app-ls-widest);
border-bottom: 1px solid var(--app-border-strong) !important;
white-space: normal !important;
padding: 7px 20px !important;
}
/* — Link column — */
.table-app th.table-col-link,
.table-app td.table-col-link {
min-width: 120px;
max-width: 650px;
white-space: normal !important;
word-break: break-all;
overflow-wrap: anywhere;
}
.table-app td.table-col-link .table-url {
display: inline;
color: var(--app-ink-accent);
text-decoration: none;
white-space: normal !important;
word-break: break-all;
overflow-wrap: anywhere;
unicode-bidi: plaintext;
}
.table-app td.table-col-link .table-url:hover { text-decoration: underline; }
/* — Service/name column — */
.table-app .table-col-service,
.table-app .table-col-name {
min-width: 120px;
max-width: 650px;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: anywhere;
line-height: 1.5;
}
.table-app .table-col-service *,
.table-app .table-col-name * { word-break: normal !important; }
.table-app td .d-flex .flex-grow-1 {
min-width: 0;
max-width: 300px;
}
/* — Narrow / numeric columns —
Scoped .table-app rules: these win over the standalone
.tbl-w-narrow / .tbl-w-min-md utilities above by specificity. */
.table-app th.tbl-w-narrow,
.table-app td.tbl-w-narrow {
width: 90px;
min-width: 90px;
max-width: 120px;
white-space: nowrap;
}
.table-app th.text-nowrap,
.table-app td.text-nowrap { min-width: 96px; }
/* v6.3: .tbl-w-min-md intentionally NOT grouped here.
* Pre-v6.3 it sat in this `min-width: 96px` group, but a SECOND
* declaration in §5 (`100px !important`) silently overrode it
* everywhere — so the real effective value was always 100px.
* It now has a single canonical declaration (100px, no !important)
* up in the "Standalone width utilities" block. Do not re-add it
* here or the 96px/100px conflict returns. */
/* — History / orders table — */
.history-table thead th:first-child,
.history-table tbody td:first-child { min-width: 130px; }
.history-table .table-col-link { width: 28%; min-width: 200px; max-width: 480px; }
.history-table .table-col-service,
.history-table .table-col-name { width: 26%; min-width: 220px; max-width: 480px; }
.history-table .order-actions,
.history-table .table-actions { min-width: 130px; }
/* — Services table — */
.table-app.service-table {
min-width: 1080px;
table-layout: auto;
}
.service-table th.tbl-w-narrow,
.service-table td.tbl-w-narrow {
width: 90px;
min-width: 90px;
white-space: nowrap;
}
.service-table th.table-col-name,
.service-table td.table-col-name {
width: 42%;
min-width: 380px;
max-width: 540px;
}
.service-table td.table-col-name {
white-space: normal !important;
word-break: normal !important;
overflow-wrap: anywhere;
line-height: 1.55;
}
.service-table td.table-col-name * { word-break: normal !important; }
.service-table th.text-nowrap,
.service-table td.text-nowrap { min-width: 110px; }
.service-table .cart-btn {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 34px;
height: 34px;
padding: 0;
border-radius: 50%;
white-space: nowrap;
}
/* — Compact history tables — */
.compact-history-table th.text-nowrap,
.compact-history-table td.text-nowrap { min-width: 90px; }
.compact-history-table .table-col-link { width: 32%; min-width: 190px; max-width: 440px; }
.compact-history-table .table-col-service,
.compact-history-table .table-col-name { width: 32%; min-width: 210px; max-width: 400px; }
/* — Badges in tables — */
.table-app td .badge.rounded-pill,
.table-app th .badge.rounded-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 96px;
padding: 0.38em 0.8em !important;
font-size: var(--app-fs-xs) !important;
font-weight: 600 !important;
line-height: 1.15;
text-align: center;
white-space: nowrap;
}
.table-app td .badge.badge-wide,
.table-app td .badge-200,
.table-app th .badge.badge-wide,
.table-app th .badge-200 { min-width: 180px; }
/* — Buttons / actions — */
.table-app .btn-sm { border-radius: 999px; white-space: nowrap; }
.table-app .action,
.table-app .cart-btn {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.table-app .action {
width: 44px;
height: 33px;
padding: 0;
border: none;
border-radius: 6px;
font-size: 12px;
}
.table-app .action-danger { background: rgba(222, 52, 69, 0.16); color: #de3445; }
.table-app .action-info { background: rgba(35, 170, 225, 0.16); color: #24aae1; }
/* — Copy buttons — */
.btn-copy-selected-inline {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
/* v6.2: expanded hit area for mobile — visual stays 22px */
padding: 0;
margin: -11px;
border: none;
border-radius: 5px;
background: transparent;
color: var(--app-ink-tertiary);
font-size: 11px;
cursor: pointer;
visibility: hidden;
opacity: 0;
transition:
opacity var(--app-dur-fast),
color var(--app-dur-fast),
background var(--app-dur-fast);
}
.btn-copy-selected-inline.is-active { visibility: visible; opacity: 1; }
.btn-copy-id {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
/* v6.2: expanded hit area for mobile — visual stays 22px */
padding: 0;
margin: -11px;
border: none;
border-radius: 5px;
background: transparent;
color: var(--app-ink-tertiary);
font-size: 11px;
cursor: pointer;
opacity: 0;
vertical-align: middle;
margin-inline-start: 2px;
transition:
opacity var(--app-dur-fast),
color var(--app-dur-fast),
background var(--app-dur-fast);
}
.table-app tbody tr:hover .btn-copy-id,
.btn-copy-id:focus-visible { opacity: 1; }
.btn-copy-selected-inline:hover,
.btn-copy-id:hover {
color: var(--app-ink-accent);
background: var(--bs-primary-bg-subtle);
}
.btn-copy-selected-inline.copied,
.btn-copy-id.copied { opacity: 1; color: var(--bs-success); }
.selected-count-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: var(--bs-primary);
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 1;
visibility: hidden;
opacity: 0;
transition: opacity var(--app-dur-fast);
}
.selected-count-badge.is-active { visibility: visible; opacity: 1; }
/* — Numerics / links — */
.font-numeric {
font-family: var(--app-font-mono) !important;
font-weight: 500;
letter-spacing: 0;
}
.table-app tbody td a { color: var(--app-ink-accent); text-decoration: none; }
.table-app tbody td a:hover { text-decoration: underline; }
/* — Dark mode table — */
[data-bs-theme="dark"] .card-table-wrapper {
border-color: var(--app-border);
box-shadow: var(--app-shadow-sm);
}
[data-bs-theme="dark"] .table-app thead th {
background: var(--app-vibrancy-ultra-bg) !important;
color: var(--app-ink-primary) !important;
border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}
[data-bs-theme="dark"] .table-app tbody td {
background: var(--app-surface-1) !important;
color: var(--app-ink-primary) !important;
border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
[data-bs-theme="dark"] .table-app tbody tr:hover td {
background: var(--table-row-hover-bg) !important;
}
/* ================================================================
§6 FOCUS RINGS (keyboard nav)
================================================================ */
.btn:focus-visible {
outline: 2px solid var(--comp-focus-outline);
outline-offset: 3px;
box-shadow: none !important;
}
.nav-pills .nav-link:focus-visible {
outline: 2px solid var(--comp-focus-outline);
outline-offset: 2px;
}
.page-link:focus,
.form-check-input:focus {
box-shadow: 0 0 0 3px var(--app-focus-ring-computed);
border-color: var(--app-ink-accent);
}
.d3m-seg-item:focus-visible,
a.d3m-seg-item:focus-visible {
outline: 2px solid var(--comp-focus-outline);
outline-offset: 2px;
box-shadow: none !important;
}
/* ================================================================
§7 REDUCED MOTION
================================================================ */
@media (prefers-reduced-motion: reduce) {
.card-hoverable,
.card-hoverable:hover,
.btn,
.btn:hover,
.btn:active,
.form-control,
.form-select,
.d3m-seg-item,
.table > tbody > tr > td,
.platform-card,
.skeleton-row::after,
.skeleton-card::after {
transition: none !important;
animation: none !important;
}
.btn:active { transform: none !important; }
.card-hoverable:hover { transform: none !important; }
.card-hoverable:active { transform: none !important; }
}
/* ================================================================
RESPONSIVE
================================================================ */
@media (max-width: 767.98px) {
.card-table-wrapper { border-radius: 16px; }
.table-app thead th,
.table-app tbody td { padding: 8px 12px !important; }
.table-app thead th:first-child,
.table-app tbody td:first-child { padding-inline-start: 14px !important; }
.table-app thead th:last-child,
.table-app tbody td:last-child { padding-inline-end: 14px !important; }
.table-app th.tbl-w-narrow,
.table-app td.tbl-w-narrow { width: 76px; min-width: 76px; }
.table-app th.text-nowrap,
.table-app td.text-nowrap { min-width: 86px; }
.table-app th.table-col-link,
.table-app td.table-col-link { width: 30%; min-width: 180px; max-width: 380px; }
.table-app .table-col-service,
.table-app .table-col-name { min-width: 200px; max-width: 340px; }
.service-table th.table-col-name,
.service-table td.table-col-name { min-width: 260px; max-width: 400px; }
.history-table thead th:first-child,
.history-table tbody td:first-child { min-width: 110px; }
}
@media (max-width: 575.98px) {
.card-table-wrapper { border-radius: 12px; }
.table-app thead th,
.table-app tbody td { padding: 8px 10px !important; }
.table-app thead th:first-child,
.table-app tbody td:first-child { padding-inline-start: 12px !important; }
.table-app thead th:last-child,
.table-app tbody td:last-child { padding-inline-end: 12px !important; }
.table-app td .badge.rounded-pill,
.badge.rounded-pill { min-width: 80px; }
.table-app th.table-col-link,
.table-app td.table-col-link { width: 32%; min-width: 170px; max-width: 320px; }
.table-app .table-col-service,
.table-app .table-col-name { min-width: 200px; max-width: 300px; }
.service-table th.table-col-name,
.service-table td.table-col-name { min-width: 240px; max-width: 340px; }
.history-table .table-col-service,
.history-table .table-col-name { min-width: 210px; max-width: 320px; }
.compact-history-table .table-col-service,
.compact-history-table .table-col-name { min-width: 190px; max-width: 300px; }
/* Services table — narrow-column + min-width adjustments at <576px */
.table-app.service-table { min-width: 960px; }
.service-table th.tbl-w-narrow,
.service-table td.tbl-w-narrow { width: 76px; min-width: 76px; }
.service-table th.text-nowrap,
.service-table td.text-nowrap { min-width: 96px; }
}
/* ================================================================
§8 SHARED PAGE COMPONENTS — v6.3
────────────────────────────────────────────────────────────────
Helper classes shared across the public/content pages
(api, faq, terms, contactus, blog, resetpassword, signup…).
Previously these lived in a separate `_add-to-base.css` snippet;
merged here in v6.3 so there is one base stylesheet, not two.
All colors come from the project's own token system
(--app-* / --bs-primary-* / --badge-* / --alert-*).
IMPORTANT (v6.3): the original snippet referenced Bootstrap's
stock --bs-success-bg-subtle / --bs-warning-bg-subtle /
--bs-info-bg-subtle / --bs-info tokens. Those are NOT part of
this project's token layer — base.css deliberately defines its
own --alert-* / --badge-* scales instead and never themes the
stock Bootstrap subtle-color tokens for dark mode. Using them
would produce off-system colors that don't flip in dark mode.
The .method-icon--* variants below are therefore re-pointed at
existing project tokens.
================================================================ */
/* ══════ PAGE-LEVEL SEO HEADER (used in card-header) ══════ */
.page-eyebrow {
font-size: var(--app-fs-xs);
font-weight: 600;
color: var(--app-ink-tertiary);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.5rem;
}
.page-title {
letter-spacing: var(--app-ls-tight);
color: var(--app-ink-primary);
margin-bottom: 0.5rem;
}
.page-lead {
font-size: var(--app-fs-md);
color: var(--app-ink-secondary);
line-height: var(--app-lh-lg);
margin-bottom: 0;
}
/* ══════ SECTION HEADINGS (inside card body) ══════ */
.section-eyebrow {
font-size: var(--app-fs-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--app-ink-secondary);
margin-bottom: 0.5rem;
}
/* ══════ TABLE COLUMN WIDTHS ══════ */
.col-w-icon { width: 44px; }
.col-w-narrow { width: 220px; }
.col-w-40 { width: 40%; }
/* ══════ METHOD ICON CIRCLE (contactus, resetpassword, blog cards) ══════ */
.method-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: var(--app-radius-panel);
font-size: 1.25rem;
margin-bottom: 0.875rem;
background: var(--bs-primary-bg-subtle);
color: var(--bs-primary);
}
.method-icon--lg {
width: 64px;
height: 64px;
font-size: 1.75rem;
}
/*
* v6.3: re-pointed at project tokens (was stock Bootstrap
* --bs-success-bg-subtle / --bs-warning-* / --bs-info-* which this
* project doesn't theme). These now flip correctly in dark mode
* because the underlying --badge-* / --alert-* tokens do.
* success → --badge-completed-* (green scale)
* warning → --badge-pending-* (amber scale)
* info → --alert-info-* + --app-ink-accent (project "info" = accent)
*/
.method-icon--success {
background: var(--badge-completed-bg);
color: var(--badge-completed-ink);
}
.method-icon--warning {
background: var(--badge-pending-bg);
color: var(--badge-pending-ink);
}
.method-icon--info {
background: var(--alert-info-bg);
color: var(--app-ink-accent);
}
/* Brand colors — these stay constant in both themes (they're brand assets) */
.method-icon--brand-tg { background: rgba(0, 136, 204, 0.10); color: #0088CC; }
.method-icon--brand-wa { background: rgba(37, 211, 102, 0.10); color: #25D366; }
/* Dark-mode adjustment for brand chips — slightly lighter for contrast */
[data-bs-theme="dark"] .method-icon--brand-tg {
background: rgba(34, 158, 217, 0.18);
color: #4FB3E0;
}
[data-bs-theme="dark"] .method-icon--brand-wa {
background: rgba(37, 211, 102, 0.18);
color: #4ADE80;
}
/* ══════ BLOG IMAGE SIZES ══════ */
.blog-thumb {
width: 100%;
height: 180px;
object-fit: cover;
}
.blog-hero-image {
width: 100%;
max-height: 480px;
object-fit: cover;
}
.blog-related-thumb {
width: 100%;
height: 140px;
object-fit: cover;
}
/* ══════ INSET NOTE (security note, info box) ══════ */
.inset-note {
background: var(--bs-primary-bg-subtle);
border: 1px solid var(--bs-primary-border-subtle);
color: var(--app-ink-secondary);
border-radius: var(--app-radius-panel);
padding: 1rem 1.25rem;
}
.inset-note__title {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: var(--app-fs-sm);
font-weight: 700;
color: var(--app-ink-primary);
margin-bottom: 0.5rem;
}
/* ══════ CTA FOOTER (highlighted footer inside a card) ══════ */
.card-footer-cta {
background: var(--bs-primary-bg-subtle);
text-align: center;
}
.card-footer-cta .h6 { margin-bottom: 0.5rem; }
/* ══════ TYPOGRAPHY HELPERS ══════ */
.lead-centered {
max-width: 720px;
margin-inline: auto;
}
.app-divider { border-color: var(--app-border); }
|