/* ===================================================================== CIMAISE — les jetons. ===================================================================== POUR QUI : un lieu culturel contemporain. Centre d'art, galerie associative, friche, lieu de résidence, salle d'exposition d'une commune. Une programmation à annoncer, des dates à mettre en avant, des œuvres à montrer grand. CE QU'ON Y CHERCHE : qu'est-ce qui est visible EN CE MOMENT, jusqu'à quand, à quelle heure c'est ouvert, et combien ça coûte. Ce thème répond dans cet ordre. --------------------------------------------------------------------- LA DIRECTION : LA CIMAISE. Le mur blanc sur lequel on accroche. Tout le thème en découle : le fond est un mur, les images sont ce qu'on y pose, et le reste se tait. QUATRE GESTES, ET PAS UN DE PLUS : 1. LE BLANC PLEIN. Le fond est #FFFFFF, sans exception, et la seule autre surface est un gris de mur très clair. Aucune bande colorée, aucun bloc teinté : dans une salle d'exposition, la couleur appartient à ce qui est accroché. 2. LA GRILLE VISIBLE. Un filet d'un pixel sépare tout ce qui doit l'être, et rien n'est jamais séparé par une ombre ou par un arrondi. Les cartes n'existent pas : il y a des cases dans une grille, et des filets entre elles. 3. LA DATE EN TÊTE. Une programmation se lit par ses dates. Elles sont composées en grand, en magenta, avant le titre — c'est le seul endroit du thème où la couleur paraît, avec le bouton. 4. LA PHOTO EN GRAND. Les images sont larges, franches, sans arrondi, sans cadre et sans légende posée dessus. Une œuvre se regarde ; on ne l'habille pas. --------------------------------------------------------------------- CE QUE CE THÈME NE FAIT PAS, ET IL FAUT LE DIRE : — aucune serif, nulle part. Pas de titre en Fraunces, pas d'italique éditoriale : ce serait un magazine, et un magazine n'est pas un lieu ; — aucun beige, aucun crème, aucun terracotta, aucun pastel ; — aucune ombre portée, aucun dégradé, aucun arrondi supérieur à zéro ; — aucune carte flottante, aucune pastille, aucun badge arrondi. --------------------------------------------------------------------- CE QU'IL NE COPIE PAS. Aucun musée en particulier. Ce qui est repris est la GRAMMAIRE partagée par les lieux d'art contemporain — blanc dominant, grille forte, sans-serif nette, dates en avant, décoration nulle — et non l'habillage de l'un d'eux. ===================================================================== */ :root { /* LES FONDS. Blanc plein, et un seul gris. Il n'y a pas de troisième surface : une salle d'exposition a des murs et des cloisons. */ --fond: #FFFFFF; --fond-bande: #F4F4F5; --fond-creux: #EBEBEC; --fond-encre: #101012; /* le seul aplat sombre : l'auditorium, le pied */ /* L'ENCRE. Presque noire, jamais noire : le noir pur sur blanc pur vibre à la lecture longue. encre sur fond : 17,4:1 encre-douce sur fond : 6,2:1 */ --encre: #131315; --encre-douce: #5B5B60; --encre-clair: #FFFFFF; --encre-inv: #FFFFFF; /* LES FILETS. Un seul poids, une seule couleur, partout. C'est ce qui remplace les cartes, les ombres et les arrondis. */ --trait: #DCDCDE; --trait-fort: #B4B4B8; --trait-champ: #77777C; /* 4,3:1 — le seuil des éléments d'interface */ --filet: 1px; /* L'ACCENT, ET IL EST NOIR. ------------------------------------------------------------------ C'était un magenta franc, employé aux dates et au bouton principal. Il est passé au noir de l'encre du thème : un centre d'art qui met ses dates en noir sur blanc ne compte que sur la taille et la position pour les faire voir, et c'est le geste le plus sobre qui existe. LE NOM DU JETON NE CHANGE PAS. Quinze règles de theme.css le lisent ; les renommer pour dire « encre » alors qu'il occupe la place de l'accent obligerait à relire chacune. « signal » dit sa FONCTION — ce qui doit se voir en premier —, pas sa teinte. signal sur fond : 17,4:1 — c'est l'encre du thème fond sur signal : 17,4:1 — donc le bouton plein est lisible */ --signal: #131315; --signal-fonce:#000000; --signal-pale: #EBEBEC; /* LE MÊME ACCENT, SUR L'APLAT SOMBRE. Du noir sur du noir ne se voit pas : là où le fond est l'encre, l'accent est le blanc. C'est le même renversement que pour le texte courant. signal-clair sur fond-encre : 18,1:1 */ --signal-clair:#FFFFFF; --oui: #0F6B3F; --alerte: #A3231B; /* 5,9:1 */ /* LA TYPOGRAPHIE. Jost, une géométrique de la lignée Bauhaus : des cercles vrais, des jambages courts, aucune fioriture. C'est la grammaire des lieux d'art contemporain, et c'est la seule des cinq familles du dépôt que ce thème emploie — aucun autre ne la touche. TROIS GRAISSES : 300 pour les grands titres, où la géométrie se voit le mieux ; 400 pour le texte ; 500 pour les intitulés et les dates. */ --texte: 'Jost', 'Jost repli', 'Futura', 'Century Gothic', sans-serif; --etiquette: var(--texte); /* L'ÉCHELLE. Un écart FRANC entre le titre et le reste : c'est ce qui fait une affiche plutôt qu'une page. Le corps reste à 17 px, comme partout ailleurs dans le dépôt. */ --t-display: clamp(2.4rem, 6vw, 4.6rem); --t-h2: clamp(1.55rem, 3vw, 2.35rem); --t-h3: clamp(1.12rem, 1.5vw, 1.3rem); --t-lead: clamp(1.1rem, 1.5vw, 1.32rem); --t-body: 1.0625rem; --t-petit: 0.9375rem; --t-mention: 0.8125rem; /* LA DATE. C'est le second grand corps du thème, et il est presque aussi grand que le titre de section : une programmation se lit par ses dates. */ --t-date: clamp(1.35rem, 2.4vw, 1.95rem); --t-nombre: clamp(2rem, 3.4vw, 3rem); --gouttiere: clamp(24px, 5vw, 80px); --large: 1360px; --lecture: 40rem; --section-y: clamp(64px, 9vh, 132px); /* LE RAYON EST NUL. Partout, sans exception. Un angle arrondi est une douceur, et ce lieu-ci n'en veut aucune. */ --rayon: 0; --rayon-petit: 0; --rayon-plein: 0; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --survol: 130ms; --apparition: 520ms; --h-entete: 68px; --h-horaires: 0px; } @media (max-width: 999px) { :root { --h-entete: 58px; } }