ca95dde9b3
Tailwind v4 ne pose plus cursor:pointer sur <button> par défaut, ce qui rendait l'app un peu morte au survol. Plutôt que d'ajouter cursor-pointer sur chaque composant, on le pose une fois pour toutes en CSS de base sur : - button, role="button", a[href], summary, label[for], select - inputs cliquables (submit, button, reset, checkbox, radio) Les éléments désactivés (disabled, aria-disabled) basculent en cursor:not-allowed pour signaler clairement l'état. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
166 lines
4.7 KiB
CSS
166 lines
4.7 KiB
CSS
/* ============================================================================
|
|
* Rubis Sur l'Ongle — feuille de styles racine
|
|
* Tailwind v4 (CSS-first) + tokens de marque (cf. /docs/marque.md)
|
|
* ========================================================================== */
|
|
|
|
@import "tailwindcss";
|
|
|
|
/* Polices self-hostées via fontsource (cf. /docs/tech/frontend.md §10) */
|
|
@import "@fontsource-variable/bricolage-grotesque";
|
|
@import "@fontsource-variable/inter";
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
* Tokens de marque exposés en utilitaires Tailwind v4 via @theme.
|
|
* Source : /docs/marque.md §3, §4
|
|
* -------------------------------------------------------------------------- */
|
|
@theme {
|
|
/* === Couleurs rubis === */
|
|
--color-rubis: #9f1239;
|
|
--color-rubis-deep: #771328;
|
|
--color-rubis-light: #c9415c;
|
|
--color-rubis-glow: #fbe4ea;
|
|
|
|
/* === Neutres chauds (jamais de blanc/noir purs) === */
|
|
--color-cream: #faf7f2;
|
|
--color-cream-2: #f5efe7;
|
|
--color-line: #e8e0d6;
|
|
--color-ink: #1a1410;
|
|
--color-ink-2: #4f4640;
|
|
--color-ink-3: #8a7f76;
|
|
|
|
/* === Typographies === */
|
|
--font-display: "Bricolage Grotesque Variable", "Bricolage Grotesque", -apple-system,
|
|
BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
--font-sans: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
sans-serif;
|
|
|
|
/* === Border radius — un peu plus tranchés que la default Tailwind ===
|
|
6px sur les éléments interactifs (cohérent avec la landing) */
|
|
--radius-sharp: 4px;
|
|
--radius-default: 6px;
|
|
--radius-soft: 10px;
|
|
--radius-card: 14px;
|
|
|
|
/* === Ombres rubis-teintées === */
|
|
--shadow-rubis: 0 2px 8px rgba(159, 18, 57, 0.25);
|
|
--shadow-rubis-hover: 0 6px 16px rgba(159, 18, 57, 0.35);
|
|
--shadow-card:
|
|
0 16px 40px -16px rgba(26, 20, 16, 0.18), 0 4px 8px -2px rgba(26, 20, 16, 0.06);
|
|
--shadow-soft: 0 4px 16px rgba(26, 20, 16, 0.04);
|
|
}
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
* Globals
|
|
* -------------------------------------------------------------------------- */
|
|
@layer base {
|
|
html {
|
|
-webkit-text-size-adjust: 100%;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
body {
|
|
background: var(--color-cream);
|
|
color: var(--color-ink);
|
|
font-family: var(--font-sans);
|
|
font-feature-settings: "ss01", "cv11";
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
/* Sélection rubis — petite signature partout */
|
|
::selection {
|
|
background: var(--color-rubis);
|
|
color: white;
|
|
}
|
|
|
|
/* Reset hr/fieldset minimal */
|
|
fieldset {
|
|
border: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Curseur pointer par défaut sur tous les éléments interactifs activables.
|
|
Tailwind v4 ne le pose plus automatiquement sur <button> — on le remet
|
|
ici en global pour ne pas polluer chaque composant. Les éléments
|
|
désactivés gardent un cursor neutre (cf. cascade Tailwind sur disabled). */
|
|
button:not(:disabled),
|
|
[role="button"]:not([aria-disabled="true"]),
|
|
summary,
|
|
label[for],
|
|
a[href],
|
|
select:not(:disabled),
|
|
[type="checkbox"]:not(:disabled),
|
|
[type="radio"]:not(:disabled),
|
|
[type="submit"]:not(:disabled),
|
|
[type="button"]:not(:disabled),
|
|
[type="reset"]:not(:disabled) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:disabled,
|
|
[role="button"][aria-disabled="true"] {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Chiffres alignés en colonnes — toujours préférable pour montants/dates */
|
|
.tabular-nums {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* Italique rubis : convention typographique sur le mot-clé d'un titre */
|
|
em {
|
|
font-style: italic;
|
|
color: var(--color-rubis);
|
|
}
|
|
|
|
/* Anti-overflow sur écrans étroits */
|
|
body,
|
|
#root {
|
|
min-height: 100vh;
|
|
}
|
|
}
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
* Utilitaires custom — touche maison.
|
|
* Pas de helpers Tailwind par-dessus, juste de petites primitives marque.
|
|
* -------------------------------------------------------------------------- */
|
|
@utility eyebrow {
|
|
font-family: var(--font-sans);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.14em;
|
|
color: var(--color-rubis);
|
|
text-transform: uppercase;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
@utility eyebrow-mark {
|
|
/* Le ◆ géométrique, en pseudo-élément carré tourné. Cohérent avec la landing. */
|
|
width: 7px;
|
|
height: 7px;
|
|
background: currentColor;
|
|
display: inline-block;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
@utility shadow-rubis {
|
|
box-shadow: var(--shadow-rubis);
|
|
}
|
|
|
|
@utility shadow-rubis-hover {
|
|
box-shadow: var(--shadow-rubis-hover);
|
|
}
|
|
|
|
@utility shadow-card {
|
|
box-shadow: var(--shadow-card);
|
|
}
|
|
|
|
@utility shadow-soft {
|
|
box-shadow: var(--shadow-soft);
|
|
}
|