/* ============================================================ V7-HEADER Title: Buktika - MamaDEX Portrait Slider Styles File: mamadex-slider.css Path: assets/css/mamadex/partials/mamadex-slider.css Version: v1.6.1 Issued: 2026-07-09 Author: Buktika Command Team Owner: Buktika - Binka Purpose: Pillar-specific sizing and colour token overrides for the MamaDEX portrait strip. Geometry lives in global.css .mamas-strip component block. This file overrides only what differs from global defaults. Depends: global.css v3.7.1 (.mamas-strip component block) assets/js/partials/slider.js v1.2.0 assets/js/mamadex/partials/mamadex-slider-builder.js ChangeLog: v1.6.0 (2026-07-09): STALE SELECTOR FIX — owner instruction (Mamas slider CTA rendering as a generic violet outline button). ROOT CAUSE: mamadex.html v5.9.0 demoted the network CTA anchor from class="sdx-btn-primary" to class="sdx-btn-secondary", but this file's gradient rule (added v1.4.0 below) was never updated to match — it still targeted .sdx-btn-primary, so it silently stopped applying. The button fell through to global.css's bare canonical .sdx-btn-secondary (flat var(--page-primary) outline), which is only the design system's *fallback* state, not a finished MamaDEX treatment (see mamadex.css §7 comment on .sdx-cta-band .sdx-btn-primary). FIXED: selector retargeted to .mamas-network-cta .sdx-btn-secondary (was .mamas-block .sdx-btn-primary — tightened scope to the actual wrapper, since the anchor now sits inside .mamas-network-cta, not directly in .mamas-block). Gradient values unchanged (var(--page-primary) -> var(--page-secondary), i.e. mama-violet -> mama-depth — identical token pair to .sdx-cta-band .sdx-btn- primary and .btn-pillar-mamadex in mamadex.css, so this is the same canonical MamaDEX gradient, not a new colour). border: none added (gradient fill replaces the base class's token-coloured outline). box-shadow added using rgba(from var(--page-primary) ...) relative-colour syntax — same technique already used elsewhere in mamadex.css §4, so no hard-coded hex/rgb literal is introduced. Sized at the base .sdx-btn-secondary padding/font (unchanged, not enlarged) so it stays visibly smaller than the enlarged .sdx-cta-band .sdx-btn-primary — reinforces the hero door without competing with the page's final centre-route CTA. v1.5.0 (2026-07-09): REMOVED .mamas-block-cta rule — owner instruction (duplicate CTA fix). The anchor it styled was deleted from mamadex-slider.html v1.4.0 (linked to the same destination as mamadex.html's own network CTA). .mamas-block and .mamas-block .sdx-btn-primary rules kept — still live, the new network CTA sits inside .mamas-block and inherits the gradient here. v1.4.0 (2026-03-28): Added .mamas-block and .mamas-block-cta rules. CTA now sits below the strip in natural block flow, centred, with canonical MamaDEX violet → depth gradient. v1.2.0 (2026-03-02): margin: 2rem auto — centres the JS-snapped panel in its container (slider.js v1.2.0 sets strip.style.width). overflow removed — global.css sets overflow:hidden on .mamas-strip; overriding to visible here so the box-shadow is not clipped by the element's own boundary after JS narrows the width. Rail clipping is correctly handled by .strip-clip overflow:hidden in global.css. v1.1.0 (2026-03-02): Added --strip-line and --strip-arrow-mask tokens. Added panel visual: background, border, border-radius, box-shadow. v1.0.0 (2026-03-01): Initial build. ============================================================ */ /* ============================================================ MamaDEX pillar tokens applied to strip --page-primary is set by mamadex.css — no override needed here. Only token overrides permitted (Colour Map v3.9.0 §8.9.3). --strip-gap MUST NOT be overridden — slider.js reads it from :root. ============================================================ */ .page-mamadex { --strip-thumb: 9.6875rem; /* 155px — MamaDEX canonical portrait size */ --strip-item-w: 12.5rem; /* 200px */ --strip-label-sz: 0.9375rem; /* 15px */ /* Colour token overrides — §8.9.4 HARD RULE: pillar MUST define these */ --strip-line: rgba(139, 92, 246, 0.18); /* --sdx-color-mama-violet 18% tint */ --strip-arrow-mask: rgba(255, 255, 255, 0.92); /* near-white frosted surface */ } /* ============================================================ Strip wrapper — panel visual and centring context. slider.js v1.2.0 sets strip.style.width to the exact snapped panel width. margin: auto centres that width in the container. overflow: visible so box-shadow is not self-clipped after the inline width is narrowed by JS (rail clipping is in .strip-clip). ============================================================ */ .page-mamadex .mamas-strip { margin: 2rem auto; overflow: visible; background: var(--card); border: 0.125rem solid var(--strip-line); border-radius: 0.875rem; box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.10), 0 0.125rem 0.5rem rgba(0, 0, 0, 0.06); } .page-mamadex .mamas-block { text-align: center; } /* Mamas-slider reinforcement CTA ("Meet the Mamas") — quiet secondary link, same destination as the hero portal. Uses the canonical .sdx-btn-secondary class (unchanged in HTML) but applies the page's finished MamaDEX gradient treatment instead of the bare global fallback outline — see v1.6.0 changelog above. Kept at the base .sdx-btn-secondary padding/font (no enlargement) so it stays visibly smaller than .sdx-cta-band .sdx-btn-primary (the page's final centre-route CTA) and does not compete with it. */ .page-mamadex .mamas-network-cta .sdx-btn-secondary { background: linear-gradient(135deg, var(--page-primary) 0%, var(--page-secondary) 100%); color: #ffffff; border: none; box-shadow: 0 3px 12px rgba(from var(--page-primary) r g b / 0.32); } .page-mamadex .mamas-network-cta .sdx-btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(from var(--page-primary) r g b / 0.45); } [data-theme="dark"] .page-mamadex .strip-rail .item { color: var(--muted); } /* ============================================================ Mobile overrides ============================================================ */ @media (max-width: 30rem) { .page-mamadex { --strip-thumb: 7.75rem; --strip-item-w: 10rem; } }