/* ═══════════════════════════════════════════════════════════ FCUTZ — Liquid Glass Button ═══════════════════════════════════════════════════════════ */ /* ── Base ──────────────────────────────────────────────────── */ .glass-btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border: none; border-radius: 14px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .3px; color: #F5F0E6; background: transparent; transition: transform 120ms cubic-bezier(.4,0,.2,1); -webkit-tap-highlight-color: transparent; } /* ── Lens ──────────────────────────────────────────────────── */ /* * Gradient très subtil (5%) → le verre capte la lumière ambiante overhead. * Sans ça, la surface est purement transparente = invisible sur fond sombre. * 5% c'est la limite pour ne pas paraître peint. */ .glass-btn-lens { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; background: linear-gradient( 175deg, rgba(255,255,255,.055) 0%, transparent 55% ); backdrop-filter: blur(8px) url(#fcutz-liquid-glass) saturate(150%); -webkit-backdrop-filter: blur(8px) saturate(150%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 1.8px 3px 0 -2px rgba(255,255,255,.90), inset -2px -2px 0 -2px rgba(255,255,255,.80), inset -3px -8px 1px -6px rgba(255,255,255,.60), inset -.3px -1px 4px 0 rgba(0,0,0,.12), inset -1.5px 2.5px 0 -2px rgba(0,0,0,.20), inset 0 3px 4px -2px rgba(0,0,0,.20), inset 2px -6.5px 1px -4px rgba(0,0,0,.10), 0 1px 5px 0 rgba(0,0,0,.10), 0 6px 16px 0 rgba(0,0,0,.08); transition: box-shadow 250ms cubic-bezier(.4,0,.2,1); } /* ── Spéculaire elliptique ─────────────────────────────────── */ /* * Gradient radial centré juste AU-DESSUS du bord haut. * Simule la réflexion d'une source lumineuse overhead sur surface convexe. * Plus réaliste qu'un linear-gradient pleine largeur. */ .glass-btn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( ellipse 72% 55% at 50% -2%, rgba(255,255,255,.42) 0%, rgba(255,255,255,.12) 45%, transparent 72% ); pointer-events: none; z-index: 0; } /* ── Rim bas (reflet secondaire) ───────────────────────────── */ /* * Très léger halo en bas — le verre diffracte aussi la lumière * venant du bas (surface de travail). Subtil mais ça donne du volume. */ .glass-btn::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( ellipse 55% 35% at 50% 108%, rgba(255,255,255,.05) 0%, transparent 100% ); pointer-events: none; z-index: 0; } /* ── Contenu ───────────────────────────────────────────────── */ .glass-btn > *:not(.glass-btn-lens) { position: relative; z-index: 10; text-shadow: 0 1px 2px rgba(0,0,0,.40); } /* ── Variante or ───────────────────────────────────────────── */ .glass-btn.glass-btn--gold .glass-btn-lens { background: linear-gradient( 175deg, rgba(200,168,90,.07) 0%, transparent 55% ); box-shadow: inset 0 0 0 1px rgba(200,168,90,.32), inset 1.8px 3px 0 -2px rgba(255,255,255,.90), inset -2px -2px 0 -2px rgba(255,255,255,.80), inset -3px -8px 1px -6px rgba(255,255,255,.60), inset -.3px -1px 4px 0 rgba(0,0,0,.12), inset -1.5px 2.5px 0 -2px rgba(0,0,0,.20), inset 0 3px 4px -2px rgba(0,0,0,.20), inset 2px -6.5px 1px -4px rgba(0,0,0,.10), 0 1px 5px 0 rgba(0,0,0,.10), 0 6px 16px 0 rgba(0,0,0,.08), 0 0 20px 0 rgba(200,168,90,.12); } /* ── Variante violet ───────────────────────────────────────── */ .glass-btn.glass-btn--violet .glass-btn-lens { background: linear-gradient( 175deg, rgba(167,139,250,.07) 0%, transparent 55% ); box-shadow: inset 0 0 0 1px rgba(167,139,250,.32), inset 1.8px 3px 0 -2px rgba(255,255,255,.90), inset -2px -2px 0 -2px rgba(255,255,255,.80), inset -3px -8px 1px -6px rgba(255,255,255,.60), inset -.3px -1px 4px 0 rgba(0,0,0,.12), inset -1.5px 2.5px 0 -2px rgba(0,0,0,.20), inset 0 3px 4px -2px rgba(0,0,0,.20), inset 2px -6.5px 1px -4px rgba(0,0,0,.10), 0 1px 5px 0 rgba(0,0,0,.10), 0 6px 16px 0 rgba(0,0,0,.08), 0 0 20px 0 rgba(109,40,217,.14); } /* ── Hover ─────────────────────────────────────────────────── */ @media (hover: hover) { .glass-btn:not(:disabled):hover { transform: scale(1.03) translateY(-1px); } .glass-btn.glass-btn--gold:not(:disabled):hover .glass-btn-lens { background: linear-gradient(175deg, rgba(200,168,90,.10) 0%, transparent 55%); box-shadow: inset 0 0 0 1px rgba(200,168,90,.42), inset 1.8px 3px 0 -2px rgba(255,255,255,.95), inset -2px -2px 0 -2px rgba(255,255,255,.85), inset -3px -8px 1px -6px rgba(255,255,255,.65), inset -.3px -1px 4px 0 rgba(0,0,0,.12), inset -1.5px 2.5px 0 -2px rgba(0,0,0,.20), inset 0 3px 4px -2px rgba(0,0,0,.20), inset 2px -6.5px 1px -4px rgba(0,0,0,.10), 0 1px 5px 0 rgba(0,0,0,.14), 0 8px 24px 0 rgba(0,0,0,.12), 0 0 26px 0 rgba(200,168,90,.18); } .glass-btn.glass-btn--violet:not(:disabled):hover .glass-btn-lens { background: linear-gradient(175deg, rgba(167,139,250,.10) 0%, transparent 55%); box-shadow: inset 0 0 0 1px rgba(167,139,250,.42), inset 1.8px 3px 0 -2px rgba(255,255,255,.95), inset -2px -2px 0 -2px rgba(255,255,255,.85), inset -3px -8px 1px -6px rgba(255,255,255,.65), inset -.3px -1px 4px 0 rgba(0,0,0,.12), inset -1.5px 2.5px 0 -2px rgba(0,0,0,.20), inset 0 3px 4px -2px rgba(0,0,0,.20), inset 2px -6.5px 1px -4px rgba(0,0,0,.10), 0 1px 5px 0 rgba(0,0,0,.14), 0 8px 24px 0 rgba(0,0,0,.12), 0 0 26px 0 rgba(109,40,217,.20); } } /* ── Active ────────────────────────────────────────────────── */ .glass-btn:not(:disabled):active { transform: scale(0.96); transition-duration: 60ms; } .glass-btn:focus-visible { outline: 2px solid rgba(255,255,255,.4); outline-offset: 3px; } .glass-btn:disabled { opacity: .45; cursor: not-allowed; } /* ── Tailles ───────────────────────────────────────────────── */ .glass-btn.glass-btn--sm { padding: 7px 14px; font-size: 12px; border-radius: 10px; } .glass-btn.glass-btn--lg { padding: 13px 28px; font-size: 15px; border-radius: 18px; }