/* ============================================================= Guzman — colors_and_type.css Palette : verdure, ciel, printemps — renouveau de la nature. Toggle vision via ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap'); /* ------------------------------------------------------------- 1. PALETTE — verdure, ciel, printemps ------------------------------------------------------------- */ :root { /* Émeraude — du bois profond à la mousse claire */ --emerald-950: #06241b; --emerald-900: #0a3d2e; /* ink végétal */ --emerald-800: #14543f; --emerald-700: #1f6e52; --emerald-600: #2d8b6a; /* émeraude principale */ --emerald-500: #4ca887; --emerald-400: #7cc4a5; --emerald-300: #a8d4ba; /* sauge claire */ --emerald-200: #cce4d5; --emerald-100: #e4f0e6; /* Ciel — du bleu nuit au matin clair */ --sky-900: #1a3d52; --sky-800: #2a5876; --sky-700: #4a7898; --sky-600: #6a98b4; /* ciel principal */ --sky-500: #88b8d4; --sky-400: #b0d0e2; --sky-300: #cee0ec; --sky-200: #e0ecf2; --sky-100: #eef4f8; /* Accents printemps — usages parcimonieux */ --bloom-500: #e89aa8; /* fleur de cerisier */ --bloom-400: #f0b8c2; --forsythia-500: #e6c454; /* jaune doux */ --forsythia-400: #f0d878; --iris-500: #9a86b8; /* mauve iris */ /* Neutres papier — chauds mais non terreux */ --paper-50: #fbfaf3; /* papier — surface card */ --ivory-100: #f6f3e6; /* ivoire chaud — bg principal allégorique */ --bone-100: #eef2ec; /* bone légèrement vert — bg moderne */ --bone-200: #e2e8e0; --bone-300: #c8d2c6; /* Encre */ --ink-950: #06241b; --ink-900: #0f2a25; /* encre principale — vert très profond */ --ink-800: #1a3a32; --ink-700: #2a4a42; --ink-600: #4a6258; /* Sémantiques utilitaires */ --hairline: oklch(0.55 0.05 165 / 0.30); --hairline-strong: oklch(0.40 0.05 165 / 0.50); --shadow-cool: oklch(0.30 0.03 180 / 0.18); --shadow-cool-soft: oklch(0.30 0.03 180 / 0.08); } /* ------------------------------------------------------------- 2. VISION TOKENS — allégorique (jardin, frondaison) ------------------------------------------------------------- */ :root, [data-vision="allegorique"] { --bg: var(--ivory-100); --bg-elev: var(--paper-50); --bg-deep: var(--emerald-100); --ink: var(--ink-900); --ink-soft: var(--ink-700); --ink-mute: var(--ink-600); --accent: var(--emerald-600); --accent-strong: var(--emerald-800); --rule: var(--hairline); --rule-strong: var(--hairline-strong); --frame-style: double; --frame-width: 1px; --frame-gap: 3px; --tempo: 700ms; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --vision-display-tracking: -0.01em; --vision-display-style: italic; } /* ------------------------------------------------------------- 3. VISION TOKENS — moderne (ciel, lumière franche) ------------------------------------------------------------- */ [data-vision="moderne"] { --bg: var(--bone-100); --bg-elev: #f7faf6; --bg-deep: var(--sky-200); --ink: var(--ink-950); --ink-soft: var(--ink-800); --ink-mute: var(--ink-700); --accent: var(--sky-700); --accent-strong: var(--sky-900); --rule: oklch(0.40 0.03 220 / 0.25); --rule-strong: oklch(0.40 0.03 220 / 0.50); --frame-style: solid; --frame-width: 1px; --frame-gap: 0px; --tempo: 480ms; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --vision-display-tracking: -0.02em; --vision-display-style: normal; } /* ------------------------------------------------------------- 4. TYPOGRAPHY — families ------------------------------------------------------------- */ :root { --font-display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif; --font-body: 'DM Sans', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; } /* ------------------------------------------------------------- 5. TYPE SCALE ------------------------------------------------------------- */ :root { --display-2xl: clamp(56px, 7.5vw, 128px); --display-xl: clamp(44px, 5.5vw, 88px); --display-lg: clamp(36px, 4vw, 64px); --display-md: clamp(28px, 3vw, 44px); --display-sm: 22px; --body-lg: 18px; --body-md: 16px; --body-sm: 14px; --body-xs: 12px; --eyebrow: 12px; --lh-tight: 1.05; --lh-snug: 1.20; --lh-normal: 1.45; --lh-loose: 1.65; --lh-prose: 1.75; --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semi: 600; --w-bold: 700; } /* ------------------------------------------------------------- 6. SPACING + RADII + ELEVATION ------------------------------------------------------------- */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 192px; --space-12: 256px; --museum-1: 24px; --museum-2: 64px; --museum-3: 120px; --museum-4: 200px; --radius-0: 0px; --radius-1: 2px; --radius-2: 4px; --radius-pill: 9999px; --elev-0: none; --elev-1: 0 1px 2px var(--shadow-cool-soft); --elev-2: 0 4px 12px -2px var(--shadow-cool-soft); --elev-3: 0 12px 32px -8px var(--shadow-cool); --elev-4: 0 24px 56px -16px var(--shadow-cool); --container-narrow: 760px; --container-default: 1200px; --container-wide: 1440px; --gutter: clamp(20px, 5vw, 80px); } /* ------------------------------------------------------------- 7. ELEMENTS — base type styles ------------------------------------------------------------- */ html { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { margin: 0; font-feature-settings: 'kern' 1, 'liga' 1, 'onum' 1; } h1, .h1 { font-family: var(--font-display); font-size: var(--display-2xl); font-weight: var(--w-regular); font-style: var(--vision-display-style); letter-spacing: var(--vision-display-tracking); line-height: var(--lh-tight); color: var(--ink); margin: 0; } h2, .h2 { font-family: var(--font-display); font-size: var(--display-xl); font-weight: var(--w-regular); font-style: var(--vision-display-style); letter-spacing: var(--vision-display-tracking); line-height: var(--lh-snug); color: var(--ink); margin: 0; } h3, .h3 { font-family: var(--font-display); font-size: var(--display-lg); font-weight: var(--w-regular); line-height: var(--lh-snug); color: var(--ink); margin: 0; } h4, .h4 { font-family: var(--font-display); font-size: var(--display-md); font-weight: var(--w-regular); line-height: var(--lh-snug); color: var(--ink); margin: 0; } h5, .h5 { font-family: var(--font-display); font-size: var(--display-sm); font-weight: var(--w-medium); line-height: var(--lh-normal); color: var(--ink); margin: 0; } p, .body { font-family: var(--font-body); font-size: var(--body-md); font-weight: var(--w-regular); line-height: var(--lh-loose); color: var(--ink); margin: 0; } .body-lg { font-family: var(--font-body); font-size: var(--body-lg); line-height: var(--lh-loose); color: var(--ink); } .body-sm { font-family: var(--font-body); font-size: var(--body-sm); line-height: var(--lh-normal); color: var(--ink-soft); } .eyebrow { font-family: var(--font-body); font-size: var(--eyebrow); font-weight: var(--w-medium); text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-mute); } .caption { font-family: var(--font-display); font-style: italic; font-size: var(--body-md); line-height: var(--lh-normal); color: var(--ink-soft); } .œuvre-title { font-family: var(--font-display); font-style: italic; font-size: var(--body-lg); font-weight: var(--w-medium); color: var(--ink); } blockquote, .pullquote { font-family: var(--font-display); font-style: italic; font-size: var(--display-md); font-weight: var(--w-regular); line-height: var(--lh-snug); color: var(--ink-soft); border: none; margin: 0; padding: 0 0 0 var(--space-5); border-left: 1px solid var(--accent); } a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 1px; transition: opacity var(--tempo) var(--ease), border-color var(--tempo) var(--ease); } a:hover { border-color: var(--accent-strong); opacity: 0.85; } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-color: transparent; } /* ------------------------------------------------------------- 8. COMPONENT TOKENS ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: var(--space-3); padding: 14px 28px; font-family: var(--font-body); font-size: var(--body-sm); font-weight: var(--w-medium); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); border-radius: var(--radius-1); transition: opacity var(--tempo) var(--ease), background var(--tempo) var(--ease), color var(--tempo) var(--ease); } .btn:hover { opacity: 0.88; } .btn:active { opacity: 0.75; } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); } .btn-ghost:hover { background: var(--ink); color: var(--bg); opacity: 1; } .btn-link { background: transparent; border: none; color: var(--ink); padding: 4px 0; border-bottom: 1px solid var(--accent); border-radius: 0; text-transform: none; letter-spacing: 0; font-weight: var(--w-regular); } .btn-link:hover { border-color: var(--accent-strong); } .tag { display: inline-flex; align-items: center; padding: 4px 12px; border: 1px solid var(--rule); border-radius: var(--radius-pill); font-family: var(--font-body); font-size: var(--body-xs); font-weight: var(--w-medium); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); background: transparent; } .tag-active { border-color: var(--ink); color: var(--ink); } .card { background: var(--bg-elev); border: 1px solid var(--rule); border-radius: var(--radius-1); padding: var(--space-7); box-shadow: var(--elev-2); } .frame { position: relative; padding: var(--space-3); background: var(--bg-elev); border: var(--frame-width) solid var(--rule-strong); } [data-vision="allegorique"] .frame::before { content: ""; position: absolute; inset: var(--frame-gap); border: var(--frame-width) solid var(--accent); pointer-events: none; } .rule { display: block; width: 64px; height: 1px; background: var(--accent); border: none; margin: var(--space-5) 0; } .rule-center { margin-left: auto; margin-right: auto; } .rule-ornament { position: relative; width: 96px; height: 1px; background: var(--accent); margin: var(--space-6) auto; } .rule-ornament::before { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; background: var(--accent); transform: translate(-50%, -50%) rotate(45deg); } .input { font-family: var(--font-body); font-size: var(--body-md); padding: 12px 0; border: none; border-bottom: 1px solid var(--rule-strong); background: transparent; color: var(--ink); width: 100%; border-radius: 0; transition: border-color var(--tempo) var(--ease); } .input::placeholder { color: var(--ink-mute); font-style: italic; } .input:focus { outline: none; border-bottom-color: var(--accent-strong); } .vision-toggle { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: var(--radius-pill); padding: 3px; background: var(--bg-elev); } .vision-toggle button { font-family: var(--font-body); font-size: var(--body-xs); font-weight: var(--w-medium); text-transform: uppercase; letter-spacing: 0.14em; padding: 8px 18px; background: transparent; border: none; color: var(--ink-mute); cursor: pointer; border-radius: var(--radius-pill); transition: background var(--tempo) var(--ease), color var(--tempo) var(--ease); } .vision-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--bg); } .container { max-width: var(--container-default); margin: 0 auto; padding: 0 var(--gutter); } .container-narrow { max-width: var(--container-narrow); } .container-wide { max-width: var(--container-wide); } .stack-2 > * + * { margin-top: var(--space-2); } .stack-3 > * + * { margin-top: var(--space-3); } .stack-4 > * + * { margin-top: var(--space-4); } .stack-5 > * + * { margin-top: var(--space-5); } .stack-6 > * + * { margin-top: var(--space-6); } .stack-museum-1 > * + * { margin-top: var(--museum-1); } .stack-museum-2 > * + * { margin-top: var(--museum-2); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }