/* Klayer DS v3, porté pour le web depuis la maquette Claude Design. Deux écarts assumés par rapport à la source : - l'@import des Google Fonts est retiré, les polices sont liées depuis le (un @import en tête de feuille bloque le rendu) ; - les jetons et motifs propres aux slides (.pied, --pied-taille) ne sont pas repris. */ /* ══ Couleurs ══ */ :root { --brume: #ECEDE7; --bg-page: #FFFFFF; --teal: #10323B; --teal-deep: #071B20; --teal-surface: #1E4B57; --teal-light: #3E7280; --ink: #141413; --text-secondary: #5F5E59; --accent-brique: #AE4F2E; --accent-blanc: var(--teal); --texte-sur-teal: #FFFFFF; --texte-sur-accent: #FFFFFF; --carte-sur-brume: var(--bg-page); --carte-sur-blanc: var(--brume); --carte-sur-teal: var(--teal-surface); } /* ══ Typographie ══ Quatre rôles, trois familles. Aucune majuscule de label : la graisse, la taille et la couleur portent le repère. */ :root { --font-display: "Poppins", system-ui, sans-serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; --font-code: "JetBrains Mono", ui-monospace, monospace; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* ⚠️ Les rôles de la maquette étaient des fragments de raccourcie `font:`, du type `var(--weight-semibold) var(--font-display)`. Cette forme est INVALIDE dans un navigateur : la raccourcie `font:` exige une taille de police, et sans elle toute la déclaration est jetée, famille comprise. La page rendait alors en serif système. Ils ne sont donc pas repris ici : page.css déclare `font-family` et `font-weight` séparément. Correspondance : display, titre → --font-display + --weight-semibold lead → --font-body + --weight-medium corps, meta → --font-body + --weight-regular label → --font-body + --weight-semibold */ --tracking-display: -0.02em; --tracking-titre: -0.02em; } /* ══ Espacement, rayons, durées ══ */ :root { --radius-xs: 3px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 11px; --radius-xl: 12px; --radius-2xl: 14px; --radius-3xl: 16px; --radius-pill: 999px; --border-width: 1px; --container-max: 1200px; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; } /* ══ Voiles ══ Une opacité posée sur un fond variable ne rend pas la même couleur selon le fond : elle se prend ici, elle ne s'invente pas dans un patron. */ :root { --voile-filigrane-teal: .16; --voile-lead: .85; --voile-attenue: .8; --voile-mention: .7; } /* ══ Lockup ══ Le seul motif de marque repris ici : glyphe, puis « Klayer » en display. Chaque scène règle ses trois mesures, elle ne réécrit pas la structure. */ :root { --lockup-ecart: 10px; --lockup-glyphe: 30px; --lockup-mot: 26px; --lockup-approche: -0.015em; } .lockup { display: flex; align-items: center; gap: var(--lockup-ecart); } .lockup img, .lockup svg { height: var(--lockup-glyphe); width: auto; display: block; } .lockup span { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--lockup-mot); letter-spacing: var(--lockup-approche); line-height: 1; }