/* 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 Break Points: xs: 478px sm: 767px md: 991px lg: 1280px xl: 1440px xxl: 1920px ┌───────────────────────────────┐ │ 1.0 FOUNDATIONS │ │ ┌────────────────────────────┐ │ │ | Purpose: Global tokens, | │ │ | resets, typography, and | │ │ | helper classes. | │ │ └────────────────────────────┘ │ │ 1.3 Typography Scale │ (font sizing tokens & rhythm system) │ 1.3.1 Fluid Font Variables │ (tokens like --font-size-sm, --font-size-lg) │ 1.3.2 Line-Height & Spacing │ (global rhythm: line-heights, paragraph spacing) │ 1.4 Body │ (html, body defaults, base font-family/weight) │ 1.5 Links & Buttons (Base) │ (global styles, default button resets, hover/focus) │ 1.5.1 Links │ (tokens like --font-size-sm, --font-size-lg) │ 1.5.2 Buttons │ (global rhythm: line-heights, paragraph spacing) │ 1.6 Spacing │ (global padding/margin tokens & helpers) │ 1.7 Utilities │ (helper classes for display, spacing, text, visibility) └───────────────────────────────┘ ┌───────────────────────────────┐ │ 2.0 LAYOUT │ │ ┌────────────────────────────┐ │ │ | Purpose: Page structure & | │ │ | positioning, site frame. | │ │ └────────────────────────────┘ │ │ 2.4 Header │ (site header container) │ 2.5 Navigation │ (primary, secondary menus, link states, hover) │ 2.8 Footer │ (footer layout & structure) └───────────────────────────────┘ ┌───────────────────────────────┐ │ 3.0 CONTENT │ │ ┌────────────────────────────┐ │ │ | Purpose: Post/page content | │ │ | styling inside
. | │ │ └────────────────────────────┘ │ │ 3.1 Typography │ (content text, headings, strong, em, quotes, lists) │ 3.1.1 Base Typography │ (semantic elements: p, h1–h6, blockquote, etc.) │ 3.1.2 WP Font-Size Presets │ (maps .has-small-font-size etc. → tokens) │ 3.5 Core Blocks │ (Gutenberg block overrides: buttons, galleries, quotes) │ 3.6 Custom Blocks │ (ACF, custom block styling) └───────────────────────────────┘ ┌───────────────────────────────┐ │ 4.0 COMPONENTS │ │ ┌────────────────────────────┐ │ │ | Purpose: Reusable UI parts | │ │ | not tied to page layout. | │ │ └────────────────────────────┘ │ | 4.7 Social icons | (in Kraken these are a reusable component, and can also be part of header/footer) └───────────────────────────────┘ ┌───────────────────────────────┐ │ 7.0 PAGE-SPECIFIC │ │ ┌────────────────────────────┐ │ │ | Purpose: Overrides & | │ │ | one-off page styles. | │ │ └────────────────────────────┘ │ │ 7.1 Homepage │ (homepage-only hero, special layouts) └───────────────────────────────┘ ┌───────────────────────────────┐ │ 8.0 ANIMATIONS │ │ ┌────────────────────────────┐ │ │ | Purpose: Motion & feedback | │ │ | transitions, keyframes. | │ │ └────────────────────────────┘ │ │ 8.1 Transitions │ (link hovers, button states, fades) │ 8.2 Keyframes │ (@keyframes animations: slides, pulses, spins) │ 8.3 Scroll / Parallax Effects │ (scroll-triggered animations, parallax bg) └───────────────────────────────┘ ┌───────────────────────────────┐ │ 9.0 3RD-PARTY PLUGINS │ │ ┌────────────────────────────┐ │ │ | Purpose: Plugin overrides | │ │ | & integrations. | │ │ └────────────────────────────┘ │ └───────────────────────────────┘ ┌───────────────────────────────┐ │ 10.0 CUSTOM │ │ ┌────────────────────────────┐ │ │ | Purpose: Project-specific | │ │ | styles. One-offs. | │ │ └────────────────────────────┘ │ └───────────────────────────────┘ <<< ***/ /* ========================================================================== 1.0 FOUNDATIONS ========================================================================== */ /* 1.4 BODY (html, body defaults, base font-family/weight) -------------------------------------------------------------------------- */ .no-overflow {overflow:hidden;} body:not(.home) .kraken-main__inner { background-image: url("https://www.cruspecialists.ca/wp-content/uploads/2025/10/body-watermark.png"); background-repeat: no-repeat; background-size: auto; background-position: bottom right; } /* 1.5 LINKS & BUTTONS (Base) (global styles, default button resets, hover/focus) -------------------------------------------------------------------------- */ /* 1.5.1 Links */ a { text-decoration: none; font-weight: 800; :hover {text-decoration: underline;} :focus {text-decoration: underline;} } /* 1.5.2 Buttons */ /* 1.6 SPACING (site-wide spacing system: margins, padding, CSS vars) -------------------------------------------------------------------------- */ :root { --global-content-edge-padding: var(--kraken-framework-site-padding-left); /* Uses our Kraken padding on Kadence's edge padding */ } /* WordPress Global Padding */ .has-global-padding { padding-right: var(--kraken-framework-site-padding-right); /* Uses our Kraken padding */ padding-left: var(--kraken-framework-site-padding-left); /* Uses our Kraken padding */ } /* Mobile Content Padding */ @media only screen and (max-width: 767px) { :root { --kraken-framework-site-padding-right: 2rem!important; /* Set to what you want the right padding to be on mobile */ --kraken-framework-site-padding-left: 2rem!important; /* Set to what you want the right padding to be on mobile */ } } /* 1.7 UTILITIES (generic, reusable helpers like spacing, flex, display, text alignment. eg: .no-margin) -------------------------------------------------------------------------- */ /* ========================================================================== 2.0 LAYOUT ========================================================================== */ /* 2.4 Header (site header container) -------------------------------------------------------------------------- */ .kraken-header { /* Standard Header */ --kraken-framework-header-row-height-top: 0; --kraken-framework-header-default-solid-background: var(--kraken-framework-palette-01); /* Shrink Header Colors */ --kraken-framework-header-row-shrink-height-top: 0; /* Default Mobile Header */ --kraken-framework-header-default-mobile-background: var(--kraken-framework-palette-01); /* Increase width of Primary Nav Container */ .kraken-header__col--end { flex: 3; } /* Header Col Inner Styles. */ .kraken-col-inner__row { display: flex; justify-content: flex-end; gap: 1rem; } .kraken-phone-number { --kraken-framework-phone-number-color: var(--kraken-framework-subtle-bg-color); --kraken-framework-phone-number-hover-color: var(--kraken-framework-accent-color); --kraken-framework-phone-number-focus-color: var(--kraken-framework-accent-color); font-weight: 800; } .kraken-social-media { --kraken-framework-social-button-width: 23px; --kraken-framework-social-button-height: 23px; .kraken-social-media__link--Facebook, .kraken-social-media__link--facebook { --kraken-framework-a-font-color: #ffffff; --kraken-framework-a-hover-font-color: #ffffff; --kraken-framework-a-focus-font-color: #ffffff; svg path:nth-of-type(2) { fill: var(--kraken-framework-palette-01); } } } .kraken-header__inner--mobile { .kraken-toggle-mobile__bar { background: #fff; } } } /* 2.5 Navigation (primary, secondary menus, link states, hover) -------------------------------------------------------------------------- */ .kraken-navigation { /* Default Values for Desktop Navigation */ --kraken-framework-default-desktop-nav-font-color: var(--kraken-framework-subtle-bg-color); --kraken-framework-default-desktop-nav-font-weight: 500; /* Default Mobile Styles */ --kraken-framework-default-mobile-nav-padding: 0.5rem; /* Menu Font Styles */ .kraken-navigation__list .menu-item a { text-transform: uppercase; } } .kraken-navigation--primary { margin-top:0.5rem !important; } .kraken-navigation--mobile { --kraken-framework-nav-drawer-background-color: var(--kraken-framework-palette-01); --kraken-framework-nav-link-font-color: var(--kraken-framework-subtle-bg-color); --kraken-framework-nav-link-background-color: var(--kraken-framework-palette-01); --kraken-framework-nav-link-background-hover-color: #2f3234; --kraken-framework-nav-link-background-active-color: #2f3234; --kraken-framework-nav-link-background-focus-color: #2f3234; --kraken-framework-nav-sub-link-background-color: var(--kraken-framework-palette-01); --kraken-framework-nav-sub-link-background-hover-color: #2f3234; --kraken-framework-nav-sub-link-background-active-color: #2f3234; --kraken-framework-nav-sub-link-background-focus-color: #2f3234; --kraken-framework-nav-sub-link-font-color: var(--kraken-framework-subtle-bg-color); --kraken-framework-nav-sub-link-font-hover-color: var(--kraken-framework-accent-color); --kraken-framework-nav-sub-link-font-active-color: var(--kraken-framework-accent-color); --kraken-framework-nav-sub-link-font-size: 1rem; --kraken-framework-nav-drawer-width: 70%; } /* Footer Menu */ .kraken-navigation--extra-01 { --kraken-framework-nav-link-font-weight: 600; --kraken-framework-nav-link-padding: 0.5rem 0; } /* 2.8 Footer (footer layout & structure) -------------------------------------------------------------------------- */ .kraken-footer { --kraken-framework-footer-row-padding-main: 4rem var(--kraken-framework-site-padding-right) 4rem var(--kraken-framework-site-padding-left); /* Background styles */ background-image: url("https://www.cruspecialists.ca/wp-content/uploads/2025/10/footer-bg-watermark.webp"); background-repeat: no-repeat; background-size: auto; background-position: 25% 2%; .kraken-logo__image--footer {max-width: 100%;} .kraken-logo--footer {margin: 0 auto;} .kraken-email__link::before { content: "Email: "; font-weight: 600; color: var(--kraken-framework-palette-01); } .kraken-phone-number__link::before { content: "Phone: "; font-weight: 600; color: var(--kraken-framework-palette-01); } .kraken-footer__row-inner--bottom { border-top: 2px solid var(--wp--preset--color--accent); padding-bottom: 3rem; padding-top: 1rem; } .legal-right .kraken-navigation__list {justify-content: flex-end;} } @media only screen and (min-width: 991px) { .kraken-footer { background-position: 35% 2%; .kraken-footer__row-inner--flex { display: flex; gap: 12rem; } .kraken-logo--footer { margin: 0; } } } @media only screen and (min-width: 1280px) { .kraken-footer { background-position: 53% 2%; } } @media only screen and (min-width: 1920px) { .kraken-footer { background-position: -20% 2%; } } /* ========================================================================== 3.0 CONTENT ========================================================================== */ /* 3.1 Typography (content text, headings, strong, em, quotes, lists) -------------------------------------------------------------------------- */ /* 3.1.1 Base Typography (semantic elements: p, h1–h6, blockquote, etc.) */ body {font-weight: normal;} /* @ ??px base size */ h1 { font-size: clamp(3.5rem, 1.6667vw + 2.1667rem, 4.25rem); --kraken-framework-h1-font-weight: 900; --kraken-framework-h2-font-line-height: 1.2; } h2 { font-size: clamp(2.5rem, 1.6667vw + 2.1667rem, 3.5rem); --kraken-framework-h2-margin: 4rem 0 1.25rem 0; --kraken-framework-h2-font-weight: 900; --kraken-framework-h2-font-line-height: 1.2; } h3 { font-size: clamp(1.5rem, .3333vw + 1.4333rem, 1.7rem); text-transform: uppercase; --kraken-framework-h3-font-weight: 800; --kraken-framework-h3-font-color: var(--kraken-framework-accent-color); --kraken-framework-h3-margin: 1rem 0 0 0; } p {margin: 0.5rem 0 1.5rem 0;} strong {font-weight: 900;} /* Black */ em {font-style: italic;} /* 3.1.2 WP Font-Size Presets (eg .has-small-font-size etc.) */ .has-medium-font-size {font-size: 1.6rem!important;} /* 3.5 Core Blocks (Gutenberg block overrides: buttons, galleries, quotes) -------------------------------------------------------------------------- */ /* WP Buttons - Default (Red) */ a.wp-block-button__link { background-color: var(--kraken-framework-accent-color); color: var(--kraken-framework-subtle-bg-color); font-weight: 800; text-transform: uppercase; font-style: italic; border-radius: 5px; padding: 0.5rem 1.5rem; transition: background 100ms ease-out; } a.wp-block-button__link:hover, a.wp-block-button__link:focus { background-color: var(--kraken-framework-accent-alt-color); color: var(--kraken-framework-subtle-bg-color); } /* WP Buttons - White */ .btn-white a.wp-block-button__link { background-color: var(--kraken-framework-subtle-bg-color); color: var(--kraken-framework-accent-color); transition: background 100ms ease-out; } .btn-white a.wp-block-button__link:hover, .btn-white a.wp-block-button__link:active { background-color: #e9e9e9; color: var(--kraken-framework-accent-color); } /* Center Buttons on Mobile */ @media only screen and (max-width: 768px) { .btn-center-mobile { justify-content: center !important; } } /* 3.6 Custom Blocks (ACF, custom block styling) -------------------------------------------------------------------------- */ /* Remove Unwanted Entry Content Padding - Homepage */ .home .kraken-entry__content {padding-bottom: 0;} /*---------------- Kadence Blocks ------------------*/ /* Breakout Content */ @media (min-width: 1025px) and (max-width: 1439px) { .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) -(16px* 2))) / 2)* -1) + -1px); } } @media (min-width: 1025px) and (max-width: 1439px) { .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) -(16px* 2))) / 2)* -1) + -1px); } } .kb-row-layout-wrap.custom-breakout-left > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(1) figure, .kb-row-layout-wrap.custom-breakout-right > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(2) figure { height: 100%; img { box-sizing: border-box; height: 100%; /* max-width: 100%; */ vertical-align: bottom; object-fit: cover; } } /* ========================================================================== 4.0 COMPONENTS (Purpose: Reusable UI parts not tied to page layout.) ========================================================================== */ /* 4.7 Social Icons / Tabs (in Kraken these are a reusable component, and can also be part of header/footer) -------------------------------------------------------------------------- */ /* Footer Social Icon Styling */ .kraken-social-media--footer { .kraken-social-media__link--Facebook, .kraken-social-media__link--facebook { --kraken-framework-a-font-color: #000000; --kraken-framework-a-hover-font-color: #000000; --kraken-framework-a-focus-font-color: #000000; } } /* ========================================================================== 7.0 PAGE SPECIFIC (Purpose: Overrides & one-off page styles.) ========================================================================== */ /* 7.1 Homepage (homepage-only hero, special layouts) -------------------------------------------------------------------------- */ /* Homepage Hero Mask */ .curve-mask { -webkit-mask-image: url("https://www.cruspecialists.ca/wp-content/uploads/2025/10/curve-mask.svg"); mask-image: url("https://www.cruspecialists.ca/wp-content/uploads/2025/10/curve-mask.svg"); mask-repeat: no-repeat; mask-size: 100% auto; mask-position: top left; } .home h1 { font-size: clamp(2.5rem, 1.6667vw + 2.1667rem, 3.5rem); margin: 4rem 0 1.25rem 0; font-weight: 900; line-height: 1.2; } /* ========================================================================== 9.0 3RD-PARTY PLUGINS ========================================================================== */ /* Gravity Forms */ #gform_wrapper_1 { .gform-footer { .gform_button { background-color: var(--kraken-framework-accent-color); color: var(--kraken-framework-subtle-bg-color); font-weight: 800; text-transform: uppercase; font-style: italic; font-size: 1rem; } .gform_button:hover, .gform_button:focus { background-color: var(--kraken-framework-accent-alt-color); color: var(--kraken-framework-subtle-bg-color); } } } /* ========================================================================== 10.0 CUSTOM ========================================================================== */ /* Homepage Feature Boxes - Hover Mask */ .logo-mask-section a { text-decoration: none; } .logo-mask-image { display: block; margin: 0px auto; } .logo-mask-image img { aspect-ratio: 1; object-fit: cover; /* transition: transform 0.5s ease-out; */ transform: scale(1); width: 100%; /* Added */ opacity: 0; /* Start invisible */ transition: opacity 0.8s ease; /* Smooth fade-in */ filter: grayscale(100%); } .logo-mask { mask-mode: alpha; mask-repeat: no-repeat; mask-size: 90%; mask-position: center; width: 100%; /* Added */ position: relative; background-color: var(--kraken-framework-palette-02); overflow: hidden; } .logo-mask-c {mask-image: url("https://www.cruspecialists.ca/wp-content/uploads/2025/10/letter-c.svg");} .logo-mask-r {mask-image: url("https://www.cruspecialists.ca/wp-content/uploads/2025/10/letter-r.svg");} .logo-mask-u {mask-image: url("https://www.cruspecialists.ca/wp-content/uploads/2025/10/letter-u.svg");} .logo-mask-section:hover img { opacity: 1; }