/* Consolidated AI Weather native styles — one canonical :root (bridged to theme.json's generated --wp--preset--* variables) followed by each page's own component CSS with its duplicate :root block removed. US Station's own CSS is intentionally kept OUT of this file — see assets/native/us-station.css. */ :root { --page-bg: var(--wp--preset--color-page-bg, #f4f8fd); --page-bg-alt: var(--wp--preset--color-page-bg-alt, #eaf2fb); --surface: var(--wp--preset--color-surface, #ffffff); --surface-soft: var(--wp--preset--color-surface-soft, #f6faff); --navy-900: var(--wp--preset--color-navy-900, #070d18); --navy-800: var(--wp--preset--color-navy-800, #0a1220); --navy-700: #101b30; --navy-600: #16233d; --ink: var(--wp--preset--color-ink, #0f1826); --ink-dim: var(--wp--preset--color-ink-dim, #4c5c6e); --ink-faint: var(--wp--preset--color-ink-faint, #8595a6); --on-navy: var(--wp--preset--color-on-navy, #eef4fc); --on-navy-dim: var(--wp--preset--color-on-navy-dim, #a9bad0); --on-navy-faint: #6d80998f; --border: #dde6f0; --border-soft: #e9f0f7; --border-navy: #24334f; --border-navy-strong: #34497a; --accent: var(--wp--preset--color-accent, #2f7dd8); --accent-strong: var(--wp--preset--color-accent-strong, #1c5cb0); --accent-soft: var(--wp--preset--color-accent-soft, #e4f0fd); --cyan: var(--wp--preset--color-cyan, #22d3ee); --good: #22c55e; --lvl-green: var(--wp--preset--color-lvl-green, #22c55e); --lvl-yellow: var(--wp--preset--color-lvl-yellow, #facc15); --lvl-orange: var(--wp--preset--color-lvl-orange, #fb923c); --lvl-red: var(--wp--preset--color-lvl-red, #b91c1c); --lvl-grey: #5c6577; --path-blue: var(--wp--preset--color-path-blue, #2f7dd8); --path-cyan: var(--wp--preset--color-path-cyan, #22b8cf); --path-violet: var(--wp--preset--color-path-violet, #8b5cf6); --path-pink: var(--wp--preset--color-path-pink, #d6469b); --radius-lg: var(--wp--custom--radius--lg, 22px); --radius-md: var(--wp--custom--radius--md, 14px); --radius-sm: var(--wp--custom--radius--sm, 9px); --shadow-1: var(--wp--custom--shadow--1, 0 1px 2px rgba(15,24,38,.05), 0 10px 28px rgba(15,24,38,.06)); --shadow-2: var(--wp--custom--shadow--2, 0 20px 60px rgba(8,14,26,.16)); --container: 1180px; --font-sans: var(--wp--preset--font-family-sans, "Inter", "Segoe UI", system-ui, Arial, sans-serif); --font-mono: var(--wp--preset--font-family-mono, "IBM Plex Mono", "SFMono-Regular", Consolas, monospace); } /* --- utility classes replacing per-instance inline styles found in source --- */ .u-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } .u-mt-8 { margin-top: 8px; } .u-mt-10 { margin-top: 10px; } .u-mb-18 { margin-bottom: 18px; } .u-mb-26 { margin-bottom: 26px; } .link-meta { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--cyan); text-decoration: none; } .qod { background: rgba(255,255,255,.04); } .level-card.lvl-green { --lvl: var(--lvl-green); } .level-card.lvl-yellow { --lvl: var(--lvl-yellow); } .level-card.lvl-orange { --lvl: var(--lvl-orange); } .level-card.lvl-red { --lvl: var(--lvl-red); } .path-card.path-blue { --path-accent: var(--path-blue); } .path-card.path-cyan { --path-accent: var(--path-cyan); } .path-card.path-violet { --path-accent: var(--path-violet); } .path-card.path-pink { --path-accent: var(--path-pink); } /* --- from assets/pages/about-0.css (root block removed, see canonical :root above) --- */ * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-sans); color: var(--ink); background: var(--page-bg); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } .wrap { max-width: 880px; margin: 0 auto; padding: 0 24px; } .eyebrow { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-strong); margin: 0 0 12px; } h1, h2 { font-weight: 800; letter-spacing: -.01em; margin: 0; } h1 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.15; } h2 { font-size: 19px; margin-bottom: 14px; } p { line-height: 1.65; color: var(--ink-dim); margin: 0; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; font-weight: 700; font-size: 14.5px; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; } .btn-primary { background: linear-gradient(180deg, #3a8ae0, var(--accent-strong)); color: #fff; box-shadow: 0 8px 22px rgba(47,125,216,.35); } .btn-sm { padding: 9px 16px; font-size: 13px; } .site-header { position: sticky; top: 0; z-index: 100; background: rgba(244,248,253,.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-soft); } .header-inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 20px; height: 68px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; } .brand img { width: 32px; height: 32px; border-radius: 50%; } .brand-text { font-weight: 800; font-size: 15.5px; letter-spacing: -.01em; color: var(--ink); } .brand-text em { font-style: normal; color: var(--accent-strong); } .main-nav { display: flex; gap: 26px; margin-left: 12px; flex: 1; } .main-nav a { font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--ink-dim); } .main-nav a:hover { color: var(--ink); } .header-actions { display: flex; align-items: center; gap: 10px; flex: none; } .lang-select { position: relative; } .lang-button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; background: #fff; border: 1px solid var(--border); border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink-dim); cursor: pointer; } .lang-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-2); padding: 6px; z-index: 200; } .lang-menu.open { display: block; } .lang-option { display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; color: var(--ink); } .lang-option:hover { background: var(--surface-soft); } .lang-option.active { background: var(--accent-soft); font-weight: 700; color: var(--accent-strong); } .nav-toggle { display: none; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 16px; } .mobile-nav { display: none; flex-direction: column; gap: 2px; padding: 10px 24px 16px; border-top: 1px solid var(--border-soft); background: var(--surface); } .mobile-nav a { padding: 12px 4px; font-weight: 600; font-size: 14.5px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--border-soft); } .mobile-nav.open { display: flex; } @media (max-width: 880px) { .main-nav { display: none; } .nav-toggle { display: block; } } .doc-hero { padding: 60px 0 40px; background: linear-gradient(180deg, var(--page-bg-alt) 0%, var(--page-bg) 80%); } .doc-hero .lede { font-size: 15.5px; max-width: 640px; margin-top: 14px; } .doc-body { padding: 20px 0 80px; } .doc-section { padding: 30px 0; border-bottom: 1px solid var(--border-soft); } .doc-section:last-child { border-bottom: 0; } .doc-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; } .doc-links a { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--accent-strong); text-decoration: none; padding: 10px 16px; border: 1px solid var(--border); border-radius: 999px; background: #fff; } .doc-links a:hover { border-color: var(--accent); } footer { background: var(--navy-900); color: var(--on-navy-dim); padding: 56px 0 28px; } .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: 32px; margin-bottom: 40px; max-width: var(--container); margin-left: auto; margin-right: auto; padding: 0 24px; } .footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .footer-brand img { width: 26px; height: 26px; border-radius: 50%; } .footer-brand span { font-weight: 800; color: var(--on-navy); } /* This tagline

carries no class, so the global `p { color: var(--ink-dim) }` (a light-theme color) directly matches it and beats the inherited dark-theme footer color -- hence the dedicated override here. */ .footer-brand + p { color: #94A3B8; } .footer-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--on-navy); margin-bottom: 14px; } .footer-col a { display: block; font-size: 13.5px; text-decoration: none; color: var(--on-navy-dim); margin-bottom: 10px; } .footer-col a:hover { color: #fff; } .footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--border-navy); font-size: 12px; color: #94A3B8; max-width: var(--container); margin: 0 auto; padding-left: 24px; padding-right: 24px; } @media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } } /* --- from assets/pages/contact-0.css (root block removed, see canonical :root above) --- */ * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-sans); color: var(--ink); background: var(--page-bg); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } .wrap { max-width: 880px; margin: 0 auto; padding: 0 24px; } .eyebrow { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-strong); margin: 0 0 12px; } h1, h2 { font-weight: 800; letter-spacing: -.01em; margin: 0; } h1 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.15; } h2 { font-size: 17px; margin-bottom: 10px; } p { line-height: 1.65; color: var(--ink-dim); margin: 0; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; font-weight: 700; font-size: 14.5px; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; } .btn-primary { background: linear-gradient(180deg, #3a8ae0, var(--accent-strong)); color: #fff; box-shadow: 0 8px 22px rgba(47,125,216,.35); } .btn-sm { padding: 9px 16px; font-size: 13px; } .site-header { position: sticky; top: 0; z-index: 100; background: rgba(244,248,253,.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-soft); } .header-inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 20px; height: 68px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; } .brand img { width: 32px; height: 32px; border-radius: 50%; } .brand-text { font-weight: 800; font-size: 15.5px; letter-spacing: -.01em; color: var(--ink); } .brand-text em { font-style: normal; color: var(--accent-strong); } .main-nav { display: flex; gap: 26px; margin-left: 12px; flex: 1; } .main-nav a { font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--ink-dim); } .main-nav a:hover { color: var(--ink); } .header-actions { display: flex; align-items: center; gap: 10px; flex: none; } .lang-select { position: relative; } .lang-button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; background: #fff; border: 1px solid var(--border); border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink-dim); cursor: pointer; } .lang-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-2); padding: 6px; z-index: 200; } .lang-menu.open { display: block; } .lang-option { display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; color: var(--ink); } .lang-option:hover { background: var(--surface-soft); } .lang-option.active { background: var(--accent-soft); font-weight: 700; color: var(--accent-strong); } .nav-toggle { display: none; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 16px; } .mobile-nav { display: none; flex-direction: column; gap: 2px; padding: 10px 24px 16px; border-top: 1px solid var(--border-soft); background: var(--surface); } .mobile-nav a { padding: 12px 4px; font-weight: 600; font-size: 14.5px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--border-soft); } .mobile-nav.open { display: flex; } @media (max-width: 880px) { .main-nav { display: none; } .nav-toggle { display: block; } } .doc-hero { padding: 60px 0 40px; background: linear-gradient(180deg, var(--page-bg-alt) 0%, var(--page-bg) 80%); } .doc-hero .lede { font-size: 15.5px; max-width: 640px; margin-top: 14px; } .doc-body { padding: 20px 0 80px; } .contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 30px; } .contact-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px; box-shadow: var(--shadow-1); } .contact-card a.btn { margin-top: 14px; } .contact-note { font-size: 12.5px; color: var(--ink-faint); border-left: 2px solid var(--border); padding-left: 12px; margin-top: 10px; } @media (max-width: 700px) { .contact-grid { grid-template-columns: 1fr; } } footer { background: var(--navy-900); color: var(--on-navy-dim); padding: 56px 0 28px; } .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: 32px; margin-bottom: 40px; max-width: var(--container); margin-left: auto; margin-right: auto; padding: 0 24px; } .footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .footer-brand img { width: 26px; height: 26px; border-radius: 50%; } .footer-brand span { font-weight: 800; color: var(--on-navy); } /* This tagline

carries no class, so the global `p { color: var(--ink-dim) }` (a light-theme color) directly matches it and beats the inherited dark-theme footer color -- hence the dedicated override here. */ .footer-brand + p { color: #94A3B8; } .footer-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--on-navy); margin-bottom: 14px; } .footer-col a { display: block; font-size: 13.5px; text-decoration: none; color: var(--on-navy-dim); margin-bottom: 10px; } .footer-col a:hover { color: #fff; } .footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--border-navy); font-size: 12px; color: #94A3B8; max-width: var(--container); margin: 0 auto; padding-left: 24px; padding-right: 24px; } @media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } } /* --- from assets/pages/daily-brief-0.css (root block removed, see canonical :root above) --- */ * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-sans); color: var(--ink); background: var(--page-bg); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } .wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; } .eyebrow { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-strong); margin: 0 0 12px; } h1, h2, h3 { font-weight: 800; letter-spacing: -.01em; margin: 0; } h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.1; } h3 { font-size: 15.5px; } p { line-height: 1.6; color: var(--ink-dim); margin: 0; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; font-weight: 700; font-size: 14.5px; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; } .btn-primary { background: linear-gradient(180deg, #3a8ae0, var(--accent-strong)); color: #fff; box-shadow: 0 8px 22px rgba(47,125,216,.35); } .btn-sm { padding: 9px 16px; font-size: 13px; } .site-header { position: sticky; top: 0; z-index: 100; background: rgba(244,248,253,.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-soft); } .header-inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 20px; height: 68px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; } .brand img { width: 32px; height: 32px; border-radius: 50%; } .brand-text { font-weight: 800; font-size: 15.5px; letter-spacing: -.01em; color: var(--ink); } .brand-text em { font-style: normal; color: var(--accent-strong); } .main-nav { display: flex; gap: 26px; margin-left: 12px; flex: 1; } .main-nav a { font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--ink-dim); } .main-nav a.current, .main-nav a:hover { color: var(--ink); } .header-actions { display: flex; align-items: center; gap: 10px; flex: none; } .lang-select { position: relative; } .lang-button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; background: #fff; border: 1px solid var(--border); border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink-dim); cursor: pointer; } .lang-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-2); padding: 6px; z-index: 200; } .lang-menu.open { display: block; } .lang-option { display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; color: var(--ink); } .lang-option:hover { background: var(--surface-soft); } .lang-option.active { background: var(--accent-soft); font-weight: 700; color: var(--accent-strong); } .nav-toggle { display: none; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 16px; } .mobile-nav { display: none; flex-direction: column; gap: 2px; padding: 10px 24px 16px; border-top: 1px solid var(--border-soft); background: var(--surface); } .mobile-nav a { padding: 12px 4px; font-weight: 600; font-size: 14.5px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--border-soft); } .mobile-nav.open { display: flex; } @media (max-width: 880px) { .main-nav { display: none; } .nav-toggle { display: block; } } .brief-hero { padding: 70px 0; background: radial-gradient(900px 380px at 85% -10%, rgba(47,125,216,.14), transparent 60%), linear-gradient(180deg, var(--page-bg-alt) 0%, var(--page-bg) 65%); text-align: center; } .brief-hero .lede { font-size: 16px; max-width: 560px; margin: 14px auto 0; } .brief-body { padding: 60px 0 80px; } .brief-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } .brief-includes { list-style: none; margin: 0; padding: 0; } .brief-includes li { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--border-soft); } .brief-includes li:first-child { border-top: 0; } .brief-includes .n { font-family: var(--font-mono); font-size: 12px; color: var(--accent-strong); font-weight: 700; flex: none; width: 22px; } .signup-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-2); } .signup-form { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; } .signup-form input { height: 48px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border); font: inherit; font-size: 14px; background: #fff; } .signup-note { font-size: 11.5px; color: var(--ink-faint); margin-top: 12px; } @media (max-width: 860px) { .brief-grid { grid-template-columns: 1fr; } } footer { background: var(--navy-900); color: var(--on-navy-dim); padding: 56px 0 28px; } .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: 32px; margin-bottom: 40px; } .footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .footer-brand img { width: 26px; height: 26px; border-radius: 50%; } .footer-brand span { font-weight: 800; color: var(--on-navy); } /* This tagline

carries no class, so the global `p { color: var(--ink-dim) }` (a light-theme color) directly matches it and beats the inherited dark-theme footer color -- hence the dedicated override here. */ .footer-brand + p { color: #94A3B8; } .footer-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--on-navy); margin-bottom: 14px; } .footer-col a { display: block; font-size: 13.5px; text-decoration: none; color: var(--on-navy-dim); margin-bottom: 10px; } .footer-col a:hover { color: #fff; } .footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--border-navy); font-size: 12px; color: #94A3B8; } @media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } } /* --- from assets/pages/home-0.css (root block removed, see canonical :root above) --- */ /* ========================================================== Design tokens — "Global AI Weather Station" direction. Judgment colors (green/yellow/orange/red) are copied verbatim from styles/themes.css and must stay identical to the real widgets — see AI_WEATHER canon: color meaning never changes. ========================================================== */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); color: var(--ink); background: var(--page-bg); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } .wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; } .eyebrow { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-strong); margin: 0 0 12px; } .on-navy .eyebrow { color: var(--cyan); } .eyebrow.center { text-align: center; } h1, h2, h3 { font-weight: 800; letter-spacing: -.01em; margin: 0; } h1 { font-size: clamp(32px, 4.6vw, 54px); line-height: 1.08; } h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.15; } h3 { font-size: 18px; line-height: 1.3; } p { line-height: 1.6; color: var(--ink-dim); margin: 0; } .on-navy, .on-navy p { color: var(--on-navy-dim); } .on-navy h2, .on-navy h3 { color: var(--on-navy); } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; font-weight: 700; font-size: 14.5px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: linear-gradient(180deg, #3a8ae0, var(--accent-strong)); color: #fff; box-shadow: 0 8px 22px rgba(47,125,216,.35); } .btn-primary:hover { box-shadow: 0 10px 28px rgba(47,125,216,.45); } .btn-ghost { background: #fff; color: var(--ink); border-color: var(--border); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent-strong); } .btn-ghost-invert { background: transparent; color: var(--on-navy); border-color: var(--border-navy); } .btn-ghost-invert:hover { border-color: var(--cyan); color: #fff; } .btn-sm { padding: 9px 16px; font-size: 13px; } /* ---------------- Header ---------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(244,248,253,.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-soft); } .header-inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 20px; height: 68px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; } .brand img { width: 32px; height: 32px; border-radius: 50%; } .brand-text { font-weight: 800; font-size: 15.5px; letter-spacing: -.01em; color: var(--ink); } .brand-text em { font-style: normal; color: var(--accent-strong); } .main-nav { display: flex; gap: 26px; margin-left: 12px; flex: 1; } .main-nav a { font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--ink-dim); } .main-nav a:hover { color: var(--ink); } .header-actions { display: flex; align-items: center; gap: 10px; flex: none; } .lang-select { position: relative; } .lang-button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; background: #fff; border: 1px solid var(--border); border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink-dim); cursor: pointer; } .lang-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-2); padding: 6px; z-index: 200; } .lang-menu.open { display: block; } .lang-option { display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; color: var(--ink); } .lang-option:hover { background: var(--surface-soft); } .lang-option.active { background: var(--accent-soft); font-weight: 700; color: var(--accent-strong); } .nav-toggle { display: none; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 16px; } .mobile-nav { display: none; flex-direction: column; gap: 2px; padding: 10px 24px 16px; border-top: 1px solid var(--border-soft); background: var(--surface); } .mobile-nav a { padding: 12px 4px; font-weight: 600; font-size: 14.5px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--border-soft); } .mobile-nav.open { display: flex; } @media (max-width: 880px) { .main-nav { display: none; } .nav-toggle { display: block; } } /* ---------------- Section shell ---------------- */ section { padding: 88px 0; } .dark { background: radial-gradient(1200px 500px at 20% -10%, #122241 0%, transparent 60%), linear-gradient(180deg, var(--navy-800), var(--navy-900)); position: relative; overflow: hidden; } .dark::before { content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(75% 60% at 50% 20%, #000 40%, transparent 100%); } .dark > .wrap { position: relative; z-index: 1; } .section-head { max-width: 640px; margin: 0 0 44px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } /* ---------------- Hero ---------------- */ .hero { padding: 56px 0 80px; background: radial-gradient(900px 380px at 85% -10%, rgba(47,125,216,.14), transparent 60%), linear-gradient(180deg, var(--page-bg-alt) 0%, var(--page-bg) 65%); position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; opacity: .6; pointer-events: none; background-image: linear-gradient(rgba(16,32,54,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(16,32,54,.05) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(70% 55% at 78% 15%, #000 30%, transparent 100%); } .hero .wrap { position: relative; z-index: 1; } .hero-copy { width: 100%; } .hero-copy h1 { max-width: 78%; } .hero-copy .lede { font-size: 17px; max-width: 68%; margin-top: 20px; } .hero-alert { margin-top: 26px; padding: 15px 20px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 12px 12px 0; font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--ink); max-width: 68%; } .rigor-note { margin-top: 22px; font-size: 13px; color: var(--ink-faint); padding-left: 12px; border-left: 2px solid var(--border); max-width: 68%; } .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; } @media (max-width: 980px) { .hero-copy h1, .hero-copy .lede, .hero-alert, .rigor-note { max-width: 100%; } } /* ---------------- Levels ---------------- */ .levels-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .level-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px 20px; box-shadow: var(--shadow-1); border-top: 4px solid var(--lvl); } .level-card .dot { width: 30px; height: 30px; border-radius: 50%; background: var(--lvl); box-shadow: 0 0 0 5px color-mix(in srgb, var(--lvl) 16%, transparent), 0 4px 14px color-mix(in srgb, var(--lvl) 45%, transparent); margin-bottom: 16px; } .level-card h3 { margin-bottom: 3px; } .level-fr { font-size: 12px; color: var(--ink-faint); margin-bottom: 10px; } .level-fr:empty { display: none; } .level-card p { font-size: 13.5px; } .levels-intro { max-width: 640px; margin: 14px auto 0; } .levels-note { max-width: 680px; margin: 24px auto 0; text-align: center; font-size: 12px; color: var(--ink-faint); } @media (max-width: 880px) { .levels-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .levels-grid { grid-template-columns: 1fr; } } /* ---------------- Today / wall ---------------- */ .frame-fallback { display: none; margin-top: 12px; font-size: 12.5px; color: var(--on-navy-faint); } .frame-fallback.is-visible { display: block; } .frame-fallback a { color: var(--cyan); font-weight: 700; text-decoration: none; } .frame-fallback a:hover { text-decoration: underline; } /* ---------------- Quiz block ---------------- */ .quiz-block { display: grid; grid-template-columns: 58fr 42fr; gap: 52px; align-items: center; } .quiz-copy p { font-size: 14.5px; margin-top: 14px; } .quiz-conclusion { margin-top: 20px; font-size: 15.5px; font-weight: 700; color: var(--on-navy); } .quiz-frame-wrap { display: flex; flex-direction: column; align-items: center; } .quiz-frame { width: 100%; max-width: 420px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-navy); background: #0c1420; box-shadow: var(--shadow-2); position: relative; } .quiz-frame::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--cyan), var(--accent)); z-index: 2; } .quiz-frame iframe { display: block; width: 100%; height: 420px; border: 0; transition: height .25s ease; } .quiz-frame-wrap .frame-fallback { max-width: 420px; text-align: center; } @media (max-width: 860px) { .quiz-block { grid-template-columns: 1fr; gap: 32px; } } /* ---------------- Four entry points ---------------- */ .paths-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); overflow: hidden; } .path-card { background: var(--surface); padding: 30px 26px 28px; display: flex; flex-direction: column; position: relative; } .path-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--path-accent); } .path-num { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--path-accent); letter-spacing: .06em; margin-bottom: 18px; } .path-card .path-eyebrow { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--path-accent); margin: 0 0 8px; } .path-card h3 { font-size: 17px; line-height: 1.28; margin-bottom: 10px; } .path-card p { font-size: 13.5px; flex: 1; } .path-card a.path-cta { margin-top: 18px; display: inline-flex; font-size: 13px; font-weight: 700; text-decoration: none; color: var(--path-accent); } .path-card a.path-cta:hover { text-decoration: underline; } @media (max-width: 980px) { .paths-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .paths-grid { grid-template-columns: 1fr; } } .paths-intro { max-width: 720px; margin-bottom: 34px; } .code-block { background: var(--navy-900); border: 1px solid var(--border-navy); border-radius: var(--radius-md); padding: 18px 20px; position: relative; overflow-x: auto; } .code-block pre { margin: 0; font-family: var(--font-mono); font-size: 12.5px; color: #cfe3ff; white-space: pre-wrap; word-break: break-all; } .copy-btn { position: absolute; top: 12px; right: 12px; font-family: var(--font-sans); font-size: 11.5px; font-weight: 700; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 6px 12px; cursor: pointer; } .copy-btn:hover { background: rgba(255,255,255,.14); } /* ---------------- Instrument ---------------- */ .instrument-section .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; } .instrument-copy p { margin-top: 14px; font-size: 14.5px; } .instrument-copy .disclaimer { margin-top: 22px; font-size: 12.5px; color: var(--on-navy-dim); border-left: 2px solid var(--border-navy); padding-left: 12px; } .instrument-links { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; } .instrument-panel { background: rgba(255,255,255,.03); border: 1px solid var(--border-navy); border-radius: var(--radius-lg); padding: 26px; } .il-row { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--border-navy); } .il-row:last-child { border-bottom: 0; } .il-label { font-size: 12.5px; color: var(--on-navy-faint); } .il-value { font-family: var(--font-mono); font-size: 14px; color: var(--on-navy); font-weight: 600; text-align: right; } @media (max-width: 880px) { .instrument-section .wrap { grid-template-columns: 1fr; } } /* ---------------- Editorial update 2026-09-19 (Wording Météo des IA.docx): both "dark" sections on THIS page (quiz + instrument) move from navy-on-dark to a light sky-blue notebook-paper treatment, echoing each other. Scoped to #quiz-section/#instrument (IDs, higher specificity) rather than the shared .dark/.on-navy classes, because those classes are redefined identically in other pages' own stylesheets (today-0.css, how-it-works-0.css, ...) which are concatenated after this file — a plain .dark/.on-navy override here would be silently overridden by theirs and would incorrectly leak into pages this edit must not touch. */ #quiz-section, #instrument { background: radial-gradient(900px 380px at 15% -10%, rgba(47,125,216,.10), transparent 60%), linear-gradient(180deg, var(--page-bg-alt) 0%, var(--page-bg) 100%); } #quiz-section::before, #instrument::before { background-image: linear-gradient(rgba(16,32,54,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(16,32,54,.06) 1px, transparent 1px); opacity: 1; } #quiz-section, #quiz-section p, #instrument, #instrument p { color: var(--ink-dim); } #quiz-section h2, #quiz-section h3, #quiz-section h4, #instrument h2, #instrument h3, #instrument h4 { color: var(--ink); } #quiz-section .eyebrow, #instrument .eyebrow { color: var(--accent-strong); } #instrument .btn-ghost-invert { background: #fff; color: var(--ink); border-color: var(--border); } #instrument .btn-ghost-invert:hover { border-color: var(--accent); color: var(--accent-strong); } #quiz-section { padding: 48px 0; } .quiz-card-title { font-size: 15px; letter-spacing: .04em; margin-bottom: 6px; } .quiz-card-subtext { font-size: 13px; color: var(--ink-faint); margin-bottom: 14px; } #quiz-section .quiz-frame { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-1); } #quiz-section .quiz-frame iframe { height: 340px; } #quiz-section .quiz-conclusion { color: var(--ink); } #quiz-section .frame-fallback, #quiz-section .frame-fallback a { color: var(--ink-faint); } #quiz-section .frame-fallback a { color: var(--accent-strong); } #instrument .instrument-panel { background: var(--surface); border-color: var(--border); } #instrument .il-row { border-bottom-color: var(--border); } #instrument .il-label { color: var(--ink-faint); } #instrument .il-value { color: var(--ink); } #instrument .instrument-copy .disclaimer { border-left-color: var(--border); } /* ---------------- Newsletter / footer ---------------- */ .newsletter { background: var(--surface-soft); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); } .newsletter .wrap { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; } .newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; } .newsletter-form input { height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border); font: inherit; font-size: 14px; min-width: 260px; background: #fff; } .newsletter-note { font-size: 11.5px; color: var(--ink-faint); margin-top: 8px; } footer { background: var(--navy-900); color: var(--on-navy-dim); padding: 56px 0 28px; } .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: 32px; margin-bottom: 40px; } .footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .footer-brand img { width: 26px; height: 26px; border-radius: 50%; } .footer-brand span { font-weight: 800; color: var(--on-navy); } /* This tagline

carries no class, so the global `p { color: var(--ink-dim) }` (a light-theme color) directly matches it and beats the inherited dark-theme footer color -- hence the dedicated override here. */ .footer-brand + p { color: #94A3B8; } .footer-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--on-navy); margin-bottom: 14px; } .footer-col a { display: block; font-size: 13.5px; text-decoration: none; color: var(--on-navy-dim); margin-bottom: 10px; } .footer-col a:hover { color: #fff; } .footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--border-navy); font-size: 12px; color: #94A3B8; } @media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } } /* --- from assets/pages/how-it-works-0.css (root block removed, see canonical :root above) --- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); color: var(--ink); background: var(--page-bg); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } .wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; } .eyebrow { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-strong); margin: 0 0 12px; } .eyebrow.center { text-align: center; } .on-navy .eyebrow { color: var(--cyan); } h1, h2, h3 { font-weight: 800; letter-spacing: -.01em; margin: 0; } h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.1; } h2 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.18; } p { line-height: 1.6; color: var(--ink-dim); margin: 0; } .on-navy, .on-navy p { color: var(--on-navy-dim); } .on-navy h2, .on-navy h3 { color: var(--on-navy); } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; font-weight: 700; font-size: 14.5px; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; } .btn-primary { background: linear-gradient(180deg, #3a8ae0, var(--accent-strong)); color: #fff; box-shadow: 0 8px 22px rgba(47,125,216,.35); } .btn-sm { padding: 9px 16px; font-size: 13px; } .site-header { position: sticky; top: 0; z-index: 100; background: rgba(244,248,253,.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-soft); } .header-inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 20px; height: 68px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; } .brand img { width: 32px; height: 32px; border-radius: 50%; } .brand-text { font-weight: 800; font-size: 15.5px; letter-spacing: -.01em; color: var(--ink); } .brand-text em { font-style: normal; color: var(--accent-strong); } .main-nav { display: flex; gap: 26px; margin-left: 12px; flex: 1; } .main-nav a { font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--ink-dim); } .main-nav a.current, .main-nav a:hover { color: var(--ink); } .header-actions { display: flex; align-items: center; gap: 10px; flex: none; } .lang-select { position: relative; } .lang-button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; background: #fff; border: 1px solid var(--border); border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink-dim); cursor: pointer; } .lang-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-2); padding: 6px; z-index: 200; } .lang-menu.open { display: block; } .lang-option { display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; color: var(--ink); } .lang-option:hover { background: var(--surface-soft); } .lang-option.active { background: var(--accent-soft); font-weight: 700; color: var(--accent-strong); } .nav-toggle { display: none; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 16px; } .mobile-nav { display: none; flex-direction: column; gap: 2px; padding: 10px 24px 16px; border-top: 1px solid var(--border-soft); background: var(--surface); } .mobile-nav a { padding: 12px 4px; font-weight: 600; font-size: 14.5px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--border-soft); } .mobile-nav.open { display: flex; } @media (max-width: 880px) { .main-nav { display: none; } .nav-toggle { display: block; } } section { padding: 68px 0; } .dark { background: radial-gradient(1200px 500px at 20% -10%, #122241 0%, transparent 60%), linear-gradient(180deg, var(--navy-800), var(--navy-900)); position: relative; overflow: hidden; } .dark::before { content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(75% 60% at 50% 20%, #000 40%, transparent 100%); } .dark > .wrap { position: relative; z-index: 1; } .section-head { max-width: 680px; margin: 0 0 40px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .page-intro { padding: 52px 0 40px; background: linear-gradient(180deg, var(--page-bg-alt) 0%, var(--page-bg) 80%); text-align: center; } .page-intro .lede { font-size: 16px; max-width: 640px; margin: 14px auto 0; } /* Inter-section spacing: these four sections were converted from real

tags to wp-block-group divs with an id, so the shared `section { padding: 68px 0 }` rule above no longer reaches them at all — they currently carry zero vertical spacing of their own. #for-readers is still a real
(server-rendered by aw_readers_render()) so it does inherit that rule, but is pinned to the same explicit value here for consistency. The bare final-links wrapper has no id of its own, so its one page-unique descendant (.final-links, used nowhere else on the site) is used to reach it via :has() instead of adding a class in the content. */ #why, #what-we-measure, #how-produced, #limits, #for-readers, .wrap:has(> .final-links) { padding-block: 64px; } @media (max-width: 780px) { #why, #what-we-measure, #how-produced, #limits, #for-readers, .wrap:has(> .final-links) { padding-block: 40px; } } /* Neutralizes WordPress's own block-spacing CSS (.is-layout-flow > *:not (:first-child) gets an automatic margin-top), which otherwise fights this grid's own `gap` and misaligns every card but the first — same fix applied on the Today page's stat/level grids. */ .levels-grid > *, .observe-grid > * { margin-top: 0; } .levels-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .level-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px 20px; box-shadow: var(--shadow-1); border-top: 4px solid var(--lvl); } .level-card .dot { width: 30px; height: 30px; border-radius: 50%; background: var(--lvl); box-shadow: 0 0 0 5px color-mix(in srgb, var(--lvl) 16%, transparent), 0 4px 14px color-mix(in srgb, var(--lvl) 45%, transparent); margin-bottom: 16px; } .level-card h3 { margin-bottom: 3px; } .level-fr { font-size: 12px; color: var(--ink-faint); margin-bottom: 10px; } .level-card p { font-size: 13.5px; } @media (max-width: 880px) { .levels-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .levels-grid { grid-template-columns: 1fr; } } .observe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .observe-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 24px; box-shadow: var(--shadow-1); } .observe-card h3 { margin-bottom: 8px; } .observe-card p { font-size: 13.5px; } .observe-stat { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); font-family: var(--font-mono); font-size: 20px; font-weight: 600; } /* #what-we-measure carries .dark.on-navy for its background, and that class's own text-color rules (.on-navy h3, .on-navy p — defined elsewhere and re-declared per page in the shared site.css) have the same specificity as a plain .observe-card selector, so the winner depends on concatenation order rather than intent. Scoping by the section's own id guarantees these three colors win regardless. */ #what-we-measure .observe-card h3 { color: #0B1220; } #what-we-measure .observe-card p { color: #243247; } #what-we-measure .observe-card .observe-stat { color: #0B5EA8; } .stat-label { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; } @media (max-width: 880px) { .observe-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .observe-grid { grid-template-columns: 1fr; } } .how-steps > * { margin-top: 0; } .how-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; } .how-step { padding: 0 18px 0 0; position: relative; } .how-step:not(:last-child)::after { content: ""; position: absolute; top: 19px; left: calc(100% - 9px); width: 18px; border-top: 2px dashed var(--border-navy); } .step-num { width: 38px; height: 38px; border-radius: 50%; background: rgba(34,211,238,.1); border: 1px solid var(--border-navy); color: var(--cyan); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; margin-bottom: 16px; } .how-step h3 { font-size: 15.5px; margin-bottom: 8px; } .how-step p { font-size: 13px; } @media (max-width: 880px) { .how-steps { grid-template-columns: 1fr 1fr; gap: 28px; } .how-step:not(:last-child)::after { display: none; } } @media (max-width: 560px) { .how-steps { grid-template-columns: 1fr; } } .methodology-cta { text-align: center; margin-top: 44px; } .block-intro { max-width: 760px; font-size: 15.5px; margin-bottom: 34px; } .on-navy .block-intro { color: var(--on-navy-dim); } .sub-head { margin: 44px 0 22px; } .sub-head h3 { font-size: 18px; } .sub-head p { font-size: 13.5px; margin-top: 8px; max-width: 640px; } .limits-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; max-width: 780px; } .limits-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 14.5px; line-height: 1.6; color: var(--ink-dim); } .limits-list li::before { content: "—"; color: var(--ink-faint); flex: none; font-weight: 700; } .limits-lead { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 22px; } /* #limits carries .dark.on-navy for its background, so the light-bg defaults above (var(--ink-dim), var(--ink-faint)) are unreadable there — a pre-existing contrast issue, since .limits-list li's own specificity already beats the .on-navy inherited fallback. Fixed by scoping to the section's own id, which also keeps .limits-list correctly dark-on-light for its reuse in the light closing section below (same class, opposite background, hence the id scope rather than changing the base rule). */ #limits .limits-list li { color: var(--on-navy-dim); } #limits .limits-list li::before { color: var(--on-navy-faint); } /* "Cette approche repose sur quatre différences" list, in the light "UNE NOUVELLE COUCHE DE MESURE" section. Deliberately a separate class from .limits-list above (not a reuse): that one puts `display:flex` directly on the
  • , which is fine when an
  • holds a single text node, but here each
  • holds two children -- a lead-in and a trailing text node -- so flex laid them out as separate row items (the reported column split, oversized gaps, and stranded commas). Here the
  • stays a normal block; the dash is a hanging marker via absolute positioning, so the bold lead-in and the rest of the sentence flow together as one continuous line that wraps normally. */ .four-differences-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; max-width: 780px; } .four-differences-list li { position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.6; color: var(--ink-dim); } .four-differences-list li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--ink-faint); font-weight: 700; } /* The two buttons are each their own wp:buttons block, so WordPress's block-spacing CSS gives the second one a 24px margin-top regardless of this container's own flex layout — the buttons then sit on two different horizontal axes despite display:flex. Neutralized on both wrapper levels since either could carry it depending on markup. */ .final-links { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; } .final-links > * { margin: 0; } .final-links .wp-block-button { margin: 0; } footer { background: var(--navy-900); color: var(--on-navy-dim); padding: 56px 0 28px; } .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: 32px; margin-bottom: 40px; } .footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .footer-brand img { width: 26px; height: 26px; border-radius: 50%; } .footer-brand span { font-weight: 800; color: var(--on-navy); } /* This tagline

    carries no class, so the global `p { color: var(--ink-dim) }` (a light-theme color) directly matches it and beats the inherited dark-theme footer color -- hence the dedicated override here. */ .footer-brand + p { color: #94A3B8; } .footer-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--on-navy); margin-bottom: 14px; } .footer-col a { display: block; font-size: 13.5px; text-decoration: none; color: var(--on-navy-dim); margin-bottom: 10px; } .footer-col a:hover { color: #fff; } .footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--border-navy); font-size: 12px; color: #94A3B8; } @media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } } /* --- from assets/pages/stations-0.css (root block removed, see canonical :root above) --- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); color: var(--ink); background: var(--page-bg); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } .wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; } .eyebrow { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-strong); margin: 0 0 12px; } h1, h2, h3 { font-weight: 800; letter-spacing: -.01em; margin: 0; } h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.1; } h2 { font-size: clamp(20px, 2.2vw, 24px); line-height: 1.2; } p { line-height: 1.6; color: var(--ink-dim); margin: 0; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; font-weight: 700; font-size: 14.5px; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; } .btn-primary { background: linear-gradient(180deg, #3a8ae0, var(--accent-strong)); color: #fff; box-shadow: 0 8px 22px rgba(47,125,216,.35); } .btn-ghost { background: #fff; color: var(--ink); border-color: var(--border); } .btn-sm { padding: 9px 16px; font-size: 13px; } .site-header { position: sticky; top: 0; z-index: 100; background: rgba(244,248,253,.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-soft); } .header-inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 20px; height: 68px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; } .brand img { width: 32px; height: 32px; border-radius: 50%; } .brand-text { font-weight: 800; font-size: 15.5px; letter-spacing: -.01em; color: var(--ink); } .brand-text em { font-style: normal; color: var(--accent-strong); } .main-nav { display: flex; gap: 26px; margin-left: 12px; flex: 1; } .main-nav a { font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--ink-dim); } .main-nav a.current, .main-nav a:hover { color: var(--ink); } .header-actions { display: flex; align-items: center; gap: 10px; flex: none; } .lang-select { position: relative; } .lang-button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; background: #fff; border: 1px solid var(--border); border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink-dim); cursor: pointer; } .lang-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-2); padding: 6px; z-index: 200; } .lang-menu.open { display: block; } .lang-option { display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; color: var(--ink); } .lang-option:hover { background: var(--surface-soft); } .lang-option.active { background: var(--accent-soft); font-weight: 700; color: var(--accent-strong); } .nav-toggle { display: none; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 16px; } .mobile-nav { display: none; flex-direction: column; gap: 2px; padding: 10px 24px 16px; border-top: 1px solid var(--border-soft); background: var(--surface); } .mobile-nav a { padding: 12px 4px; font-weight: 600; font-size: 14.5px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--border-soft); } .mobile-nav.open { display: flex; } @media (max-width: 880px) { .main-nav { display: none; } .nav-toggle { display: block; } } section { padding: 68px 0; } .page-intro { padding: 52px 0 40px; background: linear-gradient(180deg, var(--page-bg-alt) 0%, var(--page-bg) 80%); } .page-intro .lede { font-size: 16px; max-width: 640px; margin-top: 14px; } .station-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .station-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-1); display: flex; flex-direction: column; } .station-card.is-experimental { background: linear-gradient(160deg, #0c0c10, #050506); border-color: #24242c; color: #cfd4db; } .station-tag { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; margin-bottom: 16px; } .station-tag.tag-primary { background: var(--accent-soft); color: var(--accent-strong); } .station-tag.tag-experimental { background: rgba(255,111,176,.12); color: #ff6fb0; border: 1px solid rgba(255,111,176,.3); } .station-card h2 { margin-bottom: 4px; } .station-card.is-experimental h2 { color: #fff; } .station-meta { font-size: 12px; color: var(--ink-faint); margin-bottom: 14px; } .station-card.is-experimental .station-meta { color: #8a93a1; } .station-card p.desc { font-size: 14px; margin-bottom: 18px; flex: 1; } .station-card.is-experimental p.desc { color: #9aa2ad; } .station-facts { list-style: none; margin: 0 0 20px; padding: 0; } .station-facts li { font-size: 12.5px; color: var(--ink-faint); padding: 6px 0; border-top: 1px solid var(--border-soft); } .station-card.is-experimental .station-facts li { color: #7c8798; border-top-color: #24242c; } .station-facts li:first-child { border-top: 0; } .station-facts b { color: var(--ink); font-weight: 700; } .station-card.is-experimental .station-facts b { color: #dfe3e8; } .station-card.is-placeholder { background: var(--surface-soft); border-style: dashed; align-items: flex-start; justify-content: center; } .station-card.is-placeholder h2 { color: var(--ink-faint); } @media (max-width: 860px) { .station-grid { grid-template-columns: 1fr; } } .observatory-links { list-style: none; margin: 6px 0 22px; padding: 0; } .observatory-links li { padding: 12px 0; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 3px; } .observatory-links li:first-child { border-top: 0; padding-top: 0; } .observatory-links .ol-name { font-size: 13.5px; font-weight: 700; color: var(--ink); } .observatory-links .ol-desc { font-size: 12px; color: var(--ink-faint); line-height: 1.5; } footer { background: var(--navy-900); color: var(--on-navy-dim); padding: 56px 0 28px; } .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: 32px; margin-bottom: 40px; } .footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .footer-brand img { width: 26px; height: 26px; border-radius: 50%; } .footer-brand span { font-weight: 800; color: var(--on-navy); } /* This tagline

    carries no class, so the global `p { color: var(--ink-dim) }` (a light-theme color) directly matches it and beats the inherited dark-theme footer color -- hence the dedicated override here. */ .footer-brand + p { color: #94A3B8; } .footer-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--on-navy); margin-bottom: 14px; } .footer-col a { display: block; font-size: 13.5px; text-decoration: none; color: var(--on-navy-dim); margin-bottom: 10px; } .footer-col a:hover { color: #fff; } .footer-col p { color: var(--on-navy-dim); } .footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--border-navy); font-size: 12px; color: #94A3B8; } @media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } } /* --- from assets/pages/today-0.css (root block removed, see canonical :root above) --- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); color: var(--ink); background: var(--page-bg); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } .wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; } .eyebrow { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-strong); margin: 0 0 12px; } .on-navy .eyebrow { color: var(--cyan); } h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.01em; margin: 0; } h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.1; } h2 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.18; } h3 { font-size: 17px; } p { line-height: 1.6; color: var(--ink-dim); margin: 0; } .on-navy, .on-navy p { color: var(--on-navy-dim); } .on-navy h2, .on-navy h3 { color: var(--on-navy); } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; font-weight: 700; font-size: 14.5px; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; } .btn-primary { background: linear-gradient(180deg, #3a8ae0, var(--accent-strong)); color: #fff; box-shadow: 0 8px 22px rgba(47,125,216,.35); } .btn-ghost { background: #fff; color: var(--ink); border-color: var(--border); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent-strong); } .btn-sm { padding: 9px 16px; font-size: 13px; } :focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } .site-header { position: sticky; top: 0; z-index: 100; background: rgba(244,248,253,.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-soft); } .header-inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 20px; height: 68px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; } .brand img { width: 32px; height: 32px; border-radius: 50%; } .brand-text { font-weight: 800; font-size: 15.5px; letter-spacing: -.01em; color: var(--ink); } .brand-text em { font-style: normal; color: var(--accent-strong); } .main-nav { display: flex; gap: 26px; margin-left: 12px; flex: 1; } .main-nav a { font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--ink-dim); } .main-nav a.current, .main-nav a:hover { color: var(--ink); } .header-actions { display: flex; align-items: center; gap: 10px; flex: none; } .lang-select { position: relative; } .lang-button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; background: #fff; border: 1px solid var(--border); border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink-dim); cursor: pointer; } .lang-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-2); padding: 6px; z-index: 200; } .lang-menu.open { display: block; } .lang-option { display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; color: var(--ink); } .lang-option:hover { background: var(--surface-soft); } .lang-option.active { background: var(--accent-soft); font-weight: 700; color: var(--accent-strong); } .nav-toggle { display: none; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 16px; } .mobile-nav { display: none; flex-direction: column; gap: 2px; padding: 10px 24px 16px; border-top: 1px solid var(--border-soft); background: var(--surface); } .mobile-nav a { padding: 12px 4px; font-weight: 600; font-size: 14.5px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--border-soft); } .mobile-nav.open { display: flex; } @media (max-width: 880px) { .main-nav { display: none; } .nav-toggle { display: block; } } section { padding: 60px 0; } .dark { background: radial-gradient(1200px 500px at 20% -10%, #122241 0%, transparent 60%), linear-gradient(180deg, var(--navy-800), var(--navy-900)); position: relative; overflow: hidden; } .dark::before { content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(75% 60% at 50% 20%, #000 40%, transparent 100%); } .dark > .wrap { position: relative; z-index: 1; } /* Editorial update 2026-09-20: the wall section moves from navy-on-dark to the same light sky-blue notebook-paper treatment already used on Home's #quiz-section/#instrument (home-0.css), echoing that visual language. Scoped to #today-wall (ID, higher specificity) rather than the shared .dark/.on-navy classes for the same reason documented there: those classes are redefined per-page and concatenated into site.css, so an unscoped override here would leak into other pages still using .dark/.on-navy for an actual dark section. */ #today-wall { background: radial-gradient(900px 380px at 15% -10%, rgba(47,125,216,.10), transparent 60%), linear-gradient(180deg, var(--page-bg-alt) 0%, var(--page-bg) 100%); } #today-wall::before { background-image: linear-gradient(rgba(16,32,54,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(16,32,54,.06) 1px, transparent 1px); opacity: 1; } #today-wall, #today-wall p { color: var(--ink-dim); } #today-wall h2, #today-wall h3 { color: var(--ink); } #today-wall .eyebrow { color: var(--accent-strong); } #today-wall .levels-strip .lvl { color: var(--ink-dim); } #today-wall .wcard { background: var(--surface); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); box-shadow: var(--shadow-1); } #today-wall .wcard-name { color: var(--ink); } #today-wall .wall-state-msg { color: var(--ink-dim); } #today-wall .frame-fallback { color: var(--ink-faint); } #today-wall .frame-fallback a { color: var(--accent-strong); } #today-wall .qod { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-1); } #today-wall .qod-label, #today-wall .qod-original summary, #today-wall .qod-original-text { color: var(--ink-faint); } #today-wall .qod-text { color: var(--ink); } #today-wall .qod-original { border-top-color: var(--border); } /* ---------------- Hero ---------------- */ .page-intro { padding: 52px 0 40px; background: linear-gradient(180deg, var(--page-bg-alt) 0%, var(--page-bg) 80%); } .page-intro .lede { font-size: 16px; max-width: 640px; margin-top: 14px; } /* .page-intro is shared across several pages' own stylesheets, and the first one concatenated into site.css (about-0.css) sets text-align: center for its own short intro — that leaks into every page reusing this class. Today's protocol explainer is long-form body text, not a short centered lede, so it needs its own explicit left alignment rather than depending on cascade order across unrelated pages. */ .today-intro { text-align: left; } .today-intro .hero-top-row, .today-intro .intro-stats { text-align: left; } .hero-top-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .state-badge { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 999px; font-weight: 800; font-size: 13.5px; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-1); white-space: nowrap; } .state-badge .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 0 4px currentColor22; } .state-badge.st-clear { color: #15803d; } .state-badge.st-clear .dot { background: var(--lvl-green); } .state-badge.st-watch { color: #92720a; } .state-badge.st-watch .dot { background: var(--lvl-yellow); } .state-badge.st-unsettled { color: #9a4c15; } .state-badge.st-unsettled .dot { background: var(--lvl-orange); } .state-badge.st-alert { color: #991b1b; } .state-badge.st-alert .dot { background: var(--lvl-red); } /* Four-stat grid: a real grid (not ad-hoc margins/positions) so each card's height stays tied to its own row via normal grid stretch — this keeps all four aligned even if a label wraps to two lines, without per-card overrides. */ /* WordPress's own block-spacing CSS (.is-layout-flow > *:not(:first-child)) adds a 24px margin-top to every child but the first, regardless of this grid's own `gap` — that's what actually caused the misalignment (each row's cards share the same bottom edge via grid stretch, but the ones carrying that extra margin start 24px lower, so their box is shorter and visibly offset). Neutralizing it here keeps spacing to the grid's own `gap`, which every child gets equally. */ .intro-stats > * { margin-top: 0; } .intro-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border-soft); } @media (max-width: 780px) { .intro-stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 420px) { .intro-stats { grid-template-columns: 1fr; } } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; display: flex; flex-direction: column; box-shadow: var(--shadow-1); } .stat-num { font-family: var(--font-mono); font-size: 21px; font-weight: 600; color: var(--ink); display: block; } .stat-label { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; margin-top: 6px; } .wall-measured-date { font-size: 18px; font-weight: 700; color: var(--on-navy); margin-bottom: 20px; } @media (max-width: 560px) { .wall-measured-date { font-size: 15px; } } .levels-strip { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 34px; } .levels-strip .lvl { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--on-navy-dim); } .levels-strip .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; } /* ---------------- Native wall (no iframe) ---------------- */ .wall-native { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (min-width: 560px) { .wall-native { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 860px) { .wall-native { grid-template-columns: repeat(4, 1fr); } } .wcard { background: rgba(255,255,255,.03); border: 1px solid var(--border-navy); border-left: 4px solid var(--ink-faint); border-radius: var(--radius-md); padding: 14px; } .wcard.is-clear { border-left-color: var(--lvl-green); } .wcard.is-watch { border-left-color: var(--lvl-yellow); } .wcard.is-unsettled { border-left-color: var(--lvl-orange); } .wcard.is-alert { border-left-color: var(--lvl-red); } .wcard-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .wcard-dot { width: 18px; height: 18px; border-radius: 50%; flex: none; border: 2px solid rgba(255,255,255,.9); } .wcard.is-clear .wcard-dot { background: var(--lvl-green); box-shadow: 0 0 12px rgba(34,197,94,.5); } .wcard.is-watch .wcard-dot { background: var(--lvl-yellow); box-shadow: 0 0 12px rgba(250,204,21,.5); } .wcard.is-unsettled .wcard-dot { background: var(--lvl-orange); box-shadow: 0 0 12px rgba(251,146,60,.5); } .wcard.is-alert .wcard-dot { background: var(--lvl-red); box-shadow: 0 0 12px rgba(185,28,28,.5); } .wcard-name { font-size: 13.5px; font-weight: 700; color: var(--on-navy); } .wcard-spark { display: block; width: 100%; height: 26px; } .wall-state-msg { color: var(--on-navy-dim); font-size: 13.5px; grid-column: 1 / -1; } .frame-fallback { font-size: 12.5px; color: var(--on-navy-faint); margin-top: 10px; } .frame-fallback a { color: var(--cyan); font-weight: 700; text-decoration: none; } .frame-fallback a:hover { text-decoration: underline; } /* ---------------- Question of the day ---------------- */ .qod { position: relative; overflow: hidden; margin-top: 30px; background: rgba(255,255,255,.03); border: 1px solid var(--border-navy); border-radius: var(--radius-md); padding: 16px 20px 18px; } .qod::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--cyan); } .qod-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--on-navy-faint); margin-bottom: 6px; } .qod-text { font-size: 14.5px; font-weight: 600; line-height: 1.5; color: var(--on-navy); max-width: 900px; } .qod-original { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border-navy); } .qod-original summary { cursor: pointer; font-size: 11px; font-weight: 700; color: var(--on-navy-faint); list-style: none; } .qod-original summary::-webkit-details-marker { display: none; } .qod-original summary::after { content: " ▾"; } .qod-original[open] summary::after { content: " ▴"; } .qod-original-text { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--on-navy-faint); } /* ---------------- Challenge du jour: per-system table (23-execution channel only) ---------------- */ .challenge-table-wrap { margin: 14px 0 18px; overflow-x: auto; border-radius: var(--radius-md); background: var(--navy-900); border: 1px solid var(--border-navy); } .challenge-table { width: 100%; min-width: 420px; border-collapse: separate; border-spacing: 0; font-size: 13px; } .challenge-table th, .challenge-table td { padding: 10px 14px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border-navy); } .challenge-table tr:last-child td { border-bottom: 0; } .challenge-table th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--on-navy-dim); } .challenge-table td { color: var(--on-navy); } .challenge-table .cond-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: middle; } @media (max-width: 560px) { .challenge-table th, .challenge-table td { padding: 8px 10px; font-size: 12px; } } /* ---------------- Understand section ---------------- */ /* Deliberate breathing room above this section, distinct from whatever default WP block-gap otherwise applies to the sibling after #today-wall. Uses the ID-scoped adjacent-sibling selector (rather than a class on the section itself, which has none) for enough specificity to beat WordPress's own layout-flow spacing rules without !important. */ #today-wall + div { margin-top: 32px; } /* Same WordPress block-spacing override as .intro-stats above: without it, every card but the first carries an extra 24px margin-top, which grid stretch turns into a visibly shorter, offset card rather than an aligned one. */ .understand-grid > * { margin-top: 0; } .understand-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } @media (max-width: 980px) { .understand-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .understand-grid { grid-template-columns: 1fr; } } .u-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; box-shadow: var(--shadow-1); } .u-dot { width: 16px; height: 16px; border-radius: 50%; margin-bottom: 12px; } .u-card p { font-size: 13px; } .u-title { font-size: 13.5px; font-weight: 800; margin-bottom: 6px; color: var(--ink); } /* margin-bottom needs !important: WordPress's own global block-spacing CSS (`:root :where(.is-layout-flow) > :last-child { margin-block-end: 0 }`, specificity 0,2,0) targets this element directly since it's the last child of .wrap, and beats a plain .understand-cta rule (0,1,0). */ .understand-cta { margin-top: 26px; margin-bottom: 16px !important; } footer { background: var(--navy-900); color: var(--on-navy-dim); padding: 56px 0 28px; } .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: 32px; margin-bottom: 40px; } .footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .footer-brand img { width: 26px; height: 26px; border-radius: 50%; } .footer-brand span { font-weight: 800; color: var(--on-navy); } /* This tagline

    carries no class, so the global `p { color: var(--ink-dim) }` (a light-theme color) directly matches it and beats the inherited dark-theme footer color -- hence the dedicated override here. */ .footer-brand + p { color: #94A3B8; } .footer-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--on-navy); margin-bottom: 14px; } .footer-col a { display: block; font-size: 13.5px; text-decoration: none; color: var(--on-navy-dim); margin-bottom: 10px; } .footer-col a:hover { color: #fff; } .footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--border-navy); font-size: 12px; color: #94A3B8; } @media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } } .quiz-block { margin-top: 56px; display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: center; background: rgba(255,255,255,.03); border: 1px solid var(--border-navy); border-radius: var(--radius-lg); padding: 28px; } .quiz-frame-wrap { width: 100%; max-width: 340px; } .quiz-frame { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-navy); background: #0c1420; } .quiz-frame iframe { display: block; width: 100%; height: 420px; border: 0; } @media (max-width: 860px) { .quiz-block { grid-template-columns: 1fr; } .quiz-frame-wrap { max-width: 300px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* --- from assets/pages/widgets-0.css (root block removed, see canonical :root above) --- */ /* Tokens copied verbatim from index.html / today.html — same validated art direction. */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-sans); color: var(--ink); background: var(--page-bg); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } .wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; } .eyebrow { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-strong); margin: 0 0 12px; } .on-navy .eyebrow { color: var(--cyan); } h1, h2, h3 { font-weight: 800; letter-spacing: -.01em; margin: 0; } h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.1; } h2 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.18; } h3 { font-size: 16.5px; line-height: 1.3; } p { line-height: 1.6; color: var(--ink-dim); margin: 0; } .on-navy, .on-navy p { color: var(--on-navy-dim); } .on-navy h2, .on-navy h3 { color: var(--on-navy); } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; font-weight: 700; font-size: 14.5px; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; font: inherit; } .btn-primary { background: linear-gradient(180deg, #3a8ae0, var(--accent-strong)); color: #fff; box-shadow: 0 8px 22px rgba(47,125,216,.35); } .btn-ghost { background: #fff; color: var(--ink); border-color: var(--border); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent-strong); } .btn-sm { padding: 9px 16px; font-size: 13px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .on-navy :focus-visible, .dark :focus-visible { outline-color: var(--cyan); } /* ---------------- Header (identical to other V2 pages) ---------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(244,248,253,.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-soft); } .header-inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 20px; height: 68px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; } .brand img { width: 32px; height: 32px; border-radius: 50%; } .brand-text { font-weight: 800; font-size: 15.5px; letter-spacing: -.01em; color: var(--ink); } .brand-text em { font-style: normal; color: var(--accent-strong); } .main-nav { display: flex; gap: 26px; margin-left: 12px; flex: 1; } .main-nav a { font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--ink-dim); } .main-nav a.current, .main-nav a:hover { color: var(--ink); } .header-actions { display: flex; align-items: center; gap: 10px; flex: none; } .lang-select { position: relative; } .lang-button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; background: #fff; border: 1px solid var(--border); border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink-dim); cursor: pointer; } .lang-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-2); padding: 6px; z-index: 200; } .lang-menu.open { display: block; } .lang-option { display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; color: var(--ink); } .lang-option:hover { background: var(--surface-soft); } .lang-option.active { background: var(--accent-soft); font-weight: 700; color: var(--accent-strong); } .nav-toggle { display: none; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 16px; } .mobile-nav { display: none; flex-direction: column; gap: 2px; padding: 10px 24px 16px; border-top: 1px solid var(--border-soft); background: var(--surface); } .mobile-nav a { padding: 12px 4px; font-weight: 600; font-size: 14.5px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--border-soft); } .mobile-nav.open { display: flex; } @media (max-width: 880px) { .main-nav { display: none; } .nav-toggle { display: block; } } section { padding: 76px 0; } .dark { background: radial-gradient(1200px 500px at 20% -10%, #122241 0%, transparent 60%), linear-gradient(180deg, var(--navy-800), var(--navy-900)); position: relative; overflow: hidden; } .dark::before { content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(75% 60% at 50% 20%, #000 40%, transparent 100%); } .dark > .wrap { position: relative; z-index: 1; } .section-head { max-width: 680px; margin: 0 0 40px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } /* ---------------- Hero ---------------- */ .page-intro { padding: 60px 0 56px; background: linear-gradient(180deg, var(--page-bg-alt) 0%, var(--page-bg) 80%); } .page-intro .lede { font-size: 16.5px; max-width: 620px; margin-top: 16px; } .page-intro .lede-sub { font-size: 13.5px; color: var(--ink-faint); max-width: 560px; margin-top: 12px; } .page-intro .btn { margin-top: 26px; } /* ---------------- Configurator ---------------- */ #configurator { padding-top: 60px; } .config-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: start; } .config-controls { display: flex; flex-direction: column; gap: 30px; } .config-block h3 { margin-bottom: 4px; } .config-block .config-help { font-size: 12.5px; color: var(--ink-faint); margin-top: 4px; margin-bottom: 14px; } .format-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .format-card { display: flex; gap: 12px; align-items: flex-start; text-align: left; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 13px 14px; cursor: pointer; font: inherit; color: inherit; } .format-card:hover { border-color: var(--border-navy-strong); } .format-card[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; } .format-thumb { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; } .format-thumb i { display: block; background: #fff; border: 1.5px solid var(--border-navy-strong); border-radius: 3px; } .format-card[aria-checked="true"] .format-thumb i { border-color: var(--accent-strong); background: #fff; } .format-info { flex: 1; min-width: 0; } .format-info .fname { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.3; } .format-info .fmeta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .03em; } .format-info .fmeta b { color: var(--accent-strong); font-weight: 700; } .format-info .fcontext { font-size: 11.5px; color: var(--ink-faint); margin-top: 6px; line-height: 1.4; } .theme-row { display: flex; flex-wrap: wrap; gap: 10px; } .theme-btn { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--border); border-radius: 999px; padding: 8px 14px 8px 9px; background: #fff; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-dim); cursor: pointer; } .theme-btn:hover { border-color: var(--border-navy-strong); } .theme-btn[aria-checked="true"] { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); font-weight: 700; } .theme-swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(15,24,38,.12); flex: none; } .theme-swatch.t-light { background: #fbfdff; } .theme-swatch.t-dark { background: #0c1117; } .theme-swatch.t-slate { background: #dbe4ee; } .theme-swatch.t-warm { background: #f3e6cf; } .theme-swatch.t-transparent { background: repeating-conic-gradient(#d9e2ec 0 25%, #fff 0 50%) 0 0/9px 9px; } .lang-field label.lang-label-main { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 8px; } select#widget-lang { width: 100%; max-width: 340px; height: 46px; padding: 0 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: #fff; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; } select#widget-lang:hover { border-color: var(--border-navy-strong); } .lang-note { font-size: 12px; color: var(--ink-faint); margin-top: 8px; max-width: 380px; line-height: 1.5; } /* ---------------- Output column: preview + code ---------------- */ .config-output { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 18px; } @media (max-width: 980px) { .config-output { position: static; } } .preview-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); overflow: hidden; } .preview-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; } .preview-card-head .pname { font-size: 13.5px; font-weight: 700; color: var(--ink); } .preview-card-head .pdims { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); } .preview-shell { padding: 30px 18px; display: flex; align-items: center; justify-content: center; min-height: 260px; transition: background .2s ease; } .preview-shell.bg-light { background: var(--surface-soft); } .preview-shell.bg-dark { background: var(--navy-900); } .preview-shell.bg-transparent { background: repeating-conic-gradient(#e7edf3 0 25%, #fff 0 50%) 0 0/18px 18px; } .preview-wrap { position: relative; overflow: hidden; border-radius: 8px; } .preview-wrap iframe { position: absolute; top: 0; left: 0; border: 0; display: block; } .preview-empty-note { font-size: 12.5px; color: var(--ink-faint); text-align: center; } .preview-shell.bg-dark .preview-empty-note { color: var(--on-navy-faint); } .code-card { background: var(--navy-900); border: 1px solid var(--border-navy); border-radius: var(--radius-md); padding: 16px 18px; } .code-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .code-card-head span { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--on-navy-faint); } .code-card pre { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: #cfe3ff; white-space: pre-wrap; word-break: break-all; overflow-x: auto; max-height: 220px; } .copy-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; } .copy-btn { font-family: var(--font-sans); font-size: 12.5px; font-weight: 700; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 8px 16px; cursor: pointer; } .copy-btn:hover { background: rgba(255,255,255,.14); } .copy-status { font-size: 12px; font-weight: 600; color: var(--good); min-height: 16px; } .copy-status.is-error { color: var(--lvl-orange); } .data-note { margin-top: 4px; font-size: 12.5px; color: var(--ink-faint); background: var(--surface-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 12px 16px; } @media (max-width: 980px) { .config-layout { grid-template-columns: 1fr; } } @media (max-width: 640px) { .format-grid { grid-template-columns: 1fr; } } /* ---------------- How-to steps ---------------- */ .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .step-card { display: flex; flex-direction: column; gap: 10px; } .step-num { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; } .step-card h3 { font-size: 16px; } .step-card p { font-size: 13.5px; } @media (max-width: 780px) { .steps-grid { grid-template-columns: 1fr; gap: 24px; } } /* ---------------- Why section ---------------- */ .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .why-card { background: rgba(255,255,255,.03); border: 1px solid var(--border-navy); border-radius: var(--radius-md); padding: 22px; } .why-card h3 { margin-bottom: 8px; } .why-card p { font-size: 13.5px; } @media (max-width: 780px) { .why-grid { grid-template-columns: 1fr; } } /* ---------------- Custom widget CTA ---------------- */ .custom-cta { position: relative; text-align: center; max-width: 640px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: 44px 36px; overflow: hidden; } .custom-cta::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--cyan), var(--accent)); } .custom-cta p { max-width: 460px; margin: 12px auto 0; } .custom-cta .btn { margin-top: 22px; } /* ---------------- Footer (identical to other V2 pages) ---------------- */ footer { background: var(--navy-900); color: var(--on-navy-dim); padding: 56px 0 28px; } .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: 32px; margin-bottom: 40px; } .footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .footer-brand img { width: 26px; height: 26px; border-radius: 50%; } .footer-brand span { font-weight: 800; color: var(--on-navy); } /* This tagline

    carries no class, so the global `p { color: var(--ink-dim) }` (a light-theme color) directly matches it and beats the inherited dark-theme footer color -- hence the dedicated override here. */ .footer-brand + p { color: #94A3B8; } .footer-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--on-navy); margin-bottom: 14px; } .footer-col a { display: block; font-size: 13.5px; text-decoration: none; color: var(--on-navy-dim); margin-bottom: 10px; } .footer-col a:hover { color: #fff; } .footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--border-navy); font-size: 12px; color: #94A3B8; } @media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } } /* --------------------------------------------------------------- Bandeau « Soutiens et programmes ». Tuiles de 180 x 72 px, identiques pour les trois marques : c'est la tuile, et non le logo, qui porte le poids visuel. Le fond blanc unifie les trois fichiers, dont deux (NVIDIA, OVHcloud) ont un fond blanc opaque et un seul est detoure (Infomaniak). Chaque logo est borne a 42 px de haut et 150 px de large, avec object-fit: contain : il se met a l'echelle dans ces limites sans jamais etre deforme ni deborder de la largeur du texte. Les plafonds de hauteur different d'un logo a l'autre parce que la marge interne des fichiers va de 0 % (Infomaniak, dont l'encre remplit le fichier) a 56 % en vertical (OVHcloud). Un plafond unique ferait dominer Infomaniak. Infomaniak est donc ramene a 34 px, les deux autres exploitent les 42 px autorises. --------------------------------------------------------------- */ .support-band { max-width: 760px; margin: 44px auto 4px; padding-top: 32px; border-top: 1px solid var(--border-soft); text-align: center; } .support-band-title { margin: 0 0 22px; font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); } /* Aucune puce : ni marqueur, ni retrait herite de la liste. */ .support-band-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 24px; } .support-band-list > li { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; justify-content: center; width: 180px; height: 72px; background: #fff; border: 1px solid var(--border-soft); border-radius: 10px; box-sizing: border-box; } .support-band-list > li::marker { content: none; } .support-band-list > li::before { content: none; display: none; } .support-band-list img { display: block; width: auto; height: auto; max-width: 150px; max-height: 42px; object-fit: contain; } .support-band-list img[data-logo="infomaniak"] { max-height: 34px; } .support-band-list img[data-logo="nvidia"] { max-height: 42px; } .support-band-list img[data-logo="ovhcloud"] { max-height: 42px; } @media (max-width: 720px) { .support-band { margin-top: 34px; padding-top: 26px; } .support-band-list { gap: 12px 14px; } .support-band-list > li { width: calc(50% - 7px); max-width: 180px; height: 64px; } .support-band-list img { max-width: 132px; max-height: 38px; } .support-band-list img[data-logo="infomaniak"] { max-height: 30px; } .support-band-list img[data-logo="nvidia"] { max-height: 38px; } .support-band-list img[data-logo="ovhcloud"] { max-height: 38px; } }