.ckl-article__hero {
background-color: var(--ckl-aqua-blue);
padding-bottom: clamp(3rem, 7.52vw, 6.95rem); }
.ckl-article__title {
font-family: var(--ckl-font-title);
font-weight: var(--ckl-fw-title);
font-size: clamp(2.25rem, 4.73vw, 4.375rem); line-height: 84%;
letter-spacing: -0.01em;
color: var(--ckl-blue);
margin: 0;
}
.ckl-article__hero-media {
position: relative;
margin: clamp(1.5rem, 2.36vw, 2.1875rem) 0 0; overflow: hidden;
aspect-ratio: 1894 / 752;
}
.ckl-article__hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
} .ckl-article__hero-media .ckl-article__hero-art {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
} .ckl-article__hero-panel {
position: absolute;
-webkit-clip-path: polygon(0.7% 33.6%, 99.3% 0.4%, 99.3% 66.4%, 0.7% 99.6%);
clip-path: polygon(0.7% 33.6%, 99.3% 0.4%, 99.3% 66.4%, 0.7% 99.6%);
} .ckl-article__hero-panel--main {
left: 65.357%;
top: 15.559%;
width: 15.742%;
height: 68.756%;
} .ckl-article__hero-panel--far {
left: 18.901%;
top: 42.399%;
width: 3.587%;
height: 15.667%;
} .ckl-article__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem 2.5rem;
flex-wrap: wrap;
margin-top: 2.1875rem; }
.ckl-article__meta-authors {
display: flex;
align-items: center;
gap: 1.25rem;
flex-wrap: wrap;
}
.ckl-article__meta-author {
display: flex;
align-items: center;
gap: 1.3125rem; } .ckl-article__meta-author img {
width: 3.6875rem; height: 3.6875rem;
object-fit: cover;
background: url(//cheesecakelabs.com/blog/wp-content/themes/cheesecakeLabs-v5/inc/assets/img/author-photo-bg.png) center / cover no-repeat;
}
.ckl-article__meta-author strong {
display: block;
font-weight: 700;
font-size: 1.05rem; line-height: 1;
color: var(--ckl-dark);
}
.ckl-article__meta-author em {
display: block;
font-style: normal;
font-size: 0.7875rem; line-height: 1;
color: var(--ckl-dark);
margin-top: 0.35rem; }
.ckl-article__meta-right {
display: flex;
align-items: center;
gap: 1.5rem 3.8125rem; flex-wrap: wrap;
margin-left: auto;
}
.ckl-article__meta-read {
font-size: 1.25rem; line-height: 1;
color: var(--ckl-dark);
margin: 0;
}
.ckl-article__meta-read a {
font-weight: 700;
color: var(--ckl-dark);
transition: color 0.2s ease-in-out;
}
.ckl-article__meta-read a:hover {
color: var(--ckl-blue);
}
.ckl-article__meta-dates {
display: flex;
gap: 1.36rem; }
.ckl-article__meta-date span {
display: block;
font-weight: 500;
font-size: 0.875rem; line-height: 1.2;
color: var(--ckl-secondary, #313131);
}
.ckl-article__meta-date time {
display: block;
font-size: 1.25rem; line-height: 1.2;
color: var(--ckl-secondary, #313131);
} .ckl-article__share-toggle {
--sweep-from: var(--ckl-gray);
--sweep-to: var(--ckl-blue);
--sweep-label: var(--ckl-dark);
--sweep-label-hover: var(--ckl-white);
height: 3.5875rem; padding: 0 2.2rem;
font-size: 1.225rem; font-weight: 500;
} .ckl-article__layout { --ckl-sticky-top: calc(var(--ckl-header-h, 5.25rem) + 2.25rem); --ckl-sticky-bottom: 1.5rem; position: relative;
display: grid;
grid-template-columns: minmax(13rem, 22.27rem) minmax(0, 1fr) 3.5875rem; gap: clamp(2rem, 6.29vw, 5.8125rem); padding-top: clamp(4rem, 8.89vw, 8.225rem);  padding-bottom: clamp(4rem, 8.89vw, 8.225rem);
} .ckl-article__sidebar {
position: sticky;
top: var(--ckl-sticky-top);
align-self: start;
display: flex;
flex-direction: column;
gap: 3.5rem; min-height: 0;
max-height: calc(100vh - var(--ckl-sticky-top) - var(--ckl-sticky-bottom));
max-height: calc(100svh - var(--ckl-sticky-top) - var(--ckl-sticky-bottom));
} .ckl-article__sidebar > .ckl-breadcrumb,
.ckl-article__sidebar-cta {
flex: 0 0 auto;
}
.ckl-article__toc {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.ckl-article__toc-panel {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.ckl-article__toc-heading,
.ckl-article__toc-title {
flex: 0 0 auto;
} .ckl-article__toc-scroll {
flex: 1 1 auto;
margin-top: 2.45rem; min-height: 5.25rem; overflow-y: auto;
overflow-x: hidden; overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--ckl-blue) rgb(0 0 0 / 6%);
} .ckl-article__toc-scroll::-webkit-scrollbar {
width: 0.375rem;
}
.ckl-article__toc-scroll::-webkit-scrollbar-track {
background-color: rgb(0 0 0 / 4%);
}
.ckl-article__toc-scroll::-webkit-scrollbar-thumb {
background-color: var(--ckl-blue);
border: 0.0625rem solid transparent;
border-radius: 9999px;
background-clip: content-box;
} [data-toc].is-scrollable .ckl-article__toc-scroll {
padding-right: 0.75rem;
--fade-top: 1.5rem;
--fade-bottom: 1.5rem;
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0,
#000 var(--fade-top),
#000 calc(100% - var(--fade-bottom)),
transparent 100%
);
mask-image: linear-gradient(
to bottom,
transparent 0,
#000 var(--fade-top),
#000 calc(100% - var(--fade-bottom)),
transparent 100%
);
} [data-toc].is-at-top .ckl-article__toc-scroll {
--fade-top: 0px;
}
[data-toc].is-at-bottom .ckl-article__toc-scroll {
--fade-bottom: 0px;
} @media (max-height: 560px) {
.ckl-article__sidebar {
position: static;
max-height: none;
}
.ckl-article__toc-scroll {
max-height: none;
}
} .ckl-article__sidebar .ckl-breadcrumb {
font-family: var(--ckl-font-text);
font-weight: var(--ckl-fw-text);
font-size: 1.225rem; line-height: 140%;
text-transform: none;
letter-spacing: normal;
color: var(--ckl-dark);
display: block;
}
.ckl-article__sidebar .ckl-breadcrumb a {
color: var(--ckl-blue);
text-decoration: underline;
text-underline-offset: 0.12em;
transition: color 0.2s ease-in-out;
}
.ckl-article__sidebar .ckl-breadcrumb a:hover {
color: var(--ckl-dark);
} .ckl-article__sidebar .ckl-breadcrumb [aria-current='page'] {
display: block;
}
.ckl-article__sidebar .ckl-breadcrumb .ckl-breadcrumb__sep:has(+ [aria-current='page']) {
display: none;
}
.ckl-article__toc-heading {
font-family: var(--ckl-font-title);
font-weight: var(--ckl-fw-title);
font-size: 2.1875rem; line-height: 100%;
color: var(--ckl-dark);
margin: 0 0 2.45rem; } .ckl-article__toc-mobile-toggle {
display: none;
width: 100%;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0;
border: 0;
background: none;
text-align: left;
cursor: pointer;
font-family: var(--ckl-font-title);
font-weight: var(--ckl-fw-title);
font-size: 2.1875rem; line-height: 100%;
color: var(--ckl-dark);
transition: color 0.2s ease-in-out;
}
.ckl-article__toc-mobile-toggle:hover {
color: var(--ckl-blue);
}
.ckl-article__toc-mobile-toggle svg {
flex: 0 0 auto;
transition: transform 0.28s var(--ckl-ease-panel);
}
.ckl-article__toc-mobile-toggle[aria-expanded='false'] svg {
transform: rotate(-90deg);
}
.ckl-article__toc-title {
display: block;
font-size: 1.05rem; color: var(--ckl-dark);
} .ckl-article__toc-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1rem;
} .ckl-article__toc-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
min-width: 0;
}
.ckl-article__toc-toggle {
display: none; flex: 0 0 auto;
padding: 0;
border: 0;
background: none;
color: var(--ckl-dark);
cursor: pointer;
line-height: 0;
transition:
color 0.2s ease-in-out,
transform 0.28s var(--ckl-ease-panel);
}
[data-toc].is-collapsible .ckl-article__toc-toggle {
display: block;
}
.ckl-article__toc-toggle:hover {
color: var(--ckl-blue);
}
.ckl-article__toc-toggle svg {
transition: transform 0.28s var(--ckl-ease-panel);
}
.ckl-article__toc-toggle[aria-expanded='false'] svg {
transform: rotate(-90deg);
} .ckl-article__toc-sub {
list-style: none;
margin: 1rem 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1rem;
} .ckl-article__toc-sub[hidden],
.ckl-article__toc-panel[hidden] {
display: none;
} [data-toc].is-measuring .ckl-article__toc-sub {
display: flex !important;
height: auto !important;
}
[data-toc].is-measuring .ckl-article__toc-panel {
display: flex !important;
height: auto !important;
} .ckl-article__toc-sub li {
position: relative;
padding-left: 1.575rem; }
.ckl-article__toc-sub li::before {
content: '';
position: absolute;
left: 0.5rem;
top: 0.62em;
width: 0.28rem;
height: 0.28rem;
border-radius: 50%;
background-color: var(--ckl-dark);
} .ckl-article__toc-sub li.ckl-toc-level-4 {
padding-left: 2.625rem; }
.ckl-article__toc-sub li.ckl-toc-level-4::before {
left: 1.55rem;
}
.ckl-article__toc-sub li.ckl-toc-level-5,
.ckl-article__toc-sub li.ckl-toc-level-6 {
padding-left: 3.675rem; }
.ckl-article__toc-sub li.ckl-toc-level-5::before,
.ckl-article__toc-sub li.ckl-toc-level-6::before {
left: 2.6rem;
} .ckl-article__toc a {
font-size: 1.05rem; line-height: 1.7;
color: var(--ckl-dark);
transition: color 0.2s ease-in-out;
} .ckl-article__toc-list > li.ckl-toc-level-1 > .ckl-article__toc-row a,
.ckl-article__toc-list > li.ckl-toc-level-2 > .ckl-article__toc-row a {
font-weight: 500;
line-height: 1;
}
.ckl-article__toc a:hover,
.ckl-article__toc a.is-active {
color: var(--ckl-blue);
}
.ckl-article__toc a.is-active {
font-weight: 500;
}
.ckl-article__sidebar-cta p {
font-weight: 700;
font-size: 1rem;
line-height: 130%;
color: var(--ckl-dark);
margin: 0 0 0.75rem;
}   .ckl-article__player .audio-label {
display: none;
}
.ckl-article__player .elevenlabs-audio-player {
margin: 0;
}
.ckl-article__player .elevenlabs-audio,
.ckl-article__player audio {
display: block;
width: 100%;
height: 3.4375rem; }
.ckl-article__player {
margin-bottom: 2.8rem; }
.ckl-article__player-title {
font-weight: 500;
font-size: 1.225rem; line-height: 1.3;
color: var(--ckl-dark);
margin: 0 0 0.7875rem; }
.ckl-audio-bar {
display: flex;
align-items: center;
gap: 1.05rem; height: 2.625rem; padding-inline: 1.05rem 0.82rem; background-color: var(--ckl-gray);
}
.ckl-audio-bar button {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
padding: 0.25rem;
background: transparent;
color: var(--ckl-dark);
cursor: pointer;
transition: color 0.2s ease-in-out;
}
.ckl-audio-bar button:hover,
.ckl-audio-bar button:focus-visible {
color: var(--ckl-blue);
}
.ckl-audio-bar__play .ckl-audio-bar__icon-play,
.ckl-audio-bar__play .ckl-audio-bar__icon-pause {
width: 0.66rem; height: 0.79rem; }
.ckl-audio-bar__play[aria-pressed='false'] .ckl-audio-bar__icon-pause,
.ckl-audio-bar__play[aria-pressed='true'] .ckl-audio-bar__icon-play {
display: none;
}
.ckl-audio-bar__time {
font-size: 0.6125rem; color: var(--ckl-dark);
white-space: nowrap;
min-width: 4.5em;
} .ckl-audio-bar__seek {
flex: 1;
appearance: none;
-webkit-appearance: none;
height: 0.175rem; border-radius: 0.0875rem;
background:
linear-gradient(var(--ckl-blue), var(--ckl-blue)) no-repeat left center / var(--ckl-audio-progress, 0%) 100%,
#c5c5c5;
cursor: pointer;
}
.ckl-audio-bar__seek::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
width: 0.4375rem; height: 0.4375rem;
border-radius: 50%;
border: 0;
background: var(--ckl-blue);
}
.ckl-audio-bar__seek::-moz-range-thumb {
width: 0.4375rem;
height: 0.4375rem;
border-radius: 50%;
border: 0;
background: var(--ckl-blue);
}
.ckl-audio-bar__mute[aria-pressed='true'] .ckl-audio-bar__waves {
opacity: 0.25;
}
.ckl-audio-bar__mute svg {
width: 0.82rem; height: 0.79rem;
}
.ckl-audio-bar__rate svg {
width: 0.9rem; height: 0.2rem;
}    .post-summary__trigger,
.post-faq__question {
list-style: none;
cursor: pointer;
}
.post-summary__trigger::-webkit-details-marker,
.post-faq__question::-webkit-details-marker {
display: none;
}
.post-summary {
background-color: var(--ckl-gray);
border: 0;
border-radius: 0; margin-bottom: 2.8rem; }
.post-summary__trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.4rem;
}
.post-summary__label {
font-family: var(--ckl-font-tag);
font-weight: var(--ckl-fw-tag);
font-size: 0.7875rem; letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--ckl-blue);
} .post-summary__toggle {
flex: 0 0 auto;
position: relative;
display: block;
width: 1.75rem;
height: 1.75rem;
background-color: var(--ckl-blue);
}
.post-summary__toggle-icon {
position: absolute;
inset: 0;
transition: transform 0.28s var(--ckl-ease-panel);
}
.post-summary__toggle-icon::before,
.post-summary__toggle-icon::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
background-color: var(--ckl-white);
transform: translate(-50%, -50%);
}
.post-summary__toggle-icon::before {
width: 0.75rem;
height: 2px;
}
.post-summary__toggle-icon::after {
width: 2px;
height: 0.75rem;
}
.post-summary[open] .post-summary__toggle-icon {
transform: rotate(45deg);
} .post-summary__content-inner {
padding: 0 1.4rem 1.4rem;
}
.post-summary__list {
list-style: none;
margin: 0;
padding: 0;
}
.post-summary__list li {
position: relative;
padding-left: 1.05rem;
margin-bottom: 0.75em;
font-size: 1.05rem; line-height: 1.5;
}
.post-summary__list li::before {
content: '';
position: absolute;
left: 0;
top: 0.55em;
width: 0.375rem;
height: 0.375rem;
background-color: var(--ckl-blue); } .post-faq {
border-top: 1px solid var(--ckl-light-gray);
margin-top: 2.8rem;
} .post-faq__title {
font-family: var(--ckl-font-title);
font-weight: var(--ckl-fw-title);
font-size: clamp(1.75rem, 3.4vw, 3.15rem); line-height: 95%;
color: var(--ckl-dark);
margin: 1.8em 0 1em;
}
.post-faq__item {
border-bottom: 1px solid var(--ckl-light-gray);
}
.post-faq__question {
position: relative;
display: block;
padding: 1.05rem 2.5rem 1.05rem 0;
font-family: var(--ckl-font-text);
font-weight: 500;
font-size: 1.225rem; line-height: 1.4;
color: var(--ckl-dark);
transition: color 0.2s ease-in-out;
}
.post-faq__question:hover {
color: var(--ckl-blue);
} .post-faq__question::after {
content: '';
position: absolute;
right: 0.5rem;
top: 1.5rem;
width: 0.5rem;
height: 0.5rem;
border-right: 2px solid var(--ckl-blue);
border-bottom: 2px solid var(--ckl-blue);
transform: rotate(45deg);
transition: transform 0.28s var(--ckl-ease-panel);
}
.post-faq__item[open] .post-faq__question::after {
transform: rotate(225deg);
} .post-faq__answer > p {
margin: 0;
padding-bottom: 1.05rem;
font-size: 1.225rem; line-height: 157%;
} .post-summary__content,
.post-faq__answer,
.ckl-article__toc-sub,
.ckl-article__toc-panel {
overflow: hidden;
transition: height 0.28s var(--ckl-ease-panel);
}
@media (prefers-reduced-motion: reduce) {
.post-summary__content,
.post-faq__answer,
.ckl-article__toc-sub,
.ckl-article__toc-panel {
transition: none !important;
}
.ckl-article__toc-toggle,
.ckl-article__toc-toggle svg,
.ckl-article__toc-mobile-toggle svg,
.post-summary__toggle-icon,
.post-faq__question::after {
transition: none !important;
}
} .ckl-article__share-rail {
position: sticky;
top: var(--ckl-sticky-top);
align-self: start;
}
.ckl-share {
display: flex;
flex-direction: column;
gap: 0.95rem; } .ckl-share__btn {
display: flex;
align-items: center;
justify-content: center;
width: 3.5875rem; height: 3.5875rem;
border: 0;
border-radius: 0;
background: var(--ckl-gray);
color: var(--ckl-dark);
cursor: pointer;
transition:
color 0.2s ease-in-out,
background-color 0.2s ease-in-out;
}
.ckl-share__btn svg {
width: 1.75rem; height: 1.75rem;
}
.ckl-share__btn--x svg {
width: 1.3rem; height: 1.3rem;
}
.ckl-share__btn:hover,
.ckl-share__btn:focus-visible {
color: var(--ckl-white);
background-color: var(--ckl-blue);
}
.ckl-article__share-mobile {
display: none;
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px solid var(--ckl-light-gray);
}
.ckl-article__share-mobile .ckl-share {
flex-direction: row;
margin-top: 1rem;
}  .ckl-article__author-box {
margin-top: clamp(3rem, 5vw, 4.5rem);
}
.ckl-article__author-item {
display: flex;
gap: 1.85rem; align-items: center;
margin-bottom: 1.75rem;
}
.ckl-article__author-item:last-child {
margin-bottom: 0;
}
.ckl-article__author-img img {
display: block;
width: 5.18rem; height: 5.18rem;
object-fit: cover;
background: url(//cheesecakelabs.com/blog/wp-content/themes/cheesecakeLabs-v5/inc/assets/img/author-photo-bg.png) center / cover no-repeat;
}
.ckl-article__author-name {
display: block;
font-weight: 700;
font-size: 1.225rem; line-height: 1;
color: var(--ckl-dark);
}
.ckl-article__author-name:hover {
color: var(--ckl-blue);
}
.ckl-article__author-role {
display: block;
font-size: 0.875rem; line-height: 1;
color: var(--ckl-dark);
margin-top: 0.5rem; }
.ckl-article__author-linkedin {
display: flex;
align-items: center;
justify-content: center;
width: 3.5875rem; height: 3.5875rem;
margin-left: auto;
background: var(--ckl-gray);
color: var(--ckl-dark);
transition:
color 0.2s ease-in-out,
background-color 0.2s ease-in-out;
}
.ckl-article__author-linkedin:hover {
color: var(--ckl-white);
background-color: var(--ckl-blue);
} @media (max-width: 1024px) {
.ckl-article__layout {
grid-template-columns: minmax(0, 1fr);
} .ckl-article__sidebar {
position: static;
order: -1;
gap: 2rem;
max-height: none;
min-height: 0;
}
.ckl-article__toc-heading {
display: none;
}
.ckl-article__toc-mobile-toggle {
display: flex;
}
.ckl-article__toc-panel {
margin-top: 1.25rem;
} .ckl-article__toc-scroll {
margin-top: 1.25rem;
max-height: 26rem;
max-height: min(60svh, 26rem);
}
.ckl-article__share-rail {
display: none;
}
.ckl-article__share-mobile {
display: block;
}
.ckl-article__meta-right {
margin-left: 0;
}
} @media (max-width: 768px) {
.ckl-article__toc-mobile-toggle {
font-size: 1.75rem; }
.ckl-article__toc-list,
.ckl-article__toc-sub {
gap: 0.75rem;
}
.ckl-article__toc-sub li {
padding-left: 1.2rem;
}
.ckl-article__toc-sub li::before {
left: 0.3rem;
}
.ckl-article__toc-sub li.ckl-toc-level-4 {
padding-left: 2rem;
}
.ckl-article__toc-sub li.ckl-toc-level-4::before {
left: 1.1rem;
}
.ckl-article__toc-sub li.ckl-toc-level-5,
.ckl-article__toc-sub li.ckl-toc-level-6 {
padding-left: 2.8rem;
}
.ckl-article__toc-sub li.ckl-toc-level-5::before,
.ckl-article__toc-sub li.ckl-toc-level-6::before {
left: 1.9rem;
}
.ckl-article__toc-scroll {
max-height: 22rem;
max-height: min(55svh, 22rem);
}
}
@media (max-width: 430px) {
.ckl-article__toc-mobile-toggle {
font-size: 1.5rem; gap: 0.5rem;
}
.ckl-article__toc-row {
gap: 0.35rem;
}
}