/** * Theme GayBiTrans — LE thème de l'app, bâti sur les 3 couleurs du logo. * * Chargé via , * injecté automatiquement par app/lib/view.php avec data-theme="gaybitrans" * sur . Le sélecteur :root[data-theme="gaybitrans"] (spécificité 0,2,0) * surcharge les :root{...} par défaut (0,1,0) déclarés inline dans les vues * partagées → gaybitrans devient ambre/ivoire/violet PARTOUT, sans toucher au * stack commun ni aux autres tenants. * * Règle de design : l'app est sombre, le trio ambre/ivoire/violet EST la marque. * Ambre = ce sur quoi on tape (action). * Violet = identité (tags & filtres d'identité, marqueurs secondaires). * Ivoire = lecture (texte principal). * Vert = fonctionnel UNIQUEMENT (statut en ligne), jamais décoratif. * * Polices hébergées EN LOCAL (woff2 dans ./fonts) — pas de CDN Google Fonts (RGPD). */ /* ============================================================ POLICES LOCALES (RGPD — aucun appel à fonts.gstatic.com) ============================================================ */ /* Space Grotesk 700 — wordmark + titres courts */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/space-grotesk-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/space-grotesk-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* Manrope variable 400..800 — UI / texte */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/manrope-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/manrope-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ============================================================ SYSTÈME DE COULEURS (variables CSS) On mappe le trio + substrat sur TOUTES les variables que l'app consomme (anciens noms --card/--night/--soft… ET nouveaux --surface/--line/--muted), pour une couverture complète. ============================================================ */ :root[data-theme="gaybitrans"] { /* --- Les 3 rôles du logo (l'identité) --- */ --gay: #ffce1f; /* ambre — action */ --bi: #f4f3ef; /* ivoire — lecture */ --trans: #b78bff; /* violet — identité */ --identity: #b78bff; /* alias sémantique de --trans */ /* --- Action (ambre) : ce sur quoi on tape --- */ --accent: #ffce1f; --primary: #ffce1f; --accent2: #f5b301; /* hover/gradient : ambre profond (reste famille action) */ --accent-strong: #ffd95c; /* highlight ambre clair */ --grad: linear-gradient(135deg,#ffd95c 0%,#ffb800 100%); --on-accent: #08080a; /* texte SUR aplats ambre (contraste) */ --yellow: #ffce1f; /* --- Lecture (ivoire) --- */ --text: #f4f3ef; --white: #f4f3ef; --soft: rgba(244,243,239,0.66); --text-dim: #8d8a83; --muted: #8d8a83; /* --- Substrat sombre --- */ --bg: #08080a; --night: #050506; --surface: #141417; --card: #141417; --surface-2: #1c1c20; --card2: #1c1c20; --bg2: #1c1c20; --line: #2a2a30; --border: #2a2a30; --border2: rgba(255,206,31,0.22); /* bordure teintée action */ /* --- Fonctionnel (jamais décoratif) --- */ --online: #37d66e; /* statut EN LIGNE uniquement */ --green: #37d66e; --red: #ef5a5a; } /* ============================================================ TYPOGRAPHIE ============================================================ */ :root[data-theme="gaybitrans"] body { font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } :root[data-theme="gaybitrans"] h1, :root[data-theme="gaybitrans"] h2, :root[data-theme="gaybitrans"] h3, :root[data-theme="gaybitrans"] .h-display, :root[data-theme="gaybitrans"] .wordmark { font-family: 'Space Grotesk', 'Manrope', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.01em; } /* ============================================================ COMPOSANT LOGO (cf. sites/gaybitrans/views/partials/logo.php) "gaybitrans" minuscules, tracking serré, segmenté gay/bi/trans. ============================================================ */ .gbt-logo { display: inline-flex; align-items: baseline; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: var(--gbt-logo-size, 1.5rem); line-height: 1; letter-spacing: -0.045em; /* tracking serré */ text-transform: lowercase; text-decoration: none; white-space: nowrap; } .gbt-logo__gay { color: var(--gay); } .gbt-logo__bi { color: var(--bi); } .gbt-logo__trans { color: var(--trans); } .gbt-logo:hover { opacity: .92; } /* ============================================================ CLASSES UTILITAIRES (équivalent "config Tailwind" — voir note : ce repo livre du CSS Tailwind pré-compilé sans tailwind.config accessible, donc on expose les rôles en classes scoping gaybitrans) ============================================================ */ .text-gay { color: var(--gay) !important; } .text-bi { color: var(--bi) !important; } .text-trans { color: var(--trans) !important; } .bg-gay { background: var(--gay) !important; color: var(--on-accent) !important; } .bg-trans { background: var(--trans) !important; color: var(--on-accent) !important; } .border-gay { border-color: var(--gay) !important; } .border-trans { border-color: var(--trans) !important; } /* Badge de non-lus / onglet actif / état actif : AMBRE */ .badge-unread { background: var(--gay); color: var(--on-accent); font-weight: 700; border-radius: 999px; } /* Tag / filtre d'identité : VIOLET (marqueur secondaire) */ .tag-identity { background: rgba(183,139,255,0.14); color: var(--trans); border: 1px solid rgba(183,139,255,0.45); border-radius: 999px; } /* Pastille de statut EN LIGNE (fonctionnel) */ .status-online { background: var(--online); border-radius: 999px; box-shadow: 0 0 0 2px var(--surface); } /* ============================================================ QUALITÉ / ACCESSIBILITÉ (plancher non négociable) ============================================================ */ /* Focus clavier visible et contrasté sur fond sombre */ :root[data-theme="gaybitrans"] :focus-visible { outline: 2px solid var(--gay); outline-offset: 2px; border-radius: 4px; } /* Sélection de texte lisible */ :root[data-theme="gaybitrans"] ::selection { background: rgba(255,206,31,0.30); color: var(--bi); } /* Respect de prefers-reduced-motion (ce fichier ne charge que sur gaybitrans) */ @media (prefers-reduced-motion: reduce) { :root[data-theme="gaybitrans"] *, :root[data-theme="gaybitrans"] *::before, :root[data-theme="gaybitrans"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }