bars animate into an × via rotate transforms
================================================================ */
.sopic-navbar {
background: var(--clr-nav-bg);
box-shadow: 0 1px 0 var(--clr-border), var(--clr-nav-shadow);
position: fixed !important;
top: 32px !important;
width: 100%;
z-index: 1000;
}
/* Flex row containing brand, hamburger, and nav links */
.nav-inner {
display: flex;
align-items: center;
padding: .9rem 0;
gap: 1rem;
flex-wrap: wrap;
position: relative;
}
/* ── Brand / logo ── */
.brand-sopic {
font-family: var(--font-display);
font-size: 1.65rem;
font-weight: 800;
color: var(--clr-primary);
letter-spacing: -.03em;
}
.brand-sopic img {
width: 64px;
height: 32px;
border-radius: var(--radius-sm);
/* object-fit: cover; */
}
.brand-sopic--light { color: var(--clr-white); } /* Footer variant */
.navbar-brand { margin-right: auto; } /* Pushes links to the right */
/* ── Desktop nav links ── */
.nav-menu {
display: flex;
align-items: center;
gap: .25rem;
}
.nav-link {
font-family: var(--font-display);
font-weight: 500;
font-size: .875rem;
color: var(--clr-nav-text);
padding: .4rem .8rem;
border-radius: var(--radius-sm);
transition: color var(--t-fast), background var(--t-fast);
}
.nav-link:hover { color: var(--clr-nav-hover); background: var(--clr-primary-subtle); }
/* ── Hidden checkbox that drives the mobile toggle ── */
.nav-toggle-cb { display: none; }
/* ── Hamburger icon (three horizontal bars) ── */
.nav-hamburger {
display: none; /* Hidden on desktop — shown via media query */
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: .4rem;
margin-left: auto;
}
.nav-hamburger span {
display: block;
width: 24px;
height: 2px;
background: var(--clr-text-dark);
border-radius: 2px;
transition: all var(--t-mid) var(--ease);
}
/* ── Mobile breakpoint ── */
@media (max-width: 991px) {
/* Show the hamburger button */
.nav-hamburger { display: flex; }
/* Nav menu: hidden by default, slides open smoothly */
.nav-menu {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
gap: .1rem;
overflow: hidden;
max-height: 0;
padding-top: 0;
padding-bottom: 0;
border-top: 1px solid transparent;
transition: max-height .3s cubic-bezier(.4,0,.2,1),
padding .25s ease,
border-color .2s ease;
}
/* Open state — checkbox checked */
.nav-toggle-cb:checked ~ .nav-menu {
max-height: 400px;
padding-top: .75rem;
padding-bottom: .75rem;
border-top-color: var(--clr-border);
}
/* Animate bar 1: slide down + rotate 45° → top of × */
.nav-toggle-cb:checked ~ .nav-hamburger span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
/* Animate bar 2: fade out → middle of × */
.nav-toggle-cb:checked ~ .nav-hamburger span:nth-child(2) {
opacity: 0;
}
/* Animate bar 3: slide up + rotate -45° → bottom of × */
.nav-toggle-cb:checked ~ .nav-hamburger span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.nav-link { width: 100%; padding: .6rem .75rem; border-radius: 6px; }
.ms-lg-3 { margin-left: .75rem !important; margin-top: .5rem; }
}
/* ================================================================
8. HERO CAROUSEL
Pure CSS technique — no JavaScript.
HOW SLIDE VISIBILITY WORKS:
1. All .carousel-slide elements are stacked in a CSS Grid
single cell (grid-area: 1/1), all invisible by default.
2. When radio #s1 is :checked, the CSS rule:
#s1:checked ~ .carousel-viewport #slide-1 { opacity:1 }
makes slide-1 visible and interactive.
3. Clicking a dot label checks its radio input, which the
CSS sibling selector (~) picks up to show the right slide.
ARROW VISIBILITY:
Each arrow has class .arr-N matching slide N.
CSS shows .arr-1 prev/next only when #s1 is :checked, etc.
================================================================ */
/* Hide the radio inputs — they still function but are invisible */
.carousel-radio { display: none; }
.hero-section {
background: var(--clr-white);
position: relative;
overflow: hidden;
padding: 0 0 90px;
}
/* Single CSS grid cell — all slides occupy the same space */
.carousel-viewport {
display: grid;
grid-template-columns: 1fr;
}
/* All slides stacked, invisible + non-interactive by default */
.carousel-slide {
grid-area: 1 / 1; /* All in the same grid cell */
padding: 20px 0 90px; /* Bottom padding for dot nav */
opacity: 0;
visibility: hidden;
transition: opacity .55s var(--ease), visibility .55s;
pointer-events: none; /* Prevent interaction when hidden */
}
/* ── Show only the active slide based on checked radio ── */
#s1:checked ~ .carousel-viewport #slide-1,
#s2:checked ~ .carousel-viewport #slide-2,
#s3:checked ~ .carousel-viewport #slide-3,
#s4:checked ~ .carousel-viewport #slide-4 {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Minimum height to prevent layout jump between slides */
.hero-row { min-height: 380px; align-items: flex-start !important; transition: min-height .3s var(--ease); }
/* ── Eyebrow label above the main heading ── */
.hero-eyebrow {
font-family: var(--font-display);
font-size: .75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .16em;
color: var(--clr-primary);
margin-bottom: 1.1rem;
display: flex;
align-items: center;
gap: .55rem;
}
/* Short red line before the eyebrow text — pure CSS decoration */
.hero-eyebrow::before {
content: '';
display: inline-block;
width: 24px;
height: 2px;
background: var(--clr-primary);
border-radius: 2px;
}
/* ── Hero title — used by both (slide 1) and
(slides 2-4) ── */
.hero-title,
h1.hero-title {
font-family: var(--font-display);
font-size: clamp(2rem, 4.5vw, 3.1rem);
font-weight: 800;
letter-spacing: -.025em;
color: var(--clr-text-dark);
margin-bottom: 1.1rem;
line-height: 1.1;
}
/* Red accent span inside the hero title */
.hero-title-accent { color: var(--clr-primary); }
/* Hero description paragraph */
.hero-desc {
color: var(--clr-text-muted);
font-size: .97rem;
max-width: 440px;
line-height: 1.85;
}
/* ── Hero image card ── */
.hero-image-wrapper {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.hero-img {
width: 100%;
height: 430px;
object-fit: cover;
display: block;
transition: transform .65s var(--ease);
}
/* Subtle zoom on image hover */
.hero-image-wrapper:hover .hero-img { transform: scale(1.04); }
/* ── Dot navigation ── */
.carousel-dots {
position: absolute;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 10;
}
.carousel-dot {
display: block;
width: 10px;
height: 10px;
border-radius: var(--radius-full);
background: var(--clr-border);
border: 2px solid var(--clr-border);
cursor: pointer;
transition: all var(--t-fast);
}
.carousel-dot:hover {
background: var(--clr-primary-light);
border-color: var(--clr-primary-light);
}
/* Active dot expands and turns red — driven by checked radio state */
#s1:checked ~ .carousel-dots label:nth-child(1),
#s2:checked ~ .carousel-dots label:nth-child(2),
#s3:checked ~ .carousel-dots label:nth-child(3),
#s4:checked ~ .carousel-dots label:nth-child(4) {
width: 28px; /* Pill shape for active dot */
background: var(--clr-primary);
border-color: var(--clr-primary);
border-radius: var(--radius-full);
}
/* ── Prev / Next arrow buttons ── */
.carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
background: var(--clr-white);
border: 2px solid var(--clr-border);
border-radius: var(--radius-full);
display: none; /* Hidden by default; shown per active slide */
align-items: center;
justify-content: center;
font-size: 1.6rem;
color: var(--clr-text-dark);
cursor: pointer;
z-index: 10;
line-height: 1;
user-select: none;
transition:
background var(--t-fast),
border-color var(--t-fast),
color var(--t-fast),
box-shadow var(--t-fast);
}
.carousel-arrow:hover {
background: var(--clr-primary);
border-color: var(--clr-primary);
color: var(--clr-white);
box-shadow: var(--shadow-red);
}
/* Position the prev arrow on the left, next on the right */
.carousel-arrow--prev { left: 16px; }
.carousel-arrow--next { right: 16px; }
/* Show ONLY the arrows that belong to the currently active slide */
#s1:checked ~ .arr-1,
#s2:checked ~ .arr-2,
#s3:checked ~ .arr-3,
#s4:checked ~ .arr-4 { display: flex; }
/* ================================================================
9. ABOUT SECTION
Simple two-column layout: decorative bolt icon + text block.
The bolt icon pulses via a CSS keyframe animation.
================================================================ */
.about-section {
padding: var(--section-py) 0;
border-top: 1px solid var(--clr-border-soft);
border-bottom: 1px solid var(--clr-border-soft);
}
/* ── Image column ── */
.about-img-wrap {
position: relative;
border-radius: var(--radius-lg, 12px);
overflow: hidden;
box-shadow: 0 8px 32px rgba(0,0,0,.14);
}
.about-shop-img {
width: 100%;
height: 380px;
object-fit: cover;
display: block;
transition: transform .45s ease;
}
.about-img-wrap:hover .about-shop-img {
transform: scale(1.03);
}
/* Small floating badge over the image */
.about-img-badge {
position: absolute;
bottom: 16px;
left: 16px;
background: var(--clr-primary, #d40000);
color: #fff;
font-size: .78rem;
font-weight: 600;
letter-spacing: .04em;
padding: 5px 12px;
border-radius: 999px;
display: flex;
align-items: center;
gap: 6px;
box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
/* ── Text column ── */
.about-eyebrow {
display: inline-block;
font-size: .75rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--clr-primary, #d40000);
margin-bottom: .6rem;
}
.about-text {
color: var(--clr-text-body);
font-size: .97rem;
line-height: 1.85;
margin-bottom: .8rem;
}
/* ================================================================
11. SHOWROOM SECTION
Side-by-side text + embedded YouTube video.
The video uses aspect-ratio: 16/9 so it's always proportional.
================================================================ */
.showroom-section {
padding: var(--section-py) 0;
background: var(--clr-white);
}
.showroom-desc {
font-size: .97rem;
color: var(--clr-text-muted);
line-height: 1.88;
}
/* Video container — aspect-ratio keeps it 16:9 at any width */
.video-wrapper {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
aspect-ratio: 16 / 9;
background: #000;
}
/* Stretch iframe to fill its container */
.video-wrapper iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
}
/* ================================================================
12. PRODUCTS SECTION
Filter sidebar + product grid. Currently shows an empty state.
Filter links are real tags so search engines can crawl them.
================================================================ */
.products-section {
padding: var(--section-py) 0;
background: var(--clr-bg-section);
}
/* ── Filter sidebar box ── */
.filter-box {
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
overflow: hidden;
background: var(--clr-white);
box-shadow: var(--shadow-sm);
}
/* Dark header bar of the filter box */
.filter-header {
background: var(--clr-text-dark);
color: var(--clr-white);
font-family: var(--font-display);
font-weight: 600;
font-size: .88rem;
padding: .9rem 1.2rem;
}
/* Body of the filter box — vertical list of category links */
.filter-body {
padding: 1.2rem;
display: flex;
flex-direction: column;
gap: .35rem;
}
/* "CATÉGORIES" label above the filter list */
.filter-cat-label {
font-family: var(--font-display);
font-size: .68rem;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--clr-text-light);
margin-bottom: .3rem;
}
/* Individual filter links styled as buttons */
.btn-filter {
display: block;
text-align: left;
background: transparent;
border: none;
border-radius: var(--radius-sm);
font-family: var(--font-display);
font-size: .84rem;
font-weight: 500;
color: var(--clr-text-body);
padding: .5rem .8rem;
transition: all var(--t-fast);
cursor: pointer;
}
.btn-filter:hover,
.btn-filter:focus { background: var(--clr-primary-subtle); color: var(--clr-primary); }
/* Active / selected category */
.btn-filter.active { background: var(--clr-primary); color: var(--clr-white); }
/* ── Empty state (shown when no products are loaded) ── */
.empty-icon-wrap { font-size: 3.5rem; color: var(--clr-border); line-height: 1; }
.empty-title { font-family: var(--font-display); font-size: 1.15rem; color: var(--clr-text-dark); }
.empty-desc { color: var(--clr-text-muted); font-size: .88rem; margin-top: .4rem; }
/* ================================================================
13. NEWS / ACTUALITÉS
Three article cards in a responsive 3-column grid.
Cards lift on hover via transform + box-shadow transition.
The image zooms via scale() — clip by overflow: hidden.
================================================================ */
.news-section {
padding: var(--section-py) 0;
background: var(--clr-white);
border-top: 1px solid var(--clr-border-soft);
}
/* ── News card ── */
.news-card {
border-radius: var(--radius-md);
overflow: hidden;
background: var(--clr-white);
border: 1px solid var(--clr-border);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
height: 100%; /* Equal height within Bootstrap row */
transition: box-shadow var(--t-mid), transform var(--t-mid);
}
/* Card lifts on hover */
.news-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-5px);
}
/* Image wrapper — overflow: hidden clips the zoom effect */
.news-card-img-wrap {
position: relative;
overflow: hidden;
}
.news-card-img-wrap img {
width: 100%;
height: 200px;
object-fit: cover;
transition: transform .55s var(--ease);
}
/* Image zooms when card is hovered */
.news-card:hover .news-card-img-wrap img { transform: scale(1.06); }
/* Date badge overlaid on the top-left of the image */
.news-card-date {
position: absolute;
top: 14px;
left: 14px;
background: var(--clr-primary);
color: var(--clr-white);
border-radius: var(--radius-sm);
text-align: center;
padding: .28rem .6rem;
line-height: 1.2;
}
.news-card-date .day { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; display: block; }
.news-card-date .month { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
/* Card body — flex column so the arrow stays at the bottom */
.news-card-body {
padding: 1.4rem;
flex: 1;
display: flex;
flex-direction: column;
}
/* Category pill tag */
.news-tag {
display: inline-block;
background: var(--clr-primary-subtle);
color: var(--clr-primary);
font-family: var(--font-display);
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
padding: .2rem .65rem;
border-radius: var(--radius-full);
margin-bottom: .75rem;
}
.news-card-title {
font-size: .98rem;
font-weight: 700;
color: var(--clr-text-dark);
margin-bottom: .55rem;
line-height: 1.35;
}
/* flex: 1 pushes the arrow to the bottom of the card */
.news-card-text {
font-size: .86rem;
color: var(--clr-text-muted);
flex: 1;
line-height: 1.75;
}
/* Circular arrow button at the bottom of each card */
.news-arrow {
margin-top: 1rem;
align-self: flex-start;
display: inline-flex;
width: 36px;
height: 36px;
background: var(--clr-primary);
color: var(--clr-white);
border-radius: var(--radius-full);
align-items: center;
justify-content: center;
font-size: 1rem;
transition: background var(--t-fast), transform var(--t-fast);
}
.news-arrow:hover {
background: var(--clr-primary-dark);
color: var(--clr-white);
transform: translateX(4px); /* Nudge right on hover */
}
/* ================================================================
14. PARTNERS MARQUEE
CSS-only infinite horizontal scroll.
TECHNIQUE:
• .partners-track width is "max-content" (all logos in a row)
• @keyframes marquee translates it exactly -50% (one full set)
• The list contains 7 logos duplicated = 14 items total.
translateX(-50%) moves exactly one set, then loops perfectly.
• mask-image fades the left/right edges for a polished look.
• animation-play-state: paused on :hover lets users read logos.
================================================================ */
.partners-section {
padding: var(--section-py) 0;
background: var(--clr-bg-light);
border-top: 1px solid var(--clr-border-soft);
overflow: hidden;
}
/* Edge fade effect via CSS mask — cross-browser prefixed */
.partners-strip {
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
/* The scrolling row of logos */
.partners-track {
display: flex;
align-items: center;
gap: 1.5rem;
width: max-content; /* Prevents wrapping */
animation: marquee 26s linear infinite;
}
/* Pause on hover so users can read brand names */
.partners-strip:hover .partners-track { animation-play-state: paused; }
/* Translate exactly -50% (moves one full set of 7 logos) */
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Individual logo pill */
.partner-logo {
background: var(--clr-white);
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
padding: 1rem 2.2rem;
font-family: var(--font-display);
font-size: .78rem;
font-weight: 700;
letter-spacing: .1em;
color: var(--clr-text-light);
white-space: nowrap;
min-width: 150px;
text-align: center;
flex-shrink: 0;
transition: border-color var(--t-fast), color var(--t-fast);
}
/* Highlight brand color on hover */
.partner-logo:hover { border-color: var(--clr-primary); color: var(--clr-primary); }
/* ================================================================
15. FOOTER
Dark background, four columns: brand, links, categories, contact.
Each column heading uses a small-caps style despite being
(the font-size is overridden to keep it visually small).
================================================================ */
.sopic-footer {
background: var(--clr-dark-bg);
color: var(--clr-dark-text);
padding: 72px 0 0;
}
.footer-tagline {
font-size: .875rem;
color: var(--clr-dark-text);
line-height: 1.78;
max-width: 290px;
}
/* Small-caps column heading (despite being an for semantics) */
.footer-heading {
font-family: var(--font-display);
font-size: .75rem; /* Override h2 default size */
font-weight: 700;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--clr-white);
margin-bottom: 1.2rem;
}
/* Column link lists */
.footer-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: .6rem;
}
.footer-links a { font-size: .875rem; color: var(--clr-dark-text); transition: color var(--t-fast); }
.footer-links a:hover { color: var(--clr-primary); }
/* Contact list with icons */
.footer-contact-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: .8rem;
}
.footer-contact-list li {
display: flex;
align-items: flex-start;
gap: .65rem;
font-size: .875rem;
color: var(--clr-dark-text);
}
.footer-contact-list li i {
color: var(--clr-primary);
font-size: .95rem;
margin-top: .18rem;
flex-shrink: 0;
}
.footer-contact-list a { color: var(--clr-dark-text); transition: color var(--t-fast); }
.footer-contact-list a:hover { color: var(--clr-primary); }
/* ── Social media icon buttons ── */
.social-btn {
width: 38px;
height: 38px;
background: var(--clr-dark-surface);
border: 1px solid var(--clr-dark-border);
border-radius: var(--radius-full);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--clr-dark-text);
font-size: .95rem;
transition: all var(--t-fast);
}
.social-btn:hover {
background: var(--clr-primary);
border-color: var(--clr-primary);
color: var(--clr-white);
transform: translateY(-2px);
}
/* YouTube button gets its own brand red on hover */
.social-btn--yt:hover { background: #ff0000; border-color: #ff0000; }
/* Copyright bar */
.footer-bottom {
border-top: 1px solid var(--clr-dark-border);
padding-bottom: 2rem;
color: var(--clr-text-light);
font-size: .78rem;
}
/* ================================================================
16. SCROLL REVEAL
Elements with [data-reveal] start invisible and slide up.
JS adds .is-visible when they enter the viewport via
IntersectionObserver. Using will-change hints the browser
to promote these elements to their own compositor layer,
keeping animations smooth without triggering repaints.
================================================================ */
[data-reveal] {
opacity: 1;
transform: none;
transition: opacity .55s cubic-bezier(.4,0,.2,1),
transform .55s cubic-bezier(.4,0,.2,1);
will-change: opacity, transform;
}
/* JS (if present) can opt elements INTO the fade-up animation by adding
.reveal-pending before they scroll into view, then removing it (or
adding .is-visible) once they're in the viewport. Without JS, content
is visible by default — no permanently-hidden sections. */
.reveal-pending {
opacity: 0;
transform: translateY(28px);
}
[data-reveal].is-visible {
opacity: 1;
transform: none;
}
/* ── Navbar scrolled shadow ──────────────────────────────────
JS toggles .scrolled when window.scrollY > 60px */
.sopic-navbar.scrolled {
box-shadow: 0 4px 20px rgba(0,0,0,.12);
}
/* ── Nav link active state (set by JS on current page) ──── */
.nav-link.active {
color: var(--clr-primary);
background: var(--clr-primary-subtle);
font-weight: 700;
position: relative;
}
/* Accent underline on the active link (desktop only — hidden on mobile by the menu style) */
@media (min-width: 992px) {
.nav-link.active::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 2px;
background: var(--clr-primary);
border-radius: 2px;
}
}
/* On mobile the active link gets a left border accent instead */
@media (max-width: 991.98px) {
.nav-link.active {
border-left: 3px solid var(--clr-primary);
padding-left: calc(.75rem - 3px);
}
}
/* ================================================================
17. RESPONSIVE BREAKPOINTS
Mobile-first refinements layered on top of Bootstrap's grid.
Covers large desktops down to small phones, matching the kind
of fluid, carefully-tuned responsiveness seen on modern sites.
================================================================ */
/* Prevent any horizontal overflow / scrollbar on small screens */
html, body { overflow-x: hidden; max-width: 100%; }
/* ── Large desktops (1400px+) ── */
@media (min-width: 1400px) {
.container-xl { max-width: 1320px; }
}
/* ── Laptops / small desktops (max 1199.98px) ── */
@media (max-width: 1199.98px) {
:root { --section-py: 64px; }
.hero-row { min-height: 420px; }
.hero-img { height: 380px; }
.hero-title, h1.hero-title { font-size: clamp(1.9rem, 4.6vw, 2.7rem); }
}
/* ── Tablet (max 991.98px) ── */
@media (max-width: 991.98px) {
/* Reduce section padding on smaller screens */
:root { --section-py: 56px; }
/* Remove side borders on the middle stat (they stack vertically) */
.stat-item--mid {
border-left: none;
border-right: none;
border-top: 1px solid var(--clr-stats-border);
border-bottom: 1px solid var(--clr-stats-border);
}
/* ── Hero / carousel: stack text above image, fluid height ── */
.hero-row { min-height: 0; }
/* Image first on mobile via explicit order-* classes on each slide in index.php */
.hero-row .col-lg-6:first-child { order: 2; }
.hero-row .col-lg-6:last-child { order: 1; margin-top: 0; margin-bottom: 1.25rem; }
.hero-content { text-align: left; }
.hero-img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
/* Carousel slide gets breathing room for dots below content */
.carousel-slide { padding: 56px 0 76px; }
/* Stack about image above text on small screens */
.about-shop-img { height: 240px; }
/* Showroom: stack video below text with spacing */
.showroom-section .col-lg-7 { margin-top: 2rem; }
/* Products: filter sidebar full width above grid */
.products-section .col-lg-3 { margin-bottom: 1.5rem; }
/* Topbar: stays fixed on mobile — single row, location left, email right */
.topbar {
position: fixed !important;
top: 0 !important;
z-index: 1001;
padding: .35rem 0;
font-size: .72rem;
}
.topbar .container-xl {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center;
justify-content: space-between;
gap: .4rem;
overflow: hidden;
}
.topbar address {
flex-shrink: 1 !important;
min-width: 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
gap: 0 !important;
flex-wrap: nowrap !important;
margin-bottom: 0 !important;
}
.topbar > .container-xl > span { flex-shrink: 0; white-space: nowrap; }
/* Navbar sits directly below the fixed topbar (~34px) */
.sopic-navbar { top: 34px !important; }
/* Body offset = topbar (~34px) + navbar (~62px) = 96px */
body { padding-top: 96px; }
}
/* ── Mobile (max 767.98px) ── */
@media (max-width: 767.98px) {
body { font-size: 14px; }
/* ═══ HERO / CAROUSEL — mobile redesign ═══
Image on top (shorter, cropped to a wide banner), text
centered below it, dots sit in their own row beneath the
text so nothing overlaps. Arrows are hidden — dots + swipe
are the primary navigation on touch devices. */
.hero-section { margin-top: 0; }
.carousel-slide { padding: 28px 0 24px; }
.hero-row { row-gap: 1.25rem; }
.hero-row .col-lg-6:last-child { margin-top: 0; margin-bottom: 1rem; }
.hero-image-wrapper { border-radius: var(--radius-md); }
.hero-img { aspect-ratio: 16 / 9; height: auto; }
/* Center hero text on small screens for a tidier look */
.hero-content { text-align: center; }
.hero-content .d-flex { justify-content: center; }
.hero-eyebrow { justify-content: center; }
.hero-desc { max-width: 100%; margin-left: auto; margin-right: auto; }
/* Arrows are hidden on touch — dots remain the nav control */
.carousel-arrow { display: none !important; }
/* Dots: own row below the slide content, not absolutely
overlapping text or image */
.carousel-dots {
position: relative;
bottom: auto;
left: auto;
transform: none;
justify-content: center;
margin-top: 1.5rem;
}
/* Reduce stat item padding */
.stat-item { padding: 36px 16px; }
/* Scale down the stat icon on mobile */
.stat-icon-wrap { width: 76px; height: 76px; margin-bottom: 1.1rem; }
.stat-icon { font-size: 2.2rem; }
.stat-number { font-size: 2.1rem; }
/* Showroom video keeps 16:9 but with tighter radius */
.video-wrapper { border-radius: var(--radius-md); }
/* Shorter news card images on mobile */
.news-card-img-wrap img { height: 180px; }
/* Buttons stretch to full width when stacked in groups */
.hero-content .d-flex.flex-wrap.gap-3 .btn-sopic-primary,
.hero-content .d-flex.flex-wrap.gap-3 .btn-sopic-outline {
flex: 1 1 auto;
text-align: center;
}
/* Navbar: slightly tighter padding */
.nav-inner { padding: .65rem 0; }
.brand-sopic { font-size: 1.4rem; }
/* ═══ FOOTER — mobile redesign ═══
Two centered columns side-by-side for Quick Links /
Categories / Contact, with the brand block spanning full
width above them on its own centered row. */
.sopic-footer { padding: 48px 0 0; text-align: center; }
.sopic-footer .row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 1.5rem;
row-gap: 2.25rem;
}
/* Brand block spans both columns, with a divider beneath it */
.sopic-footer .row > .col-lg-4 {
grid-column: 1 / -1;
padding-bottom: 1.75rem;
border-bottom: 1px solid var(--clr-dark-border);
}
/* Contact column (3rd of the non-brand columns) sits alone —
center it under the Quick Links / Categories pair */
.sopic-footer .row > .col-lg-3:last-of-type {
grid-column: 1 / -1;
max-width: 320px;
margin: 0 auto;
}
.sopic-footer .col-lg-4 > a { display: inline-block; }
.footer-tagline {
max-width: 320px;
margin: .85rem auto 0;
}
.footer-socials {
justify-content: center;
margin: 1.1rem auto 0 !important;
}
.social-btn { width: 42px; height: 42px; font-size: 1.05rem; }
.sopic-footer .col-lg-4 .mt-4 { margin-top: 1.4rem !important; }
.footer-heading {
font-size: .72rem;
letter-spacing: .18em;
margin-bottom: 1rem;
}
/* Centered link columns */
.footer-links, .footer-contact-list {
align-items: center;
gap: .85rem;
}
.footer-contact-list li {
flex-direction: column;
align-items: center;
text-align: center;
gap: .35rem;
}
.footer-contact-list li i { margin-top: 0; }
.footer-bottom { margin-top: 2.25rem !important; }
}
/* ── Small phones (max 575.98px) ── */
@media (max-width: 575.98px) {
:root { --section-py: 44px; }
.container-xl { padding-left: 16px; padding-right: 16px; }
/* Hero */
.hero-title, h1.hero-title { font-size: clamp(1.6rem, 8vw, 2.2rem); }
.hero-desc { font-size: .9rem; }
.hero-content .d-flex.flex-wrap.gap-3 {
flex-direction: column;
gap: .75rem !important;
}
.hero-content .d-flex.flex-wrap.gap-3 .btn-sopic-primary,
.hero-content .d-flex.flex-wrap.gap-3 .btn-sopic-outline {
width: 100%;
}
.hero-eyebrow { font-size: .7rem; letter-spacing: .12em; }
.carousel-dots { gap: 10px; margin-top: 1.25rem; }
.carousel-dot { width: 8px; height: 8px; }
#s1:checked ~ .carousel-dots label:nth-child(1),
#s2:checked ~ .carousel-dots label:nth-child(2),
#s3:checked ~ .carousel-dots label:nth-child(3),
#s4:checked ~ .carousel-dots label:nth-child(4) {
width: 22px;
}
/* Section titles scale down slightly more */
.section-title { font-size: clamp(1.4rem, 6vw, 1.9rem); }
.section-subtitle { font-size: .88rem; padding: 0 .5rem; }
/* Stats stack as single column with full-width dividers */
.stat-item { padding: 32px 12px; }
.stat-icon-wrap { width: 64px; height: 64px; margin-bottom: .9rem; }
.stat-icon { font-size: 1.9rem; }
.stat-number { font-size: 1.8rem; }
.stat-label { font-size: .95rem; }
.stat-desc { font-size: .82rem; max-width: 100%; }
/* News cards: shorter images, tighter padding */
.news-card-img-wrap img { height: 160px; }
.news-card-body { padding: 1.1rem; }
.news-card-title { font-size: .92rem; }
/* Partner logos shrink to fit small screens */
.partner-logo { padding: .8rem 1.4rem; font-size: .7rem; min-width: 120px; }
/* Filter box and empty state */
.filter-body { padding: 1rem; }
.empty-products { padding: 32px 12px !important; }
.empty-icon-wrap { font-size: 2.8rem; }
.empty-title { font-size: 1rem; }
/* Back-to-top button smaller and closer to edge */
.back-to-top { width: 40px; height: 40px; bottom: 18px; right: 18px; font-size: 1rem; }
/* Footer: tighten further on very small screens */
.sopic-footer { padding: 40px 0 0; }
.footer-bottom { font-size: .72rem; padding-bottom: 1.5rem; }
.footer-bottom p { padding: 0 .5rem; line-height: 1.6; }
}
/* ── Extra-small phones (max 374.98px) ── */
@media (max-width: 374.98px) {
.brand-sopic { font-size: 1.25rem; }
.hero-title, h1.hero-title { font-size: 1.5rem; }
.stat-icon-wrap { width: 56px; height: 56px; }
.stat-icon { font-size: 1.6rem; }
.social-btn { width: 38px; height: 38px; font-size: .95rem; }
}
/* ── Landscape phones: cap hero height so it doesn't dominate ── */
@media (max-width: 991.98px) and (orientation: landscape) {
.hero-row { min-height: 0; }
.hero-img { aspect-ratio: 16 / 7; }
}
/* ── High-DPI safeguard: ensure tap targets stay comfortable ── */
@media (max-width: 767.98px) {
.nav-link, .btn-filter, .social-btn, .news-arrow {
min-height: 38px;
}
.carousel-dot { min-height: 10px; } /* dots stay visually small */
}
/* ================================================================
17. JS-ENHANCED STATES
These styles are only meaningful when sopic-scripts.js is loaded.
They're placed last so they don't affect the CSS-only baseline.
================================================================ */
/* ── Navbar: stronger shadow when page is scrolled ──
JS adds .navbar--scrolled after 40px of scroll. */
.navbar--scrolled {
box-shadow: 0 4px 24px rgba(0,0,0,.12);
}
/* ── Navbar: compact mode (slightly shorter) on scroll ──
JS adds .navbar--compact after 80px of scroll.
Transition is CSS so no JS layout cost. */
.sopic-navbar {
transition: padding var(--t-mid) var(--ease),
box-shadow var(--t-mid) var(--ease);
}
.navbar--compact .nav-inner { padding-top: .5rem; padding-bottom: .5rem; }
/* ── Back-to-top button ──
Created entirely by JS so zero impact on initial HTML/CLS.
Uses CSS transition for show/hide — no JS animation needed. */
.back-to-top {
position: fixed;
bottom: 32px;
right: 32px;
width: 46px;
height: 46px;
border-radius: var(--radius-full);
background: var(--clr-primary);
color: var(--clr-white);
border: none;
box-shadow: 0 4px 16px rgba(208,2,27,.35);
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 900;
/* Hidden by default — opacity + translateY for smooth appearance */
opacity: 0;
transform: translateY(12px);
pointer-events: none;
transition:
opacity var(--t-mid) var(--ease),
transform var(--t-mid) var(--ease),
background var(--t-fast) var(--ease);
}
/* JS adds this class when scrollY > 500 */
.back-to-top--visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.back-to-top:hover {
background: var(--clr-primary-dark);
transform: translateY(-2px);
}
/* ── News card tilt ──
JS sets card.style.transform on mousemove.
This transition makes the reset smooth on mouseleave. */
.news-card {
transition:
box-shadow var(--t-mid),
transform .25s cubic-bezier(.4,0,.2,1);
}
/* ================================================================
18. PAGE HERO (Contact / Boutique / inner pages)
Compact header banner used on secondary pages. Includes
eyebrow label, title, description and breadcrumb nav.
================================================================ */
.page-hero {
padding: 56px 0 48px;
background: linear-gradient(180deg, var(--clr-primary-subtle) 0%, var(--clr-white) 100%);
border-bottom: 1px solid var(--clr-border-soft);
}
.page-hero-eyebrow {
display: inline-block;
font-family: var(--font-display);
font-size: .72rem;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--clr-primary);
margin-bottom: .6rem;
}
.page-hero-title {
font-size: clamp(1.9rem, 4vw, 2.8rem);
font-weight: 800;
letter-spacing: -.02em;
margin-bottom: .8rem;
}
.page-hero-desc {
color: var(--clr-text-muted);
font-size: 1rem;
max-width: 640px;
margin-bottom: 1.4rem;
}
/* Breadcrumb */
.breadcrumb-nav {
display: flex;
flex-wrap: wrap;
gap: .4rem;
list-style: none;
padding: 0;
margin: 0;
font-family: var(--font-display);
font-size: .82rem;
font-weight: 500;
color: var(--clr-text-muted);
}
.breadcrumb-nav li:not(:last-child)::after {
content: '/';
margin-left: .4rem;
color: var(--clr-text-light);
}
.breadcrumb-nav a { color: var(--clr-text-muted); transition: color var(--t-fast); }
.breadcrumb-nav a:hover { color: var(--clr-primary); }
.breadcrumb-nav li[aria-current="page"] { color: var(--clr-primary); }
/* ================================================================
19. CONTACT INFO CARDS
Three quick-access cards (address / phone / email) shown
near the top of the Contact page.
================================================================ */
.contact-cards-section {
padding: 56px 0 0;
background: var(--clr-white);
}
.contact-info-card {
display: block;
height: 100%;
background: var(--clr-white);
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 2rem 1.6rem;
text-align: center;
transition: box-shadow var(--t-mid), transform var(--t-mid), border-color var(--t-fast);
}
.contact-info-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-4px);
border-color: var(--clr-primary);
}
.contact-info-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: var(--radius-full);
background: var(--clr-primary-subtle);
color: var(--clr-primary);
font-size: 1.4rem;
margin-bottom: 1rem;
}
.contact-info-title {
font-size: 1.05rem;
margin-bottom: .5rem;
}
.contact-info-text {
font-size: .875rem;
color: var(--clr-text-muted);
margin-bottom: 0;
line-height: 1.7;
}
/* ================================================================
20. CONTACT FORM SECTION
Form fields, map embed, and opening-hours card.
================================================================ */
.contact-form-section {
padding: var(--section-py) 0;
background: var(--clr-white);
}
.contact-form-intro {
color: var(--clr-text-muted);
font-size: .95rem;
max-width: 520px;
}
.form-label-sopic {
display: block;
font-family: var(--font-display);
font-size: .82rem;
font-weight: 600;
color: var(--clr-text-dark);
margin-bottom: .4rem;
}
.form-label-sopic span { color: var(--clr-primary); }
.form-control-sopic {
font-family: var(--font-body);
font-size: .9rem;
color: var(--clr-text-body);
border: 1px solid var(--clr-border);
border-radius: var(--radius-sm);
padding: .65rem .9rem;
background: var(--clr-off-white);
transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.form-control-sopic:focus {
border-color: var(--clr-primary);
background: var(--clr-white);
box-shadow: 0 0 0 3px var(--clr-primary-subtle);
outline: none;
}
.form-control-sopic::placeholder { color: var(--clr-text-light); }
/* Map */
.contact-map-wrapper {
position: relative;
width: 100%;
padding-top: 65%;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
border: 1px solid var(--clr-border);
}
.contact-map-wrapper iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* Opening hours card */
.hours-card {
background: var(--clr-bg-section);
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
padding: 1.6rem;
}
.hours-card-title {
font-size: 1.02rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
}
.hours-card-title i { color: var(--clr-primary); }
.hours-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: .65rem;
}
.hours-list li {
display: flex;
justify-content: space-between;
font-size: .875rem;
color: var(--clr-text-body);
padding-bottom: .65rem;
border-bottom: 1px solid var(--clr-border-soft);
}
.hours-list li:last-child { border-bottom: none; padding-bottom: 0; }
.hours-list li span:first-child { font-weight: 600; color: var(--clr-text-dark); }
.hours-closed { color: var(--clr-primary); font-weight: 600; }
/* ================================================================
21. FAQ SECTION
Native / accordion — zero JS required.
================================================================ */
.faq-section {
padding: var(--section-py) 0;
background: var(--clr-bg-section);
border-top: 1px solid var(--clr-border-soft);
}
.faq-list {
max-width: 760px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: .8rem;
}
.faq-item {
background: var(--clr-white);
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
padding: 1rem 1.3rem;
box-shadow: var(--shadow-sm);
}
.faq-question {
font-family: var(--font-display);
font-weight: 700;
font-size: .95rem;
color: var(--clr-text-dark);
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
content: '\002B';
font-size: 1.3rem;
color: var(--clr-primary);
flex-shrink: 0;
transition: transform var(--t-fast);
}
.faq-item[open] .faq-question::after {
content: '\2212';
}
.faq-answer {
font-size: .875rem;
color: var(--clr-text-muted);
margin-top: .8rem;
line-height: 1.75;
}
/* ================================================================
22. CTA BANNER
Bold call-to-action band used near the bottom of inner pages.
================================================================ */
.cta-banner-section {
padding: 64px 0;
background: var(--clr-white);
}
.cta-banner {
background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-dark) 100%);
border-radius: var(--radius-lg);
padding: 3rem 2rem;
text-align: center;
color: var(--clr-white);
box-shadow: var(--shadow-red);
}
.cta-banner-title {
color: var(--clr-white);
font-size: clamp(1.4rem, 3vw, 2rem);
margin-bottom: .6rem;
}
.cta-banner-text {
color: rgba(255,255,255,.88);
font-size: .95rem;
max-width: 520px;
margin: 0 auto;
}
.cta-banner .btn-sopic-primary {
background: var(--clr-white);
color: var(--clr-primary);
border-color: var(--clr-white);
}
.cta-banner .btn-sopic-primary:hover {
background: var(--clr-text-dark);
color: var(--clr-white);
border-color: var(--clr-text-dark);
}
.cta-banner .btn-sopic-outline {
color: var(--clr-white);
border-color: rgba(255,255,255,.6);
}
.cta-banner .btn-sopic-outline:hover {
background: var(--clr-white);
color: var(--clr-primary);
border-color: var(--clr-white);
}
/* ================================================================
23. CATEGORY GRID (Boutique)
Visual cards linking to each product category page.
================================================================ */
.category-grid-section {
padding: var(--section-py) 0;
background: var(--clr-white);
}
.category-card {
display: block;
height: 100%;
background: var(--clr-bg-section);
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
padding: 2rem 1.8rem;
transition: box-shadow var(--t-mid), transform var(--t-mid), border-color var(--t-fast), background var(--t-mid);
}
.category-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-5px);
border-color: var(--clr-primary);
background: var(--clr-white);
}
.category-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: var(--radius-md);
background: var(--clr-primary-subtle);
color: var(--clr-primary);
font-size: 1.5rem;
margin-bottom: 1.2rem;
transition: background var(--t-fast), color var(--t-fast);
}
.category-card:hover .category-icon {
background: var(--clr-primary);
color: var(--clr-white);
}
.category-card-title {
font-size: 1.08rem;
margin-bottom: .55rem;
}
.category-card-text {
font-size: .875rem;
color: var(--clr-text-muted);
margin-bottom: 1.2rem;
line-height: 1.75;
}
.category-card-link {
font-family: var(--font-display);
font-size: .82rem;
font-weight: 700;
color: var(--clr-primary);
display: inline-flex;
align-items: center;
gap: .4rem;
transition: gap var(--t-fast);
}
.category-card:hover .category-card-link { gap: .7rem; }
/* ================================================================
24. FILTER SIDEBAR EXTRAS (Boutique)
Price filters + help card additions to the existing filter box.
================================================================ */
.filter-divider {
border: none;
border-top: 1px solid var(--clr-border-soft);
margin: 1rem 0;
}
.filter-help-card {
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
background: var(--clr-white);
box-shadow: var(--shadow-sm);
padding: 1.4rem;
text-align: center;
}
.filter-help-card i {
font-size: 1.6rem;
color: var(--clr-primary);
margin-bottom: .6rem;
display: inline-block;
}
.filter-help-title {
font-size: .95rem;
margin-bottom: .35rem;
}
.filter-help-text {
font-size: .82rem;
color: var(--clr-text-muted);
margin-bottom: 1rem;
}
/* ================================================================
25. FEATURES / WHY CHOOSE US (Boutique)
Four trust-signal cards with icons.
================================================================ */
.features-section {
padding: var(--section-py) 0;
background: var(--clr-bg-section);
border-top: 1px solid var(--clr-border-soft);
}
.feature-card {
height: 100%;
background: var(--clr-white);
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 1.8rem 1.4rem;
text-align: center;
transition: box-shadow var(--t-mid), transform var(--t-mid);
}
.feature-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-4px);
}
.feature-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: var(--radius-full);
background: var(--clr-primary-subtle);
color: var(--clr-primary);
font-size: 1.3rem;
margin-bottom: 1rem;
}
.feature-card-title {
font-size: .98rem;
margin-bottom: .5rem;
}
.feature-card-text {
font-size: .85rem;
color: var(--clr-text-muted);
margin-bottom: 0;
line-height: 1.7;
}
/* ================================================================
26. RESPONSIVE TWEAKS — new sections
================================================================ */
@media (max-width: 767.98px) {
.page-hero { padding: 40px 0 32px; }
.cta-banner { padding: 2.4rem 1.4rem; }
.contact-info-card { padding: 1.6rem 1.2rem; }
}
/* ================================================================
27. STATS SECTION (À Propos)
"SOPIC en chiffres" — uses for correct name/value
statistic semantics. Numbers use the display font for impact.
================================================================ */
.stats-section {
padding: 56px 0;
background: var(--clr-stats-bg);
border-top: 1px solid var(--clr-stats-border);
border-bottom: 1px solid var(--clr-stats-border);
}
.stat-card { padding: .5rem; }
.stat-number {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 2.8rem);
font-weight: 800;
color: var(--clr-primary);
line-height: 1.1;
margin: 0 0 .3rem;
}
.stat-label {
font-family: var(--font-display);
font-size: .8rem;
font-weight: 600;
color: var(--clr-text-muted);
text-transform: uppercase;
letter-spacing: .08em;
}
/* ================================================================
28. MISSION / VISION (À Propos)
Two large cards with icon, title and supporting text.
================================================================ */
.mission-section {
padding: var(--section-py) 0;
background: var(--clr-white);
}
.mission-card {
height: 100%;
background: var(--clr-bg-section);
border: 1px solid var(--clr-border);
border-radius: var(--radius-lg);
padding: 2.4rem 2rem;
transition: box-shadow var(--t-mid), transform var(--t-mid), border-color var(--t-fast);
}
.mission-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-4px);
border-color: var(--clr-primary);
}
.mission-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
border-radius: var(--radius-md);
background: var(--clr-primary-subtle);
color: var(--clr-primary);
font-size: 1.6rem;
margin-bottom: 1.2rem;
}
.mission-card-title {
font-size: 1.2rem;
margin-bottom: .7rem;
}
.mission-card-text {
font-size: .92rem;
color: var(--clr-text-muted);
line-height: 1.8;
margin-bottom: 0;
}
/* ================================================================
29. NOS VALEURS (À Propos)
Four-up grid of value cards with icon, title, description.
================================================================ */
.values-section {
padding: var(--section-py) 0;
background: var(--clr-bg-section);
border-top: 1px solid var(--clr-border-soft);
}
.value-card {
height: 100%;
background: var(--clr-white);
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 1.8rem 1.5rem;
text-align: center;
transition: box-shadow var(--t-mid), transform var(--t-mid);
}
.value-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-5px);
}
.value-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: var(--radius-full);
background: var(--clr-primary-subtle);
color: var(--clr-primary);
font-size: 1.4rem;
margin-bottom: 1.1rem;
}
.value-card-title {
font-size: 1.02rem;
margin-bottom: .6rem;
}
.value-card-text {
font-size: .85rem;
color: var(--clr-text-muted);
line-height: 1.75;
margin-bottom: 0;
}
/* ================================================================
30. WHY-SECTION CHECKLIST (À Propos)
Icon + title + description list, used alongside an image.
================================================================ */
.why-section {
padding: var(--section-py) 0;
background: var(--clr-white);
border-top: 1px solid var(--clr-border-soft);
}
.why-list {
display: flex;
flex-direction: column;
gap: 1.3rem;
}
.why-list-item {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.why-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: var(--radius-full);
background: var(--clr-primary);
color: var(--clr-white);
font-size: .9rem;
margin-top: .15rem;
}
.why-item-title {
font-size: .95rem;
margin-bottom: .25rem;
}
.why-item-text {
font-size: .85rem;
color: var(--clr-text-muted);
margin-bottom: 0;
line-height: 1.7;
}
/* ================================================================
31. RESPONSIVE TWEAKS — about page sections
================================================================ */
@media (max-width: 767.98px) {
.mission-card { padding: 1.8rem 1.4rem; }
.stat-number { font-size: 1.9rem; }
}
/* ================================================================
PRODUCT CARDS — boutique.php, index.php, product.php
FIX (audit): Inline styles moved into stylesheet (was style="height:200px;object-fit:cover")
FIX (audit): Placeholder shown when no image (was empty gap)
================================================================ */
.product-card {
display: flex;
flex-direction: column;
height: 100%;
background: var(--clr-white);
border: 1px solid var(--clr-border-soft);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: box-shadow var(--t-mid), transform var(--t-mid), border-color var(--t-fast);
}
.product-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-5px);
border-color: var(--clr-border);
}
.product-img-wrap {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
background: #f6f6f8;
overflow: hidden;
}
.product-card-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s cubic-bezier(.4,0,.2,1);
display: block;
}
.product-card:hover .product-card-img { transform: scale(1.06); }
.product-img-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--clr-text-light);
font-size: 2.5rem;
}
/* Stock / featured badges */
.product-badge-out,
.product-badge-feat {
position: absolute;
top: .65rem;
left: .65rem;
padding: .22rem .6rem;
border-radius: var(--radius-full);
font-family: var(--font-display);
font-size: .68rem;
font-weight: 700;
letter-spacing: .04em;
pointer-events: none;
}
.product-badge-out { background: #fee2e2; color: #dc2626; }
.product-badge-feat { background: var(--clr-text-dark); color: var(--clr-white); }
.product-body {
display: flex;
flex-direction: column;
flex: 1;
padding: .85rem 1rem 1rem;
gap: .25rem;
}
.product-title {
font-family: var(--font-display);
font-size: .92rem;
font-weight: 700;
color: var(--clr-text-dark);
line-height: 1.3;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.product-desc {
font-size: .78rem;
color: var(--clr-text-light);
line-height: 1.45;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.product-price {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 800;
color: var(--clr-primary);
margin: .15rem 0 0;
}
.product-actions {
display: flex;
flex-direction: column;
gap: .4rem;
margin-top: .65rem;
}
.product-actions .btn {
padding: .38rem .75rem;
font-size: .8rem;
}
/* Admin badge helpers */
.bdg { display:inline-flex;align-items:center;gap:.3rem;padding:.28rem .7rem;border-radius:99px;font-size:.72rem;font-weight:700; }
.bdg-in { background:#dcfce7;color:#15803d; }
.bdg-out { background:#fee2e2;color:#dc2626; }
.bdg-feat { background:#fef3c7;color:#b45309; }
/* ================================================================
BOUTIQUE PAGE — SHOP TOOLBAR, CATEGORY NAV, PRODUCT GRID & CARDS
Matches the reference image layout:
• Full-width search bar
• Scrollable horizontal category pills with icons
• Product cards: large image → title → price → category pill (below)
• Hover overlay reveals action buttons on desktop
================================================================ */
/* ── SHOP TOOLBAR (search + category nav wrapper) ───────────────── */
.shop-toolbar {
background: var(--clr-white);
border-bottom: 1px solid var(--clr-border-soft);
padding: 1.5rem 0 0;
position: sticky;
top: 106px; /* below fixed topbar + navbar */
z-index: 90;
}
/* ── SEARCH BAR ─────────────────────────────────────────────────── */
.shop-search-form { margin-bottom: 1.25rem; }
.shop-search-wrap {
position: relative;
display: flex;
align-items: center;
}
.shop-search-icon {
position: absolute;
left: 1.1rem;
color: var(--clr-text-muted);
font-size: 1rem;
pointer-events: none;
}
.shop-search-input {
width: 100%;
height: 52px;
padding: 0 3rem 0 3rem;
border: 1.5px solid var(--clr-border);
border-radius: var(--radius-full);
font-family: var(--font-body);
font-size: .95rem;
color: var(--clr-text-body);
background: var(--clr-white);
transition: border-color var(--t-fast), box-shadow var(--t-fast);
outline: none;
}
.shop-search-input::placeholder { color: var(--clr-text-light); }
.shop-search-input:focus {
border-color: var(--clr-primary);
box-shadow: 0 0 0 3px var(--clr-primary-subtle);
}
.shop-search-clear {
position: absolute;
right: 1.1rem;
color: var(--clr-text-muted);
font-size: .9rem;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: var(--radius-full);
transition: background var(--t-fast), color var(--t-fast);
}
.shop-search-clear:hover {
background: var(--clr-primary-subtle);
color: var(--clr-primary);
}
/* ── CATEGORY PILLS NAV ─────────────────────────────────────────── */
.shop-cat-nav {
overflow: hidden; /* mask fade edge */
}
.shop-cat-scroll {
display: flex;
align-items: center;
gap: .5rem;
overflow-x: auto;
padding-bottom: 1rem;
/* hide scrollbar visually but keep it functional */
scrollbar-width: none;
-ms-overflow-style: none;
}
.shop-cat-scroll::-webkit-scrollbar { display: none; }
.shop-cat-pill {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .55rem 1.1rem;
border-radius: var(--radius-full);
border: 1.5px solid var(--clr-border);
background: var(--clr-white);
color: var(--clr-text-body);
font-family: var(--font-display);
font-size: .82rem;
font-weight: 600;
white-space: nowrap;
flex-shrink: 0;
text-decoration: none;
transition:
background var(--t-fast),
color var(--t-fast),
border-color var(--t-fast),
box-shadow var(--t-fast);
}
.shop-cat-pill:hover {
border-color: var(--clr-primary);
color: var(--clr-primary);
background: var(--clr-primary-subtle);
}
.shop-cat-pill.active {
background: var(--clr-primary);
color: var(--clr-white);
border-color: var(--clr-primary);
box-shadow: 0 4px 12px rgba(208,2,27,.25);
}
.shop-cat-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
font-size: 1rem;
}
.shop-cat-label { line-height: 1; }
/* ── SECTION + RESULTS BAR ──────────────────────────────────────── */
.shop-grid-section {
padding: 2rem 0 4rem;
background: var(--clr-bg-section);
}
.shop-results-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.shop-results-count {
font-family: var(--font-display);
font-size: .9rem;
color: var(--clr-text-muted);
margin: 0;
font-weight: 400;
}
.shop-results-count strong { color: var(--clr-text-dark); font-weight: 700; }
.shop-results-count em { font-style: normal; color: var(--clr-primary); }
.shop-reset-link {
font-family: var(--font-display);
font-size: .82rem;
font-weight: 600;
color: var(--clr-text-muted);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: .25rem;
transition: color var(--t-fast);
}
.shop-reset-link:hover { color: var(--clr-primary); }
/* ── PRODUCT GRID ───────────────────────────────────────────────── */
.shop-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
margin-bottom: 2.5rem;
}
@media (max-width: 1199.98px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767.98px) { .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
@media (max-width: 400px) { .shop-grid { grid-template-columns: 1fr; } }
/* ── PRODUCT CARD (shop-card) ───────────────────────────────────── */
/*
Layout:
┌─────────────────┐
│ image │ ← shorter 4/3 ratio
│ [badge] │ ← floating top-left badge
├─────────────────┤
│ Product name │ ← h3, 1-line clamp
│ Brief desc │ ← 2-line clamp, muted
│ Price │ ← accent colour
│ [Acheter] │ ← always visible
│ [Voir détails] │
└─────────────────┘
*/
.shop-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--clr-white);
border-radius: var(--radius-md);
border: 1px solid var(--clr-border-soft);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition:
box-shadow var(--t-mid),
transform var(--t-mid),
border-color var(--t-fast);
height: 100%;
}
.shop-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-5px);
border-color: var(--clr-border);
}
/* WhatsApp floating icon — top-left corner */
.shop-card-wa-btn {
position: absolute;
top: .6rem;
left: .6rem;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: #25d366;
color: #fff;
font-size: 1rem;
text-decoration: none;
box-shadow: 0 2px 8px rgba(37,211,102,.45);
transition: transform .2s, box-shadow .2s;
}
.shop-card-wa-btn:hover {
transform: scale(1.12);
box-shadow: 0 4px 14px rgba(37,211,102,.55);
color: #fff;
}
/* WhatsApp "Commandez" label — top-right corner of product card */
.shop-card-wa-btn-top {
position: absolute;
top: .6rem;
right: .6rem;
z-index: 10;
display: inline-flex;
align-items: center;
gap: .3rem;
padding: .28rem .65rem;
border-radius: 20px;
background: #25d366;
color: #fff;
font-size: .72rem;
font-weight: 600;
text-decoration: none;
box-shadow: 0 2px 8px rgba(37,211,102,.40);
transition: transform .2s, box-shadow .2s;
white-space: nowrap;
}
.shop-card-wa-btn-top:hover {
transform: scale(1.05);
box-shadow: 0 4px 14px rgba(37,211,102,.55);
color: #fff;
}
/* Image wrapper — shorter 4/3 ratio */
.shop-card-img-wrap {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
background: #f6f6f8;
overflow: hidden;
}
.shop-card-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.shop-card:hover .shop-card-img { transform: scale(1.06); }
.shop-card-img-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: var(--clr-text-light);
}
/* Floating badge */
.shop-card-badge {
position: absolute;
top: .65rem;
left: .65rem;
padding: .22rem .6rem;
border-radius: var(--radius-full);
font-family: var(--font-display);
font-size: .68rem;
font-weight: 700;
letter-spacing: .04em;
pointer-events: none;
}
.shop-badge-out { background: #fee2e2; color: #dc2626; }
.shop-badge-new { background: var(--clr-text-dark); color: var(--clr-white); }
/* Card body */
.shop-card-body {
display: flex;
flex-direction: column;
padding: .85rem 1rem 1rem;
gap: .25rem;
flex: 1;
}
.shop-card-title {
font-family: var(--font-display);
font-size: .92rem;
font-weight: 700;
color: var(--clr-text-dark);
line-height: 1.3;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.shop-card-desc {
font-size: .78rem;
color: var(--clr-text-light);
line-height: 1.45;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.shop-card-price {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 800;
color: var(--clr-primary);
margin: .15rem 0 0;
}
/* Action buttons — always visible */
.shop-card-actions {
display: flex;
flex-direction: column;
gap: .4rem;
margin-top: .65rem;
}
/* compact button sizing inside cards */
.shop-card-actions .btn {
padding: .38rem .75rem;
font-size: .8rem;
}
/* ── EMPTY STATE ────────────────────────────────────────────────── */
.shop-empty {
text-align: center;
padding: 5rem 1rem;
}
.shop-empty-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
border-radius: var(--radius-full);
background: var(--clr-primary-subtle);
color: var(--clr-primary);
font-size: 1.8rem;
margin-bottom: 1.2rem;
}
.shop-empty-title {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: .5rem;
}
.shop-empty-text {
color: var(--clr-text-muted);
font-size: .9rem;
margin-bottom: 1.5rem;
}
/* ── PAGINATION ─────────────────────────────────────────────────── */
.shop-pagination { margin-top: 2rem; }
.shop-pagination .page-link {
font-family: var(--font-display);
font-size: .875rem;
font-weight: 600;
color: var(--clr-text-body);
border-color: var(--clr-border);
padding: .55rem .9rem;
}
.shop-pagination .page-item.active .page-link {
background: var(--clr-primary);
border-color: var(--clr-primary);
color: var(--clr-white);
}
.shop-pagination .page-link:hover { color: var(--clr-primary); background: var(--clr-primary-subtle); }
/* ── RESPONSIVE STICKY TOOLBAR OFFSET ──────────────────────────── */
/* Matches the topbar + navbar height at each breakpoint */
@media (max-width: 991.98px) {
.shop-toolbar { top: 96px; } /* mobile: topbar(34px) + navbar(62px) */
}
@media (max-width: 767.98px) {
.shop-toolbar {
top: 62px;
padding: 1rem 0 0;
position: relative; /* don't sticky on very small screens */
}
.shop-search-input { height: 46px; font-size: .875rem; }
.shop-cat-pill { padding: .45rem .9rem; font-size: .78rem; }
.shop-card-body { padding: .85rem .9rem .9rem; }
.shop-card-title { font-size: .875rem; }
.shop-card-price { font-size: .95rem; }
}
/* ================================================================
CONTACT PAGE — WhatsApp form submit additions
================================================================ */
/* Green WhatsApp submit button */
.btn-sopic-whatsapp {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
background: #25D366;
color: #fff;
border: none;
border-radius: var(--radius-sm);
padding: .75rem 1.6rem;
font-family: var(--font-display);
font-size: .95rem;
font-weight: 700;
cursor: pointer;
text-decoration: none;
transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
box-shadow: 0 4px 14px rgba(37,211,102,.3);
}
.btn-sopic-whatsapp:hover {
background: #1ebe5d;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(37,211,102,.4);
}
.btn-sopic-whatsapp:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(37,211,102,.25);
}
/* Info chip above form */
.contact-wa-chip {
display: inline-flex;
align-items: center;
gap: .6rem;
background: #f0fdf4;
color: #15803d;
border: 1px solid #bbf7d0;
border-radius: var(--radius-full);
padding: .5rem 1rem;
font-family: var(--font-display);
font-size: .82rem;
font-weight: 600;
}
.contact-wa-chip i {
font-size: 1.1rem;
color: #25D366;
}
/* Direct WhatsApp CTA block (right column) */
.contact-wa-direct {
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: var(--radius-md);
padding: 1.4rem;
text-align: center;
}
.contact-wa-direct-label {
font-family: var(--font-display);
font-size: .8rem;
font-weight: 700;
color: #15803d;
margin-bottom: .75rem;
text-transform: uppercase;
letter-spacing: .06em;
}
.contact-wa-direct-note {
font-size: .78rem;
color: var(--clr-text-muted);
margin-top: .6rem;
margin-bottom: 0;
}
/* ══════════════════════════════════════════════════════════
WHAT WE DO SECTION
══════════════════════════════════════════════════════════ */
/* Top banner */
.what-we-do-section {
background: #f0f0f0;
}
.wwd-top {
padding: 3.5rem 0 2.5rem;
}
.wwd-img-wrap {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 8px 32px rgba(0,0,0,.12);
}
.wwd-main-img {
width: 100%;
height: 300px;
object-fit: cover;
display: block;
}
.wwd-title {
font-family: var(--font-display);
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 900;
color: var(--clr-primary);
letter-spacing: .04em;
margin-bottom: .35rem;
line-height: 1.1;
}
.wwd-subtitle {
font-size: 1.15rem;
font-weight: 600;
color: var(--clr-text-dark);
margin-bottom: 1rem;
}
.wwd-body {
color: var(--clr-text-muted);
line-height: 1.75;
max-width: 54ch;
}
/* Cards strip */
.wwd-cards-wrap {
background: #fff;
padding: 2.5rem 0 3.5rem;
}
/* ── Individual card ─────────────────────────────────────── */
.wwd-card {
position: relative; /* anchor for the WA floating btn */
background: var(--clr-white);
border: 1px solid #e8e8e8;
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow .25s, transform .25s;
}
.wwd-card:hover {
box-shadow: 0 12px 32px rgba(0,0,0,.10);
transform: translateY(-3px);
}
/* WhatsApp floating icon — top-left corner */
.wwd-card-wa-btn {
position: absolute;
top: .6rem;
left: .6rem;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: #25d366;
color: #fff;
font-size: 1rem;
text-decoration: none;
box-shadow: 0 2px 8px rgba(37,211,102,.45);
transition: transform .2s, box-shadow .2s;
}
.wwd-card-wa-btn:hover {
transform: scale(1.12);
box-shadow: 0 4px 14px rgba(37,211,102,.55);
color: #fff;
}
/* WhatsApp "Commandez" label — top-right corner of product card */
.wwd-card-wa-btn-top {
position: absolute;
top: .6rem;
right: .6rem;
z-index: 10;
display: inline-flex;
align-items: center;
gap: .3rem;
padding: .28rem .65rem;
border-radius: 20px;
background: #25d366;
color: #fff;
font-size: .72rem;
font-weight: 600;
text-decoration: none;
box-shadow: 0 2px 8px rgba(37,211,102,.40);
transition: transform .2s, box-shadow .2s;
white-space: nowrap;
}
.wwd-card-wa-btn-top:hover {
transform: scale(1.05);
box-shadow: 0 4px 14px rgba(37,211,102,.55);
color: #fff;
}
/* Category-as-button inside product card */
.wwd-card-cat-btn {
font-size: .75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
padding: .3rem .75rem;
border-radius: 4px;
align-self: flex-start;
}
.wwd-card-img-wrap {
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
background: #f4f4f4;
}
.wwd-card-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .35s;
}
.wwd-card:hover .wwd-card-img { transform: scale(1.06); }
.wwd-card-img-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #ccc;
font-size: 2.5rem;
}
/* Card body */
.wwd-card-body {
padding: 1rem 1rem 1.25rem;
display: flex;
flex-direction: column;
gap: .4rem;
flex: 1;
}
.wwd-card-title {
font-family: var(--font-display);
font-size: .95rem;
font-weight: 700;
color: var(--clr-text-dark);
margin: 0;
line-height: 1.35;
}
.wwd-card-desc {
font-size: .8rem;
color: var(--clr-text-muted);
line-height: 1.55;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Category link (replaces price) */
.wwd-card-category-link {
display: inline-block;
font-size: .78rem;
font-weight: 700;
color: var(--clr-primary);
text-decoration: none;
text-transform: uppercase;
letter-spacing: .06em;
transition: color .2s;
margin-top: auto;
}
.wwd-card-category-link:hover { color: var(--clr-primary-dark, #8b0000); text-decoration: underline; }
/* "See More >" link */
.wwd-see-more {
display: inline-block;
font-size: .78rem;
font-weight: 600;
color: var(--clr-primary);
text-decoration: none;
margin-top: .25rem;
transition: gap .2s;
}
.wwd-see-more:hover { text-decoration: underline; }
/* ── Responsive tweaks ───────────────────────────────────── */
@media (max-width: 768px) {
.wwd-top { padding: 2.5rem 0 1.5rem; }
.wwd-title { font-size: 1.75rem; }
.wwd-card-img-wrap { aspect-ratio: 16 / 9; }
}
/* ================================================================
WHAT WE DO — CATEGORY CARDS
Shares wwd-card-body, wwd-card-title, wwd-card-desc, wwd-see-more
with the product variant; only the image area differs.
================================================================ */
/* Sub-heading above the category grid */
.wwd-cards-intro {
font-size: .95rem;
color: var(--clr-text-muted);
margin-top: -.5rem;
}
/* Category card — full-card link wrapper */
.wwd-cat-card {
position: relative;
background: var(--clr-white);
border: 1px solid #e8e8e8;
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow .25s, transform .25s;
color: inherit;
}
.wwd-cat-card:hover {
box-shadow: 0 12px 32px rgba(0,0,0,.10);
transform: translateY(-3px);
color: inherit;
}
/* Icon area — replaces the product image */
.wwd-cat-icon-wrap {
width: 100%;
aspect-ratio: 4 / 3;
background: linear-gradient(135deg, #fdf0f0 0%, #fff5f5 100%);
display: flex;
align-items: center;
justify-content: center;
transition: background .25s;
}
.wwd-cat-card:hover .wwd-cat-icon-wrap {
background: linear-gradient(135deg, #fce4e4 0%, #fdeaea 100%);
}
.wwd-cat-icon {
font-size: 3rem;
color: var(--clr-primary);
transition: transform .3s;
}
.wwd-cat-card:hover .wwd-cat-icon {
transform: scale(1.12);
}
/* ================================================================
NOS PRODUITS — BEST-SELLER BADGE (top-right corner of card)
Sits inside .wwd-card which already has position:relative
================================================================ */
.prod-badge {
position: absolute;
top: .6rem;
right: .6rem;
z-index: 10;
padding: .22rem .6rem;
border-radius: var(--radius-full, 99px);
font-size: .68rem;
font-weight: 700;
letter-spacing: .04em;
pointer-events: none;
line-height: 1.4;
}
.prod-badge--feat {
background: var(--clr-text-dark);
color: var(--clr-white);
}
.prod-badge--out {
background: #fee2e2;
color: #dc2626;
}
/* Ensure the product section's wwd-cards use white background too */
.products-section .wwd-cards-wrap {
background: transparent;
}
/* ── Category cards: horizontal layout on all small screens (<992px) ── */
@media (max-width: 991.98px) {
/* Horizontal: icon square on left, text on right */
.wwd-cat-card {
flex-direction: row !important;
align-items: center !important;
}
.wwd-cat-icon-wrap {
width: 90px !important;
min-width: 90px !important;
max-width: 90px !important;
height: 90px !important;
aspect-ratio: unset !important;
flex-shrink: 0 !important;
border-radius: var(--radius-lg) 0 0 var(--radius-lg) !important;
}
.wwd-cat-icon { font-size: 2rem !important; }
.wwd-cat-card .wwd-card-body {
flex: 1 !important;
padding: .75rem 1rem !important;
gap: .25rem !important;
min-width: 0 !important;
}
.wwd-cat-card .wwd-card-title { font-size: .9rem !important; }
.wwd-cat-card .wwd-card-desc {
font-size: .78rem !important;
-webkit-line-clamp: 2 !important;
overflow: hidden !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
}
.wwd-cat-card .wwd-see-more { font-size: .78rem !important; margin-top: .2rem !important; }
/* Each card full width on mobile */
.wwd-cards-wrap .col-12,
.wwd-cards-wrap [class*="col-"] {
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100% !important;
}
}