/* ============================================================ IKM SEARCH UX — IKM-SEARCH-2026 ------------------------------------------------------------ Replaces Divi's bare magnifier glyph with a real, readable search control that lives on the header's 40px alignment axis (see "NAVBAR REFINEMENT LAYER — IKM-NAV-REFINE-2026" in header.css) and expands into an intentional glass search card. Works WITH Divi's markup + its own click handler: trigger #et_top_search > #et_search_icon overlay .et_search_outer > .container.et_search_form_container > form.et-search-form > input.et-search-field + span.et_close_search_field Divi toggles .et_pb_search_visible on the container and writes INLINE height / max-width / font-size — hence the !important on exactly those three properties and nowhere else. assets/search.js mirrors that state onto so every rule below is deterministic (no :has() dependency). PALETTE (WCAG AA verified) divine #1E4DB7 primary (7.5:1 on white) divine-deep #173E99 hover (9.6:1 with white text) ink #123c69 nav text (10.4:1 on white) navy #0b2a4d body/input text (13.6:1 on white) slate #55708F placeholder / meta (4.6:1 on white) gold #F5A623 accent rails ivory #FFF9F0 hover tint sky #F3F7FF field ground ============================================================ */ :root { --ikm-s-divine: #1E4DB7; --ikm-s-divine-deep: #173E99; --ikm-s-ink: #123c69; --ikm-s-navy: #0b2a4d; --ikm-s-slate: #55708F; --ikm-s-gold: #F5A623; --ikm-s-ivory: #FFF9F0; --ikm-s-sky: #F3F7FF; --ikm-s-line: rgba(30, 77, 183, .26); --ikm-s-ease: cubic-bezier(.4, 0, .2, 1); --ikm-s-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20.2 20.2l-4-4'/%3E%3C/svg%3E"); --ikm-s-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); } /* ============================================================ S1. THE TAB — a 40px pill that reads as a field, not an icon ------------------------------------------------------------ #et_top_search.ikm-search-tab (1,1,0) out-specifies both header.css's `#et_top_search{width:20px}` and Divi's base rules without !important; only `margin` needs it because header.css / responsive.css declare it !important. ============================================================ */ #et_top_search.ikm-search-tab { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: flex-start; gap: 9px; height: 40px; /* the header's strict 40px axis */ width: auto; min-width: 168px; padding: 0 10px 0 13px; margin: 0 0 0 18px !important; border: 1px solid var(--ikm-s-line); border-radius: 999px; background: rgba(255, 255, 255, .70); -webkit-backdrop-filter: blur(8px) saturate(150%); backdrop-filter: blur(8px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 1px 2px rgba(18, 60, 105, .06); color: var(--ikm-s-ink); cursor: text; /* it behaves like a field, so say so */ position: relative; transition: border-color .2s var(--ikm-s-ease), background-color .2s var(--ikm-s-ease), box-shadow .25s var(--ikm-s-ease), min-width .25s var(--ikm-s-ease); } #et_top_search.ikm-search-tab:hover { border-color: var(--ikm-s-divine); background: #ffffff; box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(30, 77, 183, .16); } #et_top_search.ikm-search-tab:focus-visible { outline: 2px solid var(--ikm-s-divine); outline-offset: 2px; border-color: var(--ikm-s-divine); background: #ffffff; } /* Divi renders the magnifier as an ETmodules glyph in ::before. Retire it and draw a crisp 2px-stroke SVG via mask so the icon inherits colour and never depends on an icon font. */ #et_top_search.ikm-search-tab #et_search_icon { position: static; display: block; flex: 0 0 16px; width: 16px; height: 16px; background-color: var(--ikm-s-divine); -webkit-mask: var(--ikm-s-glyph) center / 16px 16px no-repeat; mask: var(--ikm-s-glyph) center / 16px 16px no-repeat; transition: background-color .2s var(--ikm-s-ease); } #et_top_search.ikm-search-tab #et_search_icon:before { content: "" !important; display: none !important; } #et_top_search.ikm-search-tab .ikm-search-tab__label { flex: 1 1 auto; font-family: 'Poppins', 'Open Sans', sans-serif; font-size: 13.5px; font-weight: 500; line-height: 1; letter-spacing: .015em; color: var(--ikm-s-slate); /* 4.6:1 — placeholder voice, still AA */ text-align: left; white-space: nowrap; transition: color .2s var(--ikm-s-ease); } #et_top_search.ikm-search-tab:hover .ikm-search-tab__label, #et_top_search.ikm-search-tab:focus-visible .ikm-search-tab__label { color: var(--ikm-s-ink); } /* "/" shortcut chip — a quiet power-user affordance */ #et_top_search.ikm-search-tab .ikm-search-tab__kbd { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid rgba(18, 60, 105, .16); border-bottom-width: 2px; border-radius: 6px; background: rgba(243, 247, 255, .9); font-family: 'Poppins', 'Open Sans', sans-serif; font-size: 11px; font-weight: 600; line-height: 1; color: var(--ikm-s-slate); } /* --- Mid desktop 1201-1350px: drop the shortcut chip --- */ @media (min-width: 981px) and (max-width: 1350px) { #et_top_search.ikm-search-tab { min-width: 138px; margin-left: 14px !important; } #et_top_search.ikm-search-tab .ikm-search-tab__kbd { display: none; } } /* --- Tight desktop 981-1200px: icon-only, but still a bordered 40x40 control so it never reads as a stray glyph again --- */ @media (min-width: 981px) and (max-width: 1200px) { #et_top_search.ikm-search-tab { min-width: 40px; width: 40px; padding: 0; justify-content: center; margin: 0 0 0 10px !important; } #et_top_search.ikm-search-tab .ikm-search-tab__label { display: none; } } /* --- Mobile / tablet: 44px round tap target next to the burger --- */ @media (max-width: 980px) { #et_top_search.ikm-search-tab { min-width: 44px; width: 44px; height: 44px; padding: 0; justify-content: center; margin: 0 14px 0 0 !important; border-radius: 50%; order: 0; } #et_top_search.ikm-search-tab .ikm-search-tab__label, #et_top_search.ikm-search-tab .ikm-search-tab__kbd { display: none; } #et_top_search.ikm-search-tab #et_search_icon { flex-basis: 19px; width: 19px; height: 19px; -webkit-mask-size: 19px 19px; mask-size: 19px 19px; } } /* ============================================================ S2. OPEN STATE — page scrim Everything below is gated on , written by search.js from Divi's own class changes, so the closed overlay keeps Divi's inert defaults and never blocks a single pointer event. ============================================================ */ html.ikm-search-on body::after { content: ""; position: fixed; inset: 0; z-index: 9990; /* under #main-header (99999) */ background: rgba(11, 42, 77, .30); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); pointer-events: none; /* keeps Divi's click-away close working */ animation: ikm-search-fade .22s var(--ikm-s-ease) both; } @keyframes ikm-search-fade { from { opacity: 0; } to { opacity: 1; } } html.ikm-search-on .et_search_outer { overflow: visible; /* Divi clips at overflow:hidden */ z-index: 1000; } /* ============================================================ S3. DESKTOP OVERLAY — the header row becomes one glass field ============================================================ */ @media (min-width: 981px) { html.ikm-search-on .container.et_search_form_container { display: flex; align-items: center; justify-content: center; width: 92%; max-width: 1280px !important; /* beats Divi's JS inline max-width */ height: 100% !important; /* beats Divi's JS inline height */ padding: 0 60px 0 0; /* room for the close button */ opacity: 1; z-index: 1000; } /* The card */ html.ikm-search-on form.et-search-form { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; max-width: 660px !important; /* beats Divi's JS inline max-width */ height: 52px; padding: 0 6px 0 18px; border: 1px solid var(--ikm-s-line); border-radius: 999px; background: rgba(255, 255, 255, .96) !important; /* Divi forces transparent */ -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); box-shadow: 0 14px 34px -10px rgba(18, 60, 105, .28), inset 0 1px 0 #fff; transition: border-color .2s var(--ikm-s-ease), box-shadow .25s var(--ikm-s-ease); } html.ikm-search-on form.et-search-form:focus-within { border-color: var(--ikm-s-divine); box-shadow: 0 14px 34px -10px rgba(18, 60, 105, .30), 0 0 0 4px rgba(30, 77, 183, .16), inset 0 1px 0 #fff; } /* Leading magnifier, drawn on the form so the input stays clean */ html.ikm-search-on form.et-search-form::before { content: ""; flex: 0 0 20px; width: 20px; height: 20px; background-color: var(--ikm-s-divine); -webkit-mask: var(--ikm-s-glyph) center / 20px 20px no-repeat; mask: var(--ikm-s-glyph) center / 20px 20px no-repeat; } } /* Input — shared desktop + mobile typography. `.et-search-form input.et-search-field` (0,2,1) beats Divi's `.et-search-form input` (0,1,1); font-size needs !important because Divi's JS copies the 14px nav size inline. */ html.ikm-search-on .et-search-form input.et-search-field { position: static; top: auto; right: auto; bottom: auto; flex: 1 1 auto; width: auto; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; font-family: 'Poppins', 'Open Sans', sans-serif; font-size: 16px !important; /* readable + no iOS zoom */ font-weight: 500; letter-spacing: .01em; color: var(--ikm-s-navy); -webkit-appearance: none; appearance: none; } html.ikm-search-on .et-search-form input.et-search-field:focus { outline: none; } html.ikm-search-on .et-search-form input.et-search-field::placeholder { color: var(--ikm-s-slate); opacity: 1; font-weight: 400; } html.ikm-search-on .et-search-form input.et-search-field::-webkit-search-cancel-button { -webkit-appearance: none; } /* Submit affordance */ html.ikm-search-on .ikm-search-go { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ikm-s-divine); color: #ffffff; font-family: 'Poppins', 'Open Sans', sans-serif; font-size: 13.5px; font-weight: 600; letter-spacing: .03em; line-height: 1; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 8px rgba(30, 77, 183, .30); transition: background-color .2s var(--ikm-s-ease), box-shadow .25s var(--ikm-s-ease); } html.ikm-search-on .ikm-search-go:hover { background: var(--ikm-s-divine-deep); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 5px 14px rgba(23, 62, 153, .36); } html.ikm-search-on .ikm-search-go:focus-visible { outline: 2px solid #ffffff; outline-offset: -4px; box-shadow: 0 0 0 3px rgba(30, 77, 183, .45); } html.ikm-search-on .ikm-search-go__i { width: 15px; height: 15px; flex: 0 0 15px; background-color: currentColor; -webkit-mask: var(--ikm-s-glyph) center / 15px 15px no-repeat; mask: var(--ikm-s-glyph) center / 15px 15px no-repeat; } /* Empty submit nudge */ html.ikm-search-on form.et-search-form.ikm-search-form--empty { border-color: #D97706; animation: ikm-search-shake .4s var(--ikm-s-ease); } @keyframes ikm-search-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } /* Close button — Divi ships a 30px span with an ETmodules "M". Rebuilt as a real 40px round control with a masked X. */ html.ikm-search-on span.et_close_search_field { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; top: 50%; bottom: auto; right: 8px; margin: 0; transform: translateY(-50%); border: 1px solid var(--ikm-s-line); border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px rgba(18, 60, 105, .12); transition: background-color .2s var(--ikm-s-ease), border-color .2s var(--ikm-s-ease); } html.ikm-search-on span.et_close_search_field:hover { background: var(--ikm-s-ivory); border-color: var(--ikm-s-gold); } html.ikm-search-on span.et_close_search_field:focus-visible { outline: 2px solid var(--ikm-s-divine); outline-offset: 2px; } html.ikm-search-on span.et_close_search_field:after { content: "" !important; font-size: 0 !important; width: 17px; height: 17px; background-color: var(--ikm-s-ink); -webkit-mask: var(--ikm-s-close) center / 17px 17px no-repeat; mask: var(--ikm-s-close) center / 17px 17px no-repeat; } /* ============================================================ S4. MOBILE (<981px) — full-width search sheet #main-header carries backdrop-filter, so it is the containing block for fixed descendants. top/left/width/height are written so the sheet covers the viewport under the bar in BOTH cases (contained or truly viewport-fixed). ============================================================ */ @media (max-width: 980px) { html.ikm-search-on body::after { display: none; } /* the sheet brings its own scrim */ html.ikm-search-on .et_search_outer { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; z-index: 100000; background: rgba(11, 42, 77, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); overflow-y: auto; -webkit-overflow-scrolling: touch; } html.ikm-search-on .container.et_search_form_container { position: relative; display: block; width: 100% !important; max-width: none !important; height: auto !important; /* beats Divi's JS inline header-height */ margin: 0; padding: calc(14px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) 18px calc(16px + env(safe-area-inset-left, 0px)); opacity: 1; background: #ffffff; border-bottom: 3px solid var(--ikm-s-gold); box-shadow: 0 20px 44px -14px rgba(11, 42, 77, .45); } /* Title row above the field */ html.ikm-search-on .container.et_search_form_container::before { content: "Search this site"; display: block; margin: 0 52px 12px 2px; font-family: 'Poppins', 'Open Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ikm-s-slate); } html.ikm-search-on form.et-search-form { position: relative; display: block; width: 100% !important; max-width: 100% !important; /* beats Divi's 50% !important + JS inline */ height: auto; padding: 0; border: 0; background: transparent !important; box-shadow: none; } html.ikm-search-on form.et-search-form::before { content: ""; position: absolute; left: 15px; top: 15px; width: 18px; height: 18px; background-color: var(--ikm-s-divine); -webkit-mask: var(--ikm-s-glyph) center / 18px 18px no-repeat; mask: var(--ikm-s-glyph) center / 18px 18px no-repeat; pointer-events: none; } html.ikm-search-on .et-search-form input.et-search-field { display: block; width: 100% !important; height: 48px; /* comfortable thumb target */ padding: 0 14px 0 43px; border: 1.5px solid var(--ikm-s-line); border-radius: 12px; background: var(--ikm-s-sky); font-size: 16px !important; /* never let iOS zoom the page */ } html.ikm-search-on .et-search-form input.et-search-field:focus { border-color: var(--ikm-s-divine); background: #ffffff; box-shadow: 0 0 0 4px rgba(30, 77, 183, .14); } html.ikm-search-on .ikm-search-go { width: 100%; height: 48px; margin-top: 10px; border-radius: 12px; font-size: 15px; } html.ikm-search-on span.et_close_search_field { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); width: 44px; height: 44px; transform: none; } /* Divi hides #top-menu on mobile anyway; make sure its fade-out never drags the burger with it. */ html.ikm-search-on .et_menu_container.et_pb_menu_hidden #et_mobile_nav_menu { opacity: 1; } } /* ============================================================ S5. SEARCH RESULTS PAGE (/?s=…) Divi's search.php ships a bare
list with no heading and no query echo. search.js injects the heading block; the rules below turn the list into readable result cards. ============================================================ */ body.search #main-content #left-area { width: 100% !important; max-width: 920px; float: none !important; margin: 0 auto; padding-bottom: 40px; } /* --- Injected heading block --- */ .ikm-sr-head { margin: 0 0 30px; padding: 26px 28px 24px; border: 1px solid rgba(18, 60, 105, .10); border-top: 4px solid var(--ikm-s-gold); border-radius: 16px; background: linear-gradient(180deg, #ffffff 0%, var(--ikm-s-sky) 100%); box-shadow: 0 10px 28px -14px rgba(18, 60, 105, .22); } .ikm-sr-kicker { margin: 0 0 6px; font-family: 'Poppins', 'Open Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ikm-s-slate); } .ikm-sr-title { margin: 0 0 6px; padding: 0; font-family: 'Poppins', 'Open Sans', sans-serif; font-size: clamp(23px, 3.2vw, 31px); font-weight: 700; line-height: 1.25; color: var(--ikm-s-ink); } .ikm-sr-title .ikm-sr-q { color: var(--ikm-s-divine); } .ikm-sr-meta { margin: 0 0 18px; font-size: 14.5px; line-height: 1.5; color: var(--ikm-s-slate); } /* --- Refine form on the results page --- */ .ikm-sr-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0; } .ikm-sr-form .ikm-sr-srlabel { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .ikm-sr-form .ikm-sr-field { flex: 1 1 260px; min-width: 0; height: 48px; padding: 0 16px 0 44px; border: 1.5px solid var(--ikm-s-line); border-radius: 12px; background: #ffffff var(--ikm-s-glyph) 15px center / 18px 18px no-repeat; font-family: 'Poppins', 'Open Sans', sans-serif; font-size: 16px; color: var(--ikm-s-navy); -webkit-appearance: none; appearance: none; } .ikm-sr-form .ikm-sr-field::placeholder { color: var(--ikm-s-slate); opacity: 1; } .ikm-sr-form .ikm-sr-field:focus { outline: none; border-color: var(--ikm-s-divine); box-shadow: 0 0 0 4px rgba(30, 77, 183, .14); } .ikm-sr-form .ikm-sr-submit { flex: 0 0 auto; height: 48px; padding: 0 24px; border: 0; border-radius: 12px; background: var(--ikm-s-divine); color: #ffffff; font-family: 'Poppins', 'Open Sans', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .03em; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 8px rgba(30, 77, 183, .28); transition: background-color .2s var(--ikm-s-ease); } .ikm-sr-form .ikm-sr-submit:hover { background: var(--ikm-s-divine-deep); } .ikm-sr-form .ikm-sr-submit:focus-visible { outline: 2px solid var(--ikm-s-divine); outline-offset: 2px; } /* --- Result cards --- */ body.search #left-area article.et_pb_post { position: relative; margin: 0 0 16px !important; padding: 22px 26px 22px 28px; border: 1px solid rgba(18, 60, 105, .10); border-radius: 14px; background: #ffffff; box-shadow: 0 2px 10px -4px rgba(18, 60, 105, .14); color: #3c5a7a; font-size: 15px; line-height: 1.72; overflow: hidden; transition: border-color .2s var(--ikm-s-ease), box-shadow .25s var(--ikm-s-ease), transform .25s var(--ikm-s-ease); } body.search #left-area article.et_pb_post::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ikm-s-gold); opacity: 0; transition: opacity .2s var(--ikm-s-ease); } body.search #left-area article.et_pb_post:hover { border-color: rgba(30, 77, 183, .30); box-shadow: 0 14px 30px -14px rgba(18, 60, 105, .30); transform: translateY(-2px); } body.search #left-area article.et_pb_post:hover::before { opacity: 1; } body.search #left-area article.et_pb_post:focus-within { border-color: var(--ikm-s-divine); } body.search #left-area article.et_pb_post .entry-title { margin: 0 0 6px; padding: 0; font-family: 'Poppins', 'Open Sans', sans-serif; font-size: 20px; font-weight: 600; line-height: 1.35; } body.search #left-area article.et_pb_post .entry-title a { color: var(--ikm-s-ink); text-decoration: none; transition: color .18s var(--ikm-s-ease); } body.search #left-area article.et_pb_post .entry-title a:hover { color: var(--ikm-s-divine); } body.search #left-area article.et_pb_post .entry-title a:focus-visible { outline: 2px solid var(--ikm-s-divine); outline-offset: 3px; border-radius: 3px; } body.search #left-area article.et_pb_post .post-meta, body.search #left-area article.et_pb_post .post-meta a { font-size: 13px; color: var(--ikm-s-slate); } body.search #left-area article.et_pb_post .post-meta { margin: 0 0 10px; } body.search #left-area article.et_pb_post .post-meta a { text-decoration: none; } body.search #left-area article.et_pb_post .post-meta a:hover { color: var(--ikm-s-divine); text-decoration: underline; } body.search #left-area article.et_pb_post img { border-radius: 10px; } /* --- Pagination --- */ body.search #left-area .pagination { margin-top: 26px; padding-top: 6px; } body.search #left-area .pagination a { display: inline-flex; align-items: center; height: 42px; padding: 0 20px; border: 1px solid var(--ikm-s-line); border-radius: 999px; background: #ffffff; color: var(--ikm-s-divine); font-family: 'Poppins', 'Open Sans', sans-serif; font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .2s var(--ikm-s-ease), color .2s var(--ikm-s-ease); } body.search #left-area .pagination a:hover { background: var(--ikm-s-divine); color: #ffffff; } body.search #left-area .pagination a:focus-visible { outline: 2px solid var(--ikm-s-divine); outline-offset: 2px; } /* --- Empty state --- */ body.search #left-area .entry .not-found-title, body.search #left-area h1.not-found-title { margin: 0 0 10px; padding: 0; font-family: 'Poppins', 'Open Sans', sans-serif; font-size: clamp(21px, 2.8vw, 26px); font-weight: 700; color: var(--ikm-s-ink); } body.search #left-area .entry { padding: 34px 30px; border: 1px dashed rgba(30, 77, 183, .28); border-radius: 16px; background: var(--ikm-s-sky); text-align: center; color: #3c5a7a; line-height: 1.7; } body.search #left-area .entry::before { content: ""; display: block; width: 40px; height: 40px; margin: 0 auto 14px; background-color: rgba(30, 77, 183, .38); -webkit-mask: var(--ikm-s-glyph) center / 40px 40px no-repeat; mask: var(--ikm-s-glyph) center / 40px 40px no-repeat; } .ikm-sr-suggest { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .ikm-sr-suggest li { margin: 0; padding: 0; } .ikm-sr-suggest a { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border: 1px solid var(--ikm-s-line); border-radius: 999px; background: #ffffff; color: var(--ikm-s-divine); font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .2s var(--ikm-s-ease), color .2s var(--ikm-s-ease); } .ikm-sr-suggest a:hover { background: var(--ikm-s-divine); color: #ffffff; } .ikm-sr-suggest a:focus-visible { outline: 2px solid var(--ikm-s-divine); outline-offset: 2px; } @media (max-width: 640px) { .ikm-sr-head { padding: 20px 18px; border-radius: 14px; } body.search #left-area article.et_pb_post { padding: 18px 18px 18px 20px; } .ikm-sr-form .ikm-sr-submit { flex: 1 1 100%; } } /* ============================================================ S6. REDUCED MOTION — silence every transition/animation added here, including Divi's own fade on the search container. ============================================================ */ @media (prefers-reduced-motion: reduce) { #et_top_search.ikm-search-tab, #et_top_search.ikm-search-tab #et_search_icon, #et_top_search.ikm-search-tab .ikm-search-tab__label, html.ikm-search-on form.et-search-form, html.ikm-search-on .ikm-search-go, html.ikm-search-on span.et_close_search_field, .ikm-sr-form .ikm-sr-field, .ikm-sr-form .ikm-sr-submit, body.search #left-area article.et_pb_post, body.search #left-area article.et_pb_post::before, body.search #left-area article.et_pb_post .entry-title a, body.search #left-area .pagination a, .ikm-sr-suggest a { transition: none !important; } html.ikm-search-on body::after, html.ikm-search-on .container.et_search_form_container, html.ikm-search-on form.et-search-form.ikm-search-form--empty { animation: none !important; } body.search #left-area article.et_pb_post:hover { transform: none; } body.search #left-area article.et_pb_post::before { opacity: 1; } }