/* ========================================================================== Koja Studio — feuille de style commune Variables de thème (clair/sombre), typographie, layout, composants partagés ========================================================================== */ /* -------------------------------------------------------------------------- TYPOGRAPHIE — decision du 28/07/2026 : Inter remplacee. TITRES ... Cabinet Grotesk 500 (Fontshare, licence commerciale gratuite) TEXTE .... Public Sans 300/400 (SIL Open Font License) LOGO ..... Comfortaa 700 (logo uniquement, jamais ailleurs) Polices auto-hebergees dans assets/fonts (aucune dependance a un CDN exterieur : plus rapide, et le site continue de s'afficher correctement meme ouvert en local depuis le disque). Fichiers sources et .otf pour le poste de travail : 01 - COMMUNICATION / 02 - IDENTITE VISUELLE / 02 - Charte graphique / Polices -------------------------------------------------------------------------- */ @font-face { font-family: 'Cabinet Grotesk'; src: url('../assets/fonts/CabinetGrotesk-Variable.woff2') format('woff2-variations'), url('../assets/fonts/CabinetGrotesk-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Public Sans'; src: url('../assets/fonts/PublicSans-Variable.woff2') format('woff2-variations'), url('../assets/fonts/PublicSans-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Public Sans'; src: url('../assets/fonts/PublicSans-Italic-Variable.woff2') format('woff2-variations'), url('../assets/fonts/PublicSans-Italic-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Comfortaa'; src: url('../assets/fonts/Comfortaa-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { --bg: #fdfdfd; --bg-raised: #f3f3f3; --text: #1a1a1a; --text-soft: rgba(26, 26, 26, 0.62); --text-faint: rgba(26, 26, 26, 0.38); --border: rgba(26, 26, 26, 0.12); /* gris du mot "studio" dans le logo (remplace l'ancien orange), assombri ici pour rester lisible sur fond clair : en gris pur, contrairement à l'orange, il n'y a plus que la luminosité pour se détacher du fond. */ --accent: #6e6e6e; --on-accent: #fff; --placeholder-bg: #e6e6e6; --placeholder-text: rgba(26, 26, 26, 0.32); --tag-bg: #1a1a1a; --tag-text: #fdfdfd; --header-h: 84px; --transition: 0.35s ease; } html[data-theme="dark"] { --bg: #111111; --bg-raised: #1a1a1a; --text: #f3f3f3; --text-soft: rgba(243, 243, 243, 0.62); --text-faint: rgba(243, 243, 243, 0.38); --border: rgba(243, 243, 243, 0.14); /* même logique, éclairci ici pour rester lisible sur fond sombre */ --accent: #a6a6a6; --on-accent: #1a1a1a; --placeholder-bg: #232323; --placeholder-text: rgba(243, 243, 243, 0.32); --tag-bg: #f3f3f3; --tag-text: #111111; } * { box-sizing: border-box; margin: 0; padding: 0; } /* fond posé sur (pas seulement ) : le corps démarre à opacity:0 (voir kojaPageIn plus bas) au chargement de chaque page — sans ce fond, ce court instant révèle le blanc par défaut du navigateur derrière, quel que soit le thème (flash blanc, y compris en thème sombre). Le thème est posé sur avant le premier rendu (script dans le de chaque page), donc var(--bg) est déjà la bonne couleur dès ce tout premier paint. */ /* pas de scroll-behavior:smooth global : sur Chrome, appliqué au défilement à la molette/trackpad (pas seulement aux ancres), ça produit un effet "lent puis qui accélère" assez désagréable (bug connu de Chrome, absent sur Firefox qui gère ça différemment) — le confort de défilement natif prime sur le petit plus des ancres qui glissent au lieu de sauter. */ html { overflow-x: hidden; background: var(--bg); } /* Empêche le "pull-to-refresh" (glisser vers le bas en haut de page qui recharge le site) sur mobile — ça arrivait par erreur en manipulant le mur d'images tout en haut de la page. Limité aux petits écrans (touch) via la media query : sur PC, le rebond de la molette/trackpad reste inchangé. Demande de Guillaume le 30/07. */ @media (max-width: 860px) { html, body { overscroll-behavior-y: none; } } /* Pages projet : le paragraphe descriptif sous le titre (.mw-intro p.sub, présent sur les 35 pages projet via leur bloc