/* ================================================================
BASE.CSS — v6.3
Bootstrap 5 foundation — design tokens + resets + Bootstrap polish
================================================================
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(156, 39, 176, 0.10);
--badge-processing-border: rgba(156, 39, 176, 0.24);
--badge-processing-ink: #7B1FA2;
--badge-partial-bg: rgba(255, 152, 0, 0.10);
--badge-partial-border: rgba(255, 152, 0, 0.26);
--badge-partial-ink: #E65100;
--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(206, 147, 216, 0.18);
--badge-processing-border: rgba(206, 147, 216, 0.32);
--badge-processing-ink: #CE93D8;
--badge-partial-bg: rgba(255, 167, 38, 0.18);
--badge-partial-border: rgba(255, 167, 38, 0.32);
--badge-partial-ink: #FFA726;
--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); }
|