/* ========================================================================== Cellstronic - frontend redesign -------------------------------------------------------------------------- Layered on top of the Machic parent theme. Nothing here dequeues or replaces parent or plugin CSS; every rule is additive and scoped to `.cs-redesign` on the body so the whole redesign can be disabled from one place. Pricing, add-to-cart, cart icon and footer widgets are hidden site-wide by rules in Customizer > Additional CSS. Those rules use !important and load after this file, so they always win. This stylesheet is written on the assumption that those elements are absent. Contents 01 Design tokens 02 Base + typography 03 Buttons and links 04 Header and navigation 05 Mobile navigation 06 Homepage 07 Product cards 08 Shop archive 09 Single product 10 Search 11 Editorial pages (About / Contact) 12 Footer 13 Motion, focus and reduced-motion ========================================================================== */ /* 01 Design tokens ========================================================================== */ .cs-redesign { /* Brand palette, taken from the existing Elementor global kit so the redesign stays on Cellstronic's own identity. */ --cs-accent: #3b5bfd; --cs-accent-hover: #2f49d6; --cs-amber: #f5a623; /* Neutrals */ --cs-ink: #1a1f36; --cs-ink-soft: #6b7280; --cs-ink-faint: #9aa1ad; --cs-surface: #ffffff; --cs-surface-alt: #f5f5f7; --cs-surface-deep: #0f1220; --cs-hairline: #e5e5ea; /* Type scale - fluid, Apple-style tight display leading */ --cs-font-display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif; --cs-font-body: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Curves are tuned so the ceiling is reached around 1280px rather than at tablet width - the steeper original slope hit its 56px max at 768px, which made headings oversized on tablets. */ --cs-fs-display: clamp(2.5rem, 2.086rem + 1.77vw, 3.5rem); /* 40 -> 56 */ --cs-fs-headline: clamp(1.75rem, 1.44rem + 1.33vw, 2.5rem); /* 28 -> 40 */ --cs-fs-title: clamp(1.375rem, 1.05rem + 1.3vw, 1.75rem);/* 22 -> 28 */ --cs-fs-subhead: clamp(1.1875rem, 1.05rem + 0.55vw, 1.5rem); --cs-fs-body: 1.0625rem; /* 17px */ --cs-fs-small: 0.875rem; /* 14px */ /* Rhythm */ --cs-gutter: 12px; /* tile separation */ --cs-pad-x: clamp(1.25rem, 0.5rem + 3vw, 3rem); --cs-section-y: clamp(3.5rem, 2rem + 6vw, 7rem); --cs-max: 1220px; --cs-radius: 18px; --cs-radius-lg: 28px; --cs-pill: 980px; --cs-ease: cubic-bezier(0.28, 0.11, 0.32, 1); --cs-shadow: 0 1px 2px rgba(16, 20, 40, 0.05), 0 12px 32px rgba(16, 20, 40, 0.07); } /* 02 Base + typography ========================================================================== */ .cs-redesign { font-family: var(--cs-font-body); font-size: var(--cs-fs-body); line-height: 1.47; letter-spacing: -0.011em; color: var(--cs-ink); background: var(--cs-surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* The homepage overflowed horizontally by ~5px on small screens. Contain it at the root rather than with a blanket overflow:hidden, which would break any position:sticky descendant. */ .cs-redesign, .cs-redesign body { max-width: 100%; overflow-x: clip; } .cs-redesign h1, .cs-redesign h2, .cs-redesign h3, .cs-redesign h4, .cs-redesign .cs-display, .cs-redesign .cs-headline { font-family: var(--cs-font-display); color: var(--cs-ink); letter-spacing: -0.022em; line-height: 1.08; font-weight: 700; margin-top: 0; } .cs-display { font-size: var(--cs-fs-display); margin: 0 0 0.5rem; } .cs-headline { font-size: var(--cs-fs-headline); margin: 0 0 0.75rem; } .cs-subhead { font-size: var(--cs-fs-subhead); line-height: 1.3; font-weight: 400; color: var(--cs-ink-soft); letter-spacing: -0.01em; margin: 0 0 1.5rem; max-width: 42ch; } .cs-eyebrow { display: inline-block; font-family: var(--cs-font-body); font-size: var(--cs-fs-small); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cs-accent); margin: 0 0 0.75rem; } .cs-shell { width: 100%; max-width: var(--cs-max); margin-inline: auto; padding-inline: var(--cs-pad-x); } .cs-center { text-align: center; } .cs-center .cs-subhead { margin-inline: auto; } /* 03 Buttons and links ========================================================================== */ .cs-redesign .cs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; /* comfortable touch target */ padding: 0.75rem 1.45rem; border: 1px solid transparent; border-radius: var(--cs-pill); font-family: var(--cs-font-body); font-size: var(--cs-fs-body); font-weight: 500; line-height: 1; text-decoration: none; cursor: pointer; transition: background-color 0.25s var(--cs-ease), color 0.25s var(--cs-ease), border-color 0.25s var(--cs-ease), transform 0.25s var(--cs-ease); } .cs-redesign .cs-btn--primary { background: var(--cs-accent); color: #fff; } .cs-redesign .cs-btn--primary:hover, .cs-redesign .cs-btn--primary:focus-visible { background: var(--cs-accent-hover); color: #fff; } .cs-redesign .cs-btn--secondary { background: var(--cs-surface-alt); color: var(--cs-ink); } .cs-redesign .cs-btn--secondary:hover, .cs-redesign .cs-btn--secondary:focus-visible { background: #ebebf0; color: var(--cs-ink); } .cs-redesign .cs-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, 0.5); color: #fff; } .cs-redesign .cs-btn--ghost:hover, .cs-redesign .cs-btn--ghost:focus-visible { background: rgba(255, 255, 255, 0.14); border-color: #fff; color: #fff; } /* Quiet inline link with a chevron, used under tiles and rails. */ .cs-redesign .cs-link { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--cs-accent); font-weight: 500; text-decoration: none; } .cs-redesign .cs-link::after { content: "\203A"; font-size: 1.25em; line-height: 0; transform: translateY(-0.04em); transition: transform 0.25s var(--cs-ease); } .cs-redesign .cs-link:hover::after, .cs-redesign .cs-link:focus-visible::after { transform: translate(0.2em, -0.04em); } .cs-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .cs-center .cs-actions { justify-content: center; } /* 03b Machic demo content suppression ========================================================================== The parent theme ships promotional modules populated from its demo import and configured in the KlbTheme options panel. They render placeholder copy ("Maecenas non erat", "Home Speaker", "Weekend Discount"), 2021 stock imagery unrelated to the catalogue, and `href="#"` buttons that go nowhere. They are suppressed here rather than in the theme options so that nothing in the parent theme or the database is modified -- deleting this block restores them exactly. On the shop archive they occupied 546px above the first real product. */ /* Shop archive: the yellow "Shop and Save Big on Hottest Products" strip and the three "Home Speaker" price banners. */ .cs-redesign .shop-banner-top, .cs-redesign .shop-banner-bottom { display: none; } /* Header: the "Only this weekend / Super Products" discount module, which links to demo content and duplicates the promotion the catalogue cannot honour. */ .cs-redesign .discount-products-wrapper { display: none; } /* 04 Header and navigation ========================================================================== */ /* Machic markup: header#masthead.site-header > .header-desktop > .header-top + .header-main > .container > .header-wrapper > .column */ .cs-redesign .site-header { position: sticky; top: 0; z-index: 900; background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid transparent; transition: background-color 0.3s var(--cs-ease), border-color 0.3s var(--cs-ease), box-shadow 0.3s var(--cs-ease); } /* .is-stuck is toggled from JS once the page scrolls past the header. */ .cs-redesign .site-header.is-stuck { background: rgba(255, 255, 255, 0.88); border-bottom-color: var(--cs-hairline); box-shadow: 0 1px 24px rgba(16, 20, 40, 0.06); } /* The utility strip is visual noise at this size; fold it away and let the main row carry the navigation. */ .cs-redesign .site-header .header-top { background: transparent; border: 0; min-height: 0; } /* The stock header stacked to 165px: a 111px main row whose search field spanned 1156px, above a 54px nav row. The row height came from an oversized search control rather than from padding, so the field is sized explicitly below and both rows are tightened. Net result is roughly 118px, with the logo, search and navigation in a deliberate relationship rather than a search bar with things either side of it. */ /* Trimmed now that a 58px mark sets the row height; the padding no longer needs to do the work of giving the brand presence. */ .cs-redesign .site-header .header-main { padding-block: 0.4rem; } .cs-redesign .site-header .header-main .header-wrapper { /* Machic adds 20px top and bottom here, which was 40px of the row's height on top of a 44px logo. */ padding-block: 0; min-height: 0; gap: 1.5rem; align-items: center; } .cs-redesign .site-header .header-wrapper { gap: 1.5rem; align-items: center; } .cs-redesign .site-header .header-nav { border-top: 1px solid var(--cs-hairline); } /* No padding of its own: the departments control and the menu links already carry theirs, and stacking the two pushed the row to 66px. */ .cs-redesign .site-header .header-nav .header-wrapper { min-height: 0; padding-block: 0; gap: 1.25rem; } /* The departments control shipped as a filled grey block sitting proud of the nav row, which read as a leftover component rather than part of the header. Flattened to match the menu links beside it. */ /* The control was a fixed 293px block, most of it empty, anchoring the left of the nav row with nothing in it. Sized to its content so it reads as a menu item rather than a panel. */ .cs-redesign .site-header .site-departments { width: auto; min-width: 0; flex: 0 0 auto; } /* Matched to the menu links beside it -- same size, weight, padding and radius, so the hamburger, its label and the nav read as one row rather than three separate components. */ .cs-redesign .site-header .site-departments > a, .cs-redesign .site-header .site-departments .all-categories { display: flex; align-items: center; width: auto; min-width: 0; height: auto; background: transparent; border-radius: var(--cs-pill); padding: 0.5rem 0.95rem; gap: 0.5rem; font-family: var(--cs-font-body); font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em; color: var(--cs-ink); white-space: nowrap; transition: background-color 0.2s var(--cs-ease); } /* The hamburger sat on its own baseline, adrift from its label. */ .cs-redesign .site-header .site-departments .departments-icon { display: flex; align-items: center; margin: 0; font-size: 17px; line-height: 1; } /* Machic pushes the caret to the far edge of the old fixed width. */ .cs-redesign .site-header .site-departments .departments-arrow { position: static; margin-left: 0.15rem; } .cs-redesign .site-header .site-departments > a:hover, .cs-redesign .site-header .site-departments .all-categories:hover { background: var(--cs-surface-alt); } .cs-redesign .site-header .site-departments .departments-text { font-weight: 500; letter-spacing: -0.005em; } /* The asset is a 200x200 square whose wordmark is small within it, so 44px read as an icon rather than a brand. 58px gives it enough presence to anchor the header without the square driving the row height much further. */ .cs-redesign .site-brand img { height: auto; max-height: 58px; width: auto; transition: opacity 0.25s var(--cs-ease); } .cs-redesign .site-brand a:hover img { opacity: 0.72; } /* Primary menu. ------------------------------------------------------------------ Evenly spaced items at a single weight and size, the way a navigation bar should read. Previously the hamburger, the departments label and the menu links each sat on their own rhythm, which made the row look unsettled. */ .cs-redesign .site-header .header-nav .site-menu.primary > .menu { display: flex; align-items: center; gap: 0.35rem; } .cs-redesign .site-menu .menu > li > a { display: flex; align-items: center; font-family: var(--cs-font-body); font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em; color: var(--cs-ink); padding: 0.5rem 0.95rem; border-radius: var(--cs-pill); text-transform: none; white-space: nowrap; transition: background-color 0.2s var(--cs-ease), color 0.2s var(--cs-ease); } .cs-redesign .site-menu .menu > li > a:hover, .cs-redesign .site-menu .menu > li > a:focus-visible { background: var(--cs-surface-alt); color: var(--cs-ink); } .cs-redesign .site-menu .menu > li.current-menu-item > a { color: var(--cs-accent); } /* Departments / sidebar menu column ------------------------------------------------------------------ Machic renders this list with `.collapse.show` on the homepage and positions it absolutely, but its wrapper is `position: static` -- so it resolves against the sticky header and floats over the page at every scroll position, covering the hero and the first product rail. Anchoring it to its own column fixes the positioning. Opening and closing is handled by initDepartmentsMenu() in cellstronic.js, which drives the theme's own control so Bootstrap's state stays consistent -- see the note there. The two rules below are the no-JS fallback for that: without them, and without JS, the homepage would render the panel open over the hero exactly as it did before. With JS they never apply, because init() drops `.no-js` from and closes the panel on load. */ .cs-redesign .site-departments { position: relative; } .no-js .cs-home .site-departments .departments-menu.show { opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s var(--cs-ease), transform 0.2s var(--cs-ease), visibility 0.2s var(--cs-ease); } .no-js .cs-home .site-departments:hover .departments-menu.show, .no-js .cs-home .site-departments:focus-within .departments-menu.show { opacity: 1; visibility: visible; transform: none; } .cs-redesign .site-departments .departments-menu { border: 1px solid var(--cs-hairline); border-radius: var(--cs-radius); overflow: hidden; background: var(--cs-surface); box-shadow: var(--cs-shadow); } .cs-redesign .site-departments .departments-menu > li > a { font-size: var(--cs-fs-small); padding: 0.8rem 1.1rem; color: var(--cs-ink); border-bottom: 1px solid var(--cs-hairline); transition: background-color 0.2s var(--cs-ease), padding-left 0.2s var(--cs-ease); } .cs-redesign .site-departments .departments-menu > li:last-child > a { border-bottom: 0; } .cs-redesign .site-departments .departments-menu > li > a:hover { background: var(--cs-surface-alt); padding-left: 1.35rem; } /* Search field in the header. Unconstrained it spanned the full 1156px of the row and became the loudest element on every page; capped and right-aligned it reads as a utility. */ /* Centre the search in the space beside the logo. Pinned to the right it left a wide void through the middle of the header and read as lopsided. */ .cs-redesign .site-header .header-main .header-wrapper > .column.right { flex: 1; display: flex; justify-content: center; } /* Sized down from 544px, and pinned to the right rather than centred: search is a utility that belongs with the other tools, not a centrepiece competing with the brand mark. */ .cs-redesign .header-form.site-search { max-width: 24rem; margin-left: auto; margin-right: 0; width: 100%; } .cs-redesign .header-form .search-form .input-group { /* Explicit height: the stock control rendered at 52px and was the tallest thing in the row, which is what made the header 119px. */ height: 42px; align-items: stretch; border: 1px solid var(--cs-hairline); border-radius: var(--cs-pill); background: var(--cs-surface-alt); overflow: hidden; transition: border-color 0.25s var(--cs-ease), background-color 0.25s var(--cs-ease); } /* The button and the category select both rendered at 50px inside a 42px pill, so they bulged out of it -- the single biggest thing making this header look unfinished. Everything in the group now matches the pill exactly. */ .cs-redesign .header-form .search-form .input-group > *, .cs-redesign .header-form .search-form .input-group button, .cs-redesign .header-form .search-form .input-group .form-select { height: 100%; min-height: 0; align-self: stretch; border-radius: 0; } .cs-redesign .header-form .search-form .input-group:focus-within { background: var(--cs-surface); border-color: var(--cs-accent); box-shadow: 0 0 0 4px rgba(59, 91, 253, 0.12); } .cs-redesign .header-form .search-form input[type="text"], .cs-redesign .header-form .search-form input[type="search"], .cs-redesign .header-form .search-form .form-select { border: 0; background: transparent; font-family: var(--cs-font-body); font-size: var(--cs-fs-small); color: var(--cs-ink); box-shadow: none; } /* A bright blue call-to-action on a utility field made search the loudest thing on every page. Search is a tool, not the headline -- so it reads as ink on a quiet ground, and the accent is reserved for actual calls to action. */ .cs-redesign .header-form .search-form button { border-radius: 0; background: var(--cs-ink); color: #fff; border: 0; font-size: var(--cs-fs-small); font-weight: 500; padding-inline: 1.35rem; white-space: nowrap; transition: background-color 0.25s var(--cs-ease); } .cs-redesign .header-form .search-form button:hover { background: #000; } /* Category scope selector: a quiet label, separated by a hairline rather than sitting as a second control. */ .cs-redesign .header-form .search-form .form-select { border: 0; border-right: 1px solid var(--cs-hairline); padding: 0 1.75rem 0 1.1rem; font-size: var(--cs-fs-small); color: var(--cs-ink-soft); background-color: transparent; } /* Machic positions the magnifier absolutely at `left: 12px` inside the field. The input needs enough left padding to clear it, otherwise the glyph sits on top of the placeholder text. */ .cs-redesign .header-form .search-form .klbth-icon-search { left: 14px; width: auto; font-size: 15px; line-height: 1; color: var(--cs-ink-faint); pointer-events: none; } .cs-redesign .header-form .search-form input[type="text"], .cs-redesign .header-form .search-form input[type="search"] { padding-left: 2.6rem; padding-right: 0.9rem; } /* 05 Mobile navigation ========================================================================== */ .cs-redesign .header-mobile { background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); } .cs-redesign .header-mobile .site-brand img { max-height: 32px; } /* Machic's fixed bottom bar - give it the same glass treatment and make the targets finger-sized. */ .cs-redesign .mobile-bottom-menu { background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--cs-hairline); padding-bottom: env(safe-area-inset-bottom, 0); } .cs-redesign .mobile-bottom-menu .mobile-menu ul li a { min-height: 52px; color: var(--cs-ink); gap: 0.15rem; } .cs-redesign .mobile-bottom-menu .mobile-menu ul li a span { font-family: var(--cs-font-body); font-size: 10px; letter-spacing: 0.02em; color: var(--cs-ink-soft); } /* Offcanvas panel */ .cs-redesign .site-offcanvas, .cs-redesign .offcanvas-body { background: var(--cs-surface); } .cs-redesign .site-offcanvas .menu > li > a { font-family: var(--cs-font-display); font-size: 1.25rem; font-weight: 600; padding-block: 0.85rem; color: var(--cs-ink); border-bottom: 1px solid var(--cs-hairline); } /* 06 Homepage ========================================================================== */ .cs-home-main { display: block; } /* --- Hero ------------------------------------------------------------- */ .cs-hero { position: relative; display: grid; place-items: center; /* min-height already sets the stage; keep the vertical padding modest so the hero does not overshoot the viewport on a laptop screen. */ min-height: clamp(28rem, 24rem + 14vw, 38rem); padding: clamp(2.5rem, 1.5rem + 3vw, 4rem) var(--cs-pad-x); /* No gutter below: the hero ends on #0b0e18, which is exactly where the paired tiles' canvas begins, so the two form one uninterrupted surface. */ margin-bottom: 0; background: radial-gradient(120% 120% at 50% 0%, #1c2340 0%, #0f1220 55%, #0b0e18 100%); color: #fff; overflow: hidden; text-align: center; } .cs-hero__inner { position: relative; z-index: 2; max-width: 46rem; } .cs-hero .cs-display, .cs-hero .cs-headline { color: #fff; } .cs-hero .cs-subhead { color: rgba(255, 255, 255, 0.72); margin-inline: auto; } .cs-hero .cs-eyebrow { color: #8fa3ff; } /* The hero is centre-aligned, but flex children default to flex-start, which left-aligned the CTA row under centred copy. */ .cs-hero .cs-actions { justify-content: center; } /* Soft product glow behind the hero copy. */ .cs-hero__glow { position: absolute; inset: auto 50% -35% auto; transform: translateX(50%); width: min(52rem, 120vw); aspect-ratio: 1; background: radial-gradient(circle, rgba(59, 91, 253, 0.42) 0%, rgba(59, 91, 253, 0) 62%); pointer-events: none; z-index: 1; } .cs-hero__media { position: relative; z-index: 2; margin: 2.5rem auto 0; max-width: min(30rem, 82vw); } /* Same plate treatment as the feature tiles, for the same reason: the hero product shot also carries a white background. */ .cs-hero__media { padding: clamp(1rem, 0.5rem + 1.5vw, 1.75rem); background: linear-gradient(180deg, #ffffff 0%, #f2f2f5 100%); border-radius: var(--cs-radius-lg); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); } .cs-hero__media img { width: auto; max-width: 100%; /* Cap the height so a tall product shot cannot push the hero far past the viewport on tablet and mobile. */ max-height: clamp(14rem, 10rem + 18vw, 22rem); height: auto; object-fit: contain; display: block; margin-inline: auto; mix-blend-mode: multiply; } /* --- Full-bleed feature tiles ----------------------------------------- */ .cs-tiles { display: grid; grid-template-columns: 1fr; gap: var(--cs-gutter); margin-bottom: var(--cs-gutter); } /* The paired tiles previously butted a flat light panel against a flat dark one, which split the page with a hard seam and read as two unrelated boxes. They now sit on a single continuous canvas that the hero flows into, so the hero and both tiles form one dark storytelling band before the catalogue opens into light. */ .cs-tiles--pair { position: relative; gap: 0; background: radial-gradient(80% 60% at 20% 0%, rgba(59, 91, 253, 0.16) 0%, rgba(59, 91, 253, 0) 60%), radial-gradient(80% 60% at 80% 100%, rgba(245, 166, 35, 0.10) 0%, rgba(245, 166, 35, 0) 60%), linear-gradient(180deg, #0b0e18 0%, #12172b 52%, #0c1020 100%); overflow: hidden; } @media (min-width: 768px) { .cs-tiles--pair { grid-template-columns: 1fr 1fr; } /* A soft light seam replaces the old colour boundary, so the two halves stay distinguishable without being separate blocks. */ .cs-tiles--pair > .cs-tile + .cs-tile::before { content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 1px; background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.16) 50%, transparent 100%); } } .cs-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; /* No bottom padding: the product image is meant to run toward the lower edge rather than sit in a padded box with dead space above it. */ padding: clamp(3rem, 2rem + 3vw, 4.5rem) var(--cs-pad-x) clamp(2.5rem, 1.5rem + 3vw, 4rem); min-height: clamp(25rem, 21rem + 10vw, 32rem); background: transparent; color: #fff; overflow: hidden; } /* Standalone dark tile (the closing CTA) still paints its own ground. */ .cs-tile--dark { background: var(--cs-surface-deep); color: #fff; } /* Inside the pair the canvas below supplies the ground for both halves. */ .cs-tiles--pair > .cs-tile { background: transparent; } .cs-tile .cs-headline, .cs-tile .cs-display { color: #fff; } .cs-tile .cs-subhead { color: rgba(255, 255, 255, 0.68); } /* Per-tile accent bloom behind the product, so each half has its own centre of gravity while sharing one background. */ .cs-tiles--pair > .cs-tile::after { content: ""; position: absolute; left: 50%; bottom: -26%; width: min(32rem, 115%); aspect-ratio: 1; transform: translateX(-50%); background: radial-gradient(circle, rgba(59, 91, 253, 0.30) 0%, rgba(59, 91, 253, 0) 62%); pointer-events: none; z-index: 0; } .cs-tiles--pair > .cs-tile:last-child::after { background: radial-gradient(circle, rgba(245, 166, 35, 0.20) 0%, rgba(245, 166, 35, 0) 62%); } .cs-tile__copy { position: relative; z-index: 2; max-width: 34rem; } /* Tiles are centre-aligned; keep their inline controls on the same axis. */ .cs-tile .cs-actions { justify-content: center; } .cs-tile .cs-subhead { margin-inline: auto; margin-bottom: 1.25rem; } /* Catalogue photography varies between landscape and portrait, so sizing the media by width gave the two halves visibly unequal weight. Fixing the height of the media band and letting the image size itself within it keeps both products on the same visual footing whatever their aspect ratio. */ .cs-tile__media { position: relative; z-index: 1; margin-top: auto; padding-top: clamp(1.25rem, 0.5rem + 2vw, 2.25rem); width: 100%; height: clamp(11rem, 7rem + 13vw, 17rem); display: flex; align-items: flex-end; justify-content: center; } /* The catalogue photography carries a baked-in white background, which on a dark canvas read as an accidental bright rectangle. Seating the product on a deliberate rounded plate that rises from the lower edge turns that white into an intentional surface. */ .cs-tiles--pair .cs-tile__media { max-width: min(26rem, 86%); margin-inline: auto; /* The plate is fully enclosed rather than bleeding off the tile's lower edge -- clipped mid-product it read as a rendering fault, not as intent. */ padding: clamp(1rem, 0.5rem + 1.5vw, 1.75rem); background: linear-gradient(180deg, #ffffff 0%, #f2f2f5 100%); border-radius: var(--cs-radius-lg); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); } .cs-tile__media img { max-height: 100%; max-width: min(24rem, 82%); width: auto; height: auto; display: block; object-fit: contain; mix-blend-mode: multiply; /* drops the residual white on the plate */ transition: transform 0.6s var(--cs-ease); } .cs-tile:hover .cs-tile__media img { transform: scale(1.035); } /* --- Horizontal product rail ------------------------------------------ */ .cs-section { padding-block: var(--cs-section-y); } .cs-section--alt { background: var(--cs-surface-alt); } .cs-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 2.25rem; } .cs-section__head .cs-headline { margin-bottom: 0; } .cs-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr); gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--cs-pad-x); padding-bottom: 0.5rem; /* bleed to the viewport edge so cards run off-screen like a shelf */ margin-inline: calc(var(--cs-pad-x) * -1); padding-inline: var(--cs-pad-x); scrollbar-width: thin; } .cs-rail > * { scroll-snap-align: start; } .cs-rail::-webkit-scrollbar { height: 6px; } .cs-rail::-webkit-scrollbar-track { background: transparent; } .cs-rail::-webkit-scrollbar-thumb { background: var(--cs-hairline); border-radius: var(--cs-pill); } @media (min-width: 900px) { .cs-rail { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; } } /* --- Category browse grid --------------------------------------------- */ .cs-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; } .cs-cat { position: relative; display: flex; flex-direction: column; /* Most product_cat terms have no thumbnail, which left a tall empty band above the label. Pushing the label to the bottom and pinning a chevron to the top corner gives the card intent whether or not an image exists. */ justify-content: flex-end; min-height: 10rem; padding: 1.5rem; border-radius: var(--cs-radius-lg); background: var(--cs-surface); border: 1px solid var(--cs-hairline); text-decoration: none; color: var(--cs-ink); overflow: hidden; transition: transform 0.35s var(--cs-ease), box-shadow 0.35s var(--cs-ease); } .cs-cat:hover, .cs-cat:focus-visible { transform: translateY(-4px); box-shadow: var(--cs-shadow); color: var(--cs-ink); } /* Affordance in the top corner, so a thumbnail-less card still reads as a destination rather than an empty box. */ .cs-cat::after { content: "\203A"; position: absolute; top: 1.1rem; right: 1.35rem; font-size: 1.5rem; line-height: 1; color: var(--cs-ink-faint); transition: transform 0.25s var(--cs-ease), color 0.25s var(--cs-ease); } .cs-cat:hover::after { transform: translateX(0.2em); color: var(--cs-accent); } .cs-cat__name { font-family: var(--cs-font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; } .cs-cat__count { font-size: var(--cs-fs-small); color: var(--cs-ink-soft); margin-top: 0.15rem; } .cs-cat__thumb { position: absolute; inset: 0 0 auto auto; width: 58%; opacity: 0.9; transform: translate(12%, -6%); transition: transform 0.5s var(--cs-ease); pointer-events: none; } .cs-cat:hover .cs-cat__thumb { transform: translate(8%, -8%) scale(1.05); } .cs-cat__thumb img { width: 100%; height: auto; display: block; } /* --- Trust / value strip ---------------------------------------------- */ .cs-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 2rem; text-align: center; } .cs-value__title { font-family: var(--cs-font-display); font-size: 1.05rem; font-weight: 600; margin: 0 0 0.35rem; } .cs-value__text { font-size: var(--cs-fs-small); color: var(--cs-ink-soft); margin: 0; } /* 07 Product cards ========================================================================== Two card surfaces are styled: `.cs-card` (rendered by the child theme on the homepage) and Machic's own `.product-wrapper` markup used by the shop archive and related-product loops. They are kept visually identical. */ .cs-card, .cs-redesign .product .product-wrapper { position: relative; height: 100%; background: var(--cs-surface-alt); border: 1px solid transparent; border-radius: var(--cs-radius-lg); overflow: hidden; transition: transform 0.35s var(--cs-ease), box-shadow 0.35s var(--cs-ease), border-color 0.35s var(--cs-ease); } .cs-card:hover, .cs-redesign .product .product-wrapper:hover { transform: translateY(-4px); border-color: var(--cs-hairline); /* Tighter than the general shadow token: the wide 32px bleed read as the hovered card spilling onto its neighbours in a dense grid. */ box-shadow: 0 2px 4px rgba(16, 20, 40, 0.05), 0 10px 22px rgba(16, 20, 40, 0.10); /* Lift cleanly above siblings rather than relying on paint order. */ z-index: 2; } .cs-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; } .cs-card__media, .cs-redesign .product .thumbnail-wrapper { display: block; position: relative; aspect-ratio: 1 / 1; background: var(--cs-surface-alt); overflow: hidden; } .cs-card__media img, .cs-redesign .product .thumbnail-wrapper img { width: 100%; height: 100%; object-fit: contain; /* The source photography already carries generous white margin, so a large frame padding on top of it made products read small in their cards. */ padding: 7%; transition: transform 0.55s var(--cs-ease); } .cs-card:hover .cs-card__img, .cs-redesign .product .product-wrapper:hover .thumbnail-wrapper img { transform: scale(1.06); } .cs-card__body { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.25rem 1.35rem 1.5rem; background: var(--cs-surface); flex: 1; } /* Product names vary from one line to two, which left rows of cards at different heights. Reserving two lines and clamping longer names keeps every card in the grid identical. */ .cs-card__title, .cs-redesign .product .product-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; } /* Machic's loop card titles are `h3.product-title`; the WooCommerce core class is kept for loops that fall back to stock markup. */ .cs-card__title, .cs-redesign .product .product-title, .cs-redesign .product .product-title a, .cs-redesign .product .woocommerce-loop-product__title { font-family: var(--cs-font-display); font-size: 1.0625rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; color: var(--cs-ink); margin: 0; } /* Category label, set above the product name as a quiet eyebrow so the name stays the loudest thing in the card. */ .cs-card__meta { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--cs-ink-faint); line-height: 1.3; } /* Card affordance. Rests at partial opacity and settles into place on hover, so a grid of cards stays calm but each one clearly reads as a destination. */ .cs-card__cta { display: block; margin-top: 0.5rem; font-size: var(--cs-fs-small); font-weight: 500; color: var(--cs-accent); opacity: 0.55; transform: translateY(2px); transition: opacity 0.28s var(--cs-ease), transform 0.28s var(--cs-ease); } .cs-card__cta::after { content: "\203A"; margin-left: 0.25rem; display: inline-block; transition: transform 0.25s var(--cs-ease); } .cs-card:hover .cs-card__cta, .cs-redesign .product .product-wrapper:hover .cs-card__cta { opacity: 1; transform: none; } .cs-card:hover .cs-card__cta::after, .cs-redesign .product .product-wrapper:hover .cs-card__cta::after { transform: translateX(0.25em); } /* Media lifts very slightly with the card, so the product leads the motion rather than the frame. */ .cs-card__media, .cs-redesign .product .thumbnail-wrapper { transition: background-color 0.35s var(--cs-ease); } .cs-card:hover .cs-card__media, .cs-redesign .product .product-wrapper:hover .thumbnail-wrapper { background: #eeeef2; } /* Machic card padding, matched to the child-theme card. */ .cs-redesign .product .product-content { display: flex; flex-direction: column; height: 100%; } /* Machic spaces the thumbnail and the text block for a card that also showed a price row and action buttons. Both are hidden site-wide, so that spacing was left as 40px of empty card below the title -- invisible against the white page until the hover border and shadow drew the card's real bounds, which is what made a hovered card look like it was growing over its neighbour. */ .cs-redesign .product .thumbnail-wrapper { margin-bottom: 0; } .cs-redesign .product .content-wrapper { margin-top: 0; } /* Machic's hover reveal. ------------------------------------------------------------------ productHover.js adds `.custom-hover` to every loop card and sets an inline `margin-bottom: -