/* solvanelabs.fr — anthracite profond, orbe en lumière, Clash Display. Grille de 8 px. */ @font-face { font-family: "Clash Display"; src: url(/fonts/ClashDisplay-Light.woff2) format("woff2"); font-weight: 300; font-display: swap; } @font-face { font-family: "Clash Display"; src: url(/fonts/ClashDisplay-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Cabinet Grotesk"; src: url(/fonts/CabinetGrotesk-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Cabinet Grotesk"; src: url(/fonts/CabinetGrotesk-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url(/fonts/GeistMono-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; } :root { color-scheme: dark; --bg: #121110; --bg2: #1a1817; --panel: #1b1a19; --t: #f3f1ee; --m: #b3aea8; --f: #8f8a83; /* --m ≈ 8,9:1 et --f ≈ 5,3:1 sur --bg : lisibles (AA) */ --line: rgba(255, 255, 255, .08); --line2: rgba(255, 255, 255, .16); --accent: #9fd4ff; --accent-rgb: 159, 212, 255; --accent-ink: #061019; --display: "Clash Display", system-ui, sans-serif; --text: "Cabinet Grotesk", system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, monospace; --ease: cubic-bezier(.22, 1, .36, 1); --edge: 40px; --max: 1200px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; } /* Le fond est porté par : la toile 3D (z-index -1) passe ainsi sous tout le contenu, sur tous les navigateurs */ html { background: radial-gradient(120% 80% at 70% 20%, #1c1b1a 0%, var(--bg) 55%) fixed, var(--bg); } body { color: var(--t); font: 400 17px/28px var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; } :focus-visible { outline: 1.5px solid var(--accent); outline-offset: 4px; border-radius: 8px; } ::selection { background: var(--accent); color: var(--accent-ink); } /* --- Orbe : toile fixe derrière l'ouverture et le récit --- */ #orb { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; transition: opacity .2s linear; } .orb-fallback { display: none; position: fixed; right: 12%; top: 50%; width: min(320px, 40vw); height: auto; transform: translateY(-50%); z-index: 0; opacity: .9; } .no-webgl .orb-fallback { display: block; } .no-webgl #orb { display: none; } /* --- En-tête --- */ .top { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; height: 80px; padding: 0 var(--edge); background: linear-gradient(to bottom, rgba(18, 17, 16, .85), rgba(18, 17, 16, 0)); } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 400 18px/24px var(--display); letter-spacing: .03em; min-height: 44px; } .top nav { display: flex; gap: 32px; } .top nav a { font: 400 15px/24px var(--text); color: var(--m); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; transition: color .5s var(--ease); } .top nav a:hover { color: var(--t); } main, footer { position: relative; z-index: 1; } /* --- Ouverture --- */ .hero { min-height: 100svh; max-width: var(--max); margin: 0 auto; padding: 160px var(--edge) 120px; display: flex; flex-direction: column; justify-content: center; } .kicker { margin: 0 0 32px; font: 400 13px/16px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--f); overflow: hidden; } h1 { margin: 0 0 40px; font: 300 clamp(44px, 6.2vw, 92px)/1.0 var(--display); letter-spacing: -.035em; max-width: 11.5em; } h1 .l { display: block; overflow: hidden; padding-bottom: .06em; } .hero .lead { margin: 0; max-width: 30em; font-size: 19px; line-height: 30px; color: var(--m); overflow: hidden; } /* Révélation ligne par ligne */ h1 .l > span, .kicker span, .lead span { display: inline-block; transform: translateY(105%); opacity: 0; transition: transform 1.4s var(--ease), opacity 1.4s var(--ease); } .ready .kicker span { transform: none; opacity: 1; transition-delay: .5s; } .ready h1 .l:nth-child(1) > span { transform: none; opacity: 1; transition-delay: .8s; } .ready h1 .l:nth-child(2) > span { transform: none; opacity: 1; transition-delay: 1.0s; } .ready h1 .l:nth-child(3) > span { transform: none; opacity: 1; transition-delay: 1.2s; } .ready .lead span { transform: none; opacity: 1; transition-delay: 1.6s; } .hint { position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; font: 400 12px/16px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--f); text-decoration: none; min-height: 44px; transition: opacity .8s var(--ease); } .hint i { width: 1px; height: 40px; background: linear-gradient(var(--f), transparent); animation: drip 2.4s var(--ease) infinite; transform-origin: top; } .hint.gone { opacity: 0; } .hero { position: relative; } @keyframes drip { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } /* --- Récit au défilement --- */ .approche { height: 320vh; } .approche .sticky { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; padding: 0 var(--edge); } /* Voile sombre derrière les phrases : le texte reste lisible même devant la face éclairée de la planète */ .approche .sticky::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(56% 36% at 50% 50%, rgba(18, 17, 16, .82), rgba(18, 17, 16, 0) 100%); } .say { grid-area: 1 / 1; margin: 0; max-width: 18em; text-align: center; font: 300 clamp(30px, 4.4vw, 60px)/1.12 var(--display); letter-spacing: -.02em; /* Opacité et position pilotées par le défilement (main.js) : pas de transition, pas de flou, donc aucun saut */ opacity: 0; visibility: hidden; will-change: opacity, transform; text-shadow: 0 2px 32px rgba(18, 17, 16, .7); } .say em { font-style: normal; color: var(--accent); } /* --- Sections --- */ section:not(.hero):not(.approche) { max-width: var(--max); margin: 0 auto; padding: 160px var(--edge); } h2 { margin: 0 0 24px; font: 300 clamp(40px, 5.6vw, 76px)/1.02 var(--display); letter-spacing: -.03em; } .sub { margin: 0 0 64px; color: var(--m); } .reveal { opacity: 0; transform: translateY(32px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); } .reveal.in { opacity: 1; transform: none; } /* Révélation N°01 */ .radar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 80px; align-items: center; } .eyebrow { margin: 0 0 24px; font: 400 13px/16px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .radar-text > p:not(.eyebrow) { color: var(--m); max-width: 30em; margin: 0 0 32px; font-size: 19px; line-height: 30px; } .facts { list-style: none; margin: 0 0 40px; padding: 0; display: grid; gap: 12px; } .facts li { position: relative; padding-left: 24px; font-size: 16px; line-height: 24px; color: var(--m); } .facts li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 1px; background: var(--accent); } .ctas { display: flex; flex-wrap: wrap; gap: 12px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 28px; border-radius: 999px; font: 500 16px/24px var(--text); text-decoration: none; transition: transform .6s var(--ease), box-shadow .6s var(--ease), background .6s var(--ease), border-color .6s var(--ease); } .btn.solid { background: var(--t); color: var(--bg); } .btn.solid:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0, 0, 0, .45), 0 0 0 6px rgba(var(--accent-rgb), .08); } .btn.ghost { border: 1px solid var(--line2); color: var(--t); } .btn.ghost:hover { border-color: rgba(var(--accent-rgb), .6); } .btn .arrow { transition: transform .6s var(--ease); } .btn:hover .arrow { transform: translateX(4px); } .globe-card { margin: 0; position: relative; aspect-ratio: 1; border-radius: 32px; border: 1px solid var(--line); background: radial-gradient(60% 60% at 50% 45%, rgba(var(--accent-rgb), .06), transparent 70%), var(--panel); overflow: hidden; } #mini-globe { position: absolute; inset: 0; width: 100%; height: 100%; } .globe-card figcaption { position: absolute; left: 24px; right: 24px; bottom: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font: 400 12px/16px var(--mono); color: var(--f); } .globe-card .demo { display: inline-flex; align-items: center; gap: 8px; color: var(--t); padding: 6px 12px; border-radius: 999px; background: rgba(18, 17, 16, .7); border: 1px solid var(--line2); } .globe-card .demo i { width: 6px; height: 6px; border-radius: 50%; background: #f2df9a; } /* Méthode */ .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .steps li { position: relative; padding: 40px 32px 40px; border-radius: 28px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)); overflow: hidden; transition: border-color .8s var(--ease), transform .8s var(--ease); } .steps li:hover { border-color: rgba(var(--accent-rgb), .35); transform: translateY(-4px); } .steps li:nth-child(2) { transition-delay: .12s; } .steps li:nth-child(3) { transition-delay: .24s; } .steps .n { display: block; margin-bottom: 64px; font: 300 64px/1 var(--display); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px rgba(var(--accent-rgb), .55); } .steps h3 { margin: 0 0 12px; font: 400 26px/32px var(--display); } .steps p { margin: 0; color: var(--m); font-size: 16px; line-height: 26px; } /* Final */ .final { text-align: center; display: grid; justify-items: center; } .final-logo { width: 96px; height: 96px; margin-bottom: 40px; filter: drop-shadow(0 0 40px rgba(var(--accent-rgb), .25)); } .final h2 { max-width: 14em; } .final p { margin: 0 0 40px; color: var(--m); } footer { max-width: var(--max); margin: 0 auto; padding: 40px var(--edge) 56px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); font: 400 13px/24px var(--text); color: var(--f); } /* --- Téléphone --- */ @media (max-width: 820px) { :root { --edge: 20px; } .top { height: 64px; } .top nav { gap: 16px; } .top nav a:not(:last-child) { display: none; } .hero { justify-content: flex-end; padding: 120px var(--edge) 150px; } h1 { margin-bottom: 24px; font-size: min(44px, 10.2vw); } .hero .lead { font-size: 17px; line-height: 27px; } .approche { height: 280vh; } section:not(.hero):not(.approche) { padding: 96px var(--edge); } .radar { grid-template-columns: 1fr; gap: 40px; } .globe-card { border-radius: 24px; } .steps { grid-template-columns: 1fr; gap: 16px; } .steps li { padding: 28px 24px; border-radius: 20px; } .steps .n { margin-bottom: 32px; font-size: 48px; } .orb-fallback { right: 50%; top: 26%; transform: translate(50%, -50%); width: 200px; } } /* --- Réduire les animations : tout est affiché d'emblée, rien ne bouge --- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } h1 .l > span, .kicker span, .lead span, .reveal { transform: none !important; opacity: 1 !important; transition: none !important; } .approche { height: auto; } .approche .sticky { position: static; height: auto; gap: 48px; padding: 120px var(--edge); } .say { grid-area: auto; opacity: 1 !important; visibility: visible !important; transform: none !important; } .hint i { animation: none; } .btn, .btn .arrow, .steps li { transition: none; } } /* Ouverture : accès direct à Radar Pro sous le titre */ .hero-cta { margin: 40px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; opacity: 0; transform: translateY(16px); transition: opacity 1.4s var(--ease) 1.9s, transform 1.4s var(--ease) 1.9s; } .ready .hero-cta { opacity: 1; transform: none; } .link-soft { display: inline-flex; align-items: center; min-height: 44px; color: var(--m); text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 6px; font-size: 16px; transition: color .5s var(--ease); } .link-soft:hover { color: var(--t); } @media (max-width: 820px) { .hero-cta { margin-top: 28px; } } @media (prefers-reduced-motion: reduce) { .hero-cta { opacity: 1; transform: none; transition: none; } } /* Fond : étoiles sur 3 profondeurs (js/stars.js) et grain argentique. Derrière le contenu, sans capter la souris. */ #backdrop { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; } #backdrop .stars { position: absolute; inset: 0; width: 100%; height: 100%; } #backdrop .grain { position: absolute; inset: -50%; opacity: .05; mix-blend-mode: overlay; 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }