/* ============================================================================ kd-pn-shop.css · Peak Network webshop mock — chrome + product UI ---------------------------------------------------------------------------- Loaded only on /peaknetwork/* mock pages (data-theme="dark" forced on so kd-* tokens already give us the dark palette). Adds the shop-specific surfaces: - .kd-pn-header sticky top bar with stencil wordmark + nav + tools - .kd-pn-footer site footer with sections + copyright - .kd-pn-crumb breadcrumb mono caps - .kd-pn-cat big category tiles for the storefront grid - .kd-pn-prod compact product card used in featured + listing grids - .kd-pn-listing sidebar + grid layout for the catalogue page - .kd-pn-facet filter facet group inside the sidebar - .kd-pn-pager pagination row - .kd-pn-detail product detail two-column layout + specs dl - .kd-pn-stock stock state pill (in / pre-order / out) Reuses kd-card, kd-btn, kd-grid-N, kd-mono, kd-soft, kd-h4 wherever possible — these add new pieces, never duplicate the base primitives. ============================================================================ */ /* ===== Header / nav ===== */ .kd-pn-header { position: sticky; top: 0; z-index: 50; /* Theme-aware frosted background — uses --kd-bg-rgb so light / dark / gray themes all render a sensible matching tint. */ background: rgba(var(--kd-bg-rgb), 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--kd-border); } .kd-pn-header__inner { display: flex; align-items: center; gap: clamp(12px, 2vw, 32px); max-width: 1200px; margin: 0 auto; padding: 14px clamp(16px, 3vw, 32px); } /* The brand link reuses .kd-logo (kHouse-shared icon mark) but swaps the text to military stencil so it matches the rest of the Peak Network typography. Scoped to the header brand so the kHouse logo elsewhere stays in its native Inter-bold treatment. */ .kd-pn-header__brand { text-decoration: none; white-space: nowrap; } .kd-pn-header__brand .kd-logo__text { font-family: 'Allerta Stencil', var(--kd-font-mono); font-size: clamp(16px, 1.7vw, 22px); /* Allerta Stencil only ships at weight 400; bumping to 700 lets browsers synthesise a chunkier bold that matches the military aesthetic. */ font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; } .kd-pn-header__nav { display: flex; gap: clamp(8px, 1.6vw, 24px); margin-left: auto; flex-wrap: wrap; } .kd-pn-header__nav a { font-family: 'Allerta Stencil', var(--kd-font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kd-fg-soft); text-decoration: none; padding: 6px 4px; transition: color var(--kd-dur) var(--kd-ease); } .kd-pn-header__nav a:hover, .kd-pn-header__nav a.is-active { color: var(--kd-fg); } .kd-pn-header__tools { display: flex; gap: 8px; align-items: center; } .kd-pn-header__tool { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--kd-border); color: var(--kd-fg-soft); text-decoration: none; font-family: var(--kd-font-mono); font-size: 11px; letter-spacing: var(--kd-track-mono); text-transform: uppercase; transition: border-color var(--kd-dur) var(--kd-ease), color var(--kd-dur) var(--kd-ease); } .kd-pn-header__tool:hover { border-color: var(--kd-border-strong); color: var(--kd-fg); } /* ===== Footer ===== */ .kd-pn-footer { background: var(--kd-bg-alt); border-top: 1px solid var(--kd-border); padding: clamp(40px, 5vw, 64px) 0; margin-top: clamp(48px, 6vw, 96px); } .kd-pn-footer__inner { max-width: 1200px; margin: 0 auto; padding-inline: clamp(16px, 3vw, 32px); display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(24px, 3vw, 48px); } /* Override the base .kd-shop__wordmark colour — that one is hard-coded cream + warm glow for the dark landing hero; in the footer it sits on var(--kd-bg-alt) which is light in light theme. */ .kd-pn-footer__brand .kd-shop__wordmark { font-size: clamp(20px, 2.4vw, 28px); color: var(--kd-fg); text-shadow: none; } .kd-pn-footer__col h4 { font-family: var(--kd-font-mono); font-size: 11px; letter-spacing: var(--kd-track-mono); text-transform: uppercase; color: var(--kd-fg-muted); margin: 0 0 12px; } .kd-pn-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .kd-pn-footer__col a { color: var(--kd-fg-soft); text-decoration: none; font-size: 14px; } .kd-pn-footer__col a:hover { color: var(--kd-fg); } .kd-pn-footer__bottom { max-width: 1200px; margin: 32px auto 0; padding: 16px clamp(16px, 3vw, 32px) 0; border-top: 1px solid var(--kd-border); display: flex; justify-content: space-between; font-family: var(--kd-font-mono); font-size: 11px; letter-spacing: var(--kd-track-mono); text-transform: uppercase; color: var(--kd-fg-muted); } .kd-pn-footer__bottom a { color: var(--kd-fg-soft); text-decoration: none; } /* ===== Container override (wider than kHouse default for product grids) ===== */ .kd-pn-shop .kd-container { max-width: 1200px; } /* The base .kd-chapter ships overflow:hidden to constrain the kHouse homepage's decorative backdrops. Peak Network shop sections don't use those, but they do let .kd-pn-prod cards translateY(-2px) on hover — which gets clipped at section edges (especially with padding-top:0 on .kd-pn-feat). Allow the lift to draw freely. */ .kd-pn-shop .kd-chapter { overflow: visible; } /* ===== Breadcrumb ===== */ .kd-pn-crumb { display: flex; gap: 8px; font-family: var(--kd-font-mono); font-size: 11px; letter-spacing: var(--kd-track-mono); text-transform: uppercase; color: var(--kd-fg-muted); margin-bottom: 24px; flex-wrap: wrap; } .kd-pn-crumb a { color: var(--kd-fg-soft); text-decoration: none; } .kd-pn-crumb a:hover { color: var(--kd-fg); } .kd-pn-crumb__sep { color: var(--kd-fg-muted); } /* ===== Category card (storefront) ===== */ .kd-pn-cat { display: flex; flex-direction: column; background: var(--kd-bg-alt); border: 1px solid var(--kd-border); padding: clamp(20px, 2.4vw, 32px); text-decoration: none; color: inherit; min-height: 200px; transition: border-color var(--kd-dur) var(--kd-ease), transform var(--kd-dur) var(--kd-ease); } .kd-pn-cat:hover { border-color: var(--kd-fg-muted); transform: translateY(-2px); } .kd-pn-cat__num { font-family: var(--kd-font-mono); font-size: 11px; letter-spacing: var(--kd-track-mono); text-transform: uppercase; color: var(--kd-fg-muted); margin-bottom: 16px; } .kd-pn-cat__title { font-family: 'Allerta Stencil', var(--kd-font-mono); font-size: clamp(20px, 2.4vw, 32px); letter-spacing: 0.06em; text-transform: uppercase; color: var(--kd-fg); margin: 0 0 8px; line-height: 1; } .kd-pn-cat__desc { color: var(--kd-fg-soft); font-size: 14px; line-height: 1.5; margin: 0 0 24px; max-width: 36ch; } .kd-pn-cat__more { margin-top: auto; font-family: var(--kd-font-mono); font-size: 11px; letter-spacing: var(--kd-track-mono); text-transform: uppercase; color: var(--kd-fg); } /* ===== Product card ===== */ .kd-pn-prod { display: flex; flex-direction: column; background: var(--kd-bg-alt); border: 1px solid var(--kd-border); text-decoration: none; color: inherit; transition: border-color var(--kd-dur) var(--kd-ease), transform var(--kd-dur) var(--kd-ease); } .kd-pn-prod:hover { border-color: var(--kd-fg-muted); transform: translateY(-2px); } .kd-pn-prod__media { aspect-ratio: 4 / 3; background: var(--kd-bg-sunken); display: grid; place-items: center; color: var(--kd-fg-muted); font-family: var(--kd-font-mono); font-size: 11px; letter-spacing: var(--kd-track-mono); text-transform: uppercase; border-bottom: 1px solid var(--kd-border); } .kd-pn-prod__body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .kd-pn-prod__brand { font-family: var(--kd-font-mono); font-size: 11px; letter-spacing: var(--kd-track-mono); text-transform: uppercase; color: var(--kd-fg-muted); } .kd-pn-prod__title { font-size: 15px; font-weight: var(--kd-w-semibold); line-height: 1.3; color: var(--kd-fg); margin: 0; } .kd-pn-prod__foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto; padding-top: 12px; } .kd-pn-prod__price { font-family: var(--kd-font-mono); font-size: 16px; font-weight: var(--kd-w-semibold); color: var(--kd-fg); } /* ===== Listing layout ===== */ .kd-pn-listing { display: grid; grid-template-columns: 260px 1fr; gap: clamp(24px, 3vw, 48px); align-items: start; } .kd-pn-listing__sidebar { position: sticky; top: 80px; align-self: start; } .kd-pn-listing__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--kd-border); margin-bottom: 24px; flex-wrap: wrap; } .kd-pn-listing__count { font-family: var(--kd-font-mono); font-size: 11px; letter-spacing: var(--kd-track-mono); text-transform: uppercase; color: var(--kd-fg-muted); } .kd-pn-listing__sort { display: flex; gap: 8px; align-items: center; } .kd-pn-listing__sort label { font-family: var(--kd-font-mono); font-size: 11px; letter-spacing: var(--kd-track-mono); text-transform: uppercase; color: var(--kd-fg-muted); } /* ===== Filter facets ===== */ .kd-pn-facets__title { font-family: 'Allerta Stencil', var(--kd-font-mono); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kd-fg); margin: 0 0 12px; } .kd-pn-facets__search { font-size: 13px; padding: 8px 10px; margin-bottom: 4px; } .kd-pn-facets__empty { margin-top: 12px; font-size: 12px; color: var(--kd-fg-muted); font-style: italic; } .kd-pn-facet { border-top: 1px solid var(--kd-border); padding: 16px 0; } .kd-pn-facet__head { font-family: var(--kd-font-mono); font-size: 11px; letter-spacing: var(--kd-track-mono); text-transform: uppercase; color: var(--kd-fg-muted); margin-bottom: 10px; } .kd-pn-facet__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .kd-pn-facet__list label { display: flex; gap: 8px; font-size: 13px; color: var(--kd-fg-soft); cursor: pointer; } .kd-pn-facet__list label:hover { color: var(--kd-fg); } .kd-pn-facet__count { color: var(--kd-fg-muted); margin-left: auto; font-family: var(--kd-font-mono); font-size: 11px; } .kd-pn-facet__clear { margin-top: 16px; font-family: var(--kd-font-mono); font-size: 11px; letter-spacing: var(--kd-track-mono); text-transform: uppercase; color: var(--kd-fg-muted); background: none; border: 0; cursor: pointer; padding: 0; } .kd-pn-facet__clear:hover { color: var(--kd-fg); } /* ===== Pagination ===== */ .kd-pn-pager { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--kd-border); font-family: var(--kd-font-mono); font-size: 12px; letter-spacing: var(--kd-track-mono); text-transform: uppercase; color: var(--kd-fg-muted); } .kd-pn-pager a { color: var(--kd-fg-soft); text-decoration: none; padding: 6px 14px; border: 1px solid var(--kd-border); } .kd-pn-pager a:hover { color: var(--kd-fg); border-color: var(--kd-border-strong); } /* ===== Product detail ===== */ .kd-pn-detail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; } .kd-pn-detail__media { aspect-ratio: 1 / 1; background: var(--kd-bg-sunken); border: 1px solid var(--kd-border); display: grid; place-items: center; color: var(--kd-fg-muted); font-family: var(--kd-font-mono); font-size: 12px; letter-spacing: var(--kd-track-mono); text-transform: uppercase; } .kd-pn-detail__brand { font-family: var(--kd-font-mono); font-size: 12px; letter-spacing: var(--kd-track-mono); text-transform: uppercase; color: var(--kd-fg-muted); margin-bottom: 8px; } .kd-pn-detail__title { font-family: 'Allerta Stencil', var(--kd-font-mono); font-size: clamp(24px, 3vw, 40px); letter-spacing: 0.04em; text-transform: uppercase; color: var(--kd-fg); margin: 0 0 16px; line-height: 1.05; } .kd-pn-detail__sku { font-family: var(--kd-font-mono); font-size: 11px; letter-spacing: var(--kd-track-mono); text-transform: uppercase; color: var(--kd-fg-muted); margin-bottom: 24px; } .kd-pn-detail__price { font-family: var(--kd-font-mono); font-size: clamp(24px, 2.6vw, 32px); font-weight: var(--kd-w-semibold); color: var(--kd-fg); margin-bottom: 8px; } .kd-pn-detail__cta-row { display: flex; gap: 12px; align-items: center; margin: 24px 0; } .kd-pn-detail__qty { width: 60px; padding: 10px; background: var(--kd-bg-alt); color: var(--kd-fg); border: 1px solid var(--kd-border); font-family: inherit; font-size: 14px; text-align: center; } .kd-pn-detail__desc { color: var(--kd-fg-soft); font-size: 14px; line-height: 1.6; margin: 16px 0; max-width: 56ch; } /* Specs dl */ .kd-pn-specs { margin-top: 32px; } .kd-pn-specs__title { font-family: 'Allerta Stencil', var(--kd-font-mono); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kd-fg); margin: 0 0 12px; } .kd-pn-specs dl { display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; margin: 0; font-size: 13px; } .kd-pn-specs dt { font-family: var(--kd-font-mono); font-size: 11px; letter-spacing: var(--kd-track-mono); text-transform: uppercase; color: var(--kd-fg-muted); padding-top: 2px; } .kd-pn-specs dd { margin: 0; color: var(--kd-fg-soft); } /* ===== Stock pill (shared by listing + detail) ===== */ .kd-pn-stock { display: inline-flex; align-items: center; gap: 6px; font-family: var(--kd-font-mono); font-size: 11px; letter-spacing: var(--kd-track-mono); text-transform: uppercase; } .kd-pn-stock::before { content: ''; width: 6px; height: 6px; border-radius: 50%; } .kd-pn-stock--in { color: rgba(140, 220, 160, 0.95); } .kd-pn-stock--in::before { background: rgba(140, 220, 160, 0.95); box-shadow: 0 0 0 4px rgba(140, 220, 160, 0.18); } .kd-pn-stock--pre { color: rgba(255, 220, 160, 0.95); } .kd-pn-stock--pre::before { background: rgba(255, 220, 160, 0.95); box-shadow: 0 0 0 4px rgba(255, 200, 130, 0.18); } .kd-pn-stock--out { color: rgba(220, 140, 140, 0.85); } .kd-pn-stock--out::before { background: rgba(220, 140, 140, 0.85); box-shadow: 0 0 0 4px rgba(220, 140, 140, 0.18); } /* ===== Mobile ===== */ @media (max-width: 920px) { .kd-pn-listing { grid-template-columns: 1fr; } .kd-pn-listing__sidebar { position: static; } .kd-pn-detail { grid-template-columns: 1fr; } .kd-pn-footer__inner { grid-template-columns: 1fr 1fr; } .kd-pn-specs dl { grid-template-columns: 1fr; } } @media (max-width: 600px) { .kd-pn-header__nav { display: none; } .kd-pn-header__tool { padding: 6px 10px; } .kd-pn-footer__inner { grid-template-columns: 1fr; } .kd-pn-footer__bottom { flex-direction: column; gap: 8px; text-align: center; } } /* Primary-button gloss + sweeping white sheen on hover. */ .kd-pn-shop .kd-btn--primary { position: relative; overflow: hidden; background-image: linear-gradient(180deg, rgba(255,255,255,0.18), transparent 50%, rgba(0,0,0,0.12)); } .kd-pn-shop .kd-btn--primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,0.45) 50%, transparent 75%); transform: translateX(-100%); pointer-events: none; } .kd-pn-shop .kd-btn--primary:hover { background-image: linear-gradient(180deg, rgba(255,255,255,0.26), transparent 50%, rgba(0,0,0,0.16)); filter: none; } .kd-pn-shop .kd-btn--primary:hover::before { transform: translateX(100%); transition: transform 0.7s ease; }