/* ========================================================================== 🍯 LA RUCHE 31 🐝 — assets/gate.css PAGE D'ENTRÉE (Ă©cran d'accueil + bouton « ENTRER »). Feuille autonome : Ă  charger UNIQUEMENT sur la page d'entrĂ©e. Aucune image externe, aucun CDN, aucune police distante. 100 % CSS. SOMMAIRE 1. Jetons de marque (couleurs, or mĂ©tallique, typo, rythme) 2. Base document (plein Ă©cran, zĂ©ro scroll, safe-areas Telegram) 3. Conteneur plein Ă©cran .g-gate 4. Fond d'ambiance .g-bg / .g-halo / .g-comb / .g-vignette 5. ScĂšne / colonne centrale .g-stage 6. Visuel hero.jpg encadrĂ© .g-hero / .g-hero__img / .g-hero__gloss 7. Bloc identitĂ© .g-id / .g-title / .g-sub / .g-sign 8. Ligne d'arguments .g-args / .g-arg 9. Bouton ENTRER .g-enter / .g-enter__label 10. Liens discrets .g-links / .g-link / .g-link__sep 11. Animations (cascade d'arrivĂ©e + 1 seule boucle) 12. Adaptations d'Ă©cran (trĂšs petit, paysage, trĂšs large) 13. prefers-reduced-motion ========================================================================== */ /* ========================================================================== 1. JETONS DE MARQUE ========================================================================== */ .g-gate, :root{ /* --- Palette imposĂ©e --- */ --r-noir:#0B0A07; --r-noir-2:#141109; --r-or:#F5B31A; --r-or-clair:#FFD966; --r-or-fonce:#B87A0B; --r-miel:#E8A317; --r-creme:#F7EEDC; /* --- DĂ©rivĂ©s : arĂȘtes et ombres (noir CHAUD, jamais bleutĂ©) --- */ --g-arete:#7A4E07; /* arĂȘte basse du bouton (relief 3D) */ --g-ombre:rgba(10,7,2,.62); /* ombre portĂ©e chaude */ --g-encre:#2A1B02; /* texte posĂ© SUR l'or */ /* --- Or MÉTALLIQUE : dĂ©gradĂ© multi-arrĂȘts avec Ă©clat quasi blanc --- */ --g-or-metal:linear-gradient( 135deg, #8F5E08 0%, var(--r-or-fonce) 12%, var(--r-miel) 26%, var(--r-or) 38%, #FFF6D6 49%, /* Ă©clat quasi blanc */ var(--r-or-clair) 58%, var(--r-or) 70%, var(--r-miel) 82%, var(--r-or-fonce) 94%, #9A6609 100% ); /* --- Or LIQUIDE : version bombĂ©e pour les surfaces cliquables --- */ --g-or-liquide:linear-gradient( 180deg, #FFE9A8 0%, var(--r-or-clair) 14%, var(--r-or) 42%, var(--r-miel) 66%, var(--r-or-fonce) 92%, #A46C09 100% ); /* --- Or pour le lettrage (clip sur texte) --- */ --g-or-texte:linear-gradient( 180deg, #FFF4CF 0%, var(--r-or-clair) 22%, var(--r-or) 46%, var(--r-miel) 64%, var(--r-or-fonce) 88%, #8F5E08 100% ); /* --- Typographie (pile systĂšme uniquement) --- */ --g-font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --g-font-display:"Segoe UI Black","Segoe UI","Trebuchet MS",system-ui,-apple-system,Roboto,Arial,sans-serif; /* --- Rythme vertical : tout est fluide pour ne JAMAIS dĂ©border --- */ --g-gap:clamp(8px, 2.05dvh, 20px); --g-pad-x:clamp(16px, 6vw, 30px); --g-pad-y:clamp(10px, 2.4dvh, 26px); /* --- Taille du visuel carrĂ© : bornĂ©e par la hauteur ET la largeur --- */ --g-hero-size:min(40dvh, 70vw, 320px); /* --- Safe-areas (Telegram / encoches) --- */ --g-safe-top:env(safe-area-inset-top, 0px); --g-safe-bottom:env(safe-area-inset-bottom, 0px); --g-safe-left:env(safe-area-inset-left, 0px); --g-safe-right:env(safe-area-inset-right, 0px); } /* ========================================================================== 2. BASE DOCUMENT — plein Ă©cran, aucun dĂ©filement possible ========================================================================== */ html:has(.g-gate), html:has(.g-gate) body{ height:100%; margin:0; padding:0; overflow:hidden; /* garantie « un seul Ă©cran » */ overscroll-behavior:none; background:var(--r-noir); } /* Repli pour les navigateurs sans :has() — la classe .g-body sur fait foi. */ body.g-body{ height:100%; margin:0; padding:0; overflow:hidden; overscroll-behavior:none; background:var(--r-noir); } /* Le conteneur lui-mĂȘme DOIT ĂȘtre en border-box : sinon son padding s'ajoute Ă  100dvh et l'Ă©cran dĂ©passe la hauteur visible. */ .g-gate, .g-gate *, .g-gate *::before, .g-gate *::after{ box-sizing:border-box; } /* ========================================================================== 3. CONTENEUR PLEIN ÉCRAN ========================================================================== */ .g-gate{ position:relative; isolation:isolate; display:flex; align-items:center; justify-content:center; width:100%; height:100dvh; min-height:100dvh; max-height:100dvh; overflow:hidden; /* dernier rempart anti-dĂ©bordement */ padding: calc(var(--g-pad-y) + var(--g-safe-top)) calc(var(--g-pad-x) + var(--g-safe-right)) calc(var(--g-pad-y) + var(--g-safe-bottom)) calc(var(--g-pad-x) + var(--g-safe-left)); background:var(--r-noir); color:var(--r-creme); font-family:var(--g-font); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none; } /* ========================================================================== 4. FOND D'AMBIANCE — halos de miel + nid d'abeille CSS + vignetage ========================================================================== */ .g-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; /* Noir CHAUD : le fond glisse vers le brun/miel, jamais vers le bleu. */ background: radial-gradient(120% 82% at 50% 8%, rgba(232,163,23,.16) 0%, rgba(232,163,23,0) 62%), linear-gradient(180deg, var(--r-noir-2) 0%, var(--r-noir) 52%, #060503 100%); } /* 4.1 — Halos de miel (statiques, aucun filtre coĂ»teux) */ .g-halo{ position:absolute; display:block; border-radius:50%; pointer-events:none; } .g-halo--1{ /* coucher de soleil, en haut */ width:min(150vw, 620px); aspect-ratio:1; top:-34vw; left:50%; transform:translateX(-50%); background:radial-gradient(circle at 50% 50%, rgba(245,179,26,.30) 0%, rgba(232,163,23,.14) 38%, rgba(184,122,11,0) 70%); } .g-halo--2{ /* coulĂ©e chaude, en bas */ width:min(160vw, 680px); aspect-ratio:1; bottom:-42vw; left:50%; transform:translateX(-50%); background:radial-gradient(circle at 50% 50%, rgba(245,179,26,.20) 0%, rgba(184,122,11,.09) 44%, rgba(184,122,11,0) 72%); } /* 4.2 — Texture nid d'abeille, 100 % CSS (dĂ©gradĂ©s coniques rĂ©pĂ©tĂ©s) */ .g-comb{ --s:26px; /* pas de la trame */ position:absolute; inset:0; opacity:.20; background: repeating-conic-gradient(from 30deg, rgba(0,0,0,0) 0 60deg, rgba(245,179,26,.26) 0 120deg) calc(.5 * var(--s)) calc(.5 * var(--s) * .577), repeating-conic-gradient(from 30deg, rgba(232,163,23,.13) 0 60deg, rgba(0,0,0,0) 0 120deg); background-size:var(--s) calc(var(--s) * .577); /* La trame se dissout sur les bords : on ne veut pas d'un damier plein Ă©cran. */ -webkit-mask-image:radial-gradient(118% 76% at 50% 40%, #000 0%, rgba(0,0,0,.55) 44%, transparent 74%); mask-image:radial-gradient(118% 76% at 50% 40%, #000 0%, rgba(0,0,0,.55) 44%, transparent 74%); } /* 4.3 — Vignetage : ramĂšne l'Ɠil au centre, assombrit les angles */ .g-vignette{ position:absolute; inset:0; background: radial-gradient(112% 78% at 50% 46%, rgba(0,0,0,0) 42%, rgba(6,5,3,.55) 78%, rgba(6,5,3,.86) 100%); } /* ========================================================================== 5. SCÈNE — colonne centrale, rythme fluide ========================================================================== */ .g-stage{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--g-gap); width:100%; max-width:430px; height:100%; min-height:0; /* autorise la compression en flex */ text-align:center; } /* ========================================================================== 6. VISUEL hero.jpg — cadre dorĂ©, reflets, filet de miel qui coule ========================================================================== */ .g-hero{ position:relative; flex:0 0 auto; width:var(--g-hero-size); max-width:100%; aspect-ratio:1 / 1; /* image CARRÉE */ margin:0; padding:clamp(2px, .7vw, 3px); /* Ă©paisseur du cadre dorĂ© */ border-radius:clamp(18px, 6vw, 26px); background:var(--g-or-metal); /* le cadre EST le dĂ©gradĂ© mĂ©tallique */ box-shadow: 0 0 0 1px rgba(122,78,7,.75), 0 14px 34px var(--g-ombre), 0 2px 0 rgba(255,246,214,.28) inset; } .g-hero__img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:calc(clamp(18px, 6vw, 26px) - 3px); background:var(--r-noir-2); } /* 6.1 — Reflets : lustre diagonal + halo interne, entiĂšrement statiques */ .g-hero__gloss{ position:absolute; inset:clamp(2px, .7vw, 3px); border-radius:calc(clamp(18px, 6vw, 26px) - 3px); pointer-events:none; overflow:hidden; background: linear-gradient(122deg, rgba(255,255,255,.20) 0%, rgba(255,246,214,.09) 16%, rgba(255,255,255,0) 38%), radial-gradient(78% 52% at 50% 106%, rgba(245,179,26,.22) 0%, rgba(245,179,26,0) 68%); box-shadow: inset 0 1px 0 rgba(255,246,214,.42), inset 0 -14px 26px rgba(10,7,2,.42); } /* 6.2 — Filet de miel qui coule sous le cadre (dĂ©cor + transition visuelle) */ .g-hero::after{ content:""; position:absolute; top:100%; left:50%; width:2px; height:clamp(12px, 2.2dvh, 20px); margin-left:-1px; border-radius:0 0 2px 2px; transform-origin:50% 0; background:linear-gradient(180deg, var(--r-or-clair) 0%, var(--r-or) 44%, var(--r-or-fonce) 84%, rgba(184,122,11,0) 100%); animation:g-coule 320ms cubic-bezier(.22,.61,.36,1) 300ms both; } /* ========================================================================== 7. IDENTITÉ — nom de marque, sous-titre, signature ========================================================================== */ .g-id{ display:flex; flex-direction:column; align-items:center; gap:clamp(3px, .7dvh, 7px); margin:0; } /* 7.1 — « LA RUCHE 31 » : lettrage or mĂ©tallique */ .g-title{ margin:0; font-family:var(--g-font-display); font-size:clamp(27px, 8.6vw, 41px); font-weight:900; line-height:1.02; letter-spacing:.055em; text-transform:uppercase; white-space:nowrap; background:var(--g-or-texte); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; /* L'ombre est portĂ©e par l'Ă©lĂ©ment (le clip texte interdit text-shadow). */ filter: drop-shadow(0 1px 0 rgba(122,78,7,.90)) drop-shadow(0 6px 16px rgba(245,179,26,.20)); } .g-title__num{ /* Le « 31 » reste dans le mĂȘme or, juste un cran plus clair. */ background:linear-gradient(180deg, #FFFBEC 0%, var(--r-or-clair) 46%, var(--r-or) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } /* 7.2 — « CATALOGUE OFFICIEL » : filet + lettrage espacĂ© */ .g-sub{ margin:0; font-size:clamp(9.5px, 2.9vw, 12px); font-weight:700; letter-spacing:.34em; text-indent:.34em; /* compense le letter-spacing final */ text-transform:uppercase; color:var(--r-or-clair); opacity:.92; } /* 7.3 — Signature de maison */ .g-sign{ margin:0; font-size:clamp(10.5px, 3.15vw, 13px); font-style:italic; line-height:1.3; letter-spacing:.012em; color:var(--r-creme); opacity:.66; } /* ========================================================================== 8. LIGNE D'ARGUMENTS ========================================================================== */ .g-args{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(5px, 1.6vw, 9px); margin:0; padding:0; list-style:none; max-width:100%; } .g-arg{ display:inline-flex; align-items:center; gap:.35em; padding:clamp(4px, 1dvh, 7px) clamp(6px, 2.1vw, 10px); border:1px solid rgba(245,179,26,.24); border-radius:999px; background:linear-gradient(180deg, rgba(245,179,26,.10), rgba(184,122,11,.05)); box-shadow:inset 0 1px 0 rgba(255,246,214,.10); font-size:clamp(9px, 2.6vw, 11px); font-weight:600; letter-spacing:.015em; white-space:nowrap; color:var(--r-creme); opacity:.92; } /* ========================================================================== 9. BOUTON « ENTRER » — or liquide, arĂȘte basse foncĂ©e, enfoncement C'est l'Ă©lĂ©ment le PLUS LUMINEUX de l'Ă©cran. ========================================================================== */ .g-enter{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:100%; max-width:340px; min-height:clamp(54px, 7.6dvh, 64px); /* jamais sous 54px */ margin-top:clamp(1px, .6dvh, 6px); padding:0 24px; border:0; border-radius:clamp(14px, 4.4vw, 18px); background:var(--g-or-liquide); color:var(--g-encre); font-family:var(--g-font-display); font-size:clamp(15px, 4.6vw, 19px); font-weight:900; letter-spacing:.19em; text-indent:.19em; text-transform:uppercase; text-decoration:none; cursor:pointer; touch-action:manipulation; -webkit-appearance:none; appearance:none; /* Relief 3D : lustre en haut, arĂȘte sombre en bas, socle massif. */ box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 2px 6px rgba(255,255,255,.30), inset 0 -4px 0 rgba(122,78,7,.42), /* arĂȘte basse plus foncĂ©e */ 0 4px 0 var(--g-arete), /* socle : le bouton a une tranche */ 0 6px 2px rgba(10,7,2,.40), 0 12px 26px rgba(245,179,26,.24), 0 16px 34px var(--g-ombre); transition: transform 90ms cubic-bezier(.4,0,.2,1), box-shadow 90ms cubic-bezier(.4,0,.2,1), filter 160ms ease; } .g-enter__label{ position:relative; z-index:2; display:block; /* LĂ©ger relief typographique, comme frappĂ© dans le mĂ©tal. */ text-shadow:0 1px 0 rgba(255,246,214,.45); } /* 9.1 — Lueur qui respire : SEULE animation en boucle de l'Ă©cran */ .g-enter::after{ content:""; position:absolute; inset:-9px; z-index:-1; border-radius:inherit; pointer-events:none; background:radial-gradient(58% 78% at 50% 50%, rgba(245,179,26,.42) 0%, rgba(232,163,23,.16) 52%, rgba(232,163,23,0) 78%); opacity:.55; animation:g-respire 4.4s ease-in-out 1s infinite; } /* 9.2 — Reflet liquide fixe sur la moitiĂ© haute */ .g-enter::before{ content:""; position:absolute; inset:2px 2px auto 2px; height:44%; border-radius:calc(clamp(14px, 4.4vw, 18px) - 3px) calc(clamp(14px, 4.4vw, 18px) - 3px) 60% 60% / 100% 100% 22px 22px; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.52) 0%, rgba(255,246,214,.16) 58%, rgba(255,255,255,0) 100%); } /* 9.3 — Enfoncement au toucher : le bouton s'assoit sur son socle */ .g-enter:active{ transform:translateY(4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 3px 10px rgba(122,78,7,.40), inset 0 -2px 0 rgba(122,78,7,.55), 0 0 0 var(--g-arete), 0 2px 8px rgba(10,7,2,.50), 0 4px 14px rgba(245,179,26,.18); filter:saturate(1.06) brightness(.99); } @media (hover:hover){ .g-enter:hover{ filter:brightness(1.04) saturate(1.04); } } .g-enter:focus-visible{ outline:2px solid var(--r-or-clair); outline-offset:4px; } /* ========================================================================== 10. LIENS DISCRETS ========================================================================== */ .g-links{ display:flex; align-items:center; justify-content:center; gap:clamp(6px, 2vw, 10px); margin-top:clamp(0px, .4dvh, 4px); } .g-link{ padding:2px 2px; border-bottom:1px solid rgba(245,179,26,.28); font-size:clamp(9.5px, 2.9vw, 12px); font-weight:600; letter-spacing:.05em; text-decoration:none; color:var(--r-or-clair); opacity:.70; transition:opacity 160ms ease, border-color 160ms ease; } .g-link:active, .g-link:focus-visible{ opacity:1; border-color:var(--r-or-clair); } @media (hover:hover){ .g-link:hover{ opacity:1; border-color:var(--r-or-clair); } } .g-link__sep{ font-size:clamp(9.5px, 2.9vw, 12px); color:var(--r-or-fonce); opacity:.75; } /* ========================================================================== 11. ANIMATIONS --------------------------------------------------------------------------- Cascade d'arrivĂ©e : 7 temps, dernier image Ă  900 ms — jamais plus. Aucun Ă©tat initial n'est Ă©crit sur les Ă©lĂ©ments eux-mĂȘmes : tout vit dans les @keyframes avec fill-mode `both`. Ainsi, si les animations sont coupĂ©es (§13), la page reste parfaitement lisible. UNE SEULE boucle sur tout l'Ă©cran : `g-respire` (lueur du bouton). ========================================================================== */ @keyframes g-monte{ /* le visuel monte et se pose */ from{ opacity:0; transform:translate3d(0, 16px, 0) scale(.965); } to { opacity:1; transform:translate3d(0, 0, 0) scale(1); } } @keyframes g-coule{ /* l'or qui coule sous le cadre */ from{ transform:scaleY(0); opacity:0; } 30% { opacity:1; } to { transform:scaleY(1); opacity:1; } } @keyframes g-apparait{ /* montĂ©e douce du texte */ from{ opacity:0; transform:translate3d(0, 10px, 0); } to { opacity:1; transform:translate3d(0, 0, 0); } } @keyframes g-pose{ /* le bouton se pose avec un rebond retenu */ from{ opacity:0; transform:translate3d(0, 14px, 0) scale(.97); } 70% { opacity:1; transform:translate3d(0, -2px, 0) scale(1.008); } to { opacity:1; transform:translate3d(0, 0, 0) scale(1); } } @keyframes g-respire{ /* SEULE boucle : lueur trĂšs discrĂšte */ 0%, 100%{ opacity:.42; transform:scale(.985); } 50% { opacity:.72; transform:scale(1.02); } } /* 11.1 — Chronologie de la cascade */ .g-hero { animation:g-monte 420ms cubic-bezier(.22,.61,.36,1) 40ms both; } /* .g-hero::after → g-coule 320ms @300ms (dĂ©clarĂ© en §6.2) */ .g-title { animation:g-apparait 360ms cubic-bezier(.22,.61,.36,1) 340ms both; } .g-sub { animation:g-apparait 340ms cubic-bezier(.22,.61,.36,1) 420ms both; } .g-sign { animation:g-apparait 340ms cubic-bezier(.22,.61,.36,1) 470ms both; } .g-args { animation:g-apparait 320ms cubic-bezier(.22,.61,.36,1) 520ms both; } .g-enter { animation:g-pose 320ms cubic-bezier(.22,.61,.36,1) 560ms both; } .g-links { animation:g-apparait 260ms cubic-bezier(.22,.61,.36,1) 640ms both; } /* Fin de cascade : 640 + 260 = 900 ms. */ /* 11.2 — Le fond ne s'anime pas : il fond, une fois. */ .g-bg{ animation:g-apparait 500ms ease-out 0ms both; } /* ========================================================================== 12. ADAPTATIONS D'ÉCRAN ========================================================================== */ /* 12.1 — Petits tĂ©lĂ©phones (320×568) : on serre le rythme, on gagne des pixels */ @media (max-height:600px), (max-width:340px){ .g-gate{ --g-gap:clamp(6px, 1.6dvh, 12px); --g-hero-size:min(36dvh, 64vw, 240px); } .g-sign{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; } .g-comb{ opacity:.14; } } /* 12.2 — TrĂšs petite hauteur / paysage : le visuel cĂšde la place au bouton */ @media (max-height:460px){ .g-gate{ --g-hero-size:min(34dvh, 32vw, 170px); --g-pad-y:8px; } .g-sub, .g-sign{ display:none; } .g-args{ display:none; } .g-comb{ display:none; } } /* 12.3 — Grands tĂ©lĂ©phones (430×932) : on respire sans devenir clinquant */ @media (min-height:860px){ .g-gate{ --g-hero-size:min(42dvh, 74vw, 340px); } } /* 12.4 — Repli si dvh n'est pas supportĂ© (vieux WebViews) */ @supports not (height:100dvh){ .g-gate{ height:100vh; min-height:100vh; max-height:100vh; } } /* 12.5 — Confort de lecture si l'utilisateur force un fort contraste */ @media (prefers-contrast:more){ .g-sign{ opacity:.88; } .g-arg { opacity:1; border-color:rgba(245,179,26,.45); } .g-link{ opacity:1; } } /* ========================================================================== 13. PRÉFÉRENCE « MOUVEMENT RÉDUIT » — on coupe TOUT ========================================================================== */ @media (prefers-reduced-motion:reduce){ .g-gate, .g-gate *, .g-gate *::before, .g-gate *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } /* États finaux forcĂ©s : rien ne doit rester invisible ou repliĂ©. */ .g-bg, .g-hero, .g-title, .g-sub, .g-sign, .g-args, .g-enter, .g-links{ opacity:1 !important; transform:none !important; } .g-hero::after{ transform:scaleY(1) !important; opacity:1 !important; } .g-enter::after{ opacity:.55 !important; transform:none !important; } /* L'enfoncement du bouton reste : il devient simplement instantanĂ©. */ .g-enter:active{ transform:translateY(4px) !important; } } /* ========================================================================== AJUSTEMENT — le visuel d'entrĂ©e porte dĂ©jĂ  le nom et la signature ========================================================================== Le poster contient « LA RUCHE 31 · CATALOGUE OFFICIEL · SĂ©lection fine, rĂ©coltes rares. » : on a retirĂ© le bloc texte qui faisait doublon, donc le visuel rĂ©cupĂšre la place libĂ©rĂ©e. */ .g-gate{ --g-hero-size:min(52dvh, 88vw, 400px); } /* Titre conservĂ© pour les lecteurs d'Ă©cran, invisible Ă  l'Ɠil. */ .g-titre-cache{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } @media (max-height:700px){ .g-gate{ --g-hero-size:min(46dvh, 80vw, 300px); } } @media (max-height:560px){ .g-gate{ --g-hero-size:min(42dvh, 42vw, 210px); } } @media (min-height:860px){ .g-gate{ --g-hero-size:min(54dvh, 90vw, 430px); } }