/* ============================================================================ kd-pn-cats.css · Peak Network storefront — categories (row OR tabs) ---------------------------------------------------------------------------- Two layouts coexist in the markup; CSS shows one based on [data-pn-cats-layout] on , which kd-pn-config.js stamps pre-paint from KD_PN_CONFIG.cats.layout. 'row' — flat 3-icon row directly under the hero (default). Each tile is the top-level category with its icon, name, product count. 'tabs' — fs.com-inspired vertical tab rail + 3x2 subcategory tile grid. Tab state lives in ?tab= URL param (set pre-paint by the inline reader, swapped reload-free by the page tail). Theme-aware via the kd-* core tokens. Mobile breakpoint collapses the tabs layout into a horizontal scroller. ============================================================================ */ /* ===== Section padding override ========================================= .kd-chapter ships with generous vertical padding (~56–96px). The categories row is meant to sit RIGHT under the hero — small top padding, normal bottom. */ .kd-pn-cats { padding-block: clamp(16px, 2.5vw, 32px) clamp(32px, 4vw, 56px); /* Drop the inherited .kd-chapter border-bottom so this section flows seamlessly into the hover-driven featured-products grid below. */ border-bottom: 0; } /* ===== Visibility gate driven by [data-pn-cats-layout] ================== */ .kd-pn-cats__row, .kd-pn-cats__grid { display: none; } [data-pn-cats-layout="row"] .kd-pn-cats__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--kd-border); border: 1px solid var(--kd-border); } [data-pn-cats-layout="tabs"] .kd-pn-cats__grid { display: grid; grid-template-columns: 220px 1fr; gap: clamp(16px, 2vw, 32px); align-items: start; } /* ===== Row layout (default) ============================================ A compact horizontal tab-strip — icon left, name + count stacked tight on the right. Borrows the kd-pn-cats__tabs visual language so the row reads as "the tabs, but laid horizontally" rather than as big tiles. */ .kd-pn-cats__row-tile { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--kd-bg); color: inherit; text-decoration: none; transition: background var(--kd-dur) var(--kd-ease); border-left: 2px solid transparent; } .kd-pn-cats__row-tile:hover { background: var(--kd-bg-alt); border-left-color: var(--kd-fg); } .kd-pn-cats__row-tile svg { flex-shrink: 0; color: var(--kd-fg-muted); transition: color var(--kd-dur) var(--kd-ease); } .kd-pn-cats__row-tile:hover svg { color: var(--kd-fg); } /* Per-category accent, opt-in from the admin (catalog's Category.accent_colour). --kd-cat-accent is set inline on the tile by the backend and only ever to `var(--)` -- catalog/accents.py owns that mapping, so it is not restated per site. Behind its own modifier rather than folded into the rules above with a fallback: a tile without an accent must keep the transparent left edge and the muted icon it already had, exactly. Both hover states are restated because the two hover rules above set the same two properties and sit earlier in the file. */ .kd-pn-cats__row-tile--accent { border-left-color: var(--kd-cat-accent); } .kd-pn-cats__row-tile--accent:hover { border-left-color: var(--kd-cat-accent); } .kd-pn-cats__row-tile--accent svg, .kd-pn-cats__row-tile--accent:hover svg { color: var(--kd-cat-accent); } /* Two-line label: stencil name (small caps) on top, mono count below. */ .kd-pn-cats__row-tile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .kd-pn-cats__row-name { font-family: var(--kd-font-mono); font-size: 12px; letter-spacing: var(--kd-track-mono); text-transform: uppercase; color: var(--kd-fg); line-height: 1.2; } .kd-pn-cats__row-meta { font-family: var(--kd-font-mono); font-size: 10px; letter-spacing: var(--kd-track-mono); text-transform: uppercase; color: var(--kd-fg-muted); } /* ===== Tabs layout ===================================================== */ .kd-pn-cats__tabs { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--kd-border); background: var(--kd-bg-alt); padding: 4px; } .kd-pn-cats__tabs a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: var(--kd-fg-soft); text-decoration: none; font-family: var(--kd-font-mono); font-size: 12px; letter-spacing: var(--kd-track-mono); text-transform: uppercase; border-left: 2px solid transparent; transition: background var(--kd-dur) var(--kd-ease), color var(--kd-dur) var(--kd-ease); } .kd-pn-cats__tabs a svg { flex-shrink: 0; color: var(--kd-fg-muted); } .kd-pn-cats__tabs a:hover { background: var(--kd-bg); color: var(--kd-fg); } .kd-pn-cats__tabs a:hover svg { color: var(--kd-fg); } [data-pn-tab="datacenter"] .kd-pn-cats__tabs a[data-pn-tab-btn="datacenter"], [data-pn-tab="networking"] .kd-pn-cats__tabs a[data-pn-tab-btn="networking"], [data-pn-tab="accessories"] .kd-pn-cats__tabs a[data-pn-tab-btn="accessories"] { background: var(--kd-bg); color: var(--kd-fg); border-left-color: var(--kd-fg); } [data-pn-tab="datacenter"] .kd-pn-cats__tabs a[data-pn-tab-btn="datacenter"] svg, [data-pn-tab="networking"] .kd-pn-cats__tabs a[data-pn-tab-btn="networking"] svg, [data-pn-tab="accessories"] .kd-pn-cats__tabs a[data-pn-tab-btn="accessories"] svg { color: var(--kd-fg); } .kd-pn-cats__panel { position: relative; } .kd-pn-cats__group { display: none; } [data-pn-cats-layout="tabs"][data-pn-tab="datacenter"] .kd-pn-cats__group[data-pn-tab-id="datacenter"], [data-pn-cats-layout="tabs"][data-pn-tab="networking"] .kd-pn-cats__group[data-pn-tab-id="networking"], [data-pn-cats-layout="tabs"][data-pn-tab="accessories"] .kd-pn-cats__group[data-pn-tab-id="accessories"] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--kd-border); border: 1px solid var(--kd-border); } .kd-pn-cats__tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: clamp(20px, 2.4vw, 32px) 16px; background: var(--kd-bg); color: inherit; text-decoration: none; transition: background var(--kd-dur) var(--kd-ease); position: relative; } .kd-pn-cats__tile:hover { background: var(--kd-bg-alt); } .kd-pn-cats__tile svg { color: var(--kd-fg-muted); transition: color var(--kd-dur) var(--kd-ease), transform var(--kd-dur) var(--kd-ease); } .kd-pn-cats__tile:hover svg { color: var(--kd-fg); transform: translateY(-2px); } .kd-pn-cats__tile-name { font-size: 14px; font-weight: var(--kd-w-semibold); color: var(--kd-fg); letter-spacing: -0.005em; } .kd-pn-cats__tile-meta { font-family: var(--kd-font-mono); font-size: 10px; letter-spacing: var(--kd-track-mono); text-transform: uppercase; color: var(--kd-fg-muted); } .kd-pn-cats__tile-meta::after { content: ' products'; } /* ===== Featured-products group switcher ================================ ONE GROUP VISIBLE, marked with .is-active. The design source keyed this off a [data-pn-feat=""] attribute matched by three hardcoded selectors -- datacenter, networking, accessories -- because that mock had exactly those three categories written into its HTML. Here the categories come from the database and a tenant can add, rename or remove one, so a rule that names slugs would silently show nothing for any category the stylesheet had not been told about. A class the server sets on the first group, and the script moves, works for any number of them. The server renders .is-active on the first group, so the correct one is visible before any script runs. */ .kd-pn-feat__group { display: none; } .kd-pn-feat__group.is-active { display: block; } /* Tabs for that switcher. The mock swapped groups on HOVER of the category row above, which is unreachable on a touch screen and invisible to a keyboard; these are real buttons instead. */ .kd-pn-feat__tabs { display: flex; flex-wrap: wrap; gap: var(--kd-s-2); margin-bottom: var(--kd-s-5); } .kd-pn-feat__tab { padding: 6px 14px; font-family: var(--kd-font-mono); font-size: var(--kd-text-0); color: var(--kd-fg-muted); background: transparent; border: 1px solid var(--kd-border); border-radius: var(--kd-radius); cursor: pointer; transition: color var(--kd-dur-fast) var(--kd-ease), border-color var(--kd-dur-fast) var(--kd-ease), background var(--kd-dur-fast) var(--kd-ease); } .kd-pn-feat__tab:hover { color: var(--kd-fg); border-color: var(--kd-fg-muted); } .kd-pn-feat__tab.is-active { color: var(--kd-fg); background: var(--kd-bg-alt); border-color: var(--kd-fg-muted); } .kd-pn-feat__tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--kd-accent-ring); } /* ===== Mobile ========================================================== */ @media (max-width: 720px) { [data-pn-cats-layout="row"] .kd-pn-cats__row { grid-template-columns: 1fr; } [data-pn-cats-layout="tabs"] .kd-pn-cats__grid { grid-template-columns: 1fr; gap: 16px; } .kd-pn-cats__tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; } .kd-pn-cats__tabs::-webkit-scrollbar { display: none; } .kd-pn-cats__tabs a { flex-shrink: 0; border-left: 0; border-bottom: 2px solid transparent; } [data-pn-tab="datacenter"] .kd-pn-cats__tabs a[data-pn-tab-btn="datacenter"], [data-pn-tab="networking"] .kd-pn-cats__tabs a[data-pn-tab-btn="networking"], [data-pn-tab="accessories"] .kd-pn-cats__tabs a[data-pn-tab-btn="accessories"] { border-left-color: transparent; border-bottom-color: var(--kd-fg); } [data-pn-cats-layout="tabs"][data-pn-tab="datacenter"] .kd-pn-cats__group[data-pn-tab-id="datacenter"], [data-pn-cats-layout="tabs"][data-pn-tab="networking"] .kd-pn-cats__group[data-pn-tab-id="networking"], [data-pn-cats-layout="tabs"][data-pn-tab="accessories"] .kd-pn-cats__group[data-pn-tab-id="accessories"] { grid-template-columns: repeat(2, 1fr); } .kd-pn-cats__tile { padding: 16px 12px; } }