/* ===== Identite brand ScanCash (teal/emerald/cyan) et ses declinaisons ===== Tout ce qui porte specifiquement la couleur brand vit ici, separe du CSS commun (utilitaires generiques, themes de categorie) qui reste dans app.css. Un seul point de bascule pour toute l'appli : l'attribut data-theme-style sur (voir wwwroot/index.html). "metal" ou "aurora" - change juste la valeur pour repasser de l'un a l'autre, aucun autre fichier a toucher. Tout ce qui utilise la classe .theme-brand ou .btn-primary (boutons, navbar desktop, cartes/badges de la home...) suit automatiquement. */ :root, html[data-theme-style="metal"] { --brand-bg: linear-gradient(160deg, #134e4a 0%, #10b981 45%, #164e63 100%); --brand-border: 1px solid rgb(255 255 255 / 18%); --brand-shadow: inset 0 1px 0 rgb(255 255 255 / 25%), inset 0 -30px 40px -25px rgb(0 0 0 / 60%), 0 25px 45px -20px rgb(0 0 0 / 60%); --brand-sheen: linear-gradient(100deg, rgb(255 255 255 / 18%) 0%, rgb(255 255 255 / 0%) 20%, rgb(255 255 255 / 0%) 80%, rgb(255 255 255 / 8%) 100%); --brand-backdrop-filter: none; } html[data-theme-style="aurora"] { --brand-bg: radial-gradient(120% 100% at 0% 0%, rgb(52 211 153 / 75%), transparent 55%), radial-gradient(120% 100% at 100% 0%, rgb(34 211 238 / 55%), transparent 55%), radial-gradient(120% 120% at 50% 100%, rgb(8 145 178 / 55%), transparent 60%), linear-gradient(160deg, rgb(6 95 70 / 50%), rgb(22 78 99 / 55%)); --brand-border: 1px solid rgb(255 255 255 / 30%); --brand-shadow: inset 0 1px 0 rgb(255 255 255 / 35%), 0 20px 40px -18px rgb(6 95 70 / 55%); --brand-sheen: none; --brand-backdrop-filter: blur(18px) saturate(180%); } /* .theme-brand : a poser sur n'importe quelle surface qui doit porter l'accent brand (badge, carte, barre de nav...). Recupere position/isolation/::before de base via la regle partagee [class*="theme-"] dans app.css - ne definit ici que les valeurs qui changent selon le theme actif. */ .theme-brand { background: var(--brand-bg); border: var(--brand-border); box-shadow: var(--brand-shadow); backdrop-filter: var(--brand-backdrop-filter); -webkit-backdrop-filter: var(--brand-backdrop-filter); } .theme-brand::before { background: var(--brand-sheen); } /* Meme materiau que .theme-brand, applique a un bouton. Ne fixe volontairement pas de largeur : elle appartient a l'emplacement, pas au bouton - c'est ce qui obligeait la home a la neutraliser avec un !w-auto. Les appelants ajoutent w-full quand ils la veulent pleine. */ .btn-primary { position: relative; isolation: isolate; overflow: hidden; padding: .9rem; border-radius: .9rem; background: var(--brand-bg); border: var(--brand-border); box-shadow: var(--brand-shadow); backdrop-filter: var(--brand-backdrop-filter); -webkit-backdrop-filter: var(--brand-backdrop-filter); color: white; font-weight: 600; transition: .2s; } .btn-primary::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--brand-sheen); } .btn-primary:hover { filter: brightness(1.08); } .glass-card { width: 100%; max-width: 480px; padding: 2rem; border: 1px solid rgb(255 255 255 / 40%); border-radius: 1.5rem; background: linear-gradient( 155deg, rgb(255 255 255 / 88%), rgb(204 251 241 / 78%) ); backdrop-filter: blur(28px); box-shadow: 0 24px 60px -16px rgb(5 150 105 / 35%), 0 10px 28px -12px rgb(8 145 178 / 25%); }