/* ============================================================================ NekoTrip — jeu de tokens unique (kit UI « Encre · Crème · Orange ») ---------------------------------------------------------------------------- Trois couleurs de marque tirées de l'icône, déclinées en rôles. L'orange ne sert JAMAIS de fond de page : c'est une couleur d'action, rare et donc lisible. Un seul bouton orange par écran. Deux thèmes : · sombre → :root (vitrine + mode voyage + app phase 1) · clair → body.nk-light (app « préparation », phase ultérieure) RÈGLE : ce fichier est le SEUL endroit du dépôt où un littéral de couleur est légal sous public/site et public/app. Le test tests/design/ l'impose. ATTENTION : ne PAS utiliser l'attribut `data-theme` pour la bascule. Il est déjà pris par les 8 thèmes décoratifs de guide (forest, neon, sakura, ocean, sunset, snow, temple, bamboo), posés sur par public/app/js/guide/guide-viewer.js:99. Pire, guide-viewer.css:20 déclare `:root, [data-theme="forest"]` — le :root par défaut EST le thème forest. D'où la bascule par classe sur . ============================================================================ */ :root { /* ── Marque ────────────────────────────────────────────────────────────── */ --nk-ink: #17130D; /* encre : noir chaud, jamais neutre */ --nk-cream: #F7E9D1; /* crème */ --nk-accent: #F17715; /* orange torii */ /* ── Surfaces (sombre) ─────────────────────────────────────────────────── */ --nk-bg-deep: #100D08; --nk-bg: #17130D; --nk-surface: #201B14; --nk-surface-hi: #2A241B; /* ── Texte & bordures (sombre) ─────────────────────────────────────────── */ --nk-fg: #F7E9D1; --nk-fg-muted: rgba(247, 233, 209, .62); --nk-fg-faint: rgba(247, 233, 209, .42); --nk-bd: rgba(247, 233, 209, .12); --nk-bd-hi: rgba(247, 233, 209, .24); /* Voile crème : survols, fonds discrets, pistes d'onglets. L'alpha encode la hiérarchie — ne pas les confondre. */ --nk-veil: rgba(247, 233, 209, .05); --nk-veil-2: rgba(247, 233, 209, .08); --nk-veil-3: rgba(247, 233, 209, .14); /* ── Accent (sombre) ───────────────────────────────────────────────────── */ --nk-accent-text: #F9963F; /* liens & accent sur fond sombre */ --nk-accent-hover: #FF8B2E; --nk-accent-active: #F17715; --nk-accent-soft: rgba(241, 119, 21, .14); --nk-accent-line: rgba(241, 119, 21, .40); --nk-on-accent: #17130D; /* le texte sur l'orange est TOUJOURS encre */ /* ── Statuts (palette chaude — rouge brique, pas rouge alarme) ─────────── */ --nk-success: #59A96A; --nk-success-text: #7FC98F; --nk-success-soft: rgba(89, 169, 106, .18); --nk-warn: #D9A441; --nk-warn-text: #E5BC6C; --nk-warn-soft: rgba(217, 164, 65, .18); --nk-error: #D45F4B; --nk-error-text: #E87760; --nk-error-soft: rgba(232, 119, 96, .18); /* ── Sélection & étiquettes ────────────────────────────────────────────── */ /* Le kit est formel : un filtre sélectionné n'est PAS orange. Il s'inverse — crème plein sur fond sombre, encre plein sur fond clair. */ --nk-chip-on-bg: #F7E9D1; --nk-chip-on-fg: #17130D; /* Prix et horaires, toujours en mono */ --nk-tag-bg: rgba(247, 233, 209, .08); --nk-tag-fg: #F7E9D1; /* ── Rayons ────────────────────────────────────────────────────────────── */ --nk-r-chip: 6px; --nk-r-field: 10px; --nk-r-card: 14px; --nk-r-panel: 20px; --nk-r-icon: 28px; --nk-r-pill: 999px; /* ── Typographie ───────────────────────────────────────────────────────── */ /* Rôles stricts : la serif ne descend jamais sous 22 px, la mono ne monte jamais au-dessus de 12 px. */ --nk-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif; --nk-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Pas de webfont CJK : 300 Ko à 3 Mo selon le sous-ensemble, pour du contenu (les name_local du catalogue). On s'appuie sur le système, et les mêmes fallbacks sont ajoutés à la fin de --nk-sans pour le japonais en ligne. */ --nk-jp: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', 'Meiryo', sans-serif; --nk-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans JP'; /* Échelle du kit */ --nk-fs-display-xl: 68px; --nk-lh-display-xl: 1.02; --nk-fs-display-l: 44px; --nk-lh-display-l: 1.05; --nk-fs-heading-l: 26px; --nk-lh-heading-l: 1.25; --nk-fs-heading-s: 17px; --nk-lh-heading-s: 1.35; --nk-fs-body-m: 15px; --nk-lh-body-m: 1.65; --nk-fs-body-s: 13px; --nk-lh-body-s: 1.6; --nk-fs-label: 11px; --nk-ls-label: .16em; /* ── Effets ────────────────────────────────────────────────────────────── */ /* Halo torii : lueur orange derrière les héros et l'avatar de Neko */ --nk-halo: radial-gradient(circle at 50% 120%, rgba(241, 119, 21, .42) 0%, rgba(241, 119, 21, 0) 62%); /* Grain : bruit 4 %, sur les grands aplats sombres uniquement */ --nk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E"); /* Verre & liseré : barres flottantes uniquement */ --nk-glass-bg: rgba(247, 233, 209, .05); --nk-glass-inset: inset 0 1px 0 rgba(247, 233, 209, .10); /* Profondeur par la valeur, presque jamais par le flou */ --nk-shadow-card: 0 12px 30px rgba(0, 0, 0, .35); --nk-shadow-modal: 0 30px 70px rgba(0, 0, 0, .55); /* Voile derrière les modales — de l'encre, pas du noir neutre */ --nk-scrim: rgb(16 13 8 / .62); --nk-scrim-soft: rgb(16 13 8 / .30); /* Trois paliers d'ombre. Le kit en use peu : la profondeur vient de la valeur. */ --nk-shade-1: rgb(0 0 0 / .20); --nk-shade-2: rgb(0 0 0 / .35); --nk-shade-3: rgb(0 0 0 / .55); /* Anneau de focus : 2 px de fond + 2 px d'orange clair. JAMAIS supprimé. */ --nk-focus: 0 0 0 2px var(--nk-bg), 0 0 0 4px var(--nk-accent-text); /* ── Transitions ───────────────────────────────────────────────────────── */ --nk-t-fast: .15s ease; --nk-t: .2s ease; --nk-t-slow: .35s ease; /* ── Gabarit ───────────────────────────────────────────────────────────── */ --nk-maxw: 1180px; --nk-header-h: 68px; /* Zones sûres iOS */ --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); } /* ============================================================================ Thème clair — « un papier légèrement chaud, jamais blanc pur : on lit longtemps un itinéraire. » Écrit maintenant, activé plus tard : poser `nk-light` sur suffira. Chaque token sémantique du bloc sombre a ici son équivalent — c'est ce qui rend la bascule future gratuite. ============================================================================ */ body.nk-light { --nk-bg-deep: #F4EEE4; --nk-bg: #FBF7F0; --nk-surface: #FFFFFF; --nk-surface-hi: #EBE2D3; --nk-fg: #17130D; --nk-fg-muted: rgba(23, 19, 13, .60); --nk-fg-faint: rgba(23, 19, 13, .42); --nk-bd: rgba(23, 19, 13, .10); --nk-bd-hi: rgba(23, 19, 13, .22); --nk-veil: rgba(23, 19, 13, .05); --nk-veil-2: rgba(23, 19, 13, .07); --nk-veil-3: rgba(23, 19, 13, .12); --nk-accent-text: #C25A00; --nk-accent-hover: #D96809; --nk-accent-active: #C25A00; --nk-accent-soft: rgba(241, 119, 21, .14); --nk-accent-line: rgba(241, 119, 21, .40); --nk-success-text: #2F7040; --nk-success-soft: rgba(89, 169, 106, .14); --nk-warn-text: #8A6412; --nk-warn-soft: rgba(217, 164, 65, .16); --nk-error-text: #A83B28; --nk-error-soft: rgba(212, 95, 75, .14); --nk-chip-on-bg: #17130D; --nk-chip-on-fg: #F7E9D1; --nk-tag-bg: #F4EEE4; --nk-tag-fg: #17130D; --nk-glass-bg: rgba(23, 19, 13, .04); --nk-glass-inset: inset 0 1px 0 rgba(255, 255, 255, .60); --nk-shadow-card: 0 6px 20px rgba(23, 19, 13, .06); --nk-shadow-modal: 0 30px 70px rgba(23, 19, 13, .18); } /* ============================================================================ PONT DE COMPATIBILITÉ — TRANSITOIRE, À SUPPRIMER EN FIN DE PHASE 3 ---------------------------------------------------------------------------- Les anciens tokens `--nt-*` sont redéfinis en fonction des nouveaux, ce qui repeint d'un coup public-site.css (2943 l., 100 % piloté par var()) et neko-shell.css (935 l.). `--nt-*` était déclaré DEUX FOIS avec des valeurs différentes : · public/site/style/public-site.css → --nt-bg #050509 (page vitrine) · public/app/style/neko-shell.css → --nt-bg #0f0f1a (coquille app) Aucune page ne charge les deux (vérifié) : la collision est latente. Le pont la désamorce en les faisant converger. ⚠ Ce pont ne suffit PAS pour l'app. neko-modules.css porte 471 littéraux, 37 dégradés et 15 backdrop-filter : redéfinir --nt-primary ne change rien à un `.k6-btn-primary { background: linear-gradient(135deg,#6366f1,#8b5cf6) }`. Côté app le pont n'est qu'un échafaudage qui évite une coquille cassée entre deux balayages — il est retiré avec le dernier littéral. ============================================================================ */ :root { --nt-bg: var(--nk-bg); --nt-bg-elevated: var(--nk-surface); --nt-bg-card: var(--nk-surface); --nt-bg-hover: var(--nk-veil); --nt-bg-active: var(--nk-accent-soft); --nt-border: var(--nk-bd); --nt-border-light: var(--nk-veil-2); --nt-border-focus: var(--nk-accent); --nt-primary: var(--nk-accent); --nt-primary-light: var(--nk-accent-text); --nt-primary-dark: var(--nk-accent-active); --nt-primary-glow: var(--nk-accent-soft); --nt-text: var(--nk-fg); --nt-text-secondary: var(--nk-fg-muted); --nt-text-muted: var(--nk-fg-faint); --nt-success: var(--nk-success); --nt-warning: var(--nk-warn); --nt-danger: var(--nk-error); --nt-info: var(--nk-accent-text); --nt-radius-sm: 8px; --nt-radius-md: var(--nk-r-field); --nt-radius-lg: var(--nk-r-card); --nt-radius-xl: var(--nk-r-panel); --nt-transition-fast: var(--nk-t-fast); --nt-transition-base: var(--nk-t); --nt-transition-normal: var(--nk-t); --nt-transition-slow: var(--nk-t-slow); /* Échelle d'espacement de la coquille app (neko-shell.css). */ --nt-space-xs: 4px; --nt-space-sm: 8px; --nt-space-md: 16px; --nt-space-lg: 24px; --nt-space-xl: 32px; --nt-space-2xl: 64px; /* Zones sûres iOS, reprises telles quelles par la coquille app. */ --nt-header-height: 56px; --nt-bottomnav-height: 64px; --nt-sidebar-width: 260px; } /* La vitrine pose son fond de page sur le ton le plus profond, et garde son échelle d'espacement — plus large que celle de l'app. */ body.nt-public { --nt-bg: var(--nk-bg-deep); --nt-space-xs: 6px; --nt-space-sm: 10px; --nt-space-xl: 40px; } /* ── Alias de la landing ─────────────────────────────────────────────────── landing.css nomme certaines surfaces autrement (--nk-red, 31 usages ; --nk-card ; --nk-bubble…). On les rattache aux tokens du kit plutôt que de réécrire ses 578 lignes. Le :root de landing.css est supprimé en phase 1, ce qui laisse ce fichier seul déclarant des tokens de marque. */ :root { --nk-red: var(--nk-accent); --nk-red-soft: var(--nk-accent-soft); --nk-green: var(--nk-success); --nk-ink-deep: var(--nk-bg-deep); --nk-card: var(--nk-surface); --nk-panel: var(--nk-bg); --nk-bubble: var(--nk-surface-hi); --nk-stripe: #241E17; --nk-fg-2: var(--nk-fg-muted); --nk-fg-3: var(--nk-fg-faint); --nk-fg-4: rgba(247, 233, 209, .34); --nk-bd-2: var(--nk-veil-2); --nk-bd-3: var(--nk-veil-3); --nk-r-sm: var(--nk-r-field); --nk-r: var(--nk-r-card); --nk-r-lg: var(--nk-r-panel); --nk-shadow: 0 44px 90px -38px rgba(0, 0, 0, .78); --nk-display: var(--nk-serif); }