/* * Hero accueil "liquid glass" — nwc_child_theme * * Mission : reproduire l'architecture d'une référence visuelle (site "Mr L * Production", voir _team/research/references_visuelles/ref_accueil_liquidglass_mrlproduction.png) * SANS en copier la palette ni le contenu — adaptée intégralement à la marque * New Wine Church (jetons --nwc-*, voix propre). Décisions détaillées dans * _team/board.md [AGENT-HERO-LIQUIDGLASS]. * * Chargé UNIQUEMENT sur l'accueil (functions.php, is_front_page()) : ce * fichier ne doit jamais fuiter sur les autres pages. * * Le fond photo du hero (.nwc-hero__atmosphere--photo, images hero-10ans-bg*) * N'EST PAS TOUCHÉ ICI — uniquement ce qui flotte par-dessus. * * MàJ 18/10/2026 (demande répétée de Jordan, confirmée avec précision : * "il n'y aura plus l'image de fond") : la photo de fond + le dégradé * ambiant (.nwc-hero__atmosphere / --photo, base.css) sont retirés du * balisage du post 988 — le fond du hero devient --nwc-cream plat. Tous les * éléments ci-dessous pensés pour un fond sombre (dock, CTA, lien "watch", * bouton de défilement) sont donc repassés en couleurs foncées pour rester * lisibles sur fond clair — même logique déjà appliquée au header/aux autres * heros flattened le même jour (events-dons.css, messages-hero.css, * premiere-visite.css). Les classes .nwc-hero--photo-overlay et * .nwc-hero__atmosphere--photo ne sont plus utilisées par AUCUN post publié * après ce changement (vérifié par requête SQL directe) — leurs règles * restent dans base.css sans effet, non supprimées pour ne pas risquer une * régression ailleurs sans certitude absolue. * * MàJ 25/10/2026 (image fournie par Jordan — "New Wine Church BACKGROUND.png", * abstrait or/ambre, formes géométriques en V) : le fond crème plat ci-dessus * est remplacé par cette image, directement en background-image sur * .nwc-hero--liquidglass (pas de nouvel élément de balisage — le fond reste * géré uniquement en CSS, aucun markup du post 988 à toucher). Trois couches * de fond empilées (ordre CSS = la première est la plus au-dessus) : * 1. dégradé bas "brutal" (pas une transition discrète, demande explicite * de Jordan) — zone compressée (74%→94% de la hauteur) qui bascule vers * --nwc-cream pour une coupure nette avec la section suivante. * 2. voile cause par .nwc-hero__intro::before ci-dessous (pas ici) pour la * lisibilité du texte — gardé localisé à la colonne de texte plutôt * qu'étalé sur tout le hero, pour ne pas désaturer l'image à droite * (carte 10e anniversaire, zone encore riche en photo). * 3. l'image elle-même (hero-accueil-bg.jpg, 1920px large, convertie en * JPEG — 749,8 Ko en PNG → ~145 Ko). */ .nwc-hero--liquidglass { isolation: isolate; background-color: var(--nwc-cream); background-image: linear-gradient(180deg, transparent 0%, transparent 74%, var(--nwc-cream) 94%, var(--nwc-cream) 100%), url("../images/hero-accueil-bg.jpg"); background-size: 100% 100%, cover; background-position: center, center 42%; background-repeat: no-repeat, no-repeat; } /* MàJ 18/10/2026 : l'ancienne contrainte "EXACTEMENT 100vh/100dvh" (retour de Jordan du 9/10/2026, avec capture) datait de l'époque où le header flottait en position:fixed (overlay, aucun espace de mise en page réel) PAR-DESSUS le hero — le hero devait donc lui-même occuper tout le viewport. Depuis le retrait de la photo de fond, l'accueil n'est plus dans la liste des pages "flottantes" (inc/header.php, $is_home) — comme les 3 autres pages déjà aplaties (actualite/messages/nous-connaitre) le 18/10/2026, le header est maintenant position:sticky NORMAL, qui prend sa propre place en haut de page (mesuré en direct : ~126px à 1440px de large) et pousse le hero sous lui. Forcer height:100vh sur le hero EN PLUS de cet espace réel du header le faisait déborder sous le viewport (mesuré : bas du hero à 1025px pour un écran de 900px, carte flottante coupée). Remplacé par min-height (pas height) : le hero occupe l'espace restant du premier écran SANS jamais rogner son propre contenu si celui-ci a besoin d'un peu plus de place — plus de overflow:hidden non plus (plus de photo de fond à faire déborder proprement, rien à masquer). */ .nwc-hero--liquidglass { padding-top: var(--nwc-space-8); padding-bottom: var(--nwc-space-6); } /* Desktop (≥990px) : min-height ≈ viewport moins la hauteur réelle du header sticky (126px mesurés), pour que l'intro + la carte affiche restent visibles sans scroll sur un écran standard, sans jamais clipper le contenu si une future modif (titre plus long, etc.) a besoin d'un peu plus de hauteur — min-height s'adapte, contrairement à height+overflow. */ @media (min-width: 61.9375rem) { .nwc-hero--liquidglass { min-height: calc(100vh - 7.875rem); min-height: calc(100dvh - 7.875rem); display: flex; flex-direction: column; } /* MàJ 18/10/2026 (retour de Jordan : "beaucoup d'espace vide... le flyer devrait être bien plus grand") : l'ancienne colonne flex (intro en haut, carte poussée tout en bas à droite par margin-top:auto) laissait un vide mort entre les deux blocs. Remplacée par une grille 2 colonnes alignées sur la même ligne horizontale, centrées verticalement l'une par rapport à l'autre (texte ~55% à gauche, affiche ~45% à droite) — composition équilibrée plutôt que texte en haut / carte décalée en bas. MàJ 25/10/2026 (retour de Jordan, capture à l'appui : "agrandis le flyer pour qu'il ait la même hauteur que l'autre box" — la "box" visée est le voile clair derrière le texte, .nwc-hero__intro::before, PAS le texte lui-même : mesuré en direct à 1440px avant ce changement, ce voile fait ≈308px de haut (rect de .nwc-hero__intro + les débords d'inset sur ::before : -2rem haut/bas, -2.5rem/-3rem gauche/droite) contre ≈273px pour la carte affiche (cadre 16:9 + légende dessous), d'où l'écart visible en capture. Colonne affiche légèrement élargie (0.9fr → 0.95fr) pour donner au cadre, agrandi ci-dessous (.nwc-event-card--hero, max-width 26rem → 30rem), la place de grandir sans empiéter sur le texte — qui garde largement la sienne (lead bridé à 32ch, CTA compact, aucun retour à la ligne supplémentaire vérifié par capture après coup). */ .nwc-hero--liquidglass > .nwc-container { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); align-items: center; column-gap: var(--nwc-space-8); min-height: 0; /* width:100% explicite : sans ça, align-items:stretch (par défaut) du parent flex-column entrait en conflit avec le margin-inline:auto de .nwc-container (centrage normal, base.css) et rétrécissait/décalait le conteneur au lieu de l'étirer sur toute la largeur — constaté en mesurant le h1 à x=455 au lieu de ~192 (bord du conteneur). */ width: 100%; } .nwc-hero__intro { grid-column: 1; } .nwc-hero__float { grid-column: 2; /* Remises à zéro : margin-bottom/padding-top venaient du pinning en bas de l'ancien layout flex (carte remontée depuis le bas de l'écran) — sans objet maintenant que la carte est centrée verticalement à côté du texte, pas collée au bas du hero. */ margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; align-self: center !important; /* justify-self reste stretch (valeur par défaut) : la carte a besoin d'une largeur de référence DÉFINIE (celle de la colonne de grille) pour que son width:100%/max-width:26rem et l'aspect-ratio de l'affiche se calculent correctement — avec justify-self:center, le wrapper se réduit à son contenu (shrink-to-fit) alors que son contenu dépend lui-même de cette largeur (référence circulaire), ce qui écrasait l'affiche à 0×0px (constaté en capture). La carte se centre elle-même dans la colonne via margin-inline:auto ci-dessous. */ } } /* MàJ 25/10/2026 : le masthead mobile est redevenu position:fixed/overlay sur l'accueil (inc/header.php $is_home rétabli via is_front_page(), suite au retour du fond photo du hero, demande de Jordan "le background du hero doit aussi couvrir derrière le menu") — il ne pousse donc plus le hero, il flotte PAR-DESSUS. Sans compensation, le header (utility bar + pilule, ~147px mesurés à 390px) recouvrait le titre "Découvrir. Développer. Déployer." (constaté en capture : introTop à 32px, caché sous le header jusqu'à 147px). padding-top remis à la hauteur du header + une respiration (147px mesurés + ~1rem) pour que le contenu démarre sous la pilule, pas derrière. */ @media (max-width: 48rem) { .nwc-hero--liquidglass { padding-top: calc(147px + var(--nwc-space-4)); } } /* Mots-clés verticaux et eyebrow "01 — Accueil" : abandonnés (retour de Jordan, _team/board.md [AGENT-HERO-LIQUIDGLASS]) — jugés parasites sur le fond photo. Retirés du HTML (post 988) ; aucune règle CSS correspondante n'est donc conservée ici. */ /* Dock d'accès rapide flottant (.nwc-hero__dock) retiré du HTML du post 988 le 22/10/2026 sur demande explicite de Jordan ("supprime ça du site") ; les règles CSS correspondantes sont donc retirées ici aussi, devenues mortes. Le raccourci "Donner" reste accessible via la barre d'onglets mobile (inc/header.php) et le bouton "Donner" présent plus bas sur la page. */ /* --- Intro (titre, sous-titre court, CTA) --- Reconstruite fidèlement sur le modèle de la référence (retour de Jordan, 9/10/2026) : titre court + UNE phrase courte sous le titre (pas un pavé de texte) + bouton plein + lien "watch" avec icône lecture — remplace l'ancien bloc chapô long + 2 boutons pleine largeur retiré plus tôt (chevauchement corrigé différemment : flex-shrink + hero en 100dvh maîtrisé plutôt que suppression du bloc). */ .nwc-hero__intro { position: relative; flex-shrink: 0; } /* Voile de lisibilité localisé (MàJ 25/10/2026, fond image) : un wash crème doux derrière le titre/sous-titre/CTA, pas sur tout le hero — l'image a des zones déjà très claires (pas besoin d'assombrir) et d'autres plus saturées/orange où l'encre perdait en contraste. z-index:-1 dans le contexte d'empilement isolé créé par isolation:isolate sur .nwc-hero--liquidglass (parent) : ce voile peint au-dessus du fond du hero mais sous le texte réel de .nwc-hero__intro. Dégradé radial à bords doux (pas un bloc net) pour rester discret — l'image reste visible, elle est atténuée, pas masquée. */ .nwc-hero__intro::before { content: ""; position: absolute; z-index: -1; inset: -2rem -3rem -2rem -2.5rem; background: radial-gradient(ellipse 120% 100% at 30% 45%, oklch(97% 0.014 83 / 0.62) 0%, oklch(97% 0.014 83 / 0.34) 45%, transparent 78%); pointer-events: none; } .nwc-hero__intro .nwc-lead { margin: var(--nwc-space-3) 0 var(--nwc-space-4); max-width: 32ch; font-size: 1rem; } .nwc-hero__intro-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--nwc-space-5); } /* Bouton principal : pilule sombre + texte + flèche en cercle blanc, même esprit que .nwc-masthead__pill-cta (nav) — demande de Jordan de se rapprocher du bouton "Start a Project" de la référence (pilule noire, pas un bouton doré plein comme le reste du site). Classes dédiées au hero plutôt que .nwc-button--primary (qui reste doré partout ailleurs sur le site, décision de marque non remise en cause ici). */ .nwc-hero__cta-primary { position: relative; display: inline-flex; align-items: center; /* padding-right au repos réserve la place du cercle (absolu, donc hors flux — sans cette réserve le texte déborderait sous le cercle, cf. leçon du 25/10/2026 : premier essai avec padding-right: 0.5rem seulement, texte "fois" caché sous le cercle en permanence). */ padding: 0.5rem 2.85rem 0.5rem 1.35rem; border-radius: 999px; background: var(--nwc-ink); color: var(--nwc-cream); text-decoration: none; font-weight: 600; font-size: 0.9375rem; border: 1px solid oklch(100% 0 0 / 0.14); transition: background-color var(--nwc-duration-fast) var(--nwc-ease), padding var(--nwc-duration-base) var(--nwc-ease); } .nwc-hero__cta-primary:hover { background: var(--nwc-ink-soft); color: var(--nwc-cream); /* Le texte cède la place au cercle qui glisse à gauche (voir .nwc-hero__cta-primary-arrow:hover) : padding-left grandit d'autant que padding-right rétrécit, pour une largeur de pilule stable. */ padding-left: 2.85rem; padding-right: 0.5rem; } /* * Référence Jordan (composant React "ButtonWithIcon") : au repos le cercle * clair est collé au bord droit de la pilule ; au survol il glisse vers la * gauche en passant SOUS le texte (z-index inférieur) et la flèche pivote de * 45°. Un seul "left" animé (plutôt que right→left, deux propriétés * différentes) pour une transition fluide avec un seul moteur d'anim. * Durée/easing empruntés aux tokens globaux (--nwc-duration-base/--nwc-ease) * pour rester cohérent avec le reste du site et profiter automatiquement de * la neutralisation prefers-reduced-motion définie une seule fois dans * tokens.css (pas de media query dupliquée ici). */ .nwc-hero__cta-primary-arrow { position: absolute; top: 50%; left: calc(100% - 2.25rem - 0.4rem); z-index: 0; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--nwc-cream); color: var(--nwc-ink); transform: translateY(-50%); transition: left var(--nwc-duration-base) var(--nwc-ease); } .nwc-hero__cta-primary:hover .nwc-hero__cta-primary-arrow { left: 0.4rem; } .nwc-hero__cta-primary-arrow svg { width: 0.9rem; height: 0.9rem; transition: transform var(--nwc-duration-base) var(--nwc-ease); } .nwc-hero__cta-primary:hover .nwc-hero__cta-primary-arrow svg { transform: rotate(45deg); } /* Le texte reste au-dessus du cercle pendant le glissement (sinon la flèche passerait visuellement par-dessus les lettres). */ .nwc-hero__cta-primary > span:not(.nwc-hero__cta-primary-arrow) { position: relative; z-index: 1; } .nwc-hero__watch-link { display: inline-flex; align-items: center; gap: var(--nwc-space-3); color: var(--nwc-ink); text-decoration: none; font-weight: 600; font-size: 0.9375rem; } .nwc-hero__watch-link-icon { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1.5px solid oklch(23% 0.05 265 / 0.35); color: var(--nwc-ink); transition: background-color var(--nwc-duration-fast) var(--nwc-ease), border-color var(--nwc-duration-fast) var(--nwc-ease); } .nwc-hero__watch-link-icon svg { width: 0.85rem; height: 0.85rem; margin-left: 2px; } .nwc-hero__watch-link:hover .nwc-hero__watch-link-icon { background: var(--nwc-gold); border-color: var(--nwc-gold); color: var(--nwc-ink); } /* --- Cartes flottantes (bas du hero) --- */ .nwc-hero__float { position: relative; z-index: 1; /* margin-top:auto (pas une valeur fixe) : dans le hero en colonne flex de 100dvh, c'est cette ligne qui pousse la carte flottante en bas de l'écran quelle que soit la hauteur du viewport — voir commentaire sur .nwc-hero--liquidglass en haut de fichier. */ margin-top: auto; /* Remonte un peu la carte depuis le tout bas de l'écran (demande de Jordan, 10/10/2026, comparaison avec la référence) — laisse un peu d'air et évite qu'elle ne touche la limite overflow:hidden à 100dvh. */ margin-bottom: var(--nwc-space-6); padding-top: var(--nwc-space-4); flex-shrink: 0; /* Déplacée à droite (demande de Jordan, 10/10/2026) : alignée sous le bloc texte, la carte chevauchait le numéral "10" et le texte du thème ("Sa grâce est suffisante") en fondu derrière elle — zone déjà très chargée visuellement. align-self:flex-end sort la carte de l'étirement par défaut de la colonne flex (voir commentaire plus haut sur le hero) et la pousse dans l'espace sombre ouvert à droite, inoccupé. */ align-self: flex-end; } /* Une seule carte flottante dans le hero (contrainte 100vh sans scroll, demande de Jordan) : la carte "événement à venir" ("Featured Project" de la référence), volontairement grande plutôt que réduite — voir .nwc-hero-card--event ci-dessous. Les 2 autres cartes envisagées (statistiques, don) ont été retirées du hero : leurs informations restent disponibles juste en dessous (bandeau horaires/lieu, bannière 10 ans) et via le raccourci "Donner" du dock — pas une perte d'info, un choix de densité pour le premier écran. */ .nwc-hero__float-row { display: grid; grid-template-columns: 1fr; } @media (min-width: 40rem) { .nwc-hero__float-row { max-width: 32rem; } } /* --------------------------------------------------------------------------- * Carte affiche 10e anniversaire dans le hero (demande de Jordan, 18/10/2026, * précision ajoutée après le retrait du fond photo : "ajoute une card de * l'affiche de l'événement... pour que l'affiche soit visible dès * l'arrivée"). Réutilise VOLONTAIREMENT le même composant/classes que la * carte "À venir" plus bas sur la page et sur /10ans/ (.nwc-event-card, * .nwc-event-card__frame, events-dons.css) plutôt qu'un nouveau composant — * cohérence visuelle. Posée dans .nwc-hero__float (mécanique de * positionnement déjà vérifiée : poussée en bas du hero 100vh par * margin-top:auto en desktop, flux normal en mobile). * * 25/10/2026 (demande de Jordan) : l'affiche passe de portrait (1024×1536) * à paysage 16:9 (images/anniversaire-10ans-v2.jpg) — même image que la * card "À venir". Refonte demandée en même temps (référence capture * fournie) : l'affiche remplit ENTIÈREMENT la carte (aucune bande vide), * SANS badges "20-22 nov."/"10 ANS" superposés (markup des badges et du * panneau titre/CTA retiré du post 988), remplacés par une simple légende * sous la carte (icône calendrier + "20-22 novembre 2026", couleur accent) * — même esprit que .nwc-upcoming-card__date plus bas sur la page. Un seul * format (plus de distinction mobile "vignette côte à côte" / desktop * "poster + voile") : l'affiche pleine largeur en 16:9 partout, la légende * en flux normal dessous. */ .nwc-event-card.nwc-event-card--hero { display: block; max-width: 23rem; padding: var(--nwc-space-4); border-radius: var(--nwc-radius-lg); background: oklch(100% 0 0 / 0.6); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid oklch(23% 0.05 265 / 0.1); box-shadow: var(--nwc-shadow-lg); transition: transform var(--nwc-duration-base) var(--nwc-ease), background-color var(--nwc-duration-base) var(--nwc-ease); } a.nwc-event-card.nwc-event-card--hero:hover, a.nwc-event-card.nwc-event-card--hero:focus-visible { transform: translateY(-3px); background: oklch(100% 0 0 / 0.85); } a.nwc-event-card.nwc-event-card--hero:focus-visible { outline: 2px solid var(--nwc-gold-deep); outline-offset: 3px; } .nwc-event-card.nwc-event-card--hero .nwc-event-card__frame { width: 100%; aspect-ratio: 16 / 9; box-shadow: none; } /* 25/10/2026 (retour de Jordan, capture desktop à l'appui) : la légende "📅 20-22 NOVEMBRE 2026" en --nwc-gold-deep était quasi illisible — doré sur fond clair qui se fond avec les tons chauds de l'affiche juste au-dessus. Remplacée par un vrai bouton "S'inscrire" (→ /10ans, même markup .nwc-button/.nwc-button--primary + .nwc-button__arrow que les autres CTA du site, voir plus haut dans ce fichier pour la mécanique cercle+flèche factorisée dans components.css). La date n'est PAS reprise en texte séparé : elle est déjà lisible directement sur l'affiche (16:9, "20-22 novembre" dans le visuel) — doublon inutile vu le peu d'espace vertical disponible dans le hero 100dvh. .nwc-event-card__caption n'existe donc plus dans le markup du post 988 ; règles retirées. Centrage du nouveau bouton sous l'affiche via text-align:center sur le parent .nwc-hero__float (sans effet sur .nwc-event-card--hero, en display:block). */ .nwc-hero__float { text-align: center; } .nwc-event-card__cta { margin-top: var(--nwc-space-3); } @media (min-width: 61.9375rem) { .nwc-event-card__cta { margin-top: var(--nwc-space-4); } } @media (prefers-reduced-motion: reduce) { .nwc-event-card.nwc-event-card--hero { transition: none; } } @media (max-width: 36rem) { .nwc-event-card.nwc-event-card--hero { max-width: 100%; padding: var(--nwc-space-3); } } /* --------------------------------------------------------------------------- Desktop (≥990px) : l'affiche devient l'élément fort du hero (retour de Jordan, 18/10/2026 : "beaucoup d'espace vide... le flyer devrait être bien plus grand"). La carte-affiche pleine largeur n'a plus de fond/bordure propres (transparent) : seule l'affiche (dans son ratio 16:9 depuis le 25/10/2026) et la légende dessous comptent. MàJ 25/10/2026 (suite du retour de Jordan ci-dessus sur la grille du hero : "agrandis le flyer pour qu'il ait la même hauteur que l'autre box") : max-width 26rem (416px) → 30rem (480px) pour que le cadre 16:9 atteigne ≈270px de haut (480×9/16), proche des ≈308px du voile clair derrière le texte à gauche une fois la légende et son margin-top ajoutés (mesuré après coup, cf. rapport de mission) — largeur plafonnée par width:100% de toute façon à la largeur réelle de la colonne de grille (élargie ci-dessus à 0.95fr), donc jamais de débordement sur le texte même si 30rem dépasse la colonne sur un écran plus étroit entre 990 et ~1200px. */ @media (min-width: 61.9375rem) { .nwc-event-card.nwc-event-card--hero { position: relative; display: block; width: 100%; max-width: 30rem; margin-inline: auto; padding: 0; border-radius: var(--nwc-radius-lg); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; box-shadow: none; } /* Le survol/focus générique de .nwc-event-card (events-dons.css) lève et zoome déjà le cadre de l'affiche (transform sur __frame) — pas besoin de dupliquer un 2e mouvement sur la carte entière, ni d'un fond blanc translucide qui n'a plus de sens ici (carte transparente). */ a.nwc-event-card.nwc-event-card--hero:hover, a.nwc-event-card.nwc-event-card--hero:focus-visible { transform: none; background: transparent; } .nwc-event-card.nwc-event-card--hero .nwc-event-card__frame { box-shadow: var(--nwc-shadow-lg); } } .nwc-hero-card { position: relative; display: block; border-radius: var(--nwc-radius-lg); background: oklch(97% 0.014 83 / 0.1); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid oklch(100% 0 0 / 0.16); box-shadow: var(--nwc-shadow-lg); padding: var(--nwc-space-5); transition: transform var(--nwc-duration-base) var(--nwc-ease), background-color var(--nwc-duration-base) var(--nwc-ease); } a.nwc-hero-card { text-decoration: none; color: inherit; } a.nwc-hero-card:hover, a.nwc-hero-card:focus-visible { transform: translateY(-3px); background: oklch(97% 0.014 83 / 0.16); } a.nwc-hero-card:focus-visible { outline: 2px solid var(--nwc-gold); outline-offset: 3px; } /* Carte "événement à venir" — réutilise les infos déjà vérifiées du 10e anniversaire (voir section bannière braise juste après le hero, qui garde son propre traitement plein écran : cette carte est le "Featured Project" flottant, pas un doublon de contenu). */ .nwc-hero-card--event { display: flex; gap: var(--nwc-space-4); } .nwc-hero-card--event .nwc-hero-card__frame { position: relative; flex: 0 0 6.5rem; aspect-ratio: 3 / 4; border-radius: var(--nwc-radius-md); overflow: hidden; background-color: var(--nwc-ink); background-image: linear-gradient(155deg, var(--nwc-ember) 0%, var(--nwc-ink) 72%); } .nwc-hero-card--event .nwc-hero-card__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .nwc-hero-card--event .nwc-hero-card__body { display: flex; flex-direction: column; min-width: 0; } .nwc-hero-card__eyebrow { font-family: var(--nwc-font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nwc-gold); margin: 0 0 0.4em; } .nwc-hero-card--event .nwc-hero-card__title { font-family: var(--nwc-font-display); font-weight: 700; font-size: 1.1875rem; color: var(--nwc-cream); margin: 0 0 0.25em; line-height: var(--nwc-leading-snug); } .nwc-hero-card--event .nwc-hero-card__desc { font-size: 0.8125rem; color: oklch(97% 0.014 83 / 0.72); margin: 0 0 var(--nwc-space-3); } .nwc-hero-card__cta { margin-top: auto; font-size: var(--nwc-text-small); font-weight: 600; color: var(--nwc-gold); display: inline-flex; align-items: center; gap: 0.35em; } .nwc-hero-card__cta svg { width: 0.9em; height: 0.9em; transition: transform var(--nwc-duration-fast) var(--nwc-ease); } a.nwc-hero-card:hover .nwc-hero-card__cta svg { transform: translateX(3px); } /* Carte "statistiques" — uniquement des faits vérifiés (sources détaillées dans board.md), jamais un chiffre inventé pour compléter une grille de 3. */ .nwc-hero-card--stats { display: flex; flex-direction: column; justify-content: center; gap: var(--nwc-space-4); } .nwc-hero-card__stat { display: flex; align-items: baseline; gap: var(--nwc-space-3); } .nwc-hero-card__stat-figure { font-family: var(--nwc-font-display); font-weight: 700; font-size: 1.75rem; color: var(--nwc-cream); line-height: 1; flex: 0 0 auto; min-width: 2.75ch; } .nwc-hero-card__stat-label { font-size: var(--nwc-text-small); color: oklch(97% 0.014 83 / 0.7); line-height: var(--nwc-leading-snug); } /* Troisième élément de la carte stats : pas de 3e chiffre inventé (aucun chiffre vérifié disponible pour compléter la grille) — un repère non numérique vérifiable (lieu) à la place, icône plutôt que texte-chiffre. */ .nwc-hero-card__stat-figure--icon { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: oklch(100% 0 0 / 0.12); color: var(--nwc-gold); min-width: 2.25rem; } .nwc-hero-card__stat-figure--icon svg { width: 1.1rem; height: 1.1rem; } /* Carte CTA sombre (Donner) — seule carte volontairement plus opaque/contrastée, pour jouer le rôle d'accent final comme dans la référence. */ .nwc-hero-card--cta { display: flex; flex-direction: column; justify-content: space-between; background: var(--nwc-ember); border-color: oklch(100% 0 0 / 0.1); } a.nwc-hero-card--cta:hover, a.nwc-hero-card--cta:focus-visible { background: var(--nwc-ember-deep); } .nwc-hero-card--cta .nwc-hero-card__title { font-family: var(--nwc-font-display); font-weight: 700; font-size: var(--nwc-text-h3); color: var(--nwc-cream); margin: 0 0 0.3em; line-height: var(--nwc-leading-snug); } .nwc-hero-card--cta .nwc-hero-card__desc { font-size: var(--nwc-text-small); color: oklch(97% 0.014 83 / 0.78); margin: 0; } .nwc-hero-card--cta .nwc-hero-card__arrow { align-self: flex-end; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--nwc-cream); color: var(--nwc-ember); margin-top: var(--nwc-space-4); transition: transform var(--nwc-duration-fast) var(--nwc-ease); } .nwc-hero-card--cta .nwc-hero-card__arrow svg { width: 1rem; height: 1rem; } a.nwc-hero-card--cta:hover .nwc-hero-card__arrow { transform: translate(2px, -2px); } @media (prefers-reduced-motion: reduce) { .nwc-hero-card, .nwc-hero-card__cta svg, .nwc-hero-card--cta .nwc-hero-card__arrow { transition: none; } } /* --- Mobile : pas d'empilement en absolu, flux normal simple --- */ /* Mobile : carte compacte, thumbnail+texte CÔTE À CÔTE (pas empilés en colonne) — une mise en page empilée faisait grimper la carte à ~400px de haut, assez pour passer sous la barre d'onglets fixe (tabbar, visible <992px) au premier écran, sans avoir scrollé. Row + vignette réduite = carte nettement plus basse, sans rien couper du contenu. */ @media (max-width: 36rem) { .nwc-hero-card { padding: var(--nwc-space-4); } .nwc-hero-card--event .nwc-hero-card__frame { flex: 0 0 5.5rem; } .nwc-hero-card--event .nwc-hero-card__title { font-size: 1.125rem; } .nwc-hero-card--event .nwc-hero-card__desc { display: none; } } /* --------------------------------------------------------------------------- Indicateur de défilement : anneau animé (trait qui tourne en boucle) avec une flèche fixe au centre (retour à la version initiale, demande de Jordan, 18/10/2026 — le texte "NWC." en textPath est retiré). Même grammaire verre/or que le dock (.nwc-hero__dock), jamais réinventée. --------------------------------------------------------------------------- */ .nwc-hero__scroll { position: absolute; left: 50%; /* Plus grand et remonté (demande de Jordan, 10/10/2026) : la première taille/position finissait à moitié coupée par la limite overflow:hidden à 100dvh du hero. */ bottom: var(--nwc-space-9); transform: translateX(-50%); z-index: 2; display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; padding: 0; border-radius: 50%; background: oklch(23% 0.05 265 / 0.06); border: none; backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); color: var(--nwc-ink); cursor: pointer; transition: background-color var(--nwc-duration-fast) var(--nwc-ease), box-shadow var(--nwc-duration-fast) var(--nwc-ease), color var(--nwc-duration-fast) var(--nwc-ease), transform var(--nwc-duration-fast) var(--nwc-ease); } /* Le thème parent applique un fond plein (accent "braise") à tout