.chm-paywall {
--chm-ink: #000;
--chm-paper: #fff;
--chm-accent: #ff4f9a;
--chm-fade: #fff;
--chm-muted: #6b6b6b;
--chm-line: 2px;
position: relative;
margin: 2.5rem 0 3.5rem;
color: inherit;
font-family: inherit;
line-height: 1.5;
clear: both;
}
.chm-paywall *,
.chm-paywall *::before,
.chm-paywall *::after { box-sizing: border-box; } .chm-paywall-teaser { position: relative; }
.chm-paywall-fade {
height: 7rem;
margin-top: -7rem;
position: relative;
pointer-events: none;
background: linear-gradient(to bottom, transparent, var(--chm-fade) 85%);
} .chm-paywall-banner {
position: relative;
background: var(--chm-ink);
color: var(--chm-paper);
text-align: center;
padding: 1rem 1rem 1.05rem;
}
.chm-paywall.has-cat .chm-paywall-banner { margin-top: 3.25rem; }
.chm-paywall-banner h2 {
margin: 0 !important;
padding: 0 !important;
color: inherit !important;
font-family: inherit;
font-size: clamp(1.15rem, 2.4vw, 1.45rem) !important;
font-weight: 800;
letter-spacing: .02em;
line-height: 1.2;
border: 0 !important;
background: none !important;
}
.chm-peek {
position: absolute;
left: 50%;
bottom: calc(100% - 2px);
width: 96px;
height: auto;
transform: translateX(-50%);
overflow: visible;
}
.chm-peek-head { fill: var(--chm-ink); }
.chm-peek-eye { fill: var(--chm-accent); }
.chm-peek-pupil { fill: var(--chm-ink); }
.chm-peek-nose { fill: var(--chm-accent); }
.chm-peek-eyes {
transform-box: fill-box;
transform-origin: center;
animation: chm-blink 7s infinite 2s;
}
@keyframes chm-blink {
0%, 96%, 100% { transform: scaleY(1); }
98% { transform: scaleY(.1); }
}
.chm-paywall-subhead {
text-align: center;
max-width: 34em;
margin: 1.25rem auto 2.75rem;
font-size: 1.05rem;
} .chm-paywall-plans {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 2.75rem 1.25rem;
max-width: 980px;
margin: 0 auto;
align-items: stretch;
}
.chm-paywall-plans.chm-count-2 { max-width: 680px; }
.chm-paywall-plans.chm-count-1 { max-width: 360px; }
.chm-paywall-plans.chm-count-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); max-width: 1100px; }
.chm-plan {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
text-align: center;
margin-top: 1.6rem;
padding: 2rem 1.35rem 1.35rem;
color: var(--chm-ink);
--chm-muted: #6b6b6b;
} .chm-plan::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--chm-paper);
border: var(--chm-line) solid var(--chm-ink); border-radius: 48% 48% 22px 22px / 64px 64px 22px 22px;
}
.chm-ear {
position: absolute;
z-index: -2;
top: -24px;
width: 44px;
height: 44px;
overflow: visible;
}
.chm-ear--left { left: 13%; }
.chm-ear--right { right: 13%; }
.chm-ear-outer {
fill: var(--chm-paper);
stroke: var(--chm-ink);
stroke-width: 2;
stroke-linejoin: round;
}
.chm-ear-inner { fill: var(--chm-accent); opacity: .85; }
.chm-plan h3 {
margin: 0 0 .5rem !important;
color: inherit !important;
font-family: inherit;
font-size: 1.2rem !important;
font-weight: 800;
line-height: 1.2;
}
.chm-price-row {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
}
.chm-whiskers {
width: 34px;
height: 20px;
flex: none;
}
.chm-whiskers path {
fill: none;
stroke: currentColor;
stroke-width: 1.4;
stroke-linecap: round;
opacity: .55;
}
.chm-price {
margin: 0 !important;
font-size: 2.1rem;
font-weight: 800;
line-height: 1.1;
letter-spacing: -.01em;
font-variant-numeric: tabular-nums;
}
.chm-period {
margin: .2rem 0 1.1rem !important;
color: var(--chm-muted);
font-size: .88rem;
}
.chm-plan ul {
list-style: none !important;
margin: 0 0 1.35rem !important;
padding: 0 !important;
text-align: left;
font-size: .92rem;
line-height: 1.45;
flex: 1;
}
.chm-plan li {
position: relative;
margin: 0 0 .55rem !important;
padding: 0 0 0 1.6rem !important;
list-style: none !important;
}
.chm-plan li::before {
content: "";
position: absolute;
left: 0;
top: .2em;
width: 1em;
height: 1em;
background: var(--chm-accent);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='5' cy='10' rx='2.4' ry='3'/%3E%3Cellipse cx='9.5' cy='5.5' rx='2.4' ry='3.1'/%3E%3Cellipse cx='14.5' cy='5.5' rx='2.4' ry='3.1'/%3E%3Cellipse cx='19' cy='10' rx='2.4' ry='3'/%3E%3Cpath d='M12 11c-3.5 0-7 4.6-7 7.6 0 2 1.6 2.9 3.4 2.9 1.4 0 2.4-.7 3.6-.7s2.2.7 3.6.7c1.8 0 3.4-.9 3.4-2.9 0-3-3.5-7.6-7-7.6z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='5' cy='10' rx='2.4' ry='3'/%3E%3Cellipse cx='9.5' cy='5.5' rx='2.4' ry='3.1'/%3E%3Cellipse cx='14.5' cy='5.5' rx='2.4' ry='3.1'/%3E%3Cellipse cx='19' cy='10' rx='2.4' ry='3'/%3E%3Cpath d='M12 11c-3.5 0-7 4.6-7 7.6 0 2 1.6 2.9 3.4 2.9 1.4 0 2.4-.7 3.6-.7s2.2.7 3.6.7c1.8 0 3.4-.9 3.4-2.9 0-3-3.5-7.6-7-7.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.chm-cta {
display: block;
margin-top: auto;
padding: .8rem 1rem;
text-align: center;
background: var(--chm-ink);
color: var(--chm-paper) !important;
text-decoration: none !important;
font-weight: 700;
border: var(--chm-line) solid var(--chm-ink);
border-radius: 999px;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.chm-cta:hover {
background: var(--chm-accent);
border-color: var(--chm-accent);
color: var(--chm-ink) !important;
}
.chm-cta:focus-visible,
.chm-paywall-login a:focus-visible {
outline: 3px solid var(--chm-accent);
outline-offset: 3px;
} .chm-plan.is-single::before { border-style: dashed; }
.chm-plan.is-single .chm-cta {
background: var(--chm-paper);
color: var(--chm-ink) !important;
}
.chm-plan.is-single .chm-cta:hover {
background: var(--chm-accent);
border-color: var(--chm-accent);
} .chm-plan.is-featured { color: var(--chm-paper); }
.chm-plan.is-featured::before { background: var(--chm-ink); }
.chm-plan.is-featured .chm-ear-outer { fill: var(--chm-ink); }
.chm-plan.is-featured .chm-period { color: rgba(255, 255, 255, .7); }
.chm-plan.is-featured .chm-cta {
background: var(--chm-accent);
border-color: var(--chm-accent);
color: var(--chm-ink) !important;
}
.chm-plan.is-featured .chm-cta:hover {
background: var(--chm-paper);
border-color: var(--chm-paper);
}
.chm-badge {
position: absolute;
top: -.85rem;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
background: var(--chm-accent);
color: var(--chm-ink);
font-size: .78rem;
font-weight: 800;
padding: .3rem .8rem;
border-radius: 999px;
border: var(--chm-line) solid var(--chm-ink);
}
.chm-paywall-solo { max-width: 320px; margin: 0 auto; }
.chm-paywall-login {
text-align: center;
margin: 2rem 0 0;
font-size: 1rem;
}
.chm-paywall-login a {
color: inherit !important;
font-weight: 700;
text-decoration: underline;
text-decoration-color: var(--chm-accent);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.chm-paywall-footnote {
text-align: center;
margin: .6rem auto 0;
max-width: 36em;
font-size: .82rem;
color: var(--chm-muted);
} .chm-paywall.is-dark { --chm-muted: rgba(255, 255, 255, .65); }
.chm-paywall.is-dark .chm-paywall-banner { background: var(--chm-paper); color: var(--chm-ink); }
.chm-paywall.is-dark .chm-peek-head { fill: var(--chm-paper); }
.chm-paywall.is-dark .chm-plan.is-featured::before { border-color: var(--chm-paper); }
.chm-paywall.is-dark .chm-plan.is-featured .chm-ear-outer { stroke: var(--chm-paper); }
@media (max-width: 820px) {
.chm-paywall-plans,
.chm-paywall-plans.chm-count-2,
.chm-paywall-plans.chm-count-4 {
grid-template-columns: minmax(0, 1fr);
max-width: 420px;
}
}
@media (prefers-reduced-motion: reduce) {
.chm-peek-eyes { animation: none; }
.chm-cta { transition: none; }
} .chm-locked .page-links,
.chm-locked .post-page-numbers,
.chm-locked .post-nav-links,
.chm-locked .wp-link-pages,
.chm-locked .g1-pagination,
.chm-locked .g1-link-pages,
.chm-locked .entry-content .pagination,
.chm-locked .chm-paywall ~ *:not(.chm-paywall-keep) {
display: none !important;
}
.chm-paywall-teaser a,
.chm-paywall-teaser img {
pointer-events: none;
}
.chm-paywall-teaser img {
-webkit-user-drag: none;
user-select: none;
} .chm-gallery-card {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 1.1rem;
max-width: 760px;
margin: 0 auto 2.75rem;
padding: 1.1rem 1.25rem;
background: var(--chm-ink);
color: var(--chm-paper) !important;
text-decoration: none !important;
border: var(--chm-line) solid var(--chm-ink);
border-radius: 22px;
}
.chm-paywall.is-dark .chm-gallery-card { border-color: var(--chm-paper); }
.chm-gallery-stack {
position: relative;
width: 64px;
height: 72px;
flex: none;
} .chm-gallery-stack i {
position: absolute;
inset: 6px 8px 4px 6px;
border: 2px solid var(--chm-paper);
border-radius: 8px;
background: var(--chm-ink);
}
.chm-gallery-stack i:nth-child(1) { transform: rotate(-9deg); opacity: .5; }
.chm-gallery-stack i:nth-child(2) { transform: rotate(6deg); opacity: .75; }
.chm-gallery-stack i:nth-child(3) {
background:
radial-gradient(circle at 30% 38%, var(--chm-accent) 0 3px, transparent 3.5px),
radial-gradient(circle at 70% 38%, var(--chm-accent) 0 3px, transparent 3.5px),
linear-gradient(160deg, #2a2a2a, #000);
}
.chm-gallery-stack i:nth-child(3)::before,
.chm-gallery-stack i:nth-child(3)::after {
content: "";
position: absolute;
top: -11px;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 11px solid var(--chm-paper);
}
.chm-gallery-stack i:nth-child(3)::before { left: 5px; }
.chm-gallery-stack i:nth-child(3)::after { right: 5px; }
.chm-gallery-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.chm-gallery-count {
color: var(--chm-accent);
font-weight: 800;
font-size: .9rem;
font-variant-numeric: tabular-nums;
}
.chm-gallery-text strong { font-size: 1.1rem; line-height: 1.25; }
.chm-gallery-note { font-size: .85rem; opacity: .7; }
.chm-gallery-go {
padding: .65rem 1.1rem;
border-radius: 999px;
background: var(--chm-accent);
color: var(--chm-ink);
font-weight: 700;
white-space: nowrap;
transition: background-color .15s ease;
}
.chm-gallery-card:hover .chm-gallery-go { background: var(--chm-paper); }
.chm-gallery-card:focus-visible { outline: 3px solid var(--chm-accent); outline-offset: 3px; } .chm-gallery-jump { text-align: center; margin: 1rem 0 2rem; }
.chm-gallery-jump-btn {
display: inline-block;
padding: .75rem 1.4rem;
border-radius: 999px;
background: #000;
color: #fff !important;
font-weight: 700;
text-decoration: none !important;
border: 2px solid #000;
}
.chm-gallery-jump-btn::before { content: "🐾 "; }
.chm-gallery-jump-btn:hover { background: var(--chm-accent, #ff4f9a); border-color: var(--chm-accent, #ff4f9a); color: #000 !important; }
.chm-to-gallery { cursor: pointer; }
@media (max-width: 600px) {
.chm-gallery-card { grid-template-columns: auto minmax(0, 1fr); }
.chm-gallery-go { grid-column: 1 / -1; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
.chm-gallery-go { transition: none; }
}