/* ============================================================ NEUROFLASH — landing "labo cognitif" Tokens + base + composants ============================================================ */ :root { /* Surfaces — thème clair */ --ink: #F4F2FB; --surface: #FFFFFF; --surface-2: #FBFAFE; --card: #FFFFFF; --card-2: #FBFAFE; --border: rgba(28, 18, 60, 0.10); --border-soft: rgba(28, 18, 60, 0.055); /* Texte */ --text: #1B1530; --text-dim: #585272; --text-faint: #9A93AE; /* Violet */ --violet: #7C3AED; --violet-light: #8B5CF6; --violet-deep: #EDE7FB; --indigo: #6366F1; --cyan: #0EA5E9; /* Etats */ --emerald: #10B981; --rose: #F43F5E; --amber: #F59E0B; /* Gradient signature */ --grad: linear-gradient(120deg, #7C3AED, #6366F1, #0EA5E9); --grad-soft: linear-gradient(120deg, rgba(124,58,237,0.12), rgba(99,102,241,0.10), rgba(14,165,233,0.10)); /* Type */ --display: "Space Grotesk", system-ui, sans-serif; --body: "Inter", system-ui, sans-serif; --serif: "Instrument Serif", Georgia, serif; /* Rythme */ --maxw: 1200px; --radius: 20px; --radius-lg: 28px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } * { box-sizing: border-box; margin: 0; padding: 0; } /* overflow-x: hidden sur = filet anti-debordement horizontal au niveau viewport. Des elements decoratifs bleedent volontairement hors cadre (halo #science en right: -140px, etagere en max-content). body { overflow-x: hidden } SEUL ne suffit pas sur iOS Safari : le pan horizontal reste possible au niveau , d'ou la page "decalable a droite". On le met aussi sur . `hidden` (et pas `clip`) pour couvrir les iOS < 16 ; pas de sticky/scroll-snap sur cette page, donc le conteneur de scroll cree par `hidden` n'a aucun effet de bord. */ html { scroll-behavior: smooth; overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--body); background: var(--ink); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; line-height: 1.5; } ::selection { background: rgba(124, 58, 237, 0.20); color: var(--violet); } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } /* ---------- Grain film ---------- */ .grain { position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: 0.02; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- Halos qui derivent ---------- */ .halo { position: absolute; border-radius: 50%; filter: blur(72px); pointer-events: none; z-index: 0; opacity: 0.7; will-change: transform; } .halo--violet { background: radial-gradient(circle, rgba(124,58,237,0.22), transparent 70%); } .halo--cyan { background: radial-gradient(circle, rgba(14,165,233,0.18), transparent 70%); } .halo--emerald{ background: radial-gradient(circle, rgba(16,185,129,0.16), transparent 70%); } @keyframes drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4%, -5%) scale(1.08); } } .halo--anim { animation: drift 18s ease-in-out infinite; } /* ============================================================ Layout ============================================================ */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } section { position: relative; z-index: 1; } .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--violet-light); display: inline-flex; align-items: center; gap: 8px; } .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 12px var(--violet); } h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; line-height: 0.98; } .serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; } .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: gradShift 8s ease infinite; } @keyframes gradShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @media (prefers-reduced-motion: reduce) { .grad-text { animation: none; } } .section-head { max-width: 640px; margin-bottom: 56px; } .section-head h2 { font-size: clamp(2rem, 4vw, 3.25rem); margin: 18px 0 16px; } .section-head p { color: var(--text-dim); font-size: 1.05rem; max-width: 52ch; } /* ============================================================ Boutons ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 0.95rem; padding: 14px 22px; border-radius: 12px; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background-color 0.3s; will-change: transform; } .btn--primary { background: var(--violet); color: #fff; box-shadow: 0 10px 26px -10px rgba(124,58,237,0.7); } .btn--primary:hover { box-shadow: 0 14px 34px -10px rgba(124,58,237,0.85); } .btn--ghost { background: var(--card); border: 1px solid var(--border); color: var(--text); } .btn--ghost:hover { background: var(--violet-deep); border-color: rgba(124,58,237,0.3); } .btn--lg { padding: 17px 28px; font-size: 1.02rem; } .btn svg { width: 17px; height: 17px; } /* Focus clavier */ :focus-visible { outline: 2px solid var(--violet-light); outline-offset: 3px; border-radius: 6px; } /* ============================================================ Navbar ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; height: 64px; z-index: 1000; display: flex; align-items: center; transition: background-color 0.3s, border-color 0.3s; border-bottom: 1px solid transparent; } .nav.scrolled { background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border-soft); } .nav__inner { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: 11px; font-family: var(--display); font-weight: 700; font-size: 1.12rem; letter-spacing: -0.02em; } .brand__mark { /* Pictogramme "cyclone éclair" (source : scripts/brand-source.png). Trait sombre sur la landing claire. background-image (pas de masque CSS) => aucun flash de carré plein avant chargement. Régénérer via `npm run gen:icons`. */ width: 28px; height: 28px; background: url(/logo-mark-dark.png) center / contain no-repeat; } .nav__links { display: flex; align-items: center; gap: 30px; font-size: 0.92rem; color: var(--text-dim); } .nav__links a { transition: color 0.2s; } .nav__links a:hover { color: var(--text); } .nav__cta { display: flex; align-items: center; gap: 14px; } .nav__login { font-size: 0.92rem; color: var(--text-dim); transition: color 0.2s; } .nav__login:hover { color: var(--text); } .nav__btn { padding: 9px 16px; font-size: 0.88rem; border-radius: 10px; } @media (max-width: 860px) { .nav__links, .nav__login { display: none; } } /* Scroll progress */ .progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; z-index: 1001; background: var(--grad); box-shadow: 0 0 12px rgba(99,102,241,0.7); } /* ============================================================ Hero — le grand transfert ============================================================ */ .hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 92px 0 0; overflow: hidden; text-align: center; } /* Constellation ambiante en fond plein cadre */ .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.6; } .hero__inner { position: relative; z-index: 3; width: 100%; max-width: 920px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; align-items: center; } .hero h1 { font-size: clamp(3rem, 9vw, 7rem); line-height: 0.92; margin: 16px 0 0; } .hero h1 .grad-text { padding-right: 0.06em; } .hero__sub { font-size: clamp(1.1rem, 1.7vw, 1.45rem); color: var(--text-dim); max-width: 32ch; margin: 6px auto 26px; line-height: 1.4; } .hero__cta { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; } /* La scène de chute, coeur du hero */ .hero__stage { position: relative; width: min(720px, 92vw); height: 300px; margin: 6px auto 0; z-index: 2; } /* Étagère Studyflash en bas du hero */ .hero__shelf { position: relative; z-index: 2; width: 100%; margin-top: 30px; padding-bottom: 30px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } @media (max-width: 760px) { .hero { min-height: auto; padding: 104px 0 0; } .hero__stage { height: 250px; } } /* ============================================================ Preuve sociale + marquee ============================================================ */ .proof { padding: 24px 0 8px; } .proof__row { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; color: var(--text-faint); font-size: 0.9rem; } .proof__stat { display: flex; align-items: center; gap: 9px; } .proof__stat b { color: var(--text); font-family: var(--display); font-weight: 700; font-size: 1.05rem; } .proof__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-faint); opacity: 0.5; } @media (max-width: 700px) { .proof__dot { display: none; } .proof__row { gap: 18px; } } .marquee { margin-top: 38px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee__track { display: flex; gap: 14px; width: max-content; animation: marquee 38s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } } .chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--text-dim); font-size: 0.9rem; white-space: nowrap; } .chip__d { width: 6px; height: 6px; border-radius: 50%; } /* ============================================================ Sections génériques ============================================================ */ .band { padding: 110px 0; } .band--tight { padding: 80px 0; } /* ---- Bento ---- */ .bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(190px, auto); gap: 18px; } .tile { position: relative; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); padding: 28px; overflow: hidden; transition: transform 0.4s var(--ease), border-color 0.4s; transform-style: preserve-3d; will-change: transform; } .tile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(124,58,237,0.10), transparent 60%); opacity: 0; transition: opacity 0.4s; pointer-events: none; } .tile { box-shadow: 0 14px 34px -22px rgba(28,18,60,0.35); } .tile:hover { border-color: rgba(124,58,237,0.30); box-shadow: 0 22px 46px -22px rgba(124,58,237,0.4); } .tile:hover::before { opacity: 1; } .tile__icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--border); margin-bottom: 18px; } .tile__icon svg { width: 20px; height: 20px; } .tile h3 { font-size: 1.32rem; margin-bottom: 10px; } .tile p { color: var(--text-dim); font-size: 0.96rem; } .tile--wide { grid-column: span 2; } .tile--tall { grid-row: span 2; } .tile__big { font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: 1; letter-spacing: -0.03em; } @media (max-width: 860px) { .bento { grid-template-columns: 1fr; } .tile--wide, .tile--tall { grid-column: auto; grid-row: auto; } } /* ---- Reveal ---- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal[data-d="1"] { transition-delay: 0.08s; } .reveal[data-d="2"] { transition-delay: 0.16s; } .reveal[data-d="3"] { transition-delay: 0.24s; } .reveal[data-d="4"] { transition-delay: 0.32s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }