/* JKENT-specific overrides: re-tint rules in base.css/components.css that
hardcoded light values (rgba(255,255,255,...) etc.) and don't read through
tokens. Loaded AFTER components.css so cascade wins. */
/* ============ Nav — dark glass instead of cream ============ */
.nav {
background: rgba(13, 13, 16, 0.72);
border-bottom: 1px solid var(--glass-border-soft);
-webkit-backdrop-filter: var(--glass-blur-sm);
backdrop-filter: var(--glass-blur-sm);
}
.nav .brand,
.nav .brand-stacked .main {
color: var(--jk-chrome);
}
.nav-links a { color: var(--jk-chrome-mid); }
.nav-links a:hover,
.nav-links a.active { color: var(--jk-chrome-bright); }
/* ============ Cart pill — dark glass with red hover ============ */
.cart-pill {
color: var(--jk-text);
background: rgba(26, 28, 32, 0.65);
border: 1px solid var(--glass-border);
box-shadow:
inset 0 0 0 1px rgba(241, 241, 244, 0.04),
0 1px 2px rgba(0, 0, 0, 0.4),
0 8px 24px -14px rgba(0, 0, 0, 0.6);
}
.cart-pill:hover {
background: rgba(34, 36, 42, 0.85);
border-color: rgba(228, 57, 70, 0.5);
color: var(--jk-red-glow);
box-shadow:
inset 0 0 0 1px rgba(241, 241, 244, 0.08),
0 2px 4px rgba(0, 0, 0, 0.4),
0 14px 32px -14px rgba(228, 57, 70, 0.5);
}
.cart-pill-icon { color: var(--jk-chrome-mid); }
.cart-pill:hover .cart-pill-icon { color: var(--jk-red-glow); }
.cart-pill-count {
background: var(--jk-red-mist);
color: var(--jk-red-glow);
}
/* ============ Brand text gradient ============ */
.brand-text {
background: linear-gradient(135deg, var(--jk-chrome) 0%, var(--jk-red-glow) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ============ Buttons ============ */
.btn-primary {
background: var(--grad-brand);
color: var(--jk-chrome-bright);
box-shadow:
var(--shadow-sm),
0 8px 24px -10px rgba(228, 57, 70, 0.55);
border-color: rgba(228, 57, 70, 0.4);
}
.btn-primary:hover {
box-shadow:
var(--shadow-md),
0 12px 32px -10px rgba(228, 57, 70, 0.75);
}
.btn-ghost {
background: rgba(26, 28, 32, 0.55);
color: var(--jk-text);
border-color: var(--glass-border);
}
.btn-ghost:hover {
background: rgba(34, 36, 42, 0.78);
border-color: rgba(241, 241, 244, 0.16);
}
/* Outline button — invert hover so dark text appears on light fill */
.btn-outline {
border: 1px solid var(--jk-chrome-mid);
color: var(--jk-chrome);
background: transparent;
}
.btn-outline:hover {
background: var(--jk-chrome);
color: var(--jk-ink);
border-color: var(--jk-chrome);
}
.btn-soft {
background: var(--jk-red-mist);
color: var(--jk-red-glow);
border-color: rgba(228, 57, 70, 0.25);
}
.btn-soft:hover {
background: var(--jk-red);
color: var(--jk-chrome-bright);
}
/* ============ Forms ============ */
.input, .textarea, .select {
background: rgba(26, 28, 32, 0.55);
border: 1px solid var(--glass-border);
color: var(--jk-text);
}
.input::placeholder, .textarea::placeholder { color: var(--jk-chrome-faint); }
.input:focus, .textarea:focus, .select:focus {
background: rgba(34, 36, 42, 0.85);
border-color: var(--jk-red);
box-shadow: 0 0 0 4px var(--jk-red-mist);
}
.field label { color: var(--jk-chrome-mid); }
.field .hint { color: var(--jk-chrome-faint); }
.field .error { color: var(--jk-red-glow); }
/* ============ Quantity stepper (drawer/checkout) ============ */
.qty {
background: rgba(26, 28, 32, 0.55);
border: 1px solid var(--glass-border-soft);
}
.qty button { color: var(--jk-chrome); }
.qty button:hover { background: var(--jk-red-mist); color: var(--jk-red-glow); }
/* ============ Drawer foot ============ */
.drawer-foot {
background: rgba(13, 13, 16, 0.65);
border-top: 1px solid var(--glass-border-soft);
}
/* ============ Lightbox — dark backdrop, dark close pill ============ */
.modal-backdrop.lightbox-backdrop {
background:
linear-gradient(135deg, rgba(110, 14, 28, 0.20), rgba(20, 21, 26, 0.92)),
rgba(13, 13, 16, 0.92);
}
.lightbox-stage img {
border: 1px solid var(--glass-border);
background: var(--jk-graphite);
box-shadow:
0 1px 0 0 rgba(241, 241, 244, 0.04) inset,
0 8px 24px -8px rgba(0, 0, 0, 0.5),
0 32px 80px -20px rgba(228, 57, 70, 0.30);
}
.lightbox-close {
background: rgba(26, 28, 32, 0.85);
color: var(--jk-chrome);
border: 1px solid var(--glass-border);
box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.6);
}
.lightbox-close:hover {
background: var(--jk-red);
color: var(--jk-chrome-bright);
border-color: var(--jk-red);
}
/* ============ Chips ============ */
.chip-teal { /* now: chrome chip */
background: rgba(241, 241, 244, 0.06);
color: var(--jk-chrome);
border-color: transparent;
}
.chip-pink { /* now: red chip */
background: var(--jk-red-mist);
color: var(--jk-red-glow);
border-color: transparent;
}
.chip-sold {
background: rgba(13, 13, 16, 0.92);
color: var(--jk-chrome-bright);
}
.chip-ink {
background: var(--jk-chrome);
color: var(--jk-ink);
}
/* ============ Item card stock-line dot — chrome by default, red on warn ============ */
.item-card .stock-line .stock-dot {
background: var(--jk-chrome-mid);
box-shadow: 0 0 0 3px rgba(197, 200, 207, 0.10);
}
.item-card .stock-line--warn .stock-dot {
background: var(--jk-red-glow);
box-shadow: 0 0 0 3px rgba(228, 57, 70, 0.18);
}
.item-card .stock-line { color: var(--jk-chrome-mid); }
.item-card .stock-line--warn { color: var(--jk-red-glow); }
/* ============ Toast — dark glass ============ */
.toast {
background: rgba(20, 21, 26, 0.90);
color: var(--jk-text);
border: 1px solid var(--glass-border);
}
.toast.success { border-left: 3px solid var(--jk-chrome-bright); }
.toast.error { border-left: 3px solid var(--jk-red-glow); }
.toast.info { border-left: 3px solid var(--jk-chrome-mid); }
/* ============ Stat card (admin) ============ */
.stat-card .label { color: var(--jk-chrome-mid); }
.stat-card .value { color: var(--jk-chrome-bright); }
.stat-card .delta { color: var(--jk-chrome-faint); }
/* ============ Skeleton — dark shimmer ============ */
.skeleton {
background: linear-gradient(
90deg,
rgba(241, 241, 244, 0.04) 0%,
rgba(241, 241, 244, 0.10) 50%,
rgba(241, 241, 244, 0.04) 100%
);
}
/* ============ Display headings — industrial Bebas/slab ============ */
h1, h2, h3, h4 {
font-family: var(--font-display);
letter-spacing: 0.01em;
color: var(--jk-chrome-bright);
font-weight: 400;
text-transform: none;
}
h1 { font-size: clamp(2.75rem, 5vw, 4.5rem); line-height: 1.02; letter-spacing: 0.02em; text-transform: uppercase; }
h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.05; letter-spacing: 0.015em; text-transform: uppercase; }
h3 { font-size: 1.65rem; line-height: 1.15; letter-spacing: 0.01em; }
h4 { font-size: 1.2rem; line-height: 1.25; }
/* Display serif accent — for premium hero quotes / price tags */
.display-italic,
.display-serif {
font-family: var(--font-display-serif);
font-style: normal;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
}
/* Body link hover — red glow */
a:hover { color: var(--jk-red-glow); }
/* Eyebrow — keep small caps look but tinted chrome */
.eyebrow { color: var(--jk-chrome-mid); }
/* Item card name uses display serif for elegant contrast against industrial heads */
.item-card .name {
font-family: var(--font-display-serif);
font-style: normal;
font-weight: 500;
letter-spacing: 0;
color: var(--jk-chrome-bright);
}
.item-card .price {
font-family: var(--font-display-serif);
font-weight: 600;
color: var(--jk-chrome-bright);
}
.item-card .price-small { color: var(--jk-chrome-faint); }
/* Card glass — slightly steel-tinted on dark */
.item-card {
background: rgba(26, 28, 32, 0.55);
border: 1px solid var(--glass-border);
}
.item-card:hover {
border-color: rgba(228, 57, 70, 0.30);
}
/* Brushed-metal subtle texture overlay — applied to hero-class containers.
Use class .jk-brushed on any wrapper to apply. */
.jk-brushed {
position: relative;
isolation: isolate;
}
.jk-brushed::before {
content: "";
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
180deg,
rgba(241, 241, 244, 0.018) 0px,
rgba(241, 241, 244, 0.018) 1px,
transparent 1px,
transparent 3px
);
pointer-events: none;
z-index: 0;
border-radius: inherit;
}
.jk-brushed > * { position: relative; z-index: 1; }
/* Carbon-weave divider — for section breaks */
.jk-carbon-divider {
height: 1px;
background-image:
linear-gradient(90deg, transparent, var(--glass-border) 20%, var(--glass-border) 80%, transparent);
margin: var(--sp-12) 0;
}
/* Faint gear watermark on hero/empty states.
Use as a positioned ::after pseudo via .jk-gear-bg utility. */
.jk-gear-bg {
position: relative;
isolation: isolate;
}
.jk-gear-bg::after {
content: "";
position: absolute;
width: 600px;
height: 600px;
right: -150px;
top: -100px;
background-image: radial-gradient(closest-side, rgba(228, 57, 70, 0.08), transparent 70%);
filter: blur(8px);
pointer-events: none;
z-index: 0;
}
/* ============================================================
ADMIN — re-tints for admin.css rules that hardcoded light bg
============================================================ */
.admin-side {
background: rgba(13, 13, 16, 0.78);
border-right: 1px solid var(--glass-border-soft);
}
.admin-side a { color: var(--jk-chrome-mid); }
.admin-side a:hover {
background: rgba(241, 241, 244, 0.06);
color: var(--jk-chrome-bright);
}
.admin-side a.active {
background: var(--grad-brand);
color: var(--jk-chrome-bright);
box-shadow: 0 6px 16px -8px rgba(228, 57, 70, 0.5);
}
.admin-head h1 { color: var(--jk-chrome-bright); }
/* Tables — dark glass, no white tint */
.table th {
background: rgba(13, 13, 16, 0.8);
color: var(--jk-chrome-mid);
border-bottom: 1px solid var(--glass-border);
}
.table td {
border-bottom: 1px solid var(--glass-border-soft);
color: var(--jk-text);
}
.table tr:hover td { background: rgba(241, 241, 244, 0.04); }
/* Status pills */
.pill {
background: rgba(241, 241, 244, 0.06);
color: var(--jk-chrome-mid);
border: 1px solid var(--glass-border-soft);
}
.pill.ok { background: rgba(241, 241, 244, 0.10); color: var(--jk-chrome-bright); border-color: transparent; }
.pill.pend { background: rgba(228, 168, 0, 0.16); color: #f3c14b; border-color: transparent; }
.pill.fail { background: rgba(228, 57, 70, 0.18); color: var(--jk-red-glow); border-color: transparent; }
.pill.manual { background: var(--jk-red-mist); color: var(--jk-red-glow); border-color: transparent; }
/* Upload box — dark with red dashed border */
.upload-box {
border: 2px dashed rgba(228, 57, 70, 0.5);
color: var(--jk-chrome-mid);
background:
linear-gradient(135deg, rgba(26, 28, 32, 0.65), rgba(20, 21, 26, 0.40));
}
.upload-box::before { background-color: var(--jk-red-glow); }
.upload-box strong { color: var(--jk-chrome-bright); }
.upload-box:hover,
.upload-box.drag-hover {
border-color: var(--jk-red-glow);
background: linear-gradient(135deg, rgba(228, 57, 70, 0.18), rgba(20, 21, 26, 0.55));
}
/* Image gallery thumb hover shadow on dark */
.image-gallery .thumb { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
.image-gallery .thumb:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55); }
.image-gallery .thumb button.thumb-crop:hover { background: var(--jk-red-glow); }
/* Sortable ghost / drag preview — dark instead of white */
.table-reorderable tr.sortable-ghost { background: var(--jk-red-mist); opacity: 0.45; }
.table-reorderable tr.sortable-chosen { background: rgba(228, 57, 70, 0.08); }
.table-reorderable tr.sortable-drag {
opacity: 0.96;
background: var(--jk-graphite);
box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.7);
}
/* Drag handle */
.drag-handle { color: var(--jk-chrome-faint); }
.drag-handle:hover { color: var(--jk-red-glow); background: var(--jk-red-mist); }
/* Visibility strip cards (admin dashboard) */
.vis-card { background: rgba(20, 21, 26, 0.78); }
.vis-card .vis-title { color: var(--jk-chrome-bright); }
/* Focus-dot modal — already uses var(--ab-pink-deep) which now resolves to red-glow,
so the dot itself is correct. Just nudge the grid lines for dark. */
.focus-stage .focus-grid {
background-image:
linear-gradient(to right, rgba(241, 241, 244, 0.12) 1px, transparent 1px),
linear-gradient(to bottom, rgba(241, 241, 244, 0.12) 1px, transparent 1px);
}
.focus-stage .focus-dot {
background: rgba(241, 241, 244, 0.14);
border-color: var(--jk-red-glow);
}
/* Side-bar logo: keep small JKENT logo legible on dark */
.admin-side .brand-img img { filter: drop-shadow(0 2px 6px rgba(228, 57, 70, 0.35)); }
/* JKENT logo in nav: subtle red glow halo */
.nav .brand-img img { filter: drop-shadow(0 2px 12px rgba(228, 57, 70, 0.4)); }
/* Nav account chip — signed-in state pill next to cart */
.nav-account-chip {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: 0.45rem 0.95rem;
border-radius: var(--radius-pill);
font-size: 0.88rem;
letter-spacing: 0.02em;
font-weight: 500;
color: var(--jk-chrome-mid);
background: rgba(241, 241, 244, 0.04);
border: 1px solid var(--glass-border-soft);
text-decoration: none;
transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
white-space: nowrap;
}
.nav-account-chip:hover { color: var(--jk-chrome-bright); background: rgba(241, 241, 244, 0.08); }
.nav-account-chip.signed-in {
color: var(--jk-chrome-bright);
background: rgba(228, 57, 70, 0.10);
border-color: rgba(228, 57, 70, 0.25);
}
.nav-account-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--jk-red-glow);
box-shadow: 0 0 8px rgba(228, 57, 70, 0.7);
animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
@media (max-width: 640px) {
.nav-account-chip .nav-account-label { display: none; }
.nav-account-chip { padding: 0.45rem 0.6rem; }
}
/* ============================================================
STOREFRONT — JKENT-specific hero, shop head, footer layouts
(replaces ALAB's .hero--logo poster-image hero)
============================================================ */
.hero {
position: relative;
padding: var(--sp-16) 0 var(--sp-12);
overflow: hidden;
border-bottom: 1px solid var(--glass-border-soft);
}
.hero-content {
max-width: 740px;
position: relative;
z-index: 2;
}
.hero h1 {
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.02em;
font-size: clamp(3rem, 6vw, 5.5rem);
line-height: 0.98;
margin: var(--sp-3) 0 var(--sp-5);
}
.hero h1 .brand-text {
display: inline-block;
}
.hero-sub {
font-family: var(--font-body);
font-size: 1.15rem;
color: var(--jk-chrome-soft);
max-width: 560px;
line-height: 1.55;
margin: 0;
}
.hero-cta .btn { min-width: 160px; }
@media (max-width: 720px) {
.hero { padding: var(--sp-10) 0 var(--sp-8); }
.hero h1 { font-size: clamp(2.5rem, 9vw, 3.4rem); }
.hero-sub { font-size: 1rem; }
}
/* Shop head — title + search */
.shop-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: var(--sp-5);
flex-wrap: wrap;
margin-top: var(--sp-12);
margin-bottom: var(--sp-5);
}
.shop-head h2 {
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.03em;
margin: 0;
}
.search-wrap {
flex: 1 1 280px;
max-width: 380px;
}
.search-wrap .input {
background: rgba(20, 21, 26, 0.65);
border: 1px solid var(--glass-border);
}
/* Filter chip bar */
.filter-bar {
display: flex;
gap: var(--sp-2);
flex-wrap: wrap;
margin: var(--sp-3) 0 var(--sp-8);
}
.filter-chip {
display: inline-flex;
align-items: center;
padding: 0.5rem 1rem;
border-radius: var(--radius-pill);
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--jk-chrome-mid);
background: rgba(241, 241, 244, 0.04);
border: 1px solid var(--glass-border-soft);
transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
cursor: pointer;
white-space: nowrap;
}
.filter-chip:hover {
background: rgba(228, 57, 70, 0.10);
color: var(--jk-chrome-bright);
border-color: rgba(228, 57, 70, 0.30);
}
.filter-chip.active {
background: var(--grad-brand);
color: var(--jk-chrome-bright);
border-color: rgba(228, 57, 70, 0.6);
box-shadow: 0 4px 12px -4px rgba(228, 57, 70, 0.5);
}
/* Footer */
.footer {
background: rgba(13, 13, 16, 0.85);
border-top: 1px solid var(--glass-border-soft);
padding: var(--sp-12) 0 var(--sp-8);
margin-top: var(--sp-16);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: var(--sp-10);
margin-bottom: var(--sp-10);
}
@media (max-width: 720px) {
.footer-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
}
.footer h4 {
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.95rem;
color: var(--jk-chrome);
margin: 0 0 var(--sp-3);
}
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-links a { color: var(--jk-chrome-mid); font-size: 0.92rem; }
.footer-links a:hover { color: var(--jk-red-glow); }
.footer-fineprint {
padding-top: var(--sp-6);
border-top: 1px solid var(--glass-border-soft);
text-align: center;
font-size: 0.82rem;
}
/* Empty state in grid */
.empty {
text-align: center;
padding: var(--sp-12) var(--sp-6);
color: var(--jk-chrome-mid);
}
.empty h3 {
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* ============================================================
ITEM DETAIL — gallery + description layout for item.html
============================================================ */
.item-detail {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-10);
align-items: start;
padding: var(--sp-10) 0 var(--sp-16);
}
@media (max-width: 900px) { .item-detail { grid-template-columns: 1fr; gap: var(--sp-8); } }
.item-detail .gallery .viewer {
position: relative;
aspect-ratio: 4 / 5;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--jk-graphite);
border: 1px solid var(--glass-border);
}
.item-detail .gallery .viewer img {
width: 100%; height: 100%; object-fit: cover;
position: absolute; inset: 0;
opacity: 0; transition: opacity var(--dur) var(--ease-out);
}
.item-detail .gallery .viewer img.active { opacity: 1; }
.item-detail .gallery .viewer .counter {
position: absolute;
bottom: var(--sp-3); right: var(--sp-3);
padding: 4px 10px;
background: rgba(13, 13, 16, 0.8);
color: var(--jk-chrome);
border-radius: var(--radius-pill);
font-size: 0.78rem;
letter-spacing: 0.05em;
}
.item-detail .gallery .strip {
display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap;
}
.item-detail .gallery .strip button {
width: 64px; height: 64px;
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--jk-graphite);
border: 1px solid var(--glass-border-soft);
padding: 0;
cursor: pointer;
opacity: 0.7;
transition: opacity var(--dur-fast), border-color var(--dur-fast);
}
.item-detail .gallery .strip button.active {
opacity: 1;
border-color: var(--jk-red-glow);
}
.item-detail .gallery .strip button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item-detail h1 {
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.02em;
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.05;
margin: var(--sp-4) 0 var(--sp-2);
color: var(--jk-chrome-bright);
}
.item-detail .description {
margin-top: var(--sp-5);
color: var(--jk-text-soft);
line-height: 1.7;
}
.item-detail .description p { margin: 0 0 var(--sp-4); }
.item-detail .description strong { color: var(--jk-chrome-bright); }
/* ============================================================
CHECKOUT — payment options and success mark for thankyou
============================================================ */
.checkout-grid .form-col,
.checkout-grid .summary-col {
background: rgba(20, 21, 26, 0.78);
border: 1px solid var(--glass-border);
}
.checkout-grid h3 {
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--jk-chrome-bright);
}
.payment-option {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
padding: var(--sp-4) var(--sp-5);
background: rgba(26, 28, 32, 0.55);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
cursor: pointer;
transition: border-color var(--dur-fast), background var(--dur-fast);
}
.payment-option:hover { border-color: rgba(228, 57, 70, 0.30); }
.payment-option input[type="radio"] {
margin-top: 4px;
accent-color: var(--jk-red-glow);
}
.payment-option strong {
display: block;
font-family: var(--font-body);
color: var(--jk-chrome-bright);
margin-bottom: 4px;
font-size: 0.96rem;
}
.payment-option .faint {
font-size: 0.85rem;
color: var(--jk-chrome-mid);
}
.payment-option:has(input:checked),
.payment-option.active {
border-color: var(--jk-red-glow);
background: rgba(228, 57, 70, 0.06);
}
.totals-row.grand {
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--jk-chrome-bright);
}
.totals-row .muted { color: var(--jk-chrome-mid); }
/* Payment instructions card (checkout) */
.payment-instructions {
margin-top: var(--sp-5);
padding: var(--sp-5) var(--sp-6);
background: rgba(228, 57, 70, 0.06);
border: 1px solid rgba(228, 57, 70, 0.20);
border-radius: var(--radius-md);
}
.payment-instructions p { margin: 0 0 var(--sp-3); }
.payment-instructions p:last-child { margin-bottom: 0; }
.payment-instructions strong { color: var(--jk-chrome-bright); font-family: var(--font-display-serif); font-size: 1.05rem; }
.payment-instructions input[type="file"] { background: rgba(13, 13, 16, 0.65); }
/* Success checkmark on thankyou */
.success-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 88px; height: 88px;
margin: 0 auto;
border-radius: 50%;
background: var(--jk-red-mist);
color: var(--jk-red-glow);
box-shadow: 0 8px 24px -10px rgba(228, 57, 70, 0.6);
animation: success-pop 320ms var(--ease-out);
}
@keyframes success-pop {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
/* ============================================================
New header layout — logo + nav-links on left, sign-in + cart on right
============================================================ */
.nav .nav-inner > .nav-left,
.nav .nav-inner > .nav-right {
display: flex;
align-items: center;
gap: var(--sp-5);
min-width: 0;
}
.nav .nav-inner > .nav-right { gap: var(--sp-3); }
@media (max-width: 720px) {
.nav .nav-inner > .nav-left { gap: var(--sp-3); }
.nav .nav-inner > .nav-left .nav-links { display: none; }
}
/* ============================================================
Hero — premium warehouse photo backdrop (.jk-hero-photo variant)
Used by index.html in place of the old .jk-gear-bg / .jk-brushed.
============================================================ */
.hero.jk-hero-photo {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(var(--sp-12), 14vh, var(--sp-20)) 0;
background-image: url('../assets/images/hero%20section%20bg.jpg');
background-size: cover;
background-position: center 35%;
background-repeat: no-repeat;
border-bottom: 1px solid rgba(228, 57, 70, 0.18);
}
.hero.jk-hero-photo::after {
/* hairline red glow at the bottom, sells the "premium" cut from hero to grid */
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(228, 57, 70, 0.7) 50%, transparent 100%);
z-index: 2;
}
.hero.jk-hero-photo .jk-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(110deg,
rgba(13, 13, 16, 0.96) 0%,
rgba(13, 13, 16, 0.82) 38%,
rgba(13, 13, 16, 0.45) 70%,
rgba(13, 13, 16, 0.20) 100%),
radial-gradient(60% 80% at 22% 50%,
rgba(228, 57, 70, 0.22) 0%,
transparent 70%);
pointer-events: none;
z-index: 0;
}
.hero.jk-hero-photo > .container {
position: relative;
z-index: 1;
}
/* Tighten hero-content so it equals the slogan's rendered width. With this
in place the h1 (max-width: 16ch, margin: 0 from the .hero h1 override)
ends up filling hero-content, and the pill — centered in hero-content via
margin: 0 auto — lands at the same horizontal center as the slogan. */
.hero.jk-hero-photo .hero-content { max-width: 560px; }
.hero.jk-hero-photo .hero-content .eyebrow {
display: block;
width: max-content;
max-width: 100%;
margin: 0 auto var(--sp-5);
padding: 0.42rem 0.95rem;
border-radius: var(--radius-pill);
background: rgba(228, 57, 70, 0.14);
border: 1px solid rgba(228, 57, 70, 0.40);
color: var(--jk-red-glow);
font-family: var(--font-body);
font-weight: 600;
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
text-align: center;
box-shadow: 0 4px 16px -8px rgba(228, 57, 70, 0.6);
}
.hero.jk-hero-photo h1 {
text-shadow:
0 2px 28px rgba(0, 0, 0, 0.7),
0 0 60px rgba(228, 57, 70, 0.15);
}
.hero.jk-hero-photo .hero-sub {
color: var(--jk-chrome-mid);
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}
@media (max-width: 720px) {
.hero.jk-hero-photo {
background-position: center;
padding: var(--sp-12) 0 var(--sp-10);
}
.hero.jk-hero-photo .jk-hero-overlay {
background:
linear-gradient(180deg,
rgba(13, 13, 16, 0.85) 0%,
rgba(13, 13, 16, 0.92) 100%),
radial-gradient(80% 60% at 50% 30%,
rgba(228, 57, 70, 0.18) 0%,
transparent 70%);
}
}
/* ============================================================
Line-item thumb — render the actual ![]()
inside .thumb
(was an empty placeholder div in orders/admin orders)
============================================================ */
.line-item .thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: var(--radius-sm);
}
/* ============================================================
POLISH PASS — hero centering, logo halo, mobile, sign-out, etc.
============================================================ */
/* Logo legibility — soft white radial halo BEHIND the logo (no plate, no border).
The pseudo sits under the entire bounding box so the dark interior of the
PNG (gear teeth + "JKENT" text) reads against light, not against the dark
surface. Applied to every place a logo appears against dark UI:
storefront top nav, admin sidebar, DSP top nav. */
.nav .brand-img,
.admin-side .brand-img,
.dsp-nav .brand-img {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
padding: 0;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.nav .brand-img::before,
.admin-side .brand-img::before,
.dsp-nav .brand-img::before {
content: "";
position: absolute;
inset: -10px -16px;
background: radial-gradient(ellipse at center,
rgba(255, 255, 255, 0.55) 0%,
rgba(255, 255, 255, 0.28) 35%,
rgba(255, 255, 255, 0.08) 65%,
transparent 80%);
z-index: 0;
pointer-events: none;
filter: blur(2px);
transition: opacity var(--dur-fast);
}
.nav .brand-img:hover::before,
.admin-side .brand-img:hover::before,
.dsp-nav .brand-img:hover::before {
background: radial-gradient(ellipse at center,
rgba(255, 255, 255, 0.70) 0%,
rgba(255, 220, 220, 0.32) 40%,
rgba(228, 57, 70, 0.10) 70%,
transparent 85%);
}
.nav .brand-img img,
.admin-side .brand-img img,
.dsp-nav .brand-img img {
position: relative;
z-index: 1;
filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
}
/* Account page — keep "Sign out" from clipping into the panel below */
.admin-head { margin-bottom: var(--sp-6); align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.admin-head > .btn { align-self: flex-start; }
/* ============================================================
MOBILE — comprehensive pass: kill horizontal overflow, breathing room
on DSP and admin views, hero polish.
============================================================ */
/* Belt-and-suspenders: nothing on the page should ever push past the viewport */
html, body { overflow-x: hidden; max-width: 100vw; }
@media (max-width: 720px) {
/* ---- Hero (mobile = fully centered stack; on a phone there's no real
"left column" to anchor against, so center alignment is what reads as
intentional + premium) ---- */
.hero.jk-hero-photo {
padding: var(--sp-12) 0 var(--sp-10);
background-position: center;
}
.hero.jk-hero-photo .hero-content {
max-width: 100%;
padding: 0;
text-align: center;
margin: 0 auto;
}
.hero.jk-hero-photo h1 {
font-size: clamp(3rem, 13vw, 4.2rem) !important;
line-height: 0.95;
max-width: none;
margin: var(--sp-3) auto var(--sp-5);
}
.hero.jk-hero-photo .hero-content .eyebrow {
font-size: 0.7rem;
padding: 0.4rem 0.85rem;
margin: 0 auto var(--sp-4);
}
.hero.jk-hero-photo .hero-sub {
font-size: 1rem;
margin-left: auto;
margin-right: auto;
max-width: 38ch;
}
.hero.jk-hero-photo .hero-cta { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
.hero.jk-hero-photo .hero-cta .btn { min-width: 0; width: 100%; }
/* ---- Storefront top nav ---- */
.nav .container { padding-left: var(--sp-4); padding-right: var(--sp-4); }
/* On phones, drop the cart label — keep just the icon + count to save room */
.nav .cart-pill .cart-pill-label { display: none; }
.nav .cart-pill { padding: 0.45rem 0.7rem; gap: 0.4rem; }
/* ---- DSP portal ---- */
.dsp-nav .container { padding-left: var(--sp-4); padding-right: var(--sp-4); }
.dsp-section { padding: var(--sp-4); margin-left: 0; margin-right: 0; }
.dsp-head { margin: var(--sp-4) 0; }
.dsp-head h1 { font-size: clamp(1.6rem, 7vw, 2rem); }
.dsp-head .row { gap: var(--sp-2); }
/* DSP daily form rows — collapse the busy multi-col grids into stacked fields */
.dsp-row-grid {
grid-template-columns: 1fr 1fr !important;
gap: var(--sp-3);
}
.dsp-row-grid .field.full { grid-column: 1 / -1; }
.dsp-row { padding: var(--sp-3); }
/* ---- Admin shell ---- */
.admin-shell { grid-template-columns: 1fr !important; min-width: 0; }
.admin-side { display: none; } /* sidebar collapses; future: hamburger */
.admin-main {
padding: var(--sp-5) var(--sp-4) !important;
min-width: 0;
max-width: 100vw;
overflow-x: hidden;
}
/* Force any descendant grid/table wrapper to respect the viewport */
.admin-main > * { max-width: 100%; min-width: 0; }
/* KPI strip — single column on phones (auto-fit's minmax(200px) overflows
when 2 cells × 200px + gap exceeds the viewport) */
.stat-grid {
grid-template-columns: 1fr !important;
gap: var(--sp-4);
}
.stat-card { min-width: 0; }
/* Tables — let them scroll horizontally inside their wrapper rather
than blowing out the whole admin-main */
.table-wrap { overflow-x: auto; }
.table { min-width: 480px; }
/* Admin head wraps cleanly without the title getting smushed */
.admin-head h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
.admin-head { gap: var(--sp-3); }
/* Revenue page mobile-specific overrides */
.rev-grid-2 { grid-template-columns: 1fr !important; }
.rev-tables-row { grid-template-columns: 1fr !important; }
.funnel-row { grid-template-columns: repeat(2, 1fr) !important; }
.rev-card { padding: var(--sp-4); }
.rev-range-strip button { padding: 0.35rem 0.7rem; font-size: 0.78rem; }
}
/* Extra-narrow phones (≤ 380px) — push everything tighter */
@media (max-width: 380px) {
.hero.jk-hero-photo h1 { font-size: clamp(2.2rem, 10vw, 2.8rem); }
.hero.jk-hero-photo .hero-sub { font-size: 0.92rem; }
.nav .container { padding-left: var(--sp-3); padding-right: var(--sp-3); }
.dsp-section { padding: var(--sp-3); }
.admin-main { padding: var(--sp-4) var(--sp-3) !important; }
}
/* ============================================================
Categories table — text legibility on dark
(admin/categories.html had AB-light backgrounds in inline