/* ============================================================ Juliette Digital — Foundations Couleurs et typographie ============================================================ */ /* Polices ---- Titres = Oswald, condensé, employé en capitales. C'est la voix forte du site, à ne pas utiliser partout sous peine de l'user. Texte = Archivo, neutre, pour tout ce qui se lit vraiment. Les deux sont chargées depuis Google Fonts dans functions.php (jd_assets), surtout pas par un @import ici : un @import bloque le rendu et empêche WordPress de gérer les dépendances. */ @font-face { font-family: "Typogama Ahsing"; src: url("fonts/typogama-ahsing.otf") format("opentype"); /* path relative to this CSS file */ font-weight: 400; font-style: normal; font-display: swap; } :root { /* ----------------------------------------------------- COLORS — sampled directly from the brand banners and business cards. ----------------------------------------------------- */ /* --------------------------------------------------- PALETTE, relevée directement dans le logo jdigit (le tracé au pinceau) : le bleu est #007DA6. Les fonds sont des blancs et gris papier, pour que l'encre bleue reste la seule couleur qui parle. --------------------------------------------------- */ /* Bleu du logo */ --jd-blue: #007DA6; /* couleur exacte du tracé du logo */ --jd-blue-soft: #4FA6C4; /* survol */ --jd-blue-pale: #A8D3E2; /* Verts-bleus repris du portfolio portfoliojuliettechivot.fr */ --jd-teal: #075D58; /* couleur principale, titres et boutons */ --jd-teal-mid: #2C9B92; /* secondaire, intitulés, survols */ --jd-teal-deep: #005B5B; /* grands aplats sombres */ --jd-teal-night: #02423E; /* le plus dense */ --jd-teal-pale: #A7D8D2; /* texte secondaire sur fond sombre */ --jd-teal-wash: #E4F1EF; /* aplat très clair */ /* Jaune acide du portfolio : à réserver aux fonds sombres, il est illisible sur blanc. */ --jd-yellow: #E2D134; --jd-yellow-deep: #B4A203; /* Fonds : du blanc, pas de beige. */ --jd-cream: #FFFFFF; /* fond de page */ --jd-cream-warm: #F3F8F7; /* surface élevée, blanc très légèrement vert */ --jd-cream-deep: #E1EDEB; /* séparations et survols */ --jd-ivory: #FCFAE4; /* ivoire du portfolio, en touche seulement */ --jd-ink: #0F2B29; /* corps de texte */ --jd-ink-soft: #476B68; /* texte secondaire */ --jd-paper: #FFFFFF; --jd-white: #FFFFFF; /* Alias hérités : la première version du site parlait de prune et de crème. Les noms restent pour ne pas casser les feuilles de style existantes, mais ils pointent vers les verts-bleus. */ --jd-plum: var(--jd-teal); --jd-plum-deep: var(--jd-teal-night); --jd-plum-soft: var(--jd-teal-mid); --jd-wine: var(--jd-teal-mid); --jd-wine-light: var(--jd-blue-soft); --jd-rose: var(--jd-teal-mid); --jd-rose-light: var(--jd-teal-pale); --jd-rose-pale: var(--jd-teal-wash); /* Subtle chrome */ --jd-line: rgba(7, 93, 88, 0.16); /* filet sur fond clair */ --jd-line-dark: rgba(167, 216, 210, 0.22); /* filet sur fond sombre */ /* Semantic — light (cream) surfaces */ --bg: var(--jd-cream); --bg-elevated: var(--jd-cream-warm); --bg-paper: var(--jd-paper); --fg: var(--jd-ink); --fg-muted: var(--jd-ink-soft); --fg-subtle: rgba(42, 18, 32, 0.55); --accent: var(--jd-plum); --accent-warm: var(--jd-wine); --accent-soft: var(--jd-rose); --border: var(--jd-line); /* Semantic — dark (plum) surfaces */ --bg-dark: var(--jd-plum); --bg-dark-elevated: var(--jd-plum-soft); --bg-dark-deep: var(--jd-plum-deep); --fg-on-dark: var(--jd-cream); --fg-on-dark-muted: var(--jd-rose-light); --fg-on-dark-subtle: rgba(228, 212, 197, 0.55); --border-on-dark: var(--jd-line-dark); /* Utility states (use rarely — JD isn't a dashboard brand) */ --success: #6C7A4B; /* sage, warm green */ --warning: #C78B3C; /* amber */ --danger: #A23A2E; /* earthy red */ /* ----------------------------------------------------- TYPOGRAPHIE, registre affiche ----------------------------------------------------- Titres = Oswald, condensé, en capitales Texte = Archivo, sans neutre qui tient la lecture Manuscrit = Permanent Marker, même geste que le logo ----------------------------------------------------- */ --font-display: "Oswald", "Archivo Narrow", "Haettenschweiler", "Impact", sans-serif; --font-body: "Archivo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-hand: "Permanent Marker", "Segoe Script", cursive; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace; /* Échelle : les titres sont volontairement très grands, c'est ce qui fait tenir le registre affiche. */ --fs-display-xl: clamp(4.5rem, 10vw + 1rem, 11rem); /* hero */ --fs-display-l: clamp(3.5rem, 7.5vw + 1rem, 8rem); /* H1 */ --fs-display-m: clamp(2.5rem, 4.5vw + 1rem, 5rem); /* H2 */ --fs-display-s: clamp(1.75rem, 2vw + 1rem, 2.75rem); /* H3 */ --fs-xl: 1.375rem; /* 22px — lead paragraphs */ --fs-l: 1.125rem; /* 18px — large body */ --fs-m: 1rem; /* 16px — body */ --fs-s: 0.9375rem; /* 15px — UI */ --fs-xs: 0.8125rem; /* 13px — captions, meta */ --fs-micro: 0.6875rem; /* 11px — eyebrow labels */ /* Line-heights — generous for editorial feel */ --lh-tight: 1.05; /* display */ --lh-snug: 1.2; /* sub-headings */ --lh-normal: 1.55; /* body */ --lh-loose: 1.75; /* long reads */ /* Letter-spacing — display is tight, eyebrow/label is spaced */ --ls-tight: -0.02em; --ls-snug: -0.01em; --ls-normal: 0; --ls-wide: 0.08em; --ls-wider: 0.16em; /* eyebrow labels, tiny caps */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ----------------------------------------------------- SPACING, RADII, SHADOWS, MOTION ----------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; --radius-xs: 2px; --radius-s: 4px; --radius-m: 8px; --radius-l: 14px; --radius-xl: 24px; --radius-pill: 999px; /* Shadows — restrained, warm-tinted. JD is editorial; avoid harsh material-style elevation. */ --shadow-xs: 0 1px 2px rgba(74, 27, 55, 0.06); --shadow-s: 0 2px 8px rgba(74, 27, 55, 0.06), 0 1px 2px rgba(74, 27, 55, 0.04); --shadow-m: 0 8px 24px rgba(74, 27, 55, 0.09), 0 2px 6px rgba(74, 27, 55, 0.05); --shadow-l: 0 24px 60px rgba(74, 27, 55, 0.14), 0 6px 18px rgba(74, 27, 55, 0.07); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.55); /* Motion — gentle, never bouncy */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1); --dur-xs: 120ms; --dur-s: 180ms; --dur-m: 260ms; --dur-l: 420ms; } /* ============================================================ SEMANTIC ELEMENT STYLES Apply these by adding the class to any element, or use them as the base for your own styles. ============================================================ */ .jd-display-xl, .jd-h0 { font-family: var(--font-display); font-size: var(--fs-display-xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: var(--fw-regular); color: var(--fg); text-wrap: balance; } .jd-h1 { font-family: var(--font-display); font-size: var(--fs-display-l); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: var(--fw-regular); color: var(--fg); text-wrap: balance; } .jd-h2 { font-family: var(--font-display); font-size: var(--fs-display-m); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); font-weight: var(--fw-regular); color: var(--fg); text-wrap: balance; } .jd-h3 { font-family: var(--font-display); font-size: var(--fs-display-s); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); font-weight: var(--fw-regular); color: var(--fg); } .jd-h4 { font-family: var(--font-body); font-size: var(--fs-xl); line-height: var(--lh-snug); font-weight: var(--fw-semibold); color: var(--fg); letter-spacing: var(--ls-snug); } .jd-lead { font-family: var(--font-body); font-size: var(--fs-xl); line-height: var(--lh-normal); font-weight: var(--fw-light); color: var(--fg-muted); text-wrap: pretty; } .jd-p, p.jd-p { font-family: var(--font-body); font-size: var(--fs-m); line-height: var(--lh-loose); font-weight: var(--fw-regular); color: var(--fg); text-wrap: pretty; } .jd-small { font-family: var(--font-body); font-size: var(--fs-xs); line-height: var(--lh-normal); color: var(--fg-muted); } /* Eyebrow label — tiny caps, wide tracking. Used above section titles, inside cards, for category labels. This is a signature JD pattern. */ .jd-eyebrow { font-family: var(--font-body); font-size: var(--fs-micro); font-weight: var(--fw-medium); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--fg-muted); } /* "Stratégie · Création · Accompagnement" pattern — inline list separated by middots, uppercase tracked. Direct from the business card. */ .jd-trilogy { font-family: var(--font-body); font-size: var(--fs-s); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); text-transform: uppercase; } .jd-trilogy > * + *::before { content: "·"; margin: 0 0.6em; color: var(--fg-subtle); } /* Italic display — DM Serif Display's italic is soft and handwritten-feeling. Use it once per page for emphasis, not globally. */ .jd-italic { font-style: italic; font-family: var(--font-display); } .jd-mono { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0; } /* Utility colour classes */ .jd-on-dark { color: var(--fg-on-dark); } .jd-on-dark .jd-p, .jd-on-dark p { color: var(--fg-on-dark); } .jd-on-dark .jd-lead, .jd-on-dark .jd-small, .jd-on-dark .jd-eyebrow { color: var(--fg-on-dark-muted); } /* Optional base reset (opt-in via .jd-root) */ .jd-root { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--fs-m); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }