/* ============================================================ EB Dela Cruz Enterprises – Global Theme (v3 · 2026-05-09) Typography: Poppins, sans-serif Icons: Font Awesome 6 Aesthetic: Solid with Shadows (Image 2-inspired) ============================================================ */ /* ── CSS Custom Properties ─────────────────────────────────── */ :root { --eb-radius-sm: 10px; --eb-radius-md: 14px; --eb-radius-lg: 18px; --eb-surface: var(--eb-paper, #ffffff); --eb-bg: var(--eb-ivory, #f3f4f6); --eb-text: #0f172a; --eb-muted: #64748b; --eb-border: color-mix(in srgb, #0f172a 10%, white); --eb-shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.08); --eb-shadow-md: 0 14px 40px rgba(15, 23, 42, 0.10); --eb-shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.14); --eb-transition: 0.2s ease; } /* ── Global Typography ─────────────────────────────────────── */ html, body { background: var(--eb-bg); font-family: 'Poppins', sans-serif; } body { color: var(--eb-text); text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* NOTE: We intentionally do NOT use *, *::before, *::after { font-family: inherit } because that breaks Font Awesome (FA uses ::before pseudo-elements with its own font). Instead we target specific element types below. */ h1, h2, h3, h4, h5, h6, p, span, a, label, th, td, li, blockquote, figcaption, legend, caption { font-family: 'Poppins', sans-serif; } button, input, select, textarea { font-family: 'Poppins', sans-serif; } /* ── Font Awesome Consistency ──────────────────────────────── */ .eb-icon { width: 1.25em; text-align: center; display: inline-block; line-height: 1; } .eb-icon + span, .eb-icon + strong, .eb-icon + em { margin-left: 0.35rem; } /* ── Focus Rings ───────────────────────────────────────────── */ :focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--eb-brand, #C84C4C) 35%, white), 0 0 0 5px color-mix(in srgb, var(--eb-brand, #C84C4C) 14%, transparent); } /* ── Card Surface ──────────────────────────────────────────── */ .eb-card { background: #ffffff !important; border: 1px solid color-mix(in srgb, var(--eb-brand, #C84C4C) 14%, white); border-radius: var(--eb-radius-lg); box-shadow: var(--eb-shadow-sm); transition: box-shadow var(--eb-transition), transform var(--eb-transition); } .eb-card:hover { box-shadow: var(--eb-shadow-md); } /* ── Force White Background for All Cards & Containers ──────── */ section[class*="rounded"], div[class*="rounded-md"], div[class*="rounded-xl"], div[class*="rounded-lg"], .rq-shell, .rq-step, .rq-card { background: #ffffff !important; } /* ── Stat Cards (Dashboard) - White Background ──────────────── */ /* Limit to non-button surfaces. Buttons/links that share these utility classes (e.g. action buttons styled with `rounded-md` + inline `border-color`) must keep their brand-coloured background, otherwise their white labels become invisible on a forced-white background. */ section .rounded-md[style*="border-color"]:not(button):not(a):not([role="button"]):not(input):not(label), section .rounded-xl[style*="border-color"]:not(button):not(a):not([role="button"]):not(input):not(label), div.rounded-md[style*="border-color"]:not(button):not(a):not([role="button"]):not(input):not(label), div.rounded-xl[style*="border-color"]:not(button):not(a):not([role="button"]):not(input):not(label) { background: #ffffff !important; } /* Re-assert brand fill for buttons/links that use it inline. The wildcard `[style*="background-color: #fffbeb"]…` whitewash below would otherwise strip these too. */ button[style*="background-color: var(--eb-brand)"], a[style*="background-color: var(--eb-brand)"], [role="button"][style*="background-color: var(--eb-brand)"] { background-color: var(--eb-brand) !important; color: #ffffff !important; } /* ── Override any inline background colors ──────────────────── */ [style*="background-color: #fffbeb"], [style*="background-color: #eff6ff"], [style*="background-color: #f0fdf4"], [style*="background-color: #f8fafc"], [style*="background-color: #fff7ed"], [style*="background-color: #f0fdfa"], [style*="background-color: #fef2f2"] { background-color: #ffffff !important; } /* ── Interactive Cards & Containers ────────────────────────── */ .eb-card-interactive { background: var(--eb-surface); border: 1px solid color-mix(in srgb, var(--eb-brand, #C84C4C) 14%, white); border-radius: var(--eb-radius-lg); box-shadow: var(--eb-shadow-sm); transition: box-shadow var(--eb-transition), transform var(--eb-transition), border-color var(--eb-transition); cursor: pointer; } .eb-card-interactive:hover { box-shadow: var(--eb-shadow-lg); transform: translateY(-2px); border-color: color-mix(in srgb, var(--eb-brand, #C84C4C) 30%, white); } /* ── Buttons ───────────────────────────────────────────────── */ .eb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--eb-radius-md); padding: 0.625rem 0.875rem; font-weight: 700; font-size: 0.75rem; line-height: 1; border: 1px solid transparent; transition: transform 0.12s ease, background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease; } .eb-btn:hover { transform: translateY(-1px); box-shadow: var(--eb-shadow-sm); } .eb-btn:active { transform: translateY(0); } .eb-btn-primary { background: var(--eb-brand, #C84C4C); border-color: color-mix(in srgb, var(--eb-brand, #C84C4C) 70%, black); color: #ffffff; } .eb-btn-soft { background: color-mix(in srgb, var(--eb-brand-soft, #F3B7B7) 26%, white); border-color: color-mix(in srgb, var(--eb-brand, #C84C4C) 18%, white); color: color-mix(in srgb, #0f172a 70%, var(--eb-brand, #C84C4C)); } .eb-btn-outline { background: transparent; border-color: color-mix(in srgb, var(--eb-brand, #C84C4C) 35%, white); color: var(--eb-brand, #C84C4C); } .eb-btn-outline:hover { background: color-mix(in srgb, var(--eb-brand, #C84C4C) 8%, white); } /* ── Pills / Badges ────────────────────────────────────────── */ .eb-pill { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.3rem 0.55rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--eb-brand, #C84C4C) 18%, white); background: color-mix(in srgb, var(--eb-brand-soft, #F3B7B7) 18%, white); color: color-mix(in srgb, #0f172a 68%, white); font-weight: 700; font-size: 0.7rem; line-height: 1; white-space: nowrap; } /* ── Sidebar (Red Rail – Image 2 aesthetic) ────────────────── */ .eb-sidebar { background: color-mix(in srgb, var(--eb-brand, #C84C4C) 92%, #0f172a); color: rgba(255, 255, 255, 0.94); } .eb-sidebar .eb-sidebar-muted { color: rgba(255, 255, 255, 0.72) !important; } .eb-sidebar .eb-sidebar-title { color: #ffffff !important; } .eb-sidebar a, .eb-sidebar button { color: rgba(255, 255, 255, 0.92); transition: background-color var(--eb-transition), transform var(--eb-transition); } .eb-sidebar a:hover, .eb-sidebar button:hover { background-color: rgba(255, 255, 255, 0.10) !important; } .eb-sidebar a[style*="color: var(--eb-brand)"], .eb-sidebar button[style*="color: var(--eb-brand)"] { color: #ffffff !important; background-color: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.22) !important; } .eb-sidebar a[style*="background-color: color-mix(in srgb, var(--eb-brand) 10%, white)"] { background-color: rgba(255, 255, 255, 0.12) !important; color: #ffffff !important; } /* ── Tables (Modernised) ───────────────────────────────────── */ table { border: 2px solid color-mix(in srgb, var(--eb-brand, #C84C4C) 25%, white); border-top: 4px solid var(--eb-brand, #C84C4C); border-radius: var(--eb-radius-md); overflow: hidden; box-shadow: 0 4px 12px rgba(200, 76, 76, 0.08); } table thead th { font-weight: 700; letter-spacing: 0.04em; color: #1e293b; border-bottom: 2px solid var(--eb-brand, #C84C4C); } table tbody tr { transition: background-color var(--eb-transition); } table tbody tr:hover { background-color: color-mix(in srgb, var(--eb-brand, #C84C4C) 5%, white); box-shadow: inset 4px 0 0 var(--eb-brand, #C84C4C); } table tbody td { color: #1e293b; font-weight: 600; } /* ── Inline Action Links / Buttons hover ───────────────────── */ a[class*="rounded-md"][style*="border-color"], button[class*="rounded-md"][style*="border-color"] { transition: background-color var(--eb-transition), transform var(--eb-transition), box-shadow var(--eb-transition); } a[class*="rounded-md"][style*="border-color"]:hover, button[class*="rounded-md"][style*="border-color"]:hover { box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); transform: translateY(-1px); } /* ── Input Fields ──────────────────────────────────────────── */ input, select, textarea { transition: border-color var(--eb-transition), box-shadow var(--eb-transition); } /* ── Slightly softer buttons when using plain