/* ============================================================ VAYRO — MANIFESTE Feuille de style unique du livre de marque. SOMMAIRE 01. Jetons de design (couleurs, typographie, rythmes) 02. Socle (reset, corps du livre, défilement magnétique) 03. Ornements de lecture (fil d'or, folio, curseur) 04. Gabarits de pages 4a. Couverture & fermeture 4b. Silence 4c. Pages-texte (centrée, gauche, droite, litanie…) 4d. Pages-valeur (les six piliers) 4e. Pages-photo (pleine page, bord perdu) 05. Révélation à la lecture (apparitions ligne à ligne) 06. Séquence d'ouverture (première impression) 07. Responsive (tablette, téléphone) 08. Accessibilité (reduced-motion, focus clavier) ============================================================ */ /* ------------------------------------------------------------ 01. JETONS DE DESIGN ------------------------------------------------------------ */ :root { /* Palette — jamais de blanc pur, jamais de noir absolu */ --noir: #0A0A0A; /* fond dominant, noir profond */ --noir-lumine: #100F0E; /* noir très légèrement réchauffé (dégradés) */ --ivoire: #F4F2ED; /* typographie principale, blanc cassé */ --ivoire-voile:rgba(244, 242, 237, 0.55); --ivoire-brume:rgba(244, 242, 237, 0.30); --or: #C9A961; /* or mat — accent unique, parcimonieux */ --or-voile: rgba(201, 169, 97, 0.35); /* Typographie */ --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Échelle typographique — fluide, jamais criarde */ --t-logo: clamp(2.6rem, 7vw, 5.4rem); /* VAYRO, couverture */ --t-grand: clamp(1.7rem, 3.6vw, 3.05rem); /* phrases-manifeste */ --t-moyen: clamp(1.3rem, 2.4vw, 2.0rem); /* texte courant du livre */ --t-bas: clamp(1.15rem, 2vw, 1.6rem); /* voix plus basse (p.7) */ --t-intertitre: clamp(0.95rem, 1.4vw, 1.2rem); /* le plus petit corps (p.17) */ --t-valeur: clamp(2.2rem, 5vw, 4.2rem); /* nom des piliers */ --t-legende: 0.66rem; /* légendes techniques */ /* Rythme des apparitions — très lent, très discret */ --lent: 1.6s; --tres-lent: 2.4s; --courbe: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ------------------------------------------------------------ 02. SOCLE ------------------------------------------------------------ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { height: 100%; /* Le défilement du livre vit sur : une page à la fois. */ scroll-snap-type: y mandatory; scroll-behavior: smooth; } body { min-height: 100%; background: var(--noir); color: var(--ivoire); font-family: var(--serif); font-weight: 300; line-height: 1.75; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Sélection de texte — même retenue que le reste */ ::selection { background: var(--or); color: var(--noir); } img { display: block; max-width: 100%; } em { font-style: italic; } /* L'or — accent unique. Un mot, une ligne, jamais un aplat. */ .or { color: var(--or); font-style: inherit; } /* ------------------------------------------------------------ 03. ORNEMENTS DE LECTURE ------------------------------------------------------------ */ /* Le fil d'or — signature du livre. Un filet vertical, fin comme un cheveu, qui s'allonge le long du bord gauche à mesure que la lecture avance. */ .fil { position: fixed; top: 0; left: clamp(18px, 3vw, 44px); width: 1px; height: 100%; background: rgba(244, 242, 237, 0.06); z-index: 10; pointer-events: none; } .fil__or { display: block; width: 100%; height: 0%; background: linear-gradient(to bottom, var(--or-voile), var(--or)); transition: height 0.4s linear; } /* Le folio — numéro de page, en capitales espacées */ .folio { position: fixed; right: clamp(20px, 3.4vw, 48px); bottom: clamp(20px, 3.4vw, 44px); font-family: var(--sans); font-weight: 300; font-size: var(--t-legende); letter-spacing: 0.34em; color: var(--ivoire-brume); z-index: 10; pointer-events: none; font-variant-numeric: tabular-nums; } .folio__sep { color: var(--or-voile); margin: 0 0.55em; } /* Le curseur — un point d'ivoire, un halo à peine perceptible. Activé uniquement à la souris (script.js). */ .curseur { position: fixed; top: 0; left: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--ivoire); box-shadow: 0 0 22px 6px rgba(201, 169, 97, 0.16); z-index: 100; pointer-events: none; opacity: 0; transition: opacity 0.6s ease, transform 0.35s var(--courbe); } body.curseur-actif, body.curseur-actif * { cursor: none; } body.curseur-actif .curseur { opacity: 1; } body.curseur-actif .curseur.est-appuye { transform: scale(2.4); } /* ------------------------------------------------------------ 04. GABARITS DE PAGES ------------------------------------------------------------ */ /* Chaque page occupe l'écran entier et s'aimante au défilement. */ .page { position: relative; min-height: 100vh; min-height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; align-items: center; justify-content: center; /* Immenses marges : le texte n'occupe jamais la pleine largeur. */ padding: clamp(3rem, 10vh, 7rem) clamp(2rem, 15vw, 14rem); } /* Le texte-manifeste : une colonne étroite, un interlignage généreux. */ .manifeste { font-size: var(--t-moyen); line-height: 1.9; max-width: 34ch; } .manifeste .l { display: block; } /* Strophes — le silence entre les idées fait partie du texte. */ .strophe { display: block; } .strophe + .strophe { margin-top: clamp(1.6rem, 4.5vh, 3.2rem); } /* — Variantes de corps — */ .manifeste.grand { font-size: var(--t-grand); line-height: 1.7; max-width: 26ch; } .manifeste.moyen { font-size: var(--t-moyen); } .manifeste.bas { font-size: var(--t-bas); } /* p.7 — voix plus basse */ .manifeste.intertitre { /* p.17 — le plus petit */ font-size: var(--t-intertitre); font-family: var(--sans); font-weight: 300; letter-spacing: 0.5em; text-transform: uppercase; line-height: 2.6; text-align: center; } /* — Gabarit : page centrée — */ .page--centre { text-align: center; } .page--centre .manifeste { margin-inline: auto; } /* Texte posé au tiers supérieur (pages 3 et 11) */ .page--haut { justify-content: flex-start; } .page--haut .manifeste { margin-top: 26vh; } /* — Gabarit : page alignée à gauche, vide massif à droite — */ .page--gauche { align-items: flex-start; text-align: left; } .page--gauche .manifeste { margin-right: auto; } /* Colonne légèrement décalée vers la droite (page 13) */ .page--decale { padding-left: clamp(2rem, 26vw, 22rem); } /* — Gabarit : page miroir, alignée à droite (page 28) — */ .page--droite { align-items: flex-end; text-align: right; } .page--droite .manifeste { margin-left: auto; } /* — La litanie (pages 27-28) : interligne resserré, aucune hiérarchie — */ .manifeste.litanie { line-height: 1.55; max-width: 40ch; } .manifeste.litanie .l + .l { margin-top: 0.45em; } /* — Le texte gravé (page 15) : chaque ligne isolée — */ .manifeste.grave .strophe + .strophe { margin-top: clamp(2.4rem, 7vh, 4.6rem); } /* — La promesse (page 30) : respiration maximale entre les strophes — */ .page--promesse .strophe + .strophe { margin-top: clamp(2.2rem, 6vh, 4.2rem); } .page--promesse .strophe--finale { margin-top: clamp(3rem, 9vh, 6rem); } /* — 4a. COUVERTURE & FERMETURE — */ .page--couverture { text-align: center; justify-content: center; } .couverture__logo { font-family: var(--serif); font-weight: 300; font-size: var(--t-logo); letter-spacing: 0.42em; /* compense visuellement le tracking sur la dernière lettre */ padding-left: 0.42em; line-height: 1; } /* Le trait d'or — fin comme un cheveu */ .couverture__trait { display: block; width: clamp(72px, 12vw, 140px); height: 1px; margin-top: clamp(1.8rem, 4vh, 3rem); background: var(--or); transform-origin: center; } .couverture__devise { margin-top: clamp(1.8rem, 4vh, 3rem); font-family: var(--sans); font-weight: 300; font-size: clamp(0.72rem, 1.1vw, 0.9rem); letter-spacing: 0.42em; text-transform: uppercase; color: var(--ivoire-voile); line-height: 2.4; padding-left: 0.42em; } .couverture__devise .l { display: block; } /* L'invitation à ouvrir le livre — discrète, presque murmurée */ .couverture__invitation { position: absolute; bottom: clamp(2.4rem, 6vh, 4.5rem); left: 50%; transform: translateX(-50%); background: none; border: none; color: var(--ivoire-brume); font-family: var(--sans); font-weight: 300; font-size: var(--t-legende); letter-spacing: 0.4em; text-transform: uppercase; padding: 1rem 1.4rem 1.6rem; cursor: pointer; transition: color 1.2s ease; } .couverture__invitation::after { /* un fil d'or vertical qui descend — l'invitation au geste */ content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 0.9rem; background: var(--or-voile); animation: descendre 3.2s var(--courbe) infinite; } @keyframes descendre { 0% { transform: translateY(0); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateY(0.7rem); opacity: 0; } } .couverture__invitation:hover { color: var(--ivoire-voile); } /* La fermeture reprend la construction exacte de la couverture. */ .page--fermeture .couverture__devise { color: var(--ivoire-voile); } /* — 4b. SILENCE (page 2) — */ .page--silence { justify-content: center; } .silence__point { width: 3px; height: 3px; border-radius: 50%; background: var(--or); opacity: 0; /* révélé à la lecture */ transition: opacity var(--tres-lent) ease; } .page.est-visible .silence__point { opacity: 0.55; } /* — 4e. PAGES-PHOTO : pleine page, bord perdu — */ .page--photo { padding: 0; overflow: hidden; } .page--photo figure { position: absolute; inset: 0; } .page--photo img { width: 100%; height: 100%; object-fit: cover; /* léger surdimensionnement pour le parallaxe (script.js) */ transform: scale(1.06); will-change: transform; } /* Signature minuscule, gris-or, en bas à droite (page 4) */ .photo__signature { position: absolute; right: clamp(20px, 3.4vw, 48px); bottom: clamp(52px, 9vh, 84px); font-family: var(--sans); font-weight: 300; font-size: 0.58rem; letter-spacing: 0.5em; color: rgba(201, 169, 97, 0.4); } /* — 4d. PAGES-VALEUR : les six piliers — */ .page--valeur { align-items: flex-start; justify-content: flex-start; text-align: left; padding-block: clamp(2rem, 6vh, 4rem); } .valeur__nom { font-size: var(--t-valeur); font-weight: 300; letter-spacing: 0.06em; line-height: 1.1; margin-top: clamp(3rem, 16vh, 10rem); } .valeur__phrase { /* l'espace vertical entre le titre et la phrase : ~30 % de la page */ margin-top: clamp(4rem, 26vh, 16rem); font-size: var(--t-moyen); line-height: 1.9; max-width: 34ch; } .valeur__phrase .l { display: block; } /* ------------------------------------------------------------ 05. RÉVÉLATION À LA LECTURE Les lignes montent de 20 px et apparaissent l'une après l'autre, très lentement, quand la page entre dans le regard. ------------------------------------------------------------ */ .l { opacity: 0; transform: translateY(20px); transition: opacity var(--lent) var(--courbe), transform var(--lent) var(--courbe); } .page.est-visible .l { opacity: 1; transform: translateY(0); } /* Cadence : chaque ligne attend la précédente. */ .page.est-visible .l:nth-child(1), .page.est-visible .strophe:nth-child(1) .l:nth-child(1) { transition-delay: 0.15s; } .page.est-visible .l:nth-child(2), .page.est-visible .strophe:nth-child(1) .l:nth-child(2) { transition-delay: 0.45s; } .page.est-visible .l:nth-child(3), .page.est-visible .strophe:nth-child(1) .l:nth-child(3) { transition-delay: 0.75s; } .page.est-visible .l:nth-child(4) { transition-delay: 1.05s; } .page.est-visible .l:nth-child(5) { transition-delay: 1.35s; } .page.est-visible .strophe:nth-child(2) .l:nth-child(1) { transition-delay: 0.85s; } .page.est-visible .strophe:nth-child(2) .l:nth-child(2) { transition-delay: 1.10s; } .page.est-visible .strophe:nth-child(2) .l:nth-child(3) { transition-delay: 1.35s; } .page.est-visible .strophe:nth-child(3) .l:nth-child(1) { transition-delay: 1.55s; } .page.est-visible .strophe:nth-child(3) .l:nth-child(2) { transition-delay: 1.80s; } .page.est-visible .strophe:nth-child(4) .l:nth-child(1) { transition-delay: 2.20s; } .page.est-visible .strophe:nth-child(4) .l:nth-child(2) { transition-delay: 2.45s; } .page.est-visible .strophe:nth-child(4) .l:nth-child(3) { transition-delay: 2.70s; } /* La phrase des valeurs attend que le nom soit posé. */ .page--valeur.est-visible .valeur__phrase .l:nth-child(1) { transition-delay: 0.9s; } .page--valeur.est-visible .valeur__phrase .l:nth-child(2) { transition-delay: 1.2s; } /* Les photos se dévoilent dans un long fondu. */ .page--photo figure { opacity: 0; transition: opacity var(--tres-lent) ease; } .page--photo.est-visible figure { opacity: 1; } /* ------------------------------------------------------------ 06. SÉQUENCE D'OUVERTURE — la première impression Noir. Silence. VAYRO. Le trait. La devise. L'invitation. Orchestrée par script.js via les classes .acte-1 … .acte-4. ------------------------------------------------------------ */ .page--couverture .couverture__logo { opacity: 0; transform: translateY(14px); transition: opacity 2.6s var(--courbe), transform 2.6s var(--courbe); } .page--couverture .couverture__trait { transform: scaleX(0); opacity: 0; transition: transform 2.2s var(--courbe), opacity 1.4s ease; } .page--couverture .couverture__devise .l { transition-duration: var(--tres-lent); } .page--couverture .couverture__invitation { opacity: 0; transition: opacity 2s ease, color 1.2s ease; pointer-events: none; } /* Actes de l'ouverture (page 1 uniquement) */ #page-1.acte-1 .couverture__logo { opacity: 1; transform: translateY(0); } #page-1.acte-2 .couverture__trait { opacity: 1; transform: scaleX(1); } #page-1.acte-3 .couverture__devise .l:nth-child(1) { opacity: 1; transform: translateY(0); } #page-1.acte-3 .couverture__devise .l:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.7s; } #page-1.acte-4 .couverture__invitation { opacity: 1; pointer-events: auto; } /* La fermeture (page 31) se révèle, elle, à la lecture. */ .page--fermeture.est-visible .couverture__logo { opacity: 1; transform: translateY(0); } .page--fermeture.est-visible .couverture__trait { opacity: 1; transform: scaleX(1); transition-delay: 1.2s; } .page--fermeture.est-visible .couverture__devise .l:nth-child(1) { transition-delay: 2.2s; } .page--fermeture.est-visible .couverture__devise .l:nth-child(2) { transition-delay: 2.9s; } /* ------------------------------------------------------------ 07. RESPONSIVE Le livre reste un livre — sur tous les formats. ------------------------------------------------------------ */ @media (max-width: 900px) { .page { padding-inline: clamp(1.6rem, 10vw, 5rem); } .page--decale { padding-left: clamp(2.6rem, 16vw, 8rem); } .valeur__nom { margin-top: clamp(2.5rem, 12vh, 7rem); } .valeur__phrase { margin-top: clamp(3rem, 20vh, 11rem); } } @media (max-width: 560px) { :root { --t-grand: clamp(1.45rem, 6.4vw, 1.9rem); } .page { padding-inline: 1.6rem; } .page--haut .manifeste { margin-top: 20vh; } .manifeste { max-width: 100%; } .fil { left: 12px; } .folio { right: 16px; bottom: 16px; } /* Le miroir de la page 28 reste lisible : marge symétrique. */ .page--droite { padding-left: 3rem; } .page--gauche { padding-right: 3rem; } } /* Sur écran tactile, pas de curseur personnalisé (géré aussi en JS). */ @media (hover: none) { .curseur { display: none; } } /* ------------------------------------------------------------ 08. ACCESSIBILITÉ ------------------------------------------------------------ */ /* Focus clavier — un filet d'or, jamais l'anneau bleu par défaut. */ :focus-visible { outline: 1px solid var(--or); outline-offset: 6px; } /* Mouvement réduit : le livre devient immédiat. Tout apparaît, rien ne bouge. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; } .l, .silence__point, .page--photo figure, .couverture__logo, .couverture__trait, .couverture__invitation { opacity: 1 !important; transform: none !important; } .page--photo img { transform: none !important; } .curseur { display: none; } } /* ------------------------------------------------------------ 09. PAGES DE TRANSITION — les chapitres du livre Un chiffre romain immense, presque évanescent, en arrière-plan. Au centre : le titre de la partie, le point d'or, une phrase. Chaque page doit pouvoir être photographiée seule. ------------------------------------------------------------ */ .page--transition { position: relative; text-align: center; overflow: hidden; } /* Le chiffre romain — une présence, pas une information. Or à 5 % : on le devine plus qu'on ne le lit. */ .transition__chiffre { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 300; font-size: min(54vh, 40vw); line-height: 1; color: rgba(201, 169, 97, 0.05); pointer-events: none; user-select: none; /* révélation : un très long fondu, un souffle à peine perceptible */ opacity: 0; transform: scale(1.035); transition: opacity 3.4s ease, transform 3.4s var(--courbe); } .page--transition.est-visible .transition__chiffre { opacity: 1; transform: scale(1); } /* Le contenu passe devant le chiffre */ .transition__contenu { position: relative; z-index: 1; max-width: 30ch; margin-inline: auto; } /* Le titre de la partie — capitales espacées, voix retenue */ .transition__titre { font-family: var(--sans); font-weight: 300; font-size: clamp(0.8rem, 1.25vw, 1.05rem); letter-spacing: 0.55em; text-transform: uppercase; color: var(--ivoire-voile); padding-left: 0.55em; /* compense le tracking */ } /* Le point d'or — hérité de la page de silence, devenu séparateur */ .transition__point { display: block; width: 3px; height: 3px; border-radius: 50%; background: var(--or); margin: clamp(2rem, 5.5vh, 3.4rem) auto; } /* La phrase-manifeste — serif italique, à encadrer */ .transition__phrase { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.6rem); line-height: 1.65; color: var(--ivoire); } .transition__phrase .l { display: block; } /* Cadence de la révélation : le chiffre respire, le titre se pose, le point s'allume, la phrase arrive — l'une après l'autre. */ .page--transition.est-visible .transition__titre.l { transition-delay: 0.9s; } .page--transition.est-visible .transition__point.l { transition-delay: 1.9s; } .page--transition.est-visible .transition__phrase .l:nth-child(1) { transition-delay: 2.5s; } .page--transition.est-visible .transition__phrase .l:nth-child(2) { transition-delay: 2.9s; } /* Mouvement réduit : le chapitre est là, immédiatement. */ @media (prefers-reduced-motion: reduce) { .transition__chiffre { opacity: 1 !important; transform: none !important; } }