/* ============================================================
* COLORSHADE — CUSTOM CSS OVERRIDES (extracted from foundation index.html, S8 deliverable 2.3)
* Custom classes not expressible in Tailwind: glass panels, 3D buttons, keyframes, swiper/offer-card overrides.
* Tailwind utilities come from the CDN during dev (compiled at Phase 8). One custom CSS file only (PAD-11 discipline).
* ============================================================ */
/* Base styles */
html {
width: 100%;
position: relative;
}
body {
background-color: #FDFBF7;
color: #231F20;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
width: 100%;
position: relative;
}
/* Anti-Black color protection */
.text-dark-safe { color: #231F20; }
.bg-dark-safe { background-color: #231F20; }
/* Liquid Glass Refraction */
.glass-panel {
background: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
border: 1px solid rgba(255, 255, 255, 0.7);
box-shadow: 0 12px 32px 0 rgba(35, 31, 32, 0.04), inset 0 1px 0 rgba(255,255,255,0.6);
}
/* 3D Material buttons and components */
.btn-3d-orange {
position: relative;
background-color: #F15A2E;
color: white;
font-weight: 700;
border-radius: 9999px; /* Rounded Pills */
transition: all 0.15s ease-out;
transform: translateY(0);
box-shadow: 0 4px 0 0 #c93f18, 0 8px 16px rgba(241, 90, 46, 0.2);
cursor: pointer;
}
.btn-3d-orange:hover {
transform: translateY(-2px);
box-shadow: 0 6px 0 0 #c93f18, 0 12px 20px rgba(241, 90, 46, 0.3);
}
.btn-3d-orange:active {
transform: translateY(4px);
box-shadow: 0 0px 0 0 #c93f18, 0 4px 8px rgba(241, 90, 46, 0.1);
}
.btn-3d-green {
position: relative;
background-color: #37B24A;
color: white;
font-weight: 700;
border-radius: 9999px; /* Rounded Pills */
transition: all 0.15s ease-out;
transform: translateY(0);
box-shadow: 0 4px 0 0 #298f39, 0 8px 16px rgba(55, 178, 74, 0.25);
cursor: pointer;
}
.btn-3d-green:hover {
transform: translateY(-2px);
box-shadow: 0 6px 0 0 #298f39, 0 12px 20px rgba(55, 178, 74, 0.35);
}
.btn-3d-green:active {
transform: translateY(4px);
box-shadow: 0 0px 0 0 #298f39, 0 4px 8px rgba(55, 178, 74, 0.15);
}
.card-3d-hover {
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}
.card-3d-hover:hover {
transform: translateY(-6px) scale(1.01);
box-shadow: 0 24px 48px -12px rgba(35, 31, 32, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
/* Custom Scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #FDFBF7; }
::-webkit-scrollbar-thumb { background: #c93f18; border-radius: 10px; border: 2px solid #FDFBF7; }
::-webkit-scrollbar-thumb:hover { background: #F15A2E; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
/* Sidebar Mega Menu dropdown rules - Positioned relative to Left Panel container */
.sidebar-mega {
opacity: 0; visibility: hidden; transform: translateX(-10px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.sidebar-item:hover .sidebar-mega {
opacity: 1; visibility: visible; transform: translateX(0);
pointer-events: auto;
}
/* Swiper custom bullet rules */
.swiper-pagination-bullet { background: rgba(35, 31, 32, 0.3); opacity: 1; transition: all 0.3s; }
.swiper-pagination-bullet-active { background: #F15A2E; width: 24px; border-radius: 4px; }
/* Interactive Map Dot Pulse */
@keyframes pulse-ring {
0% { transform: scale(0.65); opacity: 1; }
50% { opacity: 0.5; }
100% { transform: scale(2.2); opacity: 0; }
}
.pulse-dot::before {
content: '';
position: absolute;
width: 300%;
height: 300%;
border-radius: 50%;
background-color: #F15A2E;
animation: pulse-ring 1.8s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
left: -100%;
top: -100%;
}
/* Mobile Categories tab indicator pulse */
@keyframes tab-hint-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(241, 90, 46, 0); }
40% { box-shadow: 0 0 0 4px rgba(241, 90, 46, 0.25); }
70% { box-shadow: 0 0 0 8px rgba(241, 90, 46, 0); }
}
.tab-hint-animate {
animation: tab-hint-pulse 2.2s ease-in-out infinite;
position: relative;
}
.tab-hint-animate::after {
content: '';
position: absolute;
top: 6px;
right: 12px;
width: 7px;
height: 7px;
background: #37B24A;
border-radius: 50%;
animation: tab-dot-fade 2.2s ease-in-out infinite;
}
@keyframes tab-dot-fade {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.3; transform: scale(0.5); }
}
/* Custom slider styles for the calculator */
input[type=range] {
-webkit-appearance: none;
width: 100%;
background: transparent;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8px;
cursor: pointer;
background: #E5E7EB;
border-radius: 9999px;
}
input[type=range]::-webkit-slider-thumb {
height: 24px;
width: 24px;
border-radius: 50%;
background: #F15A2E;
cursor: pointer;
-webkit-appearance: none;
margin-top: -8px;
box-shadow: 0 4px 8px rgba(241, 90, 46, 0.4);
transition: transform 0.1s;
}
input[type=range]::-webkit-slider-thumb:hover {
transform: scale(1.15);
}
/* Pricing Switch active layout */
.pricing-tab-active {
background-color: #231F20;
color: #FFFFFF;
box-shadow: 0 8px 20px rgba(35, 31, 32, 0.15);
}
/* County markers pulse glow */
.county-dot-glow {
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s;
}
.county-dot-glow:hover {
transform: scale(1.3);
box-shadow: 0 0 15px #F15A2E;
}
/* ===== OFFER SECTION — Category Discovery Cards ===== */
/* Staggered entrance animation */
.offer-card {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: calc(var(--card-i, 0) * 90ms);
}
.offer-card.is-visible {
opacity: 1;
transform: translateY(0);
}
.offer-card:hover {
transform: translateY(-4px) scale(1.005);
box-shadow: 0 20px 48px -12px rgba(35, 31, 32, 0.14);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
/* Image slides base */
.offer-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transform-origin: center center;
}
/* Ken Burns slow pan on all slides */
@keyframes kenBurnsPan {
0% { transform: scale(1.0) translate(0, 0); }
100% { transform: scale(1.08) translate(-1.5%, -1%); }
}
.offer-slide.active {
animation: kenBurnsPan 7s ease-in-out forwards;
z-index: 2;
}
/* Wipe-up reveal for incoming slide */
@keyframes wipeReveal {
0% { clip-path: inset(100% 0 0 0); opacity: 0.6; }
100% { clip-path: inset(0% 0 0 0); opacity: 1; }
}
.offer-slide.entering {
animation: wipeReveal 0.72s cubic-bezier(0.16, 1, 0.3, 1) forwards;
z-index: 3;
}
/* Outgoing slide fades back */
@keyframes wipeOut {
0% { opacity: 1; transform: scale(1.08); }
100% { opacity: 0; transform: scale(1.0); }
}
.offer-slide.leaving {
animation: wipeOut 0.72s cubic-bezier(0.16, 1, 0.3, 1) forwards;
z-index: 1;
}
/* Item label fade-slide in */
@keyframes labelIn {
0% { opacity: 0; transform: translateY(5px); }
100% { opacity: 1; transform: translateY(0); }
}
.offer-label-text {
animation: labelIn 0.4s ease 0.6s both;
display: inline-block;
}
/* Flagship dark card hover glow */
.offer-card--flagship:hover .offer-browse-btn {
box-shadow: 0 8px 24px rgba(241, 90, 46, 0.4);
}
/* Also-available pill hover */
.also-pill {
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.also-pill:hover {
transform: translateY(-1px);
}
/* Linear scroll for popular swiper */
/* High-contrast drop shadows for text on image backgrounds */
.text-shadow-premium {
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75), 0 4px 20px rgba(0, 0, 0, 0.4);
}
.text-shadow-subtle {
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
/* Premium Hamburger Menu Button Animation */
#mobile-menu-btn span {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, background-color 0.3s ease;
}
#mobile-menu-btn.menu-open span:nth-child(1) {
transform: translateY(5px) rotate(45deg);
}
#mobile-menu-btn.menu-open span:nth-child(2) {
opacity: 0;
transform: scale(0);
}
#mobile-menu-btn.menu-open span:nth-child(3) {
transform: translateY(-5px) rotate(-45deg);
}
#mobile-menu-btn.menu-open span {
background-color: #F15A2E !important;
}
.popular-swiper-top .swiper-wrapper, .popular-swiper-bottom .swiper-wrapper {
transition-timing-function: linear !important;
}
/* ==========================================
IMAGE TREATMENT SYSTEM (S12, 2.11 design uplift)
Three sanctioned styles — consistent, print-native,
never childish. Every content image on the site uses
exactly one of these (developer mandate 2026-07-11):
1. .img-proof — crop-marked tilted proof (built in
page_hero.php markup; heroes only)
2. .img-ink — offset ink-block shadow (About-page
style the developer approved)
3. .img-mounted — gallery mat: thick white border +
soft diffuse shadow (new 3rd style)
Plus .img-live — the "never static" rule: a slow
7s breathe-zoom on the image inside any treatment.
GPU-only (transform), pauses for reduced-motion.
========================================== */
/* Every treatment wraps its ![]()
in .img-frame — the frame does the
clipping so the breathe-zoom never leaks, while offset blocks and
drop shadows live OUTSIDE the frame and stay fully visible.
(S13 fix: overflow on the outer wrapper was clipping the .img-ink
offset block + shadow — the exact About-page look the developer
approved. Never clip the wrapper again.) */
.img-frame { position: relative; overflow: hidden; display: block; }
.img-frame > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-ink { position: relative; display: block; }
.img-ink::before {
content: ''; position: absolute; inset: 0;
background: #F15A2E; border-radius: 1.5rem;
transform: translate(16px, 16px); opacity: .2;
transition: transform .5s ease;
}
.img-ink:hover::before { transform: translate(24px, 24px); }
.img-ink .img-frame {
border-radius: 1.5rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* the approved deep shadow */
}
.img-mounted { display: block; background: #fff; padding: 10px;
border-radius: 1.25rem; border: 1px solid #F3EFE7;
box-shadow: 0 20px 50px -12px rgba(35, 31, 32, 0.15); }
.img-mounted .img-frame { border-radius: .75rem; }
@keyframes imgBreathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.045); }
}
.img-live .img-frame > img { animation: imgBreathe 14s ease-in-out infinite; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
.img-live .img-frame > img { animation: none; }
}
/* ==========================================
SECTION HEADING SIGNATURE v2 (S13, 2.11)
Ghost press-sheet index numeral behind section headers —
outlined, huge, never competing with the heading itself.
Emitted by section_header() in includes/helpers.php.
========================================== */
.sec-index {
position: absolute; top: -0.42em; z-index: 0;
font-family: 'Outfit', sans-serif; font-weight: 900;
font-size: clamp(5.5rem, 12vw, 9rem); line-height: 1;
letter-spacing: -0.04em;
color: transparent;
-webkit-text-stroke: 1.5px rgba(35, 31, 32, 0.08);
pointer-events: none; user-select: none;
}
.sec-index--dark { -webkit-text-stroke-color: rgba(255, 255, 255, 0.10); }
@supports not (-webkit-text-stroke: 1px black) {
.sec-index { color: rgba(35, 31, 32, 0.05); }
.sec-index--dark { color: rgba(255, 255, 255, 0.06); }
}
/* ============================================================
BLOG — "The Press Journal" (S14, 2.5.2)
Article body typography for Quill.js HTML output, share
buttons, clamps. Colorshade tokens only — no blueprint colors.
============================================================ */
.blog-content { font-size: 1.0625rem; line-height: 1.85; color: rgba(35, 31, 32, 0.75); }
.blog-content h2 { font-family: 'Playfair Display', serif; font-size: 1.65rem; font-weight: 700; color: #231F20; margin: 2.25rem 0 1rem; line-height: 1.25; }
.blog-content h3 { font-family: 'Outfit', sans-serif; font-size: 1.2rem; font-weight: 700; color: #231F20; margin: 1.75rem 0 0.75rem; }
.blog-content h4 { font-family: 'Outfit', sans-serif; font-size: 1.05rem; font-weight: 700; color: #353032; margin: 1.5rem 0 0.5rem; }
.blog-content p { margin-bottom: 1.25rem; }
.blog-content ul, .blog-content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.blog-content ul { list-style: disc; }
.blog-content ol { list-style: decimal; }
.blog-content li { margin-bottom: 0.5rem; line-height: 1.75; }
.blog-content li::marker { color: #F15A2E; }
.blog-content strong { color: #231F20; }
.blog-content img { max-width: 100%; border-radius: 1rem; margin: 1.75rem 0; display: block; box-shadow: 0 20px 50px -12px rgba(35, 31, 32, 0.15); }
.blog-content a { color: #F15A2E; text-decoration: underline; text-underline-offset: 3px; }
.blog-content a:hover { color: #c93f18; }
.blog-content blockquote { border-left: 4px solid #F15A2E; padding: 0.9rem 1.4rem; margin: 1.75rem 0; font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.15rem; color: #353032; background: #FDFBF7; border-radius: 0 1rem 1rem 0; }
.blog-content hr { border: none; border-top: 2px dashed #F3EFE7; margin: 2.25rem 0; }
.blog-content pre { background: #231F20; color: #F3EFE7; padding: 1.25rem; border-radius: 0.75rem; overflow-x: auto; margin-bottom: 1.25rem; font-size: 0.875rem; }
.blog-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.9rem; }
.blog-content th { background: #231F20; color: #fff; text-align: left; padding: 0.6rem 0.9rem; font-family: 'Outfit', sans-serif; }
.blog-content td { border: 1px solid #F3EFE7; padding: 0.6rem 0.9rem; }
.share-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1.1rem; border-radius: 999px; font-weight: 700; font-size: 0.75rem; cursor: pointer; transition: opacity .2s, transform .2s; text-decoration: none; }
.share-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.share-rail-btn { width: 44px; height: 44px; border-radius: 0.9rem; display: flex; align-items: center; justify-content: center; transition: transform .2s, box-shadow .2s; box-shadow: 0 2px 8px rgba(35,31,32,.12); text-decoration: none; }
.share-rail-btn:hover { transform: scale(1.08); box-shadow: 0 4px 16px rgba(35,31,32,.18); }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.journal-tabs-scroll::-webkit-scrollbar { display: none; }
.journal-tabs-scroll { -ms-overflow-style: none; scrollbar-width: none; }
/* ============================================================
S17 — Smooth cross-page navigation (blink fix, part 2)
============================================================
Part 1 was swapping the Tailwind CDN for compiled CSS (the CDN
recompiled styles in-browser on every view = white flash).
This adds a browser-native crossfade between full page loads
(cross-document View Transitions). Progressive enhancement:
Chrome/Edge animate, other browsers just ignore it. */
@view-transition {
navigation: auto;
}
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
animation: none !important;
}
}
/* ============================================================
S19 — Product gallery (arrows, dots) — js/main.js drives it
============================================================ */
.product-swiper .product-gallery-arrow {
width: 38px;
height: 38px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(35, 31, 32, 0.10);
box-shadow: 0 4px 14px rgba(35, 31, 32, 0.18);
color: #231F20;
opacity: 0.85;
transition: all 0.25s ease;
}
.product-swiper .product-gallery-arrow:hover {
background: #F15A2E;
color: #fff;
opacity: 1;
}
.product-swiper .product-gallery-arrow::after {
font-size: 14px;
font-weight: 900;
}
.product-swiper .product-gallery-dots {
bottom: 10px !important;
}
.product-swiper .product-gallery-dots .swiper-pagination-bullet {
width: 18px;
height: 4px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.65);
opacity: 1;
transition: all 0.3s ease;
box-shadow: 0 1px 4px rgba(35, 31, 32, 0.35);
}
.product-swiper .product-gallery-dots .swiper-pagination-bullet-active {
background: #F15A2E;
width: 28px;
}
/* ============================================================
S19 — Hero proof-image rotator ("captured by camera" feel)
============================================================
Frames crossfade every ~5s (js/main.js); the incoming frame
settles from a slight zoom like a lens finding focus. Gentle
by design — nothing distracting (developer spec). */
.hero-rotator-img {
opacity: 0;
transform: scale(1.05);
transition: opacity 1.4s ease;
will-change: opacity, transform;
}
.hero-rotator-img.is-active {
opacity: 1;
transform: scale(1);
transition: opacity 1.4s ease, transform 6.5s ease-out;
}
@media (prefers-reduced-motion: reduce) {
.hero-rotator-img { transition: none; transform: none; }
}
/* S19 — long product description prose (trusted-admin HTML) */
.product-description p { margin-bottom: 0.9rem; }
.product-description ul { list-style: none; margin: 0.9rem 0; padding: 0; display: grid; gap: 0.45rem; }
.product-description ul li { position: relative; padding-left: 1.4rem; }
.product-description ul li::before {
content: ''; position: absolute; left: 0; top: 0.42em;
width: 0.55rem; height: 0.55rem; border-radius: 3px; background: #F15A2E;
}
.product-description strong { color: #231F20; font-weight: 800; }
.product-description h3 {
font-family: 'Playfair Display', serif; font-weight: 700;
color: #231F20; font-size: 1.15rem; margin: 1.3rem 0 0.6rem;
}
/* S19b — homepage hero next/back arrows */
.hero-swiper .hero-arrow {
width: 44px;
height: 44px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.14);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #fff;
opacity: 0.75;
transition: all 0.25s ease;
}
.hero-swiper .hero-arrow:hover {
background: #F15A2E;
border-color: #F15A2E;
opacity: 1;
}
.hero-swiper .hero-arrow::after {
font-size: 16px;
font-weight: 900;
}
@media (max-width: 640px) {
.hero-swiper .hero-arrow { width: 36px; height: 36px; }
.hero-swiper .hero-arrow::after { font-size: 13px; }
}
/* ============================================================
S19b — VIBRATION KILL (developer: "page shakes until I move")
============================================================
Root cause: hover-lift feedback loop. After scrolling, the mouse
rests on a card; the card lifts on hover, slides out from under
the stationary cursor, un-hovers, drops back under the cursor,
re-hovers — an oscillation that only stops when the mouse moves.
Fix: every lifting element grows an invisible ::after "hitbox
extension" while hovered, covering the space it vacated so the
cursor never exits mid-lift. Plus scrollbar-gutter so scrollbar
appearance can never shift the layout width. */
html { scrollbar-gutter: stable; }
.card-3d-hover,
[class*="hover:-translate-y"] { position: relative; }
.card-3d-hover:hover::after,
[class*="hover:-translate-y"]:hover::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -16px; /* covers the vacated strip (lifts are 6-8px) */
height: 16px;
}
/* ============================================================================
S21 — KEYBOARD ACCESSIBILITY
============================================================================
The audit found ZERO :focus-visible rules in the entire stylesheet. Tailwind's
preflight removes the browser's default focus ring, so a keyboard user had no
indication whatsoever of where they were on the page — every link, button and
field looked identical whether focused or not. That is WCAG 2.4.7 (Focus
Visible) failed sitewide, and it is also simply unusable.
:focus-visible, not :focus — the browser only applies it for keyboard/AT
interaction, so mouse users never see a ring on click. That distinction is
why this can be applied globally without touching the visual design.
========================================================================== */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 3px solid #F15A2E; /* brand orange — passes contrast on cream AND charcoal */
outline-offset: 3px;
border-radius: 4px;
}
/* On the charcoal header/footer, orange-on-charcoal is legible but a light ring
reads faster. Scoped so it cannot leak into the cream page body. */
.bg-charcoal :where(a, button, input, select, textarea, [tabindex]):focus-visible,
footer :where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline-color: #FBF8F3;
}
/* The skip link. Off-screen until focused — never display:none, which would
remove it from the tab order and defeat the entire purpose. */
.cs-skip-link {
position: absolute;
left: 1rem;
top: -100px;
z-index: 9999;
display: inline-flex;
align-items: center;
padding: 0.75rem 1.25rem;
background: #231F20;
color: #FBF8F3;
font-size: 0.8125rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 0 0 0.75rem 0.75rem;
border-bottom: 3px solid #F15A2E;
box-shadow: 0 8px 24px rgba(35, 31, 32, 0.28);
transition: top 160ms ease-out;
}
.cs-skip-link:focus {
top: 0;
}
/* The skip target itself must never show a ring — it is an empty anchor point,
and a floating orange box in the middle of the page would be baffling. */
#main-content:focus,
#main-content:focus-visible {
outline: none;
}
@media (prefers-reduced-motion: reduce) {
.cs-skip-link { transition: none; }
}
/* S21 — stretched link for the homepage offer cards.
The cards used onclick on a , which meant nine navigation targets on the
site's highest-authority page were invisible to crawlers and unreachable by
keyboard. The overlay anchor sits above the card's decorative layers (which
top out at z-20) but the cards contain no other interactive elements, so it
captures the click exactly as the old handler did. */
.offer-card { position: relative; }
.offer-card-link {
position: absolute;
inset: 0;
z-index: 30;
display: block;
border-radius: inherit;
}
.offer-card-link:focus-visible {
outline: 3px solid #F15A2E;
outline-offset: -3px; /* inset — an outer ring would be clipped by overflow-hidden */
}
/* ============================================================================
INSTANT SEARCH — the Light Table (S28c)
============================================================================
The dropdown that hangs off the header search box, plus the mobile overlay
this site did not have at all (the header input is `hidden lg:flex`, so a
phone visitor previously had no way to search).
LEAP-FORWARD NOTE: the mechanics are ported from a sibling project, the look
is not. This is Colorshade's own press idiom — a light table: cream ground,
a thin registration rule under each group heading, charcoal ink, and the
orange only where a decision is offered. Nothing here should be recognisable
as another project's dropdown.
Written by hand rather than as Tailwind utilities because these are
JS-generated class names — the Tailwind scanner never sees them, so utilities
would be purged out of the compiled build and silently render unstyled.
============================================================================ */
.cs-s-panel {
position: absolute;
top: calc(100% + 10px);
left: 0;
right: 0;
z-index: 60;
display: none;
max-height: min(70vh, 560px);
overflow-y: auto;
overscroll-behavior: contain;
background: #FDFBF7;
border: 1.5px solid rgba(35, 31, 32, .12);
border-radius: 18px;
box-shadow: 0 18px 50px -12px rgba(35, 31, 32, .28);
padding: 10px;
}
.cs-s-panel.is-open { display: block; }
/* Group heading + its registration rule. */
.cs-s-grp {
font-size: 10px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(35, 31, 32, .40);
padding: 10px 8px 5px;
display: flex;
align-items: center;
gap: 8px;
}
.cs-s-grp::after {
content: '';
flex: 1;
height: 1px;
background: repeating-linear-gradient(90deg,
rgba(35, 31, 32, .16) 0 4px, transparent 4px 8px);
}
.cs-s-qtyhead { color: #C2451F; }
.cs-s-qtyhead::after { background: repeating-linear-gradient(90deg,
rgba(241, 90, 46, .35) 0 4px, transparent 4px 8px); }
.cs-s-row {
display: flex;
align-items: center;
gap: 12px;
padding: 8px;
border-radius: 12px;
text-decoration: none;
color: inherit;
transition: background .12s;
}
.cs-s-row:hover, .cs-s-row:focus-visible { background: rgba(241, 90, 46, .07); outline: none; }
/* contain, never cover — the no-crop rule applies here too. A search result is
a product photograph like any other. */
.cs-s-thumb {
width: 44px;
height: 44px;
flex: 0 0 44px;
object-fit: contain;
background: #F3EDE8;
border: 1px solid rgba(35, 31, 32, .08);
border-radius: 9px;
}
.cs-s-thumb-none { display: block; }
.cs-s-meta { flex: 1; min-width: 0; }
.cs-s-nm {
display: block;
font-size: 13.5px;
font-weight: 700;
color: #231F20;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cs-s-sb {
display: block;
font-size: 11.5px;
color: rgba(35, 31, 32, .50);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cs-s-qty {
display: inline-block;
margin-left: 7px;
padding: 1px 7px;
border-radius: 99px;
background: rgba(241, 90, 46, .10);
color: #C2451F;
font-weight: 700;
font-size: 10.5px;
}
.cs-s-qty-min { background: rgba(35, 31, 32, .07); color: rgba(35, 31, 32, .55); }
.cs-s-price {
font-size: 12px;
font-weight: 800;
color: #231F20;
white-space: nowrap;
}
.cs-s-quote { color: rgba(35, 31, 32, .38); font-weight: 700; }
/* The one-tap add. Three steps become one; every removed step is a customer
who does not drift away. */
.cs-s-add {
flex: 0 0 auto;
width: 28px;
height: 28px;
border-radius: 9px;
border: 1.5px solid rgba(241, 90, 46, .35);
background: #fff;
color: #F15A2E;
font-size: 15px;
font-weight: 800;
line-height: 1;
cursor: pointer;
transition: all .15s;
}
.cs-s-add:hover { background: #F15A2E; color: #fff; }
.cs-s-add.is-added { background: #37B24A; border-color: #37B24A; color: #fff; }
/* Chips: one scrolling line, never a stacked list. Stacked, four suggestions
eat the whole first screen on a phone before a single product appears. */
.cs-s-chiprow {
display: flex;
gap: 7px;
overflow-x: auto;
padding: 3px 8px 8px;
scrollbar-width: none;
}
.cs-s-chiprow::-webkit-scrollbar { display: none; }
.cs-s-chip {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 99px;
border: 1.5px solid rgba(35, 31, 32, .12);
background: #fff;
color: rgba(35, 31, 32, .72);
font-size: 12px;
font-weight: 700;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
}
.cs-s-chip:hover { border-color: #F15A2E; color: #231F20; }
.cs-s-chipn {
background: rgba(35, 31, 32, .07);
border-radius: 99px;
padding: 0 6px;
font-size: 10px;
margin-left: 5px;
}
.cs-s-empty { padding: 4px 0 2px; }
.cs-s-zero { padding: 22px 16px; text-align: center; }
.cs-s-zero b { display: block; font-size: 14px; color: #231F20; margin-bottom: 4px; }
.cs-s-zero p { font-size: 12.5px; color: rgba(35, 31, 32, .55); margin: 0 0 12px; }
.cs-s-fix {
color: #C2451F;
font-weight: 800;
cursor: pointer;
border-bottom: 1.5px dashed rgba(241, 90, 46, .5);
}
.cs-s-wa {
display: inline-block;
padding: 9px 18px;
border-radius: 99px;
background: #37B24A;
color: #fff;
font-size: 12.5px;
font-weight: 800;
text-decoration: none;
}
.cs-s-wa:hover { background: #2A8C39; }
.cs-s-all {
display: block;
text-align: center;
padding: 11px;
margin-top: 6px;
border-top: 1px solid rgba(35, 31, 32, .09);
font-size: 12px;
font-weight: 800;
color: #C2451F;
text-decoration: none;
}
.cs-s-all:hover { background: rgba(241, 90, 46, .06); }
/* ── Mobile overlay ──────────────────────────────────────────────────────── */
.cs-s-overlay {
position: fixed;
inset: 0;
z-index: 200;
display: none;
background: #FDFBF7;
flex-direction: column;
}
.cs-s-overlay.is-open { display: flex; }
.cs-s-obar {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-bottom: 1.5px solid rgba(35, 31, 32, .10);
background: #fff;
}
.cs-s-obar input {
flex: 1;
min-width: 0;
border: 1.5px solid rgba(35, 31, 32, .12);
background: #FDFBF7;
border-radius: 99px;
padding: 11px 16px;
font-size: 15px; /* 16px-ish: anything smaller makes iOS zoom on focus */
font-weight: 600;
color: #231F20;
outline: none;
}
.cs-s-obar input:focus { border-color: rgba(241, 90, 46, .5); background: #fff; }
.cs-s-oclose {
flex: 0 0 auto;
border: 0;
background: none;
font-size: 13px;
font-weight: 800;
color: rgba(35, 31, 32, .55);
cursor: pointer;
padding: 8px 4px;
}
/* Inside the overlay the panel is the page, not a floating card. */
.cs-s-overlay .cs-s-panel {
position: static;
display: block;
max-height: none;
flex: 1;
border: 0;
border-radius: 0;
box-shadow: none;
background: transparent;
padding: 6px 8px 40px;
}
/* The trigger that appears only where the desktop search bar does not. */
.cs-s-trigger { display: inline-flex; }
@media (min-width: 1024px) { .cs-s-trigger { display: none; } }
@media (prefers-reduced-motion: reduce) {
.cs-s-row, .cs-s-add, .cs-s-chip { transition: none; }
}