/* =====================================================================
KlinikPlus — "Compare Plans" block
---------------------------------------------------------------------
Covers the Compare Plans header row (title + strapline + billing
toggle + the three plan cards) and the comparison table beneath it.
Two parts, and they have different ranges:
• Sections A–B — the shared palette and the per-plan accents
(Basic coral / Gold amber / Platinum navy).
These run at EVERY width: the phone's segmented
plan picker, featured strip and Select Plan
button all used to be coral for all three plans.
• Section 1+ — the desktop layout redesign, >= 1200px only.
Below that `pricing-mobile.css` and `tablet.css`
still own the layout; the only other rule under
1200px is the compatibility shim in section 0,
which restores markup defaults the blade changed.
Loaded last in layout/header.blade.php (pricing routes only), after
klinikplus.css, updated.css, pricing-mobile.css and tablet.css, so it
out-cascades all of them.
===================================================================== */
/* =====================================================================
A) PALETTE
Per-plan accents are keyed off `data-plan-type`, which the blade slugs
from the plan's `plan_type` (falling back to its name). Anything
outside basic/gold/platinum falls through to the coral default, which
is what every plan used to get.
===================================================================== */
.klinikplus-pricing-page {
--kp-cmp-navy: #17284B;
--kp-cmp-ink: #1F2A44;
--kp-cmp-muted: #6B7488;
--kp-cmp-line: #EDEFF4;
--kp-cmp-surface: #FFFFFF;
--kp-cmp-head-bg: #F1F3F7;
--kp-cmp-row-hover: #FAFBFD;
--kp-plan-basic: #FF8E6C;
--kp-plan-gold: #FFAA09;
--kp-plan-platinum: #17284B;
/* Fallbacks for elements that carry no `data-plan-type`. */
--kp-plan: var(--kp-plan-basic);
--kp-plan-glow: rgba(255, 142, 108, 0.35);
}
/* Each tab and each card resolves `--kp-plan` for its own subtree, so
every accent below can be written once against the variable. */
.klinikplus-pricing-page [data-plan-type="basic"] {
--kp-plan: var(--kp-plan-basic);
--kp-plan-glow: rgba(255, 142, 108, 0.35);
}
.klinikplus-pricing-page [data-plan-type="gold"] {
--kp-plan: var(--kp-plan-gold);
--kp-plan-glow: rgba(255, 170, 9, 0.35);
}
.klinikplus-pricing-page [data-plan-type="platinum"] {
--kp-plan: var(--kp-plan-platinum);
--kp-plan-glow: rgba(23, 40, 75, 0.35);
}
/* =====================================================================
B) PER-PLAN ACCENTS — every width
The comparison table's column headers were already tinted per plan by
klinikplus.css. Everything else in the block was hard-coded coral, so
on phones (where the headers are hidden and the tabs stand in for
them) Gold and Platinum both read as Basic.
===================================================================== */
/* Phone segmented plan picker. `pricing-mobile.css` sets the coral at
(0,2,1); this is (0,3,1) and loads later. */
.klinikplus-pricing-page .compare-plan-tabs .compare-plan-tab.is-active {
background: var(--kp-plan);
box-shadow: 0 2px 8px var(--kp-plan-glow);
}
/* The 4px bar down the left edge of the phone's featured plan strip. */
.klinikplus-pricing-page .klinikplus-compare-card::before {
background: var(--kp-plan);
}
/* Select Plan. `!important` is needed only because the phone rule in
pricing-mobile.css uses it; the specificity here is higher either way. */
.klinikplus-pricing-page .klinikplus-compare-card .klinikplus-compare-subscribe-btn {
background: var(--kp-plan) !important;
box-shadow: 0 6px 16px var(--kp-plan-glow);
}
.klinikplus-pricing-page .klinikplus-compare-card .klinikplus-compare-subscribe-btn:hover {
background: var(--kp-plan) !important;
filter: brightness(0.94);
}
/* Plan name. Deliberately NOT `!important`: on phones the name sits on
the near-black featured strip, where pricing-mobile.css pins it to
white with `!important` and wins — navy on black would be unreadable.
From 768px up the card is on white and the plan colour applies. */
.klinikplus-pricing-page .klinikplus-compare-card .klinikplus-compare-card-plan {
color: var(--kp-plan);
}
/* Phone only: the featured strip is near-black (#150F02), and Platinum's
navy sits at 1.3:1 against it — the button keeps its white label but
loses its pill entirely, and the 4px edge bar disappears. Keep the
colour exactly as it is elsewhere and give both a hairline instead of
substituting a lighter blue. Basic and Gold need neither. */
@media (max-width: 767px) {
.klinikplus-pricing-page .klinikplus-compare-card[data-plan-type="platinum"] .klinikplus-compare-subscribe-btn {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}
.klinikplus-pricing-page .klinikplus-compare-card[data-plan-type="platinum"]::before {
box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.28);
}
}
/* =====================================================================
0) COMPATIBILITY — keep phone/tablet layout byte-identical
The blade now prints "Service" / "Basic" instead of "SERVICE" /
"BASIC", and carries three desktop-only spans. Undo both below 1200px
so nothing under the old breakpoints moves.
===================================================================== */
@media (max-width: 1199.98px) {
.klinikplus-pricing-page .comparison-table thead th {
text-transform: uppercase;
}
.klinikplus-pricing-page .klinikplus-compare-subtitle,
.klinikplus-pricing-page .klinikplus-compare-toggle-heading,
.klinikplus-pricing-page .klinikplus-compare-toggle-option {
display: none !important;
}
}
@media (min-width: 1200px) {
/* =================================================================
1) HEADER ROW — title + strapline + toggle | three plan cards
Keeps the 26% / 74% split that lines the cards up with the table
columns underneath, and switches the cards to boxed panels.
================================================================= */
.klinikplus-pricing-page .klinikplus-compare-section {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 0 !important;
margin-bottom: 2rem;
}
.klinikplus-pricing-page .klinikplus-compare-left {
flex: 0 0 26% !important;
max-width: 26% !important;
display: flex;
flex-direction: column;
align-items: flex-start !important;
justify-content: flex-start;
gap: 0.75rem;
padding: 0.5rem 1rem 0 0;
}
/* 2rem, not the design's optical 2.5rem: the left column is only 26% of
the container (234px of usable width at both 1200 and 1440, which is
where `.klinikplus-container` caps out), and "Compare Plans" measures
279px at 40px — it wrapped to two lines. At 32px it is 223px and sits
on one. Wrapping is left enabled on purpose for longer translations
("Pläne vergleichen"), where two balanced lines beat an overflow. */
.klinikplus-pricing-page .klinikplus-compare-title {
font-size: 2rem !important;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--kp-cmp-navy);
text-align: left;
text-wrap: balance;
margin: 0;
}
.klinikplus-pricing-page .klinikplus-compare-subtitle {
display: block;
margin: 0;
max-width: 20rem;
font-family: 'Outfit', sans-serif;
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.5;
color: var(--kp-cmp-muted);
}
/* --- billing toggle ---------------------------------------------
The row wraps: the "Pay monthly or yearly" heading takes a full
line, then Monthly | switch | Yearly sit under it. The original
trailing `.klinikplus-toggle-text` is the phone/tablet copy of
that heading, so it is hidden here.
----------------------------------------------------------------- */
.klinikplus-pricing-page .klinikplus-compare-toggle-section {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start !important;
gap: 0.75rem;
margin-top: 1rem;
}
.klinikplus-pricing-page .klinikplus-compare-toggle-section > .klinikplus-toggle-text {
display: none;
}
.klinikplus-pricing-page .klinikplus-compare-toggle-heading {
display: block;
flex: 0 0 100%;
margin-bottom: 0.25rem;
font-family: 'Outfit', sans-serif;
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.4;
color: var(--kp-cmp-ink);
}
.klinikplus-pricing-page .klinikplus-compare-toggle-option {
display: block;
font-family: 'Outfit', sans-serif;
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.4;
color: var(--kp-cmp-muted);
transition: color 0.25s ease;
}
/* The active side of the switch reads as the selected one. */
.klinikplus-pricing-page .klinikplus-compare-toggle-section:has(#compareToggle:not(:checked)) .klinikplus-compare-toggle-option--monthly,
.klinikplus-pricing-page .klinikplus-compare-toggle-section:has(#compareToggle:checked) .klinikplus-compare-toggle-option--yearly {
color: var(--kp-cmp-ink);
font-weight: 600;
}
/* A thin rule between the switch and "Yearly", as in the design. */
.klinikplus-pricing-page .klinikplus-compare-toggle-option--yearly::before {
content: '';
display: inline-block;
width: 1px;
height: 1rem;
margin-right: 0.75rem;
vertical-align: -0.2rem;
background: #D8DCE5;
}
/* `#pricing-compare-section` carries `.fade-in-up`, and klinikplus.css
stages EVERY inside a `.fade-in-up` with `opacity: 0` +
`translateY(20px)` until the scroll observer adds `.animate`. That
swallows the two billing captions and knocks the toggle knob 20px
below its track. Opt this block's spans out of the stagger — the
block as a whole still fades in. */
.klinikplus-pricing-page .klinikplus-compare-toggle-section span,
.klinikplus-pricing-page .klinikplus-compare-toggle-section .klinikplus-toggle-slider {
opacity: 1;
transform: none;
/* The inherited 0.8s/0.3s-delay stagger transition also covers
`transform`, and a running transition outranks every author
declaration — it pinned the knob at its resting position when the
switch was flipped. Drop it and give the knob its own. */
transition: none;
}
.klinikplus-pricing-page .klinikplus-compare-toggle-section .klinikplus-toggle-label {
width: 46px;
height: 26px;
background-color: var(--kp-plan-basic);
}
.klinikplus-pricing-page .klinikplus-compare-toggle-section .klinikplus-toggle-slider {
top: 3px;
left: 3px;
width: 20px;
height: 20px;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2);
transition: transform 0.25s ease;
}
.klinikplus-pricing-page .klinikplus-compare-toggle-section .klinikplus-toggle-input:checked + .klinikplus-toggle-label .klinikplus-toggle-slider {
transform: translateX(20px);
}
/* =================================================================
2) PLAN CARDS
================================================================= */
.klinikplus-pricing-page .klinikplus-compare-right {
flex: 0 0 74% !important;
max-width: 74% !important;
width: 74% !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch;
justify-content: flex-start !important;
/* No flex gap: each card is one table column wide and carries its own
0.75rem side margins, which centres it exactly over its column. */
gap: 0 !important;
}
.klinikplus-pricing-page .klinikplus-compare-card {
flex: 1 1 0 !important;
min-width: 0 !important;
max-width: none !important;
width: auto !important;
margin: 0 0.75rem !important;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 0;
padding: 1.75rem 1.5rem !important;
border: 1px solid var(--kp-cmp-line);
border-radius: 1rem;
background: var(--kp-cmp-surface);
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04),
0 10px 28px rgba(16, 24, 40, 0.06);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.klinikplus-pricing-page .klinikplus-compare-card:hover {
transform: translateY(-3px);
box-shadow: 0 2px 4px rgba(16, 24, 40, 0.05),
0 16px 36px rgba(16, 24, 40, 0.10);
}
.klinikplus-pricing-page .klinikplus-compare-card-plan {
font-family: 'Outfit', sans-serif;
font-size: 1.375rem;
font-weight: 700;
line-height: 1.2;
color: var(--kp-cmp-navy);
margin: 0 0 0.625rem;
}
/* Price over period, not side by side. */
.klinikplus-pricing-page .klinikplus-price-inline--compare {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.375rem;
white-space: normal;
margin-bottom: 1.25rem;
}
.klinikplus-pricing-page .klinikplus-compare-card-price {
font-size: 2rem !important;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--kp-cmp-navy);
margin: 0;
}
.klinikplus-pricing-page .klinikplus-compare-card-period {
font-family: 'Outfit', sans-serif !important;
font-size: 0.875rem !important;
font-weight: 400 !important;
line-height: 1.4 !important;
color: var(--kp-cmp-muted);
margin: 0;
}
.klinikplus-pricing-page .klinikplus-compare-subscribe-btn {
width: 100%;
max-width: 11.5rem;
height: auto !important;
margin-top: auto;
padding: 0.75rem 1.25rem;
border: none;
border-radius: 6.25rem;
color: #FFFFFF;
font-family: 'Outfit', sans-serif !important;
font-size: 0.9375rem !important;
font-weight: 600 !important;
line-height: 1.35 !important;
transition: filter 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
/* Colour comes from section B; this only adds the desktop lift. */
.klinikplus-pricing-page .klinikplus-compare-card .klinikplus-compare-subscribe-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 18px var(--kp-plan-glow);
}
/* Per-plan accents for the card title and Select Plan button live in
section B — they are the same at every width. */
/* =================================================================
3) COMPARISON TABLE
================================================================= */
.klinikplus-pricing-page .comparison-table-container {
border: 1px solid var(--kp-cmp-line);
border-radius: 0.875rem;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04),
0 10px 30px rgba(16, 24, 40, 0.05);
}
.klinikplus-pricing-page .comparison-table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
}
/* Column widths mirror the 26% / 74%-in-three split of the cards above,
so each card sits directly over its own column. */
.klinikplus-pricing-page .comparison-table thead th.service-header,
.klinikplus-pricing-page .comparison-table tbody td.service-cell { width: 26%; }
.klinikplus-pricing-page .comparison-table thead th:not(.service-header),
.klinikplus-pricing-page .comparison-table tbody td.feature-cell { width: 24.6667%; }
/* --- header row --------------------------------------------------- */
.klinikplus-pricing-page .comparison-table thead {
background: transparent;
}
.klinikplus-pricing-page .comparison-table thead th {
padding: 1.125rem 1.5rem !important;
font-family: 'Outfit', sans-serif;
font-size: 1rem !important;
font-weight: 600 !important;
line-height: 1.4 !important;
text-transform: none;
letter-spacing: 0;
border: none;
}
/* `.service-header` is also the class on the accordion header of the
unrelated services component, which sets `display: flex` plus a hover
tint globally. On a | that collapses the cell to its text width, so
the grey bar never filled the column. Pin it back to a table cell. */
.klinikplus-pricing-page .comparison-table thead th.service-header,
.klinikplus-pricing-page .comparison-table thead th.service-header:hover {
display: table-cell;
text-align: left;
color: var(--kp-cmp-ink);
background: var(--kp-cmp-head-bg);
border-bottom: none;
cursor: default;
}
.klinikplus-pricing-page .comparison-table thead th:not(.service-header) {
text-align: center;
color: #FFFFFF;
}
.klinikplus-pricing-page .comparison-table thead th.basic-header { background: var(--kp-plan-basic); }
.klinikplus-pricing-page .comparison-table thead th.gold-header { background: var(--kp-plan-gold); }
.klinikplus-pricing-page .comparison-table thead th.platinum-header { background: var(--kp-plan-platinum); }
/* --- body rows ---------------------------------------------------- */
.klinikplus-pricing-page .comparison-table tbody tr {
border-bottom: 1px solid var(--kp-cmp-line);
transition: background-color 0.2s ease;
}
.klinikplus-pricing-page .comparison-table tbody tr:last-child {
border-bottom: none;
}
.klinikplus-pricing-page .comparison-table tbody tr:hover {
background-color: var(--kp-cmp-row-hover);
}
.klinikplus-pricing-page .comparison-table tbody td {
padding: 1rem 1.5rem !important;
vertical-align: middle;
border: none;
word-wrap: break-word;
overflow-wrap: break-word;
}
.klinikplus-pricing-page .comparison-table td.service-cell {
padding-right: 2.75rem !important;
font-family: 'Outfit', sans-serif;
font-size: 1rem !important;
font-weight: 600 !important;
line-height: 1.45 !important;
color: var(--kp-cmp-navy);
}
.klinikplus-pricing-page .comparison-table td.feature-cell {
font-family: 'Outfit', sans-serif;
font-size: 0.9375rem !important;
font-weight: 400 !important;
line-height: 1.5 !important;
color: var(--kp-cmp-muted);
}
/* --- expand chevron ------------------------------------------------ */
.klinikplus-pricing-page .comparison-table .service-row .dropdown-icon {
right: 1.25rem;
width: 1.125rem;
height: 1.125rem;
background: #9AA3B4;
}
.klinikplus-pricing-page .comparison-table .service-row:hover .dropdown-icon {
background: var(--kp-cmp-navy);
}
/* Expanded feature lists sit tighter than the site-wide default. */
.klinikplus-pricing-page .comparison-table .service-details {
padding-top: 0;
font-size: 0.9375rem;
line-height: 1.5;
}
}
|