/* ============================================================ GRAPH'ART STUDIO — DESIGN TOKENS Système de design d'Alexandra D. / Blue À charger en premier, avant tout autre CSS du thème enfant. Prefix : --gas- (Graph'Art Studio) sur toutes les variables pour éviter tout conflit avec Astra ou Spectra/Gutenberg. ============================================================ */ :root { /* ------------------------------------------------------------ COULEURS — Palette validée Bleu nuit profond + crème + champagne. Corail rare en accent. ------------------------------------------------------------ */ /* Surfaces (fonds) */ --gas-color-bg-primary: #06142f; /* bleu nuit profond — fond principal */ --gas-color-bg-secondary: #0e1b3d; /* bleu nuit légèrement plus clair — sections alternées */ --gas-color-bg-tertiary: #162844; /* cartouches, cards, formulaires */ /* Texte */ --gas-color-text-primary: #f2ebdd; /* crème — texte courant + parties non italiques des titres */ --gas-color-text-secondary: #a8a39a; /* gris chaud — lede, descriptions */ --gas-color-text-tertiary: #6f6a62; /* labels secondaires, méta, copyright */ /* Accents */ --gas-color-accent: #c4b89e; /* champagne — italiques de titre, kickers, liens, CTA */ --gas-color-accent-light: #dcd4bf; /* champagne plus clair — hover, numéros 0X */ --gas-color-coral: #e0563e; /* corail — accent rare, ponctuel (à doser : promo, alerte) */ /* Bordures et filets */ --gas-color-border: rgba(242, 235, 221, 0.12); /* filets discrets entre sections */ --gas-color-border-strong: rgba(242, 235, 221, 0.22); /* bordures de champs de formulaire */ /* États système */ --gas-color-focus: #c4b89e; /* outline focus clavier — champagne */ --gas-color-selection-bg: #c4b89e; /* fond de sélection texte */ --gas-color-selection-text: #06142f; /* texte sélectionné */ /* ------------------------------------------------------------ TYPOGRAPHIE — Polices et tailles 5 fontes Google Fonts. Détails dans fonts.md. ------------------------------------------------------------ */ /* Familles */ --gas-font-display: 'Fraunces', 'Times New Roman', serif; /* grands titres */ --gas-font-italic: 'Instrument Serif', 'Times New Roman', serif; /* italiques de titre */ --gas-font-body: 'Roboto', sans-serif; /* texte courant, navigation */ --gas-font-serif: 'Roboto', sans-serif; /* paragraphes longs (artiste, journal) */ --gas-font-label: 'JetBrains Mono', 'SF Mono', monospace; /* labels, kickers, méta */ /* Tailles de fonte — desktop (≥ 1200px) */ --gas-font-size-hero: 184px; /* titre principal hero accueil */ --gas-font-size-h1: 132px; /* H1 de page (artiste, journal, contact, faq) */ --gas-font-size-h2: 96px; /* H2 collections, atelier */ --gas-font-size-h2-sm: 72px; /* H2 secondaire (journal teaser) */ --gas-font-size-h3: 52px; /* H3 cartes collection */ --gas-font-size-h4: 32px; /* H4 articles journal, contact info */ --gas-font-size-stat: 148px; /* chiffres section stats */ --gas-font-size-quote: 64px; /* citation ouverture */ --gas-font-size-lede: 26px; /* paragraphes d'introduction italiques */ --gas-font-size-large: 23px; /* italiques accent */ --gas-font-size-body: 17px; /* corps de texte (artiste, journal) */ --gas-font-size-base: 17px; /* texte courant sans-serif */ --gas-font-size-small: 15px; /* méta footer */ --gas-font-size-label: 11px; /* labels mono / kickers */ /* Graisses */ --gas-font-weight-light: 300; /* Fraunces display */ --gas-font-weight-regular: 400; /* italiques, serif, body */ --gas-font-weight-medium: 500; /* emphase italique, body strong */ --gas-font-weight-bold: 700; /* CTA en cas de besoin */ /* Hauteurs de ligne */ --gas-line-height-hero: 0.9; --gas-line-height-tight: 0.95; /* H1, H2 display */ --gas-line-height-snug: 1.05; /* H2 secondaires */ --gas-line-height-normal: 1.2; /* lede, titres moyens */ --gas-line-height-body: 1.55; /* paragraphes italiques */ --gas-line-height-loose: 1.75; /* paragraphes serif longs */ /* Espacement des lettres */ --gas-letter-spacing-tight: -0.02em; /* titres Fraunces */ --gas-letter-spacing-wide: 0.2em; /* labels en capitales */ /* ------------------------------------------------------------ ESPACEMENT — Échelle modulaire Basée sur un rythme de 8px. Utilisée pour gaps, padding, margin. ------------------------------------------------------------ */ --gas-spacing-xs: 8px; --gas-spacing-sm: 16px; --gas-spacing-md: 24px; --gas-spacing-lg: 32px; --gas-spacing-xl: 48px; --gas-spacing-xxl: 64px; --gas-spacing-3xl: 96px; --gas-spacing-4xl: 120px; --gas-spacing-5xl: 160px; --gas-spacing-6xl: 220px; /* Padding latéral horizontal des sections (gutter) */ --gas-gutter-desktop: 64px; --gas-gutter-tablet: 40px; --gas-gutter-mobile: 24px; /* Largeur max de contenu lisible */ --gas-content-max-width: 1100px; /* paragraphes, FAQ */ --gas-prose-max-width: 820px; /* prose narrative (artiste) */ /* ------------------------------------------------------------ ANIMATIONS — Transitions et easings ------------------------------------------------------------ */ --gas-transition-fast: 0.2s; --gas-transition-medium: 0.6s; --gas-transition-slow: 1s; --gas-easing-default: ease; --gas-easing-in-out: ease-in-out; --gas-easing-out: cubic-bezier(0.22, 1, 0.36, 1); /* sortie expressive */ /* Durée du Ken Burns du hero (animation kenburns) */ --gas-kenburns-duration: 24s; } /* ============================================================ SCROLL — comportement global ============================================================ */ html { scroll-behavior: smooth; } /* ============================================================ RESET CIBLÉ — sélection texte (cohérent sur toutes les pages) ============================================================ */ ::selection { background: var(--gas-color-selection-bg); color: var(--gas-color-selection-text); } /* ============================================================ GRAISSE GLOBALE — Roboto Light comme défaut corps de texte ============================================================ */ body { font-weight: 300; } strong, b { font-weight: 400; } /* ============================================================ RESPONSIVE — Échelles typographiques aux breakpoints ============================================================ */ /* Tablette : 768px – 1199px */ @media (max-width: 1199px) { :root { --gas-font-size-hero: 120px; --gas-font-size-h1: 88px; --gas-font-size-h2: 64px; --gas-font-size-h2-sm: 52px; --gas-font-size-h3: 40px; --gas-font-size-stat: 104px; --gas-font-size-quote: 44px; --gas-font-size-lede: 22px; --gas-font-size-large: 20px; --gas-font-size-body: 18px; } } /* Mobile : ≤ 767px */ @media (max-width: 767px) { :root { --gas-font-size-hero: 64px; --gas-font-size-h1: 56px; --gas-font-size-h2: 44px; --gas-font-size-h2-sm: 36px; --gas-font-size-h3: 30px; --gas-font-size-h4: 24px; --gas-font-size-stat: 72px; --gas-font-size-quote: 30px; --gas-font-size-lede: 18px; --gas-font-size-large: 17px; --gas-font-size-body: 16px; --gas-font-size-base: 15px; --gas-spacing-3xl: 64px; --gas-spacing-4xl: 80px; --gas-spacing-5xl: 96px; --gas-spacing-6xl: 120px; } } /* ============================================================ ANCRE HERO — navigation vers la première section Composant partagé, utilisé sur toutes les pages à hero texte. ============================================================ */ .gas-hero-anchor { display: inline-flex !important; align-items: center; gap: 8px; font-family: var(--gas-font-label) !important; font-size: var(--gas-font-size-label) !important; font-style: normal !important; font-weight: 400 !important; letter-spacing: var(--gas-letter-spacing-wide) !important; text-transform: uppercase !important; color: var(--gas-color-text-primary); text-decoration: none !important; margin-top: var(--gas-spacing-xl); transition: color var(--gas-transition-fast) var(--gas-easing-default); } .gas-hero-anchor:hover { color: var(--gas-color-accent); } .gas-hero-anchor:focus, .gas-hero-anchor:focus-visible { outline: none !important; box-shadow: none !important; } .gas-hero-anchor__arrow { display: inline-block !important; will-change: transform; animation: gas-anchor-bounce 2.5s ease-in-out infinite !important; } @keyframes gas-anchor-bounce { 0%, 100% { transform: translateY(0) scaleY(1.4); } 50% { transform: translateY(8px) scaleY(1.4); } }