/*
Theme Name: KraftMaid Launch 2025
Theme URI: http://www.kraftmaid.com
Template: Divi
Author: Material+
Author URI: https://www.materialplus.io/
Description: Figma Working Files: https://www.figma.com/design/qRGOzxEVFna50iSYkMKca0/NPL_KraftMaid_Microsite_Homepage-Teaser_FNL?node-id=1-11&p=f&t=xsG67k9bKSwZScEG-0
Version: 4.27.4.1747762461
Updated: 2025-05-20 17:34:21

*/

/* === CAMPTON FONT (Local) === */

@font-face {
    font-family: campton;
    src: url(https://dev-kraftmaid-home-depot-launch-25.pantheonsite.io/wp-content/uploads/2025/06/CamptonBook.otf) format('opentype');
    font-display: auto;
}

@font-face {
    font-family: campton-book;
    src: url(https://dev-kraftmaid-home-depot-launch-25.pantheonsite.io/wp-content/uploads/2025/06/Campton-Book.otf) format('opentype');
    font-display: auto;
}


@font-face {
    font-family: campton-medium;
    src: url(https://dev-kraftmaid-home-depot-launch-25.pantheonsite.io/wp-content/uploads/2025/06/Campton-Medium.otf) format('opentype');
    font-display: auto;
}


@font-face {
    font-family: campton-bold;
    src: url(https://dev-kraftmaid-home-depot-launch-25.pantheonsite.io/wp-content/uploads/2025/06/Campton-Bold.otf) format('opentype');
    font-display: auto;
}


@font-face {
    font-family: campton-light;
    src: url(https://dev-kraftmaid-home-depot-launch-25.pantheonsite.io/wp-content/uploads/2025/06/Campton-Light.otf) format('opentype');
    font-display: auto;
}


@font-face {
    font-family: campton-semibold;
    src: url(https://dev-kraftmaid-home-depot-launch-25.pantheonsite.io/wp-content/uploads/2025/06/Campton-SemiBold.otf) format('opentype');
    font-display: auto;
}

body {
    font-family: 'Campton-light', sans-serif;
    font-style: normal;
    font-weight: 400;
}

a {
    font-family: 'Campton-light', sans-serif;
    font-style: light;
    font-weight: 400;
    font-size: 16px;
}

p {
    font-family: 'Campton-light', sans-serif;
    font-style: light;
    font-weight: 400;
    font-size: 16px;
}

h1 {
    font-family: 'campton-semibold', sans-serif;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 1%;
}

h2{
	font-family: 'campton-semibold', sans-serif;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.1;

	/* 60 px floor ⟶ 128 px cap */
	font-size: clamp(3.75rem, 6vw + 1rem, 8rem) !important;
}

h3 {
    font-family: 'campton-light', sans-serif;
    font-style: normal;
    font-weight: 400;
}

h4{
	font-family: 'campton-semibold', sans-serif;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.1;

	/* 60 px floor ⟶ 128 px cap */
	font-size: clamp(2rem, 1vw + 1rem, 4rem) !important;
}

/* Fluid top-nav links: 11 px at 1280 px and smaller,
   grows smoothly, caps at 14 px on very wide screens */
.et-menu li > a{
	font-size: clamp(
		11px,                 /* floor  — never smaller than this  */
		0.46875vw + 5px,      /* ramp   — kicks in above 1280 px   */
		14px                  /* ceiling—never larger than this    */
	) !important;
}

@media only screen and (min-width: 1000px) and (max-width: 1280px) {
    .et_pb_text_1 h2 {
        font-size: 100px !important;
    }

    #striking-hues {
        padding-right: 1rem !important;
    }

    .ember-module .panels {
        height: 100vh !important;
    }

    .ember-module {
        height: 100vh !important;
    }
}

@media only screen and (min-width: 767px) and (max-width: 800px) {
    .ember-module .panels {
        height: 150vh !important;
    }

    .ember-module {
        height: 150vh !important;
    }

    .et_pb_menu .et_pb_menu__menu {
        display: block;
    }

    .et_pb_menu .et_mobile_nav_menu {
        display: none;
    }
}

/* parent layout */
.color-container{
    display:flex;
    align-items:flex-start !important;      /* keeps text + image vertically aligned   */
    column-gap:1.25rem !important;       /* space between the two columns           */
}

/* remove any previous float that pulls the image out of flex flow */
.color-compare{
    float:none;              /* guard-rail in case an inline style exists */
}

.color-content{
    max-width: 77%;
}

/* Anything at or below 1280 px wide */
@media (max-width: 1280px){

	/* 1️⃣  BlueTide section */
	.bluetide-module{
		height: 151vh !important;   /* taller background sweep */
	}

	/* 2️⃣  Triple-panel section */
	.triple-module{
		height: 173vh !important;   /* accommodates three stacked slides */
	}

	/* 3️⃣  Ember hero section */
	.ember-module{
		height: 143vh !important;   /* keeps scroll-snap feel without cutoff */
	}
}

.ember-module .panels,
.triple-module .panels,
.ember-module .panel,
.triple-module .panel {
	height: 100% !important;
}

/* Dim every tab-label by default, then restore full opacity on the active tab */
:is(.ember-module, .triple-module, .bluetide-module) .tab-label{
	opacity: 0.3;
	transition: opacity 0.25s;
}

:is(.ember-module, .triple-module, .bluetide-module) .tab.active .tab-label{
	opacity: 1;
}