/* ==========================================================================
DESIGN SYSTEM — Phase 2
==========================================================================
Purpose: retheme the existing MarketPro token system (main.css :root)
toward a modern / premium / minimal look, WITHOUT touching main.css.
This file must be loaded AFTER main.css so its :root values win the
cascade. It only overrides variables main.css already declares, plus
adds a small set of new tokens (radius / shadow / transition / states)
that main.css does not define.
Wiring (done in Phase 3, not here): add
in resources/views/layouts/app.blade.php, right after main.css.
========================================================================== */
/* Premium heading typeface — Inter (body) is already premium-grade, kept as-is */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@100..900&display=swap");
:root {
/* ---- Typography: swap decorative fonts for a refined, confident pair ---- */
--heading-font: "Plus Jakarta Sans", sans-serif; /* was Quicksand — rounded/cute, not premium */
--heading-font-two: "Plus Jakarta Sans", sans-serif; /* was Exo — keep one heading family only */
--body-font: "Inter", sans-serif; /* unchanged — already the right choice */
/* ---- Primary color: deep navy, extracted from the Sirclo logo background ---- */
--main-h: 214;
--main-s: 76%;
--main-l: 18%;
/* ---- Secondary color: brighter blue, extracted from the logo's circle accents ----
Same hue family as primary (monochrome-blue brand) but lighter/brighter so it
reads distinctly when used together (badges, secondary CTAs, commission tags). */
--main-two-h: 211;
--main-two-s: 60%;
--main-two-l: 43%;
/* ---- New tokens: radius scale (main.css hardcodes radius per-rule; centralize it) ---- */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-pill: 999px;
/* ---- New tokens: soft, diffused shadow scale (premium = low-contrast shadows) ---- */
--shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
--shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
--shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.12);
--shadow-card-hover: 0 16px 32px rgba(15, 23, 42, 0.10);
/* ---- New tokens: motion — consistent, subtle easing across all hover/transition effects ---- */
--transition-fast: 150ms ease;
--transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
/* ---- New token: a slightly wider, more spacious container for premium breathing room ---- */
--container-premium-max: 1280px;
}
/* ROOT CAUSE FIX: main.css ships a "Home Two" demo color variant, activated
because has class="color-two" (layouts/app.blade.php). That variant
defines `.color-two:root { --main-h: 24; ... }` (orange) at main.css:9218.
A compound selector (.color-two + :root) has HIGHER specificity than a
plain `:root`, so it silently won over the plain :root override above,
regardless of file load order — only --main-two escaped it because the
demo variant never touches that variable, which is why the secondary
accent updated correctly while the primary stayed stuck on orange.
Neutralize it by matching the same selector with our value. */
.color-two:root {
--main-h: 214;
--main-s: 76%;
--main-l: 18%;
}
/* ---- Accent color: emerald, used sparingly for variety against the blue-dominant palette ----
main.css already ships a full --success-* scale (used by existing commission
badges, e.g. akun/koleksi.blade.php) — retint it to a true emerald instead of
its default muted green so it reads as a deliberate accent, not "just green". */
:root {
--success-50: #ECFDF5;
--success-100: #D1FAE5;
--success-200: #A7F3D0;
--success-300: #6EE7B7;
--success-400: #34D399;
--success-500: #10B981;
--success-600: #059669;
--success-700: #047857;
--success-800: #065F46;
--success-900: #064E3B;
}
/* ==========================================================================
SYSTEM-LEVEL STATE PATTERNS
(generic, reusable across any page — page-specific usage happens in
Phase 3/4 when components/pages are actually redesigned)
========================================================================== */
/* ---- Loading state: skeleton shimmer (replaces bare spinners for a premium feel) ---- */
.skeleton {
position: relative;
overflow: hidden;
background-color: var(--neutral-50, #ECF1F9);
border-radius: var(--radius-md);
}
.skeleton::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background-image: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0.55) 50%,
rgba(255, 255, 255, 0) 100%
);
animation: skeleton-shimmer 1.6s infinite;
}
@keyframes skeleton-shimmer {
100% {
transform: translateX(100%);
}
}
/* ---- Empty state: icon + heading + subtext + optional CTA ---- */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--size-16, 1rem);
padding: var(--size-64, 4rem) var(--size-24, 1.5rem);
}
.empty-state__icon {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-pill);
background-color: var(--main-50);
color: var(--main-600);
font-size: var(--font-3xl, 1.875rem);
}
.empty-state__title {
font-family: var(--heading-font);
font-weight: 700;
font-size: var(--font-xl, 1.25rem);
color: var(--heading-color);
}
.empty-state__text {
color: var(--body-color);
font-size: var(--font-sm, 0.875rem);
max-width: 32rem;
}
/* ---- Error state: inline (form field) vs banner (page-level) ---- */
.field-error {
display: block;
margin-top: var(--size-4, 0.25rem);
font-size: var(--font-xs, 0.75rem);
color: var(--danger-600);
}
.error-banner {
display: flex;
align-items: flex-start;
gap: var(--size-12, 0.75rem);
padding: var(--size-16, 1rem) var(--size-20, 1.25rem);
border-radius: var(--radius-md);
background-color: var(--danger-50);
border: 1px solid var(--danger-100);
color: var(--danger-700);
}
/* ==========================================================================
GLOBAL COMPONENT RETINT
==========================================================================
main.css already wires its color classes through the --main / --main-two
HSL variables (they picked up the Phase 2 retint automatically). What it
DOESN'T do is use variables for radius/shadow/transition — those are
hardcoded per-rule. This section centralizes just those, so every button,
card, modal, form field, breadcrumb and pagination control gets the new
premium radius/shadow/motion system without editing every Blade view.
========================================================================== */
/* ---- Buttons ---- */
.btn {
border-radius: var(--radius-md);
transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}
.btn:hover {
transform: translateY(-1px);
}
.btn-sm {
border-radius: var(--radius-sm);
}
/* ---- Product card ---- */
.product-card {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.product-card:hover {
box-shadow: var(--shadow-card-hover);
transform: translateY(-4px);
}
.product-card__badge {
border-radius: var(--radius-sm) 0 var(--radius-sm) 0;
}
.product-card__thumb {
overflow: hidden;
}
.product-card__thumb img {
transition: transform var(--transition-slow);
}
.product-card:hover .product-card__thumb img {
transform: scale(1.04);
}
/* Vertical product card at 2-columns-per-row on mobile (<768px): tighten
padding/type so price, commission badge, and the cart button all still
fit comfortably in a narrower column instead of overflowing/wrapping badly. */
@media (max-width: 767px) {
.product-card:not(.style-two) {
padding: 10px !important;
}
.product-card:not(.style-two) .product-card__content {
margin-top: 10px !important;
}
.product-card:not(.style-two) .title {
font-size: 0.875rem !important;
margin-block: 8px !important;
}
.product-card:not(.style-two) .product-card__price span {
font-size: 0.75rem !important;
}
.product-card:not(.style-two) .product-card__cart {
padding-block: 8px !important;
padding-inline: 12px !important;
font-size: 0.75rem !important;
white-space: nowrap;
}
}
/* ---- Forms ----
.form-control/.form-select (Bootstrap) and .common-input (the theme's own
text-input class) are frequently used side-by-side in the same row (e.g.
a bank