/* ============================================================================ Flybits CTA engine — shared button mechanics ---------------------------------------------------------------------------- Generic, colour-agnostic behaviour for every `.fb-btn` on the site: the expanding dot flood, the label shift, the hover halo, focus / active / disabled states and the site motion curve. Nothing here sets a colour, size, radius, padding or type style — those stay on the instance (inline) or in the design system's variant rules. Markup contract (matches the DS component): A button that carries a `.fb-btn__dot` automatically becomes a flood button (clipping, mask, label shift, halo). One without it (ghost / tertiary link buttons) keeps its own quieter behaviour untouched. Tunable per button or per variant: --fb-btn-dur motion duration (default .6s) --fb-btn-ease motion curve (default site curve) --fb-btn-flood-scale dot scale at full flood (default 100) --label-shift label travel once the dot floods (default 0) --fb-btn-glow-1/-2 halo colours (near / far layers) (default none) --fb-btn-glow-near near halo blur (default 15px) --fb-btn-glow-far far halo blur (default 30px) --fb-btn-lift hover lift (default 0) --fb-btn-disabled-opacity (default .45) Adding a variant = one rule that sets colours + these tokens. No mechanics. ========================================================================== */ .fb-btn{ --fb-btn-dur:.6s; --fb-btn-ease:cubic-bezier(0.22,1,0.36,1); --fb-btn-flood-scale:100; --fb-btn-glow-near:15px; --fb-btn-glow-far:30px; --fb-btn-lift:0px; position:relative; cursor:pointer; /* one timing for every animated property so there is no seam */ transition: color var(--fb-btn-dur) var(--fb-btn-ease), background-color var(--fb-btn-dur) var(--fb-btn-ease), border-color var(--fb-btn-dur) var(--fb-btn-ease), box-shadow var(--fb-btn-dur) var(--fb-btn-ease), transform var(--fb-btn-dur) var(--fb-btn-ease); } /* --- Flood buttons: any button seeded with a dot ------------------------- */ .fb-btn:has(.fb-btn__dot){ overflow:hidden; /* keeps the expanding dot inside the pill */ transform:translateZ(0); /* own compositing layer — no edge jitter */ /* opaque-alpha mask: forces clean antialiased edges on the flood without affecting the button's own box-shadow (white→black is alpha 1 throughout) */ -webkit-mask-image:-webkit-radial-gradient(white,black); mask-image:radial-gradient(white,black); } .fb-btn__dot{ transform:scale(1) translateZ(0) rotate(0.001deg); transform-origin:center; backface-visibility:hidden; outline:1px solid transparent; /* kills the 1px seam while scaling */ box-shadow:0 0 1px currentColor; transition:transform var(--fb-btn-dur) var(--fb-btn-ease); } .fb-btn:hover:not(:disabled) .fb-btn__dot, .fb-btn:focus-visible:not(:disabled) .fb-btn__dot{ transform:scale(var(--fb-btn-flood-scale)) translateZ(0) rotate(0.001deg); } /* --- Label + icons ------------------------------------------------------- */ .fb-btn .fb-btn__label{ position:relative; z-index:2; transition:transform var(--fb-btn-dur) var(--fb-btn-ease), color var(--fb-btn-dur) var(--fb-btn-ease); } .fb-btn[data-variant] .fb-btn__label{ transition:transform var(--fb-btn-dur) var(--fb-btn-ease), color var(--fb-btn-dur) var(--fb-btn-ease); } /* the dot occupies the label's leading space at rest; once it floods, the label reclaims it and re-centres by --label-shift */ .fb-btn:has(.fb-btn__dot):hover:not(:disabled) .fb-btn__label, .fb-btn:has(.fb-btn__dot):focus-visible:not(:disabled) .fb-btn__label{ transform:translateX(var(--label-shift,0)); } .fb-btn[data-variant] .fb-btn__icon, .fb-btn[data-variant] .fb-btn__ricon{ position:relative; z-index:2; transition:transform var(--fb-btn-dur) var(--fb-btn-ease), color var(--fb-btn-dur) var(--fb-btn-ease); } /* --- Hover halo ---------------------------------------------------------- */ /* Two soft layers on the button's OWN box-shadow. A child glow layer would be clipped by the flood's overflow:hidden; the element's own shadow is not. */ .fb-btn[data-variant]:hover:not(:disabled), .fb-btn[data-variant]:focus-visible:not(:disabled){ transform:translateY(calc(var(--fb-btn-lift) * -1)) translateZ(0); box-shadow: 0 0 var(--fb-btn-glow-near) var(--fb-btn-glow-1,transparent), 0 0 var(--fb-btn-glow-far) var(--fb-btn-glow-2,transparent); } /* --- Active / focus / disabled ------------------------------------------ */ .fb-btn[data-variant]:active:not(:disabled){transform:translateY(0) translateZ(0)} .fb-btn:focus-visible{outline:2px solid var(--fb-aqua);outline-offset:2px} .fb-btn:disabled,.fb-btn[aria-disabled="true"]{ opacity:var(--fb-btn-disabled-opacity,.45); cursor:not-allowed; box-shadow:none; transform:none; } .fb-btn:disabled .fb-btn__dot,.fb-btn[aria-disabled="true"] .fb-btn__dot{ transform:scale(1) translateZ(0) rotate(0.001deg); } /* ============================================================================ Variant map — the ONLY colour-aware rules. Each halo is drawn from the colour that variant already floods with, so nothing new is introduced. ========================================================================== */ .fb-btn[data-variant="primary"]{ --fb-btn-glow-1:color-mix(in srgb,var(--fb-white) 45%,transparent); --fb-btn-glow-2:color-mix(in srgb,var(--fb-white) 20%,transparent); } .fb-btn[data-variant="primary"]:hover:not(:disabled){border-color:var(--fb-white)} .fb-btn[data-variant="secondary"]{ --fb-btn-glow-1:color-mix(in srgb,var(--fb-aqua) 50%,transparent); --fb-btn-glow-2:color-mix(in srgb,var(--fb-aqua) 22%,transparent); } /* Tertiary / ghost: no pill, no flood — keeps the arrow slide only */ .fb-btn[data-variant="ghost"]{--fb-btn-glow-near:0px;--fb-btn-glow-far:0px} .fb-btn[data-variant="ghost"]:hover:not(:disabled){transform:none;box-shadow:none} /* Icon buttons ride the same curve */ .fb-iconbtn{ transition:background-color .6s cubic-bezier(0.22,1,0.36,1), border-color .6s cubic-bezier(0.22,1,0.36,1), color .6s cubic-bezier(0.22,1,0.36,1), transform .6s cubic-bezier(0.22,1,0.36,1), box-shadow .6s cubic-bezier(0.22,1,0.36,1); } @media (prefers-reduced-motion:reduce){ .fb-btn,.fb-btn__dot,.fb-btn .fb-btn__label, .fb-btn[data-variant] .fb-btn__icon,.fb-btn[data-variant] .fb-btn__ricon, .fb-iconbtn{transition-duration:.01ms!important} .fb-btn:hover:not(:disabled) .fb-btn__dot{transform:scale(var(--fb-btn-flood-scale))} }