/* * CRYOFAST PLUNGE — base.css * Reset, tokens (custom properties), typographies de base. * * Les valeurs ci-dessous sont des fallbacks si inc/design-tokens.php ne s'exécute * pas (ACF Pro absent, fronts détachés). À l'exécution normale, les overrides * injectés via wp_add_inline_style('cryofast-base', …) écrasent ces valeurs * (ordre du garanti). */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { /* Couleurs */ --cream: #F7F4F0; --sand: #EDE8E1; --sand2: #E2DBD1; --taupe: #B8AFA4; --warm-gray: #7A7268; --charcoal: #2C2A27; --near-black: #1A1815; --navy: #1B3F72; --navy-d: #152E55; --stone: #F0EDE8; --white: #FFFFFF; --border: rgba(44, 42, 39, .08); --bsand: rgba(184, 175, 164, .22); /* Typographie */ --font-titles: 'Cormorant Garamond', serif; --font-body: 'Outfit', sans-serif; --base-font-size: 13px; --h1-min: 34px; --h1-max: 54px; --h2-min: 28px; --h2-max: 42px; /* Boutons */ --btn-radius: 4px; --btn-px: 22px; --btn-py: 11px; /* Layout */ --sec-pad-y: 52px; --sec-pad-x: 72px; --sec-pad-y-mob: 36px; --sec-pad-x-mob: 20px; --header-height: 62px; --header-pad-x: 48px; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--cream); color: var(--charcoal); overflow-x: hidden; -webkit-font-smoothing: antialiased; } ::-webkit-scrollbar { width: 3px; } ::-webkit-scrollbar-thumb { background: var(--taupe); } a { text-decoration: none; color: inherit; } /* ===================================================================== * Accessibilité — focus visible custom (§13 du cahier des charges). * * Style cohérent à la charte (anneau navy 14% sur outline charcoal), * appliqué uniquement au clavier via :focus-visible — la souris ne * déclenche pas le contour. Polices touch / pointer non impactées. * ===================================================================== */ *:focus { outline: none; } :focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 2px; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; } /* Liens d'évitement pour lecteurs d'écran (skip-link), affichés au focus. */ .screen-reader-text, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .screen-reader-text:focus, .skip-link:focus { position: fixed !important; top: 12px; left: 12px; width: auto; height: auto; padding: 12px 18px; background: var(--charcoal); color: #fff; z-index: 10000; clip: auto; white-space: normal; font-size: 13px; } /* ===================================================================== * prefers-reduced-motion — neutralise les animations partout (§13 a11y). * Préserve la lisibilité sans le mouvement. * ===================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } /* Cas spécifiques connus : marquee + parallaxes + drawer animations. */ .mq-t { animation: none !important; transform: none !important; } .lp-bg { transform: none !important; } } /* Titres globaux — affinés par section dans layout.css/components.css */ h1 { font-family: var(--font-titles); font-size: clamp(var(--h1-min), 3.5vw, var(--h1-max)); font-weight: 300; color: var(--charcoal); line-height: 1.06; letter-spacing: -.5px; margin-bottom: 14px; } h1 em { font-style: italic; } h2 { font-family: var(--font-titles); font-size: clamp(var(--h2-min), 3vw, var(--h2-max)); font-weight: 400; line-height: 1.06; letter-spacing: -.3px; margin-bottom: 10px; } h2 em { font-style: italic; } .body { font-size: var(--base-font-size); color: var(--warm-gray); line-height: 1.7; max-width: 500px; font-weight: 300; } .lbl { font-size: 10px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; color: var(--taupe); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .lbl::before { content: ''; width: 14px; height: 1px; background: var(--taupe); }