/* ============================================================ Awilix design system v4 : port exact de la charte awilix-website (src/index.css du site produit). Minimalisme flat absolu : aucune ombre, aucune bordure de carte, aucun degrade decoratif (une seule entorse : le mot-cle du hero en degrade de marque). La profondeur vient de 3 niveaux de gris + les dalles sombres (nav pill, footer). Un seul accent : le violet Awilix. Une seule famille : Satoshi (variable 300-900, titres en 600, jamais de gras). Deux modes : clair par defaut, sombre via la classe `dark` sur (posee avant le premier paint par un script inline d'apres le cookie `theme`, comme sur website.awilix.ai). Le systeme de surfaces inversables est conserve : chaque section declare sa surface, les composants lisent les variables semantiques et s'adaptent aux deux modes. ============================================================ */ /* ---------- Police ---------- */ @font-face { font-family: "Satoshi"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/static/fonts/Satoshi-Variable.woff2") format("woff2"); } /* ============================================================ 1. Palette de marque (valeurs brutes du design system awilix-website, jamais utilisees directement par les composants : ils lisent les variables semantiques) ============================================================ */ :root { /* Quasi-noir teinte violet : texte + dalles en mode clair */ --brand-ink: oklch(14% 0.01 270); --brand-ink-2: oklch(21% 0.006 285.885); --brand-ink-3: oklch(27.4% 0.006 286.033); /* Violet Awilix : l'unique accent (identique dans les 2 modes) */ --brand-purple: rgb(124, 58, 237); --brand-purple-dark: rgb(109, 40, 217); --brand-purple-lit: #a78bfa; /* L'unique entorse au flat : le degrade du mot-cle du hero */ --brand-gradient: linear-gradient(135deg, #7c3aed, #a855f7, #db2777); /* Jaune pale des bandeaux (aligne sur le wizard d'onboarding) */ --brand-yellow: oklch(97% 0.09 100); --brand-white: #ffffff; /* 3 niveaux de gris clairs : surface (cards), chip, fenetres */ --brand-gray: oklch(98% 0.003 285); --brand-gray-2: oklch(96% 0.005 285); /* Alias de compatibilite (ancien nom "sand" encore lu par main.css) */ --brand-sand: var(--brand-gray); --brand-sand-2: var(--brand-gray-2); /* Ambre des etoiles d'avis, vert du pill "en ligne" */ --brand-star: #fbbf24; --brand-success: #10b981; /* La dalle (nav pill, footer, sous-menus) : quasi-noire en clair, gris anthracite en sombre (redefinie par html.dark) */ --slab: oklch(14% 0.01 270); /* ---------- Typographie : Satoshi seul, titres en 600 ---------- */ --font-display: "Satoshi", system-ui, -apple-system, sans-serif; --font-body: "Satoshi", system-ui, -apple-system, sans-serif; --fs-display: clamp(2.375rem, 6.5vw, 4rem); /* h1 hero : 38 a 64px */ --fs-h2: clamp(1.75rem, 3.2vw, 2.5rem); /* 28 a 40px */ --fs-h3: 1.3125rem; --fs-h4: 1.0625rem; --fs-lead: clamp(1rem, 1.3vw, 1.125rem); --fs-body: 1.0625rem; --fs-sm: 0.9375rem; --fs-xs: 0.8125rem; --fs-eyebrow: 0.75rem; --lh-display: 1.05; --lh-heading: 1.15; --lh-body: 1.65; --tracking-display: -0.035em; --tracking-heading: -0.02em; --tracking-eyebrow: 0; /* ---------- Rythme ---------- */ --container: 1240px; --container-mid: 960px; --container-narrow: 760px; --gutter: clamp(1.25rem, 4vw, 2.5rem); --section-pad: clamp(4.5rem, 7vw, 7rem); /* Espace total reserve en haut de page : barre flottante + son retrait */ --header-h: 88px; /* ---------- Formes : radius concentriques (28 / 18 / 12) ---------- */ --radius-sm: 10px; --radius: 12px; --radius-lg: 18px; --radius-xl: 28px; --radius-btn: 16px; --radius-pill: 999px; /* ---------- Elevation : flat absolu. Seuls les popovers (sous-menus) gardent une ombre fonctionnelle. ---------- */ --shadow-pop: 0 12px 32px -12px rgba(19, 19, 24, 0.22); /* ---------- Mouvement (easing signature du site produit) ---------- */ --ease: cubic-bezier(0.21, 0.47, 0.32, 0.98); --dur: 0.45s; } /* Mode sombre : neutres du theme Awilix officiel (teintes 285-286). La dalle devient anthracite, l'accent violet ne bouge pas. (--brand-ink reste le quasi-noir : c'est une couleur de marque, le texte lit --fg, jamais la palette brute.) */ html.dark { --slab: oklch(21% 0.006 285.885); --shadow-pop: 0 12px 32px -12px rgba(0, 0, 0, 0.55); } /* ============================================================ 2. Variables semantiques par surface. Tout composant lit --surface / --fg / --fg-muted / --faint / --line / --card / --chip / --card-win / --accent, jamais la palette brute. --card = panneau gris dans la section, --chip = pill/faux input, --card-win = fenetre "blanche" posee dans un panneau. Flat : --shadow neutralise partout. ============================================================ */ :root, .surface--light { --surface: #ffffff; --surface-2: oklch(98% 0.003 285); --fg: oklch(14% 0.01 270); --fg-strong: oklch(14% 0.01 270); --fg-muted: oklch(50% 0.01 270); --faint: oklch(72% 0.012 285); --line: oklch(90% 0.01 270); --line-strong: oklch(84% 0.012 270); --card: oklch(98% 0.003 285); --card-2: oklch(96% 0.005 285); --chip: oklch(96% 0.005 285); --card-win: #ffffff; --accent: var(--brand-purple); --accent-hover: var(--brand-purple-dark); --accent-soft: rgba(124, 58, 237, 0.1); --accent-line: rgba(124, 58, 237, 0.28); --shadow: none; --shadow-lift: none; } html.dark, html.dark .surface--light { --surface: oklch(14.1% 0.005 285.823); --surface-2: oklch(19% 0.006 285.9); --fg: oklch(85% 0.005 65); --fg-strong: oklch(92% 0.004 65); --fg-muted: oklch(70.5% 0.015 286.067); --faint: oklch(55% 0.012 286); --line: rgba(255, 255, 255, 0.1); --line-strong: rgba(255, 255, 255, 0.18); --card: oklch(19% 0.006 285.9); --card-2: oklch(27.4% 0.006 286.033); --chip: oklch(27.4% 0.006 286.033); --card-win: oklch(21% 0.006 285.885); --accent: var(--brand-purple); --accent-hover: var(--brand-purple-dark); --accent-soft: rgba(124, 58, 237, 0.18); --accent-line: rgba(167, 139, 250, 0.34); } /* Bande "sable" : a peine plus grise que le fond (le site produit est quasi tout blanc, le rythme vient des panneaux, pas des bandes). Les panneaux poses dessus deviennent des fenetres. */ .surface--sand { --surface: oklch(98% 0.003 285); --surface-2: oklch(96% 0.005 285); --fg: oklch(14% 0.01 270); --fg-strong: oklch(14% 0.01 270); --fg-muted: oklch(50% 0.01 270); --faint: oklch(72% 0.012 285); --line: oklch(89% 0.01 270); --line-strong: oklch(83% 0.012 270); --card: #ffffff; --card-2: oklch(96% 0.005 285); --chip: oklch(94% 0.006 285); --card-win: #ffffff; --accent: var(--brand-purple); --accent-hover: var(--brand-purple-dark); --accent-soft: rgba(124, 58, 237, 0.1); --accent-line: rgba(124, 58, 237, 0.28); --shadow: none; --shadow-lift: none; } html.dark .surface--sand { --surface: oklch(16.5% 0.005 285.9); --surface-2: oklch(19% 0.006 285.9); --fg: oklch(85% 0.005 65); --fg-strong: oklch(92% 0.004 65); --fg-muted: oklch(70.5% 0.015 286.067); --faint: oklch(55% 0.012 286); --line: rgba(255, 255, 255, 0.1); --line-strong: rgba(255, 255, 255, 0.18); --card: oklch(21% 0.006 285.885); --card-2: oklch(27.4% 0.006 286.033); --chip: oklch(27.4% 0.006 286.033); --card-win: oklch(21% 0.006 285.885); --accent-soft: rgba(124, 58, 237, 0.18); --accent-line: rgba(167, 139, 250, 0.34); } /* Dalle sombre : footer, panneaux slab. En mode sombre elle devient anthracite (plus claire que le fond, comme la nav pill et le footer du site produit). */ .surface--dark { --surface: var(--slab); --surface-2: oklch(21% 0.006 285.885); --fg: rgba(255, 255, 255, 0.92); --fg-strong: #ffffff; --fg-muted: rgba(255, 255, 255, 0.6); --faint: rgba(255, 255, 255, 0.4); --line: rgba(255, 255, 255, 0.1); --line-strong: rgba(255, 255, 255, 0.18); --card: rgba(255, 255, 255, 0.06); --card-2: rgba(255, 255, 255, 0.1); --chip: rgba(255, 255, 255, 0.1); --card-win: rgba(255, 255, 255, 0.08); --accent: var(--brand-purple-lit); --accent-hover: #c4b5fd; --accent-soft: rgba(167, 139, 250, 0.14); --accent-line: rgba(167, 139, 250, 0.34); --shadow: none; --shadow-lift: none; } /* Panneau jaune pale (bandeaux du wizard) : assombri en sombre, texte clair lisible, exactement comme --secondary du produit. */ .surface--yellow { --surface: oklch(97% 0.09 100); --surface-2: oklch(95% 0.07 100); --fg: oklch(14% 0.01 270); --fg-strong: oklch(14% 0.01 270); --fg-muted: oklch(42% 0.04 100); --faint: oklch(55% 0.05 100); --line: rgba(19, 19, 24, 0.12); --line-strong: rgba(19, 19, 24, 0.22); --card: rgba(255, 255, 255, 0.55); --card-2: rgba(255, 255, 255, 0.75); --chip: rgba(255, 255, 255, 0.6); --card-win: rgba(255, 255, 255, 0.75); --accent: var(--brand-purple-dark); --accent-hover: var(--brand-purple); --accent-soft: rgba(255, 255, 255, 0.55); --accent-line: rgba(19, 19, 24, 0.2); --shadow: none; --shadow-lift: none; } html.dark .surface--yellow { --surface: oklch(30% 0.05 100); --surface-2: oklch(27% 0.04 100); --fg: oklch(92% 0.03 100); --fg-strong: oklch(96% 0.02 100); --fg-muted: oklch(78% 0.04 100); --faint: oklch(64% 0.04 100); --line: rgba(255, 255, 255, 0.14); --line-strong: rgba(255, 255, 255, 0.24); --card: rgba(255, 255, 255, 0.08); --card-2: rgba(255, 255, 255, 0.12); --chip: rgba(255, 255, 255, 0.1); --card-win: rgba(255, 255, 255, 0.1); --accent: var(--brand-purple-lit); --accent-hover: #c4b5fd; --accent-soft: rgba(167, 139, 250, 0.16); --accent-line: rgba(167, 139, 250, 0.34); }