.elementor-kit-5378{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5378 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:980px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --cj-mist:#ECF7F7; --cj-body:#303031; --cj-text:#666666; --cj-black:#000000; --cj-grey:#656563; --font-accent:Lato; --cj-silver:#BFBFBF; --cj-yellow:#D8F013; --text-base:16px; --cj-heading:#333333; --font-heading:Josefin Sans; --cj-charcoal:#3E3E3C; --cj-teal:#08C0D4; --cj-teal-light:#58C6D6; --cj-lime:#C3E800; --cj-teal-dark:#38B5C5; --cj-white:#FFFFFF; --font-body:Open Sans; --cj-link:#2EA3F2; --content-width:1140px; --cj-ink:#262626; } /* Start custom CSS *//* NOTE: Elementor HTML-escapes '>' in kit custom CSS (it becomes > and the rule dies): never use the child combinator here. Chris Johnson PT: site-wide CSS stored in the Elementor kit (Site Settings > Custom CSS). Source of truth: ~/Projects/Chris Johnson/build/site.css; push with `python3 kit_css.py`. Only things the V4 tokens/classes can't express live here (V3 nav-menu internals, shortcode output). */ /* ---------- Base ---------- */ /* Divi's body letter-spacing (0.02em of 16px, inherited as px) — every element without its own value had it on the old site. */ body { letter-spacing: 0.32px; font-family: "Open Sans", Helvetica, Arial, Lucida, sans-serif; font-size: 16px; line-height: 1.5; color: #666666; } /* ^ Divi's body text (Hello Elementor would otherwise use the system font and #333 for anything not styled by Elementor: list spans, WooCommerce, LearnDash and MemberPress screens, snippets). */ /* ---------- Header layout ---------- */ /* The logo link must not shrink (the img collapsed to 0px inside it). "header." raises specificity above Elementor's base layer (e-image-link-base is all:unset and loads after the kit CSS). */ header.elementor-location-header .e-image-link-base { flex-shrink: 0; display: block; line-height: 0; } /* MAIN header (the approved menu, build/mockups/menu-v4; the menu is [cjpt_site_menu], cjpt-site assets/css/site-menu.css): sticky, 64px bar, 180px logo (136px at laptop width). */ header.elementor-location-header.elementor-267547 { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 100; } @media (min-width: 981px) { header.elementor-location-header.elementor-267547 .e-image-link-base img { width: 180px; height: auto; } } /* THREE ZONES (Ryan, 2026-10-14): logo | nav | cart + profile. The free space is split equally on both sides of the nav (auto margins), so the gap logo -> first item and last item -> cart is THE SAME at every width (at least 48px, well above the 24-28px between nav items). The cart side pads 12px less because the cart icon sits 12px inside its 44px tap box. No ">" in this file: the kit's Custom CSS stores it as >. */ @media (min-width: 981px) { header.elementor-location-header.elementor-267547 .e-con .e-con:has(.cjn) .e-image-link-base { flex: 0 0 auto; padding-right: 48px; } header.elementor-location-header.elementor-267547 .e-con .e-con:has(.cjn) .e-paragraph-base:has(.cjn) { margin-left: auto !important; margin-right: auto !important; flex: 0 0 auto; } header.elementor-location-header.elementor-267547 .e-con .e-con:has(.cjn) .e-con:has(.cjpt-cart-link) { flex: 0 0 auto; margin-left: 0 !important; padding-left: 36px; justify-content: flex-end; } } @media (min-width: 981px) and (max-width: 1365px) { header.elementor-location-header.elementor-267547 .e-con .e-con:has(.cjn) .e-image-link-base { padding-right: 32px; } header.elementor-location-header.elementor-267547 .e-con .e-con:has(.cjn) .e-con:has(.cjpt-cart-link) { padding-left: 20px; } } @media (min-width: 981px) and (max-width: 1179px) { header.elementor-location-header.elementor-267547 .e-image-link-base img { width: 136px; } header.elementor-location-header.elementor-267547 .e-con .e-con:has(.cjn) { padding-left: 24px; padding-right: 24px; } header.elementor-location-header.elementor-267547 .e-paragraph-base:has(.cjn) { margin-left: 14px; } } /* Phones and tablets (980px and below): the STANDARD PHONE BAR (cjpt-site assets/css/phone-bar.css holds the shared height / icon / spacing tokens): menu button LEFT (inside the [cjpt_site_menu] widget, in a slot of --cjpt-bar-side) | logo CENTRED | account + cart RIGHT (same slot width, so the logo is centred whatever the icons are). */ @media (max-width: 980px) { header.elementor-location-header.elementor-267547 .e-image-link-base { flex-shrink: 0; margin: 0 auto; } header.elementor-location-header.elementor-267547 .e-image-link-base img { width: var(--cjpt-bar-logo-w); height: auto; } } /* Very narrow phones (360px and below): the two 96px slots leave little more than the logo's width, so the logo gives way instead of pushing the cart off-screen. */ @media (max-width: 360px) { header.elementor-location-header.elementor-267547 .e-image-link-base { flex-shrink: 1; min-width: 0; } header.elementor-location-header.elementor-267547 .e-image-link-base img { max-width: 100%; } } /* Visible keyboard focus everywhere in the header (invisible fix: the Divi header had none) */ .elementor-location-header a:focus-visible { outline: 2px solid #38B5C5; outline-offset: 2px; } /* ---------- Fonts not served by Elementor ---------- */ /* Divi loaded Open Sans Condensed 700 from Google for the homepage download titles; Elementor's V4 font loader doesn't know the (retired) family, so it is declared here. Latin subset only, as on the old site. */ @font-face { font-family: "Open Sans Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/opensanscondensed/v24/z7NFdQDnbTkabZAIOl9il_O6KJj73e7Ff0GmDuXMR7eS2Ao.woff2) format("woff2"); } /* ---------- Inline links inside V4 paragraphs ---------- */ /* V4 paragraphs keep inline but have no link-colour control; these classes (global classes, applied by the page scripts) give the colours the Divi modules had. */ .elementor .cj-link-inherit a { color: inherit; text-decoration: none; } .elementor .cj-link-inherit a:hover, .elementor .cj-link-inherit a:focus-visible { opacity: .8; } .elementor .cj-note a { color: #2ea3f2; text-decoration: underline; } .elementor .cj-note a:hover, .elementor .cj-note a:focus-visible { color: #08c0d4; } /* ---------- Header: account + cart icons ([cjpt_account_link variant="bar"], [cjpt_cart_link]): desktop look in cjpt-site assets/css/site-menu.css, phone look in phone-bar.css ---------- */ /* ---------- Rich text converted from Divi text modules (global class cj-rich, divi2v4.py) ---------- */ /* V4 paragraphs hold the