/* ============================================================ TRENKIL — Socle du site vitrine Tokens (charte D-003), fond de scène, nav, boutons, primitives de texte et système d'entrées au scroll. LA LOI DE LA PAGE (héritée du teasing) : le texte ne floute jamais. Ce qui entre arrive posé — translation + opacité, jamais blur → net. Le flou n'est autorisé que sur la lumière (halos), c'est de la profondeur, pas du secret. LA THÈSE DU SITE : le jour se lève à mesure que le séjour prend forme. Chaque scène franchie éclaircit le ciel d'un cran (data-sky sur ). La lumière, c'est la valeur créée — pas une récompense à mériter. ============================================================ */ :root { --night: #060E11; --amber: #F5C07A; --amber-warm: #F09A62; --teal: #2DD4BF; --teal-deep: #0F766E; --ink: #F6FAF9; --ink-soft: rgba(246, 250, 249, 0.72); --ink-mute: rgba(246, 250, 249, 0.44); --line: rgba(246, 250, 249, 0.13); --paper: #FCF8F1; --paper-edge: #F1E9DC; --ink-dark: #12211F; --ink-dark-mu: rgba(18, 33, 31, 0.54); --rule: rgba(18, 33, 31, 0.10); --gold: #C9821F; /* les notes ★ sur papier (hors variables du teasing, même valeur) */ --grad-cta: linear-gradient(135deg, #F5C07A 0%, #F09A62 52%, #2DD4BF 190%); /* Les trois intentions de mouvement — chaque animation en choisit UNE. */ --ease: cubic-bezier(0.16, 1, 0.3, 1); /* ce qui s'installe */ --snap: cubic-bezier(0.22, 1.28, 0.36, 1); /* ce qui se POSE — le « clac » */ --gather: cubic-bezier(0.55, 0, 0.15, 1); /* ce qui part rejoindre sa place */ --nav-h: 72px; --wrap: 1160px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--night); color: var(--ink); font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } ::selection { background: rgba(45, 212, 191, 0.28); color: var(--ink); } img, svg { display: block; max-width: 100%; } a { color: inherit; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } :focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; } [id] { scroll-margin-top: var(--nav-h); } /* ------------------------------------------------------------ LE CIEL — fixe, sous tout le reste. Nuit bleu-vert du teasing, puis des crans de jour pilotés par data-sky (0 → 4). Deux couches de jour aux propriétés disjointes pour des fondus indépendants ; le jour monte par le bas : c'est un lever, pas un éclairage de salle. ------------------------------------------------------------ */ .sky { position: fixed; inset: 0; z-index: -2; background: linear-gradient(180deg, #040A0C 0%, #050F13 34%, #07191E 58%, #0A2A2C 82%, #10393A 100%); } .sky__glow, .sky__dawn { position: absolute; inset: 0; opacity: 0; transition: opacity 2.6s var(--ease); } /* Cran intermédiaire : le vert-teal de la nuit s'éclaircit. */ .sky__glow { background: linear-gradient(180deg, rgba(6, 20, 24, 0) 30%, rgba(16, 62, 60, 0.34) 78%, rgba(22, 82, 76, 0.5) 100%); } /* Le vrai lever : l'ambre par l'horizon bas. */ .sky__dawn { background: radial-gradient(122% 78% at 50% 108%, rgba(245, 192, 122, 0.26) 0%, rgba(240, 154, 98, 0.10) 38%, rgba(6, 14, 17, 0) 66%), linear-gradient(180deg, rgba(6, 14, 17, 0) 42%, rgba(15, 118, 110, 0.12) 100%); } body[data-sky="1"] .sky__glow { opacity: 0.45; } body[data-sky="2"] .sky__glow { opacity: 0.8; } body[data-sky="2"] .sky__dawn { opacity: 0.28; } body[data-sky="3"] .sky__glow { opacity: 1; } body[data-sky="3"] .sky__dawn { opacity: 0.6; } body[data-sky="4"] .sky__glow { opacity: 1; } body[data-sky="4"] .sky__dawn { opacity: 1; } /* Les halos — la profondeur de la nuit. Le flou est permis ici : c'est de la lumière. Dérives longues et désynchronisées : une nuée qui respire à l'unisson se lit comme un motif. */ .halo { position: absolute; border-radius: 50%; filter: blur(80px); animation: halo-drift 28s var(--ease) infinite alternate; } .halo--teal { width: 52vmax; height: 52vmax; left: -14vmax; top: -18vmax; background: radial-gradient(circle, rgba(15, 118, 110, 0.34) 0%, rgba(15, 118, 110, 0) 66%); } .halo--amber { width: 44vmax; height: 44vmax; right: -16vmax; bottom: -14vmax; background: radial-gradient(circle, rgba(245, 192, 122, 0.16) 0%, rgba(245, 192, 122, 0) 64%); animation-duration: 34s; animation-delay: -11s; } .halo--deep { width: 60vmax; height: 60vmax; left: 30vw; bottom: -34vmax; background: radial-gradient(circle, rgba(45, 212, 191, 0.10) 0%, rgba(45, 212, 191, 0) 62%); animation-duration: 40s; animation-delay: -20s; } @keyframes halo-drift { to { transform: translate(5vmax, -3.5vmax) scale(1.12); } } /* Le grain — pellicule, pas texture sale : il saute (steps), il ne glisse pas. inset négatif pour ne jamais découvrir un bord. */ .grain { position: fixed; inset: -8%; z-index: 40; pointer-events: none; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1.05s steps(1) infinite; } @keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -2%); } 80% { transform: translate(3%, 3%); } } /* La lueur du pointeur — le visiteur porte un peu d'aube. Position écrite par JS dans --px/--py, une frame max par rendu. */ .pointer-glow { position: fixed; left: -160px; top: -160px; z-index: -1; width: 320px; height: 320px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(245, 192, 122, 0.10) 0%, rgba(245, 192, 122, 0) 62%); filter: blur(46px); transform: translate3d(var(--px, -100vw), var(--py, 0), 0); } @media (hover: none), (pointer: coarse) { .pointer-glow { display: none; } } /* ------------------------------------------------------------ NAVIGATION ------------------------------------------------------------ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; transition: background 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease; border-bottom: 1px solid transparent; } .nav.scrolled { background: rgba(5, 13, 16, 0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom-color: var(--line); } .nav__inner { width: min(var(--wrap), 100% - 48px); margin: 0 auto; display: flex; align-items: center; gap: 28px; } .nav__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 1.06rem; letter-spacing: 0.01em; } .nav__brand svg { width: 30px; height: auto; } .nav__links { margin-left: auto; display: flex; align-items: center; gap: 26px; } .nav__link { font-family: 'Outfit', sans-serif; font-size: 0.88rem; font-weight: 400; color: var(--ink-soft); text-decoration: none; transition: color 0.25s ease; } .nav__link:hover { color: var(--ink); } @media (max-width: 720px) { .nav__link { display: none; } } /* ------------------------------------------------------------ BOUTONS ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 0.98rem; border-radius: 999px; padding: 15px 28px; text-decoration: none; transition: transform 0.25s var(--ease), box-shadow 0.25s ease, background 0.25s ease; } .btn--cta { background: var(--grad-cta); color: #10231F; box-shadow: 0 10px 34px rgba(245, 160, 100, 0.28); } .btn--cta:hover { transform: translateY(-1px); box-shadow: 0 16px 44px rgba(245, 180, 120, 0.38); } .btn--cta svg { width: 16px; height: 16px; } .btn--ghost { color: var(--ink-soft); border: 1px solid var(--line); } .btn--ghost:hover { color: var(--ink); border-color: rgba(246, 250, 249, 0.3); } .btn--nav { padding: 10px 20px; font-size: 0.88rem; } /* ------------------------------------------------------------ TEXTE — les trois voix ------------------------------------------------------------ */ .wrap { width: min(var(--wrap), 100% - 48px); margin: 0 auto; } .eyebrow { font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.36em; padding-left: 0.36em; /* recentrage optique */ text-transform: uppercase; color: var(--ink-mute); } .eyebrow--amber { color: rgba(245, 192, 122, 0.75); } .h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(1.9rem, 4.4vw, 3.1rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.12; } .h2 .serif, .serif { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; } .h2 .amber { color: var(--amber); } .h2 .teal { color: var(--teal); } .lead { font-size: clamp(1.02rem, 1.7vw, 1.2rem); color: var(--ink-soft); max-width: 34em; } .note { font-size: 0.9rem; color: var(--ink-mute); } /* ------------------------------------------------------------ ENTRÉES AU SCROLL — la grammaire du site. Ce qui entre s'installe (ease) : translation + opacité. Jamais de flou. Décalages via --d posé dans le HTML. ------------------------------------------------------------ */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); } .reveal.in { opacity: 1; transform: none; } /* Ce qui se POSE (les cartes, les journées) : léger rebond. */ .settle { opacity: 0; transform: translateY(22px) rotate(var(--tilt, -1.2deg)) scale(0.97); transition: opacity 0.7s var(--ease), transform 0.8s var(--snap); transition-delay: var(--d, 0s); } .settle.in { opacity: 1; transform: none; } /* ------------------------------------------------------------ SECTIONS & FOOTER ------------------------------------------------------------ */ .section { padding: clamp(96px, 14vh, 160px) 0; position: relative; } .section__head { max-width: 620px; display: grid; gap: 18px; margin-bottom: clamp(40px, 7vh, 72px); } .footer { border-top: 1px solid var(--line); padding: 48px 0 56px; } .footer__inner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .footer__mark { width: 34px; color: var(--ink-mute); } .footer__sig { font-size: 0.9rem; color: var(--ink-mute); } .footer__links { margin-left: auto; display: flex; gap: 22px; } .footer__links a { font-family: 'Outfit', sans-serif; font-size: 0.85rem; color: var(--ink-mute); text-decoration: none; transition: color 0.25s ease; } .footer__links a:hover { color: var(--ink-soft); } @media (max-width: 640px) { .footer__links { margin-left: 0; width: 100%; } } /* ------------------------------------------------------------ MOUVEMENT RÉDUIT — le visiteur reçoit la page déjà posée : tout est visible, le ciel est levé, rien ne bouge. ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal, .settle { opacity: 1; transform: none; transition: none; } .halo, .grain { animation: none; } .pointer-glow { display: none; } .sky__glow, .sky__dawn { transition: none; } }