/* ========================================================================== site-js — julie-setzekorn.fr Charte : encre nocturne + spectre pastel (une couleur par univers). ========================================================================== */ :root { /* Fonds */ --sjs-ink: #08080e; --sjs-ink-2: #0d0d16; --sjs-ink-3: #12121e; --sjs-surface: rgba(255, 255, 255, .035); --sjs-surface-2: rgba(255, 255, 255, .06); --sjs-line: rgba(255, 255, 255, .09); --sjs-line-2: rgba(255, 255, 255, .16); /* Texte */ --sjs-fg: #f3f1fb; --sjs-muted: #9c99b4; --sjs-dim: #837f9e; /* Spectre des univers */ --sjs-coral: #ff9a76; --sjs-violet: #b79cff; --sjs-mint: #7fe7d4; --sjs-blush: #ff9fc0; --sjs-gold: #f2d59c; --sjs-accent: var(--sjs-coral); --sjs-accent-soft: rgba(255, 154, 118, .16); /* Typo */ --sjs-display: "Syne", "Helvetica Neue", sans-serif; --sjs-serif: "Instrument Serif", Georgia, serif; --sjs-body: "Inter", system-ui, -apple-system, sans-serif; --sjs-mono: "Space Mono", ui-monospace, monospace; /* Système */ --sjs-wrap: 1240px; --sjs-gut: clamp(20px, 5vw, 56px); --sjs-r: 20px; --sjs-r-lg: 30px; --sjs-ease: cubic-bezier(.22, 1, .36, 1); --sjs-t: .45s var(--sjs-ease); --sjs-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9); } [data-accent="coral"] { --sjs-accent: var(--sjs-coral); --sjs-accent-soft: rgba(255,154,118,.16); } [data-accent="violet"] { --sjs-accent: var(--sjs-violet); --sjs-accent-soft: rgba(183,156,255,.16); } [data-accent="mint"] { --sjs-accent: var(--sjs-mint); --sjs-accent-soft: rgba(127,231,212,.16); } [data-accent="blush"] { --sjs-accent: var(--sjs-blush); --sjs-accent-soft: rgba(255,159,192,.16); } [data-accent="gold"] { --sjs-accent: var(--sjs-gold); --sjs-accent-soft: rgba(242,213,156,.16); } /* --------------------------------------------------------------- Fondations */ /* -------------------------------------------------------------------------- Blindage contre le thème. Divi imprime en des règles à base d'identifiant (`body#top`) et des règles de type (`h1..h6`, `p`, `a`, `ul`) qui l'emportent sur une simple classe. On qualifie donc la racine (`html.sjs-html body.sjs-body` = 0,2,2) pour repasser devant, et on force les deux propriétés vitales. -------------------------------------------------------------------------- */ html.sjs-html, html.sjs-html body.sjs-body { background-color: var(--sjs-ink) !important; color: var(--sjs-fg) !important; } .sjs-body { margin: 0; padding: 0; background: var(--sjs-ink); color: var(--sjs-fg); font-family: var(--sjs-body); font-size: 16px; line-height: 1.65; font-weight: 350; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Les titres n'héritaient que de : un `h1..h6 { color: #333 }` du thème suffisait à les rendre illisibles. On rétablit l'héritage explicitement. La graisse et la taille ne sont PAS réinitialisées ici : chaque composant les définit, et certains titres (boîte à outils) comptent sur le gras natif. */ :where(.sjs-body) h1, :where(.sjs-body) h2, :where(.sjs-body) h3, :where(.sjs-body) h4, :where(.sjs-body) h5, :where(.sjs-body) h6 { margin: 0; } html.sjs-html .sjs-body h1, html.sjs-html .sjs-body h2, html.sjs-html .sjs-body h3, html.sjs-html .sjs-body h4, html.sjs-html .sjs-body h5, html.sjs-html .sjs-body h6 { padding: 0; color: inherit; } .sjs-body * { box-sizing: border-box; } .sjs-body img, .sjs-body video { max-width: 100%; display: block; } .sjs-body a { color: inherit; text-decoration: none; } /* Marges en faible spécificité (`:where` = 0,0,1) : elles battent la feuille du navigateur, mais n'importe quelle classe composant peut les redéfinir. */ :where(.sjs-body) p, :where(.sjs-body) ul, :where(.sjs-body) ol, :where(.sjs-body) dl, :where(.sjs-body) dd, :where(.sjs-body) figure, :where(.sjs-body) blockquote { margin: 0; } /* Remplissage et puces en forte spécificité : c'est ce que le thème impose (`p { padding-bottom: 1em }`, `ul { padding-left: 20px; list-style: disc }`) et aucun composant du plugin n'en dépend. */ html.sjs-html .sjs-body p, html.sjs-html .sjs-body ul, html.sjs-html .sjs-body ol, html.sjs-html .sjs-body dl, html.sjs-html .sjs-body figure, html.sjs-html .sjs-body blockquote { padding: 0; } html.sjs-html .sjs-body ul, html.sjs-html .sjs-body ol { list-style: none; } .sjs-body button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; } .sjs-body ::selection { background: var(--sjs-accent); color: #08080e; } /* `display` déclaré sur un composant écrase l'attribut `hidden` : on le rétablit, sinon une couche masquée (visionneuse, menu) continue d'intercepter les clics. */ .sjs-body [hidden] { display: none !important; } .sjs-body :focus-visible { outline: 2px solid var(--sjs-accent); outline-offset: 3px; border-radius: 4px; } .sjs-skip { position: fixed; top: -100px; left: 16px; z-index: 999; background: var(--sjs-fg); color: var(--sjs-ink); padding: 10px 18px; border-radius: 999px; font-weight: 600; transition: top .25s; } .sjs-skip:focus { top: 16px; } .sjs-wrap { width: 100%; max-width: var(--sjs-wrap); margin: 0 auto; padding: 0 var(--sjs-gut); } .sjs-section { padding: clamp(72px, 11vw, 140px) 0; position: relative; overflow: hidden; } .sjs-section--tight { padding-top: clamp(28px, 4vw, 48px); } /* Grain + halos ambiants */ .sjs-grain { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .045; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .sjs-glow { position: absolute; z-index: 0; pointer-events: none; width: 60vw; height: 60vw; max-width: 780px; max-height: 780px; border-radius: 50%; background: radial-gradient(circle, var(--sjs-accent) 0%, transparent 68%); opacity: .11; filter: blur(30px); } .sjs-glow--head { top: -220px; right: -180px; } .sjs-glow--pillars { top: 10%; left: -260px; } .sjs-glow--process { bottom: -200px; right: -220px; } .sjs-glow--outro { top: -160px; left: 50%; transform: translateX(-50%); opacity: .16; } /* -------------------------------------------------------------- Typographie */ .sjs-h2, .sjs-pagehead__title, .sjs-hero__title, .sjs-phero__title, .sjs-outro__title { font-family: var(--sjs-display); font-weight: 800; letter-spacing: -.035em; line-height: .95; text-wrap: balance; } .sjs-h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); } .sjs-pillar__title, .sjs-expertise__title, .sjs-tl__title, .sjs-step__title, .sjs-sibling__title, .sjs-footer__name, .sjs-card__posterword, .sjs-prose h2, .sjs-prose__h, .sjs-menu__nav a { line-height: 1.06; } .sjs-h2 em, .sjs-pagehead__title em, .sjs-outro__title em { font-family: var(--sjs-serif); font-weight: 400; font-style: italic; letter-spacing: -.01em; color: var(--sjs-accent); } .sjs-eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--sjs-mono); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sjs-accent); margin-bottom: 20px; } .sjs-eyebrow span { width: 34px; height: 1px; background: currentColor; opacity: .55; flex: none; } /* Marqueur de séquence (SEQ 01, SEQ 02… SEQ FIN), repris de la conduite de montage de site-js-old, mais dans la charte du plugin : pastille cerclée à l'accent de la section, jamais une couleur en dur. L'annonce de chapitre ne change pas pour autant : le tiret et l'intitulé restent tels quels, le marqueur se contente de les précéder. `.sjs-eyebrow span` cible tous les span enfants — d'où la remise à plat de la géométrie du tiret sur la pastille, en spécificité supérieure. */ .sjs-seq { display: inline-block; flex: none; padding: 3px 9px; border-radius: 7px; border: 1px solid currentColor; font-family: var(--sjs-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sjs-accent); white-space: nowrap; } .sjs-eyebrow .sjs-seq { width: auto; height: auto; margin: 0; background: none; opacity: 1; } .sjs-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); } .sjs-head--center { margin-inline: auto; text-align: center; } .sjs-head--center .sjs-eyebrow { justify-content: center; } .sjs-lead { margin-top: 28px; font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--sjs-muted); max-width: 62ch; } .sjs-link { display: inline-flex; align-items: center; gap: 9px; font-weight: 500; color: var(--sjs-accent); border-bottom: 1px solid transparent; transition: border-color var(--sjs-t), gap var(--sjs-t); } .sjs-link i { font-style: normal; transition: transform var(--sjs-t); } .sjs-link:hover { border-color: currentColor; gap: 14px; } /* ------------------------------------------------------------------ Boutons */ .sjs-body .sjs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 30px; border-radius: 999px; font-weight: 600; font-size: .92rem; letter-spacing: .01em; border: 1px solid transparent; transition: transform var(--sjs-t), background var(--sjs-t), color var(--sjs-t), border-color var(--sjs-t); will-change: transform; } .sjs-body .sjs-btn--solid { background: var(--sjs-fg); color: var(--sjs-ink); } .sjs-body .sjs-btn--solid:hover { background: var(--sjs-accent); } .sjs-body .sjs-btn--ghost { border-color: var(--sjs-line-2); color: var(--sjs-fg); background: rgba(255, 255, 255, .02); } .sjs-body .sjs-btn--ghost:hover { border-color: var(--sjs-accent); color: var(--sjs-accent); } .sjs-body .sjs-btn--sm { padding: 11px 20px; font-size: .82rem; } .sjs-body .sjs-btn--full { width: 100%; } .sjs-btn__ico { font-size: .72rem; } /* -------------------------------------------------------------------------- Encre des surfaces claires posées sur un lien. Le CSS critique imprime `html.sjs-html .sjs-body a { color: inherit }` (0,2,2) après la feuille : sur un , il battait `.sjs-body .sjs-btn--solid` (0,2,0), et « Me contacter » finissait en blanc sur fond blanc. Les