/* ========================================================================= PartsLogic — design tokens. SINGLE SOURCE OF TRUTH. Import this first, before any other stylesheet: PartsLogic is a division of BPIPL and reads as the SAME family: same brand RED, same type, same light theme, same self-hosted fonts. It differentiates from the BPIPL brochure site through LAYOUT and DENSITY (a filterable parts catalogue, part numbers as the hero datum) — NOT through a different palette. Every neutral and the accent are inherited verbatim from BPIPL V9 (site/styles.css). The only additions are functional catalogue colours (success / warning badges) a brochure site never needed. Rationale + component recipes: research/BRAND.md ========================================================================= */ /* ----------------------------------------------------------------- fonts Self-hosted, byte-identical to the files BPIPL V9 ships. No external requests, no Google Fonts link, nothing to block first paint. */ @font-face { font-family: "PL Narrow"; src: url("fonts/nsn-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "PL Narrow"; src: url("fonts/nsn-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "PL Sans"; src: url("fonts/ns-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "PL Sans"; src: url("fonts/ns-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "PL Mono"; src: url("fonts/hack-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* ------------------------------------------------------------ type */ --pl-display: "PL Narrow", "Liberation Sans Narrow", "Helvetica Neue", Helvetica, sans-serif; --pl-sans: "PL Sans", "Nimbus Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --pl-mono: "PL Mono", "DejaVu Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* ============================================================ ACCENT GREEN — the PartsLogic.in brand colour, from the new logo (2026-07-17). Everything on the site references the ROLE tokens (--pl-accent*), never a raw hex. The bright signature green (#0FA03B, the ".in" glyph) is only ~3.4:1 on white — fine for large logo type and decorative marks, but it FAILS AA for UI text or as a fill behind white button text. So the workhorse tokens use a deeper forest green, and the bright green is a separate DECORATIVE token (--pl-accent-bright) used only where nothing sits on it. Roles: --pl-accent CTA fills (white text), links-on-hover, primary --pl-accent-deep link / active-filter / error TEXT, focus ring --pl-accent-lift CTA hover (goes DEEPER — brightening green kills white-text contrast, so hover darkens) --pl-accent-bright DECORATIVE only — eyebrow tick, card accent cap, small pops. NEVER behind white text. --pl-accent-tint selected-filter / RFQ-badge fill, focus glow --pl-accent-glow R,G,B triple feeding the CTA drop-shadow Contrast (measured, WCAG 2.1): --pl-accent #177A39 white-on 5.41 AA · on-white 5.41 AA --pl-accent-deep #0B5F28 7.83 AAA both ways --pl-accent-lift #106A2E 6.72 AA both ways --pl-accent-bright #0FA03B 3.44 (large/decorative only) */ --pl-accent: #177A39; --pl-accent-deep: #0B5F28; --pl-accent-lift: #106A2E; --pl-accent-bright: #0FA03B; --pl-accent-tint: #E9F6EE; --pl-accent-glow: 23, 122, 57; /* logo wordmark colours — the tricolor "PartsLogic.in" (baked into the SVG, exposed here for any HTML that needs to match: e.g. a text fallback). */ --pl-logo-blue: #015BCD; /* "Parts" */ --pl-logo-ink: #12171B; /* "Logic" (≈ --pl-text) */ --pl-logo-green: #0FA03B; /* ".in" (= --pl-accent-bright) */ /* parent-logo aliases — BPIPL red, used only in the quiet footer endorsement */ --bpi-red: #E30016; --bpi-red-deep: #c30012; /* -------------------------------------------- neutrals — inherited 1:1 Copied verbatim from BPIPL V9. Do not re-tune; they are the strongest signal that the two sites are family. */ --pl-ink: #f4f6f9; /* page background — cool off-white */ --pl-field: #e9eef4; /* recessed panel / image well / placeholder */ --pl-surface: #ffffff; /* card face */ --pl-surface-2: #e8ecf3; /* cool-grey panel step (card gradient top) */ --pl-line: rgba(16, 21, 28, 0.12); --pl-line-soft: rgba(16, 21, 28, 0.07); --pl-text: #10151c; /* cool near-black — headings, part numbers */ --pl-muted: #4f5d69; /* body / secondary — 6.8:1 on white, AA */ --pl-dim: #74818e; /* micro-labels ONLY — 4.0:1, NOT AA for body */ --pl-steel: #7a8798; /* placeholder wordmark, inert marks */ --pl-land: #b9c1cc; /* dot-grid, hairline texture */ /* ------------------------------------------------- semantic — small badges Status colours a filterable catalogue needs. Small surfaces only (badges, status text); never large fills. NOTE: the brand accent is now green, so "IN STOCK" uses an EMERALD (#0B7A4B, bluer/cooler than the forest brand green #177A39) plus its dot + tinted pill — the two greens stay distinguishable, and stock badges are rare on this RFQ-only catalogue anyway. Do not use --pl-accent for stock. */ --pl-success: #0B7A4B; /* IN STOCK — 5.4:1 on white, AA */ --pl-success-tint: #E6F4ED; --pl-warn: #9A5B00; /* LIMITED / MOQ — 5.4:1 on white, AA. Deep amber for badge TEXT. NOT a brand yellow — the dead PartsLogic yellow #EAB308 stays dead. */ --pl-warn-tint: #FBF1E3; --pl-danger: var(--bpi-red-deep); /* errors are RED (#c30012, 6.3:1 AA) — never green; green is the brand accent */ --pl-danger-tint: #FCE9EA; /* ---------------------------------------------------------- type scale */ --pl-fs-micro: 0.62rem; /* mono, letterspaced, uppercase */ --pl-fs-2xs: 0.68rem; --pl-fs-xs: 0.74rem; --pl-fs-sm: 0.875rem; --pl-fs-base: 1rem; --pl-fs-lg: 1.125rem; --pl-fs-xl: clamp(1.25rem, 1.6vw, 1.45rem); --pl-fs-2xl: clamp(1.6rem, 2.6vw, 2.1rem); --pl-fs-3xl: clamp(1.9rem, 3.4vw, 2.9rem); /* section titles */ --pl-fs-hero: clamp(2.4rem, 5.2vw, 4.2rem); /* h1 only */ --pl-track-mono: 0.14em; /* mono label letter-spacing */ --pl-track-tight: -0.01em; /* display headings */ /* -------------------------------------------------------------- space */ --pl-s1: 4px; --pl-s2: 8px; --pl-s3: 12px; --pl-s4: 16px; --pl-s5: 22px; --pl-s6: 28px; --pl-s7: 40px; --pl-s8: 56px; --pl-s9: 80px; --pl-band: clamp(64px, 8vw, 108px); /* vertical section rhythm */ --pl-gut: clamp(20px, 5vw, 72px); /* page gutter */ --pl-maxw: 1320px; /* ----------------------------------------------------------- geometry BPIPL V9 is SHARP: its whole stylesheet has no border-radius on a card, button, chip or input. PartsLogic keeps that — square corners read as instrument/technical, not generic rounded e-commerce. The ONLY rounded thing is the app tile / favicon, which inherits the BPIPL mark's own rounded-square container. */ --pl-radius: 0; --pl-radius-tile: 22%; /* app tile / favicon only */ --pl-border: 1px solid var(--pl-line); --pl-border-soft: 1px solid var(--pl-line-soft); --pl-shadow-sm: 0 1px 2px rgba(16, 21, 28, 0.05); --pl-shadow-card: 0 1px 2px rgba(16, 21, 28, 0.05), 0 10px 30px -20px rgba(16, 21, 28, 0.28); --pl-shadow-card-hover: 0 2px 4px rgba(16, 21, 28, 0.06), 0 22px 46px -24px rgba(16, 21, 28, 0.4); /* CTA glow — follows the active accent via --pl-accent-glow (no hard-coded hue) */ --pl-shadow-accent: 0 10px 34px -16px rgba(var(--pl-accent-glow), 0.55); --pl-shadow-accent-hover: 0 16px 40px -16px rgba(var(--pl-accent-glow), 0.7); /* -------------------------------------------------------------- motion */ --pl-ease: cubic-bezier(0.2, 0.7, 0.3, 1); --pl-t-fast: 0.25s; --pl-t-base: 0.35s; } /* Breakpoints (match V9 — media queries can't read custom properties): 1100px grid drops a column / nav condenses 768px tablet 700px mobile — collapse filters, endorsement text drops 420px small mobile — grid stays 2-up */ @media (prefers-reduced-motion: reduce) { :root { --pl-t-fast: 0.01ms; --pl-t-base: 0.01ms; } }