/* ========================================================================= Iola Register search bar Used by the header search modal, the search results hero, the "nothing found" template and the scoped form on category archives. Retinted from the design comp to the Kadence global palette: #0d80c4 accent -> --global-palette1 (#088ccb) #1a1a18 text -> --global-palette3 (#232424) #8a8a86 muted -> --global-palette6 (#777777) #cfcfc9 border -> --global-palette8 (#dedede) #f2f1ec hover wash -> --global-palette7 (#fcfcfc) #ffffff surface -> --global-palette9 (#ffffff) palette1 and palette2 are the same blue on this site, so the submit hover is derived rather than taken from palette2. ========================================================================= */ .ir-search { --ir-search-accent: var(--global-palette1, #088ccb); --ir-search-accent-hover: #0a6ba3; --ir-search-surface: var(--global-palette9, #fff); --ir-search-border: var(--global-palette8, #dedede); --ir-search-text: var(--global-palette3, #232424); --ir-search-muted: var(--global-palette6, #777); --ir-search-wash: var(--global-palette7, #fcfcfc); --ir-search-font-size: 17px; /* Shared by the modal and the search hero so they stay identical. 800px is not arbitrary: Kadence caps the modal at that width with #search-drawer .drawer-inner form { max-width: 800px } (1,2,1) in assets/css/all.min.css, which outranks our #search-drawer .ir-search rule (1,1,0). Matching it here makes the search page render at the same width rather than fighting a rule we would only lose to. If the modal width ever needs to change, change it here AND raise the specificity of the #search-drawer .ir-search rule below to beat Kadence's. */ --ir-search-max-width: 800px; display: flex; align-items: center; gap: 10px; margin: 0; /* Kadence's hero header is a column flex container with align-items:center, which sizes children shrink-to-fit across the inline axis -- max-width alone cannot widen the bar there, so claim the width explicitly. */ box-sizing: border-box; width: 100%; background: var(--ir-search-surface); border: 1px solid var(--ir-search-border); border-radius: 3px; padding: 6px 6px 6px 18px; transition: border-color .15s, box-shadow .15s; } @supports (color: color-mix(in srgb, red 50%, black)) { .ir-search { --ir-search-accent-hover: color-mix(in srgb, var(--ir-search-accent) 82%, #000); } } .ir-search:focus-within { border-color: var(--ir-search-accent); /* Ring colour follows the accent instead of a fixed rgba(). */ box-shadow: 0 0 0 3px rgba(8, 140, 203, .15); } @supports (color: color-mix(in srgb, red 50%, black)) { .ir-search:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ir-search-accent) 18%, transparent); } } /* Kadence appends its own .kadence-search-icon-wrap at priority 99; it is unhooked in inc/iola-search-bar.php, this is belt-and-braces for cached markup. */ .ir-search .kadence-search-icon-wrap { display: none; } /* CleanTalk injects two honeypot inputs before at priority 999. Its own stylesheet hides them, but this container is a flex row -- if that CSS is ever deferred or optimised away they would show as stray fields. */ .ir-search .apbct_special_field { display: none !important; } /* Beat Kadence's own .search-field styling, which the input also carries. */ .ir-search .ir-search__field { flex: 1; min-width: 0; margin: 0; border: 0; background: transparent; box-shadow: none; padding: 8px 0; font-size: var(--ir-search-font-size); line-height: 1.4; color: var(--ir-search-text); } .ir-search .ir-search__field:focus { outline: none; border: 0; box-shadow: none; } .ir-search .ir-search__field::placeholder { color: var(--ir-search-muted); opacity: 1; } /* Hide the native clear affordance; we ship our own. */ .ir-search .ir-search__field::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .ir-search__clear { flex-shrink: 0; display: none; align-items: center; justify-content: center; width: 26px; height: 26px; min-height: 0; border: 0; padding: 0; background: transparent; border-radius: 50%; color: var(--ir-search-muted); cursor: pointer; } .ir-search__clear:hover, .ir-search__clear:focus { color: var(--ir-search-text); background: var(--ir-search-wash); } .ir-search.has-value .ir-search__clear { display: flex; } .ir-search .ir-search__submit { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 0; border: 0; border-radius: 2px; padding: 0; background: var(--ir-search-accent); color: var(--global-palette9, #fff); cursor: pointer; transition: background .15s; } .ir-search .ir-search__submit:hover { background: var(--ir-search-accent-hover); } .ir-search .ir-search__submit:focus-visible { outline: 2px solid var(--ir-search-text); outline-offset: 2px; } /* --- In the header search modal ------------------------------------------- The drawer background is palette1 (blue), so the bar keeps its white surface and gains a lift shadow -- the comp's --overlay variant. -------------------------------------------------------------------------- */ #search-drawer .ir-search { max-width: var(--ir-search-max-width); margin: 0 auto; /* The drawer backdrop is a dark translucent wash over the page, so the default light border and any dark drop shadow disappear into it. Lift the bar with a white halo instead, layered tight -> wide so the edge fades out rather than ending on a hard ring. */ border-color: rgba(255, 255, 255, .6); box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 0 20px 2px rgba(255, 255, 255, .26), 0 0 56px 14px rgba(255, 255, 255, .14), 0 18px 44px -20px rgba(0, 0, 0, .55); transition: border-color .15s, box-shadow .2s; } /* Beat the base :focus-within (0,2,0) with (1,2,0) so focus intensifies the halo instead of swapping in the light-background blue ring. */ #search-drawer .ir-search:focus-within { border-color: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 0 24px 4px rgba(255, 255, 255, .36), 0 0 76px 22px rgba(255, 255, 255, .2), 0 18px 44px -20px rgba(0, 0, 0, .55); } @media (prefers-reduced-motion: reduce) { #search-drawer .ir-search { transition: none; } } /* Kadence gives the drawer's own field a border and a hard offset shadow: #search-drawer .drawer-inner input.search-field (1,2,1) #search-drawer .drawer-inner input.search-field:focus -> color:#fff inside our bar that renders as a bordered box within a box, and the focus colour would be white text on our white surface. Our base rule is only (0,2,0), so it loses -- this override is (1,3,0) and wins in both states. Source: assets/css/all.min.css */ #search-drawer .drawer-inner .ir-search .ir-search__field, #search-drawer .drawer-inner .ir-search .ir-search__field:focus { width: auto; padding: 8px 0; font-size: var(--ir-search-font-size); border: 0; background: transparent; box-shadow: none; color: var(--ir-search-text); } /* --- Clear the leaderboard ad above the search hero ------------------------- Kadence Element 197568 (Broadstreet zone 160135) renders with an inline style="... margin-top:24px; margin-bottom:-26px", pulling the next section up by 26px. Elsewhere the following block is white so the overlap is invisible; the search hero has a tinted background, so the ad visibly collides with it. Inline styles cannot be beaten by a class selector without !important, and that div has no class or id to target, so restore the gap on the hero instead. Set to match the ad's own 24px top margin, so the space above and below the leaderboard reads the same. Better long-term fix: remove the negative margin from the Element itself (Appearance -> Kadence -> Elements -> 197568). This rule can then go. */ .search-archive-hero-section { margin-top: 24px; } /* --- In the search results hero -------------------------------------------- */ .search-archive-hero-section .ir-search { max-width: var(--ir-search-max-width); margin: 1rem auto 0; text-align: left; } /* --- On category archives (replaces the IRAS inline box) ------------------- */ .iola-category-search.ir-search { margin: 0 0 1.5rem; } @media (max-width: 600px) { .ir-search { padding-left: 14px; gap: 8px; } /* 16px avoids iOS zooming the page on focus. */ .ir-search { --ir-search-font-size: 16px; } .ir-search .ir-search__submit { width: 42px; height: 42px; } } /* ========================================================================= Iola search results page Loaded by inc/iola-search.php on is_search() only. ========================================================================= */ /* --- 1. Featured image on the RIGHT --------------------------------------- Kadence's "beside" layout is `display:grid; grid-template-columns:1fr 2fr` with .post-thumbnail first in the markup, so the image lands on the left. Flip the track sizes and place the two children explicitly. Source rule: assets/css/content.min.css -------------------------------------------------------------------------- */ @media screen and (min-width: 768px) { .search-results .grid-lg-col-1.item-image-style-beside article.loop-entry.has-post-thumbnail:not(.kb-post-no-image) { grid-template-columns: 2fr 1fr; } .search-results .grid-lg-col-1.item-image-style-beside article.loop-entry.has-post-thumbnail:not(.kb-post-no-image) > .post-thumbnail { grid-column: 2; grid-row: 1; } .search-results .grid-lg-col-1.item-image-style-beside article.loop-entry.has-post-thumbnail:not(.kb-post-no-image) > .entry-content-wrap { grid-column: 1; grid-row: 1; } } /* --- 3. Sort toolbar ------------------------------------------------------- */ .iola-search-toolbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--global-gray-400, #dee2e6); } .iola-search-toolbar__count { margin: 0; font-size: 0.9em; color: var(--global-palette5, #6c757d); } .iola-search-toolbar__sort { display: flex; align-items: center; gap: 0.5rem; margin: 0; } .iola-search-toolbar__sort label { margin: 0; font-size: 0.9em; white-space: nowrap; color: var(--global-palette5, #6c757d); } .iola-search-toolbar__sort select { margin: 0; padding: 0.35em 2em 0.35em 0.6em; font-size: 0.9em; width: auto; } /* --- Toolbar filters (category + sort) ------------------------------------- */ .iola-search-toolbar__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 0; } .iola-search-toolbar__field { display: flex; align-items: center; gap: 0.5rem; } .iola-search-toolbar__field label { margin: 0; font-size: 0.9em; white-space: nowrap; color: var(--global-palette5, #6c757d); } .iola-search-toolbar__field select { margin: 0; padding: 0.35em 2em 0.35em 0.6em; font-size: 0.9em; width: auto; max-width: 16rem; } @media screen and (max-width: 543px) { .iola-search-toolbar__filters { width: 100%; gap: 0.5rem; } .iola-search-toolbar__field { flex: 1 1 100%; justify-content: space-between; } .iola-search-toolbar__field select { max-width: none; flex: 1 1 auto; } } /* --- Header account / paper buttons ---------------------------------------- These used Font Awesome markup, but Font Awesome is only enqueued on the podcast page template, so the icons rendered as empty elements everywhere else. Replaced with inline SVG in the [iola_header_buttons] shortcode; this just aligns them with the label. -------------------------------------------------------------------------- */ /* Customizer/snippet CSS prints an inline