/* floating-labels.css — loaded AFTER atf.css/plugins.css on purpose. * * REPLACES spam-protection-2023.js, which step 2 removed from plugins.js. That file * was not only a validator — it was the ONLY thing toggling `.animate_lbl` (added on * focus, removed on blur when empty, added on select change). Without a replacement * every label on every form sits on top of the typed value: silent, sitewide, no * console error. * * WHY A SEPARATE FILE, NOT globals.css: Next hoists its own CSS to the TOP of * (verified: globals.css was stylesheet index 0, atf.css index 2). These selectors tie * atf.css's `.anim_lbl label { transform: … }` on specificity, so source order decides * — and from globals.css the theme won and the labels never floated. Linking this after * plugins.css makes the cascade deterministic. * * Declarations MIRROR atf.css's own .animate_lbl rules verbatim, including every * context-specific background, rather than inventing values. `:has()` is used so * label/input order doesn't matter. Inputs carry placeholder=" " so * :not(:placeholder-shown) can work. */ .anim_lbl:focus-within > label, .anim_lbl:has(input:not(:placeholder-shown)) > label, .anim_lbl:has(textarea:not(:placeholder-shown)) > label, .anim_lbl:has(select:not([data-empty="1"])) > label { transform: translateY(-140%) scale(0.75); background-color: #fff; z-index: 4; } /* textarea variant — atf.css: .anim_lbl.animate_lbl .lbl_txtara */ .anim_lbl:focus-within > .lbl_txtara, .anim_lbl:has(textarea:not(:placeholder-shown)) > .lbl_txtara { transform: translateY(-22px) scale(0.75); } /* context-specific backgrounds, mirrored from atf.css */ .forms-2023 .anim_lbl:focus-within > label, .forms-2023 .anim_lbl:has(input:not(:placeholder-shown)) > label, .forms-2023 .anim_lbl:has(textarea:not(:placeholder-shown)) > label { background-color: #fff !important; } .team_modal .anim_lbl:focus-within > label, .team_modal .anim_lbl:has(input:not(:placeholder-shown)) > label, .team_modal .anim_lbl:has(textarea:not(:placeholder-shown)) > label { background-color: rgba(240, 238, 239, 0.95); } .sbs_form .anim_lbl:focus-within > label, .sbs_form .anim_lbl:has(input:not(:placeholder-shown)) > label, .sbs_form .anim_lbl:has(textarea:not(:placeholder-shown)) > label { background-color: #1aa5e6; color: #fff; } .contact_form form .anim_lbl:focus-within > label, .contact_form form .anim_lbl:has(input:not(:placeholder-shown)) > label, .contact_form form .anim_lbl:has(textarea:not(:placeholder-shown)) > label { background-color: #f7f7f6; }