/* ══════════════════════════════════════════════════════════════ SOL STUDIO — Composants partagés shop/css/components.css Dépend de tokens.css (charger tokens.css en premier). Classes réutilisées sur plusieurs pages du shop. ══════════════════════════════════════════════════════════════ */ /* ── Cadre avec bordure dégradée ──────────────────────────── Utilisé sur : cart, login, checkout, account, admin/* Ancienne valeur grise (rgba(80,80,80,.4)) remplacée par la couleur arcane pour cohérence avec le reste du système. */ .framed { border: 1px solid transparent; background: linear-gradient(var(--bg2), var(--bg2)) padding-box, linear-gradient( 135deg, var(--acc-20) 0%, var(--acc2-50) 50%, var(--acc-20) 100% ) border-box; } /* ── Input de formulaire ──────────────────────────────────── Classe .input-field conservée pour compatibilité (login, checkout, admin). Alias .sol-input pour les nouvelles pages. */ .input-field, .sol-input { background: var(--rune-30); border: 1px solid var(--rune-80); color: var(--silver); border-radius: .5rem; padding: .625rem 1rem; width: 100%; font-size: .875rem; outline: none; transition: border-color .2s; } .input-field:focus, .sol-input:focus { border-color: var(--acc2-50); box-shadow: 0 0 0 1px var(--acc2-30); } .input-field::placeholder, .sol-input::placeholder { color: rgba(212,212,221,.30); } /* ── Comic-Action : classe utilitaire ─────────────────────── Profil SOL Rouge. Utilisable sur n'importe quel bouton en ajoutant la classe .comic-action. */ .comic-action { border: 2px solid transparent; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,0) 35%), linear-gradient(180deg, var(--comic-button-surface-top) 0%, var(--comic-button-bg) 100%) padding-box, linear-gradient(90deg, var(--comic-button-border-start) 0%, var(--comic-button-border-mid) 50%, var(--comic-button-border-end) 100%) border-box; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 0 0 1px var(--comic-button-glow); color: var(--comic-button-text); transition: background .2s ease, box-shadow .2s ease; } .comic-action:hover { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,0) 35%), linear-gradient(180deg, var(--comic-button-hover-surface-top) 0%, var(--comic-button-hover-surface-bottom) 100%) padding-box, linear-gradient(90deg, var(--comic-button-hover-border-start) 0%, var(--comic-button-hover-border-mid) 50%, var(--comic-button-hover-border-end) 100%) border-box; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 0 14px var(--comic-button-hover-glow); } /* ── Bouton principal ─────────────────────────────────────── Classe .btn-primary conservée pour compatibilité (login, checkout). Alias .sol-btn pour les nouvelles pages. Style comic-action : gradient border + glow rouge. Pas oblique → border-radius + box-shadow (pas clippé). */ .btn-primary, .sol-btn { border: 2px solid transparent; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,0) 35%), linear-gradient(180deg, var(--comic-button-surface-top) 0%, var(--comic-button-bg) 100%) padding-box, linear-gradient(90deg, var(--comic-button-border-start) 0%, var(--comic-button-border-mid) 50%, var(--comic-button-border-end) 100%) border-box; color: var(--comic-button-text); font-size: .875rem; font-weight: 600; letter-spacing: .10em; text-transform: uppercase; padding: .75rem 2rem; border-radius: .5rem; width: 100%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 0 0 1px var(--comic-button-glow); transition: background .2s ease, box-shadow .2s ease; cursor: pointer; } .btn-primary:hover, .sol-btn:hover { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,0) 35%), linear-gradient(180deg, var(--comic-button-hover-surface-top) 0%, var(--comic-button-hover-surface-bottom) 100%) padding-box, linear-gradient(90deg, var(--comic-button-hover-border-start) 0%, var(--comic-button-hover-border-mid) 50%, var(--comic-button-hover-border-end) 100%) border-box; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 0 14px var(--comic-button-hover-glow); } /* ── Toast notification ───────────────────────────────────── Présent dans index.html et product.html. Si une page redéfinit .sol-toast localement, cette règle sert de base et la redéfinition locale peut surcharger. */ .sol-toast { position: fixed; bottom: 1.75rem; left: 50%; transform: translateX(-50%) translateY(60px); background: var(--bg2); border: 1px solid var(--bdr2); color: var(--acc2); font-size: .66rem; letter-spacing: .08em; padding: .52rem 1.5rem; clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%); z-index: 500; opacity: 0; transition: all .3s; pointer-events: none; white-space: nowrap; box-shadow: 0 4px 24px var(--acc-20); } .sol-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ── Titre dégradé hero ───────────────────────────────────── Appliqué aux

hero dans cart, login, checkout, account. Remplace les inline style="background:linear-gradient(...)" */ .sol-title-grad { background: linear-gradient( 0deg, var(--acc-dk) 0%, var(--acc2) 50%, var(--acc-dk) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Onglet actif (pages Tailwind) ────────────────────────── Utilisé dans login.html (.tab-btn / .tab-btn.active). */ .tab-btn { padding: .5rem 1.5rem; font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; border-bottom: 2px solid transparent; color: rgba(212,212,221,.50); transition: all .2s; } .tab-btn.active { border-bottom-color: var(--acc2); color: var(--acc2); } /* ── Nav admin (sidebar) ──────────────────────────────────── Utilisé dans admin/*.html avec la classe .nav-link. Les pages shop (index, product) redéfinissent .nav-link dans leur