/* ============================================================ GALLANTIER · HOME (refonte) · Slater CSS · v11 Page : /dev-home (puis /) TOUT le design statique vit dans le Designer (combos hm-*). Ici : uniquement les chaines descendantes que Webflow ne sait pas exprimer (ce qu'on regarde s'allume) + reduced motion. ============================================================ */ /* ---------- 1 · Member Privileges : allumage ---------- */ @media (hover: hover) and (pointer: fine) { .bento-box.grid.hm-feat .bento-div-inner:hover .bento-cover-image { filter: brightness(1) saturate(1); } .bento-box.grid.hm-feat:hover .bento-div-inner:not(:hover) .bento-cover-image { filter: brightness(0.35) saturate(0.75); } } .bento-box.grid.hm-feat .bento-div-inner.is-lit .bento-cover-image { filter: brightness(1) saturate(1); } /* ---------- 2 · About : allumage du portrait et de son anneau ---------- */ @media (hover: hover) and (pointer: fine) { .section.about .div-block-15:hover img { filter: brightness(1) saturate(1); } .section.about .div-block-15.hm-ab-fig:hover::after { border-color: rgba(201, 156, 84, 0.55); } } .section.about .div-block-15.is-lit img { filter: brightness(1) saturate(1); } .section.about .div-block-15.hm-ab-fig.is-lit::after { border-color: rgba(201, 156, 84, 0.55); } /* ---------- 2b · About : le rail des valeurs ---------- */ .hm-ab-val.is-lit { opacity: 1; border-top-color: rgba(201, 156, 84, 0.6); } @media (hover: hover) and (pointer: fine) { .hm-ab-values:hover .hm-ab-val:not(:hover) { opacity: 0.3; } } /* ---------- 3 · Refined Essentials : les portes ---------- */ /* Le texte entre pendant que la porte finit de s'ouvrir ; rien ne se referme quand la souris traverse l'espace entre deux portes (les fermetures exigent une AUTRE porte survolee) */ .hm-ess-door.is-lit { flex-grow: 2.6; } .hm-ess-door.is-lit .hm-ess-img { filter: brightness(1) saturate(1); } .hm-ess-door.is-lit .hm-ess-reveal { opacity: 1; translate: none; max-height: 320px; transition: max-height 1.05s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s, translate 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s; } @media (hover: hover) and (pointer: fine) { .hm-ess-door:hover .hm-ess-img { filter: brightness(1) saturate(1); } .hm-ess-door:hover .hm-ess-reveal { opacity: 1; translate: none; max-height: 320px; transition: max-height 1.05s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s, translate 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s; } .hm-ess-band:has(.hm-ess-door:hover) .hm-ess-door.is-lit:not(:hover) { flex-grow: 1; } .hm-ess-band:has(.hm-ess-door:hover) .hm-ess-door:not(:hover) .hm-ess-img { filter: brightness(0.35) saturate(0.75); } .hm-ess-band:has(.hm-ess-door:hover) .hm-ess-door:not(:hover) .hm-ess-reveal { opacity: 0; translate: 0px 16px; max-height: 0px; transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), translate 0.45s cubic-bezier(0.22, 1, 0.36, 1), max-height 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s; } .hm-ess-band:has(.hm-ess-door:hover) .hm-ess-door:not(:hover) .hm-ess-kw { opacity: 0.5; } } /* ---------- 4 · The Inner Circle : la derniere porte ---------- */ /* La porte EST le lien : le survol l'eveille, le libelle invite */ @media (hover: hover) and (pointer: fine) { .hm-ic-arch:hover .hm-ic-img { filter: brightness(1) saturate(1); transform: scale(1.04); } .hm-ic-arch:hover::after { border-color: rgba(201, 156, 84, 0.55); } .hm-ic-arch:hover .hm-ic-door-label { opacity: 1; } } .hm-ic-arch.is-lit .hm-ic-img { filter: brightness(1) saturate(1); } .hm-ic-arch.is-lit::after { border-color: rgba(201, 156, 84, 0.55); } .hm-ic-arch.is-lit .hm-ic-door-label { opacity: 1; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .bento-box.grid.hm-feat .bento-cover-image, .section.about .div-block-15 img, .section.about .div-block-15.hm-ab-fig::after, .hm-ab-val, .hm-ess-door, .hm-ess-img, .hm-ess-kw, .hm-ess-reveal, .hm-ic-img, .hm-ic-arch::after { transition: none; } .hm-ab-val { opacity: 1; } .hm-ess-reveal { opacity: 1; translate: none; max-height: none; } }