/* Theme Name: Kadence Child Theme URI: https://EXAMPLE.co.nz Description: Child theme for Kadence - EXAMPLE.co.nz. Started from studio-wordpress/themes/kadence 1.1.0. Author: Flatout Web Design Author URI: https://flatout.co.nz Template: kadence Version: 1.1.0 */ /* * BUMP "Version" ON EVERY CHANGE. functions.php uses it as the stylesheet * cache-buster, so an unbumped edit can sit behind LiteSpeed and Cloudflare * caches and look like it did nothing. * * Colours come from the Kadence global palette (var(--global-paletteN)), never * hex, so a palette change in the Customizer carries through. Slot roles are in * the kit README. * * Kadence's dynamic CSS loads after this sheet and often out-specifies it. Where * a rule here is ignored, that is why: add !important and say so in a comment. */ /* Sticky header: soft shadow only once it is actually stuck (Kadence adds .item-is-fixed). !important because Kadence's dynamic CSS sets box-shadow on the fixed element. */ .site-header .item-is-fixed { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14) !important; } /* Smooth in-page anchor scrolling. Reduced-motion visitors keep instant jumps. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Footer: all columns start on the same top line, no stray first-child margins. */ .site-footer .site-footer-row { align-items: flex-start; } .site-footer .site-footer-section .widget, .site-footer .site-footer-section > *:first-child, .site-footer .footer-widget-area .widget-area > *:first-child { margin-top: 0; } /* ========================================================================= FLATOUT STANDARD DESIGN SYSTEM (1.1.0) Fonts are set in the Customizer (Barlow Condensed headings, Barlow body); these rules only use them through Kadence's variables. Every colour is a palette slot, so swapping the palette re-skins the site. Slot roles: 1 accent, 2 accent dark, 3 dark brand (headings, bands), 4 body text, 5 soft text, 6 muted, 7 light tint, 8 off-white, 9 white, 10 complement. Utility classes all start "fo-" and are added in the block's Advanced > Additional CSS class(es) field. NOT YET TESTED ON A SITE. ========================================================================= */ /* Headings: condensed and uppercase, as the standard look. Sizes and weights stay in the Customizer. */ h1, h2, h3, .wp-block-heading { text-transform: uppercase; line-height: 1; } /* Kicker: small spaced uppercase line above a hero or section heading. */ .fo-kicker { font-family: var(--global-body-font-family); font-size: 0.85rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--global-palette1); margin-bottom: 0.75rem; } /* Display heading: the stacked hero headline. Put each short line on its own line (Shift+Enter) wrapped in a span with fo-l1 / fo-l2 / fo-l3, or set the colours per line with the editor's highlight tool. */ .fo-display { font-family: var(--global-heading-font-family); font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 900; line-height: 0.92; text-transform: uppercase; margin: 0 0 1.25rem; } .fo-display .fo-l1 { color: var(--global-palette9); } .fo-display .fo-l2 { color: var(--global-palette6); } .fo-display .fo-l3 { color: var(--global-palette1); } /* Dark band: hero, feature rows, CTA strips. Text inside turns white. */ .fo-band { background: var(--global-palette3); color: var(--global-palette9); } .fo-band p, .fo-band h2, .fo-band h3 { color: inherit; } /* Buttons: Kadence Advanced Button and core Button. Condensed uppercase, 3px radius. !important because Kadence's dynamic button CSS loads after us. */ .kb-button, .wp-block-button__link, .wp-element-button { font-family: var(--global-heading-font-family) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.02em; border-radius: 3px !important; padding: 0.6em 1.2em; font-size: 1.25rem; } /* Ghost button: transparent with a thin border in the current text colour. On a dark band that reads as white on navy. */ .fo-ghost .kb-button, .fo-ghost .wp-block-button__link, .kb-button.fo-ghost, .wp-block-button.fo-ghost .wp-block-button__link { background: transparent !important; color: currentColor !important; border: 1px solid currentColor !important; } /* Image card: a core Cover block with class fo-image-card. Photo fills the card, label sits bottom-left in white over a dark scrim. Square corners. */ .wp-block-cover.fo-image-card { align-items: flex-end; justify-content: flex-start; min-height: 280px; border-radius: 0; padding: 1.25rem 1.5rem; } .wp-block-cover.fo-image-card .wp-block-cover__inner-container { width: auto; } .fo-image-card h2, .fo-image-card h3, .fo-image-card p { font-family: var(--global-heading-font-family); font-weight: 700; font-size: clamp(1.6rem, 2.5vw, 2.25rem); text-transform: uppercase; color: var(--global-palette9); margin: 0; } /* Icon card: white card on a dark band, icon on top, uppercase title, short text. Add fo-icon-card to the Kadence column (the UI calls it a Section). */ .fo-icon-card > .kt-inside-inner-col, .wp-block-group.fo-icon-card { background: var(--global-palette9); color: var(--global-palette4); border-radius: 6px; padding: 1.5rem 1.25rem; text-align: center; height: 100%; } .fo-icon-card h3 { color: var(--global-palette3); font-size: 1.35rem; margin: 0.75rem 0 0.5rem; } .fo-icon-card p { font-size: 0.9rem; color: var(--global-palette5); margin: 0; } /* Announcement strip: the Kadence header's top row. Short USPs, uppercase. */ .site-top-header-wrap { font-family: var(--global-body-font-family); font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } /* Forminator: one style for every form, so nothing goes in each form's own Custom CSS box. !important because Forminator's design styles are scoped with high specificity. Set each form's design style to the plainest option. */ .forminator-ui.forminator-custom-form input[type="text"], .forminator-ui.forminator-custom-form input[type="email"], .forminator-ui.forminator-custom-form input[type="tel"], .forminator-ui.forminator-custom-form input[type="number"], .forminator-ui.forminator-custom-form textarea, .forminator-ui.forminator-custom-form select { border: 1px solid var(--global-palette6) !important; border-radius: 3px !important; background: var(--global-palette9) !important; color: var(--global-palette4) !important; font-family: var(--global-body-font-family) !important; } .forminator-ui.forminator-custom-form input:focus, .forminator-ui.forminator-custom-form textarea:focus, .forminator-ui.forminator-custom-form select:focus { border-color: var(--global-palette1) !important; outline: 2px solid var(--global-palette1); outline-offset: 1px; } .forminator-ui.forminator-custom-form .forminator-label { font-family: var(--global-body-font-family) !important; font-weight: 700 !important; color: var(--global-palette3) !important; } .forminator-ui.forminator-custom-form .forminator-button-submit { background: var(--global-palette1) !important; color: var(--global-palette9) !important; font-family: var(--global-heading-font-family) !important; font-weight: 700 !important; text-transform: uppercase !important; font-size: 1.25rem !important; border-radius: 3px !important; padding: 0.6em 1.4em !important; border: 0 !important; } .forminator-ui.forminator-custom-form .forminator-button-submit:hover, .forminator-ui.forminator-custom-form .forminator-button-submit:focus { background: var(--global-palette3) !important; } /* ---- Site-specific rules below this line ---- */