/* Lordswood v2 global layer: tokens, base type, buttons, shared blocks, Divi resets.
Loads only on v2 pages (body.kluk-v2). Every custom class starts with "kl-".
Option A system: dark palette, red on CTAs only, Little Ninjas green on LN accents.
Borders on controls and pills use --kl-edge (#6f6b64, 3:1 on the dark background). */
body.kluk-v2 {
--kl-bg: #0a0a0a;
--kl-bg2: #141413;
--kl-fg: #efebe4;
--kl-mute: #8d8981;
--kl-soft: #bdb8b0;
--kl-body-on-photo: #cfcac2;
--kl-line: #2a2927;
--kl-edge: #6f6b64;
--kl-red: #d8321f;
--kl-red2: #b8281a;
--kl-error: #ff8a7a;
--kl-ln-dark: #24871a;
--kl-ln-mid: #3ba10d;
--kl-ln-light: #9fc42a;
--kl-ln-grad: linear-gradient(90deg, #24871a, #9fc42a);
--kl-ln-grad-txt: linear-gradient(90deg, #3ba10d, #9fc42a);
--kl-max: 1280px;
--kl-gut: clamp(20px, 4vw, 56px);
--kl-radius: 22px;
background: var(--kl-bg);
color: var(--kl-fg);
font: 400 17px/1.55 var(--kl-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
body.kluk-v2--home { --kl-max: 1360px; }
body.kluk-v2--thanks { --kl-max: 1180px; }
html:has(body.kluk-v2) { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
body.kluk-v2--home { scroll-padding-top: 88px; }
/* ---------- Divi resets on v2 pages ----------
v2 pages are full-bleed and dark, so every Divi wrapper is reset to full width with the page background.
Covers the classic page template (#left-area, .container, sidebar) and the builder layout. */
body.kluk-v2 #page-container,
body.kluk-v2 #et-boc,
body.kluk-v2 #et-main-area,
body.kluk-v2 #main-content,
body.kluk-v2 .et-l--post,
body.kluk-v2 .et_builder_inner_content { background: var(--kl-bg); }
body.kluk-v2 #main-content .container:before { display: none; }
body.kluk-v2 #main-content .container,
body.kluk-v2 #main-content #content-area,
body.kluk-v2 #main-content #left-area { width: 100%; max-width: none; margin: 0; padding: 0; float: none; }
body.kluk-v2 #main-content #sidebar { display: none; }
body.kluk-v2 #main-content article,
body.kluk-v2 #main-content .entry-content { margin: 0; padding: 0; background: transparent; }
body.kluk-v2 #main-content .main_title,
body.kluk-v2 #main-content .et_post_meta_wrapper { display: none; }
/* Wrapper neutraliser. When the kl- sections are pasted as shortcodes (classic editor, Divi 5 backwards
compatibility mode), Divi 5 wraps them in its own section > row > column > Text module. That wrapper gets
Divi defaults: white background, 80% / 1080px row, padding, and stray
and empty from wpautop.
Strip it so the kl- sections sit full bleed, as if they were top-level sections. */
body.kluk-v2 .et_pb_section:not(.kl-sec):has(.kl-sec),
body.kluk-v2 .et_pb_row:has(.kl-sec),
body.kluk-v2 .et_pb_column:has(.kl-sec),
body.kluk-v2 .et_pb_module:has(.kl-sec),
body.kluk-v2 .et_pb_text_inner:has(.kl-sec) {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
float: none;
}
body.kluk-v2 .et_pb_section:not(.kl-sec):has(.kl-sec) { position: relative; }
body.kluk-v2 .et_pb_text_inner:has(> .kl-sec) > br,
body.kluk-v2 .et_pb_text_inner:has(> .kl-sec) > p:empty { display: none; }
/* Sections and rows that carry kl- classes take their spacing from this file, not Divi defaults.
Section reset uses :where() so page classes (kl-thanks-hero, kl-s, kl-first, kl-tt and so on) can set
their own padding and background at normal specificity. */
body.kluk-v2 .et_pb_section:where(.kl-sec) { padding: 0; background-color: transparent; }
body.kluk-v2 .kl-sec > .et_pb_row { width: 100%; max-width: var(--kl-max); padding: 0 var(--kl-gut); margin: 0 auto; }
/* Rows whose snippet brings its own .kl-w container go full width, so the gutter isn't doubled
and full-bleed borders (footer) span the viewport, as in the concepts. */
body.kluk-v2 .kl-sec > .et_pb_row:has(.kl-w) { max-width: none; padding-left: 0; padding-right: 0; }
body.kluk-v2 .et_pb_section.kl-sec .et_pb_column { margin-bottom: 0; }
body.kluk-v2 .et_pb_section.kl-sec .et_pb_module { margin-bottom: 0; }
/* wpautop adds
between inline-level children of flex snippets in Code modules. */
body.kluk-v2 .kl-top .kl-w > br,
body.kluk-v2 .kl-ctas > br,
body.kluk-v2 .kl-times > br,
body.kluk-v2 .kl-meta > br,
body.kluk-v2 .kl-drawer > br,
body.kluk-v2 .kl-links > br,
body.kluk-v2 .kl-nav .kl-r > br,
body.kluk-v2 .et_pb_code_inner > br:first-child,
body.kluk-v2 .et_pb_text_inner > br:first-child { display: none; }
/* Divi's Code module strips authored
tags, so Code module snippets use
. */
body.kluk-v2 .kl-p + .kl-p { margin-top: 12px; }
body.kluk-v2,
body.kluk-v2 input,
body.kluk-v2 select,
body.kluk-v2 textarea,
body.kluk-v2 button,
body.kluk-v2 .et_pb_text,
body.kluk-v2 .et_pb_text_inner { font-family: var(--kl-body); }
body.kluk-v2 .et_pb_text,
body.kluk-v2 p { color: inherit; font-size: inherit; line-height: inherit; }
body.kluk-v2 p { padding-bottom: 0; }
/* Divi gives .entry-content lists a fixed 26px line height; v2 lists follow the text around them. */
body.kluk-v2 .kl-sec :is(ul, ol, li) { line-height: inherit; }
body.kluk-v2 img { display: block; max-width: 100%; height: auto; }
body.kluk-v2 a { color: inherit; }
body.kluk-v2 ul.kl-roll,
body.kluk-v2 .et_pb_text ul.kl-roll { list-style: none; padding: 0; margin: 0; }
body.kluk-v2 h1, body.kluk-v2 h2, body.kluk-v2 h3, body.kluk-v2 .kl-d {
font-family: var(--kl-display);
font-weight: 400;
text-transform: uppercase;
letter-spacing: .005em;
line-height: .95;
color: var(--kl-fg);
padding-bottom: 0;
margin: 0;
}
body.kluk-v2 :focus-visible { outline: 2px solid var(--kl-fg); outline-offset: 3px; }
/* ---------- utilities ---------- */
body.kluk-v2 .kl-m { color: var(--kl-mute); }
body.kluk-v2 .kl-nl { display: block; }
body.kluk-v2 .kl-w { max-width: var(--kl-max); margin: 0 auto; padding: 0 var(--kl-gut); }
body.kluk-v2 .kl-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
body.kluk-v2 .kl-skip { position: absolute; left: -999px; top: 0; z-index: 200; }
body.kluk-v2 .kl-skip:focus { left: 12px; top: 12px; background: var(--kl-fg); color: var(--kl-bg); padding: 10px 14px; }
body.kluk-v2 .kl-tlink { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
body.kluk-v2 .kl-tlink:hover { text-decoration-thickness: 2px; }
body.kluk-v2 .kl-tag { font-size: 15px; font-weight: 500; color: var(--kl-body-on-photo); display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
body.kluk-v2 .kl-ln-pill { display: inline-block; background: var(--kl-ln-grad-txt); color: var(--kl-bg); border-radius: 999px; padding: 4px 12px; font-weight: 600; }
/* ---------- buttons ----------
Use on a Divi Button module (CSS class kl-btn) or on a plain
in a Text/Code module.
Divi's button border, letter spacing and ::after icon are removed. */
body.kluk-v2 .kl-btn,
body.kluk-v2 .et_pb_button.kl-btn,
body.kluk-v2 .kl-btn .et_pb_button,
body.kluk-v2 a.kl-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--kl-red);
color: #fff;
text-decoration: none;
font: 600 16px/1 var(--kl-body);
letter-spacing: 0;
text-transform: none;
padding: 17px 26px;
border: 0;
border-radius: 999px;
cursor: pointer;
transition: background-color .3s;
white-space: nowrap;
}
body.kluk-v2 .kl-btn:hover,
body.kluk-v2 .et_pb_button.kl-btn:hover,
body.kluk-v2 .kl-btn .et_pb_button:hover { background: var(--kl-red2); color: #fff; padding: 17px 26px; border: 0; letter-spacing: 0; }
body.kluk-v2 .et_pb_button.kl-btn::after,
body.kluk-v2 .et_pb_button.kl-btn::before,
body.kluk-v2 .kl-btn .et_pb_button::after,
body.kluk-v2 .kl-btn .et_pb_button::before { content: none !important; display: none !important; }
body.kluk-v2 .kl-btn--sm,
body.kluk-v2 .kl-btn--sm .et_pb_button { font-size: 14px; padding: 12px 20px; }
body.kluk-v2 .kl-btn--sm:hover,
body.kluk-v2 .kl-btn--sm .et_pb_button:hover { padding: 12px 20px; }
/* ---------- shared header: logo + phone, no nav (LP and thanks) ---------- */
body.kluk-v2 .kl-top { position: absolute; inset: 0 0 auto; z-index: 10; }
/* In Divi the top bar sits in its own section. That section is taken out of flow and pinned to the top
of the page, so the bar overlays the hero (as in the concept) instead of sitting in a 0px-high section
that the hero then overlaps. */
body.kluk-v2 .et_pb_section.kl-sec:has(.kl-top) { position: absolute; inset: 0 0 auto; z-index: 10; }
body.kluk-v2 .et_pb_section.kl-sec:has(.kl-top) .kl-top { position: relative; }
body.kluk-v2 .kl-top .kl-w { display: flex; align-items: center; justify-content: space-between; height: 68px; }
body.kluk-v2 .kl-top img { height: 28px; width: auto; }
body.kluk-v2 .kl-top .kl-tel { font-size: 15px; font-weight: 500; text-decoration: none; color: #d9d4cc; }
/* ---------- full-bleed photo hero (shared mechanics) ----------
Hero photo: Divi Image module with CSS class kl-hero-media. The image itself must not lazy load
and has fetchpriority="high" (see build spec). Never animated. */
body.kluk-v2 .kl-hero { position: relative; overflow: hidden; }
body.kluk-v2 .kl-hero-media,
body.kluk-v2 .kl-hero .et_pb_image.kl-hero-media { position: absolute !important; inset: 0; margin: 0 !important; z-index: 0; width: 100%; height: 100%; max-width: none; }
body.kluk-v2 .kl-hero-media .et_pb_image_wrap,
body.kluk-v2 .kl-hero-media picture { display: block; width: 100%; height: 100%; }
body.kluk-v2 .kl-hero-media img { width: 100%; height: 100%; object-fit: cover; }
body.kluk-v2 .kl-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* In Divi the photo sits in its own row (kl-hero-media-row) so it can fill the whole section. */
/* Every wrapper between the section and the photo must be static, so the photo's containing block is
the hero section itself. Divi sets position: relative on .et_pb_code_inner, which collapsed it to 0px. */
body.kluk-v2 .et_pb_section.kl-hero .et_pb_row.kl-hero-media-row,
body.kluk-v2 .kl-hero-media-row .et_pb_column,
body.kluk-v2 .kl-hero-media-row .et_pb_module,
body.kluk-v2 .kl-hero-media-row .et_pb_code_inner,
body.kluk-v2 .kl-hero-media-row .et_pb_text_inner { position: static !important; padding: 0; margin: 0; max-width: none; }
body.kluk-v2 .kl-hero-media-row br { display: none; }
body.kluk-v2 .kl-hero > .et_pb_row:not(.kl-hero-media-row),
body.kluk-v2 .kl-hero > .kl-w { position: relative; z-index: 2; }
body.kluk-v2 .kl-hero .kl-m { color: #a39e95; }
/* ---------- section heads ---------- */
body.kluk-v2 .kl-s { padding-top: 72px; }
body.kluk-v2 .kl-head { margin-bottom: 28px; }
body.kluk-v2 h2.kl-big, body.kluk-v2 .kl-big h2 { font-size: clamp(38px, 5vw, 68px); }
body.kluk-v2 .kl-head p,
body.kluk-v2 .kl-head .kl-p { color: var(--kl-soft); max-width: 52ch; margin-top: 14px; }
/* ---------- photo tiles ---------- */
body.kluk-v2 .kl-tiles { display: grid; gap: 14px; }
body.kluk-v2 .kl-tile { position: relative; display: block; overflow: hidden; background: #1a1a19; text-decoration: none; color: var(--kl-fg); }
body.kluk-v2 .kl-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.45) brightness(.72); transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .6s; }
body.kluk-v2 .kl-tile:hover img { transform: scale(1.05); filter: grayscale(0) brightness(.82); }
body.kluk-v2 .kl-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.9) 10%, rgba(0,0,0,.55) 45%, transparent 70%); }
body.kluk-v2 .kl-tile .kl-t { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 20px; }
body.kluk-v2 .kl-tile h3 { font-size: 30px; }
body.kluk-v2 .kl-tile p,
body.kluk-v2 .kl-tile .kl-p { font-size: 15px; color: var(--kl-body-on-photo); margin-top: 8px; max-width: 34ch; }
body.kluk-v2 .kl-tile .kl-n { display: block; font-size: 14px; font-weight: 500; color: #e7e2da; margin-bottom: 6px; }
/* ---------- instructor roll ---------- */
body.kluk-v2 .kl-roll { display: grid; gap: 26px 40px; list-style: none; padding: 0; }
body.kluk-v2 .kl-roll li { padding: 0; }
body.kluk-v2 .kl-roll b { display: block; font-weight: 600; font-size: 19px; color: var(--kl-fg); }
body.kluk-v2 .kl-roll small { display: block; color: var(--kl-mute); font-size: 14px; }
body.kluk-v2 .kl-roll p,
body.kluk-v2 .kl-roll .kl-p { color: var(--kl-soft); font-size: 15px; margin-top: 0; }
/* ---------- review quote ---------- */
body.kluk-v2 .kl-quote { margin: 36px 0 0; max-width: 820px; background: var(--kl-bg2); border-radius: var(--kl-radius); padding: 28px 30px; }
body.kluk-v2 .kl-quote blockquote { margin: 0; padding: 0; border: 0; }
body.kluk-v2 .kl-quote blockquote,
body.kluk-v2 .kl-quote p,
body.kluk-v2 .kl-quote .kl-p { font-size: clamp(19px, 2vw, 24px); line-height: 1.45; color: var(--kl-fg); }
body.kluk-v2 .kl-quote figcaption { margin-top: 14px; font-size: 15px; color: var(--kl-soft); font-weight: 500; }
body.kluk-v2 .kl-stars { color: var(--kl-ln-light); letter-spacing: 2px; margin-left: 6px; }
/* ---------- session pills ---------- */
body.kluk-v2 .kl-times { display: flex; flex-wrap: wrap; gap: 8px; }
body.kluk-v2 .kl-times span { border: 1px solid var(--kl-edge); border-radius: 999px; padding: 6px 14px; font-size: 14px; color: #d9d4cc; }
body.kluk-v2 .kl-times span.is-on { background: var(--kl-ln-grad-txt); border-color: transparent; color: var(--kl-bg); font-weight: 700; }
/* ---------- simple footer (LP and thanks) ---------- */
body.kluk-v2 .kl-foot { padding: 28px 0 120px; font-size: 13px; color: var(--kl-mute); }
body.kluk-v2 .kl-foot a { text-decoration: underline; text-underline-offset: 3px; }
body.kluk-v2--thanks .kl-foot { margin-top: 72px; padding: 28px 0 36px; border-top: 1px solid var(--kl-line); font-size: 14px; }
/* Hide the default Divi header/footer on the LP and thanks page if the Theme Builder
template for these pages is not set to "no header / no footer". Prefer the Theme Builder setting. */
body.kluk-v2--lp #main-header, body.kluk-v2--lp #top-header, body.kluk-v2--lp #main-footer,
body.kluk-v2--thanks #main-header, body.kluk-v2--thanks #top-header, body.kluk-v2--thanks #main-footer { display: none; }
body.kluk-v2--lp #page-container, body.kluk-v2--thanks #page-container { padding-top: 0 !important; margin-top: 0 !important; }
/* ---------- motion ----------
Below-fold blocks with class kl-rv fade in with scroll-driven CSS where supported.
No GSAP anywhere. Hero, H1, form and hero image never animate. */
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
body.kluk-v2 .kl-rv { animation: kl-rv linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
@keyframes kl-rv { from { opacity: .001; transform: translateY(20px); } to { opacity: 1; transform: none; } }
}
}
@media (prefers-reduced-motion: reduce) {
body.kluk-v2 *, body.kluk-v2 *::before, body.kluk-v2 *::after { transition: none !important; animation: none !important; }
html:has(body.kluk-v2) { scroll-behavior: auto; }
}
@media (min-width: 900px) {
body.kluk-v2 .kl-top .kl-w { height: 84px; }
body.kluk-v2 .kl-top img { height: 32px; }
body.kluk-v2 .kl-s { padding-top: 96px; }
body.kluk-v2 .kl-tiles--3 { grid-template-columns: repeat(3, 1fr); }
body.kluk-v2 .kl-roll { grid-template-columns: repeat(3, 1fr); }
body.kluk-v2 .kl-foot { padding-bottom: 32px; }
}