/* ========================================================================== WAKAME - Jetons de la direction artistique Une seule définition pour les deux surfaces du projet : la vitrine (wakame.css, menu.css, article.css) et le back-office (admin.css, connexion.css). Ce fichier est chargé EN PREMIER par les deux têtes de gabarit - views/partials/wakame-head.ejs et views/partials/admin-head.ejs. Il porte les variables, la fonte du logotype et une seule règle : la classe des icônes. Les deux surfaces s'en servent, les mettre dans admin.css et dans wakame.css ferait deux définitions à tenir d'accord. Les valeurs viennent du fichier Figma « Landing page ». Elles sont ici plutôt que dans le :root de wakame.css pour que le back-office parle la même langue que le site sans charger les 1 600 lignes de la vitrine. ========================================================================== */ /* -------------------------------------------------------------------------- Logotype - « Edo SZ » La police du mot WAKAME dans la maquette, et elle n'est pas libre : le fichier est servi depuis public/fonts/edo-sz.ttf, à défaut de quoi la pile de --f-display retombe sur Potta One (brossé japonais, chargé par les deux têtes de gabarit). Ici et non dans la tête de la vitrine : le logotype apparaît aussi dans le back-office (barre latérale, écran de connexion), qui ne charge pas wakame.css. Une @font-face absente d'une des deux surfaces ferait écrire le même mot dans deux polices différentes. -------------------------------------------------------------------------- */ @font-face { font-family: "Edo SZ"; src: local("Edo SZ"), local("EdoSZ"), url("/fonts/edo-sz.ttf") format("truetype"); font-display: swap; } :root { /* ---- Couleurs - variables du fichier Figma ---------------------------- */ --ink: #1e1830; /* Secondary - le bleu-nuit du héro et du pied de page */ --ink-soft: #2a2244; --red: #d83232; /* Tertiary */ --cream: #ffdcb4; /* Primary */ --paper: #fff7f7; /* White */ --brown: #2d1408; /* Black */ --gold: #ffcc00; /* Accents/Yellow */ --foodease: #26ccf1; --plate: #efeee8; --ph: #e4e1dc; /* Fond des visuels CMS sans image */ /* 1 px de la maquette. Au delà de 1400 px de large, ce jeton grandit (voir « 14. Adaptatif » dans wakame.css) : la vitrine étant mesurée en --u, l'agrandir remet la maquette à l'échelle de l'écran d'un seul geste. Le back-office ne s'en sert pas : un outil de saisie n'est pas une maquette à l'échelle, il se règle en rem et en px pour rester lisible quelle que soit la taille de la fenêtre. */ --u: .4px; /* ---- Typographie ------------------------------------------------------ Fredoka tient lieu de police courante (--f-body) et d'interface (--f-ui). Les deux jetons restent distincts - ils ne désignent pas la même chose et pourraient redivergir - mais pointent sur la même pile, --f-round. Caveat Brush est réservée aux titres passés en capitales, sa casse d'origine dans la maquette. Partout où le texte garde la sienne (« Aa », « Installez-vous… », noms de plats, accroches du CMS), la brosse cède à l'œil : ces endroits sont en Fredoka semi-bold, jamais en --f-hand. */ --f-round: "Fredoka", "Trebuchet MS", "Segoe UI", sans-serif; --f-display: "Edo SZ", "Potta One", "M PLUS Rounded 1c", serif; --f-hand: "Caveat Brush", "Segoe Script", cursive; /* capitales seulement */ --f-body: var(--f-round); /* Kanjis du héro et katakanas de « Notre histoire », toujours en Light (300) : c'est la seule graisse chargée. Ces signes sont posés en filigrane, à très grand corps - un trait fin les tient à leur rang de fond, là où une graisse lourde en aurait fait des aplats. */ --f-jp: "M PLUS Rounded 1c", "Hiragino Sans", sans-serif; --f-ui: var(--f-round); /* Chiffres et code : la seule pile non-Fredoka du projet. Le back-office aligne des prix, des heures et des identifiants en colonnes - il lui faut des chiffres de largeur fixe, que Fredoka ne fournit pas. */ --f-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace; /* Tailles réellement rendues dans la maquette */ --fs-40: calc(40 * var(--u)); /* 16 px - texte courant, nav */ --fs-48: calc(48 * var(--u)); /* 19,2 px - sous-titres, titres d'étape */ --fs-64: calc(64 * var(--u)); /* 25,6 px - titres de section */ --fs-96: calc(96 * var(--u)); /* 38,4 px - logotype */ /* ---- Mise en page ------------------------------------------------------ */ --container: calc(3065 * var(--u)); /* 1226 px */ --gutter: clamp(1.25rem, 4vw, calc(150 * var(--u))); --header-h: calc(130 * var(--u)); /* 52 px */ /* ---- Rayons ------------------------------------------------------------ */ --r-btn: calc(20 * var(--u)); /* 8 px */ --r-card: calc(30 * var(--u)); /* 12 px */ --r-panel: calc(50 * var(--u)); /* 20 px */ /* ---- Ombres (rayon / décalage Figma ÷ 2,5) ----------------------------- Sur le crème, la maquette n'ombre pas en noir mais en #1E1830 à 20 %, la couleur --ink : c'est déjà celle des calques du héro. Un noir pur y vire au gris sale, le crème étant très saturé. Les fonds sombres, eux, gardent le noir : une ombre encrée y aurait la couleur du fond et disparaîtrait. Les ombres restées noires sont donc toutes sur --ink, sur le bandeau rouge ou sur une photo. */ --sh-ink: rgb(30 24 48 / .2); --sh-sm: 1px 2px 6px var(--sh-ink); --sh-md: 2px 4px 6px var(--sh-ink); --sh-lg: 2px 4px 6px var(--sh-ink); /* ---- Tapis roulant (vitrine seule) ------------------------------------- --belt-k réduit l'ensemble d'un coup (hauteur, pas, lattes, assiettes) : ne rapetisser que le bandeau couperait les lattes et les assiettes, qui sont dimensionnées pour la hauteur de la maquette. /script/tapis.js le relit pour que tout ce qui roule suive la même échelle. --belt-h est l'épaisseur du bandeau : celle du tapis droit de l'accueil, et celle des rails de /kaiten, dont le script tire le tracé du circuit. --belt-cycle est la durée d'un pas, donc la VITESSE de tout ce qui roule - lattes et assiettes. C'est le seul réglage à toucher pour accélérer ou ralentir le tapis, script compris (le mouvement réduit le redéfinit, voir « 15. Animations réduites » dans wakame.css). Le pas lui-même (186,99 unités) ne se règle pas : c'est l'écart des deux charnières du tracé de la latte, et il vit dans /script/tapis.js avec la hauteur qui va avec. */ --belt-k: 1; --belt-h: calc(267 * var(--u) * var(--belt-k)); /* 106,8 px */ --belt-cycle: 1.55s; /* durée d'un pas ⇢ ≈ 45 px/s */ /* Case où s'inscrit la découpe de sushi, en % de l'assiette. /script/tapis.js les relit pour calculer la taille affichée de chaque image : une seule source. */ --food-w: 48.5%; --food-h: 54.3%; --ease: cubic-bezier(.22, .61, .36, 1); } /* -------------------------------------------------------------------------- Icônes - Material Symbols Rounded Toutes les icônes du projet viennent de cette fonte, plutôt que de tracés SVG recopiés ou de glyphes typographiques dont le dessin change d'un système à l'autre. Le tracé « rounded » colle aux angles arrondis de la maquette. Chaque tête de gabarit ne charge que les icônes de sa surface, via le paramètre `icon_names` de Google Fonts : la vitrine en tire six, le back-office une quarantaine. Sans ce découpage, ce serait la fonte entière (plusieurs milliers de dessins) sur chaque page. Le nom de l'icône s'écrit en toutes lettres dans le HTML (`delete`) : c'est une ligature, la fonte remplace le mot par le dessin. D'où `font-display: block` côté Google Fonts - avec `swap`, le mot « delete » s'afficherait en clair le temps du chargement. `msr` plutôt que le nom complet `material-symbols-rounded` : la classe est répétée sur chaque icône, dans des gabarits et des chaînes JavaScript. -------------------------------------------------------------------------- */ .msr { font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal; font-size: 20px; /* redéfini au cas par cas */ line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; /* L'icône se pose sur la ligne de texte comme une lettre : sans cela elle repose sur la ligne de base et paraît remontée à côté de son libellé. */ vertical-align: middle; /* Une icône est un dessin, pas du texte : elle ne se sélectionne pas et n'intercepte pas le clic destiné au bouton qui la porte. */ user-select: none; pointer-events: none; flex: none; } /* Réglages de l'axe variable. FILL passe le dessin du contour au plein : on s'en sert pour l'état « actif » (étoile pleine, œil barré). L'axe doit être demandé en intervalle dans l'URL Google Fonts, `FILL@0..1` et non `FILL@0` : une valeur unique fait servir une fonte statique figée sur ce point, où `font-variation-settings` n'a plus rien à faire varier, et les étoiles pleines sortent en contour. Voir les deux têtes de gabarit. */ .msr--fill { font-variation-settings: "FILL" 1; } .msr--18 { font-size: 18px; } .msr--24 { font-size: 24px; }