/* ========================================================================== LUCKY TWINS, SYSTEME ========================================================================== Les jetons, les primitives shadcn portees a la main, et rien d'autre. Les deux surfaces partagent ce fichier et changent de registre par un seul attribut sur la racine : la landing, noir, cinema la proposition, papier chaud, document Les noms de variables sont ceux de shadcn/ui, a la lettre. Il n'y a pas de React ici : les primitives sont reecrites en CSS avec la meme anatomie, les memes etats data-state et le meme anneau de focus. Une equipe qui connait shadcn retrouve ses reperes. ========================================================================== */ /* -------------------------------------------------------------------------- 1. LES JETONS -------------------------------------------------------------------------- */ :root { /* Le registre de scene. La landing. */ --background: #080808; --foreground: #f5f3ee; --card: #111111; --card-foreground: #f5f3ee; --popover: #111111; --popover-foreground: #f5f3ee; --primary: #f5f3ee; --primary-foreground: #080808; --secondary: #181818; --secondary-foreground: #f5f3ee; --muted: #181818; --muted-foreground: #a7a49d; --accent: #ff3b30; --accent-foreground: #080808; --border: #292929; --input: #343434; --ring: #ff3b30; --surface-raised: #111111; --surface-strong: #181818; --text-secondary: #c8c5be; --text-tertiary: #85827c; /* Le rouge n'est pas une couleur de marque, c'est un signal de production herite des archives. Il vit dans la ligne de parcours, l'anneau de focus, le marqueur de page active, les grands chiffres de preuve, les marqueurs editoriaux de 12 px au plus, et le T du sigle. Nulle part ailleurs : jamais dans un paragraphe, un fond de section, un voile sur image, un grand bouton, un degrade, un nom de fondateur, une categorie de service ni un emplacement d'image. */ /* L'echelle typographique */ --text-xs: clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem); --text-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem); --text-base: clamp(1rem, 0.96rem + 0.18vw, 1.125rem); --text-md: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem); --text-lg: clamp(1.375rem, 1.16rem + 0.9vw, 2rem); --text-xl: clamp(1.75rem, 1.35rem + 1.7vw, 3rem); --text-2xl: clamp(2.25rem, 1.55rem + 3vw, 4.5rem); --text-3xl: clamp(3rem, 1.8rem + 5vw, 7rem); --text-display: clamp(3.75rem, 2rem + 7.5vw, 10rem); --text-stat: clamp(4.5rem, 2.25rem + 9vw, 12rem); --leading-body: 1.55; --leading-lead: 1.4; --leading-display: 0.88; --leading-stat: 0.82; --track-display: -0.045em; --track-body: -0.012em; --track-label: 0.12em; --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; --font-body: "Inter", "Helvetica Neue", Arial, sans-serif; /* Le rayon. Presque carre : le travail reste editorial et ne glisse pas vers l'esthetique tableau de bord. */ --radius-sm: 0.25rem; --radius: 0.375rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-full: 9999px; /* L'espace */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; --space-11: 12rem; --space-12: 16rem; /* La grille */ --content-max: 1440px; --reading-max: 720px; --proposal-max: 1320px; --gutter: 20px; --cols: 4; --col-gap: 12px; --section-pad-y: 96px; --tap: 44px; /* Le mouvement */ --dur-fast: 160ms; --dur-base: 300ms; --dur-slow: 600ms; --ease-out: cubic-bezier(0.2, 0, 0, 1); --ease-emph: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); } @media (min-width: 768px) { :root { --gutter: 28px; --cols: 8; --col-gap: 20px; --section-pad-y: 128px; } } @media (min-width: 1080px) { :root { --gutter: 40px; --cols: 12; --col-gap: 24px; --section-pad-y: 160px; } } /* Le registre papier. La proposition. Le rouge descend d'un cran pour tenir son contraste sur un fond chaud. */ :root[data-surface="paper"] { --background: #f1efe9; --foreground: #111111; --card: #e8e5de; --card-foreground: #111111; --popover: #f8f6f1; --popover-foreground: #111111; --primary: #111111; --primary-foreground: #f8f6f1; --secondary: #e3e0d8; --secondary-foreground: #111111; --muted: #e8e5de; --muted-foreground: #68655f; --accent: #c92f28; --accent-foreground: #ffffff; --border: #cbc7be; --input: #bdb9b0; --ring: #c92f28; --surface-raised: #f8f6f1; --surface-strong: #e3e0d8; --text-secondary: #4f4c47; --text-tertiary: #706c66; } /* -------------------------------------------------------------------------- 2. LA BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; } body { margin: 0; min-height: 100%; background: var(--background); color: var(--foreground); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); letter-spacing: var(--track-body); font-synthesis-weight: none; -webkit-font-smoothing: antialiased; overflow-x: clip; } h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; } ul, ol { padding: 0; list-style: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: var(--leading-display); letter-spacing: var(--track-display); text-wrap: balance; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; height: auto; } button, input { font: inherit; letter-spacing: inherit; color: inherit; } ::selection { background: var(--accent); color: #ffffff; } /* L'anneau de focus de shadcn, tel quel, partout. */ :focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: var(--radius-sm); } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: var(--space-3) var(--space-5); background: var(--foreground); color: var(--background); font-size: var(--text-sm); } .skip:focus { left: var(--gutter); top: var(--space-3); } .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* -------------------------------------------------------------------------- 3. LES ROLES DE TEXTE -------------------------------------------------------------------------- */ .label { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; line-height: 1; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent); } .label--mute { color: var(--text-tertiary); } .lead { font-size: var(--text-md); line-height: var(--leading-lead); color: var(--text-secondary); max-width: 34ch; text-wrap: pretty; } .body { color: var(--text-secondary); max-width: 62ch; text-wrap: pretty; } .stat { font-family: var(--font-display); font-weight: 600; line-height: var(--leading-stat); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; color: var(--accent); } @media (min-width: 768px) { .lead { max-width: 42ch; } } /* -------------------------------------------------------------------------- 4. LA GRILLE -------------------------------------------------------------------------- */ .shell { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); } :root[data-surface="paper"] .shell { max-width: var(--proposal-max); } .grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--col-gap); } .section { padding-block: var(--section-pad-y); } /* -------------------------------------------------------------------------- 5. LES PRIMITIVES SHADCN Quatre, et seulement quatre. Un composant se justifie par une interaction reelle, pas par le besoin de grouper des choses. -------------------------------------------------------------------------- */ /* 5.1 Button --------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--tap); padding: 0 var(--space-5); border: 1px solid transparent; border-radius: 6px; font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .btn[disabled], .btn[data-state="loading"] { pointer-events: none; opacity: 0.55; } .btn--primary { background: var(--primary); color: var(--primary-foreground); } .btn--primary:hover { background: var(--foreground); color: var(--background); filter: brightness(0.92); } .btn--outline { background: transparent; border-color: var(--border); color: var(--foreground); } .btn--outline:hover { background: var(--secondary); border-color: var(--input); } .btn--ghost { background: transparent; color: var(--foreground); padding-inline: var(--space-3); } .btn--ghost:hover { background: var(--secondary); } .btn--block { width: 100%; } .btn:active { transform: translateY(1px); } /* 5.2 Input ---------------------------------------------------------------- */ .input { display: block; width: 100%; min-height: var(--tap); padding: var(--space-3) var(--space-4); background: transparent; border: 1px solid var(--input); border-radius: 6px; font-family: var(--font-display); font-size: var(--text-md); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; transition: border-color var(--dur-fast) var(--ease-out); } .input::placeholder { color: var(--text-tertiary); letter-spacing: 0.14em; } .input:hover { border-color: var(--foreground); } .input[aria-invalid="true"] { border-color: var(--accent); } .field { display: grid; gap: var(--space-2); } .field > label { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-tertiary); } /* 5.3 Overlay, partage par Dialog et Sheet --------------------------------- */ .overlay { position: fixed; inset: 0; z-index: 60; background: rgb(0 0 0 / 0.72); opacity: 0; pointer-events: none; transition: opacity 180ms var(--ease-out); } .overlay[data-state="open"] { opacity: 1; pointer-events: auto; } /* 5.4 Dialog --------------------------------------------------------------- */ .dialog { position: fixed; z-index: 61; left: 50%; top: 50%; width: min(440px, calc(100vw - 2 * var(--gutter))); padding: var(--space-7); background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 24px 80px rgb(0 0 0 / 0.45); opacity: 0; transform: translate(-50%, -50%) scale(0.98); transform-origin: center; pointer-events: none; transition: opacity 120ms var(--ease-in), transform 120ms var(--ease-in); } .dialog[data-state="open"] { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); } /* 5.5 Sheet ---------------------------------------------------------------- */ .sheet { position: fixed; z-index: 61; inset-block: 0; right: 0; width: min(420px, 88vw); display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-6) var(--space-6) calc(var(--space-8) + env(safe-area-inset-bottom)); background: var(--popover); color: var(--popover-foreground); border-left: 1px solid var(--border); transform: translateX(100%); transition: transform 280ms var(--ease-emph); overflow-y: auto; overscroll-behavior: contain; } .sheet[data-state="open"] { transform: translateX(0); } .sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .sheet__nav { display: grid; } .sheet__nav a { padding-block: var(--space-4); border-top: 1px solid var(--border); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.03em; } .sheet__nav a:last-child { border-bottom: 1px solid var(--border); } body[data-locked="true"] { overflow: hidden; } /* -------------------------------------------------------------------------- 6. LA REVELATION AU DEFILEMENT Un seul observateur, un seul etat, une seule fois par element. -------------------------------------------------------------------------- */ .rv { opacity: 1; transform: translateY(20px); transition: transform var(--dur-slow) var(--ease-emph), clip-path var(--dur-slow) var(--ease-emph); transition-delay: var(--rv-delay, 0ms); } .rv--sm { transform: translateY(12px); transition-duration: 500ms; } .rv--flat { transform: scale(0.985); clip-path: inset(1.5% 0); transition-duration: 600ms; } .rv--fast { transform: translateY(6px); transition-duration: 300ms; } .rv.is-in { opacity: 1; transform: none; clip-path: inset(0); } /* Sans JavaScript, tout est visible. Aucun contenu ne depend d'une animation. */ html:not(.has-js) .rv { opacity: 1; transform: none; clip-path: inset(0); } /* -------------------------------------------------------------------------- 7. MOUVEMENT REDUIT -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .rv { opacity: 1; transform: none; clip-path: inset(0); } }