/** * Terrino — CSS principal du plugin * Charte Graphique v1.0 — Terrino * * Ce fichier est chargé à la fois sur le front-end (espace membre) * et sert de base aux styles du thème enfant. * * @package Terrino * @since 1.0.0 */ /* ─── VARIABLES CSS — Charte Graphique Terrino ──────────────────────────────── */ :root { /* ═══════════════════════════════════════════════════════════════════ SOURCE UNIQUE DES VARIABLES — Celtic Irish Club Les couleurs d'identité (--club-primary/secondary/accent/text) sont surchargées dynamiquement dans le par le thème (functions.php), qui lit la table terrino_clubs. Ce bloc sert de FALLBACK. ═══════════════════════════════════════════════════════════════════ */ /* Couleurs d'identité (dynamiques) */ --club-primary: #1C7241; --club-primary-light: #E8F1EC; --club-primary-dark: #165933; --club-secondary: #1FA84F; --club-accent: #FFCE43; --club-accent-dark: #B2902F; --club-accent-bg: #FFF6DD; /* Texte */ --club-text: #111111; --club-text-secondary: #aaaaaa; --club-text-tertiary: #cccccc; /* Fonds */ --club-bg: #ffffff; --club-bg-secondary: #f8f8f8; --club-border: #f0f0f0; /* Sémantique résultats */ --club-win: var(--club-primary); --club-win-bg: var(--club-primary-light); --club-draw: #999999; --club-draw-bg: #f4f4f4; --club-loss: #d32f2f; --club-loss-bg: #fdecea; /* Sémantique états */ --club-error: #d32f2f; --club-success: var(--club-primary); --club-warning: #f59e0b; /* Typographie */ --font-body: 'DM Sans', sans-serif; --font-display: 'Cinzel', serif; --text-hero: 28px; --text-h1: 22px; --text-h2: 18px; --text-h3: 15px; --text-stat: 22px; --text-body: 14px; --text-body-md: 14px; --text-caption: 12px; --text-label: 11px; --text-micro: 10px; /* Espacements */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; /* Border radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; } /* ─── RESET & BASE ──────────────────────────────────────────────────────────── */ .terrino-wrap *, .terrino-wrap *::before, .terrino-wrap *::after { box-sizing: border-box; } .terrino-wrap { font-family: var(--club-primary); /* fallback */ font-family: var(--font-body); font-size: 14px; /* fallback */ font-size: var(--text-body); color: #111111; /* fallback */ color: var(--club-text); background-color: #ffffff; /* fallback */ background-color: var(--club-bg); -webkit-font-smoothing: antialiased; } /* ─── BOUTONS ───────────────────────────────────────────────────────────────── */ .terrino-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; /* Taille min 44px pour accessibilité mobile */ min-width: 44px; padding: 10px 18px; border: none; border-radius: 10px; /* fallback */ border-radius: var(--radius-md); font-family: var(--font-body); font-size: 14px; /* fallback */ font-size: var(--text-body); font-weight: 700; cursor: pointer; text-decoration: none; transition: opacity 0.15s ease; -webkit-tap-highlight-color: transparent; } .terrino-btn:hover { opacity: 0.88; } .terrino-btn:active { opacity: 0.75; } /* Bouton primaire */ .terrino-btn--primary { background-color: var(--club-primary); /* fallback */ background-color: var(--club-primary); color: #ffffff; } /* Bouton secondaire */ .terrino-btn--secondary { background-color: var(--club-primary-light); /* fallback */ background-color: var(--club-primary-light); color: var(--club-primary); /* fallback */ color: var(--club-primary); } /* Bouton ghost */ .terrino-btn--ghost { background-color: transparent; color: #aaaaaa; /* fallback */ color: var(--club-text-secondary); border: 1px solid #f0f0f0; /* fallback */ border: 1px solid var(--club-border); } /* Bouton couleur club */ .terrino-btn--club { background-color: var(--club-primary); /* fallback */ background-color: var(--club-primary); color: #ffffff; } /* ─── BADGES STATUT ─────────────────────────────────────────────────────────── */ .terrino-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 6px; /* fallback */ border-radius: var(--radius-sm); font-size: 11px; /* fallback */ font-size: var(--text-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; } /* Résultats de match */ .terrino-badge--win { background-color: var(--club-primary-light); /* fallback */ background-color: var(--club-win-bg); color: var(--club-primary); /* fallback */ color: var(--club-win); } .terrino-badge--draw { background-color: #f4f4f4; /* fallback */ background-color: var(--club-draw-bg); color: #999999; /* fallback */ color: var(--club-draw); } .terrino-badge--loss { background-color: #fdecea; /* fallback */ background-color: var(--club-loss-bg); color: #d32f2f; /* fallback */ color: var(--club-loss); } /* Statuts club / membres */ .terrino-badge--active { background-color: var(--club-primary-light); /* fallback */ background-color: var(--club-win-bg); color: var(--club-primary); /* fallback */ color: var(--club-win); } .terrino-badge--inactive { background-color: #f4f4f4; /* fallback */ background-color: var(--club-draw-bg); color: #999999; /* fallback */ color: var(--club-draw); } /* ─── CARDS ─────────────────────────────────────────────────────────────────── */ .terrino-card { background-color: #ffffff; /* fallback */ background-color: var(--club-bg); border: 1px solid #f0f0f0; /* fallback */ border: 1px solid var(--club-border); border-radius: 14px; /* fallback */ border-radius: var(--radius-lg); padding: 16px; /* fallback */ padding: var(--space-4); } .terrino-card--secondary { background-color: #f8f8f8; /* fallback */ background-color: var(--club-bg-secondary); } /* ─── NAVIGATION MOBILE (BOTTOM NAV) ────────────────────────────────────────── */ .terrino-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 64px; background-color: #ffffff; /* fallback */ background-color: var(--club-bg); border-top: 1px solid #f0f0f0; /* fallback */ border-top: 1px solid var(--club-border); display: flex; align-items: center; justify-content: space-around; z-index: 1000; padding: 0 8px; /* fallback */ padding: 0 var(--space-2); /* Sécurité pour iPhone avec encoche */ padding-bottom: env(safe-area-inset-bottom, 0); } .terrino-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 44px; min-height: 44px; padding: 6px 12px; border-radius: 10px; /* fallback */ border-radius: var(--radius-md); text-decoration: none; color: #aaaaaa; /* fallback */ color: var(--club-text-secondary); font-size: 10px; /* fallback */ font-size: var(--text-micro); font-weight: 500; transition: background-color 0.15s ease, color 0.15s ease; } .terrino-nav-item.active, .terrino-nav-item:hover { background-color: var(--club-primary-light); /* fallback */ background-color: var(--club-primary-light); color: var(--club-primary); /* fallback */ color: var(--club-primary); } .terrino-nav-item svg { width: 18px; height: 18px; stroke-width: 1.8; stroke: currentColor; } /* ─── TYPOGRAPHIE ───────────────────────────────────────────────────────────── */ .terrino-title-hero { font-family: 'DM Serif Display', serif; /* fallback */ font-family: var(--font-display); font-size: 28px; /* fallback */ font-size: var(--text-hero); font-weight: 400; color: #111111; /* fallback */ color: var(--club-text); margin: 0; } .terrino-h1 { font-size: 22px; /* fallback */ font-size: var(--text-h1); font-weight: 700; margin: 0 0 16px; } .terrino-h2 { font-size: 18px; /* fallback */ font-size: var(--text-h2); font-weight: 700; margin: 0 0 12px; } .terrino-h3 { font-size: 15px; /* fallback */ font-size: var(--text-h3); font-weight: 700; margin: 0 0 8px; } .terrino-caption { font-size: 12px; /* fallback */ font-size: var(--text-caption); color: #aaaaaa; /* fallback */ color: var(--club-text-secondary); } .terrino-label { font-size: 11px; /* fallback */ font-size: var(--text-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #aaaaaa; /* fallback */ color: var(--club-text-secondary); } /* ─── FORMULAIRES ───────────────────────────────────────────────────────────── */ .terrino-input { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid #f0f0f0; /* fallback */ border: 1px solid var(--club-border); border-radius: 10px; /* fallback */ border-radius: var(--radius-md); font-family: var(--font-body); font-size: 14px; /* fallback */ font-size: var(--text-body); color: #111111; /* fallback */ color: var(--club-text); background-color: #ffffff; /* fallback */ background-color: var(--club-bg); outline: none; transition: border-color 0.15s ease; -webkit-appearance: none; appearance: none; } .terrino-input:focus { border-color: var(--club-primary); /* fallback */ border-color: var(--club-primary); } .terrino-input::placeholder { color: #cccccc; /* fallback */ color: var(--club-text-tertiary); } /* ─── AVATARS ───────────────────────────────────────────────────────────────── */ .terrino-avatar { width: 36px; height: 36px; border-radius: 9999px; /* fallback */ border-radius: var(--radius-full); background-color: var(--club-primary-light); /* fallback */ background-color: var(--club-primary-light); color: var(--club-primary); /* fallback */ color: var(--club-primary); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; overflow: hidden; } .terrino-avatar img { width: 100%; height: 100%; object-fit: cover; } /* ─── MESSAGES D'ÉTAT ───────────────────────────────────────────────────────── */ .terrino-notice { padding: 12px 16px; border-radius: 10px; /* fallback */ border-radius: var(--radius-md); font-size: 14px; /* fallback */ font-size: var(--text-body); margin-bottom: 16px; } .terrino-notice--success { background-color: var(--club-primary-light); /* fallback */ background-color: var(--club-win-bg); color: var(--club-primary); /* fallback */ color: var(--club-win); } .terrino-notice--error { background-color: #fdecea; /* fallback */ background-color: var(--club-loss-bg); color: #d32f2f; /* fallback */ color: var(--club-loss); } .terrino-notice--warning { background-color: #fff8e6; color: #b45309; } /* ─── INDICATEUR DE FORME (5 derniers matchs) ───────────────────────────────── */ .terrino-forme-row { display: flex; gap: 4px; align-items: center; } .terrino-forme-dot { width: 24px; height: 24px; border-radius: 6px; /* fallback */ border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 10px; /* fallback */ font-size: var(--text-micro); font-weight: 700; } .terrino-forme-dot--win { background-color: var(--club-win-bg); color: var(--club-win); } .terrino-forme-dot--draw { background-color: var(--club-draw-bg); color: var(--club-draw); } .terrino-forme-dot--loss { background-color: var(--club-loss-bg); color: var(--club-loss); } /* ─── RESPONSIVE — Mobile first ─────────────────────────────────────────────── */ /* Mobile (< 768px) : styles par défaut */ .terrino-page-container { padding: 0 20px; padding-bottom: 80px; /* Espace pour la bottom nav */ max-width: 100%; } /* Tablette (768px – 1024px) */ @media (min-width: 768px) { .terrino-page-container { padding: 0 32px; max-width: 768px; margin: 0 auto; } .terrino-bottom-nav { display: none; /* Sur tablette, on passe à une nav classique */ } } /* Desktop (> 1024px) */ @media (min-width: 1024px) { .terrino-page-container { max-width: 1200px; padding: 0 48px; } } /* Très petits écrans (320px) : empiler verticalement */ @media (max-width: 360px) { .terrino-page-container { padding: 0 16px; } .terrino-btn { width: 100%; justify-content: center; } } /* Accessibilité : respecter les préférences de réduction de mouvement */ @media (prefers-reduced-motion: reduce) { .terrino-btn, .terrino-nav-item, .terrino-input { transition: none; } }