/* ═══════════════════════════════════════════════════════════════════ CALEDOHUB DESIGN SYSTEM v1.0 — Unified across the 14-site ecosystem Drop-in stylesheet that brings consistent identity to all sites without touching content / data layers. Load FIRST in for maximum specificity. Philosophy: • Single source of truth: design tokens (CSS custom properties) • Per-site identity through --cds-accent-* overrides • Modern, sober, accessible (WCAG AA contrast minimum) • Mobile-first, system-font fallback, dark-mode native © DEEP SARL — RIDET 1 648 294.001 ═══════════════════════════════════════════════════════════════════ */ /* ─── 1. DESIGN TOKENS ──────────────────────────────────────────── */ :root { /* TYPOGRAPHY ─────────────────────────────────── */ --cds-font-sans: "Inter", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --cds-font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif; --cds-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace; --cds-text-2xs: 11px; --cds-text-xs: 12px; --cds-text-sm: 13.5px; --cds-text-base: 15px; --cds-text-md: 16px; --cds-text-lg: 18px; --cds-text-xl: 22px; --cds-text-2xl: 28px; --cds-text-3xl: 36px; --cds-text-4xl: 48px; --cds-text-5xl: 64px; --cds-leading-tight: 1.2; --cds-leading-snug: 1.4; --cds-leading-normal: 1.55; --cds-leading-loose: 1.75; --cds-weight-regular: 400; --cds-weight-medium: 500; --cds-weight-semibold: 600; --cds-weight-bold: 700; --cds-weight-black: 800; --cds-tracking-tight: -0.022em; --cds-tracking-base: -0.005em; --cds-tracking-wide: 0.04em; /* SPACING — 4px base scale ──────────────────── */ --cds-space-0: 0; --cds-space-1: 4px; --cds-space-2: 8px; --cds-space-3: 12px; --cds-space-4: 16px; --cds-space-5: 20px; --cds-space-6: 24px; --cds-space-8: 32px; --cds-space-10: 40px; --cds-space-12: 48px; --cds-space-16: 64px; --cds-space-20: 80px; /* RADIUS ────────────────────────────────────── */ --cds-radius-xs: 4px; --cds-radius-sm: 6px; --cds-radius-md: 10px; --cds-radius-lg: 14px; --cds-radius-xl: 20px; --cds-radius-2xl: 28px; --cds-radius-pill: 999px; /* SHADOWS — layered for depth ────────────────── */ --cds-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04); --cds-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .04); --cds-shadow-md: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04); --cds-shadow-lg: 0 10px 24px rgba(15, 23, 42, .12), 0 4px 8px rgba(15, 23, 42, .06); --cds-shadow-xl: 0 20px 40px rgba(15, 23, 42, .18), 0 8px 16px rgba(15, 23, 42, .08); --cds-shadow-glow: 0 0 0 4px var(--cds-accent-100, rgba(20, 184, 166, .15)); /* MOTION ──────────────────────────────────── */ --cds-ease-out: cubic-bezier(.16, 1, .3, 1); --cds-ease-in-out: cubic-bezier(.65, 0, .35, 1); --cds-ease-spring: cubic-bezier(.34, 1.56, .64, 1); --cds-dur-fast: .12s; --cds-dur-base: .2s; --cds-dur-slow: .35s; /* Z-INDEX SCALE ───────────────────────────── */ --cds-z-dropdown: 50; --cds-z-sticky: 100; --cds-z-fixed: 200; --cds-z-modal-bg: 900; --cds-z-modal: 1000; --cds-z-popover: 1100; --cds-z-toast: 1200; --cds-z-fab: 80; --cds-z-tooltip: 9999; /* SIZING for buttons / inputs ────────────────── */ --cds-h-xs: 28px; --cds-h-sm: 34px; --cds-h-md: 42px; --cds-h-lg: 52px; --cds-h-xl: 60px; /* CONTAINER widths ────────────────────────── */ --cds-max-content: 1240px; --cds-max-narrow: 720px; --cds-header-height: 64px; --cds-subheader-height: 44px; /* ─── LIGHT THEME (default) ─────────────────── */ --cds-bg: #FAFAF9; --cds-bg-elev: #FFFFFF; --cds-bg-muted: #F4F4F5; --cds-bg-subtle: #E7E5E4; --cds-bg-inverse: #0F172A; --cds-text: #0F172A; --cds-text-muted: #57534E; --cds-text-subtle: #78716C; --cds-text-faint: #A8A29E; --cds-text-inverse: #FAFAF9; --cds-border: #E7E5E4; --cds-border-strong: #D6D3D1; --cds-border-subtle: #F1F1EF; /* Brand teal — primary CaleDoHub ─────── */ --cds-accent-50: #F0FDFA; --cds-accent-100: #CCFBF1; --cds-accent-200: #99F6E4; --cds-accent-300: #5EEAD4; --cds-accent-400: #2DD4BF; --cds-accent-500: #14B8A6; --cds-accent-600: #0D9488; --cds-accent-700: #0F766E; --cds-accent-800: #115E59; --cds-accent-900: #134E4A; /* Functional ─────────── */ --cds-success: #10B981; --cds-warning: #F59E0B; --cds-error: #EF4444; --cds-info: #3B82F6; /* Gradients ─────────── */ --cds-gradient-brand: linear-gradient(135deg, var(--cds-accent-500), var(--cds-accent-700)); --cds-gradient-hero: linear-gradient(135deg, #14B8A6 0%, #06B6D4 50%, #6366F1 100%); --cds-gradient-sunset: linear-gradient(135deg, #F59E0B, #EC4899); } /* ─── DARK THEME via media query ─────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-cds-theme="light"]) { --cds-bg: #0A0E1A; --cds-bg-elev: #0F172A; --cds-bg-muted: #1E293B; --cds-bg-subtle: #1A2438; --cds-bg-inverse: #FAFAF9; --cds-text: #F1F5F9; --cds-text-muted: #CBD5E1; --cds-text-subtle: #94A3B8; --cds-text-faint: #64748B; --cds-text-inverse: #0F172A; --cds-border: #1E293B; --cds-border-strong: #334155; --cds-border-subtle: #131D2E; --cds-shadow-xs: 0 1px 2px rgba(0,0,0,.2); --cds-shadow-sm: 0 1px 3px rgba(0,0,0,.3); --cds-shadow-md: 0 4px 12px rgba(0,0,0,.4); --cds-shadow-lg: 0 10px 24px rgba(0,0,0,.5); --cds-shadow-xl: 0 20px 40px rgba(0,0,0,.6); } } /* Manual theme override ─────────── */ :root[data-cds-theme="dark"] { --cds-bg: #0A0E1A; --cds-bg-elev: #0F172A; --cds-bg-muted: #1E293B; --cds-bg-subtle: #1A2438; --cds-bg-inverse: #FAFAF9; --cds-text: #F1F5F9; --cds-text-muted: #CBD5E1; --cds-text-subtle: #94A3B8; --cds-text-faint: #64748B; --cds-text-inverse: #0F172A; --cds-border: #1E293B; --cds-border-strong: #334155; --cds-border-subtle: #131D2E; } /* ─── PER-SITE ACCENT OVERRIDES ────────────────── */ /* Each site sets its accent via body[data-site] attribute (auto-set by JS) */ body[data-cds-site="caledohub"] { --cds-accent-500:#14B8A6; --cds-accent-600:#0D9488; --cds-accent-700:#0F766E; } body[data-cds-site="caledodrive"] { --cds-accent-500:#8B5CF6; --cds-accent-600:#7C3AED; --cds-accent-700:#6D28D9; } body[data-cds-site="caledobeaute"] { --cds-accent-500:#EC4899; --cds-accent-600:#DB2777; --cds-accent-700:#BE185D; } body[data-cds-site="caledokids"] { --cds-accent-500:#F472B6; --cds-accent-600:#EC4899; --cds-accent-700:#DB2777; } body[data-cds-site="caledokdo"] { --cds-accent-500:#A855F7; --cds-accent-600:#9333EA; --cds-accent-700:#7E22CE; } body[data-cds-site="caledovol"] { --cds-accent-500:#EF4444; --cds-accent-600:#DC2626; --cds-accent-700:#B91C1C; } body[data-cds-site="caledolegales"] { --cds-accent-500:#475569; --cds-accent-600:#334155; --cds-accent-700:#1E293B; } body[data-cds-site="caledoprof"] { --cds-accent-500:#06B6D4; --cds-accent-600:#0891B2; --cds-accent-700:#0E7490; } body[data-cds-site="caledoevent"] { --cds-accent-500:#F59E0B; --cds-accent-600:#D97706; --cds-accent-700:#B45309; } body[data-cds-site="caledosante"] { --cds-accent-500:#10B981; --cds-accent-600:#059669; --cds-accent-700:#047857; } body[data-cds-site="caledoimmo"] { --cds-accent-500:#0EA5E9; --cds-accent-600:#0284C7; --cds-accent-700:#0369A1; } body[data-cds-site="caledoresto"] { --cds-accent-500:#F97316; --cds-accent-600:#EA580C; --cds-accent-700:#C2410C; } body[data-cds-site="caledotech"] { --cds-accent-500:#6366F1; --cds-accent-600:#4F46E5; --cds-accent-700:#4338CA; } body[data-cds-site="caledojob"] { --cds-accent-500:#3B82F6; --cds-accent-600:#2563EB; --cds-accent-700:#1D4ED8; } /* ─── 2. RESET / NORMALIZE (minimal, safe) ──────────────────────── */ .cds-scope, .cds-scope *, .cds-scope *::before, .cds-scope *::after { box-sizing: border-box; } body.cds-active { font-family: var(--cds-font-sans); color: var(--cds-text); background: var(--cds-bg); } body.cds-active button, body.cds-active input, body.cds-active select, body.cds-active textarea { font-family: inherit; } /* ─── 3. TYPOGRAPHY UTILITIES (opt-in via classes) ─────────────── */ .cds-display { font-family: var(--cds-font-display); font-weight: var(--cds-weight-black); letter-spacing: var(--cds-tracking-tight); line-height: var(--cds-leading-tight); } .cds-h1 { font-family: var(--cds-font-display); font-size: clamp(var(--cds-text-3xl), 4vw, var(--cds-text-5xl)); font-weight: var(--cds-weight-black); letter-spacing: var(--cds-tracking-tight); line-height: var(--cds-leading-tight); } .cds-h2 { font-family: var(--cds-font-display); font-size: clamp(var(--cds-text-2xl), 3vw, var(--cds-text-4xl)); font-weight: var(--cds-weight-bold); letter-spacing: var(--cds-tracking-tight); line-height: var(--cds-leading-tight); } .cds-h3 { font-family: var(--cds-font-display); font-size: clamp(var(--cds-text-xl), 2.2vw, var(--cds-text-2xl)); font-weight: var(--cds-weight-bold); line-height: var(--cds-leading-snug); } .cds-h4 { font-size: var(--cds-text-lg); font-weight: var(--cds-weight-semibold); line-height: var(--cds-leading-snug); } .cds-lead { font-size: var(--cds-text-lg); color: var(--cds-text-muted); line-height: var(--cds-leading-normal); } .cds-eyebrow { font-size: var(--cds-text-xs); font-weight: var(--cds-weight-semibold); text-transform: uppercase; letter-spacing: var(--cds-tracking-wide); color: var(--cds-accent-600); } /* ─── 4. TOP HEADER — sites bar always visible ─────────────────── */ #cds-header { position: sticky; top: 0; left: 0; right: 0; z-index: var(--cds-z-sticky); height: var(--cds-header-height); background: color-mix(in srgb, var(--cds-bg-elev) 92%, transparent); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--cds-border); font-family: var(--cds-font-sans); } #cds-header .cds-header-inner { max-width: var(--cds-max-content); height: 100%; margin: 0 auto; padding: 0 var(--cds-space-5); display: flex; align-items: center; gap: var(--cds-space-4); } #cds-header .cds-brand { display: flex; align-items: center; gap: var(--cds-space-2); text-decoration: none; color: var(--cds-text); font-weight: var(--cds-weight-bold); font-size: var(--cds-text-md); letter-spacing: var(--cds-tracking-tight); white-space: nowrap; } #cds-header .cds-brand-mark { width: 32px; height: 32px; border-radius: var(--cds-radius-md); background: var(--cds-gradient-hero); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; box-shadow: var(--cds-shadow-sm); } #cds-header .cds-sites-bar { flex: 1; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--cds-border-strong) transparent; padding: 0 var(--cds-space-2); scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } #cds-header .cds-sites-bar::-webkit-scrollbar { height: 4px; } #cds-header .cds-sites-bar::-webkit-scrollbar-thumb { background: var(--cds-border-strong); border-radius: 2px; } #cds-header .cds-site-link { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: var(--cds-radius-pill); font-size: var(--cds-text-sm); font-weight: var(--cds-weight-medium); color: var(--cds-text-muted); text-decoration: none; white-space: nowrap; transition: color var(--cds-dur-fast), background var(--cds-dur-fast), transform var(--cds-dur-fast); scroll-snap-align: start; } #cds-header .cds-site-link:hover { background: var(--cds-bg-muted); color: var(--cds-text); } #cds-header .cds-site-link.is-current { background: var(--cds-accent-500); color: #fff; font-weight: var(--cds-weight-semibold); } #cds-header .cds-site-link .emoji { font-size: 14px; } #cds-header .cds-actions { display: flex; align-items: center; gap: var(--cds-space-2); flex-shrink: 0; } #cds-header .cds-icon-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--cds-border); border-radius: var(--cds-radius-md); color: var(--cds-text-muted); cursor: pointer; transition: all var(--cds-dur-fast); font-size: 16px; } #cds-header .cds-icon-btn:hover { border-color: var(--cds-accent-500); color: var(--cds-accent-600); transform: translateY(-1px); } #cds-header .cds-user-pill { display: inline-flex; align-items: center; gap: var(--cds-space-2); height: 36px; padding: 0 12px 0 4px; border-radius: var(--cds-radius-pill); background: var(--cds-bg-muted); border: 1px solid var(--cds-border); color: var(--cds-text); font-size: var(--cds-text-sm); font-weight: var(--cds-weight-medium); text-decoration: none; cursor: pointer; transition: all var(--cds-dur-fast); } #cds-header .cds-user-pill:hover { background: var(--cds-bg-elev); border-color: var(--cds-accent-500); } #cds-header .cds-user-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--cds-gradient-brand); color: #fff; font-weight: var(--cds-weight-bold); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; } @media (max-width: 760px) { #cds-header .cds-sites-bar .cds-site-link:not(.is-current) .lbl { display: none; } #cds-header .cds-brand .lbl { display: none; } #cds-header .cds-user-pill .lbl { display: none; } } /* Body push to avoid overlap when header is rendered */ body.cds-has-header { padding-top: var(--cds-header-height); } /* ─── 5. BUTTONS — uniform across all sites ──────────────────── */ .cds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--cds-space-2); height: var(--cds-h-md); padding: 0 var(--cds-space-5); border-radius: var(--cds-radius-pill); font-family: var(--cds-font-sans); font-size: var(--cds-text-sm); font-weight: var(--cds-weight-semibold); line-height: 1; letter-spacing: var(--cds-tracking-base); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform var(--cds-dur-fast) var(--cds-ease-out), box-shadow var(--cds-dur-fast) var(--cds-ease-out), background var(--cds-dur-fast), color var(--cds-dur-fast), border-color var(--cds-dur-fast); white-space: nowrap; user-select: none; background: var(--cds-bg-muted); color: var(--cds-text); } .cds-btn:hover { transform: translateY(-1px); box-shadow: var(--cds-shadow-md); } .cds-btn:active { transform: translateY(0); } .cds-btn:focus-visible { outline: 2px solid var(--cds-accent-500); outline-offset: 2px; } .cds-btn:disabled, .cds-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; } .cds-btn-primary { background: var(--cds-accent-500); color: #fff; box-shadow: 0 2px 6px color-mix(in srgb, var(--cds-accent-500) 35%, transparent); } .cds-btn-primary:hover { background: var(--cds-accent-600); box-shadow: 0 8px 20px color-mix(in srgb, var(--cds-accent-500) 45%, transparent); } .cds-btn-gradient { background: var(--cds-gradient-brand); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--cds-accent-500) 30%, transparent); } .cds-btn-outline { background: transparent; border-color: var(--cds-border-strong); color: var(--cds-text); } .cds-btn-outline:hover { border-color: var(--cds-accent-500); color: var(--cds-accent-600); } .cds-btn-ghost { background: transparent; color: var(--cds-text-muted); } .cds-btn-ghost:hover { background: var(--cds-bg-muted); color: var(--cds-text); } .cds-btn-danger { background: var(--cds-error); color: #fff; } .cds-btn-success { background: var(--cds-success); color: #fff; } .cds-btn-xs { height: var(--cds-h-xs); padding: 0 var(--cds-space-3); font-size: var(--cds-text-xs); } .cds-btn-sm { height: var(--cds-h-sm); padding: 0 var(--cds-space-4); font-size: var(--cds-text-xs); } .cds-btn-lg { height: var(--cds-h-lg); padding: 0 var(--cds-space-6); font-size: var(--cds-text-base); } .cds-btn-xl { height: var(--cds-h-xl); padding: 0 var(--cds-space-8); font-size: var(--cds-text-md); } /* ─── 6. INPUTS (text, select, textarea) ─────────────────────── */ .cds-input, .cds-select, .cds-textarea { width: 100%; height: var(--cds-h-md); padding: 0 var(--cds-space-4); background: var(--cds-bg-elev); border: 1px solid var(--cds-border); border-radius: var(--cds-radius-md); font-family: var(--cds-font-sans); font-size: var(--cds-text-sm); color: var(--cds-text); transition: border-color var(--cds-dur-fast), box-shadow var(--cds-dur-fast); } .cds-textarea { height: auto; padding: var(--cds-space-3) var(--cds-space-4); min-height: 96px; line-height: var(--cds-leading-normal); resize: vertical; } .cds-input:focus, .cds-select:focus, .cds-textarea:focus { outline: none; border-color: var(--cds-accent-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cds-accent-500) 18%, transparent); } .cds-input::placeholder, .cds-textarea::placeholder { color: var(--cds-text-faint); } .cds-label { display: block; font-size: var(--cds-text-xs); font-weight: var(--cds-weight-semibold); text-transform: uppercase; letter-spacing: var(--cds-tracking-wide); color: var(--cds-text-subtle); margin-bottom: var(--cds-space-2); } .cds-field { margin-bottom: var(--cds-space-4); } /* ─── 7. CARDS ─────────────────────────────── */ .cds-card { background: var(--cds-bg-elev); border: 1px solid var(--cds-border-subtle); border-radius: var(--cds-radius-lg); padding: var(--cds-space-6); box-shadow: var(--cds-shadow-sm); transition: box-shadow var(--cds-dur-base), transform var(--cds-dur-base); } .cds-card:hover { box-shadow: var(--cds-shadow-md); } .cds-card-hover:hover { transform: translateY(-2px); box-shadow: var(--cds-shadow-lg); } .cds-card-elevated { box-shadow: var(--cds-shadow-md); border: none; } .cds-card-glass { background: color-mix(in srgb, var(--cds-bg-elev) 70%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border: 1px solid color-mix(in srgb, var(--cds-text) 8%, transparent); } /* ─── 8. BADGES / PILLS ─────────────────────── */ .cds-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--cds-radius-pill); font-size: var(--cds-text-2xs); font-weight: var(--cds-weight-semibold); letter-spacing: var(--cds-tracking-wide); text-transform: uppercase; line-height: 1; background: var(--cds-bg-muted); color: var(--cds-text-muted); } .cds-badge-primary { background: var(--cds-accent-500); color: #fff; } .cds-badge-success { background: color-mix(in srgb, var(--cds-success) 15%, transparent); color: var(--cds-success); } .cds-badge-warning { background: color-mix(in srgb, var(--cds-warning) 15%, transparent); color: var(--cds-warning); } .cds-badge-danger { background: color-mix(in srgb, var(--cds-error) 15%, transparent); color: var(--cds-error); } /* ─── 9. FLOATING ACTION BUTTONS — uniform positions ────────── */ .cds-fab-container { position: fixed; bottom: var(--cds-space-6); right: var(--cds-space-6); display: flex; flex-direction: column; gap: var(--cds-space-3); align-items: flex-end; z-index: var(--cds-z-fab); pointer-events: none; } .cds-fab-container > * { pointer-events: auto; } .cds-fab { height: 52px; min-width: 52px; padding: 0 var(--cds-space-5); border-radius: var(--cds-radius-pill); display: inline-flex; align-items: center; gap: var(--cds-space-2); background: var(--cds-bg-inverse); color: var(--cds-text-inverse); font-family: var(--cds-font-sans); font-size: var(--cds-text-sm); font-weight: var(--cds-weight-semibold); border: none; cursor: pointer; box-shadow: var(--cds-shadow-lg); transition: transform var(--cds-dur-fast) var(--cds-ease-spring), box-shadow var(--cds-dur-fast); text-decoration: none; } .cds-fab:hover { transform: translateY(-3px); box-shadow: var(--cds-shadow-xl); } .cds-fab-primary { background: var(--cds-gradient-brand); color: #fff; } .cds-fab-ai { background: linear-gradient(135deg, #A855F7, #EC4899); color: #fff; } .cds-fab-godseye { background: linear-gradient(135deg, #A855F7, #6366F1); color: #fff; } .cds-fab-admin { background: linear-gradient(135deg, #DC2626, #EF4444); color: #fff; } .cds-fab-icon-only { padding: 0; width: 52px; } @media (max-width: 600px) { .cds-fab-container { bottom: var(--cds-space-4); right: var(--cds-space-4); gap: var(--cds-space-2); } .cds-fab { height: 46px; min-width: 46px; padding: 0 var(--cds-space-4); font-size: var(--cds-text-xs); } .cds-fab .lbl { display: none; } .cds-fab-icon-only { width: 46px; } } /* ─── 10. CONTAINER / LAYOUT helpers ──────────────────────── */ .cds-container { max-width: var(--cds-max-content); margin: 0 auto; padding: 0 var(--cds-space-5); } .cds-container-narrow { max-width: var(--cds-max-narrow); margin: 0 auto; padding: 0 var(--cds-space-5); } .cds-section { padding: var(--cds-space-12) 0; } .cds-stack { display: flex; flex-direction: column; gap: var(--cds-space-4); } .cds-row { display: flex; gap: var(--cds-space-4); align-items: center; flex-wrap: wrap; } .cds-grid { display: grid; gap: var(--cds-space-4); } .cds-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cds-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cds-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cds-grid-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } @media (max-width: 760px) { .cds-grid-2, .cds-grid-3, .cds-grid-4 { grid-template-columns: 1fr; } } /* ─── 11. LINK style ───────────────────────────── */ .cds-link { color: var(--cds-accent-600); text-decoration: none; font-weight: var(--cds-weight-medium); transition: color var(--cds-dur-fast); } .cds-link:hover { color: var(--cds-accent-700); text-decoration: underline; } /* ─── 12. DIVIDER ──────────────────────────────── */ .cds-divider { height: 1px; background: var(--cds-border); margin: var(--cds-space-6) 0; border: 0; } /* ─── 13. PROSE ─ readable text content ─────── */ .cds-prose { font-family: var(--cds-font-sans); color: var(--cds-text); line-height: var(--cds-leading-normal); font-size: var(--cds-text-base); } .cds-prose h1, .cds-prose h2, .cds-prose h3 { font-family: var(--cds-font-display); margin-top: var(--cds-space-8); margin-bottom: var(--cds-space-4); line-height: var(--cds-leading-tight); } .cds-prose p { margin-bottom: var(--cds-space-4); } .cds-prose a { color: var(--cds-accent-600); text-decoration: underline; text-underline-offset: 2px; } /* ─── 14. SR-ONLY ─────────────────────────── */ .cds-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ─── 15. REDUCED-MOTION ──────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ─── 16. PRINT ───────────────────────────── */ @media print { #cds-header, .cds-fab-container { display: none !important; } body.cds-has-header { padding-top: 0 !important; } } /* ─── 17. GLOBAL POLISH — applique aux éléments existants sans classes ─── */ /* On NE TOUCHE PAS aux styles existants des sites (priorité user data) sauf si .cds-active sur body */ body.cds-active { font-family: var(--cds-font-sans); font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body.cds-active button:not([class*="cds-"]):not([class*="caledohub"]):not([class*="caledodrive"]) { font-family: inherit; } /* Smooth scroll global */ html:not([data-cds-disable-smooth]) { scroll-behavior: smooth; }