/* ============================================================================ 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); } /* 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; } }