/* ============================================================ Kanap Landing — styles Tokens issus de design/brand.md + design-system.md ============================================================ */ /* Police Inter chargee via dans le (cf index.html) — pas d'@import render-blocking ici (l'@import serialise le telechargement apres le parse CSS). */ :root { --ink: #0B0E14; /* dark mode signature */ --ink-2: #11151f; --ink-3: #161b27; --line: rgba(255, 255, 255, 0.08); --text: #F3F4F6; --text-dim: #9aa3b2; --accent: #FFC700; /* jaune doré premium */ --accent-soft: rgba(255, 199, 0, 0.14); --radius: 16px; --maxw: 1120px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--ink); color: var(--text); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 400; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } .accent { color: var(--accent); } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .kicker { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 16px; } .section { padding: clamp(72px, 12vh, 140px) 0; } h1, h2 { font-weight: 900; line-height: 1.04; letter-spacing: -0.02em; } h2 { font-size: clamp(32px, 5vw, 56px); } /* ---- Nav ---------------------------------------------------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; backdrop-filter: blur(12px); background: linear-gradient(180deg, rgba(11,14,20,0.85), rgba(11,14,20,0)); } .nav-logo { height: 36px; width: auto; display: block; } .nav-right { display: flex; align-items: center; gap: 20px; } .nav-link { color: var(--text-dim); text-decoration: none; font-size: 14px; font-weight: 600; } .nav-link:hover { color: var(--text); } .lang-switch { display: flex; gap: 4px; } .lang-switch button { background: transparent; border: 0; cursor: pointer; color: var(--text-dim); font: inherit; font-size: 13px; font-weight: 600; padding: 4px 8px; border-radius: 8px; text-transform: uppercase; } .lang-switch button.is-active { color: var(--ink); background: var(--accent); } /* ---- Hero : pépite révélée --------------------------------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; } .hero-stage { position: absolute; inset: 0; z-index: 0; } /* mur d'affiches */ .poster-wall { position: absolute; inset: -8% -4%; z-index: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; transform: rotate(-6deg) scale(1.18); transition: filter 1.1s var(--ease), opacity 1.1s var(--ease); } .wall-col { display: flex; flex-direction: column; gap: 14px; animation: scrollCol var(--speed, 32s) linear infinite; } .wall-col[style*="--dir: -1"] { animation-direction: reverse; } .poster-wall img, .poster-wall .wall-fallback { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 10px; background: var(--ink-3); box-shadow: 0 8px 24px rgba(0,0,0,0.4); } /* tuile dégradée (fallback sans image) */ .wall-fallback { display: flex; align-items: flex-end; padding: 10px; background: linear-gradient(160deg, var(--c1, #1f2937), var(--c2, #06080c)); } .wall-fallback span { font-size: 12px; font-weight: 900; line-height: 1.1; color: rgba(255,255,255,0.85); letter-spacing: -0.01em; } @keyframes scrollCol { from { transform: translateY(0); } to { transform: translateY(-50%); } } /* voile sombre permanent pour lisibilité */ .hero-veil { position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 90% at 28% 42%, rgba(11,14,20,0.18), rgba(11,14,20,0.74) 72%), linear-gradient(90deg, rgba(11,14,20,0.88) 0%, rgba(11,14,20,0.3) 52%, rgba(11,14,20,0.55) 100%); } /* la pépite révélée */ .gem { position: absolute; z-index: 2; /* ancrée au bord droit de la colonne de contenu (max 1120px), pas au viewport */ right: max(24px, calc(50% - 536px)); top: 50%; width: clamp(170px, 20vw, 280px); transform: translateY(-50%) scale(0.92); opacity: 0; transition: opacity 0.9s var(--ease) 0.1s, transform 0.9s var(--ease) 0.1s; } .gem-card { position: relative; border-radius: 16px; /* pas d'overflow:hidden ici : le transform 3D de la parallaxe casserait le clipping (coins noirs carrés). On arrondit directement le média + le contour. */ box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 60px rgba(255,199,0,0.25); } .gem-media { position: relative; width: 100%; aspect-ratio: 2/3; background: var(--ink-3); border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,199,0,0.5); } .gem-media img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; } .gem-media .gem-fallback { display: flex; align-items: flex-end; padding: 16px; width: 100%; height: 100%; background: linear-gradient(160deg, var(--c1, #5a3a14), var(--c2, #0d0904)); } .gem-media .gem-fallback span { font-size: 22px; font-weight: 900; color: rgba(255,255,255,0.92); } .gem-glow { position: absolute; inset: -30% ; z-index: -1; background: radial-gradient(circle, rgba(255,199,0,0.35), transparent 60%); filter: blur(20px); } /* ===== Pépite — carte verre dépoli sous l'affiche ===== */ .gem-star { color: var(--accent); } .gem-title { font-size: 17px; font-weight: 900; color: #fff; line-height: 1.1; letter-spacing: -0.01em; } .gem-plat { font-size: 11px; font-weight: 700; color: var(--accent); white-space: nowrap; } .gem-undercard { margin-top: 10px; display: flex; flex-direction: column; gap: 12px; padding: 14px 15px; border-radius: 14px; background: rgba(20,25,37,0.72); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 16px 44px rgba(0,0,0,0.5); } .gem-uc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } /* les 3 signaux combinés */ .gem-signals { display: flex; flex-direction: column; gap: 9px; } .gem-sig { display: flex; align-items: center; gap: 10px; } .gem-sig-ico { flex: none; width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 13px; } .gs-taste { background: rgba(255,199,0,0.16); color: var(--accent); } .gs-team { background: rgba(168,85,247,0.18); color: #c084fc; } .gs-trend { background: rgba(56,189,140,0.18); color: #34d399; } .gem-sig-txt { display: flex; flex-direction: column; line-height: 1.2; } .gem-sig-txt b { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); } .gem-sig-txt span { font-size: 13px; font-weight: 600; color: #fff; } /* verdict Kanap en bas */ .gem-verdict { display: flex; align-items: center; gap: 7px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 13px; font-weight: 900; color: var(--accent); } .gem-verdict .gem-star { font-size: 15px; } /* état révélé : le mur s'efface, la pépite apparaît */ .hero-stage.revealed .poster-wall { filter: blur(7px) saturate(0.25) brightness(0.5); opacity: 0.55; } .hero-stage.revealed .gem { opacity: 1; transform: translateY(-50%) scale(1); } /* contenu hero — borné en vw pour ne jamais passer sous la pépite (largeurs intermédiaires) */ .hero-content { position: relative; z-index: 3; max-width: min(600px, 52vw); } .hero h1 { font-size: clamp(44px, 8vw, 88px); padding-bottom: 0.12em; } .hero-sub { margin-top: 36px; font-size: clamp(16px, 2.2vw, 20px); line-height: 1.6; color: var(--text-dim); max-width: 440px; } .hero-cta-row { margin-top: 36px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .btn-primary { display: inline-flex; align-items: center; gap: 10px; background: var(--accent); color: var(--ink); font-weight: 900; font-size: 16px; text-decoration: none; padding: 15px 28px; border-radius: 999px; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); box-shadow: 0 8px 30px rgba(255,199,0,0.3); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(255,199,0,0.45); } .cta-sub { font-size: 13px; color: var(--text-dim); } /* ---- Hero variante B : pépite centrée spotlight ------------ */ .hero-b .hero { flex-direction: column; justify-content: center; text-align: center; } .hero-b .hero .wrap { order: 2; } .hero-b .hero-cta-row { align-items: center; } .hero-b .poster-wall { transform: rotate(0deg) scale(1.25); } .hero-b .hero-veil { background: radial-gradient(56% 48% at 50% 34%, rgba(11,14,20,0.12), rgba(11,14,20,0.95) 72%), linear-gradient(180deg, rgba(11,14,20,0.7), rgba(11,14,20,0.88)); } .hero-b .gem { right: auto; left: 50%; top: 24%; transform: translate(-50%, 40px) scale(0.82); width: clamp(150px, 18vw, 230px); } .hero-b .hero-stage.revealed .gem { transform: translate(-50%, 0) scale(1); } .hero-b .hero-content { max-width: 640px; margin: clamp(280px, 34vh, 420px) auto 0; } /* ---- Problème ---------------------------------------------- */ .problem { text-align: center; } .problem h2 .accent { display: inline; } .problem .big { font-size: clamp(40px, 8vw, 92px); } /* Compteur : largeur reservee + chiffres a chasse fixe -> seuls les chiffres changent, "films & series" reste immobile (sinon la ligne centree se recentre a chaque frame quand le nombre grandit). */ .problem-count-line #problem-count { display: inline-block; min-width: 5.5ch; text-align: center; font-variant-numeric: tabular-nums; } /* Le suffixe ("movies & series." / "películas y series.") ne se coupe pas en plein milieu : il passe en entier a la ligne suivante. En dessous de 380px (tres petits telephones) on laisse le wrap naturel pour eviter un debordement. */ @media (min-width: 380px) { .problem-count-line #problem-count + span { white-space: nowrap; } } .problem-sub { margin: 28px auto 0; max-width: 560px; color: var(--text-dim); font-size: 17px; } /* ---- How : 3 signaux --------------------------------------- */ .how { text-align: center; } .signals { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .signal { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 24px; text-align: left; } .signal-ico { font-size: 28px; line-height: 1; margin-bottom: 16px; } .signal h3 { font-size: 18px; font-weight: 900; margin-bottom: 6px; } .signal p { color: var(--text-dim); font-size: 15px; } .how-promise { margin-top: 18px; font-size: 20px; font-weight: 600; } /* flux : 3 signaux → convergence → pépite */ .signals-merge { height: 90px; max-width: 600px; margin: 0 auto; } .merge-svg { width: 100%; height: 100%; display: block; overflow: visible; } .merge-line { opacity: 0.7; filter: drop-shadow(0 0 4px rgba(255,199,0,0.5)); } .merge-dot { filter: drop-shadow(0 0 6px rgba(255,199,0,0.9)); } .signals-result { margin-top: 4px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .result-gem { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--ink); background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 8px rgba(255,199,0,0.12), 0 0 40px rgba(255,199,0,0.4); } @media (max-width: 860px) { .signals-merge { height: 60px; } } /* ---- Top 3 ------------------------------------------------- */ .top { text-align: center; } .cards { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .reco-card { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-align: left; transition: transform 0.25s var(--ease), border-color 0.25s var(--ease); } .reco-card:hover { transform: translateY(-6px); border-color: rgba(255,199,0,0.4); } .reco-card.is-top { border-color: rgba(255,199,0,0.5); box-shadow: 0 0 40px rgba(255,199,0,0.12); } .reco-poster { position: relative; aspect-ratio: 2/3; background: var(--ink-3); } .reco-poster img { width: 100%; height: 100%; object-fit: cover; } .poster-fallback { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 18px; background: linear-gradient(160deg, var(--c1, #1f2937), var(--c2, #06080c)); } .poster-fallback span { font-size: 26px; font-weight: 900; color: rgba(255,255,255,0.92); line-height: 1.05; } .reco-kicker { position: absolute; top: 12px; left: 12px; z-index: 2; font-size: 11px; font-weight: 900; letter-spacing: 0.04em; background: var(--accent); color: var(--ink); padding: 4px 10px; border-radius: 999px; } .reco-card:not(.is-top) .reco-kicker { background: rgba(0,0,0,0.6); color: var(--text); } .reco-body { padding: 18px; } .reco-title { font-weight: 900; font-size: 17px; } .reco-meta { color: var(--text-dim); font-size: 13px; margin-top: 2px; } .reco-reason { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--accent); } /* ---- Expression libre -------------------------------------- */ .free { text-align: center; } .free-mock { margin: 48px auto 0; max-width: 560px; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; } .free-input { display: flex; align-items: center; gap: 12px; background: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; text-align: left; } .free-input .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; animation: pulse 1.6s ease-in-out infinite; } .free-input span { color: var(--text); font-style: italic; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } } .free-chips { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .free-chips .pill { font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(255,199,0,0.25); } /* ---- Bandeau plateformes ----------------------------------- */ .platforms-strip { padding: 40px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--ink-2); } .platforms-title { text-align: center; color: var(--text-dim); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; margin-bottom: 24px; } .platforms-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 60px); } .svod-logo { width: auto; display: block; /* uniformise tous les logos en blanc, quelle que soit leur couleur source */ filter: brightness(0) invert(1); opacity: 0.82; transition: opacity 0.2s, transform 0.2s; } .svod-logo:hover { opacity: 1; transform: translateY(-2px); } /* hauteurs par logo : quasi uniformes, Netflix & Prime remontés pour ne plus paraître petits */ /* calibré à l'œil : poids optique homogène malgré des ratios très différents */ .logo-netflix { height: clamp(20px, 2.6vw, 26px); } .logo-prime { height: clamp(26px, 3.4vw, 34px); } .logo-disney { height: clamp(26px, 3.4vw, 34px); } .logo-appletv { height: clamp(20px, 2.6vw, 26px); } .logo-max { height: clamp(20px, 2.6vw, 26px); } .logo-canal { height: clamp(22px, 2.9vw, 28px); } /* intro section expression libre */ .free-intro { max-width: 540px; margin: 18px auto 0; color: var(--text-dim); font-size: 16px; line-height: 1.6; } /* ---- Agrégation -------------------------------------------- */ .agg-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; } .agg-copy h2 { font-size: clamp(30px, 4.4vw, 48px); } .agg-sub { margin-top: 20px; color: var(--text-dim); font-size: 17px; max-width: 460px; } .agg-points { display: flex; flex-direction: column; gap: 18px; } .agg-point { display: flex; gap: 16px; align-items: flex-start; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; } .agg-ico { flex: none; width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); border: 1px solid rgba(255,199,0,0.25); } .agg-svg { width: 26px; height: 26px; color: var(--accent); display: block; } .agg-svg .dl { stroke: var(--accent); } .agg-point h3 { font-size: 16px; font-weight: 900; margin-bottom: 4px; } .agg-point p { color: var(--text-dim); font-size: 14px; } /* ---- Témoignages ------------------------------------------- */ .testi { text-align: center; } .testi-cards { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .testi-card { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; text-align: left; display: flex; flex-direction: column; gap: 20px; } .testi-card blockquote { font-size: 16px; line-height: 1.5; color: var(--text); } .testi-card figcaption { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); padding-top: 16px; } .testi-author { font-weight: 900; font-size: 15px; } .testi-role { color: var(--text-dim); font-size: 13px; } /* ---- CTA final --------------------------------------------- */ .final { text-align: center; background: radial-gradient(80% 60% at 50% 0%, rgba(255,199,0,0.08), transparent 70%); } .final h2 { font-size: clamp(38px, 7vw, 72px); } .final-sub { margin: 22px auto 0; max-width: 480px; color: var(--text-dim); font-size: 18px; } .store-badges { margin-top: 36px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .store-badge { height: 54px; transition: transform 0.2s var(--ease), opacity 0.2s; } .store-badge:hover { transform: translateY(-2px); } .waitlist { margin: 40px auto 0; max-width: 440px; display: flex; gap: 10px; } .waitlist input { flex: 1; background: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 14px 20px; color: var(--text); font: inherit; font-size: 15px; } .waitlist input:focus { outline: none; border-color: var(--accent); } .waitlist button { background: var(--accent); color: var(--ink); border: 0; cursor: pointer; font: inherit; font-weight: 900; font-size: 15px; padding: 14px 22px; border-radius: 999px; white-space: nowrap; } .waitlist-ok { margin-top: 16px; color: var(--accent); font-weight: 600; } /* ---- Footer ------------------------------------------------ */ .footer { border-top: 1px solid var(--line); padding: 48px 0; } .footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; } .footer-logo { height: 34px; } .footer-tagline { color: var(--text-dim); font-size: 14px; margin-top: 8px; } .footer-links { display: flex; gap: 20px; } .footer-links a { color: var(--text-dim); text-decoration: none; font-size: 14px; } .footer-links a:hover { color: var(--text); } /* ---- Responsive -------------------------------------------- */ @media (max-width: 860px) { .signals, .cards, .testi-cards { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; } .agg-grid { grid-template-columns: 1fr; gap: 32px; } .gem { right: 50%; top: auto; bottom: 8%; transform: translate(50%, 0) scale(0.9); width: clamp(140px, 40vw, 200px); } .hero-stage.revealed .gem { transform: translate(50%, 0) scale(1); } .hero { align-items: flex-start; padding-top: 110px; } .hero-content { text-align: left; max-width: 100%; } .nav-link { display: none; } } @media (prefers-reduced-motion: reduce) { .wall-col { animation: none; } html { scroll-behavior: auto; } } /* ---- Pages légales (legal.html / privacy.html) ------------- */ .doc-page { min-height: 100vh; } .doc-wrap { max-width: 760px; margin: 0 auto; padding: 120px 24px 80px; } .doc-back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); text-decoration: none; font-size: 14px; font-weight: 600; margin-bottom: 32px; } .doc-back:hover { color: var(--accent); } .doc-wrap h1 { font-size: clamp(32px, 6vw, 52px); margin-bottom: 8px; } .doc-updated { color: var(--text-dim); font-size: 14px; margin-bottom: 48px; } .doc-wrap h2 { font-size: clamp(20px, 3vw, 26px); margin: 40px 0 14px; } .doc-wrap h2:first-of-type { margin-top: 0; } .doc-wrap p, .doc-wrap li { color: var(--text-dim); font-size: 16px; line-height: 1.7; } .doc-wrap p { margin-bottom: 14px; } .doc-wrap ul { margin: 0 0 14px 22px; } .doc-wrap li { margin-bottom: 6px; } .doc-wrap a { color: var(--accent); } .doc-wrap strong { color: var(--text); } .doc-todo { background: var(--accent-soft); border: 1px dashed rgba(255,199,0,0.4); color: var(--accent); font-weight: 600; padding: 2px 8px; border-radius: 6px; font-size: 14px; }