/* Theme Name: Kraken Framework Child Theme URI: https://www.splashmg.ca Description: Kraken Framework is a foundational theme designed to help create WordPress websites with a strong focus on speed, efficiency, and optimization. Author: Splash Media Group Inc. Author URI: https://www.splashmg.ca Template: kraken-framework Version: 3.4.0 License URI: https://www.gnu.org/licenses/gpl-3.0.en.html Copyright: (c) Splash Media Group Tags: blog,accessibility-ready,custom-menu,featured-images,footer-widgets,theme-options,translation-ready Text Domain: kraken-framework */ /*** ========================================================================== -------------------------------------------------------------------------- TABLE OF CONTENTS -------------------------------------------------------------------------- Breakpoints: xs: 478px sm: 767px md: 991px lg: 1280px xl: 1440px xxl: 1920px LAYERING MODEL 1.x – 4.x WordPress & project structure (resets, layout, content, components) 5.x Kraken theme overrides (shared across all Kraken builds) 6.x – 7.x Page types, CPTs, template-level tweaks 8.x – 9.x Motion & 3rd-party integrations 10.x Client-specific overrides (do not upstream to Kraken) 11.x Web font declarations ┌───────────────────────────────┐ │ 1.0 FOUNDATIONS │ │ 1.1 Reset / Normalize │ │ 1.2 Global Variables │ │ 1.3 Typography Scale │ │ 1.4 Body Defaults │ │ 1.5 Links & Buttons (Base) │ │ 1.5.1 Links │ │ 1.5.2 Buttons │ │ 1.6 Spacing Helpers │ │ 1.7 Utilities │ └───────────────────────────────┘ ┌───────────────────────────────┐ │ 2.0 LAYOUT │ │ 2.1 Grid / Flex System │ │ 2.2 Site Structure │ │ 2.3 Notice Bar │ │ 2.4 Header │ │ 2.5 Navigation │ │ 2.6 Hero Sections │ │ 2.7 Page Title │ │ 2.8 Footer │ │ 2.9 Sidebar / Asides │ │ 2.10 Layout Utilities │ └───────────────────────────────┘ ┌───────────────────────────────┐ │ 3.0 CONTENT │ │ 3.1 Typography │ │ 3.1.1 Base Typography │ │ 3.1.2 WP Editor Sizes │ │ 3.2 Media │ │ 3.3 Tables │ │ 3.4 WordPress Core Classes │ │ 3.5 Core Block Overrides │ │ 3.6 Custom Blocks │ └───────────────────────────────┘ ┌───────────────────────────────┐ │ 4.0 COMPONENTS │ │ 4.1 Buttons │ │ 4.2 CTAs │ │ 4.3 Forms / Inputs │ │ 4.4 Cards / Panels │ │ 4.5 Modals / Lightbox │ │ 4.6 Sliders / Carousels │ │ 4.7 Accordions / Tabs │ │ 4.8 Social Icons │ └───────────────────────────────┘ ┌───────────────────────────────┐ │ 5.0 KRAKEN THEME OVERRIDES │ │ 5.1 Kraken Header │ │ 5.2 Kraken Notice Bar │ │ 5.3 Kraken Navigation │ │ 5.4 Kraken Main │ │ 5.5 Kraken Footer │ │ 5.6 Kraken Components │ │ 5.7 Blog / Posts │ │ 5.8 Kraken Elements │ └───────────────────────────────┘ ┌───────────────────────────────┐ │ 6.0 CUSTOM POST TYPES (CPTs) │ └───────────────────────────────┘ ┌───────────────────────────────┐ │ 7.0 PAGE / TEMPLATE SPECIFIC │ └───────────────────────────────┘ ┌───────────────────────────────┐ │ 8.0 ANIMATIONS │ └───────────────────────────────┘ ┌───────────────────────────────┐ │ 9.0 3RD-PARTY PLUGINS │ └───────────────────────────────┘ ┌───────────────────────────────┐ │ 10.0 CUSTOM │ └───────────────────────────────┘ ┌───────────────────────────────┐ │ 11.0 WEB FONTS │ └───────────────────────────────┘ ========================================================================== ***/ /* ========================================================================== 1.0 FOUNDATIONS Core building blocks: global settings, resets, and helpers. ========================================================================== */ /* 1.1 RESET / NORMALIZE Kraken handles global reset, box-sizing, accessibility fixes. -------------------------------------------------------------------------- */ /* 1.2 GLOBAL VARIABLES Site-wide palette, spacing scale, and reference breakpoints. Values and defaults are defined upstream in Kraken / theme options. -------------------------------------------------------------------------- */ /* 1.3 TYPOGRAPHY SCALE WordPress editor font sizes, and their matching line-height rhythm. -------------------------------------------------------------------------- */ :root { --font-size-small: clamp(.875rem, .2083vw + .8333rem, 1rem) !important; --font-size-medium: clamp(1.125rem, .2083vw + 1.0833rem, 1.25rem) !important; --font-size-large: clamp(1.5rem, .8333vw + 1.3333rem, 2rem) !important; --font-size-x-large: clamp(2.25rem, .4167vw + 2.1667rem, 2.5rem) !important; --lh-small: 1.3; --lh-medium: 1.3; --lh-large: 1.3; --lh-x-large: 1.1; } /* 1.4 BODY DEFAULTS Global html/body typography inherits from Kraken theme. -------------------------------------------------------------------------- */ body { /* font-family: ; Determined by Kraken theme */ /* font-size: ; Determined by Kraken theme */ /* line-height: ; Determined by Kraken theme */ font-weight: 400; /* color: ; Determined by Kraken theme */ /* background-color: ; Determined by Kraken theme */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.page-id-9 { background: #F7EFE1; background: linear-gradient(180deg,rgba(247, 239, 225, 1) 0%, rgba(255, 255, 255, 1) 50%); } body:not(.home) { background-image: url('https://www.chvc.ca/wp-content/uploads/2025/12/watermark-and-prints-bg.webp'); background-repeat: no-repeat; background-position: top right; background-size: 100% auto; } /* 1.5 LINKS & BUTTONS (BASE) Global and button-like defaults before component-specific styling. -------------------------------------------------------------------------- */ /* 1.5.1 LINKS Basic link styles for inline anchors. -------------------------------------------------------------------------- */ a { text-decoration: none; cursor: pointer; transition: color 0.2s ease, text-decoration-color 0.2s ease; } a:hover, a:focus { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; } /* 1.5.2 BUTTONS Structural baseline for clickable elements (.wp-block-button__link, etc.). Visual skins belong in 4.1 BUTTONS. -------------------------------------------------------------------------- */ button, input[type="button"], input[type="submit"], input[type="reset"], .wp-element-button, .wp-block-button__link { display: inline-block; appearance: none; border: none; border-radius: 5px; background: var(--kraken-framework-accent-color); color: #ffffff; font-family: "Quicksand", sans-serif; font-weight: 700; line-height: inherit; text-align: center; text-decoration: none; padding: 8px 20px; margin: 0; cursor: pointer; transition: all 0.2s ease; } button:focus-visible, input[type="button"]:focus-visible, input[type="submit"]:focus-visible, input[type="reset"]:focus-visible, .wp-element-button:focus-visible, .wp-block-button__link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } button::-moz-focus-inner { border: 0; padding: 0; } .wp-block-button__link:hover { background-color: var(--kraken-framework-accent-alt-color); color: #ffffff; text-decoration: none; } /* For White Buttons */ .btn-white .wp-block-button__link { background-color: #ffffff; color: #000000; } .btn-white .wp-block-button__link:hover { background-color: var(--kraken-framework-accent-alt-color); color: #000000; text-decoration: none; } @media only screen and (max-width: 768px) { .page-id-90 .wp-block-buttons.is-content-justification-left { justify-content: center !important; } } /* 1.6 SPACING HELPERS Global layout spacing helpers synced with Kraken framework. -------------------------------------------------------------------------- */ :root { --global-content-edge-padding: var(--kraken-framework-site-padding-left); } .has-global-padding { padding-right: var(--kraken-framework-site-padding-right); padding-left: var(--kraken-framework-site-padding-left); } @media only screen and (max-width: 767px) { :root { --kraken-framework-site-padding-right: 2rem !important; --kraken-framework-site-padding-left: 2rem !important; } } /* 1.7 UTILITIES Small helper classes (e.g. screen reader only). -------------------------------------------------------------------------- */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ========================================================================== 2.0 LAYOUT Page structure: containers, wrappers, and structural regions. ========================================================================== */ /* 2.1 GRID / FLEX SYSTEM Grid, row/column behavior, responsive stacking rules. -------------------------------------------------------------------------- */ /* 2.2 SITE STRUCTURE Main wrappers, global container widths, interior gutters. -------------------------------------------------------------------------- */ /* 2.3 NOTICE BAR Site-wide alert/announcement strip (often above the header). -------------------------------------------------------------------------- */ /* 2.4 HEADER Global site header (logo area, top utility bar, etc.). -------------------------------------------------------------------------- */ /* 2.5 NAVIGATION Primary nav, secondary nav, menu item spacing and states. -------------------------------------------------------------------------- */ /* 2.6 HERO SECTIONS Large top-of-page hero/intro sections. -------------------------------------------------------------------------- */ .fit-container { width: 100%; display: block; max-width: 600px; } .fit-text {white-space: nowrap;} /* 2.7 PAGE TITLE Standalone page/post title areas (when not using a hero). -------------------------------------------------------------------------- */ /* 2.8 FOOTER Footer rows, columns, legal strip, and background treatments. -------------------------------------------------------------------------- */ .phone-code { font-family: "PT Sans", sans-serif !important; font-size: 1.6rem !important; } .kraken-footer { --kraken-framework-footer-color: #ffffff; .kraken-footer__heading { font-family: "Quicksand", sans-serif; font-size: 1.2rem; } .kraken-footer__col--03 .kraken-list .kraken-list__item:first-of-type { display: flex; flex-direction: row; font-size: 1.4rem; .kraken-phone-number__link { font-size: 1.6rem; padding-right: 3px; } } .kraken-list { margin-top: 1.25rem; } .kraken-phone-number { --kraken-framework-phone-number-color: #ffffff; } .kraken-footer__row--bottom { border-top: 1px solid #747474; padding-top: 1.5rem; padding-bottom: 1.5rem; } } @media only screen and (max-width: 992px) { .kraken-logo--footer {margin: 0 auto;} .list-item__lg-phone { justify-content: center; align-items: center; } } @media (min-width: 991px) and (max-width: 1165px) { .kraken-footer__col--03 .kraken-list .kraken-list__item:first-of-type { .kraken-phone-number__link { font-size: 1.2rem !important; } } .phone-code { font-size: 1.2rem !important; } } /* 2.9 SIDEBAR / ASIDES Side rails and widget areas alongside main content. -------------------------------------------------------------------------- */ /* 2.10 LAYOUT UTILITIES Layout modifiers and breakout helpers. -------------------------------------------------------------------------- */ /* ========================================================================== 3.0 CONTENT Rich content styling inside
, posts, and WYSIWYG areas. ========================================================================== */ /* Kraken Teams Plugin */ .kt-team-link { font-weight: 700; text-transform: uppercase; border-radius: 5px !important; } /* Squished Border sections - On Home page and Wright Loss Suppoet page */ .squished-border-section, .squished-border-section-weight { position: relative; } /* Home page */ .squished-border-section:after { content: " "; position: absolute; /* top: -25%; */ top: -20%; right: -20%; /* width: 81%; */ width: 65%; /* height: 140%; */ height: 130%; background-image: url("https://www.chvc.ca/wp-content/uploads/2026/02/dog-with-glasses-cutout.webp"); background-size: contain; background-position: center center; background-repeat: no-repeat; } /* Weight Loss Support page */ .squished-border-section-weight:after { content: " "; position: absolute; top: -25%; right: -18%; width: 75%; height: 150%; background-image: url("https://www.chvc.ca/wp-content/uploads/2026/01/english-bulldog.webp"); background-size: contain; background-position: center center; background-repeat: no-repeat; } @media only screen and (max-width: 478px) { .squished-border-section:after { width: 58% !important; } } @media only screen and (max-width: 768px) { .squished-border-section-content .kt-inside-inner-col { min-height: 650px !important; background-image: none !important; } .squished-border-section:after { /* top: 20% !important; right: -15%; width: 100% !important; */ top: 58% !important; right: -5%; height: 63%; } .home .kraken-entry__content {overflow: hidden !important;} .squished-border-section-weight:after { right: -23% !important; top: 0%; width: 138%; } } @media screen and (min-width: 768px) and (max-width: 850px) { .squished-border-section:after { top: -16 !important; right: -44% !important; width: 100% !important; } } @media only screen and (max-width: 1024px) { .squished-border-section-weight:after { right: -22%; } } /* 3.1 TYPOGRAPHY Base heading, paragraph, and emphasis styles. -------------------------------------------------------------------------- */ h1, .h1 { --kraken-framework-h1-margin: 1.5rem 0; --kraken-framework-h1-font-color: var(--kraken-framework-strong-text-color); --kraken-framework-h1-font-family: var(--kraken-framework-primary-font-family); --kraken-framework-h1-font-size: clamp(2.3rem, 2.8333vw + 1.7333rem, 4rem); --kraken-framework-h1-font-line-height: 1.1; --kraken-framework-h1-font-weight: normal; } h2, .h2 { --kraken-framework-h2-margin: 2rem 0 0.5rem 0; --kraken-framework-h2-font-color: var(--kraken-framework-strong-text-color); --kraken-framework-h2-font-family: var(--kraken-framework-primary-font-family); --kraken-framework-h2-font-size: clamp(2rem, .6667vw + 1.4667rem, 2.2rem); --kraken-framework-h2-font-line-height: 1.1; --kraken-framework-h2-font-weight: 500; } h3, .h3 { --kraken-framework-h3-margin: 1.5rem 0 0 0; --kraken-framework-h3-font-color: var(--kraken-framework-strong-text-color); --kraken-framework-h3-font-family: var(--kraken-framework-primary-font-family); --kraken-framework-h3-font-size: clamp(1.8rem, .6667vw + 1.2667rem, 2rem); --kraken-framework-h3-font-line-height: 1.3; --kraken-framework-h3-font-weight: 500; } h4, .h4 { --kraken-framework-h4-margin: 1.5rem 0; --kraken-framework-h4-font-color: var(--kraken-framework-strong-text-color); --kraken-framework-h4-font-family: var(--kraken-framework-primary-font-family); --kraken-framework-h4-font-size: 1rem; --kraken-framework-h4-font-line-height: 1.3; --kraken-framework-h4-font-weight: normal; } h5, .h5 { --kraken-framework-h5-margin: 1.5rem 0; --kraken-framework-h5-font-color: var(--kraken-framework-strong-text-color); --kraken-framework-h5-font-family: var(--kraken-framework-primary-font-family); --kraken-framework-h5-font-size: 1rem; --kraken-framework-h5-font-line-height: 1.3; --kraken-framework-h5-font-weight: normal; } h6, .h6 { --kraken-framework-h6-margin: 1.5rem 0; --kraken-framework-h6-font-color: var(--kraken-framework-strong-text-color); --kraken-framework-h6-font-family: var(--kraken-framework-primary-font-family); --kraken-framework-h6-font-size: 1rem; --kraken-framework-h6-font-line-height: 1.3; --kraken-framework-h6-font-weight: normal; } strong, .strong { font-weight: 800; } p { margin-block: 1.5rem; } /* Combo styling */ /* h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {margin-top:-1.25rem;} */ /* h2 + ul, h3 + ul, h4 + ul, h5 + ul, h6 + ul {margin-top:-1.25rem;} */ /* h2 + ol, h3 + ol, h4 + ol, h5 + ol, h6 + ol {margin-top:-1.25rem;} */ /* p, ul, ol, pre, table, blockquote {margin: 1rem 0;} */ /* p + h2 {padding-top: 1.5rem;} */ /* p + h3 {padding-top: .5rem;} */ /* ul + h2, ul + h3, ul + h4, ul + h5, ul + h6 {margin-top: 3rem;} */ /* 3.1.2 WP EDITOR SIZES Matches Gutenberg’s .has-small-font-size, etc., to Kraken scale tokens. -------------------------------------------------------------------------- */ .has-small-font-size { font-size: var(--font-size-small) !important; line-height: var(--lh-small) !important; } .has-medium-font-size { font-size: var(--font-size-medium) !important; line-height: var(--lh-medium) !important; } .has-large-font-size { font-size: var(--font-size-large) !important; line-height: var(--lh-large) !important; } .has-x-large-font-size { /* font-size: var(--font-size-x-large) !important; */ font-size: clamp(2.2rem, 1vw + 2rem, 2.8rem) !important; line-height: var(--lh-x-large) !important; margin: 0; } /* 3.2 MEDIA Image, video, figure, responsive media inside content areas. -------------------------------------------------------------------------- */ .block img { display: block; } .kraken-entry__content {padding-bottom: 0;} /* For Circle Image Animation */ .circle-photo img { width: 75%; height: auto; border-radius: 50%; /* makes it a circle */ opacity: 0; transform: scale(0.4); transition: opacity 1.2s ease-out, transform 1.2s ease-out; object-fit: cover; } /* When scrolled into view */ .circle-photo.in-view img { opacity: 1; transform: scale(1); } @media (max-width: 1280px) { .circle-photo img { width: 90% !important; } } /* 3.3 TABLES Table layout, scroll wrappers for mobile, header cells, etc. -------------------------------------------------------------------------- */ /* 3.4 WORDPRESS CORE CLASSES Classes like .alignwide, .alignfull, captions, galleries, etc. -------------------------------------------------------------------------- */ /* 3.5 CORE BLOCK OVERRIDES Global tweaks to core Gutenberg blocks (image block, buttons, quotes). -------------------------------------------------------------------------- */ .wp-block-image { margin: 0; } /* 3.6 CUSTOM BLOCKS Project-specific ACF blocks / custom blocks registered in Kraken builds. -------------------------------------------------------------------------- */ @media only screen and (max-width: 1330px) { .ferret .kt-inside-inner-col { background-position: 50% 10% !important; } } @media only screen and (max-width: 768px) { .ferret .kt-inside-inner-col { background-position: 60% 2% !important; } .fluffy-kitty .kt-inside-inner-col { background-position: 100% 60% !important; background-size: auto 113% !important; } } /* MEDIA ELEMENTS - 2.3.6 - STICKY SCROLL IMAGES */ .stick-scroll-section { display:flex; justify-content:center; padding:0 3rem; .stick-scroll-section__inner { width:100%; max-width:1600px; display:flex; min-height:100vh; .sticky-scroll-left-col { width:45%; box-sizing:border-box; display: flex; flex-direction: column; padding: 2rem 0; max-width: 550px; .sticky-section-content { height: 100vh; display: flex; flex-direction: column; justify-content: center; /* h2 { font-size: clamp(3rem, 1.6667vw + 2.6667rem, 4rem); margin-bottom:.75rem; line-height: 1.2; } */ /* p {margin: 0.6rem 0;} */ } } .sticky-scroll-right-col { width:55%; position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; padding-right: 75px; .sticky-image-container { width:100%; aspect-ratio:1/1; border-radius:14px; overflow:hidden; position:relative; img { position:absolute; inset:0; width:100%; height:100%; object-fit: contain; opacity:0; transition: opacity 2s ease; will-change: opacity; display: block; } img.active {opacity: 1;} } } } } /* Sticky Scroll Images - Media Queries */ @media only screen and (max-width: 991px) { .stick-scroll-section {padding:0 2rem;} .sticky-image-container {width:100%;} } /* .page-id-46 .kraken-content, .page-id-46 .kraken-main__inner { overflow: unset; } */ .page-id-9 .kraken-content, .page-id-9 .kraken-main__inner { overflow: unset; } /* END STICKY SCROLL IMAGES */ /* ========================================================================== 4.0 COMPONENTS Standalone UI pieces (cards, CTAs, accordions, etc.). These can appear anywhere (header, main, footer, etc.). ========================================================================== */ /* 4.1 BUTTONS Reusable button component classes (primary, secondary, ghost, etc.). -------------------------------------------------------------------------- */ /* 4.2 CTAs Marketing callouts, banners, promo strips, lead-gen modules. -------------------------------------------------------------------------- */ .paw-print-cta { position: relative; overflow: hidden; padding-top: 150px; .paw-prints { max-width: none; position: absolute; top: 0; left: 0; } } @media only screen and (max-width: 767px) { .ferret .kt-inside-inner-col {background-size: 100% auto !important;} } @media screen and (min-width: 991px) and (max-width: 1280px) { .paw-print-cta {padding-top: 200px !important;} } @media only screen and (min-width: 1280px) { .paw-print-cta {padding-top: 250px !important;} } /* New CTA Styles - Delete styles associated with .paw-print-cta once approved and launched */ .contact-cta { position: relative; overflow: hidden; .paw-prints { max-width: none; position: absolute; top: 0; left: 0; min-width: 100%; } } /* @media screen and (min-width: 991px) and (max-width: 1280px) { .contact-cta {padding-top: 200px !important;} } */ /* @media only screen and (min-width: 1280px) { .contact-cta {padding-top: 250px !important;} } */ /* 4.3 FORMS / INPUTS Input fields, labels, validation states, layout for form groups. -------------------------------------------------------------------------- */ /* 4.4 CARDS / PANELS Card shells, feature panels, testimonial boxes, etc. -------------------------------------------------------------------------- */ /* 4.5 MODALS / LIGHTBOX Overlay containers, dialog chrome, close button, backdrop. -------------------------------------------------------------------------- */ /* 4.6 SLIDERS / CAROUSELS Slider frame, nav arrows, paging dots. -------------------------------------------------------------------------- */ /* 4.7 ACCORDIONS / TABS Disclosure widgets, FAQ accordions, tab navigation. -------------------------------------------------------------------------- */ /* 4.8 SOCIAL ICONS Inline lists of social icons / social links. -------------------------------------------------------------------------- */ /* ========================================================================== 5.0 KRAKEN THEME OVERRIDES Adjustments and extensions to Kraken’s base header, notice bar, navigation, main content wrappers, footer, reusable components, blog/post layouts, and globally hooked elements. These are “house defaults” we tend to apply across many Kraken projects, not just one client. ========================================================================== */ /* 5.1 Kraken Header Logo wrapper, utility region, and top bar overrides. -------------------------------------------------------------------------- */ .kraken-header { transition: background-color 0.5s ease; /* border-top: 10px solid var(--kraken-framework-accent-alt-color); */ box-shadow: inset 0 10px 0 var(--kraken-framework-accent-alt-color); /* Standard Header */ --kraken-framework-header-row-height-top: 0; --kraken-framework-header-row-padding-main: 0rem var(--kraken-framework-site-padding-right) 0rem var(--kraken-framework-site-padding-left); --kraken-framework-header-row-height-main: 100px; /* Shrink Header */ --kraken-framework-header-row-shrink-height-top: 0; --kraken-framework-header-transparent-shrink-main-background: #f7efe1; --kraken-framework-header-default-transparent-background: transparent; --kraken-framework-header-max-width-inner: 1700px; /* Mobile Header */ --kraken-framework-header-default-mobile-background: transparent; --kraken-framework-header-row-padding-mobile: 1rem 1rem 0.5rem 1rem; .kraken-header-notice { --kraken-framework-header-notice-background-color: var(--kraken-framework-accent-alt-color); --kraken-framework-header-notice-font-color: #ffffff; --kraken-framework-header-notice-font-weight: 600; .kraken-header-notice__text a { padding: 3px 15px; background-color: #ffffff; border-radius: 3px; margin-left: 15px; color: var(--kraken-framework-accent-alt-color); } } .kraken-header__col--start {flex-grow: 3;} .kraken-header__col--end {flex-grow: 2;} } .is-scrolling .kraken-header {background-color: #f7efe1;} .kraken-header__inner--desktop { display: none; visibility: hidden; } .kraken-header__inner--mobile { display: block; visibility: visible; } @media only screen and (min-width: 1360px) { .kraken-header__inner--desktop { display: block; visibility: visible; } .kraken-header__inner--mobile { display: none; visibility: hidden; } } /* 5.2 Kraken Notice Bar Shared site-wide banner above header (promo or alert). -------------------------------------------------------------------------- */ /* 5.3 Kraken Navigation Primary / secondary menus and mobile nav behaviors. -------------------------------------------------------------------------- */ .is-scrolling .body--transparent .kraken-navigation--primary { --kraken-framework-nav-sub-background-color: #f9f8f4; --kraken-framework-nav-sub-link-background-color: #f9f8f4; --kraken-framework-nav-sub-link-background-hover-color: #f7efe1; --kraken-framework-nav-sub-link-background-active-color: #f7efe1; --kraken-framework-nav-sub-link-background-focus-color: #f7efe1; } .kraken-navigation { --kraken-framework-default-desktop-nav-padding: 0.6rem 0.8rem; --kraken-framework-default-desktop-sub-nav-padding: 0.6rem 0.8rem; /* Primary Navigation Styles */ &.kraken-navigation--primary { --kraken-framework-nav-sub-background-color: #f9f8f4; --kraken-framework-nav-sub-link-background-color: #f9f8f4; --kraken-framework-nav-sub-link-background-hover-color: #f7efe1; --kraken-framework-nav-sub-link-background-active-color: #f7efe1; --kraken-framework-nav-sub-link-background-focus-color: #f7efe1; /* --kraken-framework-nav-link-justify: center; */ margin-left: 25px; height: 100%; .kraken-navigation__list--primary { height: 100%; /* min-width: 675px; for custom Nav */ /*gap: 0; for custom nav */ /* .menu-item a { height: 100%; padding: 0 0.5rem; } */ } } /* Extra 01 Navigation Styles */ &.kraken-navigation--extra-01 { --kraken-framework-nav-link-font-color: #ffffff; --kraken-framework-nav-link-font-weight: 500; --kraken-framework-nav-link-padding: 0.5rem 0; margin-top: 1.25rem; } /* Extra 01 Navigation Styles */ &.kraken-navigation--legal { --kraken-framework-nav-link-font-color: #ffffff; } &.kraken-navigation--secondary { a {text-transform: uppercase;} .nav-call { background-color: var(--kraken-framework-accent-color); border-radius: 5px; a {color: #ffffff;} a::before { content: ""; width: 17px; height: 17px; background-image: url("https://www.chvc.ca/wp-content/uploads/2025/11/ph-phone-bold.svg"); background-repeat: no-repeat; background-size: contain; background-position: center center; margin-right: 3px; } } .nav-emerg { background-color: var(--kraken-framework-accent-alt-color); border-radius: 5px; a {color: #ffffff;} } } &.kraken-navigation--mobile { --kraken-framework-nav-drawer-background-color: #f9f8f4; --kraken-framework-nav-drawer-padding: 0; --kraken-framework-default-mobile-nav-padding: 1rem; --kraken-framework-nav-link-background-color: transparent; --kraken-framework-nav-link-background-hover-color: transparent; --kraken-framework-nav-link-background-active-color: transparent; --kraken-framework-nav-link-background-focus-color: transparent; --kraken-framework-nav-sub-link-background-color: transparent; --kraken-framework-nav-sub-link-background-hover-color: transparent; --kraken-framework-nav-sub-link-background-active-color: transparent; --kraken-framework-nav-sub-link-background-focus-color: transparent; --kraken-framework-nav-sub-background-color: transparent; --kraken-framework-nav-drawer-width: 50%; .nav-emerg a { background-color: var(--kraken-framework-accent-alt-color); color: #ffffff; margin: 0.25rem; border-radius: 3px; } .nav-emerg a:hover, .nav-emerg a:active, .nav-emerg a:focus { background-color: #b9261b; color: #ffffff; } .nav-call a { background-color: var(--kraken-framework-accent-color); color: #ffffff; margin: 0.25rem; border-radius: 3px; } .nav-call a:hover, .nav-call a:active, .nav-call a:focus { background-color: #946e3d; color: #ffffff; } .kraken-navigation__drawer-inner { background-image: url('https://www.chvc.ca/wp-content/uploads/2025/12/chvc-mobile-nav-watermark.webp'); background-repeat: no-repeat; background-position: bottom right; background-size: contain; } } } #kraken-navigation-primary li.menu-item:hover { background-image: url("https://www.chvc.ca/wp-content/uploads/2026/01/nav-arrow.png"); background-size: auto; background-repeat: no-repeat; background-position: 50% -5%; } @media only screen and (max-width: 768px) { .kraken-navigation__drawer-inner {width: 300px !important;} } .kraken-navigation__list--primary > .menu-item { /* width: 20%; for custom Nav */ a { height: 100%; padding: 0 0.5rem; /* justify-content: center; for custom Nav */ } } /* Custom Navigation Styling */ /* Fixed Width Navigation */ .kraken-navigation__list--primary {min-width: 675px;} /* Main Nav Items - 5 items = 20% width each */ /* .kraken-navigation__list--primary > .menu-item {width: 20%;} */ /* Indicator styling */ /* .kraken-navigation__list--primary { position: relative; z-index: 0; } */ /* .kraken-navigation__list--primary > .menu-item:last-child:before { content: ''; display: block; position: absolute; pointer-events: none; transition: left 1.3s ease; } */ /* Indicator Triangle */ /* .kraken-navigation__list--primary > .menu-item:last-child:before { border: 6px solid transparent; border-top-color: #e82d00; width: 0; height: 0; top: 0; left: 10%; margin-left: -3px; } */ /* Active state indicator alignment */ /* .kraken-navigation__list--primary > .menu-item:nth-child(1).is-active ~ .kraken-navigation__list--primary > .menu-item:last-child:after {left: 0%;} .kraken-navigation__list--primary > .menu-item:nth-child(2).is-active ~ .kraken-navigation__list--primary > .menu-item:last-child:after {left: 20%;} .kraken-navigation__list--primary > .menu-item:nth-child(3).is-active ~ .kraken-navigation__list--primary > .menu-item:last-child:after {left: 40%;} .kraken-navigation__list--primary > .menu-item:nth-child(4).is-active ~ .kraken-navigation__list--primary > .menu-item:last-child:after {left: 60%;} .kraken-navigation__list--primary > .menu-item:nth-child(1).is-active ~ .kraken-navigation__list--primary > .menu-item:last-child:before {left: 10%;} .kraken-navigation__list--primary > .menu-item:nth-child(2).is-active ~ .kraken-navigation__list--primary > .menu-item:last-child:before {left: 30%;} .kraken-navigation__list--primary > .menu-item:nth-child(3).is-active ~ .kraken-navigation__list--primary > .menu-item:last-child:before {left: 50%;} .kraken-navigation__list--primary > .menu-item:nth-child(4).is-active ~ .kraken-navigation__list--primary > .menu-item:last-child:before {left: 70%;} */ /* Hover-state indicator movement */ /* .kraken-navigation__list--primary > .menu-item:nth-child(1):hover ~ .kraken-navigation__list--primary > .menu-item:last-child:after {left: 0% !important;} .kraken-navigation__list--primary > .menu-item:nth-child(2):hover ~ .kraken-navigation__list--primary > .menu-item:last-child:after {left: 20% !important;} .kraken-navigation__list--primary > .menu-item:nth-child(3):hover ~ .kraken-navigation__list--primary > .menu-item:last-child:after {left: 40% !important;} .kraken-navigation__list--primary > .menu-item:nth-child(4):hover ~ .kraken-navigation__list--primary > .menu-item:last-child:after {left: 60% !important;} .kraken-navigation__list--primary > .menu-item:nth-child(1):hover ~ .kraken-navigation__list--primary > .menu-item:last-child:before {left: 10% !important;} .kraken-navigation__list--primary > .menu-item:nth-child(2):hover ~ .kraken-navigation__list--primary > .menu-item:last-child:before {left: 30% !important;} .kraken-navigation__list--primary > .menu-item:nth-child(3):hover ~ .kraken-navigation__list--primary > .menu-item:last-child:before {left: 50% !important;} .kraken-navigation__list--primary > .menu-item:nth-child(4):hover ~ .kraken-navigation__list--primary > .menu-item:last-child:before {left: 70% !important;} */ /* Last-child hover or active states */ /* .kraken-navigation__list--primary > .menu-item:last-child:hover:before, .kraken-navigation__list--primary > .menu-item:last-child.is-active:before {left: 90% !important;} .kraken-navigation__list--primary > .menu-item:last-child:hover:after, .kraken-navigation__list--primary > .menu-item:last-child.is-active:after {left: 80% !important;} */ /* END of Custom Navigation Styling */ /* 5.4 Kraken Main Main content area defaults, wrappers, and spacing logic. -------------------------------------------------------------------------- */ /* 5.5 Kraken Footer Global footer layout and copyright region. -------------------------------------------------------------------------- */ /* 5.6 Kraken Components Styling for components within Kraken (address, email, breadcrumbs, etc.). -------------------------------------------------------------------------- */ /* 5.7 Blog / Posts Blog loop styling, post cards, meta, and single post layout. -------------------------------------------------------------------------- */ /* 5.8 Kraken Elements Styles for reusable "elements" registered within Kraken and inserted via hooks. -------------------------------------------------------------------------- */ /* ========================================================================== 6.0 CUSTOM POST TYPES (CPTs) Layout and visual rules for CPT archives and single templates. ========================================================================== */ /* ========================================================================== 7.0 PAGE / TEMPLATE SPECIFIC Page-level template overrides (home, contact, landing, etc.). ========================================================================== */ /* ========================================================================== 8.0 ANIMATIONS Keyframes, transitions, and motion presets for reusable use. ========================================================================== */ /* ========================================================================== 9.0 3RD-PARTY PLUGINS Overrides and integrations for plugins/blocks (e.g. Kadence, Gravity Forms). ========================================================================== */ /*---------------- Kadence Blocks ------------------*/ /* Kadence Row Block */ /* Breakout Helpers: Custom breakout column adjustment for Kadence two-column layouts. Adds optional "breakout-left" and "breakout-right" classes to bleed columns toward the viewport edge on larger screens. -------------------------------------------------------------------------- */ /* This makes Kadence Blocks work with our Kraken site's L&R padding */ :root { --global-content-edge-padding: var(--kraken-framework-site-padding-left); /* Kadence Edge Padding: (Kraken L/R padding) */ --global-vw: calc(100vw - (0.5 * var(--scrollbar-offset))); } /* Custom breakout column adjustment for Kadence two-column layouts */ @media (min-width: 1025px) and (max-width: 1440px) { .kb-row-layout-wrap.custom-breakout-left > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(1) { margin-inline-start: calc((((var(--global-vw, 100vw) -(var(--kraken-framework-max-width) - (0px * 2))) / 2)* -1) + -1px); } } @media (min-width: 1025px) and (max-width: 1440px) { .kb-row-layout-wrap.custom-breakout-right > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(2) { margin-inline-end: calc((((var(--global-vw, 100vw) -(var(--kraken-framework-max-width) - (0px * 2))) / 2)* -1) + -1px); } } /* Fallback note: Below 1024px (tablet & mobile), Kadence columns automatically stack vertically, so no breakout styling is applied — content safely reverts to standard padding. -------------------------------------------------------------------------- */ /*---------------- Gravity Forms ------------------*/ .gform-theme--framework { &.gform_wrapper { .gfield_label { /* color: #fff; */ font-size: 1.125rem; font-weight: 700; } } } #gform_submit_button_1 { background-color: transparent; border: 2px solid var(--kraken-framework-accent-color); font-size: .875rem; font-weight: 700; color: var(--kraken-framework-accent-color); padding: 0.6rem 0.8rem; border-radius: 3px; margin-top: 25px; } #gform_submit_button_1:hover { background-color: var(--kraken-framework-accent-color); border: 2px solid var(--kraken-framework-accent-color); color: #fff; } /* ========================================================================== 10.0 CUSTOM Project-specific overrides or temporary, site-unique rules. These should NOT be copied to other Kraken builds. ========================================================================== */ /* ========================================================================== 11.0 WEB FONTS @font-face declarations and font loading strategies. (Font utility classes intentionally omitted in this build.) ========================================================================== */ /* @font-face { font-family: "JuanaRegular"; src: url("../fonts/JuanaRegular.woff2") format("woff2"); font-display: swap; } */