/* =========================================================================== mk-why.css - v114 - "Pourquoi Mascot Inc." ported from the product category pages onto the four service pages (transfert / impression / facture / photo d'identite). Linked AFTER mk-mobile.css on every page that uses it, so equal-specificity rules win on order. --------------------------------------------------------------------------- WHAT THIS FILE DOES *NOT* NEED TO REDECLARE --------------------------------------------------------------------------- mk-mobile.css v90 styles the icon chip and the gold kicker with UNSCOPED, UNGATED selectors: .mwhy>.mw{position:relative} .mwhy>.mw::before{ ... 42px gold-tinted icon chip ... } .mwhy>.mw .mw-n{ ... gold uppercase kicker ... } .mwhy>.mw:nth-child(5n+k)::before{ ... the five icons ... } Because they are unscoped, they reach this markup for free the moment the .mwhy/.mw class names are used. That is why this section reuses the category page's class names verbatim instead of inventing new ones - the design language arrives with the markup. What IS scoped to :is(.pg-cat,.pg-acc) - and therefore has to be supplied here - is the CARD CHROME and the GRID. Hence sections 2 and 3 below. --------------------------------------------------------------------------- THE ONE TRAP: THE ICONS ARE KEYED TO A FIVE-CARD SET --------------------------------------------------------------------------- The category set is five cards: 1 Garantie 12 mois shield + check 2 Teste en boutique clipboard + check 3 Paiement securise padlock 4 Retrait immediat shopping bag 5 Support local speech bubble The user asked for this section WITHOUT cards 1 and 2, leaving three: Paiement / Retrait / Support. Those want icons 3, 4 and 5 - but :nth-child(5n+k) on a three-child list matches k=1,2,3 and would hand them the SHIELD, the CLIPBOARD and the PADLOCK. The three surviving cards would each wear the icon of a card that is no longer on the page, and the two removed claims (a 12-month warranty, a bench test) would keep advertising themselves in pictogram form on services where neither is true. So the three-card set gets its own explicit mapping below, at (0,4,1) - deliberately ABOVE the (0,3,1) of the v90 rules rather than merely equal to it, so this does not depend on stylesheet order the way v102 did. Modulo form (3n+k) is kept rather than plain nth-child(k) for the v22/v90 reason: if any of these rails is ever handed to mkCarousel it clones whole sets, and plain nth-child would give every clone card 1's icon. With exactly three children 3n+k reduces to k, so it costs nothing today. =========================================================================== */ /* --------------------------------------------------------------------------- 1. SECTION SHELL The tokens are declared ON THE SECTION, not borrowed from :root. The mobile :root in mk-mobile.css sits inside @media (max-width:840px) and the desktop copies sit inside two different @media (min-width:841px) blocks, so nothing guarantees they resolve on these four pages at every width. Declaring them here makes the section self-contained - drop the markup on any page and it renders correctly with no other dependency. --------------------------------------------------------------------------- */ .mwhy-sec{ --mkCard:#111111; --mkLine:rgba(255,255,255,.08); --mkGold:#D8A03D; --mkDim:#A8A8A8; background:#0A0C10; padding:64px 0 74px; } /* The host pages' own .shead/.kick/h2 are styled for light sections on some of these pages, so the heading is pinned explicitly rather than inherited. */ .mwhy-sec .shead{text-align:center;max-width:640px;margin:0 auto 34px} .mwhy-sec .shead .kick{ display:block;color:var(--mkGold);font-size:11.5px;font-weight:600; letter-spacing:1.9px;text-transform:uppercase;margin:0 0 10px} .mwhy-sec .shead h2{ color:#fff;margin:0;font-size:clamp(26px,3.4vw,38px); font-weight:600;letter-spacing:-.025em;line-height:1.12} /* --------------------------------------------------------------------------- 2. THE GRID Mirrors .pg-cat .mwhy from mk-mobile.css v68 (auto-fit / minmax(210px,1fr)). auto-fit means the three-card set lays out 3-up on desktop and reflows to 2-up then 1-up on the way down without a single media query - which is why this file needs none. --------------------------------------------------------------------------- */ .mwhy{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:20px; margin:0;padding:0;width:auto; } /* --------------------------------------------------------------------------- 3. CARD CHROME - copied from .pg-cat .mw so the two match exactly --------------------------------------------------------------------------- */ .mwhy>.mw{ background:rgba(255,255,255,.045); border:1px solid var(--mkLine); border-radius:26px; padding:22px 20px 24px; display:flex;flex-direction:column; transition:background .2s ease,border-color .2s ease; } .mwhy>.mw:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); } .mwhy>.mw .mw-t{ color:#fff;font-size:19px;font-weight:600; letter-spacing:-.02em;line-height:1.15; } .mwhy>.mw .mw-p{ color:var(--mkDim);font-size:13.5px;line-height:1.55;margin:9px 0 0; } /* scroll-reveal children whose observer never fires must not stay parked invisible - the standing rail/grid rule from v68. */ .mwhy>.reveal{opacity:1;transform:none} /* --------------------------------------------------------------------------- 4. THE THREE-CARD ICON REMAP (see the header note) (0,4,1) - above v90's (0,3,1), so order-independent. --------------------------------------------------------------------------- */ /* 01 - Paiement securise : padlock (v90 icon 3) */ .mwhy.mwhy-3>.mw:nth-child(3n+1)::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8A03D' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10V8a6 6 0 0 1 12 0v2'/%3E%3Cpath d='M5 10h14v10H5z'/%3E%3Cpath d='M12 14v3'/%3E%3C/svg%3E")} /* 02 - Retrait immediat : shopping bag (v90 icon 4) */ .mwhy.mwhy-3>.mw:nth-child(3n+2)::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8A03D' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 12H7L6 8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E")} /* 03 - Support local : speech bubble (v90 icon 5) */ .mwhy.mwhy-3>.mw:nth-child(3n+3)::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8A03D' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4V5z'/%3E%3Cpath d='M8 9h8'/%3E%3Cpath d='M8 12h5'/%3E%3C/svg%3E")} /* --- variant: pages where nothing is physically collected ------------------ /transfert-dargent and /paiement-de-facture have no parcel to hand over, so card 02 is an "operation immediate" / "reglement immediat", not a "retrait". A shopping bag would be a small lie about what happens at the counter, so those two pages get the bolt already used in the transfert hero badge row. */ .mwhy.mwhy-3.mwhy-imm>.mw:nth-child(3n+2)::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8A03D' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9z'/%3E%3C/svg%3E")} /* --------------------------------------------------------------------------- 5. PHONE Single column below 640; the card chrome is unchanged. --------------------------------------------------------------------------- */ @media (max-width:840px){ /* v141: "Pourquoi Mascot Inc." was three stacked ~190px cards -> a whole screen of scrolling for three short reassurances. Collapse them into the SAME full-bleed scroll-snap rail the category pages use for .mwhy, so the section is one card tall and swipeable. mkCarousel (mk-mobile.js) adds the dots + loop; on mobile line 301 of mk-mobile.css already shows .mk-dots. */ .mwhy-sec{padding:44px 0 42px} .mwhy{ display:flex!important;flex-wrap:nowrap!important;box-sizing:border-box; grid-template-columns:none!important; overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory; overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch; scrollbar-width:none;-ms-overflow-style:none; margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important; width:100vw!important;max-width:100vw!important; padding-left:calc((100vw - clamp(258px,80vw,360px))/2)!important; padding-right:calc((100vw - clamp(258px,80vw,360px))/2)!important; gap:12px!important;padding-bottom:4px!important;align-items:stretch} .mwhy::-webkit-scrollbar{display:none;height:0} .mwhy>.mw{ scroll-snap-align:center!important; flex:0 0 clamp(258px,80vw,360px)!important;width:clamp(258px,80vw,360px)!important; min-width:0;padding:20px 20px 22px;border-radius:22px} .mwhy>.mw .mw-t{font-size:18px} } /* =========================================================================== v116 - "L'EXPERIENCE MASCOT" - mascot_cat_experience() ported to the four service pages, directly under "Pourquoi Mascot Inc." as it sits on /iphone. --------------------------------------------------------------------------- Class names are the reference's own (.mexp / .mexp-in / .mexp-k / .mexp-cta) for the same reason .mwhy was reused above: it keeps this recognisably the same component rather than a lookalike. No collision risk - every .mexp rule in mk-mobile.css is scoped :is(.pg-cat,.pg-acc), and none of these four pages carries either class. --------------------------------------------------------------------------- ONE IMPLEMENTATION, FOUR PAGES, DIFFERENT PHOTOGRAPHS --------------------------------------------------------------------------- The reference takes ONE still via --mexp-img. The ask here is for the KIDS photographs to ALTERNATE, so this uses two stacked layers that crossfade: ::before = --mexpA ::after = --mexpB .mexp-scrim = the gradient The scrim has to be a real element rather than ::after (which the reference uses for it) precisely because both pseudo-elements are now spent on the two photo layers. That is the only structural difference from the source. PER-PAGE IMAGES ARE PASSED AS INLINE CSS VARIABLES on the .mexp element, not hard-coded here. That keeps ONE block of CSS for all four surfaces - the mk-loc.css lesson - while letting each page choose a pair that does not collide with the photographs its own step cards are already using: /transfert-dargent celebrations <-> kids-tech /paiement-de-facture hero-kids <-> celebrations /service-dimpression kids-tech <-> hero-kids /photo-identite celebrations <-> hero-kids transfert / facture / photo-identite all spend contact.jpg, learn-laptop.jpg and kids-community.jpg on their "Comment ca marche" cards, so those three are deliberately absent from every pair above - repeating one two sections later would read as an accident rather than a set. CSS ANIMATION, NOT A SCRIPT: there is nothing to interact with, and a keyframe cannot fail to initialise the way a carousel can. 16s cycle, each frame held ~7s with a ~1.3s dissolve - slow enough to read as ambient rather than as a slideshow demanding attention. ⚠️ kids-tech.jpg IS THE ONLY GENUINELY NEW FILE FROM THE KIDS FOLDER. The other five (contact / learn-laptop / kids-community / celebrations / hero-kids) were already on the server - dimension-matched before uploading, per the lesson from the Identite folder. `Kidsaroundphone.jpg` was left out on purpose: at 626x626 it would upscale badly across a ~1108px band. =========================================================================== */ .mexp-sec{background:#0A0C10;padding:0 0 74px} .mexp{ position:relative;border-radius:32px;overflow:hidden;isolation:isolate; border:1px solid rgba(255,255,255,.08); min-height:420px;display:flex;align-items:flex-end; box-shadow:0 30px 54px -30px rgba(0,0,0,.95); } .mexp::before, .mexp::after{ content:"";position:absolute;inset:0;z-index:0; background-size:cover;background-position:center 38%; } .mexp::before{background-image:var(--mexpA);animation:mexpFadeA 16s ease-in-out infinite} .mexp::after {background-image:var(--mexpB);animation:mexpFadeB 16s ease-in-out infinite} @keyframes mexpFadeA{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}} @keyframes mexpFadeB{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}} .mexp .mexp-scrim{ position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(6,7,9,.34) 0%,rgba(6,7,9,.18) 26%,rgba(6,7,9,.72) 58%,rgba(6,7,9,.96) 100%); } .mexp-in{position:relative;z-index:2;padding:38px 40px 40px;max-width:620px} .mexp-k{ display:block;color:#D8A03D;font-size:10.5px;font-weight:600; letter-spacing:.2em;text-transform:uppercase;margin-bottom:10px; } .mexp h3{color:#fff;font-size:clamp(24px,3.2vw,32px);line-height:1.08;letter-spacing:-.02em;margin:0 0 10px} .mexp h3 em{font-style:normal;color:#D8A03D} .mexp p{color:rgba(255,255,255,.78);font-size:14px;line-height:1.55;margin:0 0 18px} .mexp-cta{ display:inline-flex;align-items:center;gap:9px;background:#fff;color:#0a0c10; border-radius:100px;padding:13px 22px;font-size:14.5px;font-weight:600;text-decoration:none; box-shadow:0 10px 24px -12px rgba(0,0,0,.8); } .mexp-cta .arw{color:#0a0c10} /* the scroll-reveal fail-safe, same as .mwhy above */ .mexp-sec .reveal{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .mexp::before,.mexp::after{animation:none} .mexp::after{opacity:0} } @media (max-width:640px){ .mexp-sec{padding:0 0 54px} .mexp{min-height:360px;border-radius:24px} .mexp-in{padding:26px 22px 28px} }