/* styles/theme/pinboard/plaques.css — extrait de styles.css L3878-L4120. Plaques métro. */ /* ──────────────── PLAQUES DE STATION CARRELÉES (mode-btn) ──────────────── * DA authentique métro parisien : cadre de tuiles céramique blanches * + plaque émaillée bleue centrale avec typo condensée Oswald (approche * Parisine, la typo historique RATP). Alignement droit, pas de rotation. */ /* Conteneur des 3 plaques — gap de 4px qui simule un joint de tuile * horizontal entre chaque panneau. Les 3 boutons ont des grilles de * tuiles identiques et alignées (même origin) → effet "mur continu". */ #view-landing.pinboard-theme .landing-modes{ position:absolute; left:40px; bottom:24px; z-index:20; display:flex; flex-direction:column; gap:12px; background:transparent; backdrop-filter:none; border:none; box-shadow:none; /* padding = fine marge de faïence autour des plaques (cf. ::before) */ padding:14px; /* Garantit que tous les enfants partagent le même origin de grille */ align-items:flex-start; } /* ── MUR FAÏENCE derrière les plaques (même carrelage biseauté en * quinconce que le mode-config / lobby, cf. platform-decor.css). * Sur la home les plaques flottaient sur la carte nue ; ici elles * sont « montées » sur une section de mur carrelé, cohérent avec * l'écran de sélection. Le SVG est généré (tools/gen-tile-wall.mjs), * chemin relatif résolu depuis ce fichier. ── */ #view-landing.pinboard-theme .landing-modes::before{ content:''; position:absolute; inset:0; z-index:-1; background-image: radial-gradient(ellipse 95% 80% at 42% 14%, rgba(255,255,255,.42), rgba(255,255,255,.07) 55%, transparent 76%), linear-gradient(180deg, rgba(255,255,255,.05) 0%, transparent 26%, transparent 50%, rgba(30,24,15,.14) 74%, rgba(30,24,15,.36) 100%), radial-gradient(ellipse 125% 105% at 44% 26%, transparent 50%, rgba(26,21,13,.22) 100%), url('assets/tile-wall-light.svg'); background-size:auto, auto, auto, 512px 320px; background-repeat:no-repeat, no-repeat, no-repeat, repeat; /* MUR, pas une carte : ni bordure ni coins arrondis. Seulement une * ombre douce diffuse pour le décoller légèrement de la map. */ box-shadow:0 10px 30px -12px rgba(0,0,0,.5); } html[data-theme="dark"] #view-landing.pinboard-theme .landing-modes::before{ background-image: radial-gradient(ellipse 95% 80% at 42% 14%, rgba(255,255,255,.12), rgba(255,255,255,.02) 55%, transparent 76%), linear-gradient(180deg, transparent 36%, rgba(0,0,0,.3) 76%, rgba(0,0,0,.55) 100%), radial-gradient(ellipse 125% 105% at 44% 26%, transparent 48%, rgba(0,0,0,.42) 100%), url('assets/tile-wall-dark.svg'); box-shadow:0 10px 30px -12px rgba(0,0,0,.65); } /* ── DA : mosaïque céramique métro. * Mur entier = tuiles blanches continues. Plaque centrale = zone * peinte en bleu sur la même grille. Joints BLANCS sur la plaque * bleue (comme sur les vraies mosaïques de station). Relief par * tuile (highlight haut / shadow bas) pour du volume céramique. * À droite : panneau métal avec flèche de direction. ── */ .pinboard-theme .mode-btn.metro-plate{ --tile-w: 40px; --tile-h: 20px; --tile-white: #f8f6f0; --tile-white-grout: rgba(60,55,45,.2); --tile-blue: #003f7a; position:relative; display:flex; align-items:stretch; width:480px; /* Plus AUCUN padding : le panneau bleu est À RAS de la faïence (pas * de joint clair autour). Le mur faïence ne se voit qu'entre les * plaques (gap du conteneur) et autour de la pile. */ padding:0; gap:8px; /* bande de faïence entre la plaque titre et le panneau flèche */ border:none; border-radius:0; cursor:pointer; text-align:left; transform:none; transition:transform .2s ease, filter .2s ease; background:transparent; /* ancienne grille de carreaux blancs retirée */ box-shadow:none; /* tue le halo/ombre de carte du bouton de base */ /* Tue le fond persistant du bouton legacy (landing.css / landing-map.css) : * flou de backdrop + overlays ::before/::after qui remplissaient TOUT le * rectangle du bouton (= hauteur de la plaque titre) et restaient visibles * autour du panneau flèche (52px centrés, plus court que la plaque). */ backdrop-filter:none; -webkit-backdrop-filter:none; } /* Overlays legacy (sweep + liseré/accent teal) neutralisés sur les plaques */ .pinboard-theme .mode-btn.metro-plate::before, .pinboard-theme .mode-btn.metro-plate::after{ content:none; display:none; } /* Hover : le MUR reste statique (c'est un mur). Seule la flèche se * décale pour signaler l'affordance. Pas de brightness global. */ .pinboard-theme .mode-btn.metro-plate:active .mp-plate{ filter:brightness(.96); } /* (Reflet émail diagonal retiré — le mur ne doit pas avoir * de gradient directionnel qui se lit comme un mouvement.) */ /* DARK MODE : rien de spécial à peindre, le panneau bleu repose sur le * mur faïence sombre (cf. .landing-modes::before en dark). */ /* PLAQUE bleue : zone de tuiles bleues, JOINTS BLANCS. * flex:1 → largeur uniforme sur les 3 plaques (le conteneur `.metro-plate` * fait 480px et le panneau flèche en prend 52, le reste = plaque). */ .pinboard-theme .mp-plate{ position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:16px 20px 14px; min-height:76px; text-align:center; color:#fff; background-color:var(--tile-blue); /* MOSAÏQUE PEINTE générée (réf. plaques nominatives type JASMIN) : * carreaux carrés 30×30 quasi plats (3-5 rangées par plaque, comme * les vraies), bleu profond à nuances subtiles — cf. * tools/gen-tile-wall.mjs. Ancrage local (pas fixed) : la plaque * est un objet céramique autonome. */ background-image:url('assets/tile-plate-blue.svg'); background-size:360px 180px; background-repeat:repeat; /* Plus de liseré crème (--tile-white) autour du panneau : le bleu * touche DIRECTEMENT la faïence. On garde juste un fin bord sombre + * le modelé interne + l'ombre portée. */ box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.4), /* fin bord sombre du panneau */ inset 0 -4px 10px rgba(0,0,0,.38), inset 0 4px 10px rgba(255,255,255,.1), 0 4px 10px rgba(0,0,0,.35); } /* La typo est PEINTE SUR la mosaïque (comme sur les vraies plaques : * les joints traversent les lettres). Grille de joints en overlay * AU-DESSUS du titre (z:3 > z:2 des .mp-title/.mp-sub) — SEULE * source de grille (les carreaux du SVG sont bord à bord), même pas * de 30px et même origine que la mosaïque → alignement exact. * * MORTIER RÉALISTE : fond blanc cassé + salissures organiques * sombres (double turbulence SVG : taches larges « à certains * endroits » + piqueté fin), le tout DÉCOUPÉ au masque sur les * lignes de joints → des joints blancs, noircis par plaques, * irréguliers le long de leur tracé. */ .pinboard-theme .mp-plate::after{ content:''; position:absolute; inset:0; z-index:3; pointer-events:none; background-color:rgba(213,206,190,.9); background-image:url("data:image/svg+xml;utf8,"); background-size:320px 320px; -webkit-mask-image: repeating-linear-gradient(0deg, #000 0 1px, transparent 1px 30px), repeating-linear-gradient(90deg, #000 0 1px, transparent 1px 30px); mask-image: repeating-linear-gradient(0deg, #000 0 1px, transparent 1px 30px), repeating-linear-gradient(90deg, #000 0 1px, transparent 1px 30px); } /* NB échelle : le pas de carreau (30px) est FIXE ici — les plaques de * la landing et du lobby ont une taille fixe, leur mosaïque ne doit * pas changer avec l'écran. Seule la plaque du mode-config grandit * avec le viewport : son palier 2K (pas de 40px) est dans * mode-config.css, scoping .mc-head-plate. */ /* PANNEAU FLÈCHE — plaque blanche carrée posée sur le mur de tuiles, * grosse flèche bleue au centre. Carré 72×72, centré verticalement * dans le flex parent (ne s'étire pas sur la hauteur de la plaque). */ .pinboard-theme .mp-arrow-panel{ position:relative; z-index:1; flex-shrink:0; align-self:center; width:52px; height:52px; /* carré compact */ display:flex; align-items:center; justify-content:center; background:#ffffff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), inset 0 -3px 6px rgba(0,0,0,.08), inset 0 3px 6px rgba(255,255,255,.4), 0 4px 10px rgba(0,0,0,.3); } /* Dark mode : panneau flèche en tuile crème atténuée, cohérent avec * le mur anthracite (au lieu de blanc éclatant qui "sort" trop). */ html[data-theme="dark"] .pinboard-theme .mp-arrow-panel{ background:#e8e1cf; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), inset 0 -3px 6px rgba(0,0,0,.12), inset 0 3px 6px rgba(255,255,255,.3), 0 4px 10px rgba(0,0,0,.5); } .pinboard-theme .mp-arrow{ display:block; width:34px; height:34px; color:var(--tile-blue); filter:drop-shadow(0 1px 0 rgba(0,0,0,.15)); } /* (Pas de translation de la flèche au hover : ça donnait l'impression * que les carreaux glissaient horizontalement.) */ /* Titre principal — typo Barlow Semi Condensed 800. * Couleur CRÈME comme sur les vraies mosaïques (Abbesses, Gaité) : * les lettres sont "faites" de la couleur des tuiles claires, pas * un texte blanc avec outline. Simple drop-shadow discret pour * décoller du fond bleu sans casser la lecture. */ .pinboard-theme .mp-title{ position:relative; z-index:2; font-family:'Barlow Semi Condensed', 'Barlow', 'Archivo', sans-serif; font-weight:800; font-size:36px; line-height:1; letter-spacing:2px; /* respiration inter-lettres, style mosaïque métro */ color:#f8f6f0; /* même teinte que les tuiles crème */ text-transform:uppercase; white-space:nowrap; text-shadow:0 1px 0 rgba(0,0,0,.45); } /* Sous-titre (plus petit, façon "FROISSART" sous "SAINT-SÉBASTIEN") */ .pinboard-theme .mp-sub{ position:relative; z-index:2; font-family:'Barlow Semi Condensed', 'Barlow', 'Archivo', sans-serif; font-weight:600; font-size:12px; line-height:1.1; letter-spacing:1.6px; color:#f8f6f0; text-transform:uppercase; white-space:nowrap; text-shadow:0 1px 0 rgba(0,0,0,.45); }