/* Scrollix visual language for pagebuilder sections — shares the same coral-gradient / rounded-pill / soft-shadow design system established in public/css/scrollix-header.css. Reused across all scrollix-* section types (scrollix-hero, scrollix-process, scrollix-marketplace, scrollix-user-guide, scrollix-tutors, scrollix-testimonials); every section keeps the exact same pagesetting()-driven data as its original (banner/steps/marketplace/user-guide/featured-tutors/clients-feedback) counterpart, just restyled. */ /* ---------- Scroll-entrance reveal ---------- Per ENTRANCE_ANIMATIONS_AUDIT.md: the real Scrollix theme's per-card "appear" animations are compiled into Framer's own opaque runtime (not extractable as reusable config — only the initial/final states are readable in its source: opacity:0 + translateY(50px)/translateY(18px) scale(0.95) → opacity:1 + none). The ONE fully-readable, working mechanism documented there is the theme's own hand-rolled whole-section reveal (assets/js/animations.mjs): IntersectionObserver, threshold 0.06, rootMargin "0px 0px -40px 0px", 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) — that audit also found this exact script broken for most of its own targets in the source theme. Reused verbatim here (mechanism + timing) via public/js/scrollix-reveal.js, since Mentorni's Blade output has no Framer runtime to hydrate over top of it and clobber the class the way the audit suspected happens in the source theme — applied to the documented visual "flavors" (50px card lift, 18px+scale row lift, 24px section-header lift) rather than inventing new ones. */ /* `.a-reveal` est posée sur par le gabarit qui charge AUSSI scrollix-reveal.js, et retirée si ce script ne se manifeste pas. Sans cette condition, `opacity: 0` était un pari : si le script ne tournait pas — fichier non chargé, erreur, gabarit qui prend le CSS sans le JS — l'élément restait invisible POUR TOUJOURS, tout en occupant sa place. Une page entièrement blanche sous laquelle on peut défiler. Deux cas réels l'ont montré : la page d'accueil sur téléphone, et l'espace apprenant, dont le gabarit `lernen` charge cette feuille sans jamais charger le révélateur. Le contenu s'affiche maintenant par défaut ; l'animation n'est qu'un supplément. */ .a-reveal [data-reveal] { opacity: 0; transition: opacity 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .a-reveal [data-reveal].is-visible { opacity: 1; transform: none; } .a-reveal [data-reveal="section"] { transform: translateY(24px); } .a-reveal [data-reveal="card"] { transform: translateY(50px); } .a-reveal [data-reveal="card-scale"] { transform: translateY(18px) scale(0.95); } /* Not documented in the audit (Framer's Flavor 3 translateX is a continuous ticker, not an entrance) — used only where explicitly requested for the "C'est quoi un mentor" left column, kept the same distance/timing as the other flavors rather than inventing a new curve. */ .a-reveal [data-reveal="left"] { transform: translateX(-24px); } @media (prefers-reduced-motion: reduce) { [data-reveal] { transition: none; } } /* scrollix-ticker.js clones each ticker item (marked aria-hidden="true") to build a seamless loop. A cloned node keeps whatever data-reveal attribute/class the original had, but is never individually observed — without this, every clone would sit at opacity:0 forever, permanently blanking half of any ticker whose items use data-reveal (see scrollix-reviews). Scoped to the aria-hidden+data-reveal combination only, so it can't affect any other existing section. */ [data-reveal][aria-hidden="true"] { opacity: 1 !important; transform: none !important; } :root { --scx-coral: #ff6363; --scx-coral-soft: #ffbcbc; --scx-gradient: linear-gradient( 38deg, var(--scx-coral-soft) 0%, var(--scx-coral) 54.0541% ); --scx-ink: #171717; --scx-muted: #6b6b6b; --scx-bg-soft: #fdf5f0; --scx-card-bg: #fff; --scx-radius-lg: 24px; --scx-radius-md: 16px; --scx-shadow-soft: 0 20px 60px -20px rgba(255, 99, 99, 0.25), 0 8px 24px -8px rgba(0, 0, 0, 0.08); } @media (min-width: 1400px) { .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1200px; } } .am-bodywrap { background: #fff; } .pb-themesection { /* 30px et non 100 : chaque section porte déjà son propre rembourrage vertical (`.scx-section`), et les cent pixels s'y ajoutaient. */ margin-bottom: 30px; /* Body-text default matching scrollix-local-4's own font-family:Inter usage (the overwhelming majority of its text, headings excepted — see .scx-heading/.scx-hero-heading below for those). .pb-themesection is the pagebuilder's own per-section wrapper, a common ancestor of every scrollix-* section (hero included), so this is the single point that establishes Inter as the inherited default everywhere text doesn't already set its own font-family. Loaded via public/css/scrollix-fonts.css. */ font-family: "Capriola", sans-serif; } .pb-themesection:last-of-type { margin-bottom: 0; } @media (max-width: 767px) { .pb-themesection { margin-bottom: 0; } } .scx-section { padding: 80px 0; } .scx-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px; /* background: #fff1f1; */ color: var(--scx-coral); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 20px; } .scx-badge svg { width: 14px; height: 14px; } .scx-heading { font-family: "Capriola", sans-serif; font-size: 40px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--scx-ink); margin: 0 0 16px; } .scx-heading strong { color: var(--scx-coral); font-weight: 800; } .scx-lead { font-size: 16px; line-height: 1.6; color: var(--scx-muted); margin: 0 0 28px; } .scx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 32px; border: none; border-radius: 999px; background: var(--scx-gradient); color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap; box-shadow: 0 10px 30px -8px rgba(255, 99, 99, 0.55); cursor: pointer; transition: transform 150ms ease; } .scx-btn:hover { transform: translateY(-2px); } /* main.css has a sitewide `a, a:hover { color: #2e90fa; }` rule — its specificity (element + pseudo-class) beats a single button-variant class, so without this, EVERY light-background button variant (.scx-btn-outline, .scx-why-cta-btn) silently turns blue on hover instead of keeping its own intended text color. `:hover` on a class selector (0,2,0) reliably beats `a:hover` (0,1,1), so re-asserting each variant's color here fixes it without touching main.css. */ .scx-btn-outline:hover { color: var(--scx-ink); } .scx-btn-outline { background: #fff; color: var(--scx-ink); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); } /* Text-swap hover on every .scx-btn (rendered via , which wraps the button label in this mask/label/label--dup structure). */ .scx-swap-mask { position: relative; display: block; overflow: hidden; line-height: 1.2; } .scx-swap-label { display: block; line-height: 1.2; white-space: pre; transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1); } .scx-swap-label--dup { position: absolute; top: 100%; left: 0; } .scx-btn:hover .scx-swap-label { transform: translateY(-100%); } /* ---------- Reusable lift + label-roll core (documented in cta-button-animation.md), extracted as an independent class ---------- Same mechanism as .scx-btn's own built-in hover effect above, but not tied to .scx-btn's own color/size (gradient background, 52px height, coral shadow) — add `.scx-btn-swap` alongside any OTHER button's existing class instead, and wrap its label in the same .scx-swap-mask/.scx-swap-label/.scx-swap-label--dup structure (see scx-btn.blade.php) without using the component itself (that component always forces class="scx-btn" via attribute merging, which would drag in styling this is meant to avoid). Fixes the two accessibility gaps flagged when this was first documented: no prefers-reduced-motion guard, and no distinct keyboard-focus feedback. */ /* Interactive states are qualified with the element type (a/button) — this site's admin theme (main.css) turns out to be linked twice on some pages (its own `.am-btn:hover, .am-btn:focus { outline: none; ... }` rule shows up at two different points in document order), so a plain single-class selector can't reliably win the cascade tie against it by source order alone. The type qualifier bumps specificity just enough to win regardless of where in the document main.css happens to load. */ .scx-btn-swap { transition: transform 150ms ease; } a.scx-btn-swap:hover, button.scx-btn-swap:hover, a.scx-btn-swap:focus-visible, button.scx-btn-swap:focus-visible { transform: translateY(-2px); } .scx-btn-swap .scx-swap-mask { position: relative; display: block; overflow: hidden; line-height: 1.2; } .scx-btn-swap .scx-swap-label { display: block; line-height: 1.2; white-space: pre; transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1); } .scx-btn-swap .scx-swap-label--dup { position: absolute; top: 100%; left: 0; } .scx-btn-swap:hover .scx-swap-label, .scx-btn-swap:focus-visible .scx-swap-label { transform: translateY(-100%); } /* Keyboard users get the same lift+roll :hover gives mouse users (via :focus-visible above) plus a visible outline, so focus is never silent even for reduced-motion users whose transform is disabled below. */ a.scx-btn-swap:focus-visible, button.scx-btn-swap:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .scx-btn-swap, .scx-btn-swap .scx-swap-label { transition: none; } a.scx-btn-swap:hover, button.scx-btn-swap:hover, a.scx-btn-swap:focus-visible, button.scx-btn-swap:focus-visible { transform: none; } .scx-btn-swap:hover .scx-swap-label, .scx-btn-swap:focus-visible .scx-swap-label { transform: none; } } .scx-card { background: var(--scx-card-bg); border-radius: var(--scx-radius-lg); box-shadow: var(--scx-shadow-soft); padding: 32px; } .scx-icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 999px; background: var(--scx-gradient); color: #fff; font-size: 22px; flex-shrink: 0; box-shadow: 0 8px 20px -6px rgba(255, 99, 99, 0.5); } /* ---------- scrollix-hero (banner) ---------- Rebuilt a second time from the live-rendered DOM of Scrollix's #hero, after the first pass missed the marquees (an earlier inspection only dumped text content, which doesn't surface image/marquee structure). Actual structure: full-bleed background image, the "Trouvez un [rotating word] disponible en quelques minutes" tagline, a continuous mentor-card ticker, and two rows of subject pills scrolling opposite directions — no badge/subheading/CTA buttons (that content turned out to belong to a differently-named ticker section, not the hero). */ .scx-hero-v2 { position: relative; z-index: 0; padding: 160px 0 64px; text-align: center; overflow: visible; } /* Only this layer breaks out to full viewport width — .scx-hero-v2 itself stays boxed inside the pagebuilder section's container, so the heading/ ticker/pills (which have no width cap of their own) keep exactly the layout they had before. left:50% + translateX(-50%) centers a 100vw-wide layer on the viewport regardless of the boxed ancestor's own width, as long as that ancestor is itself horizontally centered on the page (true here — Bootstrap's .container is margin:0 auto). Real Scrollix #hero's own background sits inset exactly 20px on every side with border-radius: 20px 20px 0 0 (confirmed via direct DOM inspection). */ .scx-hero-bg { position: absolute; top: 10px; bottom: 20px; left: 50%; width: calc(100vw - 40px); transform: translateX(-50%); border-radius: 20px 20px 0 0; /* Le fond n'est plus une image mais , rendu à l'intérieur de cette boîte (dégradés animés en CSS pur, voir public/css/animated-hero-background.css). Le calage plein écran, le `mask` et l'arrondi ci-dessous restent inchangés : le composant s'y ajuste en `inset: 0`. Le `transform` de cette règle crée déjà un contexte d'empilement, qui contient le z-index négatif du composant. */ z-index: -1; mask: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 26.6667%); } @media (max-width: 767px) { .scx-hero-bg { width: calc(100vw - 20px); } } .scx-hero-heading { font-family: "Capriola", sans-serif; font-size: 56px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--scx-ink); max-width: 900px; margin: 0 auto 56px; } @media (max-width: 991px) { .scx-hero-heading { /* Centré sur téléphone : le titre y tient sur trois ou quatre lignes, et un fer à gauche laissait des fins de ligne très inégales. */ text-align: center; } /* Le mot qui tourne passe au corail de la marque. Il était noir comme le reste du titre ; en couleur, l'œil voit tout de suite que c'est lui qui change — et le titre gagne le seul point d'accent qu'il n'avait pas. `!important` parce que `.hero-word-item` porte sa couleur dans une règle de même spécificité déclarée plus bas dans cette feuille. */ .scx-hero-heading .hero-word-viewport, .scx-hero-heading .hero-word-item, .ft-hero-title .hero-word-viewport, .ft-hero-title .hero-word-item { color: var(--scx-coral) !important; } /* La roue aligne ses mots à gauche : sa case fait la largeur du plus long, si bien qu'un mot court — « expert » face à « professeur » — restait collé au bord au lieu de tenir le milieu du titre centré. */ .scx-hero-heading .hero-word-item, .ft-hero-title .hero-word-item { text-align: center !important; } /* Le titre de « Trouver un mentor » et des pages de résultats suit l'accueil : centré, et de la même graisse. */ .ft-hero-title { text-align: center; font-weight: 800; } .ft-hero-badge, .ft-hero-points { margin-left: auto; margin-right: auto; } } /* "Odometer" rotating word (see public/js/hero-word-rotate.js): a viewport clips a column of stacked words while an inner wrapper's transform slides it up, one word-height per rotation. */ .hero-word-viewport { display: inline-block; overflow: hidden; vertical-align: bottom; /* Scrollix's own hero-word-rotate.css has a color override here commented out ("color: #fa6767 !important;") — the rotating word is plain black like the rest of the heading, not coral. */ /* Les marges négatives rendent à la ligne du titre les 0,13em que la case d'un mot vient de gagner (voir .hero-word-item). Sans elles, la première ligne du h1 grandirait de 7 px et s'écarterait de la seconde. Tout est en `em` : le titre tombe à 34 px sur téléphone, et la compensation suit sans seconde règle. (1,15 − 1,32) / 2 = −0,085. */ margin-top: -0.085em; margin-bottom: -0.085em; } .hero-word-wrapper { display: block; transition: transform 0.8s cubic-bezier(0.1, 1, 0.2, 1); } .hero-word-wrapper.hero-word-no-transition { transition: none !important; } .hero-word-item { display: block; text-align: left !important; /* CETTE LIGNE CORRIGE LE TRAIT AU-DESSUS DU MOT. La roue clipe chaque mot à la hauteur de sa ligne. Or `line-height: 1.15` du titre donne une case de 64,4 px alors que Capriola en occupe 70 (ascendante 54 + descendante 16, mesuré à 56 px) : le dessin des lettres débordait de 2,8 px en haut et en bas de sa propre case. La queue du « g » d'« enseignant » descend à 16,4 px sous la ligne de base, soit 3,2 px sous le bas de sa case — donc DANS la case du mot suivant, qui est justement la fenêtre visible. C'est le petit trait que Waleed voyait flotter au-dessus de « mentor » : un bout de « g » du mot d'au-dessus. Même chose pour le « p » d'« expert » au-dessus de « professeur ». 1,32 em, c'est la hauteur réelle de la fonte (1,25) et de quoi tenir les arrondis sous-pixel : 1,28 ne laissait que 0,43 px sous la queue du « g », de quoi la voir réapparaître au premier arrondi d'un autre navigateur. À 1,32 il reste 1,5 px. La case contient enfin son dessin, donc un mot ne peut plus écrire chez son voisin. Le pas de la roue suit tout seul : hero-word-rotate.js mesure la case. */ line-height: 1.32; } /* Ticker mask: fades both edges so cards/pills appear to scroll in and out of view rather than clipping abruptly (see public/js/scrollix-ticker.js for the continuous requestAnimationFrame scroll driving `.scx-ticker-track`). */ .scx-ticker-mask { overflow: hidden; width: 100%; mask-image: linear-gradient( to right, transparent, black 8%, black 92%, transparent ); -webkit-mask-image: linear-gradient( to right, transparent, black 8%, black 92%, transparent ); } .scx-ticker-track { display: flex; width: max-content; will-change: transform; } .scx-mentor-ticker-wrap { margin-bottom: 100px; } .scx-mentor-card { position: relative; flex: none; width: 190px; height: 290px; margin-right: 14px; border-radius: 28px; overflow: hidden; /* box-shadow: var(--scx-shadow-soft); */ } .scx-mentor-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .scx-mentor-card-stat { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 12px; font-weight: 700; color: var(--scx-ink); max-width: calc(100% - 20px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* La pastille porte désormais un MÉTIER, pas un chiffre. « Soutien universitaire » et « Experts-comptables » demandaient 177px là où la règle ci-dessus n'en laissait que 170, et se coupaient aux points de suspension. On leur rend les sept pixels manquants — quatre sur la marge droite, trois sur l'espacement — plutôt que de rapetisser le texte : un métier tronqué n'est plus un métier. */ .scx-mentor-card-stat { max-width: calc(100% - 16px); padding: 5px 9px; gap: 4px; } .scx-mentor-card-stat .ico { font-family: "Material Symbols Rounded"; font-weight: 300; font-style: normal; font-size: 14px; line-height: 1; letter-spacing: normal; text-transform: none; flex-shrink: 0; -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; } .scx-mentor-card-stat i, .scx-mentor-card-stat-icon { font-size: 12px; width: 12px; height: 12px; flex-shrink: 0; } .scx-pill-rows { display: flex; flex-direction: column; gap: 12px; } /* Values matched to the real chip markup/CSS found in Scrollix's own assets/js/animations.mjs (SB_HTML) + assets/css/rendered-fix.css (.sb-chip / .sb-chip-icon) — icon circle bg #fef4f4/border #ffe0de, 18px inline SVGs, 6/16/6/6 padding, translucent backdrop-blur pill. */ .scx-pill { flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; margin-right: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.06); font-size: 16px; font-weight: 500; color: #111; text-decoration: none; white-space: nowrap; transition: background 0.15s; } .scx-pill:hover { background: #fff; } .scx-pill-icon { width: 30px; height: 30px; border-radius: 50%; background: #fef4f4; border: 1px solid #ffe0de; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .scx-pill-icon svg { width: 18px; height: 18px; } @media (max-width: 767px) { .scx-hero-v2 { padding: 150px 0 48px; } .scx-hero-heading { font-size: 34px; margin-bottom: 36px; } .scx-mentor-card { width: 130px; height: 180px; } } /* ---------- scrollix-mentors ---------- Rebuilt a second time to match the reference design exactly: photo card (name/specialty pinned near the top over a scrim, tagline + Instagram pill button pinned near the bottom over a second scrim) followed by an info panel below the photo (star rating, review count, ambassador badge, short description, price + "1er cours offert"). Photo/name/ specialty/tagline are real Scrollix content (#mentors); rating/review- count/ambassador/description/price have no real source (see the view.blade.php comment) and are static values matching the reference. */ .scx-mentors-header { text-align: center; margin-bottom: 40px; max-width: 640px; margin-left: auto; margin-right: auto; } .scx-mentors-label { display: block; color: var(--scx-coral); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; } .scx-badge { position: relative; display: inline-flex; align-items: center; justify-content: center; } .scx-badge::before { display: inline-block; content: ""; width: 24px; height: 1px; background: #ff6363; flex-shrink: 0; } .scx-badge::after { display: inline-block; content: ""; width: 24px; height: 1px; background: #ff6363; flex-shrink: 0; } .scx-mentors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .scx-mentors-card { display: block; border-radius: 16px; overflow: hidden; color: inherit; text-decoration: none; } .scx-mentors-card:hover { color: inherit; } .scx-mentors-photo { position: relative; /* Carré, et non plus 4/5 : sur une liste, le portrait haut poussait les informations de la carte très bas et n'en laissait voir que deux à l'écran. Le cadrage reste sur le visage grâce à `object-position` ci-dessous — l'image source fait 480×672, donc plus étroite que ce cadre : elle est calée sur la largeur, et c'est la hauteur qui est rognée. */ aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; } .scx-mentors-photo:hover img { transform: scale(1.05); } .scx-mentors-photo img { width: 100%; height: 100%; object-fit: cover; /* Un portrait recadré en 4/5 par le centre coupe souvent le front et laisse du buste inutile. Mordre plus haut garde le visage dans le cadre. Va avec `object-fit` : c'est le même geste de cadrage, et il doit rester si l'étalonnage cinéma est un jour retiré. */ object-position: center 25%; display: block; transition: transform 0.4s ease; } /* Bottom-weighted gradient only — the full-photo card no longer has any top overlay content, so there's nothing to protect legibility for up there anymore (contrast the earlier two-stop top+bottom gradient). */ /* `:not(.ft-skeleton-block)` : les squelettes de chargement portent la même classe sans contenir d'image. Ce dégradé, fait pour poser le nom sur une photo, leur peignait un aplat noir en bas — des rectangles gris qui s'assombrissaient, sans rien derrière. */ .scx-mentors-photo:not(.ft-skeleton-block)::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.75) 100% ); pointer-events: none; } /* ── L'ÉTALONNAGE CINÉMA DES PHOTOS DE MENTORS ───────────────────────────── Uniquement les portraits de mentors : la classe est posée par le composant `front/mentor-card`, qui ne sert qu'à ça. Les squelettes de chargement portent bien `.scx-mentors-photo`, mais pas cette classe-ci — ils n'ont aucune image, un étalonnage y serait un rectangle teinté dans le vide. Deux contraintes du terrain, qui expliquent la forme de ces règles : — `::before` est DÉJÀ pris, quelques lignes plus haut, par le dégradé qui rend le nom lisible sur la photo. L'étalonnage prend donc `::after`, et se range en `z-index: 0` : au-dessus de l'image, mais SOUS ce dégradé (z-index 1) et sous le bloc nom/lieu (z-index 2). Étaler une teinte par-dessus le dégradé de lisibilité reviendrait à payer le confort de lecture pour une ambiance. — un survol existe déjà (`scale(1.05)`, 0.4s). Il n'est pas touché : rien ici ne déclare `transform` ni `transition`. Aucune animation n'est ajoutée, donc rien à désarmer sous `prefers-reduced-motion` ; et rien ne change le cadrage : ni ratio, ni hauteur, ni largeur, ni arrondi. `filter` et un pseudo-élément sont composés par le GPU, sans recalcul de mise en page. */ .scx-mentors-photo.mentor-cinematic { /* Confine le fondu à la photo. Sans ça, `mix-blend-mode` se mélangerait au fond de la carte, et l'effet changerait selon ce qu'il y a derrière. */ isolation: isolate; } .scx-mentors-photo.mentor-cinematic img { /* Assez pour asseoir les noirs et réveiller les teints, pas assez pour boucher une ombre ou faire virer une peau. */ filter: contrast(1.07) saturate(1.06) brightness(0.985); } .scx-mentors-photo.mentor-cinematic::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: /* le vignettage : lumière retenue au centre, coins assombris */ radial-gradient( 120% 95% at 50% 38%, rgba(255, 255, 255, 0.16) 0%, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0.68) 100% ), /* la bascule chaud/froid : lumière ambrée en haut, ombres bleutées en bas */ linear-gradient( 152deg, rgba(255, 193, 133, 0.22) 0%, rgba(255, 255, 255, 0) 44%, rgba(36, 62, 100, 0.26) 100% ); mix-blend-mode: soft-light; } /* Single overlay block anchored to the photo's bottom edge — name (+ inline verification icon) and the location/mode line, nothing else. Replaces the earlier top+bottom split (name/specialty up top, tagline/Instagram down below) now that the card carries no secondary content. */ .scx-mentors-overlay { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; } .scx-mentors-name { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; font-size: 26px; font-weight: 700; color: #fff; } /* Plain inline glyph — no hover tooltip/pill this time (contrast the dark-bubble .am-custom-tooltip treatment used elsewhere, e.g. tutor-detail's hero); am-icon-user-check is already a self-contained "verified user" glyph so it reads clearly on its own. */ .scx-mentors-verified-icon { flex-shrink: 0; font-size: 14px; color: #fff; } .scx-mentors-location { margin: 0; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, 0.85); } .scx-mentors-mode { color: rgba(255, 255, 255, 0.7); } /* ---------- Below-photo content block (rating/ambassador/tagline/price) ---------- Restored alongside the photo-only redesign, per confirmed field mapping (see mentor-card.blade.php's own doc comment). */ .scx-mentors-info { padding: 12px 2px 0; } /* La note à gauche, le niveau à droite. `flex-wrap` : sur une carte étroite le badge passe à la ligne entière plutôt que d'être rogné — « Super mentor » est le plus long des quatre libellés, et c'est lui qui décide. */ .scx-mentors-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 6px; } /* Le bloc de la note ne s'étire pas : c'est `margin-left: auto` sur le badge qui creuse l'espace entre les deux. */ .scx-mentors-note { flex: 0 1 auto; display: inline-flex; align-items: center; gap: 6px; } .scx-mentors-stars { color: #ffb400; } .scx-mentors-rating-score { font-weight: 700; color: var(--scx-ink); } .scx-mentors-rating-count { color: var(--scx-muted); } /* Clamped to exactly 2 lines — text-overflow:ellipsis on a -webkit-box clamp truncates a 3rd-line-worthy tagline with a trailing "…" instead of overflowing or wrapping further. min-height (2 lines' worth, independent of actual clamped line count) keeps cards in the same grid row equal height whether a given tagline is one short sentence or a full 2 lines — without it, a row of cards with different tagline lengths would end up with visibly uneven info blocks below the (equal-height) photos. */ .scx-mentors-description { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--scx-muted); display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: calc(1.5em * 2); } .scx-mentors-price { margin: 0; font-size: 14px; } .scx-mentors-price strong { color: var(--scx-ink); } .scx-mentors-offer { margin-left: 4px; color: var(--scx-coral); font-weight: 600; } /* Narrow cards (single-column mobile layout, small phones) — smaller text and a tighter inset so the name/badge/location overlay never crowds the photo's rounded corners or wraps awkwardly. */ @media (max-width: 420px) { .scx-mentors-overlay { left: 12px; right: 12px; bottom: 12px; } .scx-mentors-name { font-size: 15px; } .scx-mentors-location { font-size: 12px; } } @media (max-width: 991px) { .scx-mentors-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 599px) { .scx-mentors-grid { grid-template-columns: 1fr; } } /* ---------- scrollix-process (steps) ---------- */ .scx-process-header { text-align: center; max-width: 640px; margin: 0 auto 48px; } .scx-process-header .scx-badge, .scx-process-header .scx-heading, .scx-process-header .scx-lead { margin-left: auto; margin-right: auto; } .scx-process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; } .scx-step-card { position: relative; background: #fff; border-radius: var(--scx-radius-lg); /* box-shadow: var(--scx-shadow-soft); */ padding: 32px 24px; text-align: left; } .scx-step-card span.scx-step-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: #fff1f1; color: var(--scx-coral); font-weight: 800; margin-bottom: 16px; } .scx-step-card figure { margin: 0 0 16px; } .scx-step-card figure img { width: 56px; height: 56px; border-radius: 16px; object-fit: cover; } .scx-step-card h3 { font-size: 19px; font-weight: 700; color: var(--scx-ink); margin: 0 0 8px; } .scx-step-card p { font-size: 15px; color: var(--scx-muted); line-height: 1.6; margin: 0 0 16px; } .scx-step-card a { color: var(--scx-coral); font-weight: 600; font-size: 14px; text-decoration: none; } .scx-journey-card { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; background: var(--scx-gradient); border-radius: var(--scx-radius-lg); padding: 32px 40px; color: #fff; } .scx-journey-card h3 { font-size: 22px; font-weight: 800; margin: 0 0 4px; color: #fff; } .scx-journey-card p { margin: 0; opacity: 0.9; } .scx-journey-card .scx-btn { background: #fff; color: var(--scx-coral); box-shadow: none; } /* ---------- scrollix-why ---------- Rebuilt a second time to match Scrollix's real bento layout: a badge/heading header, then a grid of 4 feature cards (2x2) on the left plus one tall photo CTA card on the right spanning both rows — not 4 equal cards. Explicit grid-column/row placement on each card (rather than relying on auto-placement order) keeps the 2x2 + tall-right-column layout robust regardless of any future card reordering. */ .scx-why-bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 20px; } .scx-why-grid { display: contents; } .scx-why-card { background: #fff; border-radius: 16px; /* box-shadow: var(--scx-shadow-soft); */ padding: 28px 24px; display: flex; flex-direction: column; } .scx-why-card:nth-of-type(1) { grid-column: 1; grid-row: 1; } .scx-why-card:nth-of-type(2) { grid-column: 2; grid-row: 1; } .scx-why-card:nth-of-type(3) { grid-column: 1; grid-row: 2; } .scx-why-card:nth-of-type(4) { grid-column: 2; grid-row: 2; } .scx-why-card h3 { font-size: 19px; font-weight: 700; color: var(--scx-ink); margin: 0 0 8px; } .scx-why-card p { font-size: 16px; color: var(--scx-muted); line-height: 1.6; margin: 0; } /* All 4 feature-card visual widgets sit inside their own cream-tinted rounded sub-box — confirmed via getComputedStyle on the real Scrollix DOM (background: rgb(255, 247, 241), border-radius ~14-16px) on all of the icon cluster, illustration, and stat-chip containers; this was the main thing missing from the first pass, which put widgets directly on the plain white card background. */ /* Card 1 — social-app icon cluster. Traced the real DOM structure: not a scattered/rotated layout, but a genuine row-stack of 50px cells (mostly empty spacer divs from Framer's internal grid, with 4 real icons at specific row/column positions) clipped to the cream box's height — reproduced here as an explicit 6-column x 3-row CSS grid with each icon placed at its real traced position (Instagram: row1 col4, Snapchat: row2 col2, TikTok: row2 col6, Facebook: row3 col3). */ .scx-why-social-cluster { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(3, 50px); gap: 8px; background: rgb(255, 247, 241); border-radius: 16px; overflow: hidden; margin-bottom: 16px; align-items: center; justify-items: center; } .scx-why-social-icon { display: block; width: 80%; height: 80%; border-radius: 10px; corner-shape: inherit; object-position: center center; object-fit: fill; } .scx-why-social-instagram { grid-column: 4; grid-row: 1; } .scx-why-social-snapchat { grid-column: 2; grid-row: 2; } .scx-why-social-tiktok { grid-column: 6; grid-row: 2; } .scx-why-social-facebook { grid-column: 3; grid-row: 3; } /* Card 2 — real Scrollix illustration (person verifying credentials at a desk), same cream box, image filling it via object-fit: cover (matches the real 's own inline style found in the DOM). */ .scx-why-illustration { height: 173px; margin-bottom: 16px; background: rgb(255, 247, 241); border-radius: 14px; overflow: hidden; } .scx-why-illustration img { width: 100%; height: 100%; object-fit: cover; } /* Card 3 — 3 stat chips, dark pills matching Scrollix's own decorative mini-metric styling, now scattered inside the same cream box (icons substituted with verified icomoon icons — see view.blade.php comment; the real trending/target/sparkle icons are an SVG sprite Framer injects at runtime, absent from this static export). */ .scx-why-stat-cluster { height: 202px; margin-bottom: 16px; background: rgb(255, 247, 241); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; } .scx-why-stat-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px 8px 5px; border-radius: 999px; background: #fff; color: #282828; font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.35); } .am-icon-target:before, .am-icon-trend-up:before, .am-icon-star-fill:before { color: #fffcfc; border-radius: 50%; background: #000; padding: 5px; font-size: 20px; } .scx-why-stat-chip i { font-size: 12px; } /* Card 4 — real Scrollix chart SVG (exact path/line/circle/label coordinates copied from the live DOM), reveal-animation attributes dropped since we render it already-settled rather than replicating the scroll-triggered draw-on animation. Same cream box as the other 3. */ .scx-why-chart { height: 173px; margin-bottom: 16px; background: rgb(255, 247, 241); border-radius: 14px; padding: 12px; } /* CTA card — tall photo card spanning both grid rows on the right. */ .scx-why-cta-card { position: relative; grid-column: 3; grid-row: 1 / span 2; border-radius: 16px; overflow: hidden; min-height: 320px; } .scx-why-cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .scx-why-cta-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100% ); } .scx-why-cta-overlay h3 { color: #fff; font-size: 24px; font-weight: 800; line-height: 1.2; margin: 0 0 10px; } .scx-why-cta-overlay p { color: rgba(255, 255, 255, 0.9); font-size: 16px; line-height: 1.5; margin: 0 0 20px; } .scx-why-cta-actions { display: flex; flex-direction: column; gap: 10px; } .scx-why-cta-btn { background: #fff; color: var(--scx-ink); box-shadow: none; height: 44px; } .scx-why-cta-btn:hover { color: var(--scx-ink); } .scx-why-cta-btn-outline { background: transparent; color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7) inset; height: 44px; } .scx-why-cta-btn-outline:hover { color: #fff; } @media (max-width: 991px) { .scx-why-bento { grid-template-columns: repeat(2, 1fr); } .scx-why-cta-card { grid-column: 1 / span 2; grid-row: 3; } } @media (max-width: 599px) { .scx-why-bento { grid-template-columns: 1fr; } .scx-why-card:nth-of-type(1), .scx-why-card:nth-of-type(2), .scx-why-card:nth-of-type(3), .scx-why-card:nth-of-type(4) { grid-column: 1; grid-row: auto; } .scx-why-cta-card { grid-column: 1; grid-row: auto; } } /* ---------- scrollix-explainer ---------- Rebuilt a second time to match Scrollix's real "Clients results" section exactly: badge/heading/paragraph + a social-proof row (stacked avatars, star rating, verified-mentor count) on the left, a 2x2 bento grid on the right — one text stat card, two REAL autoplaying video cards (not photos), and one coral text stat card. The rating row was previously folded into the same 3-item repeater as the 2 stat cards; confirmed against the real DOM it actually belongs here, in the left column, separate from the bento grid (which only ever has 4 cells). */ .scx-explainer-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; } .scx-explainer-content { display: flex; flex-direction: column; height: 100%; justify-content: space-between; } .scx-explainer-rating { display: flex; align-items: center; gap: 16px; margin-top: 32px; } .scx-explainer-avatars { display: flex; flex-shrink: 0; } .scx-explainer-avatar { display: block; width: 44px; height: 44px; border-radius: 999px; overflow: hidden; border: 2px solid #fff; box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.15); margin-left: -14px; } .scx-explainer-avatar:first-child { margin-left: 0; } .scx-explainer-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .scx-explainer-rating-text p { margin: 2px 0 0; font-size: 14px; color: var(--scx-muted); } .scx-explainer-stars { display: flex; align-items: center; gap: 3px; } .scx-explainer-star { width: 16px; height: 16px; fill: #ff9f1a; } .scx-explainer-rating-score { margin-left: 6px; font-size: 15px; font-weight: 700; color: var(--scx-ink); } .scx-explainer-bento { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 320px); gap: 20px; } .scx-explainer-stat-card { background: #fff; border-radius: 16px; /* box-shadow: var(--scx-shadow-soft); */ padding: 28px; display: flex; flex-direction: column; } .scx-explainer-stat-card h3 { font-size: 36px; font-weight: 800; color: var(--scx-ink); margin: 0 0 auto; letter-spacing: -0.02em; } .scx-explainer-stat-card p { font-size: 16px; color: var(--scx-muted); line-height: 1.5; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, 0.1); } .scx-explainer-stat-card-coral { background: var(--scx-gradient); } .scx-explainer-stat-card-coral h3, .scx-explainer-stat-card-coral p { color: #fff; } .scx-explainer-stat-card-coral p { border-top-color: rgba(255, 255, 255, 0.25); } /* Real Scrollix video cards: autoplaying (muted/loop/playsinline), a frosted view/like badge cluster top-right, a play/pause toggle bottom-left — see public/js/scrollix-explainer-video.js for the toggle behavior. */ .scx-explainer-video-card { position: relative; border-radius: 16px; overflow: hidden; } .scx-explainer-video-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .scx-explainer-video-info { position: absolute; top: 14px; right: 14px; display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .scx-explainer-video-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; } .scx-explainer-video-badge svg { width: 14px; height: 14px; } .scx-explainer-video-badge-views { color: #fff; } .scx-explainer-video-badge-likes { background: #fff; color: var(--scx-ink); } .scx-explainer-video-toggle { position: absolute; bottom: 14px; left: 14px; display: grid; place-items: center; width: 36px; height: 36px; border: none; border-radius: 999px; background: #fff; box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.3); cursor: pointer; backdrop-filter: blur(5px); } .scx-explainer-video-toggle svg { width: 16px; height: 16px; fill: var(--scx-ink); } @media (max-width: 991px) { .scx-explainer-grid { grid-template-columns: 1fr; } } @media (max-width: 599px) { .scx-explainer-bento { grid-template-columns: 1fr; grid-template-rows: repeat(4, 320px); } } /* ---------- scrollix-cases ("Études de cas") ---------- Rebuilt per case-study.md (a standalone build spec for this "overlapping numbered badge" testimonials-grid pattern) — real content (coach/ comptable/PMP/marketing-consultant stories) kept as-is, presentation rebuilt to match the spec exactly: mobile-first 1-col -> 2-col grid at 640px (not the previous 767px desktop-first breakpoint), a badge that straddles the card's top edge instead of sitting inline in the content, a plain 3-stop gradient overlay instead of the previous masked-blur technique, and clamp()-based fluid sizing (badge, card padding/ min-height, type, gaps) throughout, per the spec's two-layer responsive approach: discrete breakpoints for structural changes, fluid clamp() values for everything that should scale continuously instead of snapping. .scx-process-header (shared with scrollix-why) is untouched — see the note on .scx-cases-grid below for why it doesn't also carry the spec's fluid margin-top. */ .scx-cases-grid { display: grid; grid-template-columns: 1fr; /* The spec's version also puts a fluid clamp(48px, 6vw, 72px) margin-top here (assuming a header with no bottom margin of its own). .scx-process-header already has a fixed 48px margin-bottom and is explicitly not to be touched, so that margin-top is intentionally omitted here rather than stacking on top of it. */ column-gap: clamp(16px, 3vw, 32px); row-gap: clamp(48px, 6vw, 64px); } @media (min-width: 640px) { .scx-cases-grid { grid-template-columns: repeat(2, 1fr); } } /* Positioning context for the overlapping badge below — kept as a separate wrapper from .scx-case-card (not merged into it) specifically so the badge sits outside the card's own overflow:hidden box and is never clipped by it. */ .scx-case-item { position: relative; } /* Badge — absolute, straddles the card's top edge (half above, half inside): left:50% + translateX(-50%) centers it horizontally; top:0 + translateY(-50%) puts its vertical center exactly on the card's top edge. The border "punches" it out from whatever sits behind it (the page background, #faf8f5 — measured directly rather than guessed) so it reads as a floating disc instead of blending into the card's photo. z-index:2 + .scx-case-card's own isolation:isolate keep it above the card's background/gradient regardless of DOM order. Sized with the same clamp() scale as the card's padding-top below (48-64px circle vs. 44-60px clearance) — keep these two in sync if either changes. */ .scx-case-badge { position: absolute; top: 0; left: 50%; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: clamp(48px, 6vw, 64px); height: clamp(48px, 6vw, 64px); border-radius: 999px; border: 4px solid #faf8f5; background: var(--scx-ink); color: #fff; font-size: clamp(0.95rem, 1.4vw, 1.15rem); font-weight: 700; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.35); transform: translate(-50%, -50%); } .scx-case-card { position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; min-height: clamp(360px, 44vw, 460px); padding: clamp(20px, 4vw, 36px); /* Bumped separately from the other 3 sides to clear the overlapping badge above. */ padding-top: clamp(44px, 6vw, 60px); } /* A background-image div, not an : confirmed via direct testing that loading="lazy" on a position:absolute; inset:0 intermittently fails to ever paint (a real, reproducible rendering quirk, not a false alarm) — this technique is also what .scx-hero-bg already uses successfully elsewhere on this page, so it's proven reliable in this exact codebase. */ .scx-case-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; } /* Plain 3-stop gradient (case-study.md §5) — light at the top where there's usually no text, heavy at the bottom where the bottom-pinned title/text/tags sit, guaranteeing the white text stays legible against any photo. Replaces the previous masked-blur overlay technique. */ .scx-case-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgb(255 255 255 / 35%) 0%, rgb(36 36 36 / 55%) 55%, rgb(45 45 45 / 78%) 100% ); } /* margin-top:auto (with .scx-case-card as a column flex container) pins this to the bottom of the card regardless of how tall the card grows, so text always sits against the darkest part of the gradient above. */ .scx-case-content { position: relative; margin-top: auto; display: flex; flex-direction: column; gap: 12px; } .scx-case-content h3 { color: #fff; font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 700; line-height: 1.25; margin: 0; white-space: normal; overflow-wrap: break-word; } .scx-case-content p { color: rgba(255, 255, 255, 0.85); font-size: clamp(0.9rem, 1.2vw, 1rem); line-height: 1.55; margin: 0; } .scx-case-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .scx-case-tag { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: #fff; font-size: 13px; font-weight: 500; transition: background-color 0.2s ease; } .scx-case-tag:hover { background: rgba(255, 255, 255, 0.2); } .scx-case-tag img { width: 14px; height: 14px; flex-shrink: 0; } /* Prevents a long tag label from breaking the pill's fixed shape — case-study.md's equivalent. */ .scx-case-tag-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 640px) { .scx-case-tag { font-size: 14px; } } /* ---------- scrollix-marketplace ---------- */ .scx-marketplace { position: relative; overflow: hidden; } .scx-marketplace .container > .row { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; } .scx-marketplace-content { flex: 1 1 480px; } .scx-marketplace-list, .scx-marketplace-list li { list-style: none !important; } .scx-marketplace-list { margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 14px; } .scx-marketplace-list li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--scx-ink); font-weight: 500; } .scx-marketplace-list li span { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: var(--scx-gradient); flex-shrink: 0; } .scx-marketplace-media { flex: 1 1 420px; } .scx-marketplace-media img { width: 100%; border-radius: var(--scx-radius-lg); /* box-shadow: var(--scx-shadow-soft); */ } /* ---------- scrollix-user-guide ---------- */ .scx-guide-row { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; } .scx-guide-row + .scx-guide-row { margin-top: 64px; } .scx-guide-row.scx-guide-reverse { flex-direction: row-reverse; } .scx-guide-media { flex: 1 1 420px; } .scx-guide-media img { width: 100%; border-radius: var(--scx-radius-lg); /* box-shadow: var(--scx-shadow-soft); */ } .scx-guide-content { flex: 1 1 420px; } /* ---------- scrollix-tutors (wraps ) ---------- */ .scx-tutors-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 40px; } .scx-tutors-header .scx-heading, .scx-tutors-header .scx-lead { margin-bottom: 0; } /* ---------- scrollix-testimonials (clients-feedback) ---------- */ .scx-testimonials-header { text-align: center; max-width: 640px; margin: 0 auto 48px; } .scx-testimonials-header .scx-badge, .scx-testimonials-header .scx-heading, .scx-testimonials-header .scx-lead { margin-left: auto; margin-right: auto; } .scx-testimonial-grid, .scx-testimonial-grid li { list-style: none !important; } .scx-testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin: 0; padding: 0; } .scx-testimonial-card { background: #fff; border-radius: var(--scx-radius-lg); /* box-shadow: var(--scx-shadow-soft); */ padding: 28px; } .scx-testimonial-stars { display: flex; gap: 2px; color: var(--scx-coral); margin-bottom: 12px; } .scx-testimonial-card p.scx-quote { font-size: 15px; line-height: 1.6; color: var(--scx-ink); margin: 0 0 20px; } .scx-testimonial-person { display: flex; align-items: center; gap: 12px; } .scx-testimonial-person figure { margin: 0; width: 44px; height: 44px; border-radius: 999px; overflow: hidden; flex-shrink: 0; } .scx-testimonial-person figure img { width: 100%; height: 100%; object-fit: cover; } .scx-testimonial-person h3 { font-size: 15px; font-weight: 700; color: var(--scx-ink); margin: 0; } .scx-testimonial-person span { font-size: 13px; color: var(--scx-muted); } @media (max-width: 767px) { .scx-heading { font-size: 28px; } .scx-hero { padding: 140px 0 60px; } .scx-guide-row.scx-guide-reverse { flex-direction: column; } } /* ---------- scrollix-service ("Comment ça marche") ---------- Built from service.md, a dedicated audit of Scrollix's real #services section. Not a simple icon list: each of the 3 "Service NN" cards holds a fully custom widget (notification-card stack / live chat / dual video call), all documented there down to exact pixel/color/timing values. Card zigzag (mockup-left vs text-left) is DOM order in the Blade view, not a CSS row-reverse — matches the real Scrollix technique. */ .scx-service-header { text-align: center; max-width: 640px; margin: 0 auto 48px; } .scx-service-header > a:hover { color: #fff; } .scx-service-header-text { display: flex; flex-direction: column; } .scx-service .scx-heading { font-size: 46px; } .scx-service-wrapper { display: flex; flex-direction: column; gap: 20px; } .scx-service-card { display: flex; align-items: stretch; background: #fff; border-radius: 20px; padding: 10px; /* A fixed height (not min-height) is what actually caps the card: with only a min-height, an "auto"-sized flex container keeps growing to fit its tallest item's content (e.g. the chat widget's message list), and align-items: stretch then cascades that larger size back down through every level instead of capping it — this is what caused the chat widget to visibly grow taller with every new message. */ height: 500px; } .scx-service-mockup { flex: 1 1 50%; display: flex; min-width: 0; min-height: 0; } .scx-service-mockup-slot { flex: 1; display: flex; align-items: stretch; justify-content: center; overflow: hidden; background: rgb(255, 247, 241); border-radius: 16px; padding: 40px; } .scx-service-text { flex: 1 1 50%; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 20px 28px; } .scx-service-step-badge { display: inline-flex; align-items: center; align-self: flex-start; padding: 6px 16px; margin-bottom: 20px; border-radius: 999px; background: rgb(254, 244, 244); color: #000; font-size: 14px; font-weight: 700; } .scx-service-text h4 { font-family: "Capriola", sans-serif; font-size: 36px; font-weight: 500; color: var(--scx-ink); margin: 0 0 12px; line-height: 1.2; } .scx-service-text p { font-size: 16px; font-weight: 500; color: rgb(120, 120, 120); line-height: 1.6; margin: 0; } .scx-service-features { display: flex; flex-direction: column; gap: 7px; margin-top: 48px; } .scx-service-feature-row { display: flex; align-items: flex-start; gap: 8px; } .scx-service-feature-row p { margin: 0; font-size: 16px; color: var(--scx-ink); } .scx-service-check { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; fill: rgb(255, 99, 99); } /* Widget 1 — notification-card stack (service.md §5.3, verbatim values). Pure CSS: one 8s infinite cycle per card/badge, no JS driving motion. */ .notif-wrap { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; } .notif-scene { position: relative; width: 360px; height: 400px; max-width: 100%; } .npcard { position: absolute; left: 0; width: 100%; display: flex; align-items: center; gap: 18px; padding: 10px 18px; background: #fff; border: 1px solid #ececec; border-radius: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07); } @media (max-width: 767px) { .npcard { line-height: 1.2; } } .npcard .nplogo { width: 56px; height: 56px; border-radius: 12px; background: #f0f0f0; border: 1px solid #dedede; overflow: hidden; padding: 0; flex-shrink: 0; } .npcard .nplogo img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; } .npcard .nptxt .nptitle { font-size: 15px; font-weight: 700; color: #1b1b1f; letter-spacing: -0.01em; } .npcard .nptxt .npsub { font-size: 13px; color: #8a8a90; margin-top: 3px; } .np-badge { position: absolute; z-index: 2; top: 150px; left: 50%; width: 50px; height: 50px; border-radius: 50%; background: #454545; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); animation: nBadge 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; } .np-badge svg { width: 30px; height: 30px; } .np-front { top: 40px; z-index: 3; animation: nFront 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; } .np-mid { top: 50px; z-index: 2; animation: nMid 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; } .np-back { top: 60px; z-index: 1; animation: nBack 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; } @media (max-width: 767px) { .np-front { top: 60px; } .np-mid { top: 55px; } .np-back { top: 50px; } .np-badge { top: 160px; } } @keyframes nFront { 0%, 25% { transform: translate(0, 0); filter: blur(0); opacity: 1; } 45%, 65% { transform: translate(0, 0); filter: blur(0); opacity: 1; } 80%, 100% { transform: translate(0, 0); filter: blur(0); opacity: 1; } } @keyframes nMid { 0%, 25% { transform: translate(0, 100px); filter: blur(0); opacity: 1; } 45%, 65% { transform: translate(-12px, -8px); filter: blur(3px); opacity: 0.75; } 80%, 100% { transform: translate(0, 100px); filter: blur(0); opacity: 1; } } @keyframes nBack { 0%, 25% { transform: translate(0, 200px); filter: blur(0); opacity: 1; } 45%, 65% { transform: translate(-24px, -16px); filter: blur(5px); opacity: 0.45; } 80%, 100% { transform: translate(0, 200px); filter: blur(0); opacity: 1; } } @keyframes nBadge { 0%, 25% { transform: translateX(-50%) translateY(220px); opacity: 0; } 40%, 65% { transform: translateX(-50%) translateY(0); opacity: 1; } 80%, 100% { transform: translateX(-50%) translateY(220px); opacity: 0; } } /* Widget 2 — live chat widget (service.md §5.4, verbatim values). Its own self-contained lavender palette — deliberately does not reuse the site's coral, per the audit. Entrance + send/reply/auto-play logic lives in public/js/scrollix-service-chat.js. */ .chat-widget { width: 85%; max-width: 340px; margin: 0 auto; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 24px rgba(91, 82, 200, 0.15); background: #fff; border: 1px solid #e8e6f8; display: flex; flex-direction: column; min-height: 0; align-self: stretch; } .chat-header { background: #e4c6ff; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; color: #000; } @media (max-width: 767px) { .chat-header { padding: 10px 12px; } } .chat-header-left { display: flex; align-items: center; gap: 12px; } .bot-avatar { width: 36px; height: 36px; background: rgba(255, 255, 255, 0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .bot-avatar svg { width: 20px; height: 20px; } .chat-header-info { display: flex; flex-direction: column; line-height: 1.3; } .chat-header span { font-size: 16px; font-weight: 600; letter-spacing: 0.01em; } .chat-header small { font-size: 12px; opacity: 0.75; } .chevron-btn { background: none; border: none; color: #000; cursor: pointer; padding: 4px; opacity: 0.85; display: flex; align-items: center; flex-shrink: 0; } .chat-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 14px 10px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; background: #faf9ff; } @media (max-width: 767px) { .chat-messages div { font-size: 12px; } } .chat-messages::-webkit-scrollbar { width: 4px; } .chat-messages::-webkit-scrollbar-thumb { background: rgba(91, 82, 200, 0.25); border-radius: 4px; } .msg-row { display: flex; align-items: flex-end; gap: 8px; animation: chatFadeUp 0.25s ease; } .msg-row.bot { justify-content: flex-start; } .msg-row.user { justify-content: flex-end; } .msg-avatar { width: 30px; height: 30px; min-width: 30px; background: #e4c6ff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 2px; } .msg-avatar svg { width: 16px; height: 16px; } .bubble { max-width: 72%; padding: 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.5; } .bot .bubble { background: #ecedf8; color: #1a1a2e; border-bottom-left-radius: 4px; } .user .bubble { background: #c7c4ec; color: #000; border-bottom-right-radius: 4px; } .typing-bubble { display: flex; align-items: center; gap: 4px; padding: 12px 16px; } .dot { width: 7px; height: 7px; background: #c7c4ec; border-radius: 50%; animation: chatBounce 1.2s infinite ease-in-out; opacity: 0.6; } /* On the mentee (user) side, the typing bubble itself is filled with the same purple used for .dot's default color (#c7c4ec) — without this override the dots would be invisible against their own bubble. Darker dots here match the user bubble's own text color (#000). */ .msg-row.user .dot { background: #000; } .dot:nth-child(2) { animation-delay: 0.2s; } .dot:nth-child(3) { animation-delay: 0.4s; } @keyframes chatBounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-5px); opacity: 1; } } @keyframes chatFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .chat-input-bar { padding: 12px 14px; background: #fff; border-top: 1px solid #e5e5f0; display: flex; align-items: center; gap: 10px; } .chat-input { flex: 1; min-width: 0; border: none; outline: none; font-size: 14px; color: #333; background: transparent; font-family: inherit; } .chat-input::placeholder { color: #aaa; } .icon-btn { background: none; border: none; cursor: pointer; color: #aaa; padding: 2px; display: flex; align-items: center; flex-shrink: 0; } .send-btn { width: 34px; height: 34px; border-radius: 50%; background: #e4c6ff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Widget 3 — dual video-call mockup (service.md §5.5). No animation beyond native video playback. */ .scx-service-video-card { width: 100%; height: 100%; display: flex; flex-direction: column; background: #fff; border-radius: 14px; overflow: hidden; } .scx-service-video-header { display: flex; align-items: center; gap: 8px; padding: 14px 18px; font-size: 14px; font-weight: 600; color: #111; font-family: "Capriola", sans-serif; } .scx-service-video-logo { width: 20px; height: 20px; fill: #111; flex-shrink: 0; } .scx-service-video-label { margin-left: auto; color: #4a7eff; font-weight: 500; font-size: 13px; } .scx-service-video-grid { display: flex; gap: 12px; padding: 0 18px 18px; flex: 1; overflow: hidden; } .scx-service-video-grid video { flex: 1; min-width: 0; border-radius: 10px; object-fit: cover; display: block; width: 100%; height: 100%; background: #000; } @media (max-width: 991px) { .scx-service .scx-heading { font-size: 38px; } .scx-service-card { flex-direction: column; height: auto; } .scx-service-mockup { flex: none; height: 340px; } .scx-service-text { flex: none; } .scx-service-mockup-slot { padding: 10px; min-height: 0; } } @media (max-width: 767px) { .scx-service-header { flex-direction: column; align-items: flex-start; gap: 20px; } .scx-service .scx-heading { font-size: 30px; } .scx-service-text h4 { font-size: 24px; } } /* ---------- scrollix-stats ("Nos résultats parlent d'eux-mêmes") ---------- Centered eyebrow+heading header (reuses the shared .scx-badge, which already renders with the dash-line-on-each-side style via the global redefinition further up this file — same pattern as every other section's eyebrow label, no new component needed) + a row of 4 stat columns separated by thin vertical dividers (border-left on every column but the first). No count-up animation: the existing entrance system (data-reveal) is a plain CSS opacity/transform toggle with no numeric interpolation anywhere else in the project, and these values aren't all plain integers (1,5M+ / 98% / 17+) — same call already made for the "C'est quoi un mentor" stat cards (see task.md), kept consistent here rather than introducing a new one-off JS mechanism. */ .scx-stats-header { text-align: center; max-width: 640px; margin: 0 auto 56px; } .scx-stats-header .scx-badge, .scx-stats-header .scx-heading { margin-left: auto; margin-right: auto; } .scx-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .scx-stats-col { padding: 0 32px; } .scx-stats-col:first-child { padding-left: 0; } .scx-stats-col:last-child { padding-right: 0; } .scx-stats-col:not(:first-child) { border-left: 1px solid rgba(0, 0, 0, 0.1); } .scx-stats-number { font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--scx-ink); margin-bottom: 24px; } .scx-stats-divider { height: 1px; width: 100%; background: rgba(0, 0, 0, 0.1); margin-bottom: 20px; } .scx-stats-title { font-size: 19px; font-weight: 700; color: var(--scx-ink); margin: 0 0 8px; } .scx-stats-desc { font-size: 16px; color: var(--scx-muted); line-height: 1.5; margin: 0; } @media (max-width: 991px) { .scx-stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; } .scx-stats-col:not(:first-child) { border-left: none; } .scx-stats-col:nth-child(2n) { border-left: 1px solid rgba(0, 0, 0, 0.1); } .scx-stats-col:first-child, .scx-stats-col:nth-child(2n + 1) { padding-left: 0; } .scx-stats-col:nth-child(2n) { padding-right: 0; } } @media (max-width: 599px) { .scx-stats-grid { grid-template-columns: 1fr; row-gap: 32px; } .scx-stats-col, .scx-stats-col:nth-child(2n) { border-left: none; padding-left: 0; padding-right: 0; } .scx-stats-number { font-size: 48px; } } /* ---------- scrollix-reviews ("Témoignages") ---------- Built from testimonials.md, a dedicated audit of Scrollix's real #testimonials section. NOT a uniform grid: one large featured review card (split panel — logo/identity left, video+rating+quote right, same gradient+masked-blur overlay technique as .scx-case-overlay) plus a continuously-scrolling ticker (marquee, not a click-through carousel) of 4 cards alternating between a plain text-quote card and a video card with a pause/play toggle. Ticker motion reuses the existing scrollix-ticker.js/[data-scx-ticker] mechanism verbatim (same one driving the hero's mentor-card ticker) rather than a new one. */ .scx-reviews-header { text-align: center; max-width: 640px; margin: 0 auto 40px; } .scx-reviews-header .scx-badge, .scx-reviews-header .scx-heading { margin-left: auto; margin-right: auto; } .scx-reviews-content { display: flex; flex-direction: column; gap: 18px; } /* Featured card — 2-column grid, left ~37.5% / right ~57% at 1000px reference width (Framer-computed, not a round fraction) — approximated with the same 5fr/7fr ratio already used for .scx-explainer-grid. */ .scx-reviews-featured { display: grid; grid-template-columns: 5fr 7fr; gap: 10px 20px; padding: 16px; background: #fff; border-radius: 20px; } .scx-reviews-featured-left { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 16px; min-height: 400px; } .scx-reviews-identity { display: flex; align-items: center; gap: 10px; } .scx-reviews-avatar { display: block; width: 48px; height: 48px; border-radius: 999px; object-fit: cover; flex-shrink: 0; } .scx-reviews-avatar-lg { width: 58px; height: 58px; } .scx-reviews-name { margin: 0; font-size: 16px; font-weight: 500; color: var(--scx-ink); } .scx-reviews-name-lg { font-family: "Capriola", sans-serif; font-size: 22px; } .scx-reviews-role { margin: 2px 0 0; font-size: 15px; font-weight: 500; color: rgb(120, 120, 120); } .scx-reviews-featured-left .scx-reviews-role { font-size: 16px; } .scx-reviews-featured-right { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 30px; min-height: 400px; border-radius: 20px; overflow: hidden; background: #000; } .scx-reviews-featured-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Same masked-blur technique as .scx-case-overlay: image is clear for the top ~55%, then blurs/darkens toward the bottom where the text sits. */ .scx-reviews-featured-overlay { position: absolute; inset: 0; backdrop-filter: blur(100px); -webkit-backdrop-filter: blur(100px); background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100% ); mask-image: linear-gradient( 180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.95) 55.135%, rgba(0, 0, 0, 1) 100% ); -webkit-mask-image: linear-gradient( 180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.95) 55.135%, rgba(0, 0, 0, 1) 100% ); } .scx-reviews-featured-rating, .scx-reviews-rating { position: relative; display: flex; align-items: center; gap: 10px; } .scx-reviews-star { width: 18px; height: 18px; flex-shrink: 0; fill: #ff6a0c; } .scx-reviews-score { margin: 0; font-size: 14px; font-weight: 500; color: var(--scx-ink); } .scx-reviews-score-lg { color: #fff; } .scx-reviews-quote { position: relative; margin: 0; font-family: "Capriola", sans-serif; font-size: 20px; font-weight: 500; line-height: 1.4; color: #fff; } /* ---------- Ticker (continuous marquee, reuses [data-scx-ticker]) ---------- */ .scx-reviews-ticker-viewport { overflow: hidden; width: 100%; } .scx-reviews-ticker-track { display: flex; gap: 18px; width: max-content; will-change: transform; list-style: none; margin: 0; padding: 0; } .scx-reviews-ticker-item { flex: none; /* main.css has a sitewide bare `li { list-style: inside none disc; }` rule (line ~642) that sets list-style directly on every
  • — an inherited `list-style: none` from the parent .scx-reviews-ticker-track (
      ) alone doesn't override that, since a direct declaration on the element always wins over an inherited one regardless of specificity. Resetting it here, on the
    • itself, is what actually removes the bullet dots. */ list-style: none; } .scx-reviews-card { width: 321px; height: 340px; border-radius: 16px; display: flex; flex-direction: column; } .scx-reviews-card-text { justify-content: space-between; padding: 20px; background: #fff; } .scx-reviews-quote-sm { margin: 0; font-size: 16px; font-weight: 500; color: rgb(120, 120, 120); line-height: 1.5; } .scx-reviews-card-video { position: relative; justify-content: flex-end; gap: 10px; padding: 18px; overflow: hidden; background: #000; } .scx-reviews-ticker-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .scx-reviews-dark-overlay { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.25); } .scx-reviews-pause-toggle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 999px; border: none; background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; cursor: pointer; } .scx-reviews-pause-icon { width: 16px; height: 16px; fill: #fff; } .scx-reviews-identity-overlay { position: relative; } .scx-reviews-name-onvideo { color: #fff; } .scx-reviews-role-onvideo { color: rgba(255, 255, 255, 0.9); } @media (max-width: 767px) { .scx-reviews .scx-heading { font-size: 30px; } .scx-reviews-featured { grid-template-columns: 1fr; } .scx-reviews-featured-left, .scx-reviews-featured-right { min-height: 0; } .scx-reviews-featured-right { min-height: 340px; } } /* ---------- scrollix-faq ("FAQ's") ---------- Reproduced from Scrollix's real FAQ section — unusually, that section has no id/data-framer-name at all in the source (sits outside
      in the export). Confirmed empirically via real mouse clicks (synthetic .click() doesn't trigger Framer's handlers, same as every other interactive control audited in this project): single-open accordion, no row open by default, icon rotates 0deg -> 45deg (a "+" becoming a "×"). Built on Bootstrap 5's own accordion/collapse component (already used elsewhere in this project, e.g. resources/views/livewire/pages/admin/menu/manage-menu.blade.php) for the open/close + single-open mechanics and accessibility (aria-expanded, keyboard support) rather than a new custom JS accordion — every visual default Bootstrap ships (borders, chevron, padding, focus shadow) is overridden below to match the real design exactly. */ .scx-faq-header { text-align: center; max-width: 640px; margin: 0 auto 40px; } .scx-faq-header .scx-badge, .scx-faq-header .scx-heading { margin-left: auto; margin-right: auto; } /* ========================================================================== LES QUESTIONS FRÉQUENTES DE L'ACCUEIL — le style de la fiche mentor -------------------------------------------------------------------------- Repris de mew_dash/faq-mentor.html, comme partout ailleurs sur le site. Ce bloc-ci est un accordéon Bootstrap : l'état ouvert se lit sur `:not(.collapsed)` du bouton, et non sur une classe du parent — d'où les sélecteurs qui remontent par `:has()`. ========================================================================== */ .scx-faq-list { display: flex; flex-direction: column; gap: 10px; } .scx-faq-item, .scx-faq-item:first-of-type, .scx-faq-item:last-of-type { border: none; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1.5px #F0EBE7; overflow: hidden; transition: box-shadow .22s ease, background .22s ease; } .scx-faq-item:has(.scx-faq-question:not(.collapsed)) { background: #F9F7F5; box-shadow: inset 0 0 0 1.5px #FFD3D3; } .accordion-header { margin: 0; } .scx-faq-question { display: flex; align-items: flex-start; justify-content: flex-start; gap: 14px; width: 100%; padding: 18px; border: none; background: transparent; box-shadow: none; cursor: pointer; } /* Bootstrap pose son propre chevron et teinte la ligne ouverte en bleu. */ .scx-faq-question::after { display: none; content: none; } .scx-faq-question:focus { box-shadow: none; } .scx-faq-question:not(.collapsed) { background: transparent; color: #1C1C1E; box-shadow: none; } .scx-faq-num { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 11px; background: #F5F0EF; color: #5F5E64; font-size: 13.5px; font-weight: 900; font-variant-numeric: tabular-nums; transition: background .2s ease, color .2s ease; } .scx-faq-question:not(.collapsed) .scx-faq-num { background: linear-gradient(38deg, #FFBCBC 0%, #FF6363 54%); color: #fff; } /* La question n'est jamais tronquée : elle passe à la ligne. */ .scx-faq-question-text { flex: 1; min-width: 0; padding-top: 4px; font-size: 17.5px; font-weight: 800; letter-spacing: -.025em; line-height: 1.4; color: #1C1C1E; text-align: left; text-wrap: pretty; } .scx-faq-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #F5F0EF; color: #1C1C1E; transition: background .2s ease, color .2s ease, transform .28s cubic-bezier(.22, .9, .24, 1); } .scx-faq-question:hover .scx-faq-icon { background: #FFF1F1; color: #C0392B; } .scx-faq-question:not(.collapsed) .scx-faq-icon { background: #1C1C1E; color: #fff; transform: rotate(180deg); } .scx-faq-icon-svg { width: 21px; height: 21px; } .scx-faq-icon-svg path { fill: currentColor; stroke: none; } /* Alignée sous la question, pas sous le numéro. */ .scx-faq-answer { padding: 0 18px 20px 64px; } .scx-faq-answer p { margin: 0; font-size: 16.5px; font-weight: 700; line-height: 1.6; color: #5F5E64; text-wrap: pretty; } @media (max-width: 520px) { .scx-faq-answer { padding-left: 18px; } } @media (prefers-reduced-motion: reduce) { .scx-faq-item, .scx-faq-num, .scx-faq-icon { transition: none; } } @media (max-width: 767px) { .scx-faq .scx-heading { font-size: 30px; } .scx-faq-question { gap: 12px; padding: 16px; } .scx-faq-question-text { font-size: 16px; line-height: 1.4; } .scx-faq-answer p { padding-left: 0; } } /* ---------- scrollix-commencer ("Commencer" / Final CTA) ---------- Built from commencer.md, a dedicated audit of Scrollix's real closing CTA banner. Per that audit this section has NO entrance animation anywhere in the real source (confirmed there via exhaustive grep of every opacity:0 in the document) — that was reproduced faithfully at first, then a [data-reveal] entrance was explicitly requested for this section anyway (see ENTRANCE_ANIMATIONS_AUDIT.md's "Comment ça marche"/ "Commencer" entry), reusing the same mechanism/timing as every other section rather than inventing a new one. The 4 video cards reuse .scx-explainer-video-card/-info/-badge/-toggle verbatim (same view/like badge + pause-toggle pattern, same 16px radius) — only the fanned/overlapping positioning below is new. scrollix-explainer-video.js (already loaded site-wide via the Explainer section's own script tag, which queries [data-video-card] across the whole document at DOMContentLoaded) wires up autoplay + the pause/play icon-swap for these cards too — no second script tag added, to avoid double-initializing the same handler. */ .scx-commencer { padding-bottom: 20px !important; } .scx-commencer-container { position: relative; display: flex; flex-direction: column; align-items: center; gap: 68px; padding: 64px 20px 50px; border-radius: 20px; /* Cards are now clipped by the container's own bottom edge (fan effect, partially cropped) rather than spilling fully visible past it. */ overflow: hidden; } .scx-commencer-bg { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: 0; } .scx-commencer-bg img { width: 100%; height: 100%; object-fit: cover; display: block; } .scx-commencer-text { position: relative; z-index: 1; max-width: 640px; text-align: center; display: flex; flex-direction: column; align-items: center; } /* Frosted-glass badge variant — deliberately NOT the sitewide coral .scx-badge, since this one sits on a photo rather than the plain page background (commencer.md §2.2/§3.3). */ .scx-commencer-badge { display: inline-flex; align-items: center; padding: 4px 10px; margin-bottom: 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.2); color: #fff; font-size: 11px; font-weight: 700; } .scx-commencer-heading { font-family: "Capriola", sans-serif; font-size: 34px; font-weight: 500; line-height: 1.2; color: #fff; /* Narrow enough to force the 2-word "Votre réussite" / "commence aujourd'hui" break the target design shows, rather than 3+1 — measured directly ("Votre réussite commence" is 395px, "commence aujourd'hui" is 351px at this font-size, so 370px sits cleanly between the two). */ /* max-width: 370px; */ margin: 0 0 16px; } .scx-commencer-subtext { font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, 0.9); margin: 0; } .scx-commencer-buttons { position: relative; z-index: 1; display: flex; flex-direction: row; align-items: center; gap: 12px; max-width: 100%; } @media (max-width: 767px) { .scx-commencer-buttons { flex-direction: column; } } /* commencer.md measures these buttons much smaller than the sitewide .scx-btn preset (42px tall, 8px/16px padding vs. the standard 52px/ 0-32px) — without this override the buttons are wide enough to overflow the container at mobile width, which then throws off the whole row's flex-centering math (pushes it off-screen to the left instead of just overflowing symmetrically/scrolling). */ .scx-commencer-buttons .scx-btn { height: 36px; padding: 6px 14px; font-size: 13px; } /* Ghost/translucent secondary button — .scx-btn-outline (white bg, dark text) already covers the primary button exactly as documented, reused unmodified; this is the one new button variant this section needs. */ .scx-commencer-btn-secondary { background: rgba(255, 255, 255, 0.1); color: #fff; box-shadow: none; } .scx-commencer-btn-secondary:hover { color: #fff; } /* Fanned/overlapping card row — commencer.md confirms real per-card sizes varying organically (not a strict grid) and a slight tilt per card; the exact rotation angles aren't recoverable from the source (computed transform read "none" at reachable DOM depth), so these are a faithful visual approximation against the reference screenshot, flagged in task.md. Pushed down far enough that the container's own overflow:hidden crops the bottom of the row — a fan tucked into the panel, not a row sitting fully visible on top of it. */ .scx-commencer-cards { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; margin-bottom: -150px; padding: 0 20px; } /* ~35% overlap between neighboring cards (roughly 320px wide each). */ .scx-commencer-card { flex: none; margin-left: -120px; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.35); } .scx-commencer-card:first-child { margin-left: 0; } /* z-index decreases left-to-right (leftmost card frontmost) so each card's own top-right view/like badges — the ones actually visible now that the pause toggle is hidden — sit in the region it overlaps INTO its right-hand neighbor, staying on top instead of being covered by it. (The reverse order was tried first specifically to protect the bottom-left pause button from occlusion; now that the toggle is hidden entirely, that constraint no longer applies, and this direction is the one that keeps every badge visible instead.) Vertical stagger order (card2 highest, then card3, then card4, then card1 lowest/frontmost) matches the relative card positions measured directly during the original commencer.md audit. */ .scx-commencer-card-1 { --scx-commencer-fan: rotate(-6deg) translateY(0); transform: var(--scx-commencer-fan); z-index: 4; } .scx-commencer-card-2 { --scx-commencer-fan: rotate(4deg) translateY(-42px); transform: var(--scx-commencer-fan); z-index: 3; } .scx-commencer-card-3 { --scx-commencer-fan: rotate(-3deg) translateY(-27px); transform: var(--scx-commencer-fan); z-index: 2; } .scx-commencer-card-4 { --scx-commencer-fan: rotate(5deg) translateY(-6px); transform: var(--scx-commencer-fan); z-index: 1; } /* The cards' entrance reveal composes with their fan transform above instead of using the plain [data-reveal="card"] lift (which would reset to transform:none on reveal and flatten the fan rotation/offset). Higher specificity than the shared [data-reveal="card"] / [data-reveal].is-visible rules, so the fan layout survives both the hidden and visible states. */ .scx-commencer-card[data-reveal] { transform: var(--scx-commencer-fan) translateY(50px); } .scx-commencer-card.a-reveal [data-reveal].is-visible { transform: var(--scx-commencer-fan); } /* Nudged in slightly further than the Explainer section's own video badges — on these smaller, tilted, tightly-overlapped cards the default 14px inset read as "floating" near the rotated top edge. */ .scx-commencer-card .scx-explainer-video-info { top: 16px; right: 16px; } /* Target design doesn't show a pause control on these cards at all — hidden here rather than removed from the markup, so autoplay/pause still works programmatically if a future request wants it back. */ .scx-commencer-card .scx-explainer-video-toggle { display: none; } @media (max-width: 991px) { .scx-commencer-heading { font-size: 30px; } } @media (max-width: 767px) { .scx-commencer-heading { font-size: 26px; } /* The container clips both axes by default already (see .scx-commencer-container above) — on mobile the cards row scrolls horizontally instead of fanning, so it still needs its own overflow-x:auto scoped to its own box (width:100% below), or the wide un-shrunk row would just overflow past the container's edge. */ .scx-commencer-cards { display: none; /* width: 100%; justify-content: flex-start; overflow-x: auto; margin-bottom: -40px; */ } .scx-commencer-card { transform: none !important; } } /* ---------- scrollix-footer ---------- Reproduced from Scrollix's real