/* ============================================================ * 10-page-about.css — page About restructurée (2026-07-10) * ------------------------------------------------------------ * Nouvelle structure (demande client) : hero image plein écran * (titre ABOUT bas-gauche, glow) + panneau de 3 colonnes plein * écran (beige / rouge / beige) menant aux 3 sous-pages : * Founders / Purpose / Team. L'ancien contenu narratif vit * désormais dans 10-page-purpose.css + purpose.html. * Snap-scroll CSS pur 2 panneaux (garde-fou #11 : demande client * explicite d'écrans pleine page, même mécanique que la home). * ============================================================ */ /* Un seul scroll container = ; body reste overflow:visible (sinon le body scrolle et le snap sur est inerte). */ html { overflow: auto; height: auto; } body { overflow: visible; height: auto; } .about-page { position: relative; z-index: 10; } @media (min-width: 721px) { html { scroll-snap-type: y mandatory; scroll-behavior: smooth; } .ab-panel { scroll-snap-align: start; scroll-snap-stop: always; } .site-footer { scroll-snap-align: end; } } /* ── Panel 1 : hero image plein écran ── */ .ab-hero { position: relative; min-height: 100vh; overflow: hidden; } .ab-hero-image { position: absolute; inset: 0; } .ab-hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; filter: saturate(1.02) contrast(1.02); } /* voile bas pour asseoir le titre sur l'image claire */ .ab-hero-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(30, 12, 6, 0.42) 0%, rgba(30, 12, 6, 0) 34%); pointer-events: none; } .ab-hero-title { position: absolute; left: 5vw; bottom: 6vh; z-index: 2; font-family: 'Outfit', sans-serif; font-size: clamp(44px, 7vw, 104px); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; line-height: 1; text-shadow: var(--neonGlowSoft); will-change: opacity; animation: neonBreathSoft 7s ease-in-out infinite; } /* ── Panel 2 : 3 colonnes cliquables ── */ .ab-cols { min-height: 100vh; display: flex; align-items: stretch; } .ab-col { position: relative; flex: 1 1 0; display: block; text-decoration: none; color: inherit; overflow: hidden; } .ab-col-inner { position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column; } /* image carrée = moitié haute de la colonne */ .ab-col-media { width: 100%; aspect-ratio: 1 / 1; max-height: 56vh; overflow: hidden; } .ab-col-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); } .ab-col:hover .ab-col-media img { transform: scale(1.035); } .ab-col-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2vh; padding: 4vh clamp(20px, 2.6vw, 44px) 6vh; } /* Retour Lucas 10/07 (3ᵉ passe) : frontière panneau 2 → footer en FADE — le beige des colonnes se dissout vers le fond sombre en bas de panneau (le footer suit en flux). */ .ab-col .beige-bg { -webkit-mask-image: linear-gradient(to bottom, black 0%, black 86%, transparent 100%); mask-image: linear-gradient(to bottom, black 0%, black 86%, transparent 100%); } .ab-col-title { font-family: 'Outfit', sans-serif; font-size: clamp(19px, 1.9vw, 31px); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; text-shadow: var(--neonGlowSoft); will-change: opacity; animation: neonBreathSoft 7s ease-in-out infinite; } .ab-col-text { font-family: 'DM Sans', sans-serif; font-size: clamp(12.8px, 0.95vw, 16px); font-weight: 300; line-height: 1.7; color: rgba(255, 248, 235, 0.85); max-width: 34em; } .ab-col-more { display: inline-flex; align-items: center; gap: 0.7em; font-family: 'Outfit', sans-serif; font-size: clamp(9px, 0.66vw, 11.5px); font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255, 235, 210, 0.9); } .ab-col-more .arrow { display: inline-block; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .ab-col:hover .ab-col-more .arrow { transform: translateX(4px); } /* ── Mobile : hero 100dvh, colonnes empilées en flux libre ── */ @media (max-width: 720px) { .ab-hero { min-height: 100dvh; } /* cadrage vertical : les visages (à droite du 16:9) restent dans le cadre */ /* cadrage vertical recentré sur le contact des deux visages (retour Lucas 24/07 : « mieux voir le contenu en vertical ») */ .ab-hero-image img { object-position: 78% center; } .ab-hero-title { bottom: 5vh; left: 6vw; } .ab-cols { flex-direction: column; min-height: auto; } /* flex:1 1 0 + overflow:hidden effondrait les colonnes à ~0px en pile mobile (min-size auto → 0) : la 2ᵉ sous-page était inatteignable. Détecté par sonde (scrollHeight 914px). */ .ab-col { flex: 0 0 auto; } .ab-col-inner { min-height: auto; } .ab-col-media { max-height: none; } .ab-col-body { padding: 3.6vh 6vw 5.5vh; } /* Fondu beige → sombre (retour Lucas 13/07) : en pile mobile le fondu à 86 % commençait AVANT le CTA « Discover » (sonde : fondu à 501px, CTA jusqu'à 537px sur 582). Il ne démarre plus que dans les ~40 derniers px (sous le CTA) et s'achève 2px avant le bord — supprime aussi la fine ligne beige résiduelle (seam d'arrondi du masque quand la hauteur de colonne est fractionnaire). */ .ab-col .beige-bg { -webkit-mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 42px), transparent calc(100% - 2px), transparent 100%); mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 42px), transparent calc(100% - 2px), transparent 100%); } }