/* beachadex/beachadex.css Styles communs à toutes les pages Beachadex (characters.php, officier.php, et celles à venir). À lier en plus de style.css sur chaque page Beachadex. */ /* Police "stencil" façon pochoir militaire, réservée aux titres de section, labels de type/classe et boutons d'action — Bangers (déjà chargée par chaque page, voir ) reste la police d'identité (logo, nom du personnage/bâtiment survolé) pour garder le côté "tropical/BD arcade" ; Staatliches apporte la touche "militaire" sur le chrome UI. Chargée ici (et non dans le de chaque page) pour ne pas avoir à toucher tous les fichiers qui incluent cette feuille. */ /* Polices locales fournies par le projet (fichiers .ttf) : - Bangers : titres et éléments d'identité (logo, nom de fiche, titres de section, en-têtes de bandeaux/onglets, nav du header...) - Montserrat : tout le reste du texte (corps, tableaux, formulaires...) Chemins relatifs à ce fichier (beachadex/beachadex.css) : on suppose un dossier /fonts/ à la racine du site, donc ../fonts/... — à adapter si les .ttf sont rangés ailleurs. Seul le poids Bold a été fourni pour Montserrat : tout le texte "Montserrat" du site s'affiche donc en gras. */ @font-face { font-family: 'Bangers'; src: url('../fonts/Bangers.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } /* Police par défaut de toutes les pages Beachadex/tracker qui chargent cette feuille (corps de texte, tableaux, formulaires...) — les titres et le header ci-dessous surchargent explicitement avec Bangers. */ html, body { font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif; } /* --------------------------------------------------------------------- Variables pilotées par la page Paramètres (settings.php / $user_settings, voir core/settings.php). Thème "Boom Beach tropical & militaire" : sombre = opérations de nuit sur la plage (olive/kaki + camp de base sombre), clair = plage de jour (sable/bois clair) — accent commun turquoise océan, doré pour les éléments "récompense/rang" (voir --bx-gold). Posé par beachadex/includes/header.php via data-theme="light"/dark, etc. sur (voir le script ajouté en bas de header.php). --------------------------------------------------------------------- */ :root { /* Palette calquée sur les fenêtres du jeu (voir screenshots Profil/ Paramètres/Inventaire) : fond lagon bleu profond, panneaux "vitre" bleu turquoise dégradé cerclés de crème/sable, cartes intérieures gris-ardoise, accents dorés façon médaille/bouton. */ --bx-bg: #0b3550; --bx-bg-topbar: #0d3f61; --bx-bg-panel: #1a6fa0; --bx-bg-card: #3a3f4a; --bx-bg-card-2: #4a5162; --bx-bg-input: #f4ecd8; --bx-bg-hover: #565f74; --bx-bg-deep: #2b303a; --bx-border: #f4e6bf; --bx-text: #ffffff; --bx-text-muted: #b9c9dc; --bx-text-muted-2:#8fa3ba; --bx-text-soft: #dfe9f4; --bx-text-soft-2: #eef4fa; --bx-accent: #33c7f0; /* Doré "médaille/récompense/bouton" (Modifier, Oui, badges de QG...) — utilisé à part de --bx-accent (cyan) pour garder ce dernier réservé aux éléments interactifs (liens actifs, focus). */ --bx-gold: #ffb400; --bx-gold-dark: #a95e00; --bx-gold-light: #ffe066; /* Bordure "sable/crème" des grandes fenêtres façon jeu (dialogues, character-dex-card) — distincte de --bx-border (réutilisée aussi pour les liserés fins). */ --bx-card-border: #f4e6bf; /* Bleu "coque de fenêtre" (bandeaux d'onglet, boutons bleus type Aide/Renseignements) et vert "positif" (Oui/validation). */ --bx-window-blue: #2a8fc7; --bx-positive: #7ec13a; --bx-negative: #e0542f; /* Palette "wiki communautaire" (inspirée de boombeach.fandom.com), utilisée UNIQUEMENT par la fiche Beachadex (.character-dex-card et les sections character-dex-section/character-levels-table qui l'accompagnent) — volontairement indépendante de --bx-* ci-dessus (qui pilote le bandeau, le tiroir Paramètres et le thème sombre/clair du reste du site) pour ne rien changer d'autre. Bandeaux bleu-teal + fond crème/parchemin façon infobox de wiki. */ --wiki-teal: #3f7686; --wiki-teal-light: #4f8ea0; --wiki-teal-dark: #2c5866; --wiki-teal-darker: #1f4048; --wiki-cream: #f4e6c6; --wiki-cream-alt: #ecdcb2; --wiki-cream-dark: #e0caa0; --wiki-text: #2c2013; --wiki-text-soft: #55483a; /* Variante grise du bandeau sombre (--wiki-text) -- utilisée pour "Autres caractéristiques" (fond neutre, pas teinté marron). */ --wiki-gray-dark: #333333; --wiki-gray: #3d3d3d; --wiki-gray-light: #494949; --wiki-gray-text: #f2f2f2; --wiki-gray-text-soft: #cfcfcf; /* Nombre de troupes par ligne (character-browse-group-icons) — reflète units_per_row (3 à 6, défaut 4). Une seule grille l'utilise pour l'instant ; à réutiliser telle quelle sur toute future grille Beachadex/tracker concernée par ce réglage. */ --bx-units-per-row: 4; /* Hauteur du topbar (logo/nav/recherche/paramètres, tout sur une seule ligne) — sert à caler le padding-top du body et le panneau de recherche, voir plus bas, sans dupliquer la valeur. */ --bx-topbar-h: 90px; } html[data-theme="light"] { /* Variante "jour" : mêmes fenêtres bleu lagon, fond général plus clair (sable) pour la page derrière les panneaux. */ --bx-bg: #cfe9f7; --bx-bg-topbar: #1a6fa0; --bx-bg-panel: #2a95c9; --bx-bg-card: #eef2f6; --bx-bg-card-2: #dfe6ee; --bx-bg-input: #ffffff; --bx-bg-hover: #e4ecf3; --bx-bg-deep: #d7e0e8; --bx-border: #ffffff; --bx-text: #1c2733; --bx-text-muted: #4d6379; --bx-text-muted-2:#5c7285; --bx-text-soft: #2c3a48; --bx-text-soft-2: #17212b; --bx-accent: #0d84b5; --bx-gold: #f2a900; --bx-gold-dark: #8f5900; --bx-gold-light: #ffd873; --bx-card-border: #ffffff; --bx-window-blue: #2a8fc7; --bx-positive: #6bb02e; --bx-negative: #d84a26; } /* Contraste élevé (réglage "Accessibilité" > Contraste élevé) : bordures et séparateurs renforcés, texte secondaire rapproché du texte principal — appliqué par-dessus le thème choisi (sombre ou clair), pas à sa place. */ html[data-high-contrast="1"] { --bx-border: currentColor; --bx-text-muted: var(--bx-text); --bx-text-muted-2:var(--bx-text); --bx-text-soft: var(--bx-text); --bx-text-soft-2: var(--bx-text); } /* Texte agrandi (réglage "Accessibilité" > Texte agrandi) : agrandit tout le texte des pages Beachadex d'un cran, sans casser les grilles à largeur fixe (elles restent en px, seul le texte grossit). */ html[data-large-text="1"] .character-page-wrapper, html[data-large-text="1"] .settings-page { font-size: 1.12em; } /* Icônes de la bande de navigation (character-browse-icon) : taille pilotée par le réglage icon_size. Par défaut ("medium"), rien ne change — les icônes gardent leur taille actuelle (100% de leur cellule de grille). */ html[data-icon-size="small"] .character-browse-icon img { width: 72%; } html[data-icon-size="large"] .character-browse-icon { padding: 4px; } .beachadex-topbar { display: flex; align-items: center; gap: 18px; padding: 14px 18px; background: linear-gradient(180deg, #0f4e77 0%, var(--bx-bg-topbar) 60%, #082c44 100%); border-bottom: 3px solid var(--bx-gold); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4), inset 0 -8px 14px -10px rgba(0, 0, 0, 0.5); /* position: fixed plutôt que sticky : sticky casse dès qu'un ancêtre (n'importe où dans le DOM, y compris hors de notre contrôle sur les pages du site connecté) a un overflow, un transform ou une hauteur fixe. fixed garantit un header collé en haut "quoi qu'il arrive". */ position: fixed; top: 0; left: 0; right: 0; width: 100%; height: var(--bx-topbar-h); z-index: 1000; box-sizing: border-box; } /* Le topbar sortant du flux normal (position: fixed), on redonne cet espace à toute page qui l'inclut, automatiquement, sans avoir à toucher chaque page une par une. */ body:has(.beachadex-topbar) { padding-top: var(--bx-topbar-h); } /* Sur mobile, ce topbar desktop (logo + nav-links + recherche/paramètres) est remplacé par la barre mobile PARTAGÉE avec le tracker (.bx-mobile-topbar, voir core/mobile_nav.php + style.css) : on le masque ainsi que son panneau de recherche desktop, et on corrige le padding du body en conséquence (règle plus bas dans le fichier que celle ci-dessus, donc prioritaire à égalité de spécificité quand la media query matche). */ @media (max-width: 768px) { .beachadex-topbar, .beachadex-topbar-search { display: none; } body:has(.beachadex-topbar) { padding-top: var(--mobile-topbar-h, 56px); } } .beachadex-topbar-logo { flex-shrink: 0; font-family: 'Bangers', cursive; letter-spacing: 1px; font-size: 1.4em; /* 🔥 CORRECTIF (demande explicite) : texte blanc avec contour noir (au lieu du doré/marron précédent). -webkit-text-stroke pour le contour "propre" (Chrome/Edge/Safari) + text-shadow multi-directionnel en secours pour les navigateurs qui ignorent text-stroke (Firefox). */ color: #fff; -webkit-text-stroke: 1.5px #000; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 4px rgba(0, 0, 0, 0.5); text-decoration: none; } /* Liens Troupes & Armée / Bâtiments / Gravures / Boost / Gadgets — scrollable horizontalement si ça déborde (mobile étroit), plutôt que de casser sur plusieurs lignes ou de rétrécir le logo/les icônes. */ .beachadex-topbar-nav-links { flex: 1; min-width: 0; display: flex; align-items: center; overflow-x: auto; scrollbar-width: none; height: 100%; } .beachadex-topbar-nav-links::-webkit-scrollbar { display: none; } .beachadex-topbar-nav-link { flex-shrink: 0; /* 🔥 Rétréci à ~82% de la taille d'origine (194x50 -> 160x41), même ratio largeur/hauteur conservé pour ne pas déformer le fond biseauté. */ width: 160px; height: 41px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; padding: 3px 6px; margin: 0 1px; color: var(--bx-text-soft); text-decoration: none; font-family: 'Bangers', cursive; letter-spacing: 0.5px; text-transform: uppercase; font-size: clamp(0.6em, 1.2vw, 0.85em); font-weight: 400; line-height: 1.05; white-space: normal; overflow: hidden; border-radius: 8px 8px 0 0; border-bottom: 3px solid transparent; background-image: url('../images/icons/76.png'); background-repeat: no-repeat; background-position: center; background-size: cover; transition: color .15s ease, border-color .15s ease, box-shadow .15s ease; } .beachadex-topbar-nav-link:hover { color: #fff; box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.1); } .beachadex-topbar-nav-link.active { color: var(--bx-gold-light); } /* Dashboard, dans le groupe actions (à droite, avec recherche/paramètres) — pas dans le groupe scrollable, pour rester toujours visible : bouton doré biseauté façon "Modifier"/"Recruter" du jeu. */ .beachadex-topbar-nav-dashboard { width: 160px; height: 41px; padding: 3px 6px; background-image: url('../images/icons/75.png'); background-repeat: no-repeat; background-position: center; background-size: cover; } .beachadex-topbar-nav-dashboard:hover { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.1); } .beachadex-topbar-actions { flex-shrink: 0; display: flex; align-items: center; gap: 14px; } .beachadex-topbar-icon-btn { background: linear-gradient(180deg, #2a8fc7 0%, #0d3f61 100%); border: 2px solid var(--bx-card-border); border-radius: 50%; width: 36px; height: 36px; padding: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); transition: transform .15s ease, border-color .15s ease; } .beachadex-topbar-icon-btn:hover { border-color: var(--bx-gold); transform: translateY(-1px); } .beachadex-topbar-icon-btn img { width: 20px; height: 20px; object-fit: contain; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.4)); } /* --------------------------------------------------------------------- Formulaire "Paramètres" (core/settings_form.php) — était en