/* ========================================================================== chsfdjr® — système visuel Blanc chaud par défaut (accordé au fond du portrait), variante sage disponible via . Réutilisable tel quel par les pages à venir. ========================================================================== */ :root { /* Blanc chaud. Doit rester SOUS le blanc pur du fond de la photo : la fusion `darken` garde le plus sombre des deux, donc le fond de l'image est absorbé par celui de la page, sans rectangle visible. */ --paper: #f8f7f4; --paper-deep: #ebe8e1; --ink: #16130f; --ink-soft: rgba(22, 19, 15, 0.58); --ink-faint: rgba(22, 19, 15, 0.2); --ink-line: rgba(22, 19, 15, 0.28); /* Typo */ --font-mark: "Outfit", "Helvetica Neue", Arial, sans-serif; --font-text: "Archivo", "Helvetica Neue", Arial, sans-serif; --font-hand: "Caveat", "Bradley Hand", "Segoe Script", cursive; /* Rythme */ --gutter: clamp(1.25rem, 4vw, 3.25rem); --edge-top: clamp(1.25rem, 3vh, 2.25rem); --micro: clamp(0.56rem, 0.72vw, 0.72rem); --track: 0.14em; /* Réglages du portrait central */ --portrait-h: 112%; /* > 100% : les épaules sortent de l'écran par le bas, plutôt que d'être coupées net par le bord de l'image */ --portrait-y: 0%; /* Décale le lettrage vers le bas pour qu'il croise la mâchoire plutôt que les yeux. En padding, jamais en transform : un ancêtre transformé isolerait la fusion et le wordmark ne s'inverserait plus. */ --mark-offset: 13vh; /* Banderole */ --band-gap: clamp(2.5rem, 6vw, 5.5rem); /* Le plafond de hauteur a été abaissé et celui de largeur laissé où il était : les lettrages très allongés restent butés en largeur et gardent leur taille, tout le reste redescend. */ --band-logo-h: clamp(1.15rem, 2.25vw, 1.8rem); --band-logo-ratio: 6.9; /* largeur maximale, en multiples de la hauteur */ --band-speed: 46s; --portrait-contrast: 1.32; --portrait-bright: 1; /* ne jamais descendre sous 1 : cela assombrirait le fond blanc de la photo, qui redeviendrait un rectangle visible */ } /* Variante sombre / sage */ .theme-sage { --paper: #67736c; --paper-deep: #414a45; --ink: #ecebe4; --ink-soft: rgba(236, 235, 228, 0.62); --ink-faint: rgba(236, 235, 228, 0.24); --ink-line: rgba(236, 235, 228, 0.32); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100svh; font-family: var(--font-text); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--ink-faint); padding-bottom: 0.12em; transition: border-color 220ms ease; } a:hover { border-color: var(--ink); } a:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; border-color: transparent; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- Calques d'ambiance -------------------------------------------------------------------------- */ /* Groupe isolé qui contient toute la composition. `isolation: isolate` en fait un contexte d'empilement fermé : la fusion des éléments qui sont dedans se fait contre ce qui est peint dedans, et rien d'autre. D'où le fond porté ici et non seulement sur `body` — sans lui, le groupe démarrerait transparent et le lettrage n'aurait rien à inverser. Les calques sont en `absolute` et non plus en `fixed` : un élément fixe est promu dans sa propre couche de composition, et Safari cesse alors de le considérer comme arrière-plan fusionnable. La page ne défile pas, les deux positionnements donnent donc le même rendu. */ .page { position: relative; isolation: isolate; min-height: 100svh; background: var(--paper); overflow: hidden; } .layer { position: absolute; inset: 0; pointer-events: none; z-index: 0; } /* Portrait central. Le fond blanc de la photo est absorbé par `darken` : seul le sujet subsiste, sans détourage ni couture. Pas de masque — la photo est simplement assez grande pour que ses bords sortent du cadre, ce qui évite la coupe nette là où les épaules touchent le bord du fichier. Fichier absent = rien ne s'affiche, la mise en page reste juste. */ .layer--portrait { background-image: -webkit-image-set( url("../img/portrait.jpg") 1x, url("../img/portrait@2x.jpg") 2x ); background-image: image-set( url("../img/portrait.jpg") 1x, url("../img/portrait@2x.jpg") 2x ); background-repeat: no-repeat; background-size: auto var(--portrait-h); background-position: 50% var(--portrait-y); mix-blend-mode: darken; /* Contraste poussé : le sujet bascule franchement vers le noir, ce qui donne au texte fusionné en `difference` de quoi s'inverser nettement. Le fond de la photo reste écrêté sur le blanc, donc toujours absorbé par `darken`. */ filter: contrast(var(--portrait-contrast)) brightness(var(--portrait-bright)) saturate(0.78); } .layer--vignette { background: radial-gradient(135% 110% at 50% 38%, transparent 58%, var(--paper-deep) 100%); opacity: 0.5; mix-blend-mode: multiply; } .theme-sage .layer--vignette { opacity: 0.85; } .layer--grain { opacity: 0.05; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } .theme-sage .layer--grain { mix-blend-mode: overlay; opacity: 0.06; } /* Grille technique */ .grid-line { position: absolute; } .grid-line--v { left: var(--x); top: 0; bottom: 0; width: 1px; background-image: linear-gradient(to bottom, var(--ink-line) 50%, transparent 50%); background-size: 1px 9px; } .grid-line--h { top: var(--y); left: 0; right: 0; height: 1px; background-image: linear-gradient(to right, var(--ink-line) 50%, transparent 50%); background-size: 9px 1px; } /* -------------------------------------------------------------------------- Structure -------------------------------------------------------------------------- */ /* Pas de z-index ici : le .frame ne doit pas créer de contexte d'empilement, sinon le wordmark en `difference` ne verrait plus le portrait derrière lui. */ .frame { position: relative; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; /* minmax(0, 1fr) et non `auto` : sans cela la piste de la banderole, plus large que l'écran, élargit la colonne et décentre toute la page. */ grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vh, 3.5rem); padding: var(--edge-top) var(--gutter) clamp(1.25rem, 3.5vh, 2.5rem); } /* Page réduite au strict minimum : le lettrage et l'adresse. */ .frame--bare { grid-template-rows: auto 1fr auto; } .frame--bare .stage { padding-top: var(--mark-offset); } .frame--bare .footer { align-items: center; gap: clamp(1.1rem, 3vh, 1.9rem); } .micro { margin: 0; font-size: var(--micro); font-weight: 500; line-height: 1.5; letter-spacing: var(--track); text-transform: uppercase; color: var(--ink-soft); } .micro--right { text-align: right; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .status-dot { display: inline-block; width: 5px; height: 5px; margin-right: 0.6em; border-radius: 50%; background: currentColor; vertical-align: 0.1em; animation: pulse 2.6s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.78); } } /* Composition centrée : le sujet au milieu, le lettrage posé dessus */ .stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(1.1rem, 3vh, 2rem); text-align: center; } /* -------------------------------------------------------------------------- Typo adaptative (thème crème) Tout le texte est peint en blanc puis fusionné en `difference` : il ressort presque noir sur le fond crème et bascule en clair dès qu'il passe sur le sujet du portrait. Aucun réglage à refaire quand la photo change. Le mode est posé sur les éléments qui portent .reveal — un ancêtre transformé isolerait la fusion et le texte resterait blanc. -------------------------------------------------------------------------- */ @supports (mix-blend-mode: difference) { .theme-bone .wordmark, .theme-bone .topbar, .theme-bone .meta, .theme-bone .emblem, .theme-bone .tagline, .theme-bone .band, .theme-bone .statement, .theme-bone .footer__contact { mix-blend-mode: difference; --ink: #ffffff; --ink-soft: rgba(255, 255, 255, 0.58); --ink-faint: rgba(255, 255, 255, 0.24); color: var(--ink); } } /* -------------------------------------------------------------------------- Bandeau « texte sélectionné » Reprend l'interface de sélection du système : la phrase surlignée, ses deux poignées, la barre d'outils flottante. Le bandeau garde un fond opaque au lieu de rejoindre la typo adaptative — fusionné en `difference`, un aplat sombre s'inverserait en blanc sur blanc et disparaîtrait. -------------------------------------------------------------------------- */ .topline { display: flex; flex-direction: column; align-items: center; gap: clamp(0.7rem, 1.6vh, 1.1rem); /* La barre d'outils déborde vers le haut, hors du flux : il lui faut sa place ici, sans quoi elle est coupée par le bord de l'écran. */ padding-top: clamp(2.25rem, 4.5vh, 3rem); } .pick { position: relative; display: inline-flex; } .pick__text { position: relative; margin: 0; padding: 0.32em 0.5em; background: var(--ink); color: var(--paper); font-size: clamp(0.82rem, 1.65vw, 1.2rem); font-weight: 500; line-height: 1.35; letter-spacing: -0.005em; } /* Poignées de sélection : un trait vertical, une pastille en haut à gauche et en bas à droite — la convention du système. */ .pick__handle { position: absolute; top: -0.28em; bottom: -0.28em; width: 2px; background: var(--ink); } .pick__handle--start { left: -2px; } .pick__handle--end { right: -2px; } .pick__handle::after { content: ""; position: absolute; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--ink); } .pick__handle--start::after { top: -8px; } .pick__handle--end::after { bottom: -8px; } /* Barre d'outils flottante */ .pick__bar { position: absolute; bottom: calc(100% + 0.55rem); left: 50%; transform: translateX(-50%); display: flex; width: max-content; border-radius: 7px; overflow: hidden; background: var(--ink); color: var(--paper); font-size: var(--micro); font-weight: 500; letter-spacing: 0.04em; white-space: nowrap; } .pick__bar span { padding: 0.62em 1.15em; } .pick__bar span + span { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.22); } /* Écho français, en légende */ .topline__echo { margin: 0; font-family: var(--font-hand); font-size: clamp(1.15rem, 2.1vw, 1.6rem); font-weight: 600; line-height: 1.2; /* Ni tracking ni capitales : une écriture manuscrite se lit mal en capitales et l'interlettrage casse la liaison des tracés. */ letter-spacing: 0; text-align: center; color: var(--ink); } /* -------------------------------------------------------------------------- Wordmark -------------------------------------------------------------------------- */ .wordmark { position: relative; margin: 0; font-family: var(--font-mark); font-weight: 700; font-size: clamp(3.5rem, 15vw, 13rem); line-height: 0.82; letter-spacing: -0.048em; color: var(--ink); white-space: nowrap; } .wordmark__dot { letter-spacing: 0; margin-left: -0.02em; } .wordmark__reg { position: absolute; top: 0.16em; font-size: 0.2em; font-weight: 600; letter-spacing: 0; margin-left: 0.06em; opacity: 0.92; } /* -------------------------------------------------------------------------- Bloc méta + emblème -------------------------------------------------------------------------- */ .lockup { display: flex; align-items: flex-start; justify-content: center; gap: clamp(1rem, 2.5vw, 2.25rem); width: 100%; } .meta { flex: 0 1 34rem; min-width: 0; text-align: left; } .meta__row, .meta__span { margin: 0; font-size: var(--micro); font-weight: 500; line-height: 1.62; letter-spacing: var(--track); text-transform: uppercase; color: var(--ink-soft); } .meta__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; } .meta__row > span:nth-child(2), .meta__row > span:nth-child(3) { text-align: center; } .meta__row > span:nth-child(4) { text-align: right; } .meta__row--two { grid-template-columns: 1fr 1fr; } .meta__row--two > span:nth-child(2) { text-align: right; } .meta__span { color: var(--ink); } .meta__span + .meta__span { color: var(--ink-soft); } .emblem { flex: 0 0 auto; width: clamp(2.6rem, 4.2vw, 3.6rem); color: var(--ink); opacity: 0.85; } .emblem svg { display: block; width: 100%; height: auto; } /* -------------------------------------------------------------------------- Accroche -------------------------------------------------------------------------- */ .tagline { margin: 0; font-size: clamp(0.82rem, 1.5vw, 1.05rem); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); } .tagline__sep { display: inline-block; margin: 0 0.35em; opacity: 0.45; } /* -------------------------------------------------------------------------- Banderole La fusion `difference` est portée par .band, jamais par la piste : c'est elle qui est animée en `transform`, ce qui en ferait un groupe isolé et couperait la fusion. Le contenu est donc rendu, masqué, puis fusionné d'un bloc avec ce qu'il y a derrière. -------------------------------------------------------------------------- */ .band { /* Pleine largeur : le fondu des bords doit mourir hors du cadre */ align-self: stretch; min-width: 0; margin-inline: calc(var(--gutter) * -1); overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%); } .band__track { display: flex; width: max-content; /* De -50% vers 0 : la piste glisse vers la droite. Les deux jeux étant identiques, l'arrivée est superposable au départ — la boucle ne saute pas. */ animation: band-drift var(--band-speed) linear infinite; } @keyframes band-drift { from { transform: translateX(-50%); } to { transform: translateX(0); } } .band__set { display: flex; align-items: center; gap: var(--band-gap); margin: 0; padding-inline: calc(var(--band-gap) / 2); list-style: none; /* Chaque jeu doit couvrir au moins l'écran, sinon la boucle découvre un vide au raccord. En dessous, `space-around` étale les entrées ; au-delà, c'est `gap` qui reprend la main. Le rythme reste le même de part et d'autre de la jointure : une demi-marge de chaque côté en fait une entière. */ min-width: 100vw; justify-content: space-around; } .band__item { flex: 0 0 auto; font-size: var(--micro); font-weight: 500; line-height: 1; letter-spacing: var(--track); text-transform: uppercase; white-space: nowrap; } /* Les logos sont servis déjà détourés et ramenés au blanc par bin/logos ; le filtre reste en garde-fou si l'on pointe un jour un fichier brut. Deux plafonds, en hauteur et en largeur : à hauteur constante, un lettrage très allongé écrase les marques carrées. Les deux contraintes ensemble égalisent le poids visuel. */ .band__item img { display: block; width: auto; height: auto; max-height: var(--band-logo-h); max-width: calc(var(--band-logo-h) * var(--band-logo-ratio)); filter: grayscale(1) brightness(0) invert(1); } /* Variante couleurs d'origine — `bin/logos --colour`. La fusion est coupée : en `difference`, les couleurs seraient retournées. En contrepartie la banderole ne s'adapte plus au fond, et un logo sombre se perd sur les épaules du portrait. */ .band:has(.band__set--colour) { mix-blend-mode: normal; } .band__set--colour img { filter: none; } /* -------------------------------------------------------------------------- Pied de page -------------------------------------------------------------------------- */ .footer { display: flex; flex-direction: column; gap: clamp(0.9rem, 2.5vh, 1.6rem); } .statement { margin: 0; font-size: clamp(0.72rem, 1.02vw, 0.86rem); font-weight: 400; line-height: 1.72; color: var(--ink); } /* Le justifié large des affiches éditoriales */ .justify { text-align: justify; text-align-last: justify; hyphens: none; } .footer__contact { display: flex; align-items: center; gap: 0.75em; flex-wrap: wrap; } .footer__dash { opacity: 0.45; } /* -------------------------------------------------------------------------- Apparition -------------------------------------------------------------------------- */ /* `backwards`, surtout pas `forwards`. En `forwards`, l'animation laisse derrière elle une `transform` figée — une matrice identité, invisible à l'œil, mais qui suffit à faire de l'élément un contexte d'empilement isolé. Chrome abandonne alors la fusion `difference` et le lettrage repasse en blanc plein une fois l'apparition terminée. En `backwards`, l'état initial ne s'applique que pendant le délai ; à la fin l'élément retombe sur son style de base, sans transform ni opacité résiduelles. La fusion tient donc indéfiniment. */ .reveal { animation: reveal 900ms cubic-bezier(0.16, 0.9, 0.28, 1) backwards; animation-delay: var(--d, 0ms); } @keyframes reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- Adaptations -------------------------------------------------------------------------- */ @media (max-width: 860px) { :root { --portrait-h: 104%; } .justify { text-align: left; text-align-last: left; } .grid-line--v:nth-of-type(2) { display: none; } } @media (max-width: 520px) { :root { --track: 0.1em; --portrait-h: 100%; } .wordmark { font-size: clamp(2.9rem, 17vw, 5rem); } .topbar { align-items: flex-start; } .tagline { letter-spacing: 0.13em; } .lockup { flex-direction: column; align-items: center; gap: 1.25rem; } .meta { flex: 1 1 auto; width: 100%; } .meta__row { gap: 0.35rem; } } @media (prefers-reduced-motion: reduce) { .reveal { animation: none; opacity: 1; transform: none; } .status-dot { animation: none; } .band__track { animation: none; transform: none; } .band__track .band__set:last-child { display: none; } .band__set { justify-content: center; flex-wrap: wrap; row-gap: 0.75rem; } }