.search-form-container #searchform { position: relative; } .search-form-container #searchform::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-accent, #ff5e62); border-radius: 0; transform: scaleX(0); transform-origin: center center; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; z-index: 1; } .search-form-container:focus-within #searchform::after { transform: scaleX(1); } .search-form-container #searchform input#s { width: 100%; height: 42px; padding: 0 14px; box-sizing: border-box; border-radius: 0; position: relative; z-index: 0; transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .search-form-container:focus-within input#s { background: rgba(255, 255, 255, 0.12); } .mobile-search .widget_search input[type="text"]:focus, .mobile-search .search-form-container input#s:focus, .search-form-container #searchform input#s:focus { border-color: rgba(255, 255, 255, 0.18); outline: none; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); } @media (prefers-reduced-motion: reduce) { .search-form-container #searchform::after { transition-duration: 0.01ms; } }