/** * Terrino — Feuille de styles principale du thème enfant * Charte Graphique v1.0 * * Philosophie : Mobile d'abord. * Tous les styles sont écrits pour 360px et adaptés vers le haut * via les media queries min-width (approche mobile-first). * * Structure : * 1. Import des variables CSS (reprises depuis le plugin) * 2. Reset et base typographique * 3. Layout général et structure de page * 4. Header Terrino * 5. Navigation mobile (bottom nav) * 6. Espace membre (pages connectées) * 7. Pages publiques du club * 8. Footer * 9. Utilitaires * 10. Media queries (tablette, desktop) * * @package Terrino * @since 1.0.0 */ /* ═══════════════════════════════════════════════════════════════════════════ 1. VARIABLES CSS — Charte Graphique Terrino v1.0 ═══════════════════════════════════════════════════════════════════════════ */ :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; } /* ═══════════════════════════════════════════════════════════════════════════ 2. RESET & BASE TYPOGRAPHIQUE ═══════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body.terrino-site { font-family: var(--club-primary); /* fallback navigateurs très anciens */ font-family: var(--font-body); font-size: 14px; font-size: var(--text-body); color: #111111; color: var(--club-text); background-color: #f8f8f8; background-color: var(--club-bg-secondary); margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Supprimer les marges WordPress par défaut sur les titres */ body.terrino-site h1, body.terrino-site h2, body.terrino-site h3, body.terrino-site h4 { font-family: var(--font-body); font-weight: 700; margin: 0; padding: 0; color: var(--club-text); } body.terrino-site p { margin: 0 0 12px; line-height: 1.6; } body.terrino-site a:not([class]) { color: var(--club-primary); text-decoration: none; } body.terrino-site a:not([class]):hover { text-decoration: underline; } body.terrino-site img { max-width: 100%; height: auto; display: block; } /* ═══════════════════════════════════════════════════════════════════════════ 3. LAYOUT GÉNÉRAL ═══════════════════════════════════════════════════════════════════════════ */ .terrino-site .site-content { padding-bottom: 72px; /* Espace pour la bottom nav sur mobile */ } /* Conteneur principal centré */ .terrino-container { width: 100%; max-width: 100%; padding: 0 20px; /* Padding horizontal minimum 20px sur mobile */ margin: 0 auto; } /* Section de page */ .terrino-section { padding: 20px 0; } /* ═══════════════════════════════════════════════════════════════════════════ 4. HEADER TERRINO Toujours en charte Terrino — JAMAIS en couleurs de club ═══════════════════════════════════════════════════════════════════════════ */ .terrino-header { position: sticky; top: 0; z-index: 100; background-color: var(--club-primary); height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.15); } .terrino-header__logo { display: flex; align-items: center; gap: 8px; text-decoration: none; } .terrino-header__logo-text { font-family: var(--font-display); font-size: 20px; font-weight: 400; color: #ffffff; letter-spacing: -0.3px; } .terrino-header__club-name { font-size: var(--text-caption); color: rgba(255,255,255,0.75); margin-left: 4px; } /* Bouton hamburger */ .terrino-hamburger { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 44px; height: 44px; background: transparent; border: none; cursor: pointer; padding: 8px; gap: 5px; border-radius: var(--radius-sm); -webkit-tap-highlight-color: transparent; } .terrino-hamburger__bar { width: 22px; height: 2px; background-color: #ffffff; border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } .terrino-hamburger.is-active .terrino-hamburger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .terrino-hamburger.is-active .terrino-hamburger__bar:nth-child(2) { opacity: 0; } .terrino-hamburger.is-active .terrino-hamburger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ═══════════════════════════════════════════════════════════════════════════ 5. NAVIGATION MOBILE — BOTTOM NAV Toujours en charte Terrino — 4 items maximum ═══════════════════════════════════════════════════════════════════════════ */ .terrino-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 64px; background-color: var(--club-bg); border-top: 1px solid var(--club-border); display: flex; align-items: center; justify-content: space-around; z-index: 200; padding: 0 8px; /* Support de l'encoche iOS */ padding-bottom: env(safe-area-inset-bottom, 0); } .terrino-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 1; min-height: 44px; padding: 6px 4px; border-radius: var(--radius-md); text-decoration: none; color: var(--club-text-secondary); font-size: var(--text-micro); font-weight: 500; transition: background-color 0.15s ease, color 0.15s ease; -webkit-tap-highlight-color: transparent; } .terrino-nav-item svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .terrino-nav-item.is-active, .terrino-nav-item:hover { background-color: var(--club-primary-light); color: var(--club-primary); text-decoration: none; } /* ═══════════════════════════════════════════════════════════════════════════ 6. ESPACE MEMBRE (pages connectées) ═══════════════════════════════════════════════════════════════════════════ */ /* En-tête de section club (couleur club) */ .terrino-club-hero { background-color: var(--club-primary); padding: 20px; color: #ffffff; } .terrino-club-hero__name { font-family: var(--font-display); font-size: var(--text-hero); font-weight: 400; color: #ffffff; } .terrino-club-hero__meta { font-size: var(--text-caption); color: rgba(255,255,255,0.75); margin-top: 4px; } /* Cards de liste (matchs, joueurs, etc.) */ .terrino-list-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background-color: var(--club-bg); border-bottom: 1px solid var(--club-border); } .terrino-list-item:last-child { border-bottom: none; } .terrino-list-item:active { background-color: var(--club-bg-secondary); } /* Résultat de match inline */ .terrino-score { font-family: var(--font-display); font-size: var(--text-stat); font-weight: 400; color: var(--club-primary); text-align: center; min-width: 60px; } /* ═══════════════════════════════════════════════════════════════════════════ 7. PAGES PUBLIQUES DU CLUB (sans connexion) ═══════════════════════════════════════════════════════════════════════════ */ /* Bannière publique du club */ .terrino-public-banner { position: relative; background-color: var(--club-primary); overflow: hidden; min-height: 140px; display: flex; align-items: flex-end; padding: 20px; } /* Cercles décoratifs en filigrane (pas de gradients complexes) */ .terrino-public-banner::before, .terrino-public-banner::after { content: ''; position: absolute; border-radius: 50%; background-color: rgba(255,255,255,0.06); pointer-events: none; } .terrino-public-banner::before { width: 200px; height: 200px; top: -80px; right: -60px; } .terrino-public-banner::after { width: 140px; height: 140px; bottom: -60px; left: -40px; } .terrino-public-banner__content { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; } .terrino-public-banner__logo { width: 60px; height: 60px; border-radius: var(--radius-full); background-color: rgba(255,255,255,0.15); object-fit: cover; flex-shrink: 0; } .terrino-public-banner__name { font-family: var(--font-display); font-size: var(--text-h1); color: #ffffff; font-weight: 400; } .terrino-public-banner__subtitle { font-size: var(--text-caption); color: rgba(255,255,255,0.75); margin-top: 2px; } /* ═══════════════════════════════════════════════════════════════════════════ 8. FOOTER Toujours en charte Terrino ═══════════════════════════════════════════════════════════════════════════ */ .terrino-footer { background-color: var(--club-primary-dark); color: rgba(255,255,255,0.8); padding: 24px 20px; font-size: var(--text-caption); text-align: center; } .terrino-footer a { color: rgba(255,255,255,0.9); text-decoration: underline; } .terrino-footer__logo { font-family: var(--font-display); font-size: 18px; color: #ffffff; margin-bottom: 8px; } /* ═══════════════════════════════════════════════════════════════════════════ 9. UTILITAIRES ═══════════════════════════════════════════════════════════════════════════ */ /* Écran de chargement */ .terrino-loading { display: flex; align-items: center; justify-content: center; padding: 48px 20px; color: var(--club-text-secondary); font-size: var(--text-caption); gap: 8px; } /* Fallbacks couleur explicites avant variable CSS */ .terrino-text-primary { color: #111111; color: var(--club-text); } .terrino-text-secondary { color: #aaaaaa; color: var(--club-text-secondary); } .terrino-text-success { color: var(--club-primary); color: var(--club-success); } .terrino-text-error { color: #d32f2f; color: var(--club-error); } .terrino-text-warning { color: #f59e0b; color: var(--club-warning); } /* Marges utilitaires */ .terrino-mt-1 { margin-top: 4px; } .terrino-mt-2 { margin-top: 8px; } .terrino-mt-4 { margin-top: 16px; } .terrino-mt-6 { margin-top: 24px; } .terrino-mb-4 { margin-bottom: 16px; } .terrino-mb-6 { margin-bottom: 24px; } /* ═══════════════════════════════════════════════════════════════════════════ 10. MEDIA QUERIES — Tablette et Desktop ═══════════════════════════════════════════════════════════════════════════ */ /* ── Tablette (768px – 1024px) ────────────────────────────────────────────── */ @media (min-width: 768px) { .terrino-site .site-content { padding-bottom: 0; /* Plus de bottom nav sur tablette */ } .terrino-container { max-width: 768px; padding: 0 32px; } /* La bottom nav disparaît sur tablette — nav classique à la place */ .terrino-bottom-nav { display: none; } /* Header : afficher le menu complet */ .terrino-hamburger { display: none; } .terrino-header { height: 64px; padding: 0 32px; } .terrino-club-hero { padding: 32px; } .terrino-public-banner { min-height: 200px; padding: 32px; } .terrino-public-banner__logo { width: 80px; height: 80px; } .terrino-public-banner__name { font-size: var(--text-hero); } } /* ── Desktop (> 1024px) ───────────────────────────────────────────────────── */ @media (min-width: 1024px) { .terrino-container { max-width: 1100px; padding: 0 48px; } .terrino-header { padding: 0 48px; } .terrino-list-item { padding: 14px 20px; } } /* ── Très petits écrans (max 360px) ──────────────────────────────────────── */ @media (max-width: 360px) { .terrino-container { padding: 0 16px; } .terrino-header { padding: 0 16px; } /* Empiler les éléments verticalement */ .terrino-public-banner__content { flex-direction: column; align-items: flex-start; gap: 10px; } } /* ── Accessibilité : réduire les animations ──────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .terrino-nav-item, .terrino-hamburger__bar, .terrino-btn { transition: none; } }