/* ========================================================================== PROJECT151 — PAGE D'ACCUEIL 2026 -------------------------------------------------------------------------- Feuille AUTONOME de la page d'accueil (`resources/views/index.blade.php`). Elle n'est chargee que par cette page (via @section('styles')), donc elle n'alourdit aucune autre vue du site vitrine. PRINCIPES --------- 1. Tout est prefixe `.h-` et vit sous le wrapper `.p151-home-2026`. Aucune classe du theme Artistic n'est reprise ni surchargee : les deux systemes cohabitent sans se marcher dessus (le header et le footer du layout restent ceux du theme). 2. Theme SOMBRE, identite Project151 : gradient #f747f2 -> #a855f7. 3. Zero image decorative : les fonds, les cadres et les maquettes d'interface sont faits en CSS. Les seules images sont les vraies captures du produit et les vignettes YouTube. 4. Aucune dependance JS pour la mise en page (le JS ne fait qu'animer). L'accordeon FAQ est en
/ natif : il fonctionne meme si le JS ne charge pas. /!\ Le fond du est defini par le theme (image + var(--dark-color)). On le neutralise via `body:has(.p151-home-2026)` : le layout ne permet pas d'ajouter une classe au , et sans ca l'image de fond du theme transparait derriere le header (qui est en position:absolute au-dessus de notre wrapper). ========================================================================== */ /* -------------------------------------------------------------------------- 1. Jetons -------------------------------------------------------------------------- */ .p151-home-2026 { --h-bg: #0b0b0f; --h-bg-alt: #101016; --h-surface: #16161d; --h-surface-2: #1d1d26; --h-border: #26262f; --h-border-strong: #383843; --h-text: #f4f4f7; --h-muted: #9c9cad; --h-dim: #70707f; --h-pink: #f747f2; --h-purple: #a855f7; --h-grad: linear-gradient(135deg, #f747f2 0%, #a855f7 100%); --h-green: #34d399; --h-red: #f87171; --h-amber: #fbbf24; --h-radius: 16px; --h-radius-sm: 10px; background: var(--h-bg); color: var(--h-text); font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; position: relative; z-index: 1; } body:has(.p151-home-2026) { background-image: none; background-color: #0b0b0f; } /* -------------------------------------------------------------------------- 2. Primitives de mise en page -------------------------------------------------------------------------- */ .p151-home-2026 .h-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; } .p151-home-2026 .h-container--narrow { max-width: 880px; } .p151-home-2026 .h-section { padding: 96px 0; position: relative; } .p151-home-2026 .h-section--alt { background: var(--h-bg-alt); border-top: 1px solid var(--h-border); border-bottom: 1px solid var(--h-border); } .p151-home-2026 .h-section--tight { padding: 64px 0; } .p151-home-2026 .h-head { text-align: center; max-width: 780px; margin: 0 auto 56px; } .p151-home-2026 .h-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--h-muted); margin-bottom: 20px; } .p151-home-2026 .h-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--h-grad); flex: 0 0 auto; } .p151-home-2026 .h-eyebrow--danger { color: #f9a8a8; } .p151-home-2026 .h-eyebrow--danger::before { background: var(--h-red); } .p151-home-2026 .h-eyebrow--ok { color: #86efac; } .p151-home-2026 .h-eyebrow--ok::before { background: var(--h-green); } .p151-home-2026 .h-h2 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; color: var(--h-text); margin: 0 0 18px; } .p151-home-2026 .h-h3 { font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--h-text); margin: 0 0 10px; } .p151-home-2026 .h-grad-text { background: var(--h-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .p151-home-2026 .h-sub { font-size: 17px; line-height: 1.65; color: var(--h-muted); margin: 0; } .p151-home-2026 .h-sub--small { font-size: 15px; } /* Boutons ---------------------------------------------------------------- */ .p151-home-2026 .h-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 28px; border-radius: 999px; font-size: 15px; font-weight: 700; line-height: 1; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease; white-space: nowrap; } .p151-home-2026 .h-btn--primary { background: var(--h-grad); color: #fff; box-shadow: 0 10px 30px -12px rgba(247, 71, 242, 0.65); } .p151-home-2026 .h-btn--primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(247, 71, 242, 0.8); } .p151-home-2026 .h-btn--ghost { background: rgba(255, 255, 255, 0.04); border-color: var(--h-border-strong); color: var(--h-text); } .p151-home-2026 .h-btn--ghost:hover { color: #fff; background: rgba(255, 255, 255, 0.08); border-color: #4a4a58; transform: translateY(-2px); } .p151-home-2026 .h-btn__arrow { transition: transform 0.18s ease; } .p151-home-2026 .h-btn:hover .h-btn__arrow { transform: translateX(4px); } .p151-home-2026 .h-btn-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .p151-home-2026 .h-btn-row--spaced { margin-top: 34px; } .p151-home-2026 .h-center { text-align: center; } /* Reveal au scroll ------------------------------------------------------- */ .p151-home-2026 .h-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .p151-home-2026 .h-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .p151-home-2026 .h-reveal { opacity: 1; transform: none; transition: none; } } /* -------------------------------------------------------------------------- 3. Hero -------------------------------------------------------------------------- */ .p151-home-2026 .h-hero { position: relative; padding: 168px 0 88px; overflow: hidden; text-align: center; } /* Halo + quadrillage : remplacent la video de fond de l'ancienne accueil (5 Mo de MP4 decodes en boucle sur chaque visite). Cout ici : 0 requete. */ .p151-home-2026 .h-hero::before { content: ''; position: absolute; inset: -20% 0 auto; height: 780px; background: radial-gradient(60% 55% at 50% 0%, rgba(168, 85, 247, 0.22) 0%, rgba(11, 11, 15, 0) 70%), radial-gradient(40% 40% at 78% 12%, rgba(247, 71, 242, 0.16) 0%, rgba(11, 11, 15, 0) 70%); pointer-events: none; } .p151-home-2026 .h-hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px); background-size: 62px 62px; -webkit-mask-image: radial-gradient(70% 55% at 50% 25%, #000 0%, transparent 100%); mask-image: radial-gradient(70% 55% at 50% 25%, #000 0%, transparent 100%); pointer-events: none; } .p151-home-2026 .h-hero > .h-container { position: relative; z-index: 2; } .p151-home-2026 .h-typed { font-size: 15px; color: var(--h-muted); margin: 0 0 22px; min-height: 24px; } .p151-home-2026 .h-typed b { color: var(--h-text); font-weight: 700; border-bottom: 2px solid var(--h-pink); padding-bottom: 1px; } .p151-home-2026 .h-typed .h-caret { display: inline-block; width: 2px; height: 15px; background: var(--h-pink); margin-left: 2px; vertical-align: -2px; animation: h-blink 1s steps(1) infinite; } @keyframes h-blink { 50% { opacity: 0; } } .p151-home-2026 .h-hero-title { font-size: clamp(36px, 6vw, 70px); line-height: 1.06; font-weight: 800; letter-spacing: -0.03em; margin: 0 auto 26px; max-width: 15ch; } .p151-home-2026 .h-hero-lead { font-size: 18px; line-height: 1.65; color: var(--h-muted); max-width: 620px; margin: 0 auto 34px; } .p151-home-2026 .h-hero-micro { font-size: 13px; color: var(--h-dim); margin: 18px 0 0; } /* Ligne « fonctionne sur » ------------------------------------------------ */ .p151-home-2026 .h-platforms { margin: 52px 0 0; } .p151-home-2026 .h-platforms__label { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--h-dim); margin: 0 0 18px; } .p151-home-2026 .h-platforms__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; list-style: none; padding: 0; margin: 0; } .p151-home-2026 .h-platforms__list li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--h-border); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--h-muted); background: rgba(255, 255, 255, 0.02); transition: color 0.2s ease, border-color 0.2s ease; } .p151-home-2026 .h-platforms__list li:hover { color: var(--h-text); border-color: var(--h-border-strong); } .p151-home-2026 .h-platforms__list svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: 0.75; } /* Bandeau de preuve ------------------------------------------------------ */ .p151-home-2026 .h-hero-proof { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0; margin: 40px auto 0; padding: 14px 8px; border: 1px solid var(--h-border); border-radius: 14px; background: rgba(255, 255, 255, 0.02); } .p151-home-2026 .h-hero-proof__item { padding: 2px 22px; text-align: center; } .p151-home-2026 .h-hero-proof__item + .h-hero-proof__item { border-left: 1px solid var(--h-border); } .p151-home-2026 .h-hero-proof__num { display: block; font-size: 19px; font-weight: 800; line-height: 1.2; color: var(--h-text); } .p151-home-2026 .h-hero-proof__label { display: block; font-size: 12px; color: var(--h-dim); margin-top: 3px; } /* -------------------------------------------------------------------------- 4. Cadre de capture (fenetre de navigateur) -------------------------------------------------------------------------- */ .p151-home-2026 .h-shot { border: 1px solid var(--h-border-strong); border-radius: var(--h-radius); overflow: hidden; background: var(--h-surface); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.03); } .p151-home-2026 .h-shot--hero { margin-top: 64px; position: relative; } /* Le bas de la capture du hero se fond dans le fond : on montre le produit sans donner l'impression d'une image tronquee. */ .p151-home-2026 .h-shot--hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 130px; background: linear-gradient(180deg, rgba(11, 11, 15, 0) 0%, var(--h-bg) 92%); pointer-events: none; } .p151-home-2026 .h-shot__bar { display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 40px; background: var(--h-surface-2); border-bottom: 1px solid var(--h-border); } .p151-home-2026 .h-shot__dot { width: 10px; height: 10px; border-radius: 50%; background: #3d3d49; flex: 0 0 auto; } .p151-home-2026 .h-shot__url { flex: 1; margin-left: 8px; height: 24px; border-radius: 999px; background: #101016; border: 1px solid var(--h-border); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--h-dim); letter-spacing: 0.02em; } .p151-home-2026 .h-shot img { display: block; width: 100%; height: auto; } /* -------------------------------------------------------------------------- 5. Probleme / solution -------------------------------------------------------------------------- */ .p151-home-2026 .h-switch { display: inline-flex; padding: 5px; gap: 4px; border-radius: 999px; background: var(--h-surface); border: 1px solid var(--h-border); margin: 0 auto 40px; } .p151-home-2026 .h-switch__btn { appearance: none; border: 0; background: transparent; color: var(--h-muted); font-family: inherit; font-size: 14px; font-weight: 700; padding: 11px 24px; border-radius: 999px; cursor: pointer; transition: color 0.2s ease, background 0.2s ease; } .p151-home-2026 .h-switch__btn[aria-selected="true"] { color: #fff; background: var(--h-grad); } .p151-home-2026 .h-compare { max-width: 560px; margin: 0 auto; } .p151-home-2026 .h-pane[hidden] { display: none; } /* Fausse annonce marketplace (maquette 100 % CSS) ------------------------ */ .p151-home-2026 .h-listing { border: 1px solid var(--h-border); border-radius: var(--h-radius); background: var(--h-surface); overflow: hidden; } .p151-home-2026 .h-listing__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--h-border); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--h-dim); } .p151-home-2026 .h-listing__body { display: flex; gap: 16px; padding: 18px 16px; } .p151-home-2026 .h-listing__thumb { width: 84px; height: 116px; flex: 0 0 auto; border-radius: 8px; border: 1px solid var(--h-border-strong); /* Le degrade reste EN FOND, derriere l'image : si le visuel TCGdex venait a manquer (404), la vignette garde une apparence de carte au lieu d'afficher une icone d'image cassee. Meme principe pour .h-scanres__card et .h-mrow__card ci-dessous. */ background: radial-gradient(120% 80% at 50% 20%, rgba(247, 71, 242, 0.28), rgba(0, 0, 0, 0) 60%), linear-gradient(160deg, #2a2438 0%, #171722 100%); overflow: hidden; } .p151-home-2026 .h-listing__info { flex: 1; min-width: 0; } .p151-home-2026 .h-listing__title { font-size: 15px; font-weight: 700; margin: 0 0 4px; } .p151-home-2026 .h-listing__seller { font-size: 12px; color: var(--h-dim); margin: 0 0 12px; } .p151-home-2026 .h-listing__price { font-size: 24px; font-weight: 800; margin: 0; } .p151-home-2026 .h-verdict { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--h-border); font-size: 14px; font-weight: 600; } .p151-home-2026 .h-verdict--bad { background: rgba(248, 113, 113, 0.08); color: #fca5a5; } .p151-home-2026 .h-verdict--good { background: rgba(52, 211, 153, 0.08); color: #6ee7b7; } .p151-home-2026 .h-verdict__amount { font-size: 18px; font-weight: 800; } /* Encart injecte par l'extension (maquette) ------------------------------ */ .p151-home-2026 .h-badge-ext { margin: 14px 16px 0; border: 1px solid rgba(168, 85, 247, 0.45); border-radius: 12px; background: rgba(168, 85, 247, 0.07); padding: 12px 14px; } .p151-home-2026 .h-badge-ext__title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #d8b4fe; margin: 0 0 10px; } .p151-home-2026 .h-badge-ext__title svg { width: 14px; height: 14px; flex: 0 0 auto; } .p151-home-2026 .h-quote-rows { display: grid; gap: 7px; } .p151-home-2026 .h-quote-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--h-muted); } .p151-home-2026 .h-quote-row b { color: var(--h-text); font-weight: 700; } .p151-home-2026 .h-compare__note { text-align: center; font-size: 13px; color: var(--h-dim); margin: 22px 0 0; } /* -------------------------------------------------------------------------- 6. Carrousel YouTube -------------------------------------------------------------------------- */ .p151-home-2026 .h-yt { position: relative; } .p151-home-2026 .h-yt-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 24px 24px; margin: 0 -24px; scrollbar-width: none; } .p151-home-2026 .h-yt-track::-webkit-scrollbar { display: none; } .p151-home-2026 .h-yt-card { flex: 0 0 320px; scroll-snap-align: start; border: 1px solid var(--h-border); border-radius: var(--h-radius); background: var(--h-surface); overflow: hidden; text-align: left; padding: 0; cursor: pointer; font-family: inherit; color: inherit; transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; } .p151-home-2026 .h-yt-card:hover { transform: translateY(-4px); border-color: var(--h-border-strong); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.95); } /* Les enfants de la carte sont des (elle est un