/* ========================================================================== Eyefind — page de présentation (eyefind-presentation.php) UNIQUEMENT. Refonte complète : vitrine cinématographique inspirée des sites promotionnels de jeux AAA (esprit rockstargames.com/VI), pas une déclinaison des pages fonctionnelles du portail. Feuille de style autonome — ne dépend PAS de assets/css/style.css (plus de lien vers ce fichier dans le de cette page) : palette, reset et typographie sont définis ici, pour une identité visuelle propre à cette page et aucun risque d'effet de bord sur le reste du site. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap'); :root { --pres-bg: #0a0a0c; --pres-bg-alt: #131317; --pres-bg-alt-2: #1b1b20; --pres-text: #f5f3ee; --pres-text-muted: #a7a5a0; --pres-border: rgba(245, 243, 238, 0.14); --pres-border-soft: rgba(245, 243, 238, 0.08); --pres-accent: #a3d9eb; --pres-accent-2: #0e7492; --pres-sky-1: #241335; --pres-sky-2: #6c3661; --pres-sky-3: #e2703f; --pres-sky-4: #f6c667; --pres-radius: 4px; --pres-ease: cubic-bezier(0.16, 1, 0.3, 1); --pres-container: 5vw; } /* ---------- Reset minimal (page autonome, pas d'héritage de style.css) --- */ .pres * { box-sizing: border-box; } .pres { margin: 0; background: var(--pres-bg); color: var(--pres-text); font-family: 'Poppins', arial, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } .pres img { max-width: 100%; display: block; } .pres a { color: inherit; text-decoration: none; } .pres ul { margin: 0; padding: 0; list-style: none; } .pres svg { display: block; } /* ---------- Typo utilitaires -------------------------------------------- */ .pres-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--pres-text); } .pres-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--pres-accent); } .pres-kicker { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--pres-accent); margin-bottom: 18px; } @media (prefers-reduced-motion: reduce) { .pres * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } .pres { scroll-behavior: smooth; } /* ---------- Mascotte ------------------------------------------------------ Apparaît en bas à droite par-dessus tout le contenu (fixed), reste quelques secondes puis repart — une seule fois par chargement de page (animation-iteration-count: 1 + fill-mode: forwards, donc reste cachée une fois terminée). Il faut recharger la page pour la revoir. */ .pres-mascot { position: fixed; bottom: 18px; right: 24px; width: 84px; height: auto; z-index: 300; pointer-events: none; opacity: 0; animation: pres-mascot-pop 7s ease-in-out 1.2s 1 forwards; } @keyframes pres-mascot-pop { 0% { opacity: 0; transform: scale(0.3) translateY(24px); } 8% { opacity: 1; transform: scale(1.15) translateY(-6px); } 14% { transform: scale(1) translateY(0); } 28% { transform: translateY(-4px); } 38% { transform: translateY(0); } 50% { transform: translateY(-4px); } 60% { transform: translateY(0); } 85% { opacity: 1; transform: scale(1) translateY(0); } 100% { opacity: 0; transform: scale(0.5) translateY(20px); } } @media (prefers-reduced-motion: reduce) { .pres-mascot { display: none; } } /* ---------- Navigation --------------------------------------------------- Fixe, transparente en haut de page, gagne un fond + une bordure au défilement. Piloté par un scroll-driven animation CSS (animation-timeline) plutôt que du JS — voir @supports plus bas, repli statique sinon. */ .pres-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; padding: 18px var(--pres-container); background: linear-gradient(180deg, rgba(5, 5, 6, 0.75), transparent); border-bottom: 1px solid transparent; transition: background-color 0.3s var(--pres-ease), border-color 0.3s var(--pres-ease), padding 0.3s var(--pres-ease); } .pres-nav-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: 0.02em; } .pres-nav-logo img { height: 52px; width: auto; } /* État "scrolled" : posé par assets/js/eyefind-presentation.js, utilisé uniquement en repli sur les navigateurs sans animation-timeline (le bloc @supports ci-dessous prend le relais, sans JS, quand c'est supporté). */ .pres-nav.is-scrolled { background: rgba(10, 10, 12, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--pres-border-soft); padding-top: 10px; padding-bottom: 10px; } @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { .pres-nav { animation-name: pres-nav-solidify; animation-timeline: scroll(root); animation-range: 0px 240px; animation-fill-mode: both; } } } @keyframes pres-nav-solidify { from { background-color: rgba(10, 10, 12, 0); border-bottom-color: transparent; padding-top: 18px; padding-bottom: 18px; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); } to { background-color: rgba(10, 10, 12, 0.86); border-bottom-color: var(--pres-border-soft); padding-top: 10px; padding-bottom: 10px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } } /* ---------- Hero --------------------------------------------------------- 100vw x ~100vh, scène d'intro façon lancement de jeu AAA. */ .pres-hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 0 var(--pres-container) 64px; isolation: isolate; } /* Photo réelle de Los Santos de nuit (fournie par Aina, déposée côté serveur sur assets/img/presentation.png). Repli en simple fond sombre (pas le dégradé coucher de soleil coloré utilisé ailleurs) : le temps que l'image se charge, un aplat sombre proche du fond de page est invisible, alors qu'un dégradé violet/orange créait un flash très visible avant l'arrivée de la photo. */ .pres-hero-sky { position: absolute; inset: 0; z-index: -3; background-color: var(--pres-bg); background-image: url('../img/presentation.png'); background-size: cover; background-position: center; background-repeat: no-repeat; } .pres-hero-vignette { position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(5, 4, 6, 0.92) 0%, rgba(5, 4, 6, 0.55) 32%, transparent 60%), linear-gradient(180deg, rgba(5, 4, 6, 0.55) 0%, transparent 30%); pointer-events: none; } .pres-hero-content { position: relative; z-index: 3; max-width: 900px; } .pres-hero-title { margin: 18px 0 0; font-weight: 900; letter-spacing: -0.01em; line-height: 0.98; font-size: clamp(42px, 8vw, 108px); text-wrap: balance; text-shadow: 0 6px 40px rgba(0, 0, 0, 0.45); } .pres-hero-title-accent { color: var(--pres-accent); } .pres-hero-tagline { margin: 28px 0 0; max-width: 540px; font-size: clamp(15px, 1.4vw, 18px); color: rgba(245, 243, 238, 0.86); line-height: 1.65; } .pres-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 36px; } .pres-btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 30px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; border-radius: var(--pres-radius); border: 1px solid transparent; cursor: pointer; transition: transform 0.25s var(--pres-ease), box-shadow 0.25s var(--pres-ease), background-color 0.25s var(--pres-ease), border-color 0.25s var(--pres-ease); } .pres-btn svg { width: 16px; height: 16px; } .pres-btn:hover, .pres-btn:focus-visible { transform: translateY(-2px); } .pres-btn-primary { background: var(--pres-accent); color: #071b23; box-shadow: 0 14px 32px rgba(14, 116, 146, 0.35); } .pres-btn-primary:hover, .pres-btn-primary:focus-visible { box-shadow: 0 18px 40px rgba(14, 116, 146, 0.5); } .pres-btn-ghost { background: rgba(245, 243, 238, 0.06); border-color: var(--pres-border); color: var(--pres-text); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .pres-btn-ghost:hover, .pres-btn-ghost:focus-visible { border-color: var(--pres-text); background: rgba(245, 243, 238, 0.12); } .pres-hero-badges { position: relative; z-index: 3; display: flex; flex-wrap: wrap; gap: 28px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--pres-border-soft); } .pres-hero-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245, 243, 238, 0.65); } .pres-hero-badge svg { width: 15px; height: 15px; color: var(--pres-accent); flex-shrink: 0; } .pres-scroll-cue { position: absolute; z-index: 3; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(245, 243, 238, 0.55); } .pres-scroll-cue-line { width: 1px; height: 34px; background: linear-gradient(180deg, rgba(245, 243, 238, 0.7), transparent); animation: pres-scroll-cue 2.2s ease-in-out infinite; } @keyframes pres-scroll-cue { 0% { transform: scaleY(0); transform-origin: top; opacity: 0; } 40% { transform: scaleY(1); transform-origin: top; opacity: 1; } 60% { transform: scaleY(1); transform-origin: bottom; opacity: 1; } 100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .pres-scroll-cue-line { animation: none; } } /* ---------- Section présentation ------------------------------------------ */ .pres-intro { position: relative; padding: 140px var(--pres-container); background: linear-gradient(var(--pres-bg) 0%, var(--pres-bg) 100%), repeating-linear-gradient(0deg, rgba(245, 243, 238, 0.05) 0, rgba(245, 243, 238, 0.05) 1px, transparent 1px, transparent 64px), repeating-linear-gradient(90deg, rgba(245, 243, 238, 0.05) 0, rgba(245, 243, 238, 0.05) 1px, transparent 1px, transparent 64px); overflow: hidden; } .pres-intro-grid { position: relative; display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: 80px; align-items: end; } .pres-intro-grid > * { min-width: 0; } .pres-intro-title { margin: 0; font-size: clamp(30px, 4.4vw, 60px); font-weight: 800; line-height: 1.06; letter-spacing: -0.01em; } .pres-intro-text { position: relative; border-left: 1px solid var(--pres-accent); padding-left: 28px; } .pres-intro-text p { margin: 0; font-size: clamp(15px, 1.2vw, 17.5px); color: var(--pres-text-muted); line-height: 1.8; } /* ---------- Services ------------------------------------------------------ */ .pres-services { padding: 140px var(--pres-container) 160px; background: var(--pres-bg); } .pres-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 56px; flex-wrap: wrap; } .pres-section-head h2 { margin: 0; font-size: clamp(30px, 4vw, 54px); font-weight: 800; letter-spacing: -0.01em; } .pres-section-head-note { max-width: 360px; font-size: 14px; color: var(--pres-text-muted); line-height: 1.6; } .pres-services-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .pres-services-grid > * { min-width: 0; } .pres-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 36px 32px; min-height: 220px; border-radius: var(--pres-radius); border: 1px solid var(--pres-border-soft); background: var(--pres-bg-alt); overflow: hidden; transition: background-color 0.3s var(--pres-ease), border-color 0.3s var(--pres-ease), transform 0.3s var(--pres-ease), box-shadow 0.3s var(--pres-ease); } .pres-card-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: linear-gradient(140deg, var(--pres-accent), var(--pres-accent-2)); color: #071b23; transition: transform 0.35s var(--pres-ease); } .pres-card-icon svg { width: 26px; height: 26px; } .pres-card-index { position: absolute; top: 32px; right: 32px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--pres-text-muted); opacity: 0.6; } .pres-card h3 { margin: 10px 0 0; font-size: 22px; font-weight: 700; letter-spacing: 0.01em; } .pres-card p { margin: 0; font-size: 14.5px; color: var(--pres-text-muted); line-height: 1.65; flex: 1; } .pres-card:hover, .pres-card:focus-visible { background: var(--pres-bg-alt-2); border-color: var(--pres-accent-2); transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.35); outline: none; } .pres-card:hover .pres-card-icon, .pres-card:focus-visible .pres-card-icon { transform: translateY(-3px) scale(1.05); } /* ---------- Footer ------------------------------------------------------ */ .pres-footer { background: var(--pres-bg-alt); border-top: 1px solid var(--pres-border-soft); padding: 48px var(--pres-container) 32px; } .pres-footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--pres-border-soft); } .pres-footer-brand { display: flex; align-items: center; gap: 10px; } .pres-footer-brand img { height: 26px; width: auto; opacity: 0.85; } .pres-footer-links { display: flex; flex-wrap: wrap; gap: 24px 32px; } .pres-footer-links a { font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--pres-text-muted); transition: color 0.2s var(--pres-ease); } .pres-footer-links a:hover, .pres-footer-links a:focus-visible { color: var(--pres-text); } .pres-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; font-size: 11.5px; color: rgba(245, 243, 238, 0.4); } .pres-gtaw-badge { display: inline-flex; align-items: center; gap: 8px; color: rgba(245, 243, 238, 0.4); transition: color 0.2s var(--pres-ease); } .pres-gtaw-badge:hover, .pres-gtaw-badge:focus-visible { color: rgba(245, 243, 238, 0.7); } .pres-gtaw-badge img { height: 16px; width: auto; filter: grayscale(1); opacity: 0.8; } /* ---------- Apparition progressive au scroll ----------------------------- Repli statique (tout visible, opacity:1) tant que JS n'a pas ajouté .pres-ready sur (voir eyefind-presentation.js) — jamais de contenu invisible si le script échoue à charger. */ .pres-reveal { opacity: 1; transform: none; } body.pres-ready .pres-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--pres-ease), transform 0.8s var(--pres-ease); } body.pres-ready .pres-reveal.is-visible { opacity: 1; transform: translateY(0); } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { body.pres-ready .pres-reveal { opacity: 0; transform: translateY(28px); transition: none; animation-name: pres-reveal-in; animation-duration: 1ms; animation-fill-mode: both; animation-timeline: view(); animation-range: entry 0% entry 40%; } body.pres-ready .pres-reveal.is-visible { opacity: 0; transform: translateY(28px); } } } @keyframes pres-reveal-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { body.pres-ready .pres-reveal, body.pres-ready .pres-reveal.is-visible { opacity: 1; transform: none; transition: none; animation: none; } } /* ---------- Responsive --------------------------------------------------- */ @media (max-width: 1100px) { .pres-intro-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } } @media (max-width: 860px) { :root { --pres-container: 24px; } .pres-nav-logo img { height: 40px; } .pres-hero-badges { gap: 18px 26px; } .pres-stat { border-left: none; border-top: 1px solid var(--pres-border-soft); } .pres-stat:first-child { border-top: none; } .pres-services-grid { grid-template-columns: minmax(0, 1fr); } .pres-intro, .pres-services { padding-top: 96px; padding-bottom: 96px; } .pres-hero-palm { height: 26vh; opacity: 0.7; } } @media (max-width: 480px) { .pres-hero { padding-bottom: 40px; } .pres-hero-badges { flex-direction: column; align-items: flex-start; gap: 14px; } .pres-section-head { flex-direction: column; align-items: flex-start; } }