:root {
--kl-container: min(1320px, calc(100vw - 64px));
--kl-reading: min(760px, calc(100vw - 44px));
--kl-shadow-soft: 0 35px 90px rgba(24, 37, 42, 0.12);
--kl-shadow-lift: 0 24px 54px rgba(24, 37, 42, 0.16);
}
body {
font-size: 17px;
}
.kl-site-header {
position: sticky;
top: 0;
background: rgba(255, 255, 255, 0.88);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
}
.admin-bar .kl-site-header {
top: 32px;
}
.kl-header-inner {
min-height: 94px;
}
.kl-nav__menu {
gap: clamp(16px, 2vw, 30px);
}
.kl-nav__menu a {
position: relative;
font-size: 0.93rem;
}
.kl-nav__menu > li > a::after {
position: absolute;
right: 0;
bottom: 8px;
left: 0;
height: 2px;
background: var(--kl-rust);
content: "";
transform: scaleX(0);
transform-origin: right center;
transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.kl-nav__menu > li > a:hover::after,
.kl-nav__menu > .current-menu-item > a::after {
transform: scaleX(1);
transform-origin: left center;
}
.kl-button,
.wp-element-button,
.wp-block-button__link {
min-height: 54px;
padding: 15px 27px;
box-shadow: 0 10px 28px rgba(70, 107, 90, 0.14);
}
.kl-header-cta.kl-button--small {
min-height: 44px;
padding: 11px 19px;
}
.kl-hero {
min-height: calc(100svh - 94px);
display: grid;
align-items: center;
padding: clamp(80px, 10vw, 154px) 0;
background:
linear-gradient(90deg, rgba(246, 242, 234, 0.98) 0 57%, rgba(255, 255, 255, 0.88) 57%),
radial-gradient(circle at 80% 25%, rgba(202, 213, 200, 0.7), transparent 34%);
}
.kl-hero::before {
position: absolute;
top: clamp(70px, 9vw, 130px);
right: max(3vw, calc((100vw - 1440px) / 2));
width: clamp(220px, 28vw, 440px);
aspect-ratio: 1;
border: 1px solid rgba(70, 107, 90, 0.2);
border-radius: 50%;
content: "";
transform: translate(16%, -12%);
pointer-events: none;
}
.kl-hero::after {
right: clamp(12px, 8vw, 150px);
bottom: clamp(-160px, -8vw, -80px);
width: clamp(330px, 42vw, 650px);
height: clamp(330px, 42vw, 650px);
border-color: rgba(185, 110, 82, 0.16);
border-width: 2px;
}
.kl-hero__grid {
position: relative;
z-index: 2;
gap: clamp(54px, 8vw, 132px);
}
.kl-hero h1 {
max-width: 900px;
font-size: clamp(3.5rem, 6.6vw, 7.15rem);
letter-spacing: -0.06em;
line-height: 0.95;
}
.kl-hero h1::after {
width: clamp(90px, 10vw, 158px);
height: 5px;
margin-top: 34px;
}
.kl-hero .has-medium-font-size {
max-width: 760px;
font-size: clamp(1.08rem, 1.35vw, 1.3rem) !important;
line-height: 1.62;
}
.kl-recognition {
padding: clamp(34px, 4vw, 58px);
background: rgba(255, 255, 255, 0.93);
border: 0;
border-radius: 2px 34px 34px 34px;
box-shadow: var(--kl-shadow-soft);
transform: rotate(1.25deg);
}
.kl-recognition::after {
position: absolute;
right: -14px;
bottom: 34px;
width: 28px;
height: 28px;
background: var(--kl-rust);
border-radius: 50%;
content: "";
}
.kl-recognition h2 {
font-size: clamp(2rem, 3vw, 3rem);
}
.kl-recognition li {
padding-block: 16px;
font-size: 0.96rem;
}
.kl-section {
padding: clamp(92px, 11vw, 172px) 0;
}
.kl-section h2 {
max-width: 970px;
font-size: clamp(2.7rem, 5vw, 5.25rem);
letter-spacing: -0.055em;
line-height: 1;
}
.kl-eyebrow {
font-size: 0.75rem;
letter-spacing: 0.13em;
}
.kl-problem-section {
position: relative;
}
.kl-problem-section::before {
position: absolute;
top: 0;
left: max(20px, calc((100vw - 1470px) / 2));
width: 1px;
height: 100%;
background: linear-gradient(var(--kl-rust), transparent 55%);
content: "";
opacity: 0.4;
}
.kl-problem-routes {
margin-top: clamp(52px, 7vw, 94px);
border-top: 0;
gap: 18px;
}
.kl-problem-route {
position: relative;
grid-column: span 6;
min-height: 230px;
padding: clamp(30px, 4vw, 52px) !important;
background: var(--kl-paper);
border: 1px solid transparent !important;
overflow: hidden;
transition: color 360ms ease, background 360ms ease, transform 360ms ease, box-shadow 360ms ease;
}
.kl-problem-route:nth-child(2),
.kl-problem-route:nth-child(3) {
background: #eef1ec;
}
.kl-problem-route::before {
position: absolute;
inset: 0;
background: var(--kl-green);
content: "";
transform: translateY(calc(100% - 5px));
transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.kl-problem-route > * {
position: relative;
z-index: 1;
}
.kl-problem-route:hover {
background: var(--kl-paper);
color: var(--kl-white);
box-shadow: var(--kl-shadow-lift);
transform: translateY(-7px);
}
.kl-problem-route:hover::before {
transform: translateY(0);
}
.kl-problem-route:hover p,
.kl-problem-route:hover h3,
.kl-problem-route:hover .kl-problem-route__index {
color: var(--kl-white);
}
.kl-problem-route h3 {
max-width: 390px;
font-size: clamp(1.55rem, 2.2vw, 2.25rem);
}
.kl-problem-route p {
max-width: 520px;
font-size: 0.98rem;
}
.kl-problem-route__index {
font-size: 1.5rem;
}
.kl-statement {
position: relative;
overflow: hidden;
padding: clamp(90px, 10vw, 156px) 0;
background: var(--kl-sage);
}
.kl-statement::after {
position: absolute;
top: 50%;
right: -9vw;
width: 32vw;
aspect-ratio: 1;
border: 2px solid rgba(255, 255, 255, 0.35);
border-radius: 50%;
content: "";
transform: translateY(-50%);
}
.kl-statement blockquote {
position: relative;
z-index: 2;
}
.kl-statement blockquote p {
max-width: 1170px;
font-size: clamp(3rem, 6vw, 6.9rem);
line-height: 0.98;
}
.kl-statement blockquote cite {
max-width: 760px;
margin-top: 38px;
font-size: 1.08rem;
}
.kl-themes-section {
background:
linear-gradient(90deg, transparent 0 66%, rgba(231, 224, 212, 0.48) 66%),
var(--kl-paper);
}
.kl-theme-columns {
margin-top: clamp(58px, 8vw, 104px);
}
.kl-theme-card {
min-height: 430px;
padding: 48px 46px 54px;
transition: background 280ms ease, transform 280ms ease;
}
.kl-theme-card:hover {
background: rgba(255, 255, 255, 0.62);
transform: translateY(-8px);
}
.kl-card-index {
margin-bottom: 92px;
font-size: 1.5rem;
}
.kl-theme-card h3 {
max-width: 330px;
font-size: clamp(1.7rem, 2.25vw, 2.45rem);
}
.kl-needs-section {
position: relative;
overflow: hidden;
}
.kl-needs-section::after {
position: absolute;
right: -12vw;
bottom: -18vw;
width: 44vw;
aspect-ratio: 1;
background: var(--kl-paper);
border-radius: 50%;
content: "";
}
.kl-needs-section > * {
position: relative;
z-index: 2;
}
.kl-needs-grid {
margin-top: 70px;
gap: 28px;
}
.kl-needs-grid > .wp-block-column {
min-height: 280px;
padding: 42px;
box-shadow: 0 20px 55px rgba(24, 37, 42, 0.06);
}
.kl-needs-grid > .wp-block-column:nth-child(2) {
transform: translateY(36px);
}
.kl-needs-grid > .wp-block-column:nth-child(3) {
transform: translateY(72px);
}
.kl-needs-grid h3 {
font-size: clamp(1.45rem, 2vw, 2rem);
}
.kl-exercise-section {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 8% 80%, rgba(255, 255, 255, 0.5), transparent 22%),
linear-gradient(120deg, var(--kl-sage), #e6ebe3);
}
.kl-featured-exercise {
grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1.15fr);
}
.kl-featured-exercise h2 {
font-size: clamp(2.7rem, 4.8vw, 5.2rem);
}
.kl-featured-exercise__preview {
padding: clamp(32px, 5vw, 62px);
background: rgba(255, 255, 255, 0.82);
border: 0;
border-radius: 3px 40px 40px 40px;
box-shadow: var(--kl-shadow-soft);
}
.kl-exercise-step {
grid-template-columns: 60px 1fr;
padding: 24px 0;
}
.kl-exercise-step span {
font-size: 2rem;
}
.kl-exercise-step p {
font-size: 1rem;
}
.kl-article-layout {
grid-template-columns: minmax(0, 1.6fr) minmax(340px, 0.72fr);
gap: clamp(50px, 7vw, 100px);
margin-top: 70px;
}
.kl-featured-article__media {
position: relative;
aspect-ratio: 16 / 10;
margin-bottom: 38px;
border-radius: 2px 42px 2px 2px;
}
.kl-featured-article__media::after {
position: absolute;
inset: 0;
border: 1px solid rgba(255, 255, 255, 0.45);
content: "";
pointer-events: none;
}
.kl-featured-article h3 {
max-width: 760px;
font-size: clamp(2.15rem, 3.7vw, 4rem);
}
.kl-article-list a {
position: relative;
padding: 34px 34px 34px 0;
transition: padding 280ms ease, background 280ms ease;
}
.kl-article-list a::after {
position: absolute;
top: 50%;
right: 8px;
content: "↗";
font-size: 1.25rem;
opacity: 0;
transform: translate(-8px, 8px);
transition: opacity 280ms ease, transform 280ms ease;
}
.kl-article-list a:hover {
padding-left: 18px;
background: var(--kl-paper);
}
.kl-article-list a:hover::after {
opacity: 1;
transform: translate(0, 0);
}
.kl-article-list h3 {
font-size: 1.35rem;
}
.kl-product-section {
position: relative;
background:
linear-gradient(115deg, rgba(255, 255, 255, 0.38), transparent 45%),
var(--kl-sand);
}
.kl-product-section::after {
position: absolute;
top: 14%;
right: -7vw;
width: 30vw;
aspect-ratio: 1;
border: 1px solid rgba(24, 37, 42, 0.13);
border-radius: 50%;
content: "";
}
.kl-product-section .wp-block-columns {
position: relative;
z-index: 2;
}
.kl-product-image::before {
inset: 8% 5% -3% 3%;
background: rgba(255, 255, 255, 0.64);
}
.kl-product-image img {
max-height: 720px;
filter: drop-shadow(0 45px 38px rgba(17, 17, 17, 0.22));
will-change: transform;
}
.kl-product-section h2 {
font-size: clamp(3rem, 5.2vw, 5.8rem);
}
.kl-product-section li {
margin-bottom: 13px;
}
.kl-story-section {
background:
linear-gradient(90deg, var(--kl-paper) 0 38%, #fff 38%);
}
.kl-story-note {
position: relative;
padding: clamp(42px, 5vw, 70px);
border-radius: 2px 40px 40px 40px;
box-shadow: 0 30px 70px rgba(24, 37, 42, 0.1);
}
.kl-story-note::after {
position: absolute;
right: -16px;
bottom: 46px;
width: 32px;
height: 32px;
background: var(--kl-rust);
border-radius: 50%;
content: "";
}
.kl-site-footer {
position: relative;
overflow: hidden;
padding-top: clamp(90px, 9vw, 140px);
}
.kl-site-footer::before {
position: absolute;
top: -28vw;
left: -8vw;
width: 48vw;
aspect-ratio: 1;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 50%;
content: "";
}
.kl-footer-grid,
.kl-footer-disclaimer,
.kl-footer-bottom {
position: relative;
z-index: 2;
}
.kl-footer-grid {
grid-template-columns: minmax(310px, 1.5fr) repeat(3, minmax(150px, 0.62fr));
}
.kl-footer-column h2 {
font-size: 1.12rem;
}
.kl-footer-menu a {
font-size: 0.88rem;
}
.kl-motion-ready .kl-hero h1,
.kl-motion-ready .kl-hero .kl-eyebrow,
.kl-motion-ready .kl-recognition {
will-change: transform, opacity;
}
@media (max-width: 1050px) {
:root {
--kl-container: min(100% - 44px, 980px);
}
.kl-hero h1 {
font-size: clamp(3.2rem, 7.5vw, 5.7rem);
}
.kl-footer-grid {
grid-template-columns: 1.2fr repeat(3, 0.7fr);
}
}
@media (max-width: 860px) {
:root {
--kl-container: min(100% - 34px, 760px);
}
.admin-bar .kl-site-header {
top: 46px;
}
.kl-site-header {
position: relative;
top: auto;
}
.kl-hero {
min-height: 0;
background:
radial-gradient(circle at 90% 3%, rgba(202, 213, 200, 0.55), transparent 32%),
var(--kl-paper);
}
.kl-hero h1 {
font-size: clamp(3.2rem, 11vw, 5.4rem);
}
.kl-recognition {
margin-top: 34px;
}
.kl-section h2,
.kl-featured-exercise h2,
.kl-product-section h2 {
font-size: clamp(2.6rem, 8vw, 4.4rem);
}
.kl-problem-route {
grid-column: span 12;
min-height: 0;
}
.kl-theme-columns {
border-bottom: 0;
}
.kl-theme-card,
.kl-theme-card:first-child,
.kl-theme-card:last-child {
min-height: 0;
padding: 38px 0;
}
.kl-card-index {
margin-bottom: 30px;
}
.kl-needs-grid > .wp-block-column:nth-child(2),
.kl-needs-grid > .wp-block-column:nth-child(3) {
transform: none;
}
.kl-featured-exercise {
grid-template-columns: 1fr;
}
.kl-story-section {
background: var(--kl-paper);
}
}
@media (max-width: 560px) {
body {
font-size: 16px;
}
.kl-hero {
padding-block: 66px 78px;
}
.kl-hero h1 {
font-size: clamp(2.75rem, 13vw, 4.15rem);
}
.kl-hero h1::after {
height: 4px;
}
.kl-section {
padding-block: 82px;
}
.kl-section h2,
.kl-featured-exercise h2,
.kl-product-section h2 {
font-size: clamp(2.35rem, 11vw, 3.6rem);
}
.kl-problem-route {
grid-template-columns: 34px 1fr;
padding: 28px !important;
}
.kl-problem-route__arrow {
display: none;
}
.kl-statement blockquote p {
font-size: clamp(2.55rem, 12vw, 4rem);
}
.kl-needs-grid > .wp-block-column {
min-height: 0;
padding: 30px;
}
.kl-featured-exercise__preview {
padding: 28px;
}
.kl-exercise-step {
grid-template-columns: 42px 1fr;
}
.kl-article-list a {
padding-right: 0;
}
.kl-footer-grid {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.kl-problem-route:hover,
.kl-theme-card:hover {
transform: none;
}
}