/* ============================================================ BUILD CORE SUPPLY — Design System Foundations Brand: CORE · Owner: Uday Deshmukh · Sinnar / Nashik, Maharashtra, India Steel & Building Materials wholesaler — industrial, trustworthy, premium. ------------------------------------------------------------ Fonts: Roboto Slab (display/headings) + Roboto (body/UI) Both are Google Fonts — load via: ============================================================ */ :root { /* ---------- BRAND : Gold / Bronze (sampled from the CORE logo) ---------- */ --gold: #9C895B; /* primary brand bronze (logo gold) */ --gold-light: #C4AE7E; /* hover / highlights / on-dark accents */ --gold-pale: #E7DDC4; /* tints, soft fills */ --gold-dark: #6E5F3E; /* pressed / deep accents */ --gold-deep: #4A3F28; /* darkest bronze */ /* Logo gradient (gold -> near-black), used on the C mark & accent rules */ --grad-brand: linear-gradient(160deg, #C4AE7E 0%, #9C895B 38%, #2A2418 72%, #050008 100%); --grad-gold: linear-gradient(90deg, #C4AE7E 0%, #9C895B 100%); /* ---------- INK : near-black industrial darks ---------- */ --ink: #0C0C0E; /* page-level black (logo end #050008) */ --charcoal: #18181B; /* primary dark surface (header/footer) */ --steel-900: #232327; /* raised dark surface / cards on dark */ --steel-800: #34343A; /* borders on dark, dark dividers */ --steel-700: #4A4A52; /* muted text on dark */ /* ---------- NEUTRALS : warm concrete / steel greys ---------- */ --white: #FFFFFF; --cement-50: #F6F4EF; /* warm off-white page bg (cement) */ --cement-100: #ECE8E0; /* section fill */ --cement-200: #DDD8CD; /* hairline / card border */ --cement-300: #C5BFB2; /* disabled / muted border */ --grey-500: #8A877E; /* secondary text */ --grey-600: #6B685F; /* body on light (muted) */ --grey-700: #4B4944; /* strong body text */ --grey-900: #1F1E1B; /* headings on light */ /* ---------- SEMANTIC (industrial, muted) ---------- */ --success: #3E7D4F; /* in-stock / confirmed */ --success-bg: #E6F0E8; --warning: #C08A2E; /* low stock / get latest price */ --warning-bg: #F7ECD6; --danger: #B23B2E; /* out of stock / error */ --danger-bg: #F6E2DF; --info: #3A5E7A; /* note / info */ --info-bg: #E2EBF1; /* ---------- SURFACES / SEMANTIC TOKENS ---------- */ --bg: var(--cement-50); --bg-section: var(--cement-100); --bg-dark: var(--charcoal); --surface: var(--white); --fg: var(--grey-900); --fg-muted: var(--grey-600); --fg-on-dark: #EDEAE3; --fg-on-dark-mut:#A8A49A; --border: var(--cement-200); --border-strong: var(--cement-300); --accent: var(--gold); --accent-ink: var(--charcoal); /* text/icon on a gold fill */ /* ---------- TYPOGRAPHY ---------- */ --font-display: 'Roboto Slab', Georgia, 'Times New Roman', serif; --font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif; /* type scale (1.250 major-third-ish, tuned for industrial display) */ --t-display: clamp(2.75rem, 6vw, 4.5rem); /* hero H1 */ --t-h1: clamp(2.25rem, 4.4vw, 3.25rem); --t-h2: clamp(1.75rem, 3vw, 2.5rem); --t-h3: 1.5rem; --t-h4: 1.125rem; --t-lead: 1.25rem; --t-body: 1rem; --t-small: 0.875rem; --t-eyebrow: 0.8125rem; /* uppercase label e.g. "STEEL EXPERTS" */ --t-tiny: 0.75rem; --lh-tight: 1.1; --lh-snug: 1.25; --lh-body: 1.6; /* ---------- SPACING (8px base) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* ---------- RADII (small, industrial — not pill-y) ---------- */ --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 16px; --r-pill: 999px; /* ---------- BORDERS ---------- */ --bw: 1px; --bw-accent: 3px; /* gold left/bottom accent bars */ /* ---------- SHADOWS (cool grey, restrained) ---------- */ --shadow-xs: 0 1px 2px rgba(12,12,14,.06); --shadow-sm: 0 2px 6px rgba(12,12,14,.08); --shadow-md: 0 8px 24px rgba(12,12,14,.10); --shadow-lg: 0 18px 48px rgba(12,12,14,.16); --shadow-gold: 0 10px 28px rgba(156,137,91,.28); /* ---------- MOTION ---------- */ --ease: cubic-bezier(.22,.61,.36,1); --dur-fast: .15s; --dur: .28s; --dur-slow: .5s; --container: 1200px; } /* ============================================================ SEMANTIC ELEMENT STYLES — apply directly or copy patterns ============================================================ */ .ds-display, h1.display { font-family: var(--font-display); font-weight: 800; font-size: var(--t-display); line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--fg); } h1, .h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h1); line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--fg); } h2, .h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h2); line-height: var(--lh-snug); color: var(--fg); } h3, .h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h3); line-height: var(--lh-snug); color: var(--fg); } h4, .h4 { font-family: var(--font-body); font-weight: 700; font-size: var(--t-h4); line-height: var(--lh-snug); color: var(--fg); } p, .body { font-family: var(--font-body); font-weight: 400; font-size: var(--t-body); line-height: var(--lh-body); color: var(--fg-muted); } .lead { font-size: var(--t-lead); line-height: 1.5; color: var(--grey-700); } .small { font-size: var(--t-small); } /* Eyebrow / kicker label — e.g. "STEEL EXPERTS", "BUILD YOUR DREAM" */ .eyebrow { font-family: var(--font-body); font-weight: 700; font-size: var(--t-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: var(--sp-2); } .eyebrow::before { /* short gold tick */ content: ""; width: 28px; height: 2px; background: var(--gold); display: inline-block; } /* Price token — ₹ pricing used across the catalog */ .price { font-family: var(--font-display); font-weight: 700; color: var(--grey-900); } .price .cur { color: var(--gold); }