/*! Theme Name: Kadence Child Theme URI: https://www.kadencewp.com/kadence-theme/ Template: kadence Author: Kadence WP Author URI: https://www.kadencewp.com/ Description: A child theme for the Kadence Theme. Version: 1.1 License: GNU General Public License v3.0 (or later) License URI: https://www.gnu.org/licenses/gpl-3.0.html Text Domain: kadence-child */ /* Theme customization starts here -------------------------------------------------------------- */ :root { --color-bg: #0c111d; --grey-900: #141414; --grey-600: #292929; --grey-500: #272727; --grey-400: #333333; --grey-300: #434343; --grey-200: #cecfd2; --grey-100: #a9a9a9; --color-accent: #eaaa08; --color-accent-alt: #dba746; --color-blue-900: #0c111d; --color-blue-800: #2b2d39; --color-blue-700: #161b26; --color-blue-600: #333741; --color-blue-400: #1f242f; --field-border: #333741; --color-white: #fff; --color-offwhite: #e8e8e8; --color-black: #000; --content-width: 1140px; --header-height: 59px; --notification-bar-height: 47px; } body.light-mode-active { --color-bg: #f2f4f7; --grey-900: #e8e8e8; --grey-600: #f0f0f0; --grey-500: #d0d5dd; --grey-400: #d0d5dd; --grey-300: #969696; --grey-200: #292929; --grey-100: #141414; --color-accent: #eaaa08; --color-accent-alt: #dba746; --color-blue-900: #fff; --color-blue-800: #2b2d39; --color-blue-600: #f2f4f7; --color-blue-700: #161b26; --color-blue-400: #fff; --field-border: #333741; --color-white: #0c111d; --color-offwhite: #e8e8e8; --color-black: #fff; --e-global-color-primary: #f8f8f8; --e-global-color-secondary: #000; --e-global-color-text: #161616; --e-global-color-0629950: #fff; --global-palette7: #f2f4f7; --global-palette4: #f2f4f7; --global-palette3: #000; } body.light-mode-active .tool-card__categories > a { background-color: var(--color-blue-600); } body.light-mode-active .embed-tool .icon-copy { filter: brightness(0); } body.light-mode-active .search-bar input[type="search"], body.light-mode-active nav.ai-category-menu a, body.light-mode-active .poweruser-picks-wrapper label, body.light-mode-active .pu-filters-right .select-selected { background-color: white; } .flex { display: flex; } .justify-center { justify-content: center; } .justify-space-between { justify-content: space-between; } .align-center { align-items: center; } .align-start { align-items: start; } .w-full { width: 100%; } .w-auto { width: auto; } .align-stretch { align-items: stretch; } .gap-6 { gap: 24px; } .gap-5 { gap: 20px; } .gap-4 { gap: 16px; } .gap-3 { gap: 12px; } .gap-2 { gap: 8px; } .pb-1 { padding-bottom: 4px; } .relative { position: relative; } .mt-1 { margin-top: 4px; } .mt-2-5 { margin-top: 10px; } .grid { display: grid; } .grid-desktop-3 { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); } body, body.page { background-color: var(--color-bg); } .header { position: sticky; top: calc(0px + var(--wp-admin--admin-bar--height, 0px)); z-index: 9999; background-color: var(--color-bg); border-bottom: 1px solid var(--color-accent); padding: 4px 0; } body .header.header { display: block !important; } .header:has(~ .mysticky-welcomebar-widget-2:not(.mysticky-welcomebar-notpresent)) { top: calc(var(--notification-bar-height) + var(--wp-admin--admin-bar--height, 0px)); } .header .header-left { flex: 0 0 70px; padding-right: 20px; } .header-left > a > img { width: 50px; height: 50px; } .header .header-inner { display: flex; justify-content: flex-start; align-items: center; width: 100%; max-width: var(--content-width); margin: 0 auto; padding: 0 10px; } .header .menu-main-menu-container { display: block; } .header .mobile-menu-main { display: none; } .header .header-menu { flex: 1; display: flex; align-items: center; padding: 0 10px; } .header .header-search { margin-top: 10px; } .header .header-search svg { width: 20px; fill: var(--color-white); height: 20px; } .header .header-menu ul { display: flex; justify-content: flex-start; list-style: none; margin: 0; } .header .header-menu ul.menu > li { position: relative; line-height: 2.8; } .header .header-menu ul.sub-menu li { line-height: 1; } .header .header-menu ul li ul { display: none; position: absolute; width: auto; left: 0px; margin-left: 0px; margin-top: 0px; min-width: 10em; max-width: 1000px; background-color: var(--color-white); z-index: 9; top: 100%; } .header .header-menu ul li ul li a { color: var(--color-bg); transition: 0.35s; white-space: nowrap; padding: 13px 20px; width: 100%; display: flex; } .header .header-menu ul li.current-menu-item a, .header .header-menu ul li a:hover { color: var(--color-accent); } .header .header-menu ul li ul li a:hover { background-color: var(--color-bg); color: var(--color-white); } .header .header-menu ul li:hover > ul { display: block; } .header .header-menu ul li a { color: var(--color-white); fill: var(--color-white); padding: 13px 20px; text-decoration: none; font-size: 14px; } .header .header-right { display: flex; justify-content: space-between; flex: 0 0 20%; align-items: center; } .header .header-right .user-fav-counter a { display: flex; align-items: center; text-decoration: none; } .header .header-right .user-fav-counter svg { fill: var(--color-accent); width: 16px; margin-right: 8px; } .header .header-right .user-login { display: flex; align-items: center; } .header .header-right .user-login a { color: var(--color-white); text-decoration: none; display: flex; line-height: 1.5; font-size: 16px; } .header .header-right .user-login a.google-login-btn { background-color: var(--color-accent); padding: 3px 10px 6px; border-radius: 5px; } .header .header-right .user-login svg { fill: var(--color-white); width: 20px; margin-right: 8px; } .header .header-right .user-fav-counter { display: flex; align-items: center; } .header .header-toggle { display: none; margin-left: 10px; } .header .header-toggle svg { width: 25px; fill: var(--color-white); margin-top: 10px; } .header-search-form { position: absolute; z-index: 9997; width: 100%; display: none; background: var(--global-palette7); padding: 10px 10px; margin-top: 5px; } .header-search-form .search-bar { max-width: 600px; margin: 0 auto; width: 100%; } .mobile-menu-main { position: absolute; z-index: 9999; margin-top: 5px; transition: max-height 0.3s, transform 0.3s; transform-origin: top; overflow-y: auto; overflow-x: hidden; background-color: var(--color-white); transform: scaleY(1); animation: hide-scroll 0.3s backwards; width: 100%; display: none; } .mobile-menu-main ul { list-style: none; margin-left: 0; margin-bottom: 0; } .mobile-menu-main ul li a { font-size: 14px; color: var(--color-bg); padding: 10px 20px; line-height: 20px; display: flex; align-items: center; text-decoration: none; position: relative; } .mobile-menu-main ul li.current_page_item a { background-color: var(--color-bg); color: var(--color-white); } .mobile-menu-main ul li ul { margin-left: 15px; display: none; } .mobile-menu-main ul li ul a { font-size: 0.85em; } .header ul li.menu-item-has-children > a:after { content: ""; display: block; background-image: url("https://powerusers.ai/wp-content/themes/kadence-child-v1.1/assets/images/down-arrow.png"); background-repeat: no-repeat; background-position: center; background-size: cover; width: 10px; height: 10px; margin: 2px 10px; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); } .aa-DetachedOverlay { z-index: 9999 !important; } .light-mode-active .header ul li.menu-item-has-children > a:after { filter: brightness(0); } .header .mobile-menu-main ul li.menu-item-has-children > a:after { filter: invert(1); position: relative; left: unset; top: 7px; margin-top: 0; line-height: 20px; } .mobile-menu-main ul li.menu-item-has-children.current_page_item > a:after { filter: unset; } .ai-tool-image-area { width: 60px; flex: 1 0 auto; margin-right: 8px; } .ai-tool-logo { border-radius: 12px; border: 1px solid transparent; } .light-mode-active .ai-tool-logo { border-color: #ececec; } .ai-tool-fav { width: fit-content; background-color: var(--color-blue-600); padding: 8px 10px; border-radius: 44px; } .ai-tool-fav .fav_count { font-size: 16px; } .ai-tool_button.pu-button { width: 100%; background-color: var(--color-blue-600); justify-content: center; border: none; font-size: 16px; font-weight: 600; padding: 8px 12px; text-decoration: none; } .ai-tool_button.pu-button span { line-height: 1; } .ai-price-text-value { font-size: 15px; } .pu-button { border: 1px solid #ffffff1f; border-radius: 100vw; background-color: transparent; color: var(--color-white); width: fit-content; padding: 0px 16px; transition: color 300ms ease; cursor: pointer; font-weight: 400; font-size: normal; line-height: 32px; } a, h1:not(.entry-title) a, h2:not(.entry-title) a, h3:not(.entry-title) a, h4:not(.entry-title) a, h5:not(.entry-title) a { color: var(--global-palette-highlight); } a:hover, h1:not(.entry-title) a:hover, h2:not(.entry-title) a:hover, h3:not(.entry-title) a:hover, h4:not(.entry-title) a:hover, h5:not(.entry-title) a:hover { color: var(--color-accent); } a.google-login-logo-btn { background-color: var(--color-offwhite); padding: 1em 1em; text-align: center; width: 330px; display: flex; align-items: center; justify-content: center; gap: 1rem; color: var(--color-black); border-radius: 100vw; font-size: 20px; font-weight: bold; margin-inline: auto; } .user-total-likes { color: var(--color-white); } .tools-page { --content-width: 1140px; min-height: 90vh; padding: 10px 50px 50px; isolation: isolate; } .tools-page__top { max-width: var(--content-width); margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; } .tool-breadcrumb { width: 100%; } .tools-page .title { display: flex; justify-content: space-between; align-items: center; width: 100%; } .tools-page h1 { color: var(--color-white); margin: 0; font-weight: 300; font-size: 40px; line-height: 48px; flex: 1; } .page-template-tools-template h1, .page-template-template-freemium-tools h1 { text-align: center; max-width: 700px; margin-top: 40px; } .tools-page .tools-not-found { text-align: center; color: var(--color-white); font-size: 26px; font-weight: 300; } .tools-page .favourite-not-found { text-align: center; } .tools-page .fav-login-btn { padding: 5px 20px 5px 20px; border-style: solid; border-width: 1px 1px 1px 1px; border-color: var(--color-accent); border-radius: 10px 10px 10px 10px; } .tools-page .favourite-icon-text { font-size: 32px; color: var(--color-white); font-weight: 700; text-align: center; } .tools-page .fav-login-btn span { padding-right: 3px; color: var(--color-accent); transition: color 0.3s; } .social-share-btns { display: flex; align-items: center; justify-content: center; gap: 1rem; } .social-share-btns a { width: 24px; aspect-ratio: 1; line-height: 1; display: flex; align-items: center; justify-content: center; } .social-btn svg { width: 24px; height: 24px; } .pu-homepage-intro { margin-block: 12px; text-align: center; } .pu-homepage-intro > p { margin: 0; color: var(--color-white); font-size: 20px; line-height: 32px; } .search-bar { position: relative; margin-bottom: 1rem; } .search-bar.loading:after { content: ""; display: block; width: 30px; height: 30px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url("https://powerusers.ai/wp-content/themes/kadence-child-v1.1/assets/images/loader.gif"); position: absolute; right: 80px; top: 50%; transform: translateY(-50%); } .search-bar input[type="search"] { width: 700px; border: 1px solid var(--color-accent); border-radius: 100vw; background-color: var(--color-blue-400); color: var(--color-white); background-repeat: no-repeat; background-size: 24px; padding-left: 20px; background-position: 10px; } .search-bar input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; height: 20px; width: 20px; background-image: url("https://powerusers.ai/wp-content/uploads/2023/08/close-icon-thin-white.svg"); background-size: 20px 20px; color: var(--color-white); } .search-bar .search-form { position: relative; } .search-bar .search-form .search-submit { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 58px; height: 34px; background-color: var(--color-accent); border-radius: 18px; } .search-bar .search-form .search-submit:hover, .search-bar .search-form .search-submit:focus { background-color: var(--color-accent); } .search-bar .search-form .search-submit:after { content: ""; display: block; width: 26px; height: 26px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url("https://powerusers.ai/wp-content/themes/kadence-child-v1.1/assets/images/search-white.svg"); position: absolute; top: 50%; transform: translateY(-50%); } /* typesense search */ .search-bar .search-form .aa-Form { position: relative; background-color: transparent; border: none; display: flex; flex-direction: row-reverse; } .search-bar .search-form .aa-Form .aa-InputWrapperPrefix { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 58px; height: 34px; background-color: var(--color-accent); border-radius: 18px; z-index: 99; transition: 0; } .search-bar .search-form .aa-Form .aa-InputWrapperPrefix .aa-SubmitButton svg.aa-SubmitIcon { color: var(--color-white); } .search-bar .search-form .aa-Form .aa-InputWrapperPrefix .aa-SubmitButton { transition: 0s; } .search-bar .search-form .aa-Form .aa-InputWrapperPrefix .aa-SubmitButton:focus, .search-bar .search-form .aa-Form .aa-InputWrapperPrefix .aa-SubmitButton:hover { background-color: var(--color-accent); border-radius: 18px; } .aa-Form:focus-within { box-shadow: none !important; } .aa-ClearButton svg { color: var(--color-white); } .aa-Panel .aa-Panel--scrollable { padding: 0; background-color: var(--color-black); } .aa-Panel .aa-SourceHeader { margin-top: 0; padding: 10px 8px; background: var(--grey-500); } .aa-Panel .aa-SourceHeader h5 { font-size: 15px; color: var(--color-white); font-weight: 400; } .aa-PanelLayout .aa-Source .aa-List { padding: 10px 0; } .aa-PanelLayout .aa-Source .aa-List li.aa-Item { border-bottom: 1px solid var(--grey-300); } .aa-PanelLayout .aa-Source .aa-List li.aa-Item:hover { background-color: var(--color-accent); } .aa-PanelLayout .aa-Source .aa-List li.aa-Item:hover .aa-ItemContentTitle { color: var(--color-black); } .aa-ItemContent mark, .aa-PanelLayout .aa-Source .aa-List li.aa-Item .aa-ItemContentTitle { color: var(--color-white); } .aa-InputWrapperSuffix { display: none; } .aa-PanelLayout.aa-Panel--scrollable { scrollbar-color: var(--color-accent) var(--color-offwhite) !important; } .aa-PanelLayout.aa-Panel--scrollable { scrollbar-color: var(--color-accent) var(--color-offwhite); } .search-bar .search-form .aa-Form .aa-InputWrapperPrefix input::placeholder { color: var(--color-white); } .search-bar .search-form .aa-Form .aa-InputWrapperPrefix input::-moz-placeholder { color: var(--color-white); } .aa-GradientBottom { background: none; } /* search mobile layout */ .aa-DetachedSearchButton { border: 1px solid var(--color-accent); border-radius: 100vw; background-color: var(--color-blue-400); color: var(--color-white); } .aa-DetachedSearchButton .aa-SubmitIcon { fill: var(--color-white); } .aa-DetachedFormContainer .aa-Input { background-color: var(--color-blue-400); color: var(--color-white); border: none; border-radius: 100vw; } .aa-DetachedFormContainer .aa-Input::placeholder { color: var(--color-white); } .aa-DetachedFormContainer .aa-Input::-ms-input-placeholder { color: var(--color-white); } .aa-DetachedFormContainer .aa-Form { background-color: var(--color-blue-400) !important; color: var(--color-white); border: 1px solid var(--color-accent); border-radius: 100vw; background-color: var(--color-blue-400); } .aa-DetachedFormContainer .aa-DetachedCancelButton { color: var(--color-white); } .aa-DetachedFormContainer .aa-SubmitButton:hover, .aa-DetachedFormContainer .aa-SubmitButton:focus { background-color: transparent; background: transparent; } .aa-DetachedFormContainer .aa-SubmitButton svg { color: var(--color-accent); } .aa-SourceNoResults { color: var(--color-white); } .aa-DetachedContainer { background-color: var(--color-bg); } .block-editor-page .editor-styles-wrapper { --global-palette3: black; --global-palette7: white; } body.mysticky-welcomebar-apper .elementor-sticky--effects { top: unset !important; } .mysticky-welcomebar-display-desktop.mysticky-welcomebar-entry-effect-none:not(.entry-effect) { display: none; } .aa-ItemContentTitle { overflow: visible !important; } /* new search bar */ .search-box { position: relative; } .ai-menu-cnt { padding-bottom: 20px; border-bottom: 1px solid var(--color-accent); } .ai-menu-cnt-desktop .slick-track { display: flex; align-items: center; } nav.ai-category-menu > ul { padding: 0; list-style: none; margin: 0; display: flex !important; flex-wrap: wrap; justify-content: flex-start; gap: 6px; overflow: hidden; } nav.ai-category-menu a { text-align: center; background-color: var(--color-blue-400); padding: 0.2em 0.5em; border-radius: 5px; border: 1px solid var(--grey-300); color: var(--color-white); font-size: 16px; text-decoration: none; } nav.ai-category-menu li { padding: 0.5em 0; } .page-template-tools-template .slick-slider .slick-slide:first-child nav.ai-category-menu li:first-child a { border-color: var(--color-accent); background-color: var(--color-accent); color: var(--color-black); } nav.ai-category-menu li.page_item.active a, .menu-item-object-aitool_category.current-menu-item a { border-color: var(--color-accent); background-color: var(--color-accent); color: var(--color-black); } .ai-category-menu .page_item.more-items a { position: relative; display: inline-flex; width: 80px; align-items: center; font-size: 14px; } .ai-category-menu .page_item.more-items a:after { content: ""; background-image: url("https://powerusers.ai/wp-content/themes/kadence-child-v1.1/assets/images/chevron-down-grey.svg"); background-size: cover; background-repeat: no-repeat; background-position: center; display: block; width: 10px; height: 10px; position: absolute; right: 10px; transition: 0.35s; } .ai-category-menu .page_item.more-items.active-toggle a:after { transform: rotate(180deg); transition: 0.35s; } .ai-category-menu .page_item.more-items a:hover, .ai-category-menu .page_item.more-items a:focus { background-color: var(--grey-500); color: var(--color-white); } .category-items .below-items { display: none; } .pu-filters { width: 100%; gap: 1rem; margin-block: 10px 14px; flex-wrap: wrap; justify-content: space-between; } .pu-filters .pu-filters-left { display: flex; justify-content: space-between; align-items: center; } .pu-filters .pu-filters-right { display: flex; justify-content: flex-end; } .pu-filters .poweruser-picks-wrapper { margin-left: 20px; text-align: center; } .tools-quantity { color: var(--color-white); opacity: 0.7; font-size: 20px; font-weight: 400; } .tools-quantity span { padding: 4px 12px; font-size: 15px; } .tool-card__favorites { position: relative; padding-right: 30px; color: var(--global-palette3); display: flex; align-items: baseline; line-height: 1; } .tool-card__favorites:after { content: ""; background-image: url("https://powerusers.ai/wp-content/themes/kadence-child-v1.1/assets/images/heart-icon.png"); background-position: center; background-size: cover; display: block; width: 20px; height: 20px; position: absolute; top: 0px; /* transform: translateY(-50%); */ right: 0px; } .tool-card__favorites > .fav_count { margin-top: 2px; } .poweruser-picks-wrapper input { display: none; } .poweruser-picks-wrapper label { border: 1px solid var(--grey-300); border-radius: 10px; background-color: var(--color-blue-400); color: var(--color-white); padding: 4px 8px; cursor: pointer; font-size: 14px; height: auto !important; width: auto !important; } .poweruser-picks-wrapper input:checked ~ label { border-color: var(--color-accent); background-color: var(--color-accent); color: var(--color-black); } .styled-checkbox input { display: none; } .styled-checkbox label { border: 1px solid var(--grey-300); border-radius: 100vw; background-color: var(--grey-400); color: var(--color-white); padding: 0.5em 1em; cursor: pointer; } .styled-checkbox input:checked ~ label { border-color: var(--color-accent); background-color: var(--color-accent); color: var(--color-black); } .pu-custom-select { position: relative; margin-left: 20px; width: 210px; border-radius: 100vw; } .pu-custom-select select { display: none; /*hide original SELECT element: */ } .pu-custom-select option > span { opacity: 0.5; } .select-selected { background-color: var(--color-blue-400); } /* Style the arrow inside the select element: */ .select-selected:after { position: absolute; content: ""; top: 19px; right: 10px; width: 0; height: 0; border: 6px solid transparent; border-color: var(--color-white) transparent transparent transparent; } /* Point the arrow upwards when the select box is open (active): */ .select-selected.select-arrow-active:after { border-color: transparent transparent var(--color-white) transparent; top: 12px; } /* style the items (options), including the selected item: */ .select-items div, .select-selected { color: var(--color-white); padding: 8px 16px; border: 1px solid transparent; border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; cursor: pointer; border-radius: 8px; font-size: 14px; } .select-items div.deals-option::after { content: ""; display: inline-block; width: 20px; height: 20px; background-image: url("https://powerusers.ai/wp-content/themes/kadence-child-v1.1/assets/images/fire.png"); background-size: 14px; background-repeat: no-repeat; background-position: center; margin-left: 6px; vertical-align: middle; } .pu-custom-select .select-selected { border: 1px solid var(--grey-300); } /* Style items (options): */ .select-items { position: absolute; background-color: var(--grey-900); top: 100%; left: 0; right: 0; z-index: 99; } /* Hide the items when the select box is closed: */ .select-hide { display: none; } .same-as-selected { background-color: rgba(0, 0, 0, 0.1); } .tool-main { width: 100%; } .tool-main .tool-center { margin: 0 -14px; } .pagination { text-align: center; } .pagination a.page-numbers { color: var(--grey-200); min-width: 1.2rem; border: none; } .pagination a.page-numbers:hover, .pagination a.page-numbers:focus { outline: none; border: none; } /* FILTERS */ ul.tool-grid.loading:before { backdrop-filter: blur(2px); background-color: rgba(0, 0, 0, 0.1); content: ""; position: absolute; inset: 0; z-index: 998; } ul.tool-grid.loading:after { content: " "; display: block; width: 50px; height: 50px; margin: 0; border-radius: 50%; border: 6px solid var(--color-white); border-color: var(--color-white) transparent var(--color-white) transparent; animation: lds-dual-ring 1.2s linear infinite; position: absolute; left: calc(50% - 25px); top: 50px; transform: translate(-50%); z-index: 999; } @keyframes lds-dual-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* TOOLS LOOP */ ul.tool-grid { position: relative; list-style: none; padding: 0; max-width: var(--content-width); margin-inline: auto; flex-wrap: wrap; justify-content: flex-start; } .tool-card:last-child { margin-right: auto; } .tool-card { border-radius: 20px; position: relative; max-width: 100%; flex: 0 0 33.33%; color: var(--color-white); display: flex; flex-direction: column; /* gap: var(--tool-card-gap); */ transition: transform 300ms ease-in-out; /* padding: 14px; */ justify-content: space-between; } .flex .tool-card { padding: 14px; } .tool-card .ai-tool-title-area { } .tool-card .tool-title-flex span { font-size: 13px; } li.tool-card .tool-card-inner { --card-padding: 14px; --tool-card-gap: 14px; border-radius: 20px; /* box-shadow: 0 0 22px -10px var(--color-accent); border: 2px solid #767676; */ height: 100%; background-color: var(--color-blue-400); } li.tool-card a { text-decoration: none; } li.tool-card.featured-tool .tool-card-inner { border: 1px solid var(--color-accent); } li.tool-card > a { display: block; width: 100%; aspect-ratio: 4 / 2.3; overflow: hidden; flex: 1 0 auto; border-radius: 22px 22px 0 0; /* border-top: 6px solid var(--color-accent); border-left: 4px solid var(--color-accent); border-right: 4px solid var(--color-accent); */ } .tool-card > a > img { width: 100%; } .tool-card__content { display: flex; flex-direction: column; height: 100%; justify-content: space-between; border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; border-top: 0; padding: var(--card-padding); } .tool-card p { margin: 0; } .tool-breadcrumb p, .tool-breadcrumb a, .tool-breadcrumb span { color: var(--color-white); margin: 10px 0 0; } p.tool-card__desc { min-height: 2em; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 30px; font-size: 15px; max-width: 400px; } .tool-card .tool-card__desc a { color: unset !important; text-decoration: none !important; } .tool-card__price-tag { top: 42px; right: 0; } .pu-has-tooltip.tool-card__price-tag p { background-color: var(--color-white); border-top-left-radius: 100vw; border-bottom-left-radius: 100vw; padding: 0.5em 1em; font-size: 16px; line-height: 1; z-index: 1; opacity: 0.85; color: var(--color-black); border: 1px solid rgba(0, 0, 0, 0.5); border-right: 0; } .pu-has-tooltip.tool-card__price-tag { position: absolute; } .tool-card__img { width: 100%; height: 225px; object-fit: cover; border-radius: 24px 24px 0 0; } .tool-card__content > a { display: flex; flex-direction: column; margin-bottom: var(--tool-card-gap); color: var(--color-white); } .tools-desc { font-size: 15px; } .tools-desc ul li, .tools-desc ol li, .tools-desc h1, .tools-desc h2, .tools-desc h3, .tools-desc h4, .tools-desc a, .tools-desc p { color: var(--color-white); } .tool-card__title { margin: 0; position: relative; display: flex; justify-content: space-between; width: 100%; } h3.tool-card__title { color: var(--color-white); line-height: 1.2; font-size: 16px; } /* .tool-card.featured-tool .tool-card__content:before { content: ""; background-image: url(/wp-content/uploads/2024/07/badge.png); background-size: contain; width: 47px; height: 47px; position: absolute; bottom: 50%; right: 0; background-repeat: no-repeat; background-position: center; } */ .tool-card__title.pu-has-tooltip .featured-tool-tip { /* top: calc(-1 * 100% - 40px); */ top: unset; bottom: calc(100% + 50px); left: 20px; } .pu-pricing { display: flex; align-items: center; width: auto; max-width: 100%; justify-content: space-between; } .pu-deal-text { font-size: 12px; color: #222c17; background-color: #aaf0c4; width: auto; padding: 4px 8px; font-weight: 700; border-radius: 44px; } .tool-card__pricing-model { border-radius: 100vw; background-color: var(--grey-400); color: var(--color-white); width: max-content; padding: 0.25em 0.5em; text-transform: capitalize; font-size: 14px; } .tool-card__categories { gap: 8px; align-items: flex-start; flex-wrap: wrap; text-transform: capitalize; position: relative; padding-right: 4px; } .tool-card__categories .tool-ribbon { position: absolute; position: absolute; right: -15px; top: 50%; transform: translateY(-50%); z-index: 9; } .tool-card__categories .tool-ribbon:hover .pu-tooltip { opacity: 1; } .tool-card__categories .tool-ribbon .pu-tooltip { top: calc(-1 * 100% - 2px); } .tool-card__categories .tool-ribbon:after { content: ""; background-image: url("https://powerusers.ai/wp-content/themes/kadence-child-v1.1/assets/images/badge.png"); background-size: contain; width: 47px; height: 47px; background-repeat: no-repeat; background-position: center; display: block; } .tool-card__categories > a { font-size: 14px; line-height: 1.2; padding: 0.25em 0.5em; text-decoration: none; } .tool-card .otw_views_counter { position: relative; padding-right: 32px; } .tool-card .otw_views_counter::after { content: ""; background-image: url("https://powerusers.ai/wp-content/themes/kadence-child-v1.1/assets/images/icon-eye.png"); background-repeat: no-repeat; background-size: cover; background-position: center; display: inline-block; width: 24px; height: 24px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .pu-has-tooltip { position: relative; display: flex; max-width: max-content; } .pu-tooltip { position: relative; background-color: var(--grey-400); color: var(--color-white); font-size: 14px; font-weight: 400; border-radius: 100vw; opacity: 0; pointer-events: none; width: max-content; position: absolute; top: calc(-1 * 100% - 10px); left: 50%; transform: translate(-50%, 10px); padding: 0.5em 1em; transition: opacity 200ms ease, transform 100ms ease; } /* .tool-card__favorites .pu-tooltip { top: calc(-1 * 100% - 2px); } */ .pu-has-tooltip.tool-card__price-tag .pu-tooltip { top: calc(-1 * 100% - 6px); } .pu-tooltip { display: flex; } .pu-tooltip .fav_count { margin-right: 4px; } .pu-tooltip:after { content: ""; width: 16px; height: 16px; background-color: inherit; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%) rotate(45deg); z-index: -1; } .tool-card__add-to-favorite { background-color: transparent; border: none; padding: 0; } .tool-card__add-to-favorite:hover, .tool-card__add-to-favorite:focus { background-color: transparent; } a.tool-card__add-to-favorite { width: auto; display: block; } a.tool-card__add-to-favorite:hover svg path { fill: var(--color-accent) !important; } button.tool-card__add-to-favorite svg { width: 32px; aspect-ratio: 1; } a.js-tool-remove-to-favorite svg { width: 20px; height: 20px; } .tool-card__add-to-favorite svg g path { transition: fill 300ms ease; } a.js-tool-remove-to-favorite svg path { fill: var(--color-accent); fill-rule: nonzero; } .tool-card__add-to-favorite.added svg path { fill: var(--color-accent) !important; } .js-tool-remove-to-favorite .pu-tooltip { top: calc(-1 * 100% - 18px); } .loader-wrap { position: relative; width: 100%; text-align: center; } .loader-wrap.loading:before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); background-image: url("https://powerusers.ai/wp-content/themes/kadence-child-v1.1/assets/images/loader.gif"); background-repeat: no-repeat; background-position: center; display: block; width: 40px; height: 40px; background-size: cover; } ul#menu-ai-category-menu { padding: 0; margin: 0 0 5px; list-style: none; } .ai-menu-cnt button.slick-arrow:before, .ai-menu-cnt button:before { font-size: 50px; line-height: 1; color: var(--color-white); } .ai-menu-cnt button.slick-prev.slick-arrow:before, button#left-button:before { content: "\00AB"; } .ai-menu-cnt button.slick-next.slick-arrow:before, button#right-button:before { content: "\00BB"; } .ai-menu-cnt .slick-slider button, .ai-menu-cnt button { background-color: transparent; padding: 0; margin: 0; font-size: 0; } .ai-menu-cnt-mobile { display: none; } /* fix slick slider issue on load */ .js-ai-menu-items { visibility: hidden; opacity: 0; transition: opacity 200ms; } .js-ai-menu-items.slick-initialized { visibility: visible; opacity: 1; } .js-ai-menu-items .ai-slide { display: none; } .js-ai-menu-items .ai-slide:first-child { display: block; visibility: hidden; transition: visibility 300ms ease; } .js-ai-menu-items.slick-initialized .ai-slide { display: block; visibility: visible !important; } .related-blog p { color: var(--global-palette-btn); font-size: 20px; margin: 0; } .related-blog .button { border: 1px solid var(--global-palette-btn-bg); border-radius: 25px; background-color: var(--global-palette2); margin-left: 10px; font-size: 16px; } .slick-slider .slick-dots { display: flex; justify-content: center; margin: 0; padding: 1rem 0 0; list-style-type: none; } .slick-slider .slick-dots li { margin: 0 10px; } .slick-slider .slick-dots li button { display: block; width: 10px; height: 10px; padding: 0; border: 1px solid var(--color-white); border-radius: 100%; background-color: transparent; text-indent: -9999px; } .slick-slider .slick-dots li.slick-active button { background-color: var(--color-white); } .social-main { display: flex; justify-content: center; align-items: center; } .social-main .styled-checkbox { margin-right: 16px; } .social-main p { line-height: 1; margin: 0; color: var(--color-white); margin-right: 8px; } .elementor-widget-login .elementor-field-group .elementor-field { color: var(--color-black); } /* FAVORITES PAGE */ .page-template-favourite-template h1 { margin-bottom: 40px; } /* embed-tool */ .embed-tool { display: flex; justify-content: flex-start; } .embed-tool .embed-tool-left { display: flex; justify-content: flex-start; margin-right: 28px; } .embed-tool .embed-tool-left .tool-toggle-btn { position: relative; display: flex; align-items: center; } .embed-tool-right { align-items: center; display: flex; } .embed-tool .embed-tool-right a { display: flex; justify-content: flex-start; align-items: center; color: var(--color-white); font-size: 1rem; } .embed-tool .tool-fav-image { margin-right: 12px; } .embed-tool .text-copied { background-color: rgba(0, 0, 0, 0.84); position: absolute; bottom: 10px; right: -66px; z-index: 100; color: white; font-size: 16px; text-align: center; padding: 10px; padding-top: 5px; padding-bottom: 5px; border-radius: 3px; border: 1px solid var(--grey-300); display: block; max-width: 60vw; margin-left: auto; margin-right: auto; margin-top: -15px; margin-bottom: 1px; } .embed-tool .toggle-swtich { transform: rotate(270deg); position: relative; background-color: var(--grey-300); width: 40px; height: 18px; -webkit-appearance: initial; border-radius: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); outline: none; font-size: 14px; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; cursor: pointer; border: none; outline: none; } .embed-tool .toggle-swtich:after { position: absolute; top: 5%; display: block; line-height: 32px; width: 41%; height: 87%; background-color: var(--color-white); box-sizing: border-box; text-align: center; transition: all 0.3s ease-in 0s; color: var(--color-black); border: 1px solid var(--grey-200); border-radius: 50%; } .embed-tool .toggle-swtich:after { left: 2%; content: ""; background-color: var(--color-white); } .embed-tool .toggle-swtich:checked:after { left: 53%; content: ""; background-color: var(--color-white); } .embed-tool .toggle-swtich:checked { background: var(--color-accent); } .embed-tool .icon-copy { background-image: url("https://powerusers.ai/wp-content/themes/kadence-child-v1.1/assets/images/copy-embed.png"); background-repeat: no-repeat; display: block; width: 30px; height: 30px; background-size: 30px; margin-right: 8px; } /* capbility-main */ .capbility-main .title h1 { text-align: center; margin-bottom: 40px; } .capbility-main .cap-filter { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 50px; } .cap-filter .poweruser-picks-wrapper label { margin-right: 10px; border-radius: 6px; padding: 0.5rem 1rem; font-size: 14px; } .cap-filter .select-box { border: 1px solid var(--grey-300) !important; padding: 6px 46px 6px 20px; background-color: var(--grey-400); color: var(--color-white); border-radius: 5px; font-size: 14px; cursor: pointer; } .cap-filter .select-inner .choices { background-color: var(--grey-400); color: var(--color-white); } .cap-filter .select-inner .choices::-webkit-scrollbar-track { background: var(--color-blue-700); } .cap-filter .select-inner .choices::-webkit-scrollbar-thumb { background: var(--color-blue-900); } .cap-filter .select-inner .choices::-webkit-scrollbar-thumb:hover { background: var(--grey-300); } .capbility-list { max-width: 900px; margin: 0 auto; position: relative; } .capbility-list.loading:after { content: " "; display: block; width: 50px; height: 50px; margin: 0; border-radius: 50%; border: 6px solid var(--color-white); border-color: var(--color-white) transparent var(--color-white) transparent; animation: lds-dual-ring 1.2s linear infinite; position: absolute; left: calc(50% - 25px); top: 50px; transform: translate(-50%); z-index: 999; } .capbility-list.loading:before { backdrop-filter: blur(2px); background-color: rgba(0, 0, 0, 0.1); content: ""; position: absolute; inset: 0; z-index: 998; } .capbility-list ul { display: flex; justify-content: flex-start; flex-wrap: wrap; margin-left: 0; } .capbility-list ul li { padding: 10px 10px; display: flex; align-items: center; justify-content: flex-start; flex-grow: 1; width: 100%; } .capbility-list ul li .cap-sno { width: 30px; color: var(--grey-200); margin-right: 18px; } .capbility-list ul li .cap-item { padding: 10px 10px; background-color: var(--grey-400); border-radius: 10px; } .capbility-list ul li .cap-item:hover { background-color: var(--color-accent); } .capbility-list ul li .cap-item:hover .cap-item-count, .capbility-list ul li .cap-item:hover .cap-item-name { color: var(--color-black); } .capbility-list ul li.list-header { background-color: transparent; margin-bottom: 20px; } .capbility-list ul li .cap-name-title { flex: 1; color: var(--color-accent); } .capbility-list ul li .cap-count-title { flex: 1; color: var(--color-accent); } .capbility-list ul li .cap-category-title { flex: 1; color: var(--color-accent); } .capbility-list ul li a { text-decoration: none; color: var(--grey-200); } .capbility-list ul li .cap-item { width: 100%; } .capbility-list ul li .cap-item a { display: flex; justify-content: flex-start; } .capbility-list ul li .cap-item .cap-item-name { flex: 1; color: var(--grey-200); } .capbility-list ul li .cap-item .cap-item-count { flex: 1; color: var(--grey-200); } .capbility-list ul li .cap-item .cap-item-category { flex: 1; color: var(--grey-200); } .capbility-list .cap-paginate { width: 100%; text-align: center; } .capbility-list .cap-paginate span:not(.dots), .capbility-list .cap-paginate a { background-color: var(--grey-400); padding: 5px 10px; font-size: 14px; text-decoration: none; color: var(--color-accent); margin-bottom: 10px; display: inline-block; } .capbility-list .cap-paginate span:not(.dots) { background-color: var(--color-accent); color: var(--color-black); } .capbility-list .cap-paginate a:hover { background-color: var(--color-accent); color: var(--color-black); } /* search-list */ .search-list { display: flex; flex-direction: column; max-height: 58vh; overflow-y: scroll; box-shadow: inset 0 0 5px 0 #00000055; background-color: var(--color-blue-800); position: absolute; z-index: 11; top: 100%; left: 50%; transform: translateX(-50%); width: 100%; margin-left: -27px; max-width: 84%; max-width: calc(89% - 63px); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } /* width */ .search-list::-webkit-scrollbar { width: 10px; } /* Track */ .search-list::-webkit-scrollbar-track { background: var(--color-offwhite); } /* Handle */ .search-list::-webkit-scrollbar-thumb { background: var(--color-accent); } /* Handle on hover */ .search-list::-webkit-scrollbar-thumb:hover { background: var(--grey-300); } .search-list .search-item a { position: relative; padding: 9px 23px; border-bottom: 1px solid var(--grey-300); display: flex; background: 0 0; text-decoration: none; color: var(--color-white); background-color: var(--color-black); } .search-list .search-item:hover a { background-color: var(--color-accent); color: var(--color-black); } .search-list .search-item span { color: var(--color-accent); margin: 0 5px; } .search-list .result-tool-category, .search-list .result-tool-title { text-align: left; background: var(--grey-500); font-size: 13px; padding: 5px 14px; box-shadow: 0 6px 6px 0 var(--grey-500); color: var(--color-white); } /* term-capability */ .term-capability { width: 100%; } .term-capability .capability-title { color: var(--color-accent); font-size: 16px; margin-bottom: 10px; } .term-capability .capability-inner { display: flex; justify-content: flex-start; flex-wrap: wrap; margin: 0 -10px; } .term-capability .capability-item { width: 20%; padding-left: 6px; padding-right: 6px; margin-bottom: 12px; } .term-capability .capability-item a { display: flex; justify-content: space-between; border-radius: 10px; background-color: var(--grey-400); padding: 0.6rem 1rem; text-decoration: none; } .term-capability .capability-item a:hover { background-color: var(--color-accent); } .term-capability a:hover .capability-count, .term-capability a:hover .capability-name { color: var(--color-black); } .term-capability .capability-name { font-size: 14px; color: var(--grey-200); } .term-capability .capability-count { font-size: 14px; color: var(--grey-200); } .term-capability { } .term-capability { } .all-capability { text-align: right; } .all-capability a { text-decoration: none; font-size: 14px; } /* promt-generator */ .prompt-loader-wrap { position: relative; width: 100%; } .prompt-loader-wrap.loading:before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); background-image: url("https://powerusers.ai/wp-content/themes/kadence-child-v1.1/assets/images/loader.gif"); background-repeat: no-repeat; background-position: center; display: block; width: 40px; height: 40px; background-size: cover; } .prompt-tool input, .prompt-tool textarea, .prompt-tool select { background-color: var(--color-blue-900); color: var(--grey-200); border: 1px solid var(--field-border); width: 100%; height: 36px; font-size: 12px; } .prompt-checkbox .flipswitch { position: relative; background: var(--color-blue-900); width: 40px; height: 22px; -webkit-appearance: initial; border-radius: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); outline: none; font-size: 14px; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; cursor: pointer; border: none; outline: none; border: 1px solid var(--color-blue-700); } .prompt-checkbox .flipswitch:after { position: absolute; top: 5%; display: block; line-height: 32px; width: 50%; height: 90%; background: var(--color-white); box-sizing: border-box; text-align: center; transition: all 0.3s ease-in 0s; color: var(--color-black); border: var(--grey-300) 1px solid; border-radius: 50%; } .prompt-checkbox .flipswitch:after { left: 5%; content: ""; background-color: var(--color-white); } .prompt-checkbox .flipswitch:checked:after { left: 53%; content: ""; background-color: var(--color-white); } .prompt-checkbox .flipswitch:checked:before { display: none; } .prompt-checkbox .flipswitch:checked { background: var(--color-accent); } .prompt-generator { max-width: 1300px; margin: 0 auto; width: 100%; padding: 40px 0; } .prompt-generator .prompt-heading { display: flex; justify-content: flex-start; margin-bottom: 50px; } .prompt-generator .prompt-heading img { width: 10rem; margin-right: 60px; } .prompt-generator .prompt-heading-small { font-size: 18px; font-weight: 600; color: var(--color-white); } .prompt-generator h1 { font-weight: 600; margin-bottom: 12px; font-size: 30px; } .prompt-tool { display: flex; justify-content: space-between; } .prompt-tool .prompt-left { width: 75%; } .prompt-tool .prompt-right { width: 35%; padding-left: 10px; } .prompt-box { background-color: var(--color-blue-400); border-radius: 10px; padding: 24px 24px; margin-bottom: 40px; color: var(--grey-200); } .prompt-box h2 { color: var(--grey-200); } .prompt-box a { color: var(--color-accent); text-decoration: underline; } .prompt-text { background-color: var(--color-blue-400); color: var(--color-white); border-radius: 10px; padding: 30px 30px; margin-bottom: 20px; } .prompt-button { display: flex; justify-content: space-between; } .prompt-button button { background-color: var(--color-accent); border-radius: 8px; text-align: center; color: var(--color-blue-900); font-size: 12px; } .prompt-button button.prompt-copy { width: 70%; margin-right: 10px; position: relative; display: flex; align-items: center; justify-content: center; } .prompt-button button.prompt-copy img { width: 20px; display: inline-block; margin-right: 5px; } /* .prompt-button button.prompt-copy:before { content: ''; background-image: url('assets/images/copy.png'); background-repeat: no-repeat; background-position: center; background-size: cover; display: block; width: 20px; height: 20px; } */ .prompt-button button.prompt-reset { background-color: transparent; font-size: 12px; width: 30%; border: 1px solid var(--field-border); color: var(--grey-200); } .prompt-text { position: relative; } .prompt-adjust { font-size: 22px; font-weight: 700; color: var(--grey-200); margin-bottom: 20px; line-height: 1; } .prompt-text textarea { height: 120px; font-size: 12px; border-radius: 8px; resize: none; } .text-copied { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--color-accent); padding: 10px 20px; font-size: 12px; color: var(--color-blue-900); border: 1px solid var(--color-white); border-radius: 3px; } .prompt-tool label { color: var(--grey-200); font-size: 12px; margin-bottom: 10px; display: block; } .prompt-tool label.field-flex { display: flex; justify-content: space-between; } .prompt-tool label { position: relative; display: flex; justify-content: flex-start; } .prompt-tool label a { color: var(--color-accent); } .prompt-tool label .prompt-tooltip { margin-left: 8px; position: relative; width: 14px; } .prompt-tool label .prompt-tooltip:before { content: ""; background-image: url("https://powerusers.ai/wp-content/themes/kadence-child-v1.1/assets/images/question-grey.png"); background-repeat: no-repeat; background-size: cover; background-position: center; display: block; width: 14px; height: 14px; position: absolute; top: 50%; transform: translateY(-50%); left: auto; } /* .prompt-tool label .prompt-tooltip:hover .tooltiptext:after { border: solid; border-color: var(--color-blue-900) transparent; border-color: var(--color-blue-900) transparent; border-width: 1.2em 1.2em 0 1.2em; bottom: -10px; content: ""; display: block; left: 50%; position: absolute; z-index: 99; transform: translateX(-50%); } */ .prompt-tool label .prompt-tooltip:hover .tooltiptext:after { content: ""; position: absolute; top: 50%; right: 100%; margin-top: -10px; border-width: 10px; border-style: solid; border-color: transparent var(--color-blue-900) transparent transparent; } .prompt-tool label .tooltiptext { visibility: hidden; width: 220px; background-color: var(--color-blue-900); color: var(--grey-200); text-align: left; padding: 8px 8px; border-radius: 6px; position: absolute; z-index: 1; top: 50%; left: 24px; transform: translateY(-50%); } .prompt-tool label .prompt-tooltip:hover .tooltiptext { visibility: visible; } .prompt-tool .field textarea.prompt-desc { height: 60px; resize: none; padding-right: 124px; } .prompt-tool .field textarea.prompt-desc.error { border-color: red; } .prompt-tool .field-group { margin-bottom: 14px; } .prompt-tool .field-group.group-flex { display: flex; justify-content: flex-start; } .prompt-tool .field-group.group-flex .flex-1 { flex: 1; } .prompt-tool .field-group.group-flex .flex-2 { flex: 1.5; } .prompt-tool .field-group.group-flex .field { padding: 16px 16px 16px 0; } .prompt-tool .field-group .field { flex: 1; } .prompt-tool .field-group .field.ratio { flex: 1.2; } .prompt-tool .field-group .field.style-field { flex: 1.1; } .choices { color: var(--grey-200); display: none; position: absolute; top: 100%; left: 0; background-color: var(--color-blue-400); border: 1px solid var(--color-blue-900); padding: 10px 10px; width: 100%; overflow-y: scroll; overflow-x: hidden; max-height: 200px; z-index: 9; } .choices::-webkit-scrollbar { width: 5px; } .choices::-webkit-scrollbar-track { background: var(--color-blue-700); } .choices::-webkit-scrollbar-thumb { background: var(--color-blue-900); } .choices::-webkit-scrollbar-thumb:hover { background: var(--grey-300); } .choices div { color: var(--grey-200); font-size: 14px; display: block; } .select-inner { position: relative; } .select-box { position: relative; border: 1px solid var(--field-border) !important; padding: 6px 10px; color: var(--grey-200); border-radius: 5px; font-size: 12px; cursor: pointer; } .select-box .d-arrow { background-image: url("https://powerusers.ai/wp-content/themes/kadence-child-v1.1/assets/images/chevron-down-grey.svg"); background-size: cover; background-repeat: no-repeat; background-position: center; display: block; width: 10px; height: 10px; position: absolute; right: 10px; transform: translateY(-50%); top: 50%; transition: 0.35s; } .styled-select.open .select-box .d-arrow { transform: translateY(-50%) rotate(180deg); transition: 0.35s; } .choices .item-value { padding: 4px 2px; font-size: 12px; } .choices .item-value { cursor: pointer; } .prompt-advance .advance-toggle { color: var(--color-accent); font-size: 14px; position: relative; text-decoration: none; } .prompt-advance .advance-toggle .d-arrow { background-image: url("https://powerusers.ai/wp-content/themes/kadence-child-v1.1/assets/images/chevron-down-yellow.svg"); background-size: cover; background-repeat: no-repeat; background-position: center; display: block; width: 10px; height: 10px; position: absolute; right: -20px; transform: translateY(-50%); top: 50%; transition: 0.35s; } .prompt-advance .advance-toggle.open .d-arrow { transform: translateY(-50%) rotate(180deg); transition: 0.35s; } .prompt-toggle-control { display: none; } .prompt-desc-field { position: relative; } .prompt-desc-field .prompt-add-text { position: absolute; right: 0; top: 0; height: 60px; width: 120px; background-color: var(--color-blue-400); color: var(--grey-200); font-size: 18px; border-top-left-radius: 0; border-top-right-radius: 0; border: 1px solid var(--field-border); } .prompt-desc-field .prompt-add-text:hover { background-color: var(--color-accent); color: var(--color-blue-900); } .prompt-terms ul { display: flex; justify-content: flex-start; list-style: none; margin-bottom: 10px; margin-left: 0; flex-wrap: wrap; } .prompt-terms ul li { margin-right: 8px; margin-bottom: 10px; } .prompt-terms ul li .term-btn { background-color: var(--color-blue-900); border: 1px solid var(--field-border); padding: 3px 6px; color: var(--grey-200); font-size: 12px; border-radius: 10px; width: auto; } .prompt-terms ul li.selected .term-btn { background-color: var(--color-accent); color: var(--color-blue-900); } .prompt-terms .filter-child-terms li { display: none; } .prompt-gallery { display: flex; justify-content: flex-start; flex-wrap: wrap; } .prompt-gallery .prompt-image { width: 25%; padding: 10px; cursor: pointer; } .prompt-gallery .prompt-image.active img { opacity: 0.8; } .prompt-gallery .prompt-image.active figcaption { background-color: var(--color-accent); color: var(--color-blue-900); } .prompt-gallery .prompt-image figure { margin-bottom: 0; } .prompt-gallery .prompt-image img { border-top-left-radius: 5px; border-top-right-radius: 5px; } .prompt-gallery .prompt-image figcaption { background-color: var(--color-blue-600); padding: 5px 5px; font-size: 12px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; color: var(--grey-200); } .prompt-gallery .prompt-image.selected { background-color: var(--color-blue-700); color: var(--field-border); } .prompt-box.prompt-scroll { overflow-y: scroll; max-height: 900px; padding: 24px 24px 100px; position: relative; } .prompt-box.prompt-scroll.loading:before { content: ""; display: block; width: 30px; height: 30px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url("https://powerusers.ai/wp-content/themes/kadence-child-v1.1/assets/images/loader.gif"); position: absolute; right: 40px; top: 50%; transform: translateY(-50%, -50%); left: 50%; z-index: 9; } .prompt-box.prompt-scroll.loading:after { content: ""; background-color: rgba(0, 0, 0, 0.7); height: 100%; width: 100%; display: block; position: absolute; left: 0; top: 0; z-index: 1; } .prompt-box.prompt-scroll::-webkit-scrollbar { width: 5px; } .prompt-box.prompt-scroll::-webkit-scrollbar-track { background: var(--color-blue-700); } .prompt-box.prompt-scroll::-webkit-scrollbar-thumb { background: var(--color-accent); } .prompt-box.prompt-scroll::-webkit-scrollbar-thumb:hover { background: var(--grey-300); } .prompt-list { border-radius: 10px; background-color: var(--color-blue-400); color: var(--grey-200); padding: 10px 10px; } .prompt-list ul { list-style: none; margin-left: 0; margin-bottom: 0; } .prompt-list ul li { background-color: var(--color-blue-600); padding: 6px 6px; border-radius: 5px; margin-bottom: 10px; display: flex; justify-content: flex-start; font-size: 12px; align-items: center; cursor: move; cursor: -webkit-grabbing; } .prompt-list .ghost { opacity: 1; } .prompt-list ul li img { width: 30px; border-radius: 5px; margin-right: 10px; } .prompt-list ul li i { margin-right: 10px; } .prompt-list ul li i:before { content: ""; display: block; width: 30px; height: 30px; background-repeat: no-repeat; background-size: 20px; background-position: center; position: relative; } .prompt-list ul li i.desc-text:before { background-image: url("https://powerusers.ai/wp-content/themes/kadence-child-v1.1/assets/images/chat-icon.svg"); } .prompt-list .prompt-item-text { font-size: 14px; } .prompt-list ul li:last-child { margin-bottom: 0; } .prompt-list ul li .item-actions { display: flex; justify-content: flex-start; position: relative; } .prompt-list ul li .item-actions .weight-field { position: absolute; background-color: var(--color-blue-700); padding: 20px; border-radius: 8px; top: 34px; left: 54%; width: 14rem; transform: translateX(-54%); display: none; z-index: 9999; } .prompt-list ul li .item-actions .weight-field input[type="text"] { width: 160px; margin-right: 10px; } .prompt-list ul li .item-actions .weight-group { display: flex; justify-content: flex-start; position: relative; } .prompt-list ul li .item-actions .weight-group .weight-check-btn { background-color: unset; padding: 0; display: block; width: 15px; height: 15px; position: absolute; top: 50%; transform: translateY(-50%); right: 0; } .prompt-list ul li .item-actions .weight-group .weight-check-btn i:before { content: ""; display: block; width: 15px; height: 15px; background-repeat: no-repeat; background-size: 15px; background-position: center; position: relative; background-image: url("https://powerusers.ai/wp-content/themes/kadence-child-v1.1/assets/images/check-icon.svg"); } .prompt-list ul li .item-actions a { margin-right: 5px; background-color: var(--color-blue-700); display: inline-block; padding: 8px 8px; border-radius: 5px; width: auto; text-align: center; text-decoration: none; color: var(--grey-200); z-index: 9; } body.light-mode-active .prompt-list ul li .item-actions a { color: white; } .prompt-list ul li .item-actions a.prompt-weight { position: relative; } .prompt-list ul li .item-actions a.prompt-weight span { font-size: 11px; } .prompt-list ul li .item-actions .prompt-delete:after { content: ""; display: block; width: 14px; height: 14px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url("https://powerusers.ai/wp-content/themes/kadence-child-v1.1/assets/images/delete.png"); } .prompt-list ul li .item-title { flex: 1 1 0%; } .prompt-list .prompt-tip { display: none; margin-top: 10px; } .prompt-list .prompt-tip cite { font-size: 11px; } /* block-items */ .block-items { background-color: var(--color-blue-400); max-width: var(--content-width); margin: 50px auto 0 auto; width: 100%; border-radius: 30px; padding: 50px; } .block-items .block-inner { display: flex; justify-content: flex-start; align-items: center; width: 100%; } .block-items .block-inner .block-item-image { flex: 0 0 30%; justify-content: center; display: flex; } .block-items .block-inner .block-item-text { flex: 1; color: var(--color-white); width: calc(100% - 320px); padding: 19px 20px; } .block-item-text h2 { color: var(--color-white); } .block-items:nth-child(odd) .block-inner { flex-direction: row-reverse; } .js-more-tools-btn { border-radius: 100vw; color: black; } @media only screen and (max-width: 1024px) { .header .menu-main-menu-container { display: none; } .header .mobile-menu-main .menu-main-menu-container { display: block; } .header .header-inner { justify-content: space-between; } .header .header-right .user-login { margin: 0 10px; } .header .header-toggle { display: block; } .header .header-toggle .menu-close { display: none; } .header .header-toggle.menu-active .menu-close { display: block; } .header .header-toggle.menu-active .menu-open { display: none; } .header .header-menu { justify-content: flex-end; } .header .header-search { padding: 0 15px; } } @media only screen and (max-width: 680px) { .search-bar { width: 100%; } } @media only screen and (max-width: 991px) { .prompt-tool .field-group { flex-wrap: wrap; } .prompt-tool .field-group .field { flex: 50%; padding: 10px 0 0 10px !important; } .prompt-tool .field-group.group-flex .flex-1 { flex: 50%; } } @media only screen and (max-width: 761px) { .prompt-tool { flex-wrap: wrap; flex-direction: column-reverse; } .prompt-tool .field-group { flex-wrap: wrap; } .prompt-tool .field-group .field { flex: 50%; padding: 10px 8px 0 !important; } .prompt-tool .field-group.group-flex .flex-1 { flex: 50%; } .prompt-tool .prompt-left { width: 100%; } .prompt-tool .prompt-right { width: 100%; padding-left: 0; margin-bottom: 20px; } .prompt-gallery { flex-wrap: wrap; } .prompt-gallery .prompt-image { width: 50%; } .prompt-gallery .prompt-image img { width: 100%; } .prompt-box { padding: 10px 10px; } .prompt-box.prompt-scroll { padding: 10px 10px; } .prompt-list ul li .item-actions .weight-field { left: -80px; } .prompt-tool .field-group.group-flex .flex-2, .prompt-tool .field-group .field.style-field, .prompt-tool .field-group .field.ratio { flex: 50%; } .prompt-gallery .prompt-image { padding: 5px; } .prompt-tooltip.tip-left .tooltiptext { left: unset; right: 24px; } .prompt-tool label .prompt-tooltip.tip-left:hover .tooltiptext:after { left: 100%; border-color: transparent transparent transparent var(--color-blue-900); } .prompt-generator .prompt-heading { flex-wrap: wrap; text-align: center; flex-wrap: wrap; } .prompt-generator .prompt-heading img { width: 7rem; margin: 0 auto 14px; } .capbility-list ul li .cap-item .cap-item-name, .capbility-list ul li .cap-item .cap-item-count, .cap-filter .poweruser-picks-wrapper label { font-size: 12px; } .block-items { padding: 40px 15px; } .block-items .block-inner { flex-wrap: wrap; } .block-items .block-inner .block-item-image { flex: 100%; } .block-items .block-inner .block-item-text { } .tool-main .tool-center { margin-inline: 0; } } @media (hover: hover) { a.pu-button:hover { color: var(--color-accent); } a.social-btn:hover svg path { fill: var(--color-accent); } nav.ai-category-menu a:hover { border-color: var(--color-accent); background-color: var(--color-accent); color: var(--color-black); } body.light-mode-active nav.ai-category-menu a:hover, body.light-mode-active .poweruser-picks-wrapper label:hover { background-color: var(--color-accent); } .poweruser-picks-wrapper:hover label, .styled-checkbox:hover label { border-color: var(--color-accent); background-color: var(--color-accent); color: var(--color-black); } .select-items div:hover, .same-as-selected { background-color: rgba(0, 0, 0, 0.1); } li.tool-card:hover .tool-card-inner { box-shadow: 0 0 10px -3px var(--color-accent); } .tool-card:hover { transform: scale(1.05); z-index: 2; } .tool-breadcrumb a:hover { color: var(--color-accent); } .tool-card__content > a:hover { color: unset; } .pu-has-tooltip:hover .pu-tooltip { opacity: 1; transform: translate(-50%, -10px); } .tool-card__add-to-favorite:hover svg g path { fill: rgb(255, 0, 0) !important; } .related-blog .button:hover { border-color: var(--color-accent); background-color: var(--color-accent); color: var(--color-black); } } @media (min-width: 1199px) { .pu-filters { --power-filter-width: 150px; } } @media (min-width: 768px) { .ai-menu-cnt { width: 100%; max-width: 1100px; position: relative; } .ai-menu-cnt.ai-menu-cnt-mobile { position: absolute; } .ai-menu-cnt .slick-slider .slick-arrow, .ai-menu-cnt .slick-arrow { position: absolute; top: 50%; transform: translateY(-50%); } .ai-menu-cnt .slick-slider button.slick-prev, button#left-button { left: -80px; } .ai-menu-cnt .slick-slider button.slick-next, button#right-button { right: -80px; } ul#menu-ai-category-menu { display: grid; grid-template-rows: auto auto auto; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-auto-flow: column; gap: 4px; overflow: auto; } nav.ai-category-menu li { padding: 0.3em 0; min-width: max-content; } .pu-custom-select.pu-pricing-filter-wrapper { width: 210px; } .pu-filters { --filter-height: 45px; height: var(--filter-height); } .pu-filters .poweruser-picks-wrapper { height: var(--filter-height); width: var(--power-filter-width); display: flex; align-items: center; } .poweruser-picks-wrapper label { height: var(--filter-height); width: var(--power-filter-width); } } @media (max-width: 900px) { .tool-card { flex: 1 0 50%; } .embed-tool { flex-wrap: wrap; } .embed-tool .embed-tool-left { width: 100%; margin-bottom: 10px; } .embed-tool .eembed-tool-right { width: 100%; } .embed-tool .text-copied { bottom: -6px; right: 36px; } } @media (max-width: 767px) { .tools-page { padding: 10px; } .tool-breadcrumb { text-align: center; } .tools-page .title { flex-direction: column; } .tools-page h1 { font-size: 24px; line-height: 1.2; } .search-bar input[type="search"] { width: 100%; min-width: 90vw; } .tools-quantity { flex: 1; } .pu-filters .poweruser-picks-wrapper { margin-left: 10px; } .poweruser-picks-wrapper label, .select-selected { font-size: 14px; } .poweruser-picks-wrapper label { padding: 5px 10px; } .pu-custom-select { width: 180px; } .pu-filters .pu-filters-left { flex-wrap: wrap; width: 100%; justify-content: flex-start; } .pu-filters-right .pu-custom-select { margin-left: 0; } .pu-filters .pu-filters-right { justify-content: space-between; width: 100%; } .tool-card { max-width: 100%; } .pu-has-tooltip.tool-card__price-tag .pu-tooltip { left: 20%; } .tool-card__pricing-model ~ .pu-tooltip { left: 100%; } .tool-card__pricing-model ~ .pu-tooltip:after { left: 20%; } .ai-menu-cnt { width: 100%; } .ai-menu-cnt-mobile nav.ai-category-menu { overflow-x: scroll; max-width: 82vw; margin-left: 0px; } .ai-menu-cnt-mobile ul#menu-ai-category-menu { display: flex; flex-wrap: nowrap; justify-content: flex-start; } .ai-menu-cnt-mobile nav.ai-category-menu li { flex: 1 0 auto; } .ai-menu-cnt-desktop { display: none; } .ai-menu-cnt-mobile { display: block; position: relative; } .related-blog { text-align: center; } .related-blog p { font-size: 15px; } .related-blog .button { font-size: 15px; margin-top: 8px; } nav.ai-category-menu > ul { overflow: unset; } nav.ai-category-menu a { font-size: 14px; padding: 0.25em 0.75em; } .ai-menu-cnt-mobile > button { position: absolute; top: -5px; } .ai-menu-cnt-mobile > button#right-button { right: 0; } .pu-filters { margin-block: 25px; } .tools-desc { display: none; } body:not(.logged-in) .tool-card__add-to-favorite .pu-has-tooltip { align-items: center; } body:not(.logged-in) .tool-card__add-to-favorite .pu-tooltip { opacity: 0; } body:not(.logged-in) .tool-card__add-to-favorite .pu-tooltip:after { display: none; } /* a.tool-card__add-to-favorite[data-action="connect"] { width: 130px; } */ .fav_count .pu-tooltip { display: none; } .ai-price-text-value { font-size: 11px; } a.tool-card__add-to-favorite[data-action="connect"] svg { width: 30px; height: 30px; } .tool-card__categories .tool-ribbon .pu-tooltip { left: -8%; } } @media (max-width: 600px) { .tool-card { flex: 1 0 calc(100%); } } /* RECENT TOOLS PAGE */ .recent-tools-page .title { margin-bottom: 60px; } .tool-date-items { width: 100%; margin-bottom: 60px; } .tool-date-items > h2 { font-size: clamp(24px, calc(1.5rem + ((1vw - 7.68px) * 6.2257)), 40px); min-height: 0vw; color: var(--color-white); font-weight: bold; } .date-tools-count { font-size: clamp(14px, calc(0.875rem + ((1vw - 7.68px) * 2.3346)), 20px); min-height: 0vw; color: var(--color-white); margin-bottom: 2em; } @media (max-width: 767px) { .recent-tools-page .title { margin-bottom: 40px; } .tool-date-items { margin-bottom: 40px; } } /* BLOB EFFECT */ .pu-background-effect { position: fixed; width: 1000px; height: 680px; border-radius: 50%; background: radial-gradient(circle, rgba(219, 167, 70, 1) 15%, rgba(0, 0, 0, 0) 60%); /* box-shadow: 0 0 900px -11px #dba746; */ animation: rotate 10s linear infinite; z-index: -1; left: 0; bottom: 100px; opacity: 0.2; pointer-events: none; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* SINGLE POST */ body.single-post { background: #f7fafc; } body.single-post .content-bg { background-color: white; color: black; } body.single-post :where(h1, h2, h3, h4) { color: black; } body.single-post article a:not(.wp-element-button) { color: blue; text-decoration: underline; } body.single-post article a:not(.wp-element-button):hover, body.single-post article a:not(.wp-element-button):focus { color: var(--color-accent); } body.single-post article :where(.entry-meta, .entry-taxonomies) a, body.single-post article :where(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a) { text-decoration: none !important; } body.single-post .kb-table-of-contents-title, body.single-post .kb-table-of-content-nav .kb-table-of-content-wrap .kb-table-of-content-list .kb-table-of-contents__entry { color: #535353 !important; } body.single-post .kb-table-of-content-nav .kb-table-of-content-wrap .kb-table-of-content-list .kb-table-of-contents__entry { font-size: 14px; } body.single-post .kb-table-of-content-nav .kb-table-of-content-wrap .kb-table-of-content-list .active .kb-table-of-contents__entry, body.single-post .kb-table-of-content-nav .kb-table-of-content-wrap .kb-table-of-content-list .kb-table-of-contents__entry:hover, body.single-post .kb-table-of-content-nav .kb-table-of-content-wrap .kb-table-of-content-list .kb-table-of-contents__entry:focus { color: var(--color-accent) !important; } .mode-toggle { --checker-size: 25px; --toggle-width: 50px; border: 1px solid var(--color-white); border-radius: 100vw; height: calc(var(--checker-size) + 2px); font-size: 10px; font-weight: bold; text-transform: uppercase; width: var(--toggle-width); display: flex; align-items: center; justify-content: center; position: relative; padding-inline: 4px; } input#mode-toggle-checkbox { display: none; width: var(--toggle-width); height: var(--checker-size); } #mode-toggle-checkbox ~ label { padding-left: 0; white-space: nowrap; line-height: 30px; color: var(--color-white); opacity: 0; width: 50px; } .mode-toggle .checker { height: var(--checker-size); width: var(--checker-size); background-color: var(--color-white); position: absolute; border-radius: 50%; left: 0px; top: 0px; transform: 0; transition: transform 200ms ease; pointer-events: none; } #mode-toggle-checkbox:checked ~ label { /*padding-left: 0px;*/ /*padding-right: calc(var(--checker-size) + 2px);*/ } #mode-toggle-checkbox:checked ~ .checker { transform: translateX(calc(var(--toggle-width) - var(--checker-size) - 2px)); } .mode-toggle .checker:before { content: ""; background-image: url("https://powerusers.ai/wp-content/uploads/2024/08/dark-mode.png"); background-size: contain; position: absolute; width: 20px; height: 20px; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; display: block; } .mode-toggle #mode-toggle-checkbox:checked ~ .checker:before { background-image: url("https://powerusers.ai/wp-content/uploads/2024/08/light-mode.png"); } @media (max-width: 767px) { .mode-toggle { --toggle-width: 50px; } #mode-toggle-checkbox ~ label { opacity: 0; white-space: normal; } .checker { pointer-events: none; } #mode-toggle-checkbox:checked ~ label { padding-left: 0; } } /* KADENCE CSS */ .site-top-footer-inner-wrap { display: flex; justify-content: space-between; max-width: var(--content-width); margin-inline: auto; } .site-footer-top-section-4 { padding-top: 1rem; } a.social-button { width: 2em; text-decoration: none; height: 2em; display: inline-flex; justify-content: center; align-items: center; margin: 0; color: var(--color-white); background: var(--color-bg); border-radius: 3px; transition: all 0.2s ease-in-out; } .site-footer-wrap .social-button:hover { text-decoration: none; color: var(--global-palette-btn); background: var(--global-palette-btn-bg); } .site-footer .site-footer-wrap .site-footer-section .footer-social-wrap .footer-social-inner-wrap .social-button:hover { color: var(--global-palette3); } .site-footer .site-footer-wrap .site-footer-section .footer-social-wrap .footer-social-inner-wrap .social-button { color: var(--color-white); border: 2px none transparent; border-radius: 3px; } .site-footer-wrap .ft-ro-lstyle-noline a:where(:not(.button):not(.wp-block-button__link):not(.wp-element-button)) { text-decoration: none; } .site-footer-wrap .social-button { color: var(--color-white); background: var(--color-bg); } .kadence-svg-iconset { display: inline-flex; align-self: center; } .kadence-svg-iconset svg { height: 1em; width: 1em; } .element-social-inner-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3em; } .site-middle-footer-wrap, .site-bottom-footer-wrap { text-align: center; } .site-top-footer-inner-wrap.site-footer-row a:where(:not(.wp-element-button)) { color: var(--color-white); } @media (max-width: 767px) { :root { --notification-bar-height: 51px; } .site-top-footer-inner-wrap { flex-direction: column; text-align: center; } .footer-social-wrap .footer-social-inner-wrap { justify-content: center; } } /* TOP NMOTIFICATION BAR */ .mysticky-welcomebar-fixed.mysticky-welcomebar-widget-1, .mysticky-welcomebar-fixed.mysticky-welcomebar-widget-1 .mysticky-welcomebar-content p a, .mysticky-welcomebar-fixed.mysticky-welcomebar-widget-1 .mysticky-welcomebar-content p { font-family: inherit !important; } @media (max-width: 480px) { .mysticky-welcomebar-widget-2.mysticky-welcomebar-fixed.front-site .mysticky-welcomebar-fixed-wrap .mysticky-welcomebar-content { width: auto; flex: unset; } .mysticky-welcomebar-widget-2.mysticky-welcomebar-fixed.front-site .mysticky-welcomebar-fixed-wrap { flex-direction: row; gap: 10px; justify-content: space-around; } .mysticky-welcomebar-widget-2.mysticky-welcomebar-fixed.mysticky-welcomebar-btn-mobile.front-site .mysticky-welcomebar-btn { margin: 0; } .mysticky-welcomebar-widget-2.mysticky-welcomebar-fixed.mysticky-welcomebar-btn-mobile.front-site .mysticky-welcomebar-btn a { padding-inline: 10px; } }