/* ========================================================================== "I MAKE COOL STUFF WITH COOL PEOPLE" (
, sous le titre EXECUTIVE CREATIVE DIRECTOR / MULTIMEDIA DIRECTOR) DESKTOP (>= 1200px) : une seule ligne, taille = taille d'origine x --cool-k (--cool-k est ecrit dans le style inline du
de chaque page ; 1.62 = +62 %). TABLETTE + MOBILE (<= 1199px) : 3 lignes, avec les cesures I MAKE COOL STUFF WITH COOL PEOPLE chaque ligne a SA PROPRE taille, calee sur la largeur du cadre (meme principe que CREATIVE / DIRECTOR / MULTIMEDIA / DIRECTOR dans mobile-titre-hero.css) : les 3 lignes touchent le bord droit. Cadres : 640px (tablette 768-1199), 420px (paysage 480-767), 290px (portrait < 480). Tailles mesurees avec la vraie police Roboto 900 italique, interlettrage 1px, sans crenage (comme mobile-titre-hero.css), marge 2px, securite 0,4 %. Les 3 lignes sont des dans le HTML : sur desktop ils restent en ligne (une seule ligne), sur tablette / mobile ils passent en blocs. Reglage : variables --cool-f1 / --cool-f2 / --cool-f3 ci-dessous. ========================================================================== */ /* tailles par ligne (px) : L1 "I MAKE COOL" / L2 "STUFF WITH" / L3 "COOL PEOPLE" */ @media only screen and (max-width: 1199px) { :root { --cool-f1: 104.7px; --cool-f2: 112.1px; --cool-f3: 99.3px; } } @media only screen and (max-width: 767px) { :root { --cool-f1: 68.1px; --cool-f2: 72.3px; --cool-f3: 64.0px; } } @media only screen and (max-width: 479px) { :root { --cool-f1: 46.4px; --cool-f2: 49.2px; --cool-f3: 44.0px; } } /* Le theme force "h5 span {display:block}" : on remet les 3 morceaux EN LIGNE (desktop = 1 seule ligne). */ h5.cool-tagline .cool-l { display: inline !important; font-size: inherit !important; line-height: inherit !important; /* Le theme force aussi "h5 span {color:#222}" : sans cette ligne le texte passerait de noir a #222 et les couches de couleur du glitch (copies de ces lignes) seraient grises au lieu de rose / cyan / vert / jaune. */ color: inherit !important; } @media only screen and (max-width: 1199px) { /* le
lui-meme : taille de la 1re ligne (sert a l'espacement en em) ; memes selecteurs que mobile-titre-hero.css (+ .cool-tagline, donc prioritaires), ::first-line neutralisee */ section.portfolio-full-width-grid > .sub-section-title:first-child > h5.cool-tagline, #content-wrapper section.pages > #section-title ~ h5.cool-tagline:nth-of-type(1), section.portfolio-full-width-grid > .sub-section-title:first-child > i > h5.cool-tagline, #content-wrapper section.pages > #section-title ~ i > h5.cool-tagline:nth-of-type(1), section.portfolio-full-width-grid > .sub-section-title:first-child > h5.cool-tagline::first-line, #content-wrapper section.pages > #section-title ~ h5.cool-tagline:nth-of-type(1)::first-line, section.portfolio-full-width-grid > .sub-section-title:first-child > i > h5.cool-tagline::first-line, #content-wrapper section.pages > #section-title ~ i > h5.cool-tagline:nth-of-type(1)::first-line { font-size: var(--cool-f1) !important; line-height: 1 !important; } /* les 3 lignes (et leur copie glitch, qui est dans le
) */ h5.cool-tagline .cool-l { display: block !important; white-space: nowrap; line-height: 1 !important; } h5.cool-tagline .cool-l1 { font-size: var(--cool-f1) !important; } h5.cool-tagline .cool-l2 { font-size: var(--cool-f2) !important; } h5.cool-tagline .cool-l3 { font-size: var(--cool-f3) !important; } } /* Respiration entre "MULTIMEDIA DIRECTOR" et la phrase : +0.5em d'espace au-dessus de la phrase (~ +24 px sur desktop). Les marges verticales voisines se FUSIONNENT (la plus grande l'emporte), d'ou le 8px + 0.5em : 8px = marge-bas du

MULTIMEDIA DIRECTOR. Reglage : changer 0.5em (0 = ancien espacement). */ h5.cool-tagline { margin-top: calc(8px + 0.5em); } /* Plus BOLD : Roboto s'arrete a la graisse 900 (Black), deja utilisee. On epaissit donc les lettres avec un contour de la meme couleur que le texte (-webkit-text-stroke, en em donc proportionnel a la taille de chaque ligne). La copie glitch (meme classe .cool-l) recoit le meme contour : elle reste alignee. Le contour deborde de moitie a l'exterieur (~0.6 px de chaque cote sur desktop, ~1.3 px sur tablette). Reglage : changer 0.025em (0 = graisse d'origine ; au-dela de ~0.03em les lettres se touchent). */ h5.cool-tagline .cool-l { -webkit-text-stroke: 0.025em currentColor; paint-order: stroke fill; } /* Le

coupe ce qui depasse sur les cotes (overflow-x:clip, pour le glitch) : on laisse 6 px de marge pour que l'epaisseur ajoutee ci-dessus ne soit jamais rognee au bord droit des lignes calees. */ h5.cool-tagline { overflow-clip-margin: 6px; } /* DESKTOP (>= 1200px) : a 48.6 px de texte, 0.025em (~1.2 px) est trop discret. On epaissit davantage (0.05em = ~2.4 px) et on ajoute un peu d'interlettrage (+0.035em, ~1.7 px) pour que les lettres ne se touchent pas : la phrase mesure ~991 px dans un cadre de 1070 px, elle reste sur une seule ligne. La copie glitch herite de l'interlettrage du
et recoit le meme contour : elle reste alignee. Tablette / mobile : inchange (0.025em, interlettrage 1px, car les lignes y sont calees sur le cadre). Reglage : 0.05em (graisse) et 0.035em (espacement) ; 0.025em et 0 = rendu precedent. */ @media only screen and (min-width: 1200px) { h5.cool-tagline .cool-l { -webkit-text-stroke: 0.05em currentColor; } h5.cool-tagline { letter-spacing: calc(1px + 0.035em); } } /* 2e "I MAKE COOL STUFF WITH COOL PEOPLE" de la page contact (en bas de la colonne de texte, 22 px) : meme graisse que la phrase du haut, par le meme contour de la couleur du texte. A 22 px, 0.06em (~1.3 px) suffit : les lettres ne se touchent pas (il faudrait > 0.09em), et on NE touche PAS a l'interlettrage ni a la taille (la phrase tient juste dans sa colonne : 438 px dans 449 px sur desktop). La copie glitch (.tg-layer) recoit le meme contour : elle reste alignee. Reglage : changer 0.06em (0 = graisse d'origine). */ #contactTagline .gare-role, #contactTagline .gare-role .tg-layer { -webkit-text-stroke: 0.06em currentColor; paint-order: stroke fill; } /* GRAND FORMAT (desktop >= 1200px) : phrase du haut reduite de 5 % (taille = 30px x --cool-k x 0.95, soit x1.539 au lieu de x1.62). Tablette / mobile : inchange (lignes calees sur le cadre). Reglage : changer 0.95 (1 = taille precedente). */ @media only screen and (min-width: 1200px) { h5.cool-tagline { font-size: calc(30px * var(--cool-k, 1) * 0.95) !important; } } /* "EXECUTIVE CREATIVE DIRECTOR" / "MULTIMEDIA DIRECTOR" (les 2

juste au-dessus de la baseline) : un peu plus bold. Meme methode que la baseline et le titre PARIS NEW YORK MONTREAL : Roboto s'arrete a 900 (deja utilise), donc contour de la couleur du texte, en em (proportionnel a la taille). REGLAGE : changer UNIQUEMENT --role-bold. 0 = graisse d'origine | 0.01em = a peine | 0.02em = un peu plus (valeur actuelle) | 0.03em = net | 0.05em = tres gras. Desktop (>= 1200px) : valeur entiere + interlettrage +0.5 x valeur (pour que les lettres ne se touchent pas). Tablette / mobile : la moitie de la valeur, espacement inchange (lignes calees sur le cadre). */ :root { --role-bold: 0.02em; } h3:has(+ h5.cool-tagline), h3:has(+ h3 + h5.cool-tagline) { -webkit-text-stroke: calc(var(--role-bold) * 0.5) currentColor; paint-order: stroke fill; } h3:has(+ h5.cool-tagline) *, h3:has(+ h3 + h5.cool-tagline) * { -webkit-text-stroke: calc(var(--role-bold) * 0.5) currentColor; paint-order: stroke fill; } @media only screen and (min-width: 1200px) { h3:has(+ h5.cool-tagline), h3:has(+ h3 + h5.cool-tagline), h3:has(+ h5.cool-tagline) *, h3:has(+ h3 + h5.cool-tagline) * { -webkit-text-stroke: var(--role-bold) currentColor; } h3:has(+ h5.cool-tagline), h3:has(+ h3 + h5.cool-tagline) { letter-spacing: calc(1px + var(--role-bold) * 0.5); } }