/* ============================================================================ Luxury Jewellery Design System — visual layer only ---------------------------------------------------------------------------- Loaded LAST in every page , so it re-skins the existing Tailwind and Bootstrap markup without touching any HTML, IDs, Thymeleaf bindings or JS. Purely presentational: colours, type, spacing, elevation, focus, motion. Palette: premium subtle gold on a soft neutral canvas. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@500;600;700;800&display=swap'); :root { /* Brand */ --lux-gold: #C8A044; --lux-gold-dark: #9A7726; --lux-gold-light: #F8F4EA; --lux-gold-soft: #EFE6CF; /* Surfaces & ink */ --lux-bg: #F7F8FA; --lux-card: #FFFFFF; --lux-ink: #1A1D24; --lux-muted: #6B7280; --lux-line: #ECEDF1; /* Status */ --lux-success: #1E9E6A; --lux-warning: #C8A044; --lux-error: #DC2B3D; /* Shape & motion */ --lux-radius: 16px; --lux-radius-lg: 22px; --lux-shadow-sm: 0 1px 2px rgba(20,25,40,.04), 0 1px 3px rgba(20,25,40,.06); --lux-shadow: 0 4px 14px rgba(20,25,40,.06), 0 2px 6px rgba(20,25,40,.05); --lux-shadow-lg: 0 18px 40px rgba(20,25,40,.10), 0 6px 14px rgba(20,25,40,.06); --lux-ease: cubic-bezier(.4, 0, .2, 1); } /* ---- Base ---------------------------------------------------------------- */ body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--lux-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: .1px; } /* Lift the standard neutral canvases to the premium background. Pages that set their own custom/branded body background keep it (we don't match those). */ body.bg-white, body.bg-slate-50, body.bg-gray-50, body.bg-slate-100, body.bg-gray-100 { background-color: var(--lux-bg) !important; } h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', 'Inter', sans-serif; letter-spacing: -.2px; } ::selection { background: var(--lux-gold-soft); color: var(--lux-ink); } /* ---- Premium elevation (upgrades every existing shadow utility) ---------- */ .shadow-sm { box-shadow: var(--lux-shadow-sm) !important; } .shadow, .shadow-md { box-shadow: var(--lux-shadow) !important; } .shadow-lg, .shadow-xl, .shadow-2xl { box-shadow: var(--lux-shadow-lg) !important; } /* ---- Tailwind amber accents -> refined luxury gold ----------------------- */ /* The modern screens use the amber family as their "gold" accent. Remapping it to a subtler, warmer gold instantly lifts the whole app without markup edits. */ .text-amber-500, .text-amber-600, .text-amber-700, .text-amber-800, .text-amber-900, .text-yellow-600, .text-yellow-700, .text-yellow-800 { color: var(--lux-gold-dark) !important; } .bg-amber-400, .bg-amber-500, .bg-amber-600, .bg-amber-500\/95, .bg-amber-500\/90, .hover\:bg-amber-500:hover, .hover\:bg-amber-600:hover, .bg-yellow-500, .bg-yellow-600 { background-color: var(--lux-gold) !important; color: #FffDf6 !important; } .bg-amber-50, .bg-amber-100, .bg-amber-50\/60, .bg-amber-50\/40, .bg-amber-50\/30, .bg-yellow-50, .bg-yellow-50\/60, .bg-yellow-100 { background-color: var(--lux-gold-light) !important; } .border-amber-100, .border-amber-200, .border-amber-300, .border-amber-400, .border-yellow-100, .border-yellow-200 { border-color: var(--lux-gold-soft) !important; } .hover\:border-amber-400:hover, .focus\:border-amber-500:focus { border-color: var(--lux-gold) !important; } .ring-amber-500, .focus\:ring-amber-500:focus { --tw-ring-color: var(--lux-gold) !important; } /* Gold gradients used across cards / primary CTAs. */ .gold-gradient, .bg-gradient-to-r.from-amber-400, .bg-gradient-to-r.from-amber-500, .bg-gradient-to-br.from-amber-400, .bg-gradient-to-br.from-amber-500 { background-image: linear-gradient(135deg, var(--lux-gold) 0%, var(--lux-gold-dark) 100%) !important; color: #FffDf6 !important; } .text-gold-gradient { background: linear-gradient(135deg, var(--lux-gold) 0%, var(--lux-gold-dark) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---- Cards: gentle radius + hairline + smooth hover ---------------------- */ .bg-white.rounded-2xl, .bg-white.rounded-3xl, .bg-white.rounded-xl, .rounded-2xl.border, .rounded-3xl.border { border-color: var(--lux-line); transition: box-shadow .25s var(--lux-ease), transform .25s var(--lux-ease); } /* ---- Forms: consistent premium focus ------------------------------------- */ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--lux-gold) !important; box-shadow: 0 0 0 3px rgba(200,160,68,.18) !important; } /* ---- Accessible focus ring for keyboard users ---------------------------- */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--lux-gold); outline-offset: 2px; border-radius: 6px; } /* ---- Tables: subtle hover + calm header ---------------------------------- */ table tbody tr { transition: background-color .18s var(--lux-ease); } table tbody tr:hover { background-color: rgba(200,160,68,.05); } /* ---- Thin, unobtrusive scrollbars ---------------------------------------- */ * { scrollbar-width: thin; scrollbar-color: #D7DAE1 transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: #D2D6DE; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: #BFC4CE; background-clip: content-box; } /* ============================================================================ Bootstrap 5 (legacy screens) — same luxury system on semantic components ========================================================================== */ .btn-primary { --bs-btn-bg: var(--lux-gold); --bs-btn-border-color: var(--lux-gold); --bs-btn-hover-bg: var(--lux-gold-dark); --bs-btn-hover-border-color: var(--lux-gold-dark); --bs-btn-active-bg: var(--lux-gold-dark); --bs-btn-active-border-color: var(--lux-gold-dark); --bs-btn-disabled-bg: var(--lux-gold); --bs-btn-disabled-border-color: var(--lux-gold); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; } .btn-outline-primary { --bs-btn-color: var(--lux-gold-dark); --bs-btn-border-color: var(--lux-gold); --bs-btn-hover-bg: var(--lux-gold); --bs-btn-hover-border-color: var(--lux-gold); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--lux-gold-dark); --bs-btn-active-border-color: var(--lux-gold-dark); } .text-primary { color: var(--lux-gold-dark) !important; } .bg-primary { background-color: var(--lux-gold) !important; } .border-primary { border-color: var(--lux-gold) !important; } .link-primary, a.text-primary { color: var(--lux-gold-dark) !important; } .badge.bg-warning, .badge.text-bg-warning { background-color: var(--lux-gold) !important; color: #fff !important; } .card { border: 1px solid var(--lux-line); border-radius: var(--lux-radius); box-shadow: var(--lux-shadow-sm); } .table { --bs-table-hover-bg: rgba(200,160,68,.06); } .table > :not(caption) > * > * { padding: .85rem 1rem; } .form-control, .form-select { border-radius: 10px; border-color: #E2E5EC; } .form-control:focus, .form-select:focus { border-color: var(--lux-gold); box-shadow: 0 0 0 3px rgba(200,160,68,.18); } .nav-pills .nav-link.active { background-color: var(--lux-gold); } .page-link { color: var(--lux-gold-dark); } .page-item.active .page-link { background-color: var(--lux-gold); border-color: var(--lux-gold); } .progress-bar { background-color: var(--lux-gold); } .form-check-input:checked { background-color: var(--lux-gold); border-color: var(--lux-gold); } /* ---- Respect reduced-motion preferences ---------------------------------- */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }