/* ==========================================================================
NP Parts — Main Stylesheet
Design System: "The Neon Precision"
========================================================================== */
/* --------------------------------------------------------------------------
1. Design Tokens (CSS Custom Properties)
-------------------------------------------------------------------------- */
:root {
/* Colors — Tonal Architecture */
--np-surface: #f8f9ff;
--np-surface-dim: #d7dae1;
--np-surface-bright: #f8f9ff;
--np-surface-container-lowest: #ffffff;
--np-surface-container-low: #f1f3fb;
--np-surface-container: #ebeef5;
--np-surface-container-high: #e5e8f0;
--np-surface-container-highest: #e0e2ea;
--np-surface-variant: #e0e2ea;
--np-on-surface: #181c21;
--np-on-surface-variant: #57404e;
--np-on-background: #181c21;
--np-background: #f8f9ff;
--np-outline: #8a6f7f;
--np-outline-variant: #debecf;
/* Accent: horizontal violet → blue (buttons, fills) */
--np-gradient-violet: #7B3FE4;
--np-gradient-blue: #2F80ED;
--np-gradient-primary: linear-gradient(90deg, var(--np-gradient-violet) 0%, var(--np-gradient-blue) 100%);
/* Hover overlays (category cards, etc.) — neutral gray */
--np-hover-overlay: rgba(45, 45, 48, 0.94);
--np-hover-overlay-solid: #3a3a3e;
/* Solid fallbacks (borders, small links, ::selection) */
--np-primary: var(--np-gradient-blue);
--np-primary-container: var(--np-gradient-violet);
--np-primary-dark: #1a5499;
--np-on-primary: #ffffff;
--np-on-primary-container:#e5ecf9;
--np-secondary: #576500;
--np-secondary-container: #d0ed00;
--np-on-secondary: #ffffff;
--np-on-secondary-container: #5b6900;
--np-tertiary: #00628c;
--np-error: #ba1a1a;
--np-error-container: #ffdad6;
--np-on-error: #ffffff;
--np-inverse-surface: #2d3136;
--np-inverse-on-surface: #eef1f8;
/* Typography */
--np-font-headline: 'Manrope', system-ui, sans-serif;
--np-font-body: 'Inter', system-ui, sans-serif;
--np-font-label: 'Inter', system-ui, sans-serif;
/* Spacing Scale (rem) */
--np-space-1: 0.25rem; /* 4px */
--np-space-2: 0.5rem; /* 8px */
--np-space-3: 0.75rem; /* 12px */
--np-space-4: 1rem; /* 16px */
--np-space-5: 1.25rem; /* 20px */
--np-space-6: 1.5rem; /* 24px */
--np-space-8: 2rem; /* 32px */
--np-space-10: 2.5rem; /* 40px */
--np-space-12: 3rem; /* 48px */
--np-space-16: 4rem; /* 64px */
--np-space-20: 5rem; /* 80px */
--np-space-24: 6rem; /* 96px */
/* Border Radius */
--np-radius-sm: 0.125rem;
--np-radius-md: 0.25rem;
--np-radius-lg: 0.5rem;
--np-radius-xl: 0.75rem;
/* Shadows */
--np-shadow-ambient: 0 20px 50px rgba(24, 28, 33, 0.06);
--np-shadow-sm: 0 4px 12px rgba(24, 28, 33, 0.04);
--np-glow-primary: 0 0 20px 3px rgba(47, 128, 237, 0.35);
--np-glow-secondary: 0 0 15px 2px rgba(87, 101, 0, 0.2);
/* Transitions */
--np-transition: all 0.3s ease;
--np-transition-slow: all 0.5s ease;
/* Navbar */
--np-navbar-height: 5rem;
/* Hero text inset — matches .np-navbar__inner horizontal padding */
--np-hero-site-gutter: var(--np-space-8);
/* Same content width as .np-container / constrained homepage sections */
--np-content-max-width: 1400px;
/*
* Front-page hero / carousel height — scales with viewport width (and caps by vh)
* so object-fit: cover can show more of the photo on wide screens without
* distortion. Cap kept conservative so the banner does not dominate large
* monitors (was 760px). Banner spans the full viewport edge-to-edge.
*/
--np-hero-banner-height: clamp(360px, min(22vw + 9.5rem, 65vh), 600px);
}
/* --------------------------------------------------------------------------
2. Reset & Base
-------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
}
body {
font-family: var(--np-font-body);
font-weight: 400;
color: var(--np-on-surface);
background-color: var(--np-surface);
line-height: 1.6;
overflow-x: hidden;
}
::selection {
background-color: var(--np-gradient-blue);
color: #fff;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
text-decoration: none;
transition: var(--np-transition);
}
button {
cursor: pointer;
border: none;
background: none;
font-family: inherit;
color: inherit;
}
input, select, textarea {
font-family: var(--np-font-body);
font-size: 1rem;
}
ul, ol {
list-style: none;
}
/* --------------------------------------------------------------------------
3. Layout
-------------------------------------------------------------------------- */
.np-container {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--np-space-8);
}
.np-container--wide {
max-width: 1920px;
padding: 0 var(--np-space-12);
}
.np-container--narrow {
max-width: 860px;
}
.np-site-content {
padding-top: var(--np-navbar-height);
}
.np-site-main {
min-height: 60vh;
}
/* --------------------------------------------------------------------------
4. Typography
-------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
font-family: var(--np-font-headline);
font-weight: 200;
letter-spacing: 0.05em;
line-height: 1.1;
color: var(--np-on-surface);
}
h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }
p {
margin-bottom: var(--np-space-4);
}
/* Primary accent text — solid black (no gradient) */
.np-text-primary,
.has-inline-color.np-text-primary {
background: none !important;
-webkit-background-clip: unset !important;
background-clip: unset !important;
color: #000000 !important;
-webkit-text-fill-color: #000000;
}
.np-hero-title mark.has-inline-color.np-text-primary {
display: inline-block;
max-width: 100%;
}
.np-text-secondary { color: var(--np-secondary) !important; }
.np-text-bold { font-weight: 700 !important; }
.np-text-italic { font-style: italic !important; }
/* --------------------------------------------------------------------------
5. Material Symbols
-------------------------------------------------------------------------- */
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
vertical-align: middle;
}
/* --------------------------------------------------------------------------
6. Navbar
-------------------------------------------------------------------------- */
.np-navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
height: var(--np-navbar-height);
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: var(--np-shadow-ambient);
transition: var(--np-transition);
}
.np-navbar__inner {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--np-space-8);
}
.np-navbar__brand a,
.np-navbar__logo-text {
font-family: var(--np-font-headline);
font-weight: 700;
font-size: 1.25rem;
color: var(--np-on-surface);
text-decoration: none;
letter-spacing: 0.05em;
}
.np-navbar__brand .custom-logo {
height: 2.5rem;
width: auto;
}
.np-navbar__links {
display: none;
align-items: center;
gap: var(--np-space-10);
}
.np-nav__link {
font-family: var(--np-font-headline);
font-weight: 300;
letter-spacing: 0.05em;
text-transform: uppercase;
font-size: 0.875rem;
color: rgb(100, 116, 139);
padding-bottom: 0.25rem;
transition: var(--np-transition);
}
.np-nav__link:hover {
color: var(--np-primary);
}
.np-nav__link--active {
color: var(--np-on-surface);
border-bottom: 2px solid var(--np-primary);
}
/* Nav dropdown arrow */
.np-nav__arrow {
font-size: 1rem !important;
transition: transform 0.3s ease;
}
/* Dropdown wrapper */
.np-nav__item {
position: relative;
display: flex;
align-items: center;
}
.np-nav__item--has-dropdown > .np-nav__link {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.np-dropdown {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(4px);
min-width: 200px;
background: var(--np-surface-container-lowest);
box-shadow: var(--np-shadow-ambient);
padding: var(--np-space-3) 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
z-index: 100;
}
.np-nav__item--has-dropdown:hover .np-dropdown,
.np-nav__item--has-dropdown:focus-within .np-dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.np-nav__item--has-dropdown:hover .np-nav__arrow {
transform: rotate(180deg);
}
.np-dropdown__link {
display: block;
padding: var(--np-space-3) var(--np-space-6);
font-family: var(--np-font-headline);
font-weight: 300;
font-size: 0.8125rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--np-on-surface-variant);
white-space: nowrap;
transition: var(--np-transition);
}
.np-dropdown__link:hover {
color: var(--np-primary);
background: var(--np-surface-container-low);
}
.np-navbar__actions {
display: flex;
align-items: center;
gap: var(--np-space-6);
}
.np-navbar__icon {
position: relative;
color: var(--np-on-surface);
transition: var(--np-transition);
display: flex;
align-items: center;
justify-content: center;
}
.np-navbar__icon:hover {
color: var(--np-primary);
}
.np-navbar__icon:active {
transform: scale(0.95);
}
.np-cart-count {
position: absolute;
top: -4px;
right: -8px;
min-width: 1rem;
height: 1rem;
background: var(--np-gradient-primary);
color: #fff;
font-size: 0.625rem;
font-weight: 600;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
padding: 0 0.2rem;
}
.np-mobile-toggle {
display: flex;
}
/* Search Overlay */
.np-search-overlay {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: var(--np-surface-container-lowest);
box-shadow: var(--np-shadow-ambient);
padding: var(--np-space-6) var(--np-space-8);
animation: np-slideDown 0.3s ease;
}
@keyframes np-slideDown {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.np-search-overlay__inner {
display: flex;
align-items: center;
max-width: 1920px;
margin: 0 auto;
gap: var(--np-space-4);
}
.np-search-form {
display: flex;
align-items: center;
flex: 1;
gap: var(--np-space-4);
}
.np-search-form__input {
flex: 1;
border: none;
background: transparent;
font-family: var(--np-font-headline);
font-weight: 200;
font-size: 1.5rem;
color: var(--np-on-surface);
outline: none;
padding: var(--np-space-2) 0;
border-bottom: 2px solid var(--np-outline-variant);
transition: var(--np-transition);
}
.np-search-form__input:focus {
border-bottom-color: var(--np-primary);
}
.np-search-form__submit {
color: var(--np-primary);
padding: var(--np-space-2);
}
.np-search-overlay__close {
color: var(--np-on-surface-variant);
padding: var(--np-space-2);
}
/* --------------------------------------------------------------------------
7. Page Header
-------------------------------------------------------------------------- */
.np-page-header {
padding: var(--np-space-8) 0 var(--np-space-6);
background: var(--np-surface-container-low);
}
.np-page-header__inner {
max-width: 800px;
}
.np-page-header__tag {
display: flex;
align-items: center;
gap: var(--np-space-4);
margin-bottom: var(--np-space-6);
}
.np-page-header__line {
display: block;
height: 1px;
width: 3rem;
background: var(--np-gradient-primary);
}
.np-page-header__label {
font-family: var(--np-font-label);
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.3em;
color: var(--np-on-surface-variant);
}
.np-page-header__title {
font-weight: 200;
font-size: clamp(1.75rem, 3vw, 2.5rem);
letter-spacing: -0.02em;
margin-bottom: var(--np-space-2);
}
.np-page-header__desc {
font-size: 0.875rem;
color: var(--np-on-surface-variant);
line-height: 1.8;
}
.np-page-header__cats a {
display: inline-block;
padding: var(--np-space-1) var(--np-space-3);
background: var(--np-surface-container-highest);
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.1em;
border-radius: var(--np-radius-sm);
margin-right: var(--np-space-2);
color: var(--np-on-surface-variant);
}
/* --------------------------------------------------------------------------
8. Breadcrumbs
-------------------------------------------------------------------------- */
.np-breadcrumbs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--np-space-2);
padding: var(--np-space-6) 0;
font-family: var(--np-font-label);
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--np-on-surface-variant);
}
.np-breadcrumbs a {
color: var(--np-on-surface-variant);
}
.np-breadcrumbs a:hover {
color: var(--np-primary);
}
.np-breadcrumbs__sep {
font-size: 0.875rem;
color: var(--np-outline-variant);
}
.np-breadcrumbs__item--current {
color: var(--np-on-surface);
}
/* --------------------------------------------------------------------------
9. Buttons
-------------------------------------------------------------------------- */
.np-btn,
.np-btn--primary,
a.np-btn--primary {
display: inline-block;
font-family: var(--np-font-label);
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.2em;
padding: 1rem 2.5rem;
border: none;
cursor: pointer;
transition: var(--np-transition);
text-decoration: none;
text-align: center;
}
.np-btn--primary,
a.np-btn--primary,
.wp-block-button.np-btn--primary .wp-block-button__link {
background: var(--np-gradient-primary);
color: #fff !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
}
/* Strip Gutenberg wrapper “inner frame” (padding/bg vs. link fill) */
.wp-block-button.np-btn--primary {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
.wp-block-button.np-btn--primary .wp-block-button__link {
height: auto !important;
padding: 1rem 2.5rem !important;
}
.np-btn--primary:hover,
a.np-btn--primary:hover,
.wp-block-button.np-btn--primary .wp-block-button__link:hover {
box-shadow: var(--np-glow-primary);
transform: translateY(-1px);
}
.np-btn--secondary,
.wp-block-button.np-btn--secondary .wp-block-button__link {
background: var(--np-surface-container-lowest);
color: var(--np-on-surface) !important;
border-bottom: 2px solid var(--np-secondary);
}
.np-btn--secondary:hover,
.wp-block-button.np-btn--secondary .wp-block-button__link:hover {
background: rgba(208, 237, 0, 0.1);
}
.np-btn--tertiary {
background: transparent;
color: var(--np-on-surface);
padding: 0.75rem 0;
}
.np-btn--tertiary:hover {
color: var(--np-primary);
}
/* --------------------------------------------------------------------------
10. Hero Section (Gutenberg wp:cover based)
-------------------------------------------------------------------------- */
/*
* Front page main — avoid 100vw + negative margin (clipped left edge with
* body overflow-x:hidden / scrollbar). Main is already full-width here.
*/
.np-front-page-main {
overflow-x: hidden;
}
.np-front-page-main > .alignfull {
position: relative;
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
}
/* --------------------------------------------------------------------------
Hero Carousel (wraps Gutenberg .np-hero-cover blocks via JS)
-------------------------------------------------------------------------- */
.np-hero-carousel {
position: relative;
overflow: hidden;
height: var(--np-hero-banner-height);
width: 100%;
}
/*
* Pre-init FOUC guard: until hero-carousel.js wraps the covers in
* .np-hero-carousel, hide every .np-hero-cover sibling after the first so the
* page does not flash three stacked banners that then collapse into one.
* Once JS runs, the covers become children of .np-hero-carousel and this rule
* stops applying (parent is then .np-hero-carousel, not "anything-else").
*/
:not(.np-hero-carousel) > .np-hero-cover ~ .np-hero-cover {
display: none !important;
}
.np-hero-carousel .np-hero-carousel__slide {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0;
visibility: hidden;
transition: opacity 0.8s ease, visibility 0.8s;
z-index: 0;
}
.np-hero-carousel .np-hero-carousel__slide--active {
opacity: 1;
visibility: visible;
z-index: 1;
}
.np-hero-carousel .np-hero-carousel__slide--exit {
opacity: 0;
visibility: visible;
z-index: 0;
}
.np-hero-carousel .np-hero-carousel__slide:not(.np-hero-carousel__slide--active) {
pointer-events: none;
}
/* Carousel navigation dots */
.np-hero-carousel__dots {
position: absolute;
bottom: var(--np-space-8);
left: 50%;
transform: translateX(-50%);
display: flex;
gap: var(--np-space-3);
z-index: 10;
}
.np-hero-carousel__dot {
position: relative;
width: 36px;
height: 36px;
border: none;
background: none;
cursor: pointer;
padding: 0;
}
.np-hero-carousel__dot::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
transform: translate(-50%, -50%);
transition: background 0.3s;
}
.np-hero-carousel__dot--active::before {
background: #fff;
}
.np-hero-carousel__dot-ring {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.np-hero-carousel__dot-ring circle {
fill: none;
stroke: transparent;
stroke-width: 2;
stroke-dasharray: 100.53;
stroke-dashoffset: 100.53;
transition: stroke 0.3s;
}
.np-hero-carousel__dot--active .np-hero-carousel__dot-ring circle {
stroke: #fff;
animation: np-dot-progress 6s linear forwards;
}
@keyframes np-dot-progress {
to { stroke-dashoffset: 0; }
}
@media (max-width: 767px) {
.np-hero-carousel__dots {
bottom: var(--np-space-4);
}
}
/* --- Cover block hero --- */
.np-hero-cover {
position: relative !important;
min-height: var(--np-hero-banner-height) !important;
height: var(--np-hero-banner-height) !important;
max-height: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background-color: var(--np-surface-container-low);
overflow: hidden;
}
/* Left hero: horizontal inset lives on inner-container (reliable vs. Cover inline padding). */
.wp-block-cover.np-hero-cover.np-hero-cover--content-left {
justify-content: flex-start !important;
padding-left: 0;
padding-right: 0;
padding-top: 1em;
padding-bottom: 1em;
}
/* Optional seam offset for split artwork — inherited by inner padding max() */
.wp-block-cover.np-hero-cover.np-hero-cover--split-bg {
--np-hero-split-art-inset: clamp(2.25rem, 14vw, 17rem);
}
/*
* Hero media — uniform scale only (no squashing). Fills the block; overflow hidden crops.
* Wider viewport → larger layout box → cover shows more of the image width (still centered).
* ![]()
path: object-fit + object-position (matches core Cover defaults; theme enforces z-index stack).
*/
.np-hero-cover .wp-block-cover__image-background,
.np-hero-cover video.wp-block-cover__video-background {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
object-fit: cover !important;
transform: none !important;
left: 0 !important;
right: 0 !important;
top: 0 !important;
bottom: 0 !important;
z-index: 0 !important;
/* Preserve full source detail when the GPU rescales the banner photo. */
image-rendering: high-quality;
image-rendering: -webkit-optimize-contrast;
-ms-interpolation-mode: bicubic;
backface-visibility: hidden;
}
/*
* --------------------------------------------------------------------------
* Reusable banner “cover” patterns (reference / custom sections)
* --------------------------------------------------------------------------
* IMG variant (object-fit):
*
*
* BACKGROUND variant (background-size):
*
* --------------------------------------------------------------------------
*/
.np-banner-media {
position: relative;
overflow: hidden;
isolation: isolate;
}
.np-banner-media--img .np-banner-media__img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
pointer-events: none;
user-select: none;
}
.np-banner-media--bg .np-banner-media__bg {
position: absolute;
inset: 0;
background-image: var(--np-banner-bg-image, none);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
pointer-events: none;
}
.np-banner-media__content {
position: relative;
z-index: 1;
}
.np-hero-cover .wp-block-cover__background {
background-color: transparent !important;
opacity: 0 !important;
}
/*
* Optional: image only as CSS background on .wp-block-cover__background (must follow rule above
* so opacity / background-size win). Set on wrapper: style="--np-hero-bg-image:url(...)"
* and add class np-hero-cover--bg-media in the editor.
*/
.wp-block-cover.np-hero-cover.np-hero-cover--bg-media .wp-block-cover__image-background {
display: none !important;
}
.wp-block-cover.np-hero-cover.np-hero-cover--bg-media .wp-block-cover__background {
background-color: transparent !important;
background-image: var(--np-hero-bg-image, none) !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
opacity: 1 !important;
}
.np-hero-cover .wp-block-cover__inner-container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 100%;
min-width: 0; /* allow flex child to shrink so copy does not overflow-x */
padding: var(--np-space-8);
z-index: 2;
}
.np-hero-cover--content-left .wp-block-cover__inner-container {
justify-content: flex-start;
box-sizing: border-box;
width: 100%;
max-width: 100%;
/*
* Narrow: gutter + optional split-art (seam in background).
* Wide: never less than centered 1280px column (matches Technical Categories etc.).
*/
padding-left: max(
var(--np-hero-site-gutter),
env(safe-area-inset-left, 0px),
var(--np-hero-split-art-inset, 0rem),
calc((100vw - var(--np-content-max-width)) / 2 + var(--np-space-8))
);
padding-right: max(
var(--np-hero-site-gutter),
env(safe-area-inset-right, 0px),
1rem,
calc((100vw - var(--np-content-max-width)) / 2 + var(--np-space-8))
);
padding-top: var(--np-space-8);
padding-bottom: var(--np-space-8);
}
.np-hero-inner {
text-align: center;
}
.np-hero-cover--content-left .np-hero-inner {
text-align: left;
margin-left: 0 !important;
margin-right: auto !important;
width: min(700px, 100%);
max-width: 100%;
min-width: 0;
overflow-wrap: break-word;
word-wrap: break-word;
}
.np-hero-cover--content-left .np-hero-tag {
justify-content: flex-start;
}
.np-hero-cover--content-left .np-hero-specs {
justify-content: flex-start;
}
.np-hero-cover--content-left .np-hero-spec {
text-align: left;
}
.np-hero-cover--content-left .np-hero-buttons {
justify-content: flex-start;
}
/* Tag line */
.np-hero-tag {
justify-content: center;
align-items: center;
gap: var(--np-space-4);
margin-bottom: var(--np-space-6);
}
.np-hero-tag__line,
hr.np-hero-tag__line {
display: inline-block;
width: 3rem;
height: 1px !important;
background: var(--np-gradient-primary) !important;
border: none !important;
flex-shrink: 0;
margin: 0 !important;
}
.np-hero-tag__text {
font-family: var(--np-font-label) !important;
font-size: 0.625rem !important;
text-transform: uppercase;
letter-spacing: 0.3em;
color: var(--np-on-surface-variant) !important;
margin: 0 !important;
}
/* Title — strong min so lines fit narrow viewports; avoids clipping under overflow:hidden */
.np-hero-title {
font-weight: 200 !important;
font-size: clamp(1.75rem, 4.5vw + 0.85rem, 5.5rem) !important;
letter-spacing: -0.04em !important;
line-height: 0.95 !important;
margin-bottom: var(--np-space-8) !important;
max-width: 100%;
}
/* Spec items */
.np-hero-specs {
gap: var(--np-space-8);
margin-bottom: var(--np-space-12);
justify-content: center;
}
.np-hero-spec {
gap: var(--np-space-1);
text-align: center;
}
.np-hero-spec--bordered {
padding-left: var(--np-space-8);
border-left: 1px solid rgba(222, 190, 207, 0.3);
}
.np-hero-spec__label {
font-family: var(--np-font-label) !important;
font-size: 0.5625rem !important;
text-transform: uppercase;
letter-spacing: 0.2em;
font-weight: 700 !important;
color: var(--np-on-surface-variant) !important;
margin: 0 !important;
}
.np-hero-spec__label.np-text-secondary { color: var(--np-secondary) !important; }
.np-hero-spec__label.np-text-primary {
color: #000000 !important;
-webkit-text-fill-color: #000000;
}
.np-hero-spec__value {
font-family: var(--np-font-headline) !important;
font-weight: 300 !important;
font-size: 0.875rem !important;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--np-on-surface) !important;
margin: 0 !important;
}
/* Buttons */
.np-hero-buttons {
gap: var(--np-space-6);
margin-top: var(--np-space-4);
flex-wrap: wrap;
max-width: 100%;
}
.np-hero-buttons .wp-block-button__link {
border-radius: 0 !important;
white-space: normal;
text-align: center;
}
.np-hero-cover--content-left .np-hero-buttons .wp-block-button__link {
text-align: left;
}
/* --------------------------------------------------------------------------
11. Section Patterns
-------------------------------------------------------------------------- */
.np-section-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: var(--np-space-16);
}
.np-section-title {
font-weight: 200;
letter-spacing: -0.02em;
margin-bottom: var(--np-space-2);
}
.np-section-accent,
hr.np-section-accent {
width: 3rem;
height: 4px;
background: var(--np-gradient-primary);
border: none;
margin: 0;
}
.np-section-meta {
display: none;
}
/* Categories Section */
.np-categories-section {
padding: var(--np-space-24) var(--np-space-8);
background: var(--np-surface);
}
/* Categories Grid */
.np-categories-grid {
display: grid;
gap: var(--np-space-6);
}
.np-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.np-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.np-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.np-category-card {
position: relative;
aspect-ratio: 1;
overflow: hidden;
background: var(--np-surface-container-low);
display: block;
text-decoration: none;
}
.np-category-card__image {
width: 100%;
height: 100%;
}
.np-category-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
filter: none;
}
.np-category-card:hover .np-category-card__image img {
transform: none;
}
.np-category-card__placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--np-surface-container);
}
.np-category-card__placeholder .material-symbols-outlined {
font-size: 3rem;
color: var(--np-outline-variant);
}
.np-category-card__info {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: var(--np-space-6);
background: linear-gradient(to top, rgba(255, 255, 255, 0.92), transparent);
z-index: 2;
text-align: center;
}
.np-category-card__label {
display: block;
font-family: var(--np-font-headline);
font-weight: 300;
font-size: 1.25rem;
color: #000000;
}
.np-category-card__count {
display: block;
font-family: var(--np-font-label);
font-size: 0.5625rem;
text-transform: uppercase;
letter-spacing: 0.2em;
font-weight: 700;
margin-top: var(--np-space-1);
color: #000000;
-webkit-text-fill-color: #000000;
}
.np-category-card__overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--np-hover-overlay);
backdrop-filter: none;
-webkit-backdrop-filter: none;
opacity: 0;
transition: var(--np-transition-slow);
color: #fff;
z-index: 3;
padding: var(--np-space-8);
}
.np-category-card:hover .np-category-card__overlay {
opacity: 1;
}
.np-category-card__overlay .material-symbols-outlined {
font-size: 2.5rem;
margin-bottom: var(--np-space-4);
}
.np-category-card__overlay-text {
font-family: var(--np-font-label);
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.3em;
}
/* Editable Category Cards (wp:cover based — used by block patterns) */
/* Force the technical-categories rows onto a strict 4-column CSS Grid so
every card in every row gets exactly the same width and height, no
matter what photo is dropped inside. The default Gutenberg Columns
layout uses flex which can drift by 1-2 px between rows depending on
inline padding and per-column flex-basis quirks; CSS Grid with four
equal `1fr` tracks eliminates that entirely. */
.np-catgrid-row {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: var(--np-space-6) !important;
margin-bottom: var(--np-space-6) !important;
align-items: stretch !important;
}
.np-catgrid-row:last-child {
margin-bottom: 0 !important;
}
.np-catgrid-row > .wp-block-column {
flex: unset !important;
flex-basis: auto !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
}
/* Lock every category card to a perfect 1:1 square. The Gutenberg cover
block hardcodes `style="min-height: 300px"` inline, which wins over any
normal CSS rule and turns the card into a rectangle whenever the column
width is < 300 px (e.g. at the 1280 px content rail width). Resetting
min-height to 0 with !important lets the aspect-ratio drive the height
so the card stays square at every viewport. */
.np-catcard,
.wp-block-cover.np-catcard {
aspect-ratio: 1 / 1 !important;
min-height: 0 !important;
height: auto !important;
width: 100% !important;
overflow: hidden;
transition: box-shadow 0.4s ease;
border-radius: var(--np-radius-m);
box-sizing: border-box;
}
/* The image fills the entire card and is cropped to fit — never stretches
the card's height, no matter the photo's intrinsic dimensions. */
.np-catcard .wp-block-cover__image-background,
.np-catcard img.wp-block-cover__image-background {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}
/* Hide product count */
.np-catcard__count {
display: none !important;
}
.np-catcard .wp-block-cover__background {
background-color: transparent !important;
opacity: 0 !important;
transition: background-color 0.4s ease, opacity 0.4s ease;
pointer-events: none !important;
z-index: 1;
}
.np-catcard .wp-block-cover__image-background {
object-fit: cover;
opacity: 1 !important;
filter: none !important;
transform: none !important;
transition: transform 0.45s ease, opacity 0.35s ease;
z-index: 0;
}
/* Block editor “dim” classes lower image opacity — keep cover photos full strength */
.wp-block-cover.np-catcard[class*="has-background-dim"] .wp-block-cover__image-background {
opacity: 1 !important;
}
.wp-block-cover.np-catcard .wp-block-cover__inner-container {
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
align-items: center !important;
height: 100% !important;
min-height: inherit !important;
padding: var(--np-space-6) !important;
position: relative;
z-index: 2;
}
/* Full-card link — tolerate extra wrappers after “Convert to HTML” / Keep all */
.wp-block-cover.np-catcard .wp-block-cover__inner-container > .wp-block-html,
.wp-block-cover.np-catcard .wp-block-cover__inner-container .wp-block-html:has(.np-catcard__hit),
.wp-block-cover.np-catcard .wp-block-cover__inner-container .wp-block-freeform:has(.np-catcard__hit) {
position: absolute !important;
inset: 0 !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 2;
pointer-events: none;
}
.wp-block-cover.np-catcard .np-catcard__hit {
position: absolute !important;
inset: 0 !important;
display: block;
border-radius: inherit;
z-index: 1;
pointer-events: auto;
}
.wp-block-cover.np-catcard:has(.np-catcard__hit) .np-catcard__inner {
pointer-events: none;
}
.wp-block-cover.np-catcard .np-catcard__inner {
margin-top: auto !important;
width: 100%;
max-width: 100%;
z-index: 3;
position: relative;
/* Slighter downward nudge — keeps the label strip readable without
pushing the headline onto the gradient accent bar. */
transform: translateY(calc(var(--np-space-6) / 4));
transition: opacity 0.3s ease, transform 0.3s ease;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 2px;
}
.wp-block-cover.np-catcard .np-catcard__inner p {
text-align: center !important;
width: 100%;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.np-catcard__tag {
display: none !important;
}
.np-catcard__name {
font-family: var(--np-font-label) !important;
font-weight: 700 !important;
font-size: 0.6875rem !important;
text-transform: uppercase;
letter-spacing: 0.2em;
color: #000000 !important;
margin-bottom: 0 !important;
text-align: center !important;
width: 100%;
/* Stack label + accent line vertically so the line never slices through
the glyphs (a common issue when a pseudo-element or border sits at
mid-cap-height). ~2–3 mm gap matches the client brief. */
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-end !important;
}
.np-catcard__name a,
.np-catcard__name-text {
color: #000000;
text-decoration: none;
border-bottom: none !important;
box-shadow: none !important;
}
/* Kill stray pseudo-elements on the link that might paint a second bar
through the letters (Customizer / legacy CSS). */
.wp-block-cover.np-catcard .np-catcard__name a::before,
.wp-block-cover.np-catcard .np-catcard__name a::after,
.wp-block-cover.np-catcard .np-catcard__name-text::before,
.wp-block-cover.np-catcard .np-catcard__name-text::after {
content: none !important;
display: none !important;
}
/* Gradient accent under label — wide screens only (no overlap with narrow
viewport footer layout). Below 783px the ::after rule does not exist at all. */
@media (min-width: 783px) {
.wp-block-cover.np-catcard .np-catcard__name::after {
content: '';
display: block;
width: 2.25rem;
height: 3px;
margin-top: 2.5mm;
flex-shrink: 0;
border-radius: 999px;
background: var(--np-gradient-primary);
}
}
/* Reset all cards to default dark first (overrides old markup classes) */
.np-catcard--magenta .np-catcard__name,
.np-catcard--magenta .np-catcard__name a,
.np-catcard--magenta .np-catcard__name-text {
color: #000000 !important;
}
.np-catcard--dark .np-catcard__name a,
.np-catcard--dark .np-catcard__name-text,
.np-catcard:not(.np-catcard--magenta) .np-catcard__name a,
.np-catcard:not(.np-catcard--magenta) .np-catcard__name-text {
display: inline-block;
max-width: 100%;
}
/* Hover: pilnas overlay — veikia ant viso .wp-block-cover.np-catcard (po „Keep all“ gali dingti --magenta / --dark) */
.wp-block-cover.np-catcard:hover {
box-shadow: none;
}
.np-catcard--magenta:hover .wp-block-cover__background {
background: var(--np-hover-overlay-solid) !important;
opacity: 1 !important;
}
.np-catcard--dark:hover .wp-block-cover__background,
.wp-block-cover.np-catcard:not(.np-catcard--magenta):hover .wp-block-cover__background {
background-color: #2a2a2e !important;
opacity: 1 !important;
}
.wp-block-cover.np-catcard:hover .wp-block-cover__image-background {
opacity: 0 !important;
filter: none !important;
transform: none !important;
}
.wp-block-cover.np-catcard:hover .np-catcard__inner {
opacity: 0;
pointer-events: none;
}
.wp-block-cover.np-catcard:hover .np-catcard__overlay {
opacity: 1 !important;
visibility: visible !important;
/* Whole overlay is now the click target — JS redirects to the inner CTA URL. */
pointer-events: auto !important;
cursor: pointer;
}
.wp-block-cover.np-catcard:hover .np-catcard__overlay > * {
pointer-events: auto !important;
}
.wp-block-cover.np-catcard:hover .np-catcard__overlay .wp-block-button__link,
.wp-block-cover.np-catcard:hover .np-catcard__overlay a.wp-element-button {
pointer-events: auto !important;
}
/* Overlay: any descendant with class (survives “Keep all” / extra wrappers) */
.wp-block-cover.np-catcard .np-catcard__overlay {
position: absolute !important;
inset: 0;
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: var(--np-space-5) var(--np-space-4) !important;
z-index: 4;
background: var(--np-hover-overlay);
opacity: 0;
visibility: visible;
transition: opacity 0.4s ease;
pointer-events: none !important;
cursor: pointer;
}
.np-catcard--dark .np-catcard__overlay,
.np-catcard:not(.np-catcard--magenta) .np-catcard__overlay {
background: var(--np-hover-overlay);
}
.block-editor-iframe__body .wp-block-cover.np-catcard .np-catcard__overlay {
opacity: 1 !important;
pointer-events: auto !important;
}
.block-editor-iframe__body .wp-block-cover.np-catcard .wp-block-cover__inner-container > .wp-block-html,
.block-editor-iframe__body .wp-block-cover.np-catcard .wp-block-cover__inner-container .wp-block-html:has(.np-catcard__hit) {
position: static !important;
width: auto !important;
height: auto !important;
inset: auto !important;
pointer-events: none !important;
}
.block-editor-iframe__body .np-catcard__hit {
display: none !important;
}
.block-editor-iframe__body .wp-block-cover.np-catcard:has(.np-catcard__hit) .np-catcard__inner {
pointer-events: auto !important;
}
.np-catcard__overlay-tag {
font-family: var(--np-font-label) !important;
font-size: 0.5625rem !important;
text-transform: uppercase;
letter-spacing: 0.2em;
color: rgba(255, 255, 255, 0.92) !important;
font-weight: 500;
border: 1px solid rgba(255, 255, 255, 0.55);
padding: var(--np-space-2) var(--np-space-4);
margin: 0 !important;
text-align: center !important;
max-width: 100%;
line-height: 1.35;
}
.np-catcard__overlay-icon {
margin: 0 !important;
opacity: 0.95;
flex: 1 1 0 !important;
display: flex !important;
align-items: center;
justify-content: center;
width: 100% !important;
height: auto !important;
overflow: hidden;
min-height: 0;
}
.np-catcard__overlay-icon img {
width: 90% !important;
height: 90% !important;
max-width: none !important;
max-height: none !important;
object-fit: contain !important;
filter: brightness(0) invert(1);
}
.np-catcard__overlay-icon svg {
width: 90% !important;
height: 90% !important;
}
/* Overlay CTA — works for both and wp:button */
.np-catcard__overlay-cta,
a.np-catcard__overlay-btn,
.np-catcard__overlay-btns .wp-block-button__link {
font-family: var(--np-font-label) !important;
font-size: 0.625rem !important;
text-transform: uppercase;
letter-spacing: 0.2em;
color: #fff !important;
font-weight: 600;
margin: 0 !important;
text-decoration: none;
background: transparent !important;
border: 1px solid rgba(255, 255, 255, 0.5) !important;
padding: 8px 20px !important;
border-radius: 2px !important;
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
pointer-events: auto;
}
a.np-catcard__overlay-btn:hover,
.np-catcard__overlay-btns .wp-block-button__link:hover {
background: rgba(255, 255, 255, 0.15) !important;
border-color: #fff !important;
}
.np-catcard__overlay-btns {
margin: 0 !important;
width: 100%;
display: flex;
justify-content: center;
}
/* --------------------------------------------------------------------------
Technical category cards — non-overlapping label strip
- The square card has the photo absolutely filling the entire box. Without
a guaranteed white surface for the label, the category name relies on
the JPG's natural bottom whitespace, which collapses as the viewport
(and therefore the card) shrinks → label sits on top of the product.
- Solution: force a dedicated white footer strip for the label across all
viewports up to small laptops (≤1199px). Above that, the card is wide
enough that the JPG margin keeps things clean and the gradient dash
(>=992px, see inline rule in functions.php) stays in place.
-------------------------------------------------------------------------- */
@media (max-width: 1199px) {
.wp-block-cover.np-catcard {
overflow: hidden !important;
}
.wp-block-cover.np-catcard .wp-block-cover__inner-container {
align-items: stretch !important;
justify-content: flex-end !important;
flex: 1 1 auto !important;
min-height: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.wp-block-cover.np-catcard .np-catcard__inner {
transform: translateY(0) !important;
margin-top: auto !important;
margin-bottom: 0 !important;
width: 100% !important;
max-width: none !important;
flex: 0 0 auto !important;
/* Critical: overrides inline style="min-height:100%" from saved blocks */
min-height: 0 !important;
height: auto !important;
align-self: stretch !important;
justify-content: center !important;
padding: 0.6rem 0.75rem 0.75rem !important;
background: #ffffff !important;
border-radius: 0 0 var(--np-radius-m, 8px) var(--np-radius-m, 8px);
box-sizing: border-box !important;
gap: 0 !important;
}
}
/* Tablet — slightly tighter strip + smaller padding so the photo wins more area. */
@media (max-width: 991px) {
.wp-block-cover.np-catcard .np-catcard__inner {
padding: 0.45rem 0.6rem 0.55rem !important;
}
}
/* Phone — compact label, tiny letterforms, no gradient dash. */
@media (max-width: 782px) {
.wp-block-cover.np-catcard .np-catcard__inner {
padding: 0.28rem 0.45rem 0.52rem !important;
}
.wp-block-cover.np-catcard .np-catcard__name {
font-size: clamp(0.46875rem, 2.4vw, 0.53125rem) !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
line-height: 1.2 !important;
margin: 0 !important;
padding: 0 !important;
}
.wp-block-cover.np-catcard .np-catcard__name::after {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
}
/* Stats Section */
.np-stats-section {
padding: var(--np-space-24) var(--np-space-12);
background: var(--np-surface-container-low);
}
.np-stats__columns {
align-items: center !important;
gap: var(--np-space-12) !important;
}
.np-stat-card {
padding: var(--np-space-8) !important;
background: var(--np-surface-container-lowest) !important;
}
.np-stat-card--primary {
border-left: 4px solid var(--np-primary) !important;
}
.np-stat-card--secondary {
border-left: 4px solid var(--np-secondary) !important;
}
.np-stat-card__label {
font-family: var(--np-font-label) !important;
font-size: 0.5625rem !important;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--np-on-surface-variant);
margin-bottom: var(--np-space-4) !important;
}
.np-stat-card__value {
font-weight: 200 !important;
font-size: clamp(2.5rem, 5vw, 3.5rem) !important;
font-variant-numeric: tabular-nums;
margin-bottom: var(--np-space-2) !important;
}
.np-stat-card__value span {
font-size: 0.5em;
}
.np-stat-card__desc {
font-size: 0.625rem !important;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgb(100, 116, 139);
}
.np-stats__title {
font-weight: 200 !important;
font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
line-height: 1.2 !important;
margin-bottom: var(--np-space-6) !important;
}
.np-stats__text {
font-size: 0.875rem !important;
color: var(--np-on-surface-variant);
line-height: 1.8 !important;
margin-bottom: var(--np-space-8) !important;
max-width: 28rem;
}
.np-stats__link a {
display: inline-flex;
align-items: center;
gap: var(--np-space-3);
font-family: var(--np-font-label);
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.3em;
color: var(--np-on-surface);
}
.np-stats__link a::before {
content: '';
display: block;
width: 2rem;
height: 1px;
background: var(--np-gradient-primary);
transition: var(--np-transition);
}
.np-stats__link a:hover::before {
width: 3rem;
}
/* Featured Section */
.np-featured-section {
padding: var(--np-space-24) var(--np-space-8);
background: var(--np-surface);
}
/* --------------------------------------------------------------------------
12. Product Cards
-------------------------------------------------------------------------- */
.np-product-card {
position: relative;
background: var(--np-surface-container-lowest);
transition: var(--np-transition);
}
.np-product-card:hover {
background: var(--np-surface-container-low);
}
.np-product-card__link {
display: block;
text-decoration: none;
color: inherit;
}
.np-product-card__image {
position: relative;
aspect-ratio: 1;
overflow: hidden;
background: var(--np-surface-container-low);
}
.np-product-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
filter: none;
}
.np-product-card:hover .np-product-card__image img {
transform: none;
}
.np-product-card__badge {
position: absolute;
top: var(--np-space-4);
left: var(--np-space-4);
background: var(--np-gradient-primary);
color: #fff;
font-family: var(--np-font-label);
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 0.3rem 0.6rem;
z-index: 2;
}
.np-product-card__actions {
position: absolute;
bottom: var(--np-space-4);
right: var(--np-space-4);
opacity: 0;
transform: translateY(8px);
transition: var(--np-transition);
z-index: 2;
}
.np-product-card:hover .np-product-card__actions {
opacity: 1;
transform: translateY(0);
}
.np-product-card__actions .material-symbols-outlined {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
background: var(--np-surface-container-lowest);
box-shadow: var(--np-shadow-sm);
font-size: 1.125rem;
color: var(--np-on-surface);
}
.np-product-card__info {
padding: var(--np-space-5) var(--np-space-4);
}
.np-product-card__cat {
display: block;
font-family: var(--np-font-label);
font-size: 0.5625rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--np-primary);
font-weight: 700;
margin-bottom: var(--np-space-1);
}
.np-product-card__cat a {
color: var(--np-primary);
}
.np-product-card__title {
font-family: var(--np-font-headline);
font-weight: 300;
font-size: 1rem;
letter-spacing: 0.02em;
color: var(--np-on-surface);
margin-bottom: var(--np-space-2);
line-height: 1.3;
}
.np-product-card__price {
font-family: var(--np-font-headline);
font-weight: 300;
font-size: 0.9375rem;
color: var(--np-on-surface);
}
.np-product-card__price del {
color: var(--np-on-surface-variant);
font-size: 0.8125rem;
margin-right: var(--np-space-2);
}
.np-product-card__price ins {
text-decoration: none;
color: var(--np-primary);
}
/* --------------------------------------------------------------------------
New Products In Stock — front page section
-------------------------------------------------------------------------- */
.np-new-products {
background: var(--np-surface-container-low);
padding: var(--np-space-12) 0;
}
.np-new-products__inner {
max-width: 1600px;
margin: 0 auto;
padding: 0 var(--np-space-8);
}
.np-new-products__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: var(--np-space-8);
}
.np-new-products__tag {
display: block;
font-family: var(--np-font-label);
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--np-primary);
font-weight: 500;
margin-bottom: var(--np-space-1);
}
.np-new-products__title {
font-family: var(--np-font-headline);
font-weight: 300;
font-size: clamp(1.5rem, 3vw, 2rem);
letter-spacing: -0.02em;
color: var(--np-on-surface);
margin: 0;
}
.np-new-products__view-all {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--np-space-2) var(--np-space-5);
background: var(--np-on-surface);
color: var(--np-surface-container-lowest);
font-family: var(--np-font-label);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.05em;
text-decoration: none;
border-radius: 100px;
transition: var(--np-transition);
white-space: nowrap;
flex-shrink: 0;
}
.np-new-products__view-all:hover {
background: var(--np-gradient-primary);
color: #fff;
}
.np-new-products__view-all-btn .wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--np-space-2) var(--np-space-5) !important;
background: var(--np-on-surface) !important;
color: var(--np-surface-container-lowest) !important;
font-family: var(--np-font-label);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.05em;
text-decoration: none;
border-radius: 100px !important;
transition: var(--np-transition);
white-space: nowrap;
}
.np-new-products__view-all-btn .wp-block-button__link:hover {
background: var(--np-gradient-primary) !important;
color: #fff !important;
}
.np-about__btn-block .wp-block-button__link {
display: inline-flex;
align-items: center;
padding: var(--np-space-3) var(--np-space-6) !important;
background: var(--np-on-surface) !important;
color: #fff !important;
font-family: var(--np-font-label);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.05em;
text-decoration: none;
border-radius: 100px !important;
transition: var(--np-transition);
}
.np-about__btn-block .wp-block-button__link:hover {
background: var(--np-gradient-primary) !important;
}
.np-instagram__follow-link a {
display: inline-flex;
align-items: center;
gap: var(--np-space-2);
padding: var(--np-space-3) var(--np-space-6);
background: var(--np-on-surface);
color: #fff !important;
font-family: var(--np-font-label);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.05em;
text-decoration: none;
border-radius: 100px;
transition: var(--np-transition);
}
.np-instagram__follow-link a:hover {
background: var(--np-gradient-primary);
}
.np-new-products__grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--np-space-5);
}
.np-new-products__grid .np-product-card {
background: var(--np-surface-container-lowest);
border-radius: var(--np-radius-m, 8px);
overflow: hidden;
transition: var(--np-transition);
}
.np-new-products__grid .np-product-card:hover {
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
transform: translateY(-4px);
}
.np-new-products__grid .np-product-card__image {
aspect-ratio: 1;
background: var(--np-surface-container-low);
}
/* Card Gallery — hover image cycling */
.np-card-gallery {
position: relative;
}
.np-card-gallery__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.25s ease;
}
.np-card-gallery__img--active {
opacity: 1;
position: relative;
}
.np-card-gallery__dots {
position: absolute;
bottom: var(--np-space-2);
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 4px;
z-index: 3;
opacity: 0;
transition: opacity 0.3s;
}
.np-card-gallery:hover .np-card-gallery__dots {
opacity: 1;
}
.np-card-gallery__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.2);
transition: background 0.2s;
}
.np-card-gallery__dot--active {
background: var(--np-gradient-primary);
}
.np-new-products__grid .np-product-card__info {
padding: var(--np-space-5) var(--np-space-4);
text-align: center;
}
.np-new-products__grid .np-product-card__title {
font-size: 0.9375rem;
margin-bottom: var(--np-space-1);
}
.np-new-products__grid .np-product-card__cat {
font-size: 0.5625rem;
margin-bottom: var(--np-space-2);
}
.np-new-products__grid .np-product-card__price {
font-size: 0.9375rem;
}
@media (max-width: 1024px) {
.np-new-products__grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 600px) {
.np-new-products__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--np-space-3);
}
.np-new-products__inner {
padding: 0 var(--np-space-4);
}
.np-new-products__header {
flex-direction: column;
align-items: flex-start;
gap: var(--np-space-3);
}
}
/* --------------------------------------------------------------------------
About Us — front page section
-------------------------------------------------------------------------- */
.np-about {
background: #fff;
padding: var(--np-space-16) 0;
}
.np-about__inner {
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--np-space-8);
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: var(--np-space-12);
align-items: center;
}
.np-about__text {
max-width: 480px;
text-align: center;
justify-self: center;
}
.np-about__title {
font-family: var(--np-font-headline);
font-weight: 400;
font-size: clamp(1.25rem, 2.5vw, 1.75rem);
line-height: 1.35;
color: var(--np-on-surface);
margin: 0 0 var(--np-space-6);
}
.np-about__desc {
font-size: 0.875rem;
line-height: 1.8;
color: var(--np-on-surface-variant);
margin: 0 0 var(--np-space-4);
}
.np-about__desc:last-of-type {
margin-bottom: var(--np-space-8);
}
.np-about__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--np-space-3) var(--np-space-6);
background: var(--np-on-surface);
color: #fff;
font-family: var(--np-font-label);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.05em;
text-decoration: none;
border-radius: 100px;
transition: var(--np-transition);
}
.np-about__btn:hover {
background: var(--np-gradient-primary);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(47, 128, 237, 0.3);
}
.np-about__images {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: var(--np-space-5);
}
.np-about__img {
border-radius: var(--np-radius-m, 8px);
overflow: hidden;
min-height: 420px;
background: var(--np-surface-container-low);
margin: 0 !important;
}
.np-about__img img {
width: 100%;
height: 100%;
object-fit: cover;
min-height: 420px;
}
@media (max-width: 900px) {
.np-about__inner {
grid-template-columns: 1fr;
gap: var(--np-space-8);
}
.np-about__text {
max-width: 100%;
}
.np-about__images {
grid-template-columns: 1fr 1fr;
}
.np-about__img,
.np-about__img img {
min-height: 280px;
}
}
@media (max-width: 600px) {
.np-about {
padding: var(--np-space-10) 0;
}
.np-about__inner {
padding: 0 var(--np-space-4);
}
.np-about__images {
grid-template-columns: 1fr;
}
}
/* --------------------------------------------------------------------------
Blog Section — front page
-------------------------------------------------------------------------- */
.np-blog-home {
background: var(--np-surface-container-low);
padding: var(--np-space-16) 0;
}
.np-blog-home__inner {
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--np-space-8);
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: var(--np-space-12);
align-items: start;
}
.np-blog-home__cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--np-space-4);
}
.np-blog-card {
display: flex;
flex-direction: column;
padding: var(--np-space-6);
background: var(--np-surface-container-lowest);
border-radius: var(--np-radius-m, 8px);
text-decoration: none;
color: inherit;
transition: var(--np-transition);
position: relative;
border-left: 3px solid transparent;
}
.np-blog-card:hover {
border-left-color: var(--np-primary);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
transform: translateY(-2px);
}
.np-blog-card__meta {
display: flex;
align-items: center;
gap: var(--np-space-3);
margin-bottom: var(--np-space-3);
}
.np-blog-card__cat {
font-family: var(--np-font-label);
font-size: 0.5625rem;
text-transform: uppercase;
letter-spacing: 0.15em;
font-weight: 700;
color: var(--np-primary);
}
.np-blog-card__date {
font-family: var(--np-font-label);
font-size: 0.5625rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--np-on-surface-variant);
}
.np-blog-card__title {
font-family: var(--np-font-headline);
font-weight: 400;
font-size: 1rem;
line-height: 1.4;
color: var(--np-on-surface);
margin: 0 0 var(--np-space-4);
flex: 1;
}
.np-blog-card__arrow {
font-size: 1.125rem;
color: var(--np-on-surface-variant);
transition: color 0.2s, transform 0.2s;
}
.np-blog-card:hover .np-blog-card__arrow {
color: var(--np-primary);
transform: translateX(4px);
}
/* Right column — title + description */
.np-blog-home__info {
padding-top: var(--np-space-4);
}
.np-blog-home__title {
font-family: var(--np-font-headline);
font-weight: 200;
font-size: clamp(1.75rem, 3vw, 2.5rem);
line-height: 1.2;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--np-on-surface);
margin: 0 0 var(--np-space-6);
}
.np-blog-home__title em {
font-style: italic;
color: var(--np-primary);
}
.np-blog-home__desc {
font-size: 0.875rem;
line-height: 1.8;
color: var(--np-on-surface-variant);
margin: 0 0 var(--np-space-8);
max-width: 28rem;
}
.np-blog-home__link {
display: inline-flex;
align-items: center;
gap: var(--np-space-3);
font-family: var(--np-font-label);
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.3em;
color: var(--np-on-surface);
text-decoration: none;
}
.np-blog-home__link-line {
display: block;
width: 2rem;
height: 1px;
background: var(--np-gradient-primary);
transition: width 0.3s ease;
}
.np-blog-home__link:hover .np-blog-home__link-line {
width: 3rem;
}
@media (max-width: 900px) {
.np-blog-home__inner {
grid-template-columns: 1fr;
gap: var(--np-space-8);
}
.np-blog-home__info {
order: -1;
padding-top: 0;
}
}
@media (max-width: 600px) {
.np-blog-home {
padding: var(--np-space-10) 0;
}
.np-blog-home__inner {
padding: 0 var(--np-space-4);
}
.np-blog-home__cards {
grid-template-columns: 1fr;
}
}
/* --------------------------------------------------------------------------
Instagram Section — front page
-------------------------------------------------------------------------- */
.np-instagram {
background: #fff;
padding: var(--np-space-12) 0 0;
text-align: center;
}
.np-instagram__header {
max-width: 700px;
margin: 0 auto var(--np-space-8);
padding: 0 var(--np-space-4);
}
.np-instagram__subtitle {
font-family: var(--np-font-label);
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--np-on-surface-variant);
margin: 0 0 var(--np-space-2);
}
.np-instagram__subtitle strong {
color: var(--np-primary);
}
.np-instagram__title {
font-family: var(--np-font-headline);
font-weight: 200;
font-size: clamp(1.5rem, 3vw, 2.25rem);
color: var(--np-on-surface);
margin: 0;
}
.np-instagram__title em {
font-style: normal;
color: var(--np-primary);
}
.np-instagram__grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 0;
width: 100%;
}
.np-instagram__item {
position: relative;
aspect-ratio: 1;
overflow: hidden;
display: block;
}
.np-instagram__item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.np-instagram__item:hover img {
transform: scale(1.08);
}
.np-instagram__overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--np-hover-overlay);
opacity: 0;
transition: opacity 0.3s ease;
}
.np-instagram__item:hover .np-instagram__overlay {
opacity: 1;
}
.np-instagram__icon {
color: #fff;
}
.np-instagram__follow {
padding: var(--np-space-6) 0 var(--np-space-10);
}
.np-instagram__follow-btn {
display: inline-flex;
align-items: center;
gap: var(--np-space-2);
font-family: var(--np-font-label);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.05em;
color: var(--np-on-surface);
text-decoration: none;
padding: var(--np-space-2) var(--np-space-5);
border: 1px solid var(--np-outline-variant);
border-radius: 100px;
transition: var(--np-transition);
}
.np-instagram__follow-btn:hover {
border-color: var(--np-primary);
color: var(--np-primary);
background: rgba(47, 128, 237, 0.04);
}
.np-instagram__follow-btn svg {
flex-shrink: 0;
}
@media (max-width: 900px) {
.np-instagram__grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 600px) {
.np-instagram__grid {
grid-template-columns: repeat(2, 1fr);
}
.np-instagram {
padding-top: var(--np-space-8);
}
}
/* --------------------------------------------------------------------------
13. Posts Grid
-------------------------------------------------------------------------- */
.np-posts-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--np-space-8);
padding: var(--np-space-12) 0;
}
.np-post-card {
background: var(--np-surface-container-lowest);
transition: var(--np-transition);
}
.np-post-card:hover {
background: var(--np-surface-container-low);
}
.np-post-card__image {
display: block;
aspect-ratio: 16/10;
overflow: hidden;
}
.np-post-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.np-post-card__content {
padding: var(--np-space-6);
}
.np-post-card__meta {
font-family: var(--np-font-label);
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--np-on-surface-variant);
margin-bottom: var(--np-space-3);
}
.np-post-card__title {
font-weight: 300;
font-size: 1.125rem;
margin-bottom: var(--np-space-3);
}
.np-post-card__title a:hover {
color: var(--np-primary);
}
.np-post-card__excerpt {
font-size: 0.875rem;
color: var(--np-on-surface-variant);
line-height: 1.7;
}
/* --------------------------------------------------------------------------
14. Pagination
-------------------------------------------------------------------------- */
.nav-links {
display: flex;
align-items: center;
justify-content: center;
gap: var(--np-space-2);
padding: var(--np-space-12) 0;
}
.nav-links .page-numbers {
display: flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
height: 2.5rem;
padding: 0 var(--np-space-3);
font-family: var(--np-font-label);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.1em;
color: var(--np-on-surface-variant);
background: var(--np-surface-container-lowest);
transition: var(--np-transition);
}
.nav-links .page-numbers:hover {
background: var(--np-surface-container-low);
color: var(--np-on-surface);
}
.nav-links .page-numbers.current {
background: var(--np-on-surface);
color: var(--np-surface);
}
/* --------------------------------------------------------------------------
15. Page Content (Gutenberg blocks)
-------------------------------------------------------------------------- */
.np-page-content {
padding: var(--np-space-12) 0 var(--np-space-24);
}
.np-page-content p,
.np-page-content ul,
.np-page-content ol {
font-size: 1rem;
line-height: 1.8;
color: var(--np-on-surface-variant);
margin-bottom: var(--np-space-6);
}
.np-page-content h2 { margin: var(--np-space-12) 0 var(--np-space-6); }
.np-page-content h3 { margin: var(--np-space-8) 0 var(--np-space-4); }
.np-page-content h4 { margin: var(--np-space-6) 0 var(--np-space-3); }
.np-page-content ul,
.np-page-content ol {
padding-left: var(--np-space-6);
}
.np-page-content ul { list-style: disc; }
.np-page-content ol { list-style: decimal; }
.np-page-content blockquote {
border-left: 4px solid var(--np-primary);
padding: var(--np-space-6) var(--np-space-8);
margin: var(--np-space-8) 0;
background: var(--np-surface-container-low);
font-family: var(--np-font-headline);
font-weight: 300;
font-size: 1.125rem;
font-style: italic;
}
.np-page-content img {
margin: var(--np-space-8) 0;
}
.np-page-content .alignwide {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
.np-page-content .alignfull {
max-width: 100vw;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
}
/* --------------------------------------------------------------------------
16. Single Post — Full-width editorial layout
-------------------------------------------------------------------------- */
/* ---- Hero (compact bar) ---- */
.np-single-hero {
background: var(--np-surface-container-low);
padding: var(--np-space-8) var(--np-space-8) var(--np-space-6);
}
.np-single-hero__inner {
max-width: 1400px;
margin: 0 auto;
}
.np-single-hero__meta {
display: flex;
align-items: center;
gap: var(--np-space-4);
margin-bottom: var(--np-space-3);
font-family: var(--np-font-label);
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--np-on-surface-variant);
}
.np-single-hero__cat {
background: var(--np-gradient-primary);
color: #fff;
padding: var(--np-space-1) var(--np-space-3);
border-radius: var(--np-radius-sm);
font-size: 0.5625rem;
font-weight: 600;
letter-spacing: 0.18em;
}
.np-single-hero__title {
font-weight: 200;
font-size: clamp(1.5rem, 3vw, 2.25rem);
line-height: 1.2;
color: var(--np-on-surface);
}
/* ---- Featured image (full-width) ---- */
.np-single-featured {
max-width: 1400px;
margin: 0 auto;
padding: var(--np-space-8) var(--np-space-8) 0;
}
.np-single-featured__img {
width: 100%;
max-height: 560px;
object-fit: cover;
border-radius: var(--np-radius-lg);
display: block;
}
/* ---- Article body (full-width) ---- */
.np-single-body {
max-width: 1400px;
margin: 0 auto;
padding: var(--np-space-10) var(--np-space-8);
}
.np-single-body__content {
font-size: 1.0625rem;
line-height: 1.9;
color: var(--np-on-surface);
}
.np-single-body__content > * + * {
margin-top: var(--np-space-5);
}
.np-single-body__content h2 {
font-weight: 300;
font-size: 1.75rem;
margin-top: var(--np-space-12);
margin-bottom: var(--np-space-4);
color: var(--np-on-surface);
}
.np-single-body__content h3 {
font-weight: 400;
font-size: 1.3125rem;
margin-top: var(--np-space-10);
margin-bottom: var(--np-space-3);
color: var(--np-on-surface);
}
.np-single-body__content h4 {
font-weight: 600;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: var(--np-space-8);
margin-bottom: var(--np-space-3);
}
.np-single-body__content p {
color: var(--np-on-surface-variant);
}
.np-single-body__content strong {
color: var(--np-on-surface);
font-weight: 600;
}
.np-single-body__content a {
color: var(--np-primary);
text-decoration: underline;
text-underline-offset: 2px;
}
.np-single-body__content a:hover {
color: var(--np-primary-dark);
}
.np-single-body__content blockquote {
border-left: 3px solid var(--np-primary);
margin: var(--np-space-8) 0;
padding: var(--np-space-4) var(--np-space-6);
font-style: italic;
font-size: 1.125rem;
color: var(--np-on-surface);
background: var(--np-surface-container-lowest);
}
.np-single-body__content ul,
.np-single-body__content ol {
padding-left: var(--np-space-6);
color: var(--np-on-surface-variant);
}
.np-single-body__content li {
margin-bottom: var(--np-space-2);
}
.np-single-body__content li::marker {
color: var(--np-primary);
}
.np-single-body__content .wp-block-image {
margin: var(--np-space-6) 0;
border-radius: var(--np-radius-lg);
overflow: hidden;
}
.np-single-body__content .wp-block-image img,
.np-single-body__content figure img {
width: 100%;
height: auto;
display: block;
border-radius: var(--np-radius-lg);
}
.np-single-body__content .wp-block-image figcaption {
text-align: center;
font-size: 0.8125rem;
color: var(--np-on-surface-variant);
margin-top: var(--np-space-2);
}
.np-single-body__content pre,
.np-single-body__content code {
font-family: 'JetBrains Mono', 'Fira Code', monospace;
font-size: 0.875rem;
}
.np-single-body__content pre {
background: var(--np-surface-container-highest);
padding: var(--np-space-5);
border-radius: var(--np-radius-md);
overflow-x: auto;
margin: var(--np-space-6) 0;
}
.np-single-body__content code {
background: var(--np-surface-container-high);
padding: 0.15em 0.4em;
border-radius: 3px;
}
.np-single-body__content hr,
.np-single-body__content .wp-block-separator {
border: none;
height: 1px;
background: var(--np-outline-variant);
margin: var(--np-space-10) 0;
}
/* Hide Table of Contents (heading + list combo at the top) */
.np-single-body__content > .wp-block-table-of-contents,
.np-single-body__content > [class*="toc"],
.np-single-body__content > .wp-block-yoast-seo-table-of-contents {
display: none !important;
}
/* ---- Tags ---- */
.np-single-body__tags {
margin-top: var(--np-space-10);
padding-top: var(--np-space-6);
border-top: 1px solid var(--np-outline-variant);
}
.np-single-body__tags .np-tags a {
display: inline-block;
padding: var(--np-space-1) var(--np-space-3);
background: var(--np-surface-container-high);
font-family: var(--np-font-label);
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.12em;
margin: 0 var(--np-space-1) var(--np-space-2) 0;
color: var(--np-on-surface-variant);
border-radius: var(--np-radius-sm);
transition: var(--np-transition);
}
.np-single-body__tags .np-tags a:hover {
background: var(--np-gradient-primary);
color: #fff;
}
/* ---- Author box ---- */
.np-single-author {
display: flex;
align-items: center;
gap: var(--np-space-4);
margin-top: var(--np-space-8);
padding: var(--np-space-5) var(--np-space-6);
background: var(--np-surface-container-lowest);
border-radius: var(--np-radius-md);
border: 1px solid var(--np-outline-variant);
}
.np-single-author__avatar img {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
}
.np-single-author__label {
display: block;
font-family: var(--np-font-label);
font-size: 0.5625rem;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--np-on-surface-variant);
margin-bottom: 2px;
}
.np-single-author__name {
font-family: var(--np-font-headline);
font-weight: 400;
font-size: 0.9375rem;
color: var(--np-on-surface);
}
/* ---- Post navigation ---- */
.np-single-nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--np-space-6);
margin-top: var(--np-space-12);
padding-top: var(--np-space-8);
border-top: 1px solid var(--np-outline-variant);
}
.np-single-nav__link {
display: inline-flex;
flex-direction: column;
gap: 4px;
transition: var(--np-transition);
}
.np-single-nav__link:hover .np-single-nav__title {
color: var(--np-primary);
}
.np-single-nav__link--next {
text-align: right;
margin-left: auto;
}
.np-single-nav__dir {
font-family: var(--np-font-label);
font-size: 0.5625rem;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--np-primary);
}
.np-single-nav__title {
font-family: var(--np-font-headline);
font-weight: 300;
font-size: 1rem;
color: var(--np-on-surface);
line-height: 1.4;
transition: color 0.2s ease;
}
/* ---- Single post responsive ---- */
@media (max-width: 600px) {
.np-single-hero {
padding: var(--np-space-6) var(--np-space-4);
}
.np-single-hero__title {
font-size: 1.375rem;
}
.np-single-hero__meta {
flex-wrap: wrap;
gap: var(--np-space-2);
}
.np-single-body {
padding: var(--np-space-8) var(--np-space-4);
}
.np-single-body__content {
font-size: 1rem;
}
.np-single-nav {
flex-direction: column;
align-items: flex-start;
}
.np-single-nav__link--next {
text-align: left;
margin-left: 0;
}
}
/* --------------------------------------------------------------------------
17. Search Results
-------------------------------------------------------------------------- */
.np-search-result {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--np-space-6);
padding: var(--np-space-6) 0;
border-bottom: 1px solid var(--np-outline-variant);
}
.np-search-result:first-child {
padding-top: 0;
}
.np-search-result__type {
font-family: var(--np-font-label);
font-size: 0.5625rem;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--np-primary);
font-weight: 700;
}
.np-search-result__title a:hover {
color: var(--np-primary);
}
.np-search-result__thumb {
flex-shrink: 0;
width: 80px;
height: 80px;
}
.np-search-result__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* --------------------------------------------------------------------------
18. Empty State / 404
-------------------------------------------------------------------------- */
.np-empty-state {
text-align: center;
padding: var(--np-space-24) var(--np-space-8);
}
.np-empty-state--large {
padding: var(--np-space-24) var(--np-space-8);
min-height: 60vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.np-empty-state__code {
font-family: var(--np-font-headline);
font-weight: 200;
font-size: clamp(5rem, 15vw, 12rem);
line-height: 1;
color: var(--np-surface-container-highest);
margin-bottom: var(--np-space-4);
}
.np-empty-state__icon {
font-size: 3rem !important;
color: var(--np-outline-variant);
margin-bottom: var(--np-space-6);
display: block;
}
.np-empty-state__title {
font-weight: 300;
font-size: 1.5rem;
margin-bottom: var(--np-space-4);
}
.np-empty-state__text {
color: var(--np-on-surface-variant);
font-size: 0.875rem;
max-width: 400px;
margin: 0 auto var(--np-space-8);
line-height: 1.7;
}
/* --------------------------------------------------------------------------
19. Footer — Minimal
-------------------------------------------------------------------------- */
.np-footer {
background: var(--np-surface-container-low);
color: var(--np-on-surface-variant);
border-top: 1px solid var(--np-outline-variant);
}
.np-footer__bar {
max-width: 1400px;
margin: 0 auto;
padding: var(--np-space-8) var(--np-space-8);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--np-space-6);
flex-wrap: wrap;
}
.np-footer__brand .custom-logo-link img,
.np-footer__brand .custom-logo {
height: 1.75rem;
width: auto;
}
.np-footer__logo-text {
font-family: var(--np-font-headline);
font-weight: 700;
font-size: 1rem;
color: var(--np-on-surface);
}
.np-footer__info,
.np-footer__contact {
display: flex;
align-items: center;
gap: var(--np-space-2);
font-family: var(--np-font-label);
font-size: 0.625rem;
letter-spacing: 0.05em;
flex-wrap: wrap;
}
.np-footer__contact a {
color: var(--np-on-surface-variant);
text-decoration: none;
transition: color 0.2s;
}
.np-footer__contact a:hover {
color: var(--np-primary);
}
.np-footer__sep {
opacity: 0.3;
}
.np-footer__social {
display: flex;
align-items: center;
gap: var(--np-space-3);
}
.np-footer__social a {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--np-surface-container);
color: var(--np-on-surface-variant);
transition: background 0.2s, color 0.2s;
}
.np-footer__social a:hover {
background: var(--np-gradient-primary);
color: #fff;
}
.np-footer__copy {
border-top: 1px solid var(--np-outline-variant);
text-align: center;
padding: var(--np-space-4) var(--np-space-8);
}
.np-footer__copy p {
font-family: var(--np-font-label);
font-size: 0.5625rem;
letter-spacing: 0.1em;
color: var(--np-on-surface-variant);
opacity: 0.6;
margin: 0;
}
@media (max-width: 900px) {
.np-footer__bar {
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--np-space-4);
}
.np-footer__info,
.np-footer__contact {
justify-content: center;
}
}
/* --------------------------------------------------------------------------
19b. Footer — Expanded (front page only, for SEO / sitemap-style links)
The minimalist bar above is reused on every internal page; the front
page renders this richer block instead so search engines see all of
the legal / category links from the homepage in one crawl.
Uses the same light surface palette as the minimal banner — only the
layout (grid of columns) differs.
-------------------------------------------------------------------------- */
.np-footer--expanded {
background: var(--np-surface-container-low);
color: var(--np-on-surface-variant);
border-top: 1px solid var(--np-outline-variant);
}
.np-footer__expanded {
padding: var(--np-space-12) var(--np-space-8) var(--np-space-10);
}
.np-footer__expanded-inner {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
gap: var(--np-space-12);
align-items: start;
}
.np-footer__col {
display: flex;
flex-direction: column;
gap: var(--np-space-4);
min-width: 0;
}
.np-footer__col--brand {
gap: var(--np-space-6);
}
/* Logo on the expanded footer — keep original colors (matches the
minimal banner). The .np-footer__brand--dark class is kept for
markup compatibility but no longer inverts. */
.np-footer__brand--dark .custom-logo,
.np-footer__brand--dark .custom-logo-link img,
.np-footer__brand--dark img {
height: 2.75rem;
width: auto;
}
.np-footer__brand--dark .np-footer__logo-text {
color: var(--np-on-surface);
font-size: 1.5rem;
}
.np-footer__company {
display: flex;
flex-direction: column;
gap: var(--np-space-2);
}
.np-footer__company p {
margin: 0;
font-family: var(--np-font-label);
font-size: 0.75rem;
letter-spacing: 0.05em;
color: var(--np-on-surface-variant);
}
.np-footer__col-title {
font-family: var(--np-font-headline);
font-size: 0.95rem;
font-weight: 600;
color: var(--np-on-surface);
margin: 0 0 var(--np-space-2);
letter-spacing: 0.01em;
}
.np-footer__links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--np-space-3);
}
.np-footer__links a {
color: var(--np-on-surface-variant);
text-decoration: none;
font-family: var(--np-font-body);
font-size: 0.875rem;
line-height: 1.4;
transition: color 0.2s;
}
.np-footer__links a:hover {
color: var(--np-primary);
}
.np-footer__contact-list {
list-style: none;
margin: 0 0 var(--np-space-6);
padding: 0;
display: flex;
flex-direction: column;
gap: var(--np-space-3);
font-family: var(--np-font-body);
font-size: 0.875rem;
color: var(--np-on-surface-variant);
line-height: 1.4;
}
.np-footer__contact-list li {
margin: 0;
}
.np-footer__contact-list span {
color: var(--np-on-surface);
font-weight: 500;
margin-right: var(--np-space-1);
}
.np-footer__contact-list a {
color: var(--np-on-surface-variant);
text-decoration: none;
transition: color 0.2s;
}
.np-footer__contact-list a:hover {
color: var(--np-primary);
}
/* Social icons on the expanded footer — match the minimal banner
(.np-footer__social a in §19). The --dark modifier is kept so
markup stays identical, but no longer applies a dark style. */
.np-footer__social--dark a {
background: var(--np-surface-container);
color: var(--np-on-surface-variant);
}
.np-footer__social--dark a:hover {
background: var(--np-gradient-primary);
color: #fff;
}
.np-footer__copy--dark {
background: var(--np-surface-container-low);
border-top: 1px solid var(--np-outline-variant);
text-align: center;
padding: var(--np-space-4) var(--np-space-8);
}
.np-footer__copy--dark p {
font-family: var(--np-font-label);
font-size: 0.5625rem;
letter-spacing: 0.1em;
color: var(--np-on-surface-variant);
opacity: 0.6;
margin: 0;
}
@media (max-width: 1024px) {
.np-footer__expanded-inner {
grid-template-columns: 1fr 1fr;
gap: var(--np-space-10) var(--np-space-8);
}
}
@media (max-width: 600px) {
.np-footer__expanded {
padding: var(--np-space-10) var(--np-space-5) var(--np-space-8);
}
.np-footer__expanded-inner {
grid-template-columns: 1fr;
gap: var(--np-space-8);
}
.np-footer__col--brand {
gap: var(--np-space-4);
}
}
/* --------------------------------------------------------------------------
20. Widgets
-------------------------------------------------------------------------- */
.np-widget {
margin-bottom: var(--np-space-8);
}
.np-widget__title {
font-family: var(--np-font-headline);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
margin-bottom: var(--np-space-4);
padding-bottom: var(--np-space-3);
border-bottom: 2px solid var(--np-primary);
}
/* --------------------------------------------------------------------------
21. Forms
-------------------------------------------------------------------------- */
.np-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
width: 100%;
padding: 0.875rem 0;
border: none;
border-bottom: 1px solid var(--np-outline-variant);
background: transparent;
font-family: var(--np-font-body);
font-size: 0.875rem;
color: var(--np-on-surface);
outline: none;
transition: var(--np-transition);
border-radius: 0;
-webkit-appearance: none;
}
.np-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
border-bottom-color: var(--np-secondary);
border-bottom-width: 2px;
}
.np-label,
label {
font-family: var(--np-font-label);
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--np-on-surface-variant);
margin-bottom: var(--np-space-2);
display: block;
}
select {
padding: 0.875rem var(--np-space-8) 0.875rem 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2357404e' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0 center;
}
textarea {
min-height: 120px;
resize: vertical;
border: 1px solid var(--np-outline-variant);
padding: var(--np-space-4);
}
textarea:focus {
border-color: var(--np-secondary);
}
/* --------------------------------------------------------------------------
22. Responsive — Tablet
-------------------------------------------------------------------------- */
@media (min-width: 768px) {
.np-navbar__links {
display: flex;
}
.np-mobile-toggle {
display: none;
}
}
/* --------------------------------------------------------------------------
23. Responsive — Mobile
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
:root {
--np-navbar-height: 4rem;
--np-hero-site-gutter: var(--np-space-4);
/* Slightly trimmed mobile hero — the tag + title + 3 stacked
specs + CTA + carousel dots still fit comfortably, but the page
below the hero is reachable with less scrolling on phones. */
--np-hero-banner-height: clamp(480px, min(70vh, 560px), 600px);
}
.np-navbar__inner {
padding: 0 var(--np-space-4);
}
.np-navbar__links {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
flex-direction: column;
background: var(--np-surface-container-lowest);
box-shadow: var(--np-shadow-ambient);
padding: var(--np-space-6) var(--np-space-4);
gap: var(--np-space-4);
}
.np-navbar__links.is-open {
display: flex;
}
/* Mobile dropdown: inline instead of absolute */
.np-nav__item--has-dropdown {
flex-direction: column;
align-items: flex-start;
}
.np-dropdown {
position: static;
transform: none;
opacity: 1;
visibility: visible;
box-shadow: none;
padding: 0 0 0 var(--np-space-4);
min-width: auto;
background: transparent;
}
.np-dropdown__link {
padding: var(--np-space-2) 0;
font-size: 0.75rem;
}
.np-container {
padding: 0 var(--np-space-4);
}
.np-container--wide {
padding: 0 var(--np-space-4);
}
.np-hero-cover .wp-block-cover__inner-container {
padding: var(--np-space-4);
}
.np-hero-cover--content-left .wp-block-cover__inner-container {
padding-left: max(
var(--np-hero-site-gutter),
env(safe-area-inset-left, 0px),
var(--np-hero-split-art-inset, 0rem),
calc((100vw - var(--np-content-max-width)) / 2 + var(--np-space-8))
);
padding-right: max(
var(--np-hero-site-gutter),
env(safe-area-inset-right, 0px),
0.75rem,
calc((100vw - var(--np-content-max-width)) / 2 + var(--np-space-8))
);
}
.wp-block-cover.np-hero-cover.np-hero-cover--split-bg {
--np-hero-split-art-inset: clamp(1.25rem, 10vw, 6rem);
}
.np-hero-title {
font-size: clamp(1.5rem, 5.5vw + 0.35rem, 3.25rem) !important;
}
.np-hero-spec__value {
letter-spacing: 0.06em !important;
}
.np-hero-specs {
flex-direction: column;
align-items: center;
gap: var(--np-space-4) !important;
}
.np-hero-cover--content-left .np-hero-specs {
align-items: flex-start;
}
.np-hero-spec--bordered {
padding-left: 0;
padding-top: var(--np-space-4);
border-left: none;
border-top: 1px solid rgba(222, 190, 207, 0.3);
}
/* --- Mobile hero composition ---
On phones the specs collapse to a vertical column, making the content
stack much taller than on desktop. We:
- Top-align the inner container so the title sits high in the frame
and the CTA shows naturally below the specs.
- Trim oversized vertical margins between blocks.
- Reserve bottom padding so the CTA never collides with the carousel
dots row sitting at the bottom of the carousel container.
The mobile banner height (above) is increased so this padding fits. */
.np-hero-cover .wp-block-cover__inner-container {
align-items: flex-start;
padding-top: calc(var(--np-space-6) + 0.5rem);
padding-bottom: calc(var(--np-space-16) + 0.5rem);
}
.np-hero-title {
margin-bottom: var(--np-space-5) !important;
}
.np-hero-tag {
margin-bottom: var(--np-space-4) !important;
}
.np-hero-specs {
margin-bottom: var(--np-space-6) !important;
}
.np-hero-buttons {
margin-top: var(--np-space-2) !important;
position: relative;
z-index: 11; /* keep CTA fully clickable even if dots row lives close */
}
.np-hero-buttons .wp-block-button__link {
font-size: 0.8125rem !important;
padding: 0.85rem 1.25rem !important;
}
/* Anchor the carousel dots to the very bottom of the slide, well below
the CTA which now ends ~4rem above the bottom edge. */
.np-hero-carousel__dots {
bottom: calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
}
.np-categories-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: var(--np-space-3);
}
.np-catgrid-row {
grid-template-columns: repeat(2, 1fr) !important;
gap: var(--np-space-3) !important;
}
.np-catgrid-row > .wp-block-column {
width: 100% !important;
}
.np-catcard,
.wp-block-cover.np-catcard {
aspect-ratio: 1 / 1 !important;
min-height: 0 !important;
}
/* ======================================================================
Mobile-only homepage composition (does NOT touch the desktop layout).
Three things change here:
1. Hero tag (line + "PIT EQUIPMENT // NEW ARRIVAL"): stacks
vertically on phones, with the LABEL on top and the small line
BELOW it (the user wants the eye to read the category label
first, then the underline accent, then the big hero title).
2. Hero banner is shrunk a touch on phones so the page feels less
scroll-heavy on small screens.
3. The "Technical Categories" section is pulled up against the
hero with a much smaller top padding.
4. The "New Products" header (tag + title + View All) is pushed
BELOW the stats section, fully centered, with reduced spacing
so the products start near the top of the viewport.
====================================================================== */
/* 1. Hero tag stacks vertically — text on top, line below. */
.np-hero-tag {
flex-direction: column !important;
align-items: flex-start !important;
gap: var(--np-space-2) !important;
margin-bottom: var(--np-space-3) !important;
}
.np-hero-cover--content-left .np-hero-tag,
.np-hero-cover--content-center .np-hero-tag {
align-items: flex-start !important;
}
/* The separator block is the FIRST child of .np-hero-tag in the source,
and the text is the SECOND child. We want the text on top visually,
so we re-order with order:1 / order:2. */
.np-hero-tag .np-hero-tag__text,
.np-hero-tag p.np-hero-tag__text {
order: 1;
margin: 0 0 var(--np-space-1) 0 !important;
}
.np-hero-tag .np-hero-tag__line,
.np-hero-tag hr.np-hero-tag__line {
order: 2;
width: 2.25rem !important;
margin: 0 !important;
}
/* 2. Hero banner shrink is configured at the top of this @media block
(--np-hero-banner-height was lowered to clamp(480px, min(70vh, 560px), 600px)). */
/* 3. Pull "Technical Categories" up against the hero with much less
top padding. Keep bottom padding so the section still breathes
before the stats block underneath. */
.np-categories-section {
padding-top: var(--np-space-6) !important;
padding-bottom: var(--np-space-10) !important;
padding-left: var(--np-space-4) !important;
padding-right: var(--np-space-4) !important;
}
/* The section header (h2 + accent line) gets less margin-bottom on
mobile so the first row of cards is closer to the title. */
.np-section-header {
margin-bottom: var(--np-space-4) !important;
}
.np-categories-section .np-catgrid-row:first-of-type {
margin-top: 0 !important;
}
/* 4. New Products: header is centered, products are pulled up. */
.np-new-products {
padding-top: var(--np-space-3) !important;
padding-bottom: var(--np-space-6) !important;
padding-left: var(--np-space-4) !important;
padding-right: var(--np-space-4) !important;
}
.np-new-products__header {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
gap: var(--np-space-3) !important;
margin-bottom: var(--np-space-5) !important;
width: 100% !important;
}
/* The header's first child is a Gutenberg group containing the
tag + title; flatten it so it can center inline. */
.np-new-products__header > .wp-block-group {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
.np-new-products__tag {
text-align: center !important;
margin: 0 0 var(--np-space-1) 0 !important;
width: 100%;
}
.np-new-products__title {
text-align: center !important;
margin: 0 !important;
font-size: clamp(1.25rem, 6vw, 1.75rem) !important;
line-height: 1.2 !important;
word-break: break-word;
width: 100%;
}
/* "View All" button row — full-width centered, sized comfortably
so it never overflows or gets clipped by the right edge. */
.np-new-products__header .wp-block-buttons {
display: flex !important;
justify-content: center !important;
width: 100% !important;
margin: 0 !important;
}
.np-new-products__view-all-btn,
.np-new-products__view-all-btn .wp-block-button__link {
margin: 0 auto !important;
}
/* Trim the gap between the centered header and the first row of
product cards so the products feel "raised" toward the viewport. */
.np-new-products .np-products-grid,
.np-new-products .np-new-products__grid,
.np-new-products [class*="products"] {
margin-top: var(--np-space-3) !important;
}
.np-stats-section {
padding-top: var(--np-space-12) !important;
padding-bottom: var(--np-space-4) !important;
padding-left: var(--np-space-4) !important;
padding-right: var(--np-space-4) !important;
}
.np-stats__text {
margin-bottom: var(--np-space-4) !important;
}
.np-stats__link {
margin-bottom: 0 !important;
}
.np-stats__columns {
flex-direction: column !important;
}
.np-page-header {
padding: var(--np-space-6) 0 var(--np-space-4);
}
.np-posts-grid {
grid-template-columns: 1fr;
}
.np-search-result {
flex-direction: column-reverse;
}
.np-search-result__thumb {
width: 100%;
height: 160px;
}
}
/* --------------------------------------------------------------------------
24. Utility: Technical Textures
-------------------------------------------------------------------------- */
.technical-grid-line {
background-image: linear-gradient(to right, var(--np-outline-variant) 10%, rgba(255, 255, 255, 0) 0%);
background-position: bottom;
background-size: 8px 1px;
background-repeat: repeat-x;
}
/* Visually hidden (screen readers) */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
/* WordPress core alignment overrides */
.alignleft { float: left; margin-right: var(--np-space-6); }
.alignright { float: right; margin-left: var(--np-space-6); }
.aligncenter { display: block; margin: 0 auto; }
/* --------------------------------------------------------------------------
25. Blog Page
-------------------------------------------------------------------------- */
.np-blog-featured {
padding: var(--np-space-12) 0;
border-bottom: 1px solid var(--np-outline-variant);
margin-bottom: var(--np-space-12);
}
.np-blog-featured__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--np-space-10);
align-items: center;
}
.np-blog-featured__image {
display: block;
aspect-ratio: 16/10;
overflow: hidden;
background: var(--np-surface-container-low);
}
.np-blog-featured__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease;
}
.np-blog-featured:hover .np-blog-featured__image img {
transform: scale(1.03);
}
.np-blog-featured__meta {
display: flex;
align-items: center;
gap: var(--np-space-4);
font-family: var(--np-font-label);
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--np-on-surface-variant);
margin-bottom: var(--np-space-4);
}
.np-blog-featured__badge {
display: inline-block;
padding: 0.2rem 0.6rem;
background: var(--np-gradient-primary);
color: #fff;
font-size: 0.5625rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.np-blog-featured__cats a {
display: inline-block;
padding: var(--np-space-1) var(--np-space-3);
background: var(--np-surface-container-highest);
font-size: 0.5625rem;
font-family: var(--np-font-label);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--np-on-surface-variant);
margin-right: var(--np-space-2);
margin-bottom: var(--np-space-4);
}
.np-blog-featured__title {
font-weight: 200;
font-size: clamp(1.5rem, 3vw, 2.25rem);
letter-spacing: -0.02em;
margin-bottom: var(--np-space-4);
line-height: 1.2;
}
.np-blog-featured__title a:hover {
color: var(--np-primary);
}
.np-blog-featured__excerpt {
font-size: 0.875rem;
color: var(--np-on-surface-variant);
line-height: 1.8;
margin-bottom: var(--np-space-6);
}
.np-blog-featured__link {
display: inline-flex;
align-items: center;
gap: var(--np-space-3);
font-family: var(--np-font-label);
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.3em;
color: var(--np-on-surface);
}
.np-blog-featured__link-line {
display: block;
width: 2rem;
height: 1px;
background: var(--np-gradient-primary);
transition: var(--np-transition);
}
.np-blog-featured__link:hover .np-blog-featured__link-line {
width: 3rem;
}
.np-blog-grid-header {
margin-bottom: var(--np-space-8);
}
.np-blog-grid-header__title {
font-weight: 200;
font-size: 1.5rem;
letter-spacing: -0.02em;
margin-bottom: var(--np-space-2);
}
.np-blog-grid-header__accent {
width: 3rem;
height: 4px;
background: var(--np-secondary);
}
/* --------------------------------------------------------------------------
26. Comments
-------------------------------------------------------------------------- */
.np-comments {
padding: var(--np-space-12) 0 var(--np-space-16);
margin-top: var(--np-space-8);
border-top: 1px solid var(--np-outline-variant);
}
.np-comments__title {
font-weight: 200;
font-size: 1.5rem;
margin-bottom: var(--np-space-8);
}
.np-comments__list {
list-style: none;
padding: 0;
margin: 0 0 var(--np-space-12);
}
.np-comment {
padding: var(--np-space-6) 0;
border-bottom: 1px solid var(--np-outline-variant);
}
.np-comment__inner {
display: flex;
gap: var(--np-space-4);
}
.np-comment__avatar img {
width: 48px;
height: 48px;
border-radius: 50%;
}
.np-comment__body {
flex: 1;
min-width: 0;
}
.np-comment__header {
display: flex;
align-items: baseline;
gap: var(--np-space-4);
margin-bottom: var(--np-space-3);
}
.np-comment__author {
font-family: var(--np-font-headline);
font-weight: 400;
font-size: 0.9375rem;
}
.np-comment__date {
font-family: var(--np-font-label);
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--np-on-surface-variant);
}
.np-comment__content p {
font-size: 0.875rem;
color: var(--np-on-surface-variant);
line-height: 1.8;
}
.np-comment__moderation {
font-size: 0.8125rem;
color: var(--np-secondary);
font-style: italic;
margin-bottom: var(--np-space-3);
}
.np-comment__actions {
display: flex;
gap: var(--np-space-6);
margin-top: var(--np-space-3);
}
.np-comment__reply a,
.np-comment__edit a {
font-family: var(--np-font-label);
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--np-primary);
}
.np-comment__reply a:hover,
.np-comment__edit a:hover {
color: var(--np-primary-container);
}
.np-comments__closed {
font-size: 0.875rem;
color: var(--np-on-surface-variant);
font-style: italic;
padding: var(--np-space-6) 0;
}
/* Comment form */
.np-comment-form .comment-reply-title {
font-family: var(--np-font-headline);
font-weight: 200;
font-size: 1.5rem;
margin-bottom: var(--np-space-6);
}
.np-comment-form .np-comment-form__field {
margin-bottom: var(--np-space-5);
}
.np-comment-form .comment-form-author,
.np-comment-form .comment-form-email,
.np-comment-form .comment-form-url {
margin-bottom: var(--np-space-5);
}
.np-comment-form .form-submit {
margin-top: var(--np-space-6);
}
/* --------------------------------------------------------------------------
27. Checkout Steps
-------------------------------------------------------------------------- */
.np-checkout-steps {
display: flex;
align-items: center;
gap: 0;
margin-bottom: var(--np-space-8);
}
.np-checkout-step {
display: flex;
align-items: center;
}
.np-checkout-step__inner {
display: flex;
align-items: center;
gap: var(--np-space-3);
text-decoration: none;
color: var(--np-on-surface-variant);
transition: var(--np-transition);
}
a.np-checkout-step__inner:hover {
color: var(--np-primary);
}
.np-checkout-step__num {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
font-family: var(--np-font-headline);
font-weight: 300;
font-size: 0.8125rem;
background: var(--np-surface-container-highest);
color: var(--np-on-surface-variant);
transition: var(--np-transition);
}
.np-checkout-step--active .np-checkout-step__num {
background: var(--np-gradient-primary);
color: #fff;
}
.np-checkout-step--done .np-checkout-step__num {
background: var(--np-secondary);
color: #fff;
}
.np-checkout-step__label {
font-family: var(--np-font-label);
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 500;
}
.np-checkout-step--active .np-checkout-step__label {
color: var(--np-on-surface);
font-weight: 600;
}
.np-checkout-steps__sep {
display: block;
width: 3rem;
height: 1px;
background: var(--np-outline-variant);
margin: 0 var(--np-space-4);
}
/* --------------------------------------------------------------------------
28. Shop Page Header
-------------------------------------------------------------------------- */
.np-shop-header {
background: var(--np-surface-container-low);
padding-bottom: var(--np-space-10);
margin-bottom: var(--np-space-2);
}
.np-shop-header--compact {
padding-bottom: var(--np-space-4);
}
.np-shop-header--compact .np-shop-header__title {
margin-bottom: 0;
}
.np-shop-header .np-breadcrumbs {
padding-top: var(--np-space-4);
padding-bottom: var(--np-space-2);
}
.np-shop-header__inner {
padding-top: var(--np-space-6);
}
.np-shop-header__inner > .np-container {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--np-space-8);
}
.np-shop-header__content {
max-width: 700px;
}
.np-shop-header__title {
font-weight: 200;
font-size: clamp(2rem, 4vw, 3rem);
letter-spacing: -0.02em;
margin-bottom: var(--np-space-4);
line-height: 1.1;
}
.np-shop-header__desc {
font-size: 0.875rem;
color: var(--np-on-surface-variant);
line-height: 1.7;
margin-bottom: var(--np-space-6);
}
.np-shop-header__desc p { margin: 0; }
/* Shop layout: sidebar left + products right */
.np-shop-layout {
display: grid;
grid-template-columns: 220px 1fr;
gap: var(--np-space-10);
padding-top: var(--np-space-10);
padding-bottom: var(--np-space-12);
align-items: start;
}
.np-shop-layout__sidebar {
position: sticky;
top: calc(var(--np-navbar-height) + var(--np-space-6));
}
.np-shop-sidebar {
display: flex;
flex-direction: column;
gap: var(--np-space-1);
}
.np-shop-sidebar__back {
display: inline-flex;
align-items: center;
gap: var(--np-space-2);
font-family: var(--np-font-label);
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--np-primary);
text-decoration: none;
padding: var(--np-space-3) 0;
margin-bottom: var(--np-space-4);
transition: var(--np-transition);
}
.np-shop-sidebar__back .material-symbols-outlined {
font-size: 1rem !important;
}
.np-shop-sidebar__back:hover {
color: var(--np-primary-container);
}
.np-shop-sidebar__heading {
font-family: var(--np-font-label);
font-size: 0.5625rem;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--np-on-surface-variant);
font-weight: 700;
margin-bottom: var(--np-space-3);
display: block;
}
.np-shop-sidebar__link {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--np-space-3) var(--np-space-4);
font-family: var(--np-font-headline);
font-weight: 300;
font-size: 0.875rem;
color: var(--np-on-surface-variant);
text-decoration: none;
transition: var(--np-transition);
border-left: 2px solid transparent;
}
.np-shop-sidebar__link:hover {
color: var(--np-primary);
background: var(--np-surface-container-low);
border-left-color: var(--np-primary);
}
.np-shop-sidebar__link--active {
color: var(--np-primary);
font-weight: 500;
border-left-color: var(--np-primary);
background: var(--np-surface-container-low);
}
.np-shop-sidebar__link--all {
color: var(--np-on-surface);
font-weight: 400;
font-size: 0.8125rem;
border-left: 2px solid var(--np-secondary);
margin-bottom: var(--np-space-1);
}
.np-shop-sidebar__count {
font-family: var(--np-font-label);
font-size: 0.625rem;
color: var(--np-outline);
font-weight: 600;
min-width: 1.5rem;
text-align: center;
}
.np-shop-header__image {
flex-shrink: 0;
width: 240px;
height: 240px;
overflow: hidden;
}
.np-shop-header__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* WooCommerce page header icon */
.np-page-header__icon {
font-size: 1.125rem !important;
color: var(--np-primary);
}
.np-page-header--wc .np-page-header__tag {
gap: var(--np-space-3);
}
/* WooCommerce page content wrapper */
.np-page-content--wc {
padding-top: var(--np-space-8);
}
/* --------------------------------------------------------------------------
29. Search Form (inline)
-------------------------------------------------------------------------- */
.np-search-form--inline {
display: flex;
align-items: center;
gap: var(--np-space-3);
max-width: 400px;
margin: var(--np-space-6) auto;
}
.np-search-form--inline .np-search-form__input {
flex: 1;
font-size: 1rem;
padding: var(--np-space-3) 0;
}
.np-search-form--inline .np-search-form__submit {
color: var(--np-primary);
padding: var(--np-space-2);
}
/* --------------------------------------------------------------------------
30. Responsive additions
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
.np-blog-featured__grid {
grid-template-columns: 1fr;
}
.np-checkout-steps {
gap: 0;
}
.np-checkout-step__label {
display: none;
}
.np-checkout-steps__sep {
width: 2rem;
margin: 0 var(--np-space-2);
}
.np-shop-header__inner > .np-container {
flex-direction: column;
align-items: flex-start;
}
.np-shop-header__image {
width: 100%;
height: 180px;
}
.np-shop-layout {
grid-template-columns: 1fr;
gap: var(--np-space-6);
}
.np-shop-layout__sidebar {
position: static;
}
.np-shop-sidebar {
flex-direction: row;
flex-wrap: wrap;
gap: var(--np-space-2);
}
.np-shop-sidebar__heading {
width: 100%;
}
.np-shop-sidebar__link {
padding: var(--np-space-2) var(--np-space-4);
font-size: 0.75rem;
background: var(--np-surface-container-highest);
border-left: none;
}
.np-shop-sidebar__link:hover {
border-left-color: transparent;
}
.np-comment__avatar {
display: none;
}
}
/* WordPress admin bar fix */
body.admin-bar .np-navbar {
top: 32px;
}
@media (max-width: 782px) {
body.admin-bar .np-navbar {
top: 46px;
}
}
/* --------------------------------------------------------------------------
Product Key Features (np-features-*, np-feature-card)
-------------------------------------------------------------------------- */
.np-features-section {
gap: var(--np-space-12) !important;
}
.np-features__title {
font-family: var(--np-font-headline) !important;
font-weight: 200 !important;
font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
letter-spacing: -0.02em;
text-transform: uppercase;
line-height: 1.1 !important;
margin-bottom: var(--np-space-6) !important;
}
.np-features__desc {
font-size: 0.875rem !important;
color: var(--np-on-surface-variant) !important;
line-height: 1.8 !important;
margin-bottom: var(--np-space-8) !important;
}
.np-features__badges {
gap: var(--np-space-3) !important;
}
.np-features__badge {
font-family: var(--np-font-label) !important;
font-size: 0.625rem !important;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--np-on-surface) !important;
margin: 0 !important;
}
.np-features__badge strong {
color: var(--np-secondary);
margin-right: var(--np-space-2);
}
.np-feature-card {
background: var(--np-surface-container-lowest) !important;
padding: var(--np-space-6) !important;
height: 100%;
}
.np-feature-card__icon {
font-family: 'Material Symbols Outlined' !important;
font-size: 1.5rem !important;
color: var(--np-on-surface-variant) !important;
margin-bottom: var(--np-space-3) !important;
line-height: 1 !important;
}
.np-feature-card__title {
font-family: var(--np-font-label) !important;
font-size: 0.6875rem !important;
font-weight: 600 !important;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--np-on-surface) !important;
margin-bottom: var(--np-space-3) !important;
}
.np-feature-card__text {
font-size: 0.8125rem !important;
color: var(--np-on-surface-variant) !important;
line-height: 1.6 !important;
margin-bottom: 0 !important;
}
.np-features-right > .wp-block-columns {
margin-bottom: var(--np-space-4);
}
@media (max-width: 767px) {
.np-features-section {
flex-direction: column !important;
}
.np-features-left {
flex-basis: 100% !important;
}
.np-features-right {
flex-basis: 100% !important;
}
}
@media (max-width: 767px) {
.np-contact {
flex-direction: column !important;
}
.np-contact__info {
padding: var(--np-space-6);
}
.np-contact__form {
padding: var(--np-space-6) !important;
}
}
/* --------------------------------------------------------------------------
17. Contact Us Page — Full-screen two-column layout
-------------------------------------------------------------------------- */
.np-contact {
gap: 0 !important;
align-items: stretch !important;
}
.np-contact > .wp-block-column {
display: flex;
flex-direction: column;
}
.np-contact__info {
display: flex;
flex-direction: column;
background: var(--np-surface-container-lowest);
padding: var(--np-space-10);
}
.np-contact__image {
border-radius: var(--np-radius-m);
overflow: hidden;
margin-bottom: var(--np-space-6);
}
.np-contact__image img {
object-fit: contain;
width: 100%;
height: auto;
}
.np-contact-cards {
display: flex;
flex-direction: column;
gap: var(--np-space-4);
}
.np-contact-card {
display: flex;
align-items: flex-start;
gap: var(--np-space-4) !important;
padding: var(--np-space-5) !important;
background: var(--np-surface-container-lowest);
border-radius: var(--np-radius-m);
transition: var(--np-transition);
}
.np-contact-card:hover {
background: var(--np-surface-container);
}
.np-contact-card__icon {
font-family: 'Material Symbols Outlined' !important;
font-size: 1.4rem !important;
color: var(--np-primary);
margin: 0 !important;
line-height: 1;
flex-shrink: 0;
}
.np-contact-card__body {
display: flex;
flex-direction: column;
gap: 2px;
}
.np-contact-card__body p {
margin: 0 !important;
}
.np-contact-card__label {
font-family: var(--np-font-label) !important;
font-size: 0.6875rem !important;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--np-on-surface-variant) !important;
font-weight: 600;
}
.np-contact-card__value {
font-family: var(--np-font-headline) !important;
font-size: 0.9375rem !important;
font-weight: 400;
color: var(--np-on-surface) !important;
}
.np-contact__form {
background: var(--np-surface-container-lowest);
padding: var(--np-space-10);
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.np-contact__form-title {
font-weight: 300 !important;
font-size: 1.35rem !important;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: var(--np-space-8) !important;
padding-bottom: var(--np-space-4);
border-bottom: 1px solid var(--np-outline-variant);
}
/* Contact Form 7 styling */
.np-contact__form .wpcf7-form {
display: flex;
flex-direction: column;
gap: var(--np-space-6);
flex: 1 1 auto;
}
.np-contact__form .wpcf7-form p {
margin: 0 !important;
}
.np-contact__form .wpcf7-form label {
display: flex;
flex-direction: column;
gap: var(--np-space-2);
font-family: var(--np-font-label);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 500;
color: var(--np-on-surface-variant);
}
.np-contact__form .wpcf7-form input[type="text"],
.np-contact__form .wpcf7-form input[type="email"],
.np-contact__form .wpcf7-form input[type="tel"],
.np-contact__form .wpcf7-form input[type="url"],
.np-contact__form .wpcf7-form input[type="number"],
.np-contact__form .wpcf7-form select,
.np-contact__form .wpcf7-form textarea {
width: 100%;
padding: var(--np-space-3) 0 var(--np-space-2);
border: none;
border-bottom: 1px solid var(--np-outline-variant);
background: transparent;
font-family: var(--np-font-body);
font-size: 1.05rem;
color: var(--np-on-surface);
transition: border-color 0.2s;
outline: none;
border-radius: 0;
}
.np-contact__form .wpcf7-form input:focus,
.np-contact__form .wpcf7-form select:focus,
.np-contact__form .wpcf7-form textarea:focus {
border-bottom-color: var(--np-primary);
}
.np-contact__form .wpcf7-form textarea {
min-height: 160px;
resize: vertical;
flex: 1 1 auto;
}
.np-contact__form .wpcf7-form input[type="submit"] {
align-self: flex-start;
padding: var(--np-space-4) var(--np-space-10);
background: var(--np-gradient-primary);
color: #fff;
border: none;
border-radius: var(--np-radius-sm, 4px);
font-family: var(--np-font-label);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.15em;
font-weight: 600;
cursor: pointer;
transition: box-shadow 0.2s, transform 0.2s;
min-width: 200px;
text-align: center;
margin-top: var(--np-space-4);
}
.np-contact__form .wpcf7-form input[type="submit"]:hover {
box-shadow: 0 6px 20px rgba(47, 128, 237, 0.35);
transform: translateY(-2px);
}
.np-contact__form .wpcf7-form .wpcf7-response-output {
border: none !important;
padding: var(--np-space-3) var(--np-space-4);
font-size: 0.8125rem;
border-radius: var(--np-radius-sm, 4px);
margin: var(--np-space-2) 0 0 !important;
}
.np-contact__form .wpcf7-form .wpcf7-not-valid-tip {
font-size: 0.6875rem;
color: var(--np-error, #b00020);
margin-top: var(--np-space-1);
}
/* Full-width contact page */
.np-page-content:has(.np-contact) {
padding-top: 0;
padding-bottom: 0;
}
.np-page-content:has(.np-contact) > .np-container {
max-width: 100%;
padding: 0;
}
/* --------------------------------------------------------------------------
About Us Page
-------------------------------------------------------------------------- */
.np-page-content--about > .np-container {
max-width: 1100px;
margin: 0 auto;
padding: var(--np-space-10) var(--np-space-8);
}
.np-page-content--about > .np-container > h1,
.np-page-content--about > .np-container > h2,
.np-page-content--about > .np-container > .wp-block-heading {
font-weight: 200;
font-size: clamp(1.75rem, 3vw, 2.5rem);
line-height: 1.25;
margin-bottom: var(--np-space-8);
color: var(--np-on-surface);
}
.np-page-content--about > .np-container > p {
font-size: 0.9375rem;
line-height: 1.85;
color: var(--np-on-surface-variant);
margin-bottom: var(--np-space-5);
}
.np-page-content--about > .np-container > p strong {
color: var(--np-on-surface);
font-weight: 600;
}
.np-page-content--about .wp-block-image {
margin: var(--np-space-8) 0;
border-radius: var(--np-radius-lg);
overflow: hidden;
}
.np-page-content--about .wp-block-image img {
width: 100%;
height: auto;
display: block;
border-radius: var(--np-radius-lg);
max-height: 500px;
object-fit: cover;
}
.np-page-content--about .wp-block-columns {
gap: var(--np-space-8) !important;
margin-top: var(--np-space-6);
margin-bottom: var(--np-space-6);
}
.np-page-content--about .wp-block-columns p {
font-size: 0.9375rem;
line-height: 1.85;
color: var(--np-on-surface-variant);
}
.np-page-content--about .wp-block-columns strong {
color: var(--np-on-surface);
font-weight: 600;
}
.np-page-content--about .wp-block-columns h2,
.np-page-content--about .wp-block-columns h3 {
font-weight: 300;
margin-bottom: var(--np-space-4);
}
@media (max-width: 782px) {
.np-page-content--about > .np-container {
padding: var(--np-space-8) var(--np-space-5);
}
.np-page-content--about .wp-block-columns {
flex-direction: column !important;
}
}
*
*