/* Theme Name: Hello Elementor Child Theme URI: https://github.com/elementor/hello-theme-child/ Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team Author: Elementor Team Author URI: https://elementor.com/ Template: hello-elementor Version: 2.0.0 Text Domain: hello-elementor-child License: GNU General Public License v3 or later. License URI: https://www.gnu.org/licenses/gpl-3.0.html Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready */ /* Add your custom styles here */ /* Animation for cards in "connect" section */ .pro-card-animate { transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); overflow: hidden !important; /* We use a variable for the radius so each card can be different */ border-radius: var(--idle-radius, 64px 64px 0px 64px); } .pro-card-animate:hover { transform: scale(1.03) translateY(-5px); border-radius: var(--hover-radius, 0px 64px 64px 64px) !important; } /* Targeting the children */ .pro-card-animate .e-con, .pro-card-animate .e-con-inner, .pro-card-animate .elementor-widget-container { transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); border-radius: var(--idle-radius, 64px 64px 0px 64px); } .pro-card-animate:hover .e-con, .pro-card-animate:hover .e-con-inner, .pro-card-animate:hover .elementor-widget-container { border-radius: var(--hover-radius, 0px 64px 64px 64px) !important; transform: scale(0.95); } /* Strip any default transitions entirely so the bar cannot slide or teleport */ .nav-container, .elementor-menu, .e-n-menu-heading, .e-n-menu-title { transition: none !important; animation: none !important; } /* 1. Force Elementor's structural wrappers to allow sticky elements */ .elementor-location-header, .elementor-location-header > .elementor, .elementor-location-header .e-con, .elementor-page { overflow: visible !important; } /* ========================================================================== Blog card colour system -------------------------------------------------------------------------- One shared loop template ("Blog Card - Base", ID 22668) is used for every category. Colour is applied from the outside: each tab panel carries a .kdw-cat-- class which sets the two custom properties below, and the card inherits them. To restyle every card ....... edit the loop template. To recolour one category .... edit one line here. To add a category ........... add one block here. ========================================================================== */ /* One colour per category, used for fill, stroke and tab pill alike. */ .kdw-cat--content { --kdw-card-bg: #E8A22A; --kdw-card-fg: #053646; } .kdw-cat--wordpress { --kdw-card-bg: #0D627C; --kdw-card-fg: #FFFFFF; } .kdw-cat--channels { --kdw-card-bg: #053646; --kdw-card-fg: #FFFFFF; } .kdw-cat--optimisation { --kdw-card-bg: #D74801; --kdw-card-fg: #FFFFFF; } .kdw-cat--websites { --kdw-card-bg: #6CC1AD; --kdw-card-fg: #053646; } /* Fallbacks keep a card on-brand if it is ever used outside a .kdw-cat wrapper */ .kdw-blog-card { background-color: var(--kdw-card-bg, #0D627C); border: 3px solid var(--kdw-card-bg, #0D627C); } .kdw-blog-card .kdw-card-title .elementor-heading-title, .kdw-blog-card .kdw-card-title .elementor-heading-title a, .kdw-blog-card .kdw-card-date .elementor-heading-title, .kdw-blog-card .kdw-card-excerpt, .kdw-blog-card .kdw-card-excerpt p { color: var(--kdw-card-fg, #FFFFFF); } /* ========================================================================== Single post — category accent The body carries category- on single posts, so the same two custom properties used by the blog cards drive the eyebrow pill and the related post cards. A post in more than one category takes its first category. ========================================================================== */ /* The body gets kdw-cat-- from kdw_single_post_body_class() in functions.php, so the .kdw-cat--* rules above already apply here. Nothing category-specific needs repeating. */ /* .elementor-kit-13850 a sets the global link colour (0,1,1), which would otherwise turn the pill text amber. .kdw-cat is on the body, so this is (0,2,0) and wins cleanly - no !important needed. */ .kdw-cat .kdw-eyebrow-pill, .kdw-eyebrow-pill { display: inline-block; background: var(--kdw-card-bg, #0D627C); color: var(--kdw-card-fg, #FFFFFF); padding: 5px 16px; border-radius: 30px; font-family: Figtree, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; line-height: 1.6; transition: opacity .2s ease; } .kdw-eyebrow-pill:hover { opacity: .82; } /* ========================================================================== Button text default -------------------------------------------------------------------------- The site's global link colour would otherwise show through on buttons, so this sets white as the default. Deliberately NOT !important: Elementor writes per-widget rules at a much higher specificity (.elementor-1234 .elementor-element.elementor-element-abcd .elementor-button), so any Text Colour set in the widget wins over this. That is the point -- the old version of this rule used !important in wp_head and silently broke every button colour control on the site. ========================================================================== */ .elementor-button, .elementor-button-link { color: #FFFFFF; } /* ========================================================================== Blog card is a link The card root renders as an so the whole card is clickable. Reset the global link colour and decoration on it, or every card inherits amber text. ========================================================================== */ a.kdw-blog-card, a.kdw-blog-card:hover, a.kdw-blog-card:focus { text-decoration: none; color: inherit; } a.kdw-blog-card:focus-visible { outline: 3px solid var(--kdw-card-bg, #0D627C); outline-offset: 3px; } /* ========================================================================== Featured hero card — "read the article" arrow The whole card is the link, so this is an affordance rather than a control. The arrow nudges right on card hover to signal it is clickable. ========================================================================== */ .kdw-hero-readmore .elementor-heading-title { display: inline-flex; gap: 6px; transition: gap .25s ease; } a.kdw-blog-card:hover .kdw-hero-readmore .elementor-heading-title { gap: 14px; } @media (prefers-reduced-motion: reduce) { .kdw-hero-readmore .elementor-heading-title, a.kdw-blog-card:hover .kdw-hero-readmore .elementor-heading-title { transition: none; gap: 6px; } } /* ========================================================================== Blog post heading spacing -------------------------------------------------------------------------- Posts are written in the block editor, so there is no Elementor widget to style. Scoped to the post content widget so it cannot affect anything built in Elementor. More space above a heading than below it, so each heading groups with the text it introduces rather than floating between two blocks. ========================================================================== */ .elementor-widget-theme-post-content h2 { margin: 2.4em 0 0.6em; } .elementor-widget-theme-post-content h3 { margin: 2em 0 0.5em; } .elementor-widget-theme-post-content h4 { margin: 1.7em 0 0.45em; } .elementor-widget-theme-post-content h2:first-child, .elementor-widget-theme-post-content h3:first-child, .elementor-widget-theme-post-content h4:first-child { margin-top: 0; }