/* ===================================================================== PLATEAU — les jetons. ===================================================================== POUR QUI : une association culturelle qui PROGRAMME. Compagnie de théâtre, chorale, harmonie, ciné-club, école de musique, collectif d'arts plastiques. Des créations, des ateliers, une saison, des dates. CE QU'ON Y CHERCHE : quand est la prochaine, où, et comment en être. Tout ce thème est réglé sur cette phrase-là — d'où l'agenda en tête et les dates traitées comme le sujet, jamais comme une mention. --------------------------------------------------------------------- LA DIRECTION : LE PROGRAMME DE SAISON. Pas une revue culturelle haut de gamme, pas une galerie d'art, pas un magazine. Le petit livret qu'on prend à l'entrée : une couverture sombre, des pages claires, et des dates rangées les unes sous les autres du premier au dernier jour. TROIS GESTES, ET PAS UN DE PLUS : 1. LE NOIR DE SALLE. L'en-tête, l'accueil et l'agenda sont sombres ; tout le reste est clair. Ce n'est pas une couleur de marque, c'est le noir d'une salle — celui qui fait exister un projecteur, et celui qui met une photo de spectacle en valeur. 2. LE FILET VERTICAL. Deux pixels à gauche de chaque date, de chaque atelier, de chaque témoignage. C'est la marge d'un programme, et c'est ce qui donne à la page son rythme sans une seule boîte. 3. LA SERIF PORTE LES TITRES, ARCHIVO PORTE LE TEXTE. Fraunces écrit le nom de la compagnie, les titres de section et les noms d'élément ; Archivo écrit les paragraphes, les dates, les étiquettes et l'interface. CE THÈME A CHANGÉ D'AVIS, ET LA RAISON EST ÉCRITE. Fraunces n'a d'abord porté QUE le nom de l'association — « une serif qui n'apparaît qu'une fois fait une signature ». L'argument est bon et il tombe devant un fait : le socle porte cinq thèmes, et `club` conduisait déjà tout en Archivo. Deux thèmes menés par la même grotesque ne sont pas deux directions artistiques, ce sont deux palettes. Il fallait qu'un thème sur cinq soit mené par une serif ; le programme de saison d'une compagnie de théâtre est l'endroit où une serif de caractère se justifie le mieux. Le couple est classique et il est tenu : serif de titraille, grotesque de labeur. Ce qu'on lit longtemps reste en Archivo — une Fraunces de corps ferait la revue qu'on ne veut pas. --------------------------------------------------------------------- CE QUE CE THÈME NE FAIT PAS, ET QUI LE DISTINGUE DES DEUX AUTRES : — aucun fond crème, aucune couleur terreuse, aucun pastel ; — aucun PARAGRAPHE en serif : la serif titre, elle ne se lit pas en longueur ; — aucune carte à ombre ni à coin arrondi ; — aucune photo recadrée en paysage : les spectacles sont en 3/4, le format de l'affiche. --------------------------------------------------------------------- LES CONTRASTES SONT MESURÉS. Chaque couple porte son rapport, calculé selon WCAG 2.1. Rien sous 4,5:1 ne porte du texte courant ; rien sous 3:1 ne porte une bordure d'interface. LE MODE SOMBRE EST LE CAS DIFFICILE : c'est là que les rapports ont été vérifiés d'abord. ===================================================================== */ :root { /* LES FONDS CLAIRS. Un blanc franc, un gris à peine teinté pour les bandes. Rien de chaud : ce thème n'a aucune dominante beige. */ --fond: #FFFFFF; --fond-bande: #F3F3F5; --fond-creux: #E9E9ED; /* LES FONDS SOMBRES — la salle. Un noir légèrement violacé, jamais un gris neutre : un noir pur fait un site technique, celui-ci fait une salle éteinte. */ --nuit: #16141C; --nuit-clair: #221F2B; /* L'ENCRE, DES DEUX CÔTÉS. encre sur fond : 16,4:1 encre-douce sur fond : 6,1:1 clair sur nuit : 15,8:1 clair-doux sur nuit : 7,4:1 */ --encre: #14131A; --encre-douce: #5C5A67; --clair: #F4F3F6; --clair-doux: #A9A6B4; --trait: #E1E0E6; --trait-fort: #B6B4BF; --trait-champ: #8B8894; --trait-nuit: #38343F; /* L'ACCENT : le jaune d'un projecteur. Il ne sert qu'aux dates, aux liens et au filet vertical. jaune sur nuit : 10,2:1 — il porte du texte sur le sombre ambre sur fond : 4,8:1 — sa variante foncée le porte sur le clair */ --jaune: #E9C24A; --ambre: #8A6300; /* L'action : le rouge d'un rideau, et il ne sert qu'au bouton d'adhésion. rouge sur fond : 6,1:1 */ --rouge: #98202F; --rouge-fonce: #7A1926; --oui: #1B6B3A; --alerte: #A3271F; /* LA TYPOGRAPHIE, EN DEUX EMPLOIS QUI NE SE CROISENT PAS. --texte Archivo : les paragraphes, les dates, les étiquettes, l'interface. Tout ce qui se lit en longueur ou se parcourt vite. --titre Fraunces : les titres de section, les noms d'élément, le nom de la compagnie. Tout ce qui s'annonce. Fraunces est instanciée à opsz 144 — le dessin d'affiche de la famille, celui dont les empattements portent à grande taille. Deux graisses : 400 pour les titres courants, 600 pour l'enseigne. */ --texte: 'Archivo', 'Archivo repli', 'Helvetica Neue', Helvetica, Arial, sans-serif; --titre: 'Fraunces', 'Fraunces repli', Georgia, 'Times New Roman', serif; --enseigne: 'Fraunces', 'Fraunces repli', Georgia, 'Times New Roman', serif; --t-display: clamp(2.3rem, 5.4vw, 4rem); --t-h2: clamp(1.55rem, 2.9vw, 2.25rem); --t-h3: clamp(1.12rem, 1.6vw, 1.34rem); --t-lead: clamp(1.05rem, 1.3vw, 1.18rem); --t-body: 1.0625rem; --t-petit: 0.9375rem; --t-mention: 0.75rem; /* La date, dans la colonne de gauche de l'agenda : plus grande que le texte, plus petite qu'un titre. C'est ce qu'on parcourt. */ --t-date: clamp(1rem, 1.5vw, 1.15rem); --gouttiere: clamp(20px, 5vw, 64px); --large: 1040px; --lecture: 33rem; --section-y: clamp(52px, 7.2vh, 104px); /* AUCUN ARRONDI. Un programme est imprimé, et l'encre n'arrondit pas les angles. */ --rayon: 0; --rayon-petit: 0; --rayon-plein: 999px; /* LE FILET VERTICAL, la signature de ce thème. */ --filet: 2px; --ease: cubic-bezier(0.25, 0.1, 0.25, 1); --survol: 140ms; --apparition: 500ms; --h-entete: 66px; } @media (max-width: 899px) { :root { --h-entete: 58px; } }