/* Tokeny (kolor, typografia, promienie, ruch, wysokosc nawigacji) mieszkaja
w dietlo-assets/css/tokens.css i laduja sie przed tym plikiem. */
.dietlo-landing *,
.dietlo-landing *::before,
.dietlo-landing *::after,
.dietlo-product-story *,
.dietlo-product-story *::before,
.dietlo-product-story *::after {
box-sizing: border-box;
}
html,
body {
overflow-x: hidden;
}
/* Siatka bezpieczenstwa dla obrazkow.
Odkad kazdy ![]()
deklaruje width/height (wymog CLS, rules.md "Layout
stability"), przegladarka zna wymiary wlasne pliku i bez tego ograniczenia
renderuje go w pelnym rozmiarze - obrazek wylewa sie z kontenera.
`height: auto` chroni proporcje, gdy komponent ustawia sama szerokosc.
`:where()` daje ZEROWA specyficznosc - bez tego selektor `.dietlo-landing img`
(0,1,1) wygralby z `.dietlo-hero__bg { height: 100% }` (0,1,0) i zepsul hero.
Tak zapisana regula przegrywa z kazda regula komponentu, czyli dziala
wylacznie tam, gdzie nikt nie zadbal o rozmiar. O to chodzi. */
:where(.dietlo-landing, .dietlo-product-story, .dietlo-blog-shell, .dietlo-custom-page) img {
max-width: 100%;
height: auto;
}
/* Jedyne miejsce, ktore rezerwuje miejsce pod stala nawigacja.
Zadna sekcja ani podstrona nie powinna tego dublowac wlasnym padding-top. */
body:not(.wp-admin) {
--dietlo-header-offset: calc(var(--dietlo-header-height) + var(--dietlo-admin-bar-height));
padding-top: var(--dietlo-header-offset);
}
.home.page .entry-header,
.home.page .hero-section,
.home.page .ct-breadcrumbs,
.single-product .related,
.single-product .upsells,
.single-product .product_meta,
.single-product .woocommerce-tabs,
.single-product .woocommerce-product-gallery,
.single-product .summary.entry-summary {
display: none !important;
}
.home.page .site-main,
.single-product .site-main {
padding-top: 0;
}
.entry-content > .dietlo-landing,
.entry-content > .dietlo-product-story {
margin-left: calc(50% - 50vw);
width: 100vw;
max-width: 100vw;
}
.dietlo-landing,
.dietlo-product-story {
color: var(--dietlo-text);
font-family: var(--dietlo-font-body);
letter-spacing: 0;
}
/* Prymitywy layoutu (.dietlo-section, .dietlo-wrap, .dietlo-grid) mieszkaja
w css/layout/layout.css — ten plik dokladada tylko warianty stron. */
.dietlo-landing > .dietlo-section:first-child:not(.dietlo-section--hero) {
padding-top: 18px;
padding-bottom: 24px;
}
/* Jedyny udokumentowany wyjatek od globalnego offsetu.
rules.md:45 - "Hero desktop is UNTOUCHABLE (owner-approved as-is)".
Hero jest wysoki (min-height 740px) i pionowo wysrodkowany, wiec swiadomie
wchodzi pod polprzezroczysty pasek - tresc i tak nie jest zaslaniana.
Realizowane przez zerowanie paddingu na , NIE przez ujemny margines
na sekcji: ujemny margin-top pierwszego dziecka zwija sie w gore drzewa
(margin collapsing) i przesuwa rowniez sekcje ponizej hero.
Tylko desktop - na mobile home zawsze mial pelny offset. */
@media (min-width: 1000px) {
body.home:not(.wp-admin) {
padding-top: 0;
}
}
.dietlo-hero {
min-height: 740px;
display: flex;
align-items: center;
padding-top: 0;
}
.dietlo-hero__copy {
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: 560px;
padding: 18px 0 22px;
}
.dietlo-hero__badge {
display: inline-flex;
align-items: center;
gap: 14px;
margin-bottom: 28px;
}
.dietlo-hero__badge-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
height: auto;
border: none;
border-radius: 0;
color: var(--dietlo-purple);
background: transparent;
box-shadow: none;
}
.dietlo-hero__badge-icon svg {
display: block;
width: 28px;
height: 28px;
flex: 0 0 auto;
}
.dietlo-hero__badge-text {
display: flex;
flex-wrap: nowrap;
align-items: baseline;
gap: 0;
max-width: none;
font-size: var(--dietlo-text-sm);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.01em;
white-space: nowrap;
color: var(--dietlo-green-dark);
}
.dietlo-hero__badge-line {
display: inline;
}
.dietlo-hero__badge-line--sub {
font-size: var(--dietlo-text-sm);
font-weight: 500;
color: rgba(23, 35, 56, 0.8);
}
/* "online" dopisany tylko na mobile (owner 2026-08-15): desktop ma miejsce
na pelna podlinie "w perimenopauzie i menopauzie", wiec zostaje bez zmian;
mobile chowa podlinie i pokazuje "online" zamiast niej, patrz ~520px. */
.dietlo-hero__badge-online {
display: none;
}
/* .dietlo-eyebrow mieszka w css/components/eyebrow.css */
.dietlo-title {
margin: 0;
max-width: 640px;
font-family: var(--dietlo-font-body);
font-size: clamp(48px, 6.2vw, 78px);
line-height: 0.96;
font-weight: 700;
letter-spacing: -0.04em;
color: #172338;
}
.dietlo-title mark,
.dietlo-accent {
color: var(--dietlo-green);
background: transparent;
}
.dietlo-title__line,
.dietlo-title__accent {
display: block;
}
.dietlo-title__accent {
margin-top: 8px;
color: var(--dietlo-purple);
}
.dietlo-title__underline {
display: block;
width: 180px;
height: 16px;
margin: 18px 0 26px;
border-bottom: 4px solid rgba(85, 185, 71, 0.92);
border-radius: var(--dietlo-radius-pill);
transform: rotate(-2deg);
transform-origin: left center;
}
.dietlo-lead {
max-width: 560px;
margin: 0 0 30px;
color: #50586a;
font-size: clamp(19px, 1.75vw, 21px);
line-height: 1.6;
}
/* grid-equal-height: off - inline controls align around their labels, not as cards */
.dietlo-actions,
.dietlo-proof,
.dietlo-chip-row {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
}
/* .dietlo-button i warianty mieszkaja w css/components/button.css */
#header.ct-header {
position: fixed;
/* Zjezdza pod pasek admina, gdy ten istnieje; dla goscia token = 0px. */
top: var(--dietlo-admin-bar-height);
left: 0;
right: 0;
z-index: 1100;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: saturate(140%) blur(10px);
box-shadow: 0 1px 0 rgba(24, 27, 34, 0.05);
}
.ct-header .site-branding {
display: flex;
align-items: center;
line-height: 1;
}
.ct-header .site-title-container,
.ct-header .site-title {
line-height: 1;
margin: 0;
padding: 0;
}
.ct-header .site-title a {
display: block;
width: 125px;
height: 36px;
overflow: visible;
background: url("../img/dietlo-logo.png") left center / contain no-repeat;
color: transparent !important;
font-size: 0;
line-height: 1;
}
.dietlo-cart-shortcut {
position: fixed;
top: 16px;
right: 16px;
left: auto;
z-index: 2147483647;
display: grid;
width: 40px;
height: 40px;
place-items: center;
border: 0;
border-radius: var(--dietlo-radius-pill);
background: var(--dietlo-green);
box-shadow: var(--dietlo-shadow-md);
color: #fff;
text-decoration: none;
transition: transform 180ms ease, box-shadow 180ms ease;
}
@media (min-width: 1200px) {
.dietlo-cart-shortcut {
display: none !important;
}
}
.dietlo-cart-shortcut:hover {
transform: translateY(-1px);
box-shadow: var(--dietlo-shadow-md);
}
.dietlo-cart-shortcut__icon {
position: relative;
width: 18px;
height: 16px;
border: 2px solid currentColor;
border-radius: 4px;
color: #fff;
font-size: 0;
}
.dietlo-cart-shortcut__icon::before {
position: absolute;
top: -8px;
left: 3px;
width: 8px;
height: 8px;
border: 2px solid currentColor;
border-bottom: 0;
border-radius: 8px 8px 0 0;
content: "";
}
.dietlo-cart-shortcut__count {
position: absolute;
top: -7px;
right: -7px;
display: grid;
min-width: 21px;
height: 21px;
place-items: center;
border: 2px solid #fff;
border-radius: var(--dietlo-radius-pill);
background: var(--dietlo-purple);
color: #fff;
font-size: var(--dietlo-text-xs);
font-weight: 900;
line-height: 1;
}
.dietlo-menu-cart > a {
display: inline-flex !important;
align-items: center;
gap: 8px;
}
.dietlo-menu-cart svg {
display: block;
flex-shrink: 0;
color: currentColor;
}
.dietlo-menu-cart span {
display: inline-grid;
min-width: 20px;
height: 20px;
place-items: center;
border-radius: var(--dietlo-radius-pill);
background: var(--dietlo-purple);
color: #fff;
font-size: var(--dietlo-text-xs);
font-weight: 900;
}
@media (min-width: 1000px) {
/* Replace Blocksy grid with flex; 32px edges override the 90vw Blocksy default */
#header.ct-header [data-device="desktop"] [data-row="middle"] > .ct-container {
position: relative !important;
display: flex !important;
align-items: center;
width: 100% !important;
max-width: 1244px !important;
margin-left: auto !important;
margin-right: auto !important;
min-height: 64px;
padding-block: 0;
padding-left: 32px !important;
padding-right: 32px !important;
}
/* Logo column: shrink to content, vertically centered */
#header.ct-header [data-device="desktop"] [data-column="start"] {
position: absolute;
left: 32px;
top: 0;
height: 100%;
display: flex;
align-items: center;
z-index: 2;
}
/* Menu column: fill remaining space */
#header.ct-header [data-device="desktop"] [data-column="end"] {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
}
/* Items wrapper in end column */
#header.ct-header [data-device="desktop"] [data-column="end"] > [data-items] {
display: flex;
align-items: center;
width: 100%;
}
/* Menu fills width, links centered */
#header.ct-header [data-device="desktop"] [data-id="menu"] {
width: 100%;
overflow: visible;
}
#header.ct-header [data-device="desktop"] [data-id="menu"] > ul.menu {
position: relative; /* anchor for absolutely-positioned cart */
display: flex;
gap: 25px;
align-items: center;
justify-content: center;
width: 100%;
overflow: visible;
}
#header.ct-header [data-device="desktop"] [data-id="menu"] > ul.menu > li:not(.dietlo-menu-cart) {
overflow: visible;
}
/* Nav links: hover green + purple underline */
#header.ct-header [data-device="desktop"] [data-id="menu"] > ul.menu > li:not(.dietlo-menu-cart) > a {
display: inline-flex;
align-items: center;
width: auto;
height: auto;
padding: 0 0 10px;
margin-bottom: -10px;
font-family: var(--dietlo-font-body);
font-size: var(--dietlo-text-md);
font-weight: 700;
line-height: 1.2;
letter-spacing: 0;
color: var(--dietlo-text);
text-decoration: none !important;
background-image: linear-gradient(var(--dietlo-purple), var(--dietlo-purple));
background-repeat: no-repeat;
background-position: left bottom;
background-size: 0 2px;
transition: color 180ms ease-in, background-size 200ms ease-in;
}
#header.ct-header [data-device="desktop"] [data-id="menu"] > ul.menu > li:not(.dietlo-menu-cart) > a:hover {
color: var(--dietlo-green) !important;
background-size: 100% 2px;
transition: color 180ms ease-out, background-size 200ms ease-out;
}
#header.ct-header [data-device="desktop"] [data-id="menu"] > ul.menu > li.dietlo-menu-collab {
position: relative;
display: inline-flex;
align-items: center;
}
#header.ct-header [data-device="desktop"] [data-id="menu"] > ul.menu > li.dietlo-menu-collab > a {
gap: 6px;
}
#header.ct-header [data-device="desktop"] [data-id="menu"] > ul.menu > li.dietlo-menu-collab > a::after {
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
content: "";
transform: translateY(-2px) rotate(45deg);
}
#header.ct-header [data-device="desktop"] [data-id="menu"] > ul.menu > li.dietlo-menu-collab::after {
position: absolute;
top: 100%;
left: -12px;
right: -12px;
height: 16px;
content: "";
}
#header.ct-header [data-device="desktop"] .dietlo-menu-collab__submenu {
position: absolute;
top: calc(100% + 12px);
left: 50%;
z-index: 20;
display: grid;
min-width: 178px;
gap: 4px;
padding: 8px;
margin: 0;
border: 1px solid rgba(91, 64, 125, 0.14);
border-radius: var(--dietlo-radius-control);
background: #fff;
box-shadow: var(--dietlo-shadow-lg);
list-style: none;
opacity: 0;
pointer-events: none;
transform: translate(-50%, 8px);
transition: opacity 180ms ease-out, transform 180ms ease-out, visibility 180ms ease-out;
visibility: hidden;
}
#header.ct-header [data-device="desktop"] .dietlo-menu-collab:hover > .dietlo-menu-collab__submenu,
#header.ct-header [data-device="desktop"] .dietlo-menu-collab:focus-within > .dietlo-menu-collab__submenu {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, 0);
visibility: visible;
}
#header.ct-header [data-device="desktop"] .dietlo-menu-collab__submenu a {
display: flex;
min-height: 38px;
align-items: center;
padding: 8px 10px;
border-radius: 6px;
font-family: var(--dietlo-font-body);
color: var(--dietlo-text);
font-size: var(--dietlo-text-md);
font-weight: 700; /* 750 nie istnieje w statycznym Interze - renderowalo sie jako 700 */
line-height: 1.2;
letter-spacing: 0;
text-decoration: none !important;
text-transform: none;
white-space: nowrap;
transition: background-color 180ms ease-out, color 180ms ease-out;
}
#header.ct-header [data-device="desktop"] .dietlo-menu-collab__submenu a:hover,
#header.ct-header [data-device="desktop"] .dietlo-menu-collab__submenu a:focus-visible {
background: var(--dietlo-soft);
color: var(--dietlo-purple) !important;
}
/* Keep WP "current" menu items neutral until actual hover.
Homepage renders both home and in-page anchor as current-menu-item. */
#header.ct-header [data-device="desktop"] [data-id="menu"] > ul.menu > li.current-menu-item:not(.dietlo-menu-cart) > a:not(:hover),
#header.ct-header [data-device="desktop"] [data-id="menu"] > ul.menu > li.current-menu-ancestor:not(.dietlo-menu-cart) > a:not(:hover) {
color: var(--dietlo-text) !important;
background-size: 0 2px;
}
@media (prefers-reduced-motion: reduce) {
#header.ct-header [data-device="desktop"] [data-id="menu"] > ul.menu > li:not(.dietlo-menu-cart) > a {
transition: none;
}
#header.ct-header [data-device="desktop"] .dietlo-menu-collab__submenu,
#header.ct-header [data-device="desktop"] .dietlo-menu-collab__submenu a {
transition: none;
}
}
/* Cart pulled out of flex flow so it doesn't skew centering of other items */
#header.ct-header [data-device="desktop"] .dietlo-menu-cart {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
}
/* Mobile header container: 20px edges, full width */
#header.ct-header [data-device="mobile"] [data-row="middle"] > .ct-container {
position: relative !important;
display: flex !important;
min-height: 70px;
align-items: center;
justify-content: center;
width: 100% !important;
max-width: none !important;
padding-left: var(--dietlo-nav-gutter) !important;
padding-right: var(--dietlo-nav-gutter) !important;
}
#header.ct-header [data-device="mobile"] [data-column="start"] {
position: absolute;
top: 0;
left: 50%;
z-index: 1;
display: flex;
width: 125px !important;
height: 100%;
align-items: center;
justify-content: center;
transform: translateX(calc(-50% + 8px));
}
#header.ct-header [data-device="mobile"] [data-column="start"] > [data-items] {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
#header.ct-header [data-device="mobile"] .site-branding {
margin-right: 0 !important;
}
#header.ct-header [data-device="mobile"] [data-column="end"] {
position: absolute;
top: 0;
left: var(--dietlo-nav-gutter);
z-index: 2;
display: flex;
width: auto;
height: 100%;
align-items: center;
}
#header.ct-header [data-device="mobile"] [data-column="end"] > [data-items] {
display: flex;
align-items: center;
}
#header.ct-header [data-device="mobile"] .ct-header-trigger {
width: 48px;
min-width: 48px;
min-height: 44px;
margin-left: 0 !important;
/* Icon flush with the button's left edge, so it starts exactly on
--dietlo-nav-gutter like the menu text below. Blocksy centres it in the
48px button by default, which pushed the icon to 27px while the panel
text sat at 20px. The touch target keeps its 48px, extending rightwards. */
justify-content: flex-start;
padding-inline-start: 0;
}
#header.ct-header [data-device="mobile"] .ct-header-trigger .ct-icon {
width: 26px;
height: 20px;
}
/* Blocksy paints this icon via fill, and both its defaults are off-brand
blues: #3a4f66 at rest and #1559ed on hover (--theme-palette-color-2).
On touch the hover state sticks after the tap, which is why the burger
stayed blue after closing. Pin every closed state to the project ink. */
#header.ct-header [data-device="mobile"] .ct-header-trigger .ct-icon,
#header.ct-header [data-device="mobile"] .ct-header-trigger:hover .ct-icon,
#header.ct-header [data-device="mobile"] .ct-header-trigger:focus .ct-icon {
fill: var(--dietlo-text);
}
/* Open state: Blocksy rotates the bars into an X (its trigger.scss) and that
X is the menu's only close control, so it carries the brand purple - the
:hover/:focus variants included, to beat the sticky hover above. */
#header.ct-header [data-device="mobile"] .ct-header-trigger[aria-expanded="true"] .ct-icon,
#header.ct-header [data-device="mobile"] .ct-header-trigger[aria-expanded="true"]:hover .ct-icon,
#header.ct-header [data-device="mobile"] .ct-header-trigger[aria-expanded="true"]:focus .ct-icon {
fill: var(--dietlo-purple);
}
/* ============================================================
MOBILE NAV - full-width panel revealed from the top.
Blocksy renders #offcanvas with data-behaviour="modal" (set by
scripts/set-mobile-menu-top-panel.php, i.e. the same value the
Customizer -> Header -> Off Canvas -> "Reveal as" writes).
Blocksy's own layout gives us position:fixed, inset from the top
and the drop-in animation; this block owns surface, close-button
placement and touch targets.
Scoped to #offcanvas on purpose: #search-modal carries the same
data-behaviour="modal" and must not inherit any of this.
============================================================ */
#offcanvas[data-behaviour="modal"] {
background-color: var(--dietlo-card);
/* Drop the panel BELOW the fixed header instead of covering it. Blocksy's
.ct-panel is inset:0; overriding top keeps the header visible and usable,
and --dietlo-header-offset already folds in the admin-bar height. */
top: var(--dietlo-header-offset);
border-top: 1px solid var(--dietlo-line);
}
/* No close button inside the panel: the header stays visible and Blocksy
animates its trigger from hamburger into an X on aria-expanded="true"
(themes/blocksy .../header/trigger.scss). One close affordance, in the
same spot the menu was opened from. */
#offcanvas[data-behaviour="modal"] .ct-panel-actions {
display: none;
}
#offcanvas[data-behaviour="modal"] .ct-panel-content-inner {
width: 100%;
align-items: stretch;
/* No horizontal padding on the shell: the gutter lives on the menu rows
below instead. That way anything that should span the full width - the
submenu band, the row separators - simply is full width, with no negative
margins compensating for a parent's padding. */
padding: 8px 0 calc(24px + env(safe-area-inset-bottom));
}
#offcanvas[data-behaviour="modal"] .mobile-menu > ul > li + li {
border-top: 1px solid var(--dietlo-line);
}
/* Styling only - visibility belongs to Blocksy, which hides the submenu with
`.mobile-menu[data-interaction=click] [class*=children]:not(.dropdown-active)>ul`
at specificity (0,4,1). This selector is (0,5,0), so declaring `display` here
outranked that rule and the submenu could never be collapsed. */
.ct-panel-content[data-device="mobile"] .mobile-menu .dietlo-menu-collab > .dietlo-menu-collab__submenu {
/* No gap: items sit flush so the 1px separators below read as one rule,
the same way the top-level menu items are divided. */
gap: 0;
/* No vertical padding: Blocksy animates this element's height, and with
border-box a padded box cannot collapse below its own padding - that is
what made the collapse jump at the end. Breathing room moves to margin,
which the height animation does not measure. */
padding: 0 var(--dietlo-nav-gutter) 0 calc(var(--dietlo-nav-gutter) + 16px);
/* The parent is a flex container, so this is a flex item: without
these two it sizes to its content and ignores the parent's width (measured
400px inside a 390px panel). `stretch` makes it fill the row, `min-width:0`
lifts the automatic minimum size that keeps it overflowing. Both are
relative to the parent - nothing to keep in sync by hand. */
align-self: stretch;
min-width: 0;
width: 100%;
/* Full-bleed band with no compensation: the panel shell carries no
horizontal padding, so this simply fills its row. Square by design - no
radius. Background does not enter the height animation, unlike padding,
so the collapse still closes to 0. No bottom margin: the band butts
straight against the next menu row, like every other separator here. */
margin: 0;
background-color: var(--dietlo-purple);
list-style: none;
}
/* Blocksy transitions height on this variant without clipping overflow - its
rule is only `.mobile-menu [class*=children]>ul.is-animating{transition:
height .3s ease}`, while the drop-down variant also gets overflow-y:clip.
Without it the items spill out of the shrinking box instead of being
revealed, which reads as a stutter. */
#offcanvas[data-behaviour="modal"] .dietlo-menu-collab__submenu.is-animating {
overflow: hidden;
}
/* Separator between submenu entries, mirroring the top-level `li + li` rule.
White at low alpha is the on-purple equivalent of --dietlo-line, which is a
near-white sage meant for light surfaces. */
#offcanvas[data-behaviour="modal"] .dietlo-menu-collab__submenu > li + li {
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
/* Same sway the project already uses on the About CTA and the blog "Przeczytaj"
links: left 8px, back, right 6px, settle, then rest. This is the transform-only
variant - `dietlo-about-cta-sway` also animates a green box-shadow, which would
put a green halo on the purple band, and the clean copy in blog.css is not
loaded outside the blog.
Percentages are the original 4.2s ones rescaled to a 6s cycle (8% -> 5.6% and
so on), so the motion runs at exactly the same speed while the longer cycle
lets Grupowa start 3s later - one item moving every 3 seconds. */
@keyframes dietlo-nav-sway {
0%, 26.6%, 100% {
transform: translateX(0);
}
5.6% {
transform: translateX(-8px);
}
11.2% {
transform: translateX(0);
}
16.8% {
transform: translateX(6px);
}
21.7% {
transform: translateX(0);
}
}
@media (prefers-reduced-motion: no-preference) {
#offcanvas[data-behaviour="modal"] .dietlo-menu-collab__submenu > li > a {
animation: dietlo-nav-sway 6s var(--dietlo-ease-out) 1.4s infinite;
}
#offcanvas[data-behaviour="modal"] .dietlo-menu-collab__submenu > li:nth-child(2) > a {
animation-delay: 4.4s;
}
}
@media (prefers-reduced-motion: reduce) {
#offcanvas[data-behaviour="modal"] .dietlo-menu-collab__submenu > li > a {
animation: none;
}
}
/* Grid only in the expanded state, so the gap above applies without competing
with Blocksy's display:none in the collapsed one. */
.ct-panel-content[data-device="mobile"] .mobile-menu .dietlo-menu-collab.dropdown-active > .dietlo-menu-collab__submenu {
display: grid;
}
/* Wspolpraca in the brand green. Owner decision 2026-08-19: --dietlo-green
(#55b947) is THE Dietlo green and is what this item must use. Recorded
honestly: it measures 2.50:1 on the white panel, below the 4.5:1 AA needs
for 16px text - a deliberate brand call, not an oversight. Do not "fix" it
to --dietlo-green-cta without asking. */
#offcanvas[data-behaviour="modal"] .dietlo-menu-collab > .ct-sub-menu-parent > a {
color: var(--dietlo-green);
}
#offcanvas[data-behaviour="modal"] .dietlo-menu-collab .ct-toggle-dropdown-mobile svg {
transition: transform var(--dietlo-motion-base) var(--dietlo-ease-out);
}
/* Chevron mirrors the state: down = collapsed, up = expanded. */
#offcanvas[data-behaviour="modal"] .dietlo-menu-collab.dropdown-active .ct-toggle-dropdown-mobile svg {
transform: rotate(180deg);
}
.ct-panel-content[data-device="mobile"] .mobile-menu > ul > li > a,
.ct-panel-content[data-device="mobile"] .mobile-menu .ct-sub-menu-parent > a,
.ct-panel-content[data-device="mobile"] .mobile-menu .dietlo-menu-collab__submenu a {
display: flex;
min-height: 48px;
align-items: center;
font-family: var(--dietlo-font-body);
font-size: var(--dietlo-text-lg);
font-weight: 700;
line-height: 1.25;
letter-spacing: 0;
color: var(--dietlo-text);
text-transform: none;
}
/* The gutter now lives on the rows, not on the panel shell - see the
.ct-panel-content-inner rule above. Top-level rows carry it so their text
still starts on --dietlo-nav-gutter, while full-bleed children need no
compensation. */
.ct-panel-content[data-device="mobile"] .mobile-menu > ul > li > a,
.ct-panel-content[data-device="mobile"] .mobile-menu .ct-sub-menu-parent {
padding-inline: var(--dietlo-nav-gutter);
}
.ct-panel-content[data-device="mobile"] .mobile-menu .ct-sub-menu-parent {
display: flex;
align-items: center;
justify-content: space-between;
}
.ct-panel-content[data-device="mobile"] .mobile-menu .dietlo-menu-collab .ct-toggle-dropdown-mobile {
display: inline-flex;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
color: var(--dietlo-muted);
}
.ct-panel-content[data-device="mobile"] .mobile-menu .dietlo-menu-collab__submenu a {
min-height: 44px;
padding-left: 0;
font-size: var(--dietlo-text-base);
font-weight: 600;
/* White on the #7022d7 band measures 7.24:1 (AAA). Dark ink would be
unreadable there - it was correct only for the lighter surface. */
color: #fff;
}
/* Blocksy conflict: its move-in/move-out keyframes are applied by
animation-name with no reduced-motion fallback. Scoped to this
component only. */
@media (prefers-reduced-motion: reduce) {
#offcanvas[data-behaviour="modal"] .ct-panel-content {
animation: none !important;
}
}
/* Laptop 1000–1199px: 24px edges for both header and content */
@media (min-width: 1000px) and (max-width: 1199px) {
.dietlo-section {
padding-left: 24px;
padding-right: 24px;
}
#header.ct-header [data-device="desktop"] [data-row="middle"] > .ct-container {
padding-left: 24px !important;
padding-right: 24px !important;
}
#header.ct-header [data-device="desktop"] [data-column="start"] {
left: 24px;
}
}
/* Hide Blocksy search button sitewide */
.ct-header-search {
display: none !important;
}
.dietlo-proof {
margin-top: 24px;
}
.dietlo-pill {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 34px;
padding: 0 14px;
border: 1px solid var(--dietlo-line);
border-radius: var(--dietlo-radius-pill);
background: #fff;
font-size: var(--dietlo-text-sm);
font-weight: 700;
box-shadow: var(--dietlo-shadow-sm);
}
.dietlo-media {
position: relative;
}
.dietlo-media img {
display: block;
width: 100%;
border-radius: var(--dietlo-radius-field);
box-shadow: var(--dietlo-shadow);
}
.dietlo-coach-card {
position: absolute;
left: -72px;
bottom: -30px;
width: min(280px, 80%);
padding: 20px;
border-radius: var(--dietlo-radius-control);
background: #fff;
box-shadow: var(--dietlo-shadow);
font-size: var(--dietlo-text-md);
}
/* .dietlo-section-head (z wariantami) -> css/components/section-head.css,
.dietlo-grid -> css/layout/layout.css, .dietlo-card -> css/components/card.css */
.dietlo-problem,
.dietlo-feature {
padding: 30px;
}
.dietlo-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-bottom: 22px;
border-radius: var(--dietlo-radius-control);
background: #eef9ec;
color: var(--dietlo-green);
font-weight: 900;
}
.dietlo-feature p {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.dietlo-products-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
margin-bottom: 36px;
}
.dietlo-products-head h2 {
margin: 0 0 8px;
font-family: var(--dietlo-font-display);
font-size: clamp(34px, 4.5vw, 50px);
line-height: var(--dietlo-line-display);
font-weight: 700;
letter-spacing: var(--dietlo-letter-display);
}
.dietlo-product-card {
overflow: hidden;
}
.dietlo-product-card img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
background: #eef4ea;
}
.dietlo-product-card div {
padding: 22px;
}
.dietlo-price {
color: var(--dietlo-green);
font-size: var(--dietlo-text-3xl);
font-weight: 700;
}
.dietlo-pricing {
align-items: stretch;
}
.dietlo-plan {
padding: 34px;
text-align: center;
}
.dietlo-plan--featured {
background: #e4f6df;
border-color: #c7ebbd;
transform: translateY(-18px);
}
.dietlo-plan strong {
display: block;
margin-bottom: 8px;
font-size: 42px;
line-height: 1;
font-family: var(--dietlo-font-display);
font-weight: 700;
letter-spacing: var(--dietlo-letter-display);
}
.dietlo-list {
margin: 24px 0 30px;
padding: 24px 0 0;
border-top: 1px solid var(--dietlo-line);
list-style: none;
text-align: left;
}
.dietlo-list li {
margin: 0 0 14px;
padding-left: 28px;
color: #3d444f;
position: relative;
}
.dietlo-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 9px;
height: 9px;
border-radius: var(--dietlo-radius-pill);
background: var(--dietlo-green);
}
/* grid-equal-height: off - editorial media and copy must stay vertically centered */
.dietlo-split {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: 70px;
align-items: center;
}
.dietlo-timeline {
display: grid;
gap: 28px;
}
/* grid-equal-height: off - the step icon anchors to the first line of its copy */
.dietlo-step {
display: grid;
grid-template-columns: 64px 1fr;
gap: 22px;
align-items: start;
}
.dietlo-step .dietlo-icon {
margin: 0;
background: var(--dietlo-purple);
color: #fff;
}
.dietlo-cta {
background: var(--dietlo-purple);
color: #fff;
}
/* grid-equal-height: off - CTA copy and action are vertically centered as a pair */
.dietlo-cta .dietlo-wrap {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
gap: 54px;
align-items: center;
}
.dietlo-cta h2 {
margin: 0 0 24px;
color: #fff;
font-family: var(--dietlo-font-display);
font-size: clamp(40px, 5vw, 68px);
line-height: var(--dietlo-line-display-tight);
font-weight: 700;
letter-spacing: var(--dietlo-letter-display);
}
.dietlo-quote {
padding: 28px;
border: 1px solid rgba(255,255,255,0.24);
border-radius: var(--dietlo-radius-control);
background: rgba(255,255,255,0.09);
color: #fff;
}
.dietlo-footer-note {
padding: 54px 24px;
background: #f7f8f7;
}
.dietlo-product-story {
background: #fff;
}
/* grid-equal-height: off - product media and hero copy are vertically centered */
.dietlo-pdp-hero {
display: grid;
grid-template-columns: minmax(min(360px, 45%), 0.92fr) minmax(0, 1fr);
gap: 70px;
align-items: center;
padding-top: 40px;
padding-bottom: 72px;
}
.dietlo-product-visual img {
width: 100%;
display: block;
border-radius: var(--dietlo-radius-field);
box-shadow: var(--dietlo-shadow);
}
.dietlo-sale-box {
margin-top: 32px;
padding: 28px;
border: 1px solid var(--dietlo-line);
border-radius: var(--dietlo-radius);
background: #f8faf8;
}
.dietlo-sale-price {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: baseline;
margin-bottom: 24px;
font-size: 44px;
line-height: 1;
font-weight: 700;
}
.dietlo-sale-price del {
color: #727985;
font-size: var(--dietlo-text-3xl);
}
.dietlo-faq {
max-width: 760px;
margin: 0 auto;
}
.dietlo-faq details {
margin-bottom: 14px;
padding: 22px 26px;
border: 1px solid var(--dietlo-line);
border-radius: var(--dietlo-radius-control);
background: #fff;
}
.dietlo-faq summary {
cursor: pointer;
font-size: 19px;
font-family: var(--dietlo-font-display);
font-weight: 700;
line-height: 1.3;
}
.dietlo-faq p {
color: var(--dietlo-muted);
}
@media (max-width: 900px) {
.entry-content > .dietlo-landing,
.entry-content > .dietlo-product-story {
margin-left: 0;
width: 100%;
max-width: 100%;
}
.dietlo-section {
padding: 64px 0;
width: 100%;
max-width: 100%;
overflow: hidden;
}
.dietlo-landing > .dietlo-section:first-child {
padding-top: 12px;
padding-bottom: 20px;
}
.dietlo-wrap {
width: 100%;
max-width: 100%;
padding-left: 20px;
padding-right: 20px;
}
/* The full-bleed hero has no section gutter, so its copy keeps a local inset. */
.dietlo-section--hero > .dietlo-wrap {
padding-left: 24px;
padding-right: 24px;
}
.dietlo-pdp-hero,
.dietlo-split,
.dietlo-cta .dietlo-wrap {
grid-template-columns: 1fr;
gap: 36px;
}
.dietlo-hero {
max-width: 100%;
min-height: 620px;
}
.dietlo-hero__bg {
object-position: 68% center;
opacity: 0.52;
}
.dietlo-title {
font-size: 54px;
}
.dietlo-lead {
font-size: var(--dietlo-text-xl);
}
.dietlo-hero__copy {
max-width: 100%;
}
.dietlo-hero__benefits {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dietlo-actions .dietlo-button {
width: 100%;
}
.dietlo-cart-shortcut {
display: grid;
position: fixed !important;
top: 16px !important;
right: 16px !important;
width: 40px;
height: 40px;
}
.dietlo-actions,
.dietlo-proof,
.dietlo-chip-row {
align-items: stretch;
display: grid;
grid-template-columns: minmax(0, 1fr);
}
.dietlo-pill {
justify-content: center;
max-width: 100%;
}
.dietlo-products-head {
align-items: start;
flex-direction: column;
}
.dietlo-plan--featured {
transform: none;
}
.dietlo-coach-card {
position: static;
width: auto;
margin-top: 16px;
}
.dietlo-step {
grid-template-columns: 1fr;
}
}
@media (max-width: 520px) {
.dietlo-section--hero > .dietlo-wrap {
padding-left: 20px;
padding-right: 20px;
}
.dietlo-title {
font-size: 38px;
max-width: 100%;
}
.dietlo-lead {
max-width: 100%;
font-size: 17px;
}
.dietlo-section-head h2,
.dietlo-products-head h2,
.dietlo-split h2 {
font-size: 31px;
}
.dietlo-sale-price {
font-size: 34px;
}
}
@media (max-width: 900px) {
body .dietlo-cart-shortcut {
display: grid !important;
position: fixed !important;
}
}
/* ── Home: hero section ─────────────────────────────── */
.dietlo-section--hero {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at top left, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.86) 42%, rgba(255, 255, 255, 0.34) 70%, rgba(255, 255, 255, 0.1) 100%),
var(--dietlo-soft);
padding-top: 78px;
padding-bottom: 78px;
}
.dietlo-section--hero::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.9) 23%, rgba(255, 255, 255, 0.7) 42%, rgba(255, 255, 255, 0.1) 72%),
linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
z-index: 0;
pointer-events: none;
}
.dietlo-hero__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
z-index: 0;
display: block;
border-radius: 0;
box-shadow: none;
}
.dietlo-hero {
position: relative;
z-index: 1;
max-width: 100%;
padding-top: 0;
}
.dietlo-section--hero .dietlo-hero__copy {
max-width: 640px;
}
.dietlo-section--hero .dietlo-title {
max-width: 100%;
font-size: clamp(38px, 4.8vw, 56px);
}
/* ── Home: hero visual column ───────────────────────── */
.dietlo-hero__visual {
position: relative;
}
.dietlo-hero__image-card {
border-radius: 16px;
overflow: hidden;
box-shadow: var(--dietlo-shadow);
}
.dietlo-hero__image-card img {
display: block;
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
object-position: top center;
border-radius: 0;
box-shadow: none;
}
.dietlo-hero__ebook-badge {
position: absolute;
bottom: -12px;
left: -16px;
display: flex;
align-items: center;
gap: 12px;
max-width: 260px;
padding: 14px 16px;
border-radius: 12px;
background: #fff;
border: 1px solid var(--dietlo-line);
box-shadow: var(--dietlo-shadow-md);
}
.dietlo-hero__ebook-badge > img {
flex-shrink: 0;
border-radius: 4px;
width: 36px;
height: auto;
display: block;
box-shadow: none;
}
.dietlo-hero__ebook-badge-name {
display: block;
font-size: var(--dietlo-text-xs);
font-weight: 700;
line-height: 1.35;
color: var(--dietlo-text);
}
.dietlo-hero__ebook-badge-price {
display: block;
font-size: var(--dietlo-text-xs);
color: var(--dietlo-green);
font-weight: 600;
margin-top: 3px;
}
.dietlo-hero__trust {
margin: 16px 0 0;
font-size: var(--dietlo-text-sm);
color: var(--dietlo-muted);
line-height: 1.5;
}
.dietlo-subheadline {
margin: 0 0 18px;
font-family: var(--dietlo-font-display);
font-size: clamp(21px, 2.6vw, 30px);
line-height: 1.28;
color: var(--dietlo-muted);
font-weight: 400;
letter-spacing: -0.01em;
}
/* ── Home: about section ────────────────────────────── */
.dietlo-about__photo {
display: block;
width: 100%;
border-radius: var(--dietlo-radius-card);
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: top center;
box-shadow: var(--dietlo-shadow);
}
.dietlo-about__lead {
margin: 0;
font-size: clamp(18px, 2vw, 20px);
line-height: var(--dietlo-line-body);
color: var(--dietlo-text);
}
/* ── Home: newsletter centred wrapper ───────────────── */
.dietlo-home-newsletter-wrap {
max-width: 560px;
margin: 0 auto;
}
/* ── Home: final CTA ────────────────────────────────── */
.dietlo-section--cta-soft {
background: var(--dietlo-soft);
}
.dietlo-home-final-cta {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 32px;
}
.dietlo-home-final-cta h2 {
margin: 0;
font-family: var(--dietlo-font-display);
font-size: clamp(36px, 5vw, 60px);
line-height: var(--dietlo-line-display);
font-weight: 700;
letter-spacing: var(--dietlo-letter-display);
color: var(--dietlo-text);
max-width: 540px;
}
/* ── Home: carousel section wrapper ─────────────────── */
.dietlo-section--carousel {
background: #eef6ea;
border-top: 3px solid var(--dietlo-green);
border-bottom: 1px solid rgba(85, 185, 71, 0.18);
padding-top: 28px;
padding-bottom: 32px;
}
/* ── Product carousel: shared base (home surface) ───── */
/* blog.css overrides margin/bg/border for blog context */
.dietlo-product-carousel--home {
margin: 0;
padding: 0;
background: transparent;
border: none;
}
.dietlo-product-carousel--home .dietlo-product-carousel__slide {
flex: 0 0 260px;
}
.dietlo-product-carousel__header {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.dietlo-product-carousel__title {
font-family: var(--dietlo-font-display);
font-size: clamp(22px, 2.4vw, 28px);
font-weight: 400;
font-style: italic;
letter-spacing: var(--dietlo-letter-display);
margin: 0;
color: var(--dietlo-text);
line-height: 1.2;
white-space: nowrap;
}
.dietlo-product-carousel__title em {
font-weight: 700;
font-style: italic;
}
@media (max-width: 520px) {
.dietlo-product-carousel__title {
font-size: clamp(13px, 4.25vw, 20px);
}
.dietlo-carousel-all-link {
display: inline-flex;
margin-top: 8px;
}
}
.dietlo-product-carousel__viewport {
position: relative;
}
.dietlo-product-carousel__track {
--dietlo-carousel-edge: 0px;
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x proximity;
scroll-padding-inline: var(--dietlo-carousel-edge);
padding: 4px var(--dietlo-carousel-edge) 12px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.dietlo-product-carousel__track::-webkit-scrollbar {
display: none;
}
.dietlo-product-carousel__slide {
flex: 0 0 152px;
min-width: 0;
scroll-snap-align: start;
background: #fff;
border-radius: 10px;
border: 1px solid var(--dietlo-line);
box-shadow: var(--dietlo-shadow-sm);
padding: 8px 8px 10px;
}
.dietlo-product-carousel__slide:last-child {
scroll-snap-align: end;
}
.dietlo-product-carousel__slide-link {
display: block;
text-decoration: none;
color: inherit;
}
.dietlo-product-carousel__slide-link:hover .dietlo-product-carousel__slide-image img {
transform: scale(1.04);
}
.dietlo-product-carousel__slide-image {
position: relative;
aspect-ratio: 3 / 4;
background: #fff;
border-radius: 6px;
overflow: hidden;
margin-bottom: 8px;
}
/* `position: absolute; inset: 0` zamiast samego `height: 100%`.
Odkad ![]()
deklaruje width/height (wymog CLS), przegladarka nadaje mu
WLASNY aspect-ratio z tych atrybutow. Wysokosc kontenera pochodzi tu
z `aspect-ratio`, a nie z wartosci wprost, wiec procentowa wysokosc
obrazka degraduje do `auto` - obrazek bierze swoja proporcje (1055/1491),
wychodzi wyzszy niz box i zostaje przyciety przez `overflow: hidden`.
Pozycjonowanie bezwzgledne wiaze go z krawedziami boxa niezaleznie od
proporcji wlasnej, wiec `object-fit: contain` znow dziala. */
.dietlo-product-carousel__slide-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
transition: transform 0.28s ease;
}
.dietlo-product-carousel__slide-name {
font-size: var(--dietlo-text-sm);
font-weight: 500;
line-height: 1.4;
color: var(--dietlo-text);
margin: 0 0 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.dietlo-product-carousel__slide-price {
font-size: var(--dietlo-text-sm);
font-weight: 700;
color: var(--dietlo-text);
margin: 0;
}
.dietlo-product-carousel__arrow {
position: absolute;
top: calc(50% - 20px);
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 50%;
background: #fff;
border: 1px solid var(--dietlo-line);
box-shadow: var(--dietlo-shadow-sm);
cursor: pointer;
font-size: var(--dietlo-text-2xl);
line-height: 1;
color: var(--dietlo-text);
display: flex;
align-items: center;
justify-content: center;
transition: box-shadow 0.18s, border-color 0.18s, opacity 0.18s;
touch-action: manipulation;
}
.dietlo-product-carousel__arrow--prev { left: 4px; }
.dietlo-product-carousel__arrow--next { right: 4px; }
.dietlo-product-carousel__arrow.is-hidden {
opacity: 0;
pointer-events: none;
}
.dietlo-product-carousel__arrow:hover,
.dietlo-product-carousel__arrow:focus-visible {
border-color: var(--dietlo-green);
box-shadow: var(--dietlo-shadow-sm);
}
.dietlo-newsletter-page {
color: var(--dietlo-text);
background: #fff;
}
/* grid-equal-height: off - newsletter artwork and copy share a visual center */
.dietlo-newsletter-hero {
min-height: 0;
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(min(380px, 45%), 0.92fr);
gap: 40px;
align-items: center;
}
.dietlo-newsletter-hero__content,
.dietlo-newsletter-bottom__copy {
display: grid;
gap: 18px;
}
.dietlo-newsletter-chip-row {
margin-top: 6px;
}
.dietlo-newsletter-chip {
display: inline-flex;
align-items: center;
min-height: 42px;
padding: 0 16px;
border: 1px solid rgba(24, 27, 34, 0.09);
border-radius: var(--dietlo-radius-pill);
background: rgba(255, 255, 255, 0.78);
color: var(--dietlo-text);
font-size: var(--dietlo-text-md);
font-weight: 700;
}
.dietlo-newsletter-panel {
padding: 28px;
border: 1px solid rgba(24, 27, 34, 0.08);
border-radius: 24px;
background: rgba(255, 255, 255, 0.94);
box-shadow: var(--dietlo-shadow-lg);
}
.dietlo-newsletter-panel__eyebrow {
margin: 0 0 10px;
color: var(--dietlo-green-dark);
font-size: var(--dietlo-text-xs);
font-weight: 700;
letter-spacing: var(--dietlo-letter-eyebrow);
text-transform: uppercase;
}
.dietlo-newsletter-panel__title,
.dietlo-newsletter-section-title {
margin: 0;
font-family: var(--dietlo-font-display);
font-size: clamp(34px, 4vw, 52px);
line-height: 1.08;
letter-spacing: var(--dietlo-letter-display);
}
.dietlo-newsletter-panel__copy,
.dietlo-newsletter-bottom__copy p,
.dietlo-newsletter-audience__copy p {
margin: 0;
color: var(--dietlo-muted);
font-size: var(--dietlo-text-xl);
line-height: 1.62;
}
.dietlo-newsletter-form {
display: grid;
gap: 14px;
margin-top: 20px;
}
.dietlo-newsletter-form__input {
min-height: 56px;
width: 100%;
padding: 0 18px;
border: 1px solid rgba(24, 27, 34, 0.12);
border-radius: var(--dietlo-radius-field);
background: #fff;
color: var(--dietlo-text);
font-size: var(--dietlo-text-lg);
}
.dietlo-newsletter-form__input:focus {
outline: 2px solid rgba(85, 185, 71, 0.28);
outline-offset: 2px;
border-color: rgba(85, 185, 71, 0.55);
}
.dietlo-newsletter-form__submit {
width: 100%;
}
.dietlo-newsletter-form__message {
min-height: 24px;
margin: 12px 0 0;
color: var(--dietlo-muted);
font-size: var(--dietlo-text-md);
}
.dietlo-newsletter-panel__note {
margin: 8px 0 0;
color: var(--dietlo-muted);
font-size: var(--dietlo-text-md);
line-height: 1.6;
}
.dietlo-newsletter-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.dietlo-newsletter-card,
.dietlo-newsletter-aside {
padding: 24px;
border: 1px solid rgba(24, 27, 34, 0.08);
border-radius: 22px;
background: rgba(255, 255, 255, 0.96);
box-shadow: var(--dietlo-shadow-md);
}
.dietlo-newsletter-card h3 {
margin: 0 0 10px;
font-size: 21px;
line-height: 1.2;
}
.dietlo-newsletter-card p {
margin: 0;
color: var(--dietlo-muted);
font-size: var(--dietlo-text-lg);
line-height: var(--dietlo-line-body);
}
/* grid-equal-height: off - audience artwork and copy align to their top edge */
.dietlo-newsletter-audience,
.dietlo-newsletter-bottom {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(min(380px, 45%), 0.9fr);
gap: 24px;
align-items: start;
}
.dietlo-newsletter-list {
margin: 18px 0 0;
padding-left: 20px;
color: var(--dietlo-text);
line-height: 1.72;
}
.dietlo-newsletter-list li + li {
margin-top: 10px;
}
.dietlo-newsletter-list--tight {
margin-top: 12px;
}
.dietlo-newsletter-aside__label {
margin: 0;
color: var(--dietlo-green-dark);
font-size: var(--dietlo-text-xs);
font-weight: 700;
letter-spacing: var(--dietlo-letter-eyebrow);
text-transform: uppercase;
}
.dietlo-newsletter-modal {
position: fixed;
inset: 0;
z-index: 20000;
}
.dietlo-newsletter-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(17, 21, 28, 0.58);
}
.dietlo-newsletter-modal__dialog {
position: relative;
width: min(520px, calc(100% - 32px));
margin: min(10vh, 80px) auto 0;
padding: 28px;
border-radius: 24px;
background: #fff;
box-shadow: 0 24px 64px rgba(17, 21, 28, 0.24);
}
.dietlo-newsletter-modal__close {
position: absolute;
top: 14px;
right: 14px;
width: 40px;
height: 40px;
border: 0;
border-radius: var(--dietlo-radius-pill);
background: #f1f4f1;
color: var(--dietlo-text);
font-size: var(--dietlo-text-xl);
cursor: pointer;
}
.dietlo-newsletter-modal__eyebrow {
margin: 0 0 8px;
color: var(--dietlo-green-dark);
font-size: var(--dietlo-text-xs);
font-weight: 700;
letter-spacing: var(--dietlo-letter-eyebrow);
text-transform: uppercase;
}
.dietlo-newsletter-modal__title {
margin: 0;
font-family: var(--dietlo-font-display);
font-size: clamp(30px, 4vw, 40px);
line-height: 1.08;
}
.dietlo-newsletter-modal__message {
margin: 14px 0 0;
color: var(--dietlo-muted);
font-size: 17px;
line-height: var(--dietlo-line-body);
}
.dietlo-newsletter-modal__link,
.dietlo-newsletter-modal__dismiss {
width: 100%;
margin-top: 16px;
}
.dietlo-newsletter-modal-open {
overflow: hidden;
}
.dietlo-community-modal {
position: fixed;
inset: 0;
z-index: 20010;
}
.dietlo-community-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(17, 21, 28, 0.62);
}
.dietlo-community-modal__dialog {
position: relative;
width: min(560px, calc(100% - 32px));
max-height: calc(100vh - 48px);
margin: min(9vh, 72px) auto;
overflow-y: auto;
padding: 56px 30px 42px;
border-radius: 24px;
background: #fff;
box-shadow: 0 24px 64px rgba(17, 21, 28, 0.24);
}
.dietlo-community-modal__close {
position: absolute;
top: 14px;
right: 14px;
display: grid;
width: 40px;
height: 40px;
place-items: center;
border: 0;
border-radius: var(--dietlo-radius-pill);
background: #f1f4f1;
color: var(--dietlo-text);
font-size: var(--dietlo-text-xl);
cursor: pointer;
}
.dietlo-community-modal__eyebrow {
margin: 0 0 8px;
color: var(--dietlo-green-dark);
font-size: var(--dietlo-text-xs);
font-weight: 700;
letter-spacing: var(--dietlo-letter-eyebrow);
text-align: center;
text-transform: uppercase;
}
.dietlo-community-modal__title {
margin: 0;
font-family: var(--dietlo-font-display);
font-size: clamp(30px, 4vw, 40px);
line-height: 1.08;
text-align: center;
}
.dietlo-community-modal__copy {
width: 100%;
margin: 14px 0 22px;
color: var(--dietlo-muted);
font-size: 17px;
line-height: 1.6;
text-align: center;
}
.dietlo-community-modal__brand {
display: inline-block;
width: clamp(86px, 20vw, 116px);
height: auto;
margin-left: 4px;
vertical-align: -0.18em;
}
@media (max-width: 520px) {
.dietlo-community-modal__title-word,
.dietlo-community-modal__title-rest,
.dietlo-community-modal__brand {
display: block;
margin-left: auto;
margin-right: auto;
}
.dietlo-community-modal__brand {
margin-top: 6px;
}
}
.dietlo-community-modal__form {
display: grid;
gap: 10px;
}
.dietlo-community-modal__label {
color: var(--dietlo-text);
font-size: var(--dietlo-text-md);
font-weight: 700;
}
.dietlo-community-modal__input {
min-height: 54px;
padding: 0 18px;
border: 1px solid var(--dietlo-line);
border-radius: var(--dietlo-radius-pill);
color: var(--dietlo-text);
font: inherit;
}
.dietlo-community-modal__input:focus {
outline: 2px solid var(--dietlo-purple);
outline-offset: 2px;
}
.dietlo-community-modal__consent {
display: grid;
grid-template-columns: 18px 1fr;
column-gap: 10px;
margin-top: 4px;
padding: 14px 16px;
border: 1px solid var(--dietlo-line);
border-radius: var(--dietlo-radius-control);
background: #faf9fc;
color: var(--dietlo-muted);
font-size: var(--dietlo-text-sm);
line-height: 1.45;
}
.dietlo-community-modal__consent-input {
width: 18px;
height: 18px;
margin-top: 2px;
accent-color: var(--dietlo-purple);
}
.dietlo-community-modal__consent-copy {
color: var(--dietlo-text);
font-weight: 500;
}
.dietlo-community-modal__consent-copy label {
cursor: pointer;
}
.dietlo-community-modal__consent details {
display: inline;
}
.dietlo-community-modal__consent summary {
display: inline;
margin-left: 4px;
color: var(--dietlo-purple);
font-weight: 700;
cursor: pointer;
}
.dietlo-community-modal__consent summary::-webkit-details-marker {
display: none;
}
.dietlo-community-modal__consent summary::marker {
content: "";
}
.dietlo-community-modal__consent p {
margin: 10px 0 0;
color: var(--dietlo-muted);
font-weight: 400;
}
.dietlo-community-modal__consent a {
color: var(--dietlo-purple);
font-weight: 700;
}
.dietlo-community-modal__status {
min-height: 20px;
margin: 10px 0 0;
font-size: var(--dietlo-text-md);
line-height: 1.45;
}
.dietlo-community-modal__status:empty {
display: none;
}
.dietlo-community-modal__social {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 14px;
}
.dietlo-community-modal__social a {
display: grid;
width: 36px;
height: 36px;
place-items: center;
border: 1px solid var(--dietlo-purple);
border-radius: var(--dietlo-radius-control);
color: var(--dietlo-purple);
text-decoration: none;
transition:
background var(--dietlo-motion-fast) var(--dietlo-ease-out),
color var(--dietlo-motion-fast) var(--dietlo-ease-out),
transform var(--dietlo-motion-fast) var(--dietlo-ease-out);
}
.dietlo-community-modal__social a:hover,
.dietlo-community-modal__social a:focus-visible {
background: var(--dietlo-purple);
color: #fff;
transform: translateY(-1px);
}
.dietlo-community-modal__social a:focus-visible {
outline: 3px solid rgba(112, 34, 215, 0.22);
outline-offset: 2px;
}
.dietlo-community-modal-open {
overflow: hidden;
}
@media (max-width: 900px) {
.dietlo-newsletter-hero,
.dietlo-newsletter-audience,
.dietlo-newsletter-bottom,
.dietlo-newsletter-grid {
grid-template-columns: 1fr;
}
.dietlo-newsletter-panel {
padding: 24px;
}
}
@media (max-width: 520px) {
.dietlo-newsletter-panel,
.dietlo-newsletter-card,
.dietlo-newsletter-aside,
.dietlo-newsletter-modal__dialog {
padding: 22px 18px;
border-radius: var(--dietlo-radius-card);
}
.dietlo-newsletter-panel__title,
.dietlo-newsletter-section-title {
font-size: 32px;
}
.dietlo-newsletter-panel__copy,
.dietlo-newsletter-bottom__copy p,
.dietlo-newsletter-audience__copy p {
font-size: var(--dietlo-text-lg);
}
}
@media (max-width: 900px) {
.dietlo-section--hero {
padding-top: 60px;
padding-bottom: 48px;
}
.dietlo-section--hero .dietlo-hero__copy {
max-width: 100%;
}
.dietlo-section--hero .dietlo-title {
font-size: 44px;
}
.dietlo-hero {
min-height: 560px;
}
.dietlo-hero__bg {
object-position: 72% center;
}
.dietlo-section--carousel {
padding-left: 0;
padding-right: 0;
}
.dietlo-section--carousel .dietlo-wrap {
padding-left: 0;
padding-right: 0;
}
.dietlo-product-carousel__track {
--dietlo-carousel-edge: 24px;
}
.dietlo-product-carousel--home .dietlo-product-carousel__slide {
flex: 0 0 210px;
}
.dietlo-about__photo {
max-height: 420px;
}
.dietlo-section--about .dietlo-split {
row-gap: 44px;
}
.dietlo-section--about .dietlo-eyebrow {
margin-bottom: 8px;
}
}
@media (max-width: 520px) {
.dietlo-section--hero {
padding-top: 46px;
padding-bottom: 30px;
}
.dietlo-section--hero .dietlo-title {
font-size: clamp(38px, 12vw, 48px);
}
.dietlo-hero {
min-height: 0;
align-items: flex-start;
}
.dietlo-hero__bg {
object-position: 78% center;
opacity: 0.46;
}
.dietlo-hero__badge {
gap: 8px;
margin-bottom: 22px;
}
.dietlo-hero__badge-icon {
width: auto;
height: auto;
}
.dietlo-hero__badge-icon svg {
width: 22px;
height: 22px;
}
/* Jeden wiersz (owner 2026-08-15): na mobile podlinia "w perimenopauzie
i menopauzie" znika, w jej miejsce w glownej linii dochodzi "online"
(patrz .dietlo-hero__badge-online). Zwolnione miejsce pozwala na
wieksza czcionke niz desktopowa --dietlo-text-sm, nadal miesci sie
bez zawijania na 375px (baseline sprawdzany w rules.md). */
.dietlo-hero__badge-text {
max-width: none;
font-size: 17px;
line-height: 1.2;
white-space: nowrap;
flex-wrap: nowrap;
}
.dietlo-hero__badge-online {
display: inline;
}
.dietlo-hero__badge-line--sub {
display: none;
}
.dietlo-title {
font-size: clamp(38px, 12vw, 48px);
}
.dietlo-title__underline {
width: 124px;
height: 12px;
margin: 14px 0 20px;
}
.dietlo-subheadline {
font-size: var(--dietlo-text-2xl);
}
.dietlo-product-carousel--home .dietlo-product-carousel__slide {
flex: 0 0 175px;
}
.dietlo-product-carousel__track {
--dietlo-carousel-edge: 20px;
}
.dietlo-home-final-cta h2 {
font-size: 32px;
}
}
/* ── Home: hero feature strip ───────────────────────── */
.dietlo-hero__benefits {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
margin-top: 18px;
padding-top: 26px;
max-width: 620px;
border-top: 1px solid rgba(96, 103, 116, 0.14);
}
.dietlo-hero__benefit {
display: flex;
align-items: flex-start;
gap: 12px;
min-width: 0;
}
.dietlo-hero__benefit + .dietlo-hero__benefit {
padding-left: 12px;
border-left: 1px dashed rgba(96, 103, 116, 0.18);
}
.dietlo-hero__benefit-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: var(--dietlo-radius-pill);
border: 1px solid rgba(85, 185, 71, 0.22);
background: rgba(255, 255, 255, 0.68);
color: var(--dietlo-green-dark);
}
.dietlo-hero__benefit strong {
display: block;
font-size: 17px;
font-weight: 700;
color: var(--dietlo-text);
margin-bottom: 4px;
}
.dietlo-hero__benefit-copy {
display: block;
margin: 0;
font-size: var(--dietlo-text-md);
color: var(--dietlo-muted);
line-height: 1.48;
}
/* ── Home: hero illustration (right column) ─────────── */
.dietlo-hero__illustration {
display: flex;
align-items: center;
justify-content: flex-end;
}
.dietlo-hero__illustration img {
display: block;
width: 100%;
height: auto;
border-radius: var(--dietlo-radius-card);
}
@media (max-width: 520px) {
.dietlo-hero__benefits {
grid-template-columns: 1fr;
gap: 14px;
}
.dietlo-hero__benefit + .dietlo-hero__benefit {
padding-left: 0;
border-left: none;
}
}
/* ── Home: proof bar ────────────────────────────────── */
.dietlo-section--proof {
padding: 0;
border-bottom: 1px solid var(--dietlo-line);
}
.dietlo-proof-bar {
display: flex;
flex-wrap: wrap;
width: min(1180px, 100%);
margin: 0 auto;
}
.dietlo-proof-bar__item {
display: flex;
align-items: center;
gap: 10px;
padding: 18px 28px;
border-right: 1px solid var(--dietlo-line);
font-size: var(--dietlo-text-md);
font-weight: 600;
color: var(--dietlo-text);
white-space: nowrap;
}
.dietlo-proof-bar__item:last-child {
border-right: none;
}
.dietlo-proof-bar__icon {
flex-shrink: 0;
color: var(--dietlo-green);
}
/* ── Home: editorial block ──────────────────────────── */
.dietlo-editorial {
max-width: 660px;
margin: 0 auto;
text-align: center;
}
.dietlo-editorial p {
font-size: clamp(17px, 1.8vw, 20px);
line-height: 1.75;
color: var(--dietlo-text);
margin: 0 0 20px;
}
.dietlo-editorial p:last-child {
margin-bottom: 0;
}
.dietlo-editorial em {
font-family: var(--dietlo-font-display);
font-style: italic;
}
/* ── Home: problem grid ─────────────────────────────── */
.dietlo-problem-grid {
display: grid;
gap: 24px;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.dietlo-problem--wide {
grid-column: 1 / -1;
background: #f0f7ee;
border-color: #d6ecce;
font-family: var(--dietlo-font-display);
font-size: clamp(18px, 2vw, 22px);
line-height: 1.55;
}
.dietlo-problem--wide p {
color: var(--dietlo-text);
font-style: italic;
margin: 0;
font-size: inherit;
line-height: inherit;
}
/* ── Home: carousel header link + dots + footer ─────── */
.dietlo-carousel-all-link {
font-size: var(--dietlo-text-md);
font-weight: 600;
color: var(--dietlo-green-dark);
text-decoration: none;
white-space: nowrap;
}
.dietlo-carousel-all-link:hover {
text-decoration: underline;
}
.dietlo-product-carousel__slide-desc {
font-size: var(--dietlo-text-xs);
color: var(--dietlo-muted);
margin: 2px 0 4px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.dietlo-product-carousel__dots {
display: flex;
gap: 8px;
justify-content: center;
margin-top: 14px;
min-height: 8px;
}
.dietlo-product-carousel__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--dietlo-line);
border: none;
padding: 0;
cursor: pointer;
transition: background 0.2s ease;
touch-action: manipulation;
}
.dietlo-product-carousel__dot.is-active {
background: var(--dietlo-green-cta);
}
.dietlo-carousel-footer {
text-align: center;
margin-top: 32px;
}
/* ── Home: inline newsletter card ───────────────────── */
.dietlo-home-newsletter {
max-width: 680px;
margin: 0 auto;
padding: 48px 40px;
border: 1px solid var(--dietlo-line);
border-radius: 16px;
background: var(--dietlo-soft);
text-align: center;
}
.dietlo-home-newsletter h2 {
margin: 0 0 12px;
font-family: var(--dietlo-font-display);
font-size: clamp(28px, 3.5vw, 40px);
line-height: var(--dietlo-line-display);
font-weight: 700;
letter-spacing: var(--dietlo-letter-display);
color: var(--dietlo-text);
}
.dietlo-home-newsletter__sub {
margin: 0 0 28px;
font-size: clamp(16px, 1.6vw, 18px);
color: var(--dietlo-muted);
line-height: 1.6;
}
.dietlo-home-newsletter__form {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.dietlo-home-newsletter__label {
display: block;
width: 100%;
text-align: left;
font-size: var(--dietlo-text-md);
font-weight: 600;
color: var(--dietlo-text);
margin-bottom: -2px;
}
.dietlo-home-newsletter__input {
flex: 1;
min-width: 0;
min-height: 56px;
padding: 0 18px;
border: 1px solid var(--dietlo-line);
border-radius: var(--dietlo-radius-field);
font-size: var(--dietlo-text-lg);
font-family: var(--dietlo-font-body);
color: var(--dietlo-text);
background: #fff;
-webkit-appearance: none;
}
.dietlo-home-newsletter__input:focus {
outline: 2px solid var(--dietlo-purple);
outline-offset: 2px;
}
.dietlo-home-newsletter__note {
margin: 12px 0 0;
font-size: var(--dietlo-text-sm);
color: var(--dietlo-muted);
line-height: 1.5;
}
.dietlo-home-newsletter__status {
font-size: var(--dietlo-text-md);
margin: 10px 0 0;
line-height: 1.5;
}
/* ── Home: offer & about helpers ─────────────────────── */
.dietlo-price--offer {
margin: 20px 0 24px;
}
.dietlo-about__body {
margin-top: 16px;
color: var(--dietlo-muted);
line-height: var(--dietlo-line-body);
}
.dietlo-about__actions {
margin-top: 28px;
}
/* ── Home: collaboration (1:1) section ───────────────── */
.dietlo-collab {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
padding: 40px 44px;
background: #fff;
border: 1px solid var(--dietlo-line);
border-radius: 16px;
}
.dietlo-collab__copy h2 {
margin: 10px 0 12px;
font-family: var(--dietlo-font-display);
font-size: clamp(26px, 3vw, 36px);
line-height: var(--dietlo-line-display);
font-weight: 700;
letter-spacing: var(--dietlo-letter-display);
color: var(--dietlo-text);
}
.dietlo-collab__copy p {
margin: 0;
max-width: 560px;
color: var(--dietlo-muted);
line-height: var(--dietlo-line-body);
}
.dietlo-collab__cta {
flex-shrink: 0;
}
@media (max-width: 900px) {
.dietlo-collab {
flex-direction: column;
align-items: flex-start;
padding: 32px 24px;
}
}
@media (max-width: 520px) {
.dietlo-collab__cta {
width: 100%;
}
.dietlo-collab__cta .dietlo-button {
width: 100%;
}
}
/* ── Home: about section decoration & specs ──────────── */
.dietlo-about__media {
position: relative;
}
.dietlo-about__blob {
position: absolute;
z-index: 0;
width: 82%;
aspect-ratio: 1;
border-radius: 50%;
background: rgba(85, 185, 71, 0.16);
top: -5%;
left: -7%;
}
.dietlo-about__square {
position: absolute;
z-index: 0;
width: 74px;
height: 74px;
border-radius: var(--dietlo-radius-card);
background: rgba(112, 34, 215, 0.14);
right: -10px;
bottom: 12%;
transform: rotate(14deg);
}
.dietlo-about__media .dietlo-about__photo {
position: relative;
z-index: 1;
background: #fff;
}
.dietlo-about__specs {
list-style: none;
margin: 18px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.dietlo-about__specs li {
display: flex;
align-items: center;
gap: 10px;
font-size: var(--dietlo-text-lg);
font-weight: 600;
color: var(--dietlo-text);
}
.dietlo-about__specs svg {
color: var(--dietlo-green-cta);
flex-shrink: 0;
}
/* ── Home: offer trust microcopy ─────────────────────── */
.dietlo-offer-trust {
list-style: none;
margin: 18px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.dietlo-offer-trust li {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--dietlo-text-md);
color: var(--dietlo-muted);
}
.dietlo-offer-trust svg {
color: var(--dietlo-green-cta);
flex-shrink: 0;
}
/* ── Home: motion (reveal on scroll) ─────────────────── */
.dietlo-motion-ready .dietlo-reveal {
opacity: 0;
transform: translateY(26px);
transition:
opacity var(--dietlo-motion-reveal) var(--dietlo-ease-premium),
transform var(--dietlo-motion-reveal) var(--dietlo-ease-premium);
}
.dietlo-motion-ready .dietlo-reveal.is-revealed {
opacity: 1;
transform: none;
}
/* ── Home: mobile sticky CTA ─────────────────────────── */
.dietlo-sticky-cta {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1090;
padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
background: rgba(255, 255, 255, 0.97);
box-shadow: 0 -4px 18px rgba(24, 27, 34, 0.1);
transform: translateY(102%);
transition: transform var(--dietlo-motion-base) var(--dietlo-ease-out);
}
.dietlo-sticky-cta.is-shown {
transform: translateY(0);
}
.dietlo-sticky-cta .dietlo-button {
width: 100%;
}
@media (min-width: 900px) {
.dietlo-sticky-cta {
display: none;
}
}
/* ── Reduced motion: information without animation ───── */
@media (prefers-reduced-motion: reduce) {
.dietlo-sticky-cta,
.dietlo-product-carousel__slide-image img,
.dietlo-product-carousel__dot {
transition: none;
}
.dietlo-product-carousel__slide-link:hover .dietlo-product-carousel__slide-image img {
transform: none;
}
.dietlo-product-carousel__track {
scroll-behavior: auto;
}
}
/* ── Responsive additions for new home sections ──────── */
@media (max-width: 900px) {
.dietlo-problem-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 520px) {
.dietlo-problem-grid {
grid-template-columns: 1fr;
}
.dietlo-hero__ebook-badge {
display: none;
}
.dietlo-home-newsletter {
padding: 32px 20px;
}
.dietlo-home-newsletter__form {
flex-direction: column;
}
.dietlo-home-newsletter__form .dietlo-button {
width: 100%;
}
.dietlo-proof-bar__item {
padding: 14px 16px;
font-size: var(--dietlo-text-sm);
}
}
/* ═══════════════════════════════════════════════════════
V2 VISUAL LAYER — redesign sekcji pod hero (2026-07)
Hero i nawigacja bez zmian; poniższe reguły nadpisują
wcześniejszą stylistykę kaskadą (są ostatnie w pliku).
Motyw: DNA hero (pochylona zielona kreska, fiolet serif)
przeniesione na wszystkie sekcje + więcej bieli.
═══════════════════════════════════════════════════════ */
/* Nadpisania V2 dla eyebrow/section-head/card zostaly SPLASZCZONE do
definicji komponentow (css/components/), a rytm sekcji do
css/layout/layout.css. Ponizej zostaje tylko ruch kart tematycznych. */
/* Karty: z życiem na hover */
.dietlo-problem,
.dietlo-feature,
.dietlo-help {
transition:
transform var(--dietlo-motion-base) var(--dietlo-ease-out),
box-shadow var(--dietlo-motion-base) var(--dietlo-ease-out);
}
.dietlo-problem:hover,
.dietlo-feature:hover,
.dietlo-help:hover {
transform: translateY(-4px);
box-shadow:
inset 0 3px 0 var(--dietlo-green),
0 2px 4px rgba(24, 27, 34, 0.05),
0 22px 48px rgba(24, 27, 34, 0.1);
}
.dietlo-feature:nth-child(even):hover,
.dietlo-help--purple:hover {
box-shadow:
inset 0 3px 0 var(--dietlo-purple),
0 2px 4px rgba(24, 27, 34, 0.05),
0 22px 48px rgba(24, 27, 34, 0.1);
}
/* Ikony: większe kafle; sekcja podejścia dostaje fioletowy akcent */
.dietlo-icon {
position: relative;
width: 52px;
height: 52px;
border-radius: 16px;
color: var(--dietlo-green-dark);
transition: transform var(--dietlo-motion-fast) var(--dietlo-ease-out);
}
/* Branded akcent: mała jednolita kropka "liścia" na kaflu ikony */
.dietlo-icon::after {
content: "";
position: absolute;
top: -4px;
right: -4px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--dietlo-green);
border: 2px solid #fff;
}
.dietlo-feature:nth-child(even) .dietlo-icon::after {
background: var(--dietlo-purple);
}
.dietlo-card:hover .dietlo-icon {
transform: rotate(-5deg) scale(1.08);
}
/* Karty feature: naprzemienne bloki koloru zamiast płaskiej bieli */
.dietlo-feature {
border-color: transparent;
}
.dietlo-feature:nth-child(odd) {
background: #f1f8ef;
}
.dietlo-feature:nth-child(even) {
background: #f6f1fd;
}
.dietlo-feature .dietlo-icon {
background: #fff;
color: var(--dietlo-green-dark);
box-shadow: var(--dietlo-shadow-sm);
}
.dietlo-feature:nth-child(even) .dietlo-icon {
color: var(--dietlo-purple);
}
/* Cytat w siatce problemów: duży serif z fioletowym cudzysłowem */
.dietlo-problem--wide {
position: relative;
padding: 38px 44px 34px 92px;
background: #f0f7ee;
border-color: transparent;
}
.dietlo-problem--wide::before {
content: "\201E";
position: absolute;
left: 30px;
top: 2px;
font-family: var(--dietlo-font-display);
font-size: 80px;
line-height: 1;
color: var(--dietlo-purple);
opacity: 0.45;
}
/* Editorial: duże serifowe stwierdzenie z zieloną kreską */
.dietlo-editorial {
max-width: 780px;
}
.dietlo-editorial::before {
content: "";
display: block;
width: 56px;
height: 4px;
margin: 0 auto 30px;
border-radius: var(--dietlo-radius-pill);
background: var(--dietlo-green);
}
.dietlo-editorial p {
font-family: var(--dietlo-font-display);
font-size: clamp(21px, 2.6vw, 29px);
line-height: 1.5;
letter-spacing: var(--dietlo-letter-display);
}
.dietlo-editorial em {
color: var(--dietlo-purple);
}
/* Pasek zaufania: pływające pigułki zamiast tabelki */
.dietlo-proof-bar {
gap: 14px;
justify-content: center;
padding: 0 20px;
}
.dietlo-proof-bar__item {
border: 1px solid var(--dietlo-line);
border-radius: var(--dietlo-radius-pill);
background: #fff;
padding: 12px 22px;
box-shadow: var(--dietlo-shadow-sm);
}
.dietlo-proof-bar__item:last-child {
border-right: 1px solid var(--dietlo-line);
}
.dietlo-proof-bar__icon {
color: var(--dietlo-green-dark);
}
/* Oferta: split zamknięty w białym panelu na miękkim tle */
#oferta .dietlo-split {
background: #fff;
border: 1px solid var(--dietlo-line);
border-radius: var(--dietlo-radius-panel);
padding: clamp(28px, 4.5vw, 56px);
box-shadow: var(--dietlo-shadow);
}
#oferta .dietlo-eyebrow {
background: rgba(112, 34, 215, 0.1);
color: var(--dietlo-purple);
}
.dietlo-price--offer {
font-family: var(--dietlo-font-display);
font-size: clamp(28px, 3vw, 36px);
font-weight: 700;
color: var(--dietlo-text);
}
/* Współpraca 1:1: fioletowy panel — najmocniejszy akcent strony */
.dietlo-collab {
background: var(--dietlo-purple);
border: none;
border-radius: var(--dietlo-radius-panel);
padding: clamp(32px, 5vw, 56px);
}
.dietlo-collab__copy h2 {
color: #fff;
}
.dietlo-collab__copy p {
color: rgba(255, 255, 255, 0.88);
}
.dietlo-collab .dietlo-eyebrow {
background: rgba(255, 255, 255, 0.16);
color: #fff;
}
.dietlo-collab .dietlo-button--purple {
background: #fff !important;
color: var(--dietlo-purple) !important;
box-shadow: 0 12px 28px rgba(20, 5, 46, 0.3);
}
.dietlo-collab .dietlo-button:focus-visible {
outline-color: #fff;
}
/* Newsletter: miękka karta zamykająca stronę */
.dietlo-home-newsletter {
max-width: 720px;
border: 1px solid var(--dietlo-line);
border-radius: var(--dietlo-radius-panel);
padding: clamp(40px, 6vw, 64px) clamp(24px, 5vw, 56px);
background: var(--dietlo-soft);
box-shadow: var(--dietlo-shadow);
}
.dietlo-home-newsletter .dietlo-eyebrow {
margin-bottom: 16px;
}
.dietlo-home-newsletter__input {
border-radius: var(--dietlo-radius-field);
padding: 0 22px;
}
/* Karuzela: karty w tym samym języku co reszta */
.dietlo-product-carousel__slide {
border-radius: var(--dietlo-radius-field);
transition:
transform var(--dietlo-motion-base) var(--dietlo-ease-out),
box-shadow var(--dietlo-motion-base) var(--dietlo-ease-out);
}
.dietlo-product-carousel__slide:hover {
transform: translateY(-3px);
box-shadow: var(--dietlo-shadow-md);
}
/* Karty problemów: duże "duchowe" numery serif w tle */
.dietlo-problem-grid {
counter-reset: dietlo-problem;
}
.dietlo-problem {
position: relative;
overflow: hidden;
}
.dietlo-problem:not(.dietlo-problem--wide)::after {
counter-increment: dietlo-problem;
content: "0" counter(dietlo-problem);
position: absolute;
top: 10px;
right: 16px;
font-family: var(--dietlo-font-display);
font-size: 64px;
font-weight: 700;
line-height: 1;
color: rgba(24, 27, 34, 0.06);
pointer-events: none;
}
/* Oferta: dekoracja koła + kwadratu przy okładce (język sekcji O mnie) */
.dietlo-product-visual {
position: relative;
}
.dietlo-product-visual::before {
content: "";
position: absolute;
z-index: 0;
width: 70%;
aspect-ratio: 1;
border-radius: 50%;
background: rgba(85, 185, 71, 0.14);
top: -6%;
left: -8%;
}
.dietlo-product-visual::after {
content: "";
position: absolute;
z-index: 0;
width: 58px;
height: 58px;
border-radius: 16px;
background: rgba(112, 34, 215, 0.12);
right: -6px;
bottom: 8%;
transform: rotate(14deg);
}
.dietlo-product-visual img {
position: relative;
z-index: 1;
}
/* Ciemna sekcja (opinie): kontrast w środku strony */
.dietlo-section--dark {
background: var(--dietlo-text, #181b22);
}
.dietlo-section--dark .dietlo-section-head h2 {
color: #fff;
}
.dietlo-section--dark .dietlo-section-head p {
color: #9aa3a9;
}
.dietlo-section--dark .dietlo-eyebrow {
background: rgba(255, 255, 255, 0.12);
color: #e8ede9;
}
.dietlo-section--dark .dietlo-testimonial {
background: #212630;
border-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.dietlo-section--dark .dietlo-testimonial:hover,
.dietlo-section--dark .dietlo-testimonial:focus-visible {
box-shadow: 0 20px 44px rgba(0, 0, 0, 0.4);
}
.dietlo-section--dark .dietlo-testimonial__quote {
color: #f3f5f3;
}
.dietlo-section--dark .dietlo-testimonial__meta strong {
color: #fff;
}
.dietlo-section--dark .dietlo-testimonial__meta span {
color: #9aa3a9;
}
.dietlo-section--dark .dietlo-testimonial__link {
color: #c9aef7;
}
/* Timeline współpracy (S11): zygzak na centralnej osi, także mobile */
.dietlo-journey {
list-style: none;
margin: 0 auto;
padding: 8px 0 0;
position: relative;
max-width: 880px;
counter-reset: dietlo-journey;
}
.dietlo-journey::before {
content: "";
position: absolute;
top: 0;
bottom: 24px;
left: 50%;
width: 2px;
margin-left: -1px;
background: var(--dietlo-line);
}
.dietlo-journey__step {
position: relative;
z-index: 1;
width: calc(50% - 56px);
margin: 0 0 52px;
padding: 28px 30px;
background: #fff;
border: 1px solid var(--dietlo-line);
border-radius: var(--dietlo-radius-card);
box-shadow:
0 1px 2px rgba(24, 27, 34, 0.04),
0 14px 34px rgba(24, 27, 34, 0.06);
counter-increment: dietlo-journey;
}
.dietlo-journey__step:last-of-type {
margin-bottom: 0;
}
.dietlo-journey__step:nth-child(odd) {
margin-right: auto;
}
.dietlo-journey__step:nth-child(even) {
margin-left: auto;
}
.dietlo-journey__step::before {
content: counter(dietlo-journey);
position: absolute;
top: 22px;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--dietlo-green-cta);
color: #fff;
font-weight: 700;
font-size: 17px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 6px #fff;
transition: background 0.6s var(--dietlo-ease-premium);
}
.dietlo-journey__step:nth-child(odd)::before {
right: -78px;
}
.dietlo-journey__step:nth-child(even)::before {
left: -78px;
}
.dietlo-journey__step:nth-child(even) {
border-color: rgba(112, 34, 215, 0.18);
}
.dietlo-journey__step:nth-child(even)::before {
background: var(--dietlo-purple);
}
.dietlo-journey__step h3 {
margin: 0 0 8px;
font-size: 19px;
font-weight: 700;
color: var(--dietlo-text);
}
.dietlo-journey__step p {
margin: 0;
font-size: var(--dietlo-text-base);
line-height: 1.6;
color: var(--dietlo-muted);
}
/* Scroll-driven: linia postępu rysuje się (i cofa) z pozycją scrolla,
kroki wjeżdżają z lewej/prawej i gasną przy scrollu w górę. */
.dietlo-journey__progress {
position: absolute;
z-index: 0;
top: 0;
bottom: 24px;
left: 50%;
width: 2px;
margin-left: -1px;
background: var(--dietlo-purple);
transform-origin: top center;
transform: scaleY(0);
will-change: transform;
}
.dietlo-journey.is-scroll-driven .dietlo-journey__step {
opacity: 0.3;
transform: translateX(-48px);
transition:
opacity var(--dietlo-motion-journey) var(--dietlo-ease-premium),
transform var(--dietlo-motion-journey) var(--dietlo-ease-premium);
}
.dietlo-journey.is-scroll-driven .dietlo-journey__step:nth-child(even) {
transform: translateX(48px);
}
.dietlo-journey.is-scroll-driven .dietlo-journey__step:not(.is-active)::before {
background: #b9c0c9;
}
.dietlo-journey.is-scroll-driven .dietlo-journey__step.is-active {
opacity: 1;
transform: none;
}
/* Mobile: zygzak 50% dawał karty ~165px — za ciasno. Oś przechodzi na
lewą krawędź, karty na pełną szerokość; animacja lewo/prawo zostaje. */
@media (max-width: 680px) {
.dietlo-journey::before,
.dietlo-journey__progress {
left: 17px;
margin-left: 0;
}
.dietlo-journey__step,
.dietlo-journey__step:nth-child(odd),
.dietlo-journey__step:nth-child(even) {
width: calc(100% - 54px);
margin: 0 0 22px 54px;
padding: 16px 16px 18px;
}
.dietlo-journey__step:last-of-type {
margin-bottom: 0;
}
.dietlo-journey__step::before,
.dietlo-journey__step:nth-child(odd)::before,
.dietlo-journey__step:nth-child(even)::before {
left: -54px;
right: auto;
top: 12px;
width: 34px;
height: 34px;
font-size: var(--dietlo-text-md);
box-shadow: 0 0 0 4px #fff;
}
.dietlo-journey__step h3 {
font-size: var(--dietlo-text-base);
}
.dietlo-journey__step p {
font-size: var(--dietlo-text-sm);
line-height: 1.5;
}
}
/* Opinie / historie podopiecznych (S9) */
.dietlo-testimonials {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.dietlo-testimonial {
display: flex;
flex-direction: column;
gap: 16px;
padding: 30px;
text-decoration: none;
color: inherit;
transition:
transform var(--dietlo-motion-base) var(--dietlo-ease-out),
box-shadow var(--dietlo-motion-base) var(--dietlo-ease-out);
}
.dietlo-testimonial:hover,
.dietlo-testimonial:focus-visible {
transform: translateY(-4px);
box-shadow: var(--dietlo-shadow-lg);
}
.dietlo-testimonial:focus-visible {
outline: 3px solid var(--dietlo-purple);
outline-offset: 2px;
}
.dietlo-testimonial__quote {
margin: 0;
flex-grow: 1;
font-family: var(--dietlo-font-display);
font-style: italic;
font-size: 17px;
line-height: 1.6;
color: var(--dietlo-text);
}
.dietlo-testimonial__meta strong {
display: block;
font-size: var(--dietlo-text-base);
color: var(--dietlo-text);
}
.dietlo-testimonial__meta span {
font-size: var(--dietlo-text-sm);
color: var(--dietlo-muted);
}
.dietlo-testimonial__link {
font-size: var(--dietlo-text-md);
font-weight: 600;
color: var(--dietlo-purple);
}
.dietlo-testimonial:hover .dietlo-testimonial__link {
text-decoration: underline;
}
@media (max-width: 900px) {
.dietlo-testimonials {
grid-template-columns: 1fr;
}
}
/* Mobile korekty warstwy V2 */
@media (max-width: 520px) {
.dietlo-problem--wide {
padding: 30px 22px 26px 58px;
}
.dietlo-problem--wide::before {
left: 16px;
top: 4px;
font-size: 56px;
}
.dietlo-home-newsletter {
padding: 36px 20px;
}
}
/* Float wykorzystywany przez orbitę specjalizacji */
@keyframes dietlo-float {
from { transform: translateY(0); }
to { transform: translateY(-16px); }
}
/* Wejście hero przy załadowaniu: kaskada copy (czysty CSS, bez JS) */
@media (prefers-reduced-motion: no-preference) {
.dietlo-hero__copy > * {
animation: dietlo-rise 0.9s var(--dietlo-ease-premium) backwards;
}
.dietlo-hero__copy > *:nth-child(1) { animation-delay: 0.1s; }
.dietlo-hero__copy > *:nth-child(2) { animation-delay: 0.22s; }
.dietlo-hero__copy > *:nth-child(3) { animation-delay: 0.34s; }
.dietlo-hero__copy > *:nth-child(4) { animation-delay: 0.46s; }
.dietlo-hero__copy > *:nth-child(5) { animation-delay: 0.58s; }
.dietlo-hero__copy > *:nth-child(6) { animation-delay: 0.7s; }
}
@keyframes dietlo-rise {
from {
opacity: 0;
transform: translateY(16px);
}
}
/* .dietlo-button--pulse i keyframes dietlo-cta-attention mieszkaja
w css/components/button.css. Tu zostaje tylko choreografia hero. */
@keyframes dietlo-hero-cta-bounce {
0%, 42%, 100% {
transform: translateY(0);
}
8% {
transform: translateY(-10px);
}
16% {
transform: translateY(0);
}
22% {
transform: translateY(-6px);
}
30% {
transform: translateY(0);
}
}
@media (prefers-reduced-motion: no-preference) {
.dietlo-section--hero .dietlo-button--pulse {
animation: dietlo-hero-cta-bounce 3.8s cubic-bezier(0.34, 1.56, 0.64, 1) 2s infinite;
transform-origin: center;
}
}
@media (prefers-reduced-motion: reduce) {
.dietlo-section--hero .dietlo-button--pulse {
animation: none;
}
}
/* Sekcja "W czym mogę Ci pomóc?": styl referencyjny — lawendowe tło,
orbita korzyści wokół centrum + karty z cytatami. Plamy jednolite. */
.dietlo-section--help {
position: relative;
overflow: hidden;
background: var(--dietlo-purple-surface-2);
}
.dietlo-section--help::before {
content: "";
position: absolute;
top: -160px;
left: -140px;
width: 420px;
height: 420px;
border-radius: 50%;
background: rgba(112, 34, 215, 0.05);
pointer-events: none;
}
.dietlo-section--help::after {
content: "";
position: absolute;
bottom: -180px;
right: -140px;
width: 460px;
height: 460px;
border-radius: 50%;
background: rgba(85, 185, 71, 0.07);
pointer-events: none;
}
.dietlo-help-layout {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 400px) minmax(0, 1fr);
grid-template-rows: repeat(3, auto);
column-gap: clamp(20px, 3vw, 40px);
row-gap: 18px;
align-items: stretch;
}
.dietlo-help-list {
display: contents;
}
.dietlo-help-layout > .dietlo-orbit {
grid-column: 2;
grid-row: 1 / span 3;
align-self: center;
}
.dietlo-help-list .dietlo-help:nth-child(1) {
grid-column: 1;
grid-row: 1;
}
.dietlo-help-list .dietlo-help:nth-child(2) {
grid-column: 1;
grid-row: 2;
}
.dietlo-help-list .dietlo-help:nth-child(3) {
grid-column: 1;
grid-row: 3;
}
.dietlo-help-list .dietlo-help:nth-child(4) {
grid-column: 3;
grid-row: 1;
}
.dietlo-help-list .dietlo-help:nth-child(5) {
grid-column: 3;
grid-row: 2;
}
.dietlo-help-list .dietlo-help:nth-child(6) {
grid-column: 3;
grid-row: 3;
}
/* Orbita korzyści */
.dietlo-orbit {
position: relative;
width: min(460px, 100%);
aspect-ratio: 1;
margin: 0 auto;
}
.dietlo-orbit__ring {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
animation: dietlo-orbit-spin 90s linear infinite;
}
@keyframes dietlo-orbit-spin {
to { transform: rotate(360deg); }
}
.dietlo-orbit__center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 42%;
aspect-ratio: 1;
border-radius: 50%;
background: #f1eafb;
border: 1px solid rgba(112, 34, 215, 0.12);
display: flex;
align-items: center;
justify-content: center;
}
.dietlo-orbit__items {
list-style: none;
margin: 0;
padding: 0;
}
.dietlo-orbit__item {
position: absolute;
transform: translate(-50%, -50%);
width: 122px;
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
text-align: center;
animation: dietlo-float 9s ease-in-out infinite alternate;
}
.dietlo-orbit__item:nth-child(2n) {
animation-duration: 12s;
}
.dietlo-orbit__item:nth-child(3n) {
animation-duration: 15s;
}
.dietlo-orbit__badge {
display: flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
border-radius: 50%;
background: #fff;
border: 1px solid rgba(112, 34, 215, 0.15);
box-shadow:
0 2px 4px rgba(24, 27, 34, 0.04),
0 12px 26px rgba(112, 34, 215, 0.12);
color: var(--dietlo-purple);
}
.dietlo-orbit__label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.35;
color: var(--dietlo-text);
}
@media (max-width: 900px) {
.dietlo-help-layout {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
gap: 36px;
}
.dietlo-help-layout > .dietlo-orbit {
grid-column: 1;
grid-row: 1;
}
.dietlo-help-list {
display: grid;
grid-column: 1;
grid-row: 2;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.dietlo-help-list .dietlo-help:nth-child(n) {
grid-column: auto;
grid-row: auto;
}
.dietlo-orbit {
width: min(400px, 100%);
}
}
@media (max-width: 520px) {
.dietlo-orbit__badge {
width: 48px;
height: 48px;
}
.dietlo-orbit__badge svg {
width: 22px;
height: 22px;
}
.dietlo-orbit__item {
width: 96px;
}
.dietlo-orbit__label {
font-size: 9.5px;
}
.dietlo-orbit__center svg {
width: 52px;
height: 52px;
}
}
/* Karty: cytat klientki → diagnoza → konkret */
.dietlo-help {
display: flex;
flex-direction: column;
gap: 14px;
padding: 28px 26px;
background: #fff;
}
.dietlo-help__quote {
margin: 0;
flex-grow: 1;
font-family: var(--dietlo-font-display);
font-style: italic;
font-size: 19px;
line-height: 1.5;
color: var(--dietlo-text);
}
.dietlo-help__tag {
margin: 0;
}
.dietlo-help__chip {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 16px;
border-radius: var(--dietlo-radius-pill);
background: var(--dietlo-green-cta);
color: #fff;
font-size: var(--dietlo-text-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.dietlo-help--purple .dietlo-help__chip {
background: var(--dietlo-purple);
}
.dietlo-help__how {
margin: 0;
font-size: var(--dietlo-text-base);
line-height: 1.6;
color: var(--dietlo-muted);
}
/* Help section reference layout: centered intro with a clean card grid. */
.dietlo-section--help {
background: var(--dietlo-soft);
}
.dietlo-section--help .dietlo-section-head {
max-width: 760px;
margin: 0 auto 42px;
text-align: center;
display: block;
}
.dietlo-section--help .dietlo-section-head p {
max-width: 620px;
margin-left: auto;
margin-right: auto;
}
.dietlo-help-layout {
display: block;
}
.dietlo-orbit {
display: none;
}
.dietlo-help-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.dietlo-help {
min-height: 260px;
padding: 30px;
border: 1px solid var(--dietlo-line);
border-radius: var(--dietlo-radius-control);
box-shadow: var(--dietlo-shadow-md);
}
.dietlo-help__art {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: var(--dietlo-radius-control);
background: rgba(85, 185, 71, 0.1);
color: var(--dietlo-green-dark);
}
.dietlo-help--purple .dietlo-help__art {
background: rgba(112, 34, 215, 0.09);
color: var(--dietlo-purple);
}
.dietlo-help__art svg {
width: 30px;
height: 30px;
}
.dietlo-help__title {
margin: 0;
font-family: var(--dietlo-font-display);
font-size: var(--dietlo-text-3xl);
line-height: 1.2;
}
@media (max-width: 900px) {
.dietlo-help-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 520px) {
.dietlo-section--help .dietlo-section-head {
margin-bottom: 30px;
}
.dietlo-help-list {
grid-template-columns: 1fr;
gap: 16px;
}
.dietlo-help {
min-height: 0;
padding: 24px;
}
}
/* Reveal kierunkowy dla sekcji split (obraz z lewej, copy z prawej) */
.dietlo-motion-ready .dietlo-reveal-left,
.dietlo-motion-ready .dietlo-reveal-right {
opacity: 0;
transition:
opacity var(--dietlo-motion-reveal) var(--dietlo-ease-premium),
transform var(--dietlo-motion-reveal) var(--dietlo-ease-premium);
}
.dietlo-motion-ready .dietlo-reveal-left {
transform: translateX(-48px);
}
.dietlo-motion-ready .dietlo-reveal-right {
transform: translateX(48px);
}
.dietlo-motion-ready .dietlo-reveal-left.is-revealed,
.dietlo-motion-ready .dietlo-reveal-right.is-revealed {
opacity: 1;
transform: none;
}
/* Mikrointerakcje: karuzela, proof bar, formularz */
.dietlo-product-carousel__dot {
transition:
background var(--dietlo-motion-fast) var(--dietlo-ease-out),
width var(--dietlo-motion-fast) var(--dietlo-ease-out);
}
.dietlo-product-carousel__dot.is-active {
width: 22px;
border-radius: var(--dietlo-radius-pill);
}
.dietlo-product-carousel__arrow {
transition:
transform var(--dietlo-motion-fast) var(--dietlo-ease-out),
border-color var(--dietlo-motion-fast) var(--dietlo-ease-out),
box-shadow var(--dietlo-motion-fast) var(--dietlo-ease-out);
}
.dietlo-product-carousel__arrow:hover,
.dietlo-product-carousel__arrow:focus-visible {
transform: translateY(-50%) scale(1.08);
}
.dietlo-proof-bar__item {
transition:
transform var(--dietlo-motion-fast) var(--dietlo-ease-out),
box-shadow var(--dietlo-motion-fast) var(--dietlo-ease-out);
}
.dietlo-proof-bar__item:hover {
transform: translateY(-2px);
box-shadow: var(--dietlo-shadow-md);
}
.dietlo-home-newsletter__input {
transition: box-shadow var(--dietlo-motion-fast) var(--dietlo-ease-out);
}
.dietlo-home-newsletter__input:focus {
box-shadow: 0 0 0 5px rgba(112, 34, 215, 0.1);
}
@keyframes dietlo-shake {
0%, 100% { transform: none; }
20% { transform: translateX(-6px); }
40% { transform: translateX(5px); }
60% { transform: translateX(-3px); }
80% { transform: translateX(2px); }
}
.dietlo-shake {
animation: dietlo-shake 0.4s ease;
}
/* Reduced motion dla powyższych */
@media (prefers-reduced-motion: reduce) {
.dietlo-orbit__ring,
.dietlo-orbit__item,
.dietlo-shake {
animation: none;
}
.dietlo-icon,
.dietlo-proof-bar__item,
.dietlo-product-carousel__arrow {
transition: none;
}
.dietlo-card:hover .dietlo-icon,
.dietlo-proof-bar__item:hover,
.dietlo-help:hover {
transform: none;
}
}
/* ── Hero mobile (≤680px): dedykowana grafika pionowa, desktop nietknięty ── */
.dietlo-hero__mobile-art {
display: none;
}
@media (max-width: 680px) {
/* Panorama 1881x836 cropowana przez cover + opacity dawała
nieczytelną "zupę" za tekstem — na mobile znika (picture podaje 1px gif). */
.dietlo-hero__bg {
display: none;
}
/* Białe przesłony czytelności nie są potrzebne bez ilustracji w tle. */
.dietlo-section--hero::before {
display: none;
}
/* Tlo strefy naglowka (nad grafika) to druga powierzchnia fioletowa
z design systemu - lekko szara, nie biel. Grafika ma jasna gorna
krawedz w tym samym tonie, wiec przejscie w nia zostaje bezszwowe. */
.dietlo-section--hero {
background: var(--dietlo-purple-surface-2);
}
/* Hero jest pierwszym dzieckiem `.dietlo-landing`, wiec lapie sie na
`.dietlo-landing > .dietlo-section:first-child { padding-bottom: 20px }`
(base-pages.css, blok <=900px). Ta regula wazy (0,3,0) - klasa, klasa
i `:first-child` - wiec `padding-bottom: 0` zapisane jako
`.dietlo-section--hero` (0,1,0) przegrywalo i nie robilo nic.
Skutkiem byl 20-pikselowy bialy pas miedzy grafika hero a fioletowa
sekcja pod nia; zmierzony na zrzucie, nie zgadniety. Rownamy wage. */
.dietlo-landing > .dietlo-section.dietlo-section--hero {
padding-bottom: 0;
}
/* Grafika hero konczy sie pelnoszerokosciowa fala na fiolecie, a sekcja
zaraz pod nia jest fioletowa. Standardowy gorny padding sekcji
(clamp(32px,5vw,72px) w layout.css) zostawal wtedy jako plaski, pusty
pas miedzy fala a trescia - czytelny jako sztuczna przerwa. Na desktopie
ta sama regula jest niewidoczna, bo hero nie konczy sie fala.
Zerujemy TYLKO gorny padding i TYLKO tam, gdzie widoczna jest grafika
mobilna; dolny oddech sekcji zostaje nietkniety. */
/* Widoczna kreska na styku grafiki i sekcji NIE brala sie z odstepu, tylko
z KOLORU: grafika konczy sie jednolitym #9f6fe7 (zmierzone na ostatnim
rzedzie pikseli, jednolite w poprzek), a sekcja ma #a372ef. Roznica
4/3/8 na kanalach jest mala, ale na duzej plaskiej powierzchni czyta sie
jako pozioma krecha.
Zerowanie gornego paddingu bylo bledna diagnoza: krechy nie usunelo,
a naglowek sekcji przykleilo do gornej krawedzi. Padding wraca wiec do
wartosci systemowej z layout.css, a tutaj zrownujemy sam kolor - wtedy
fala z ilustracji przechodzi w tlo sekcji bez szwu, a odstep nad
naglowkiem przestaje byc widoczny jako pusty pas.
`!important` jest wymuszone: `.dietlo-section--help` nizej w tym pliku
ustawia `background: #a372ef !important`. Specyficznosc (0,3,0) wygrywa
z tamta (0,1,0) niezaleznie od kolejnosci.
Przy podmianie grafiki hero trzeba zmierzyc jej dolna krawedz na nowo. */
.dietlo-landing > .dietlo-section.dietlo-section--help {
background: #9f6fe7 !important;
}
.dietlo-hero {
min-height: 0;
display: flex;
flex-direction: column;
align-items: stretch;
}
/* Mobile: najpierw copy i CTA, potem zdjęcie. */
.dietlo-hero__copy {
display: contents;
}
.dietlo-hero__badge { order: 1; }
.dietlo-title { order: 2; }
.dietlo-title__underline { order: 3; }
.dietlo-lead { order: 4; }
.dietlo-actions { order: 5; }
.dietlo-hero__benefits { order: 6; }
.dietlo-hero__mobile-pic { order: 7; }
/* Tekst nad obrazem w osi Z (obraz jest później w DOM). */
.dietlo-hero__badge,
.dietlo-title,
.dietlo-title__underline {
position: relative;
z-index: 1;
}
.dietlo-hero__mobile-pic {
display: block;
position: relative;
z-index: 0;
width: 100%;
margin-top: 28px;
}
.dietlo-hero__mobile-art {
display: block;
width: 100%;
max-width: 460px;
height: auto;
/* Wysokosc obrazka to szerokosc * 1448/1086, wiec przy wiekszosci
szerokosci ekranu wypada na UŁAMKU piksela. Przegladarka antyaliasuje
wtedy dolny wiersz, mieszajac fiolet z tlem - i widac cienki, jasniejszy
wlos na styku z sekcja. Jeden ujemny piksel chowa ten wiersz pod
sekcja; oba pola sa tym samym fioletem, wiec nachodzenie jest
niewidoczne. Bez tego styk jest czysty tylko przy szerokosciach
dajacych calkowita wysokosc (np. 390px). */
margin: 0 auto -1px;
}
.dietlo-lead {
margin-top: 18px;
}
.dietlo-hero__benefits {
margin-top: 14px;
padding-top: 20px;
}
}
/* ═══════════════════════════════════════════════════════
V3 LAYER — premium health-tech (prompt.txt, 2026-07)
Geometryczny system tła sekcji (jednolite kolory, opacity
5-15%), placeholdery foto, autorskie ikony, mockup device.
═══════════════════════════════════════════════════════ */
/* Sekcje z charakterem: każda ma własny, INNY motyw geometryczny */
.dietlo-section--problem,
.dietlo-section--editorial,
.dietlo-section--values,
#oferta,
.dietlo-section--ebooks,
.dietlo-section--dark,
.dietlo-section--journey,
.dietlo-section--newsletter {
position: relative;
overflow: hidden;
}
/* S3 problem: mikro-kropki (fiolet) w prawym górnym rogu */
.dietlo-section--problem::after {
content: "";
position: absolute;
top: 36px;
right: 28px;
width: 190px;
height: 130px;
background-image: url('data:image/svg+xml;utf8,');
pointer-events: none;
}
/* S4 editorial: cienki okrąg wychodzący z lewej */
.dietlo-section--editorial::after {
content: "";
position: absolute;
top: 50%;
left: -170px;
width: 340px;
height: 340px;
border-radius: 50%;
border: 1.5px solid rgba(85, 185, 71, 0.14);
transform: translateY(-50%);
pointer-events: none;
}
/* S6 podejście: orbitalna linia przerywana po prawej */
.dietlo-section--values::after {
content: "";
position: absolute;
top: -140px;
right: -200px;
width: 520px;
height: 520px;
border-radius: 50%;
border: 1.5px dashed rgba(112, 34, 215, 0.14);
pointer-events: none;
}
/* S7 oferta: podwójny cienki ring w lewym górnym rogu */
#oferta::before {
content: "";
position: absolute;
top: -110px;
left: -110px;
width: 280px;
height: 280px;
border-radius: 50%;
border: 1.5px solid rgba(85, 185, 71, 0.15);
box-shadow: 0 0 0 26px rgba(85, 185, 71, 0.05);
pointer-events: none;
}
/* S8 ebooki: mikro-kropki (zieleń) na dole po lewej */
.dietlo-section--ebooks::after {
content: "";
position: absolute;
bottom: 30px;
left: 26px;
width: 150px;
height: 110px;
background-image: url('data:image/svg+xml;utf8,');
pointer-events: none;
}
/* S9 opinie (dark): biały ring + kropki, bardzo subtelnie */
.dietlo-section--dark::before {
content: "";
position: absolute;
top: -120px;
right: -120px;
width: 340px;
height: 340px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.07);
pointer-events: none;
}
.dietlo-section--dark::after {
content: "";
position: absolute;
bottom: 40px;
left: 30px;
width: 150px;
height: 100px;
background-image: url('data:image/svg+xml;utf8,');
pointer-events: none;
}
/* S11 timeline: półokrąg za nagłówkiem */
.dietlo-section--journey::before {
content: "";
position: absolute;
top: -190px;
left: 50%;
width: 380px;
height: 380px;
border-radius: 50%;
border: 1.5px solid rgba(112, 34, 215, 0.1);
transform: translateX(-50%);
pointer-events: none;
}
/* S13 newsletter: cienki okrąg z prawej */
.dietlo-section--newsletter::after {
content: "";
position: absolute;
top: 50%;
right: -150px;
width: 300px;
height: 300px;
border-radius: 50%;
border: 1.5px solid rgba(85, 185, 71, 0.13);
transform: translateY(-50%);
pointer-events: none;
}
/* S12 współpraca: białe ringi wewnątrz fioletowego panelu */
.dietlo-collab {
position: relative;
overflow: hidden;
}
.dietlo-collab::before {
content: "";
position: absolute;
top: -90px;
right: -70px;
width: 240px;
height: 240px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 0 0 34px rgba(255, 255, 255, 0.04);
pointer-events: none;
}
.dietlo-collab > * {
position: relative;
z-index: 1;
}
/* Karty pomocy V3: większe, app-like, z autorską ikoną ilustracyjną */
.dietlo-help {
gap: 16px;
padding: 34px 32px;
border-radius: var(--dietlo-radius-card);
}
.dietlo-help__art {
display: inline-flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 22px;
background: #f1f8ef;
color: var(--dietlo-green-dark);
}
.dietlo-help--purple .dietlo-help__art {
background: #f4edfd;
color: var(--dietlo-purple);
}
.dietlo-help__title {
margin: 0;
font-family: var(--dietlo-font-display);
font-style: italic;
font-size: 21px;
line-height: 1.35;
letter-spacing: var(--dietlo-letter-display);
color: var(--dietlo-text);
}
/* Opinie: awatary-inicjały (placeholder pod zdjęcia klientek) */
.dietlo-testimonial__meta {
display: flex;
align-items: center;
gap: 12px;
}
.dietlo-testimonial__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: #f1eafb;
color: var(--dietlo-purple);
font-weight: 700;
font-size: 17px;
flex-shrink: 0;
}
.dietlo-section--dark .dietlo-testimonial__avatar {
background: rgba(255, 255, 255, 0.1);
color: #c9aef7;
}
/* Współpraca: placeholder pod zdjęcie z konsultacji */
.dietlo-collab__side {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
flex-shrink: 0;
}
.dietlo-collab__media {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
width: 210px;
min-height: 130px;
border: 1.5px dashed rgba(255, 255, 255, 0.35);
border-radius: 16px;
color: rgba(255, 255, 255, 0.75);
font-size: 12.5px;
text-align: center;
padding: 14px;
}
/* Oferta: okładka ebooka w ramce tabletu (mockup device) */
.dietlo-device {
display: block;
max-width: 420px;
margin: 0 auto;
padding: 16px 14px 22px;
background: var(--dietlo-text, #181b22);
border-radius: 26px;
box-shadow:
0 2px 4px rgba(24, 27, 34, 0.12),
0 24px 48px rgba(24, 27, 34, 0.18);
position: relative;
}
.dietlo-device::after {
content: "";
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
width: 34px;
height: 4px;
border-radius: var(--dietlo-radius-pill);
background: rgba(255, 255, 255, 0.25);
}
.dietlo-device img {
display: block;
width: 100%;
height: auto;
border-radius: 12px;
}
@media (max-width: 900px) {
.dietlo-collab__side {
width: 100%;
align-items: stretch;
}
.dietlo-collab__media {
width: 100%;
}
}
@media (max-width: 520px) {
.dietlo-help {
padding: 26px 22px;
}
.dietlo-help__art {
width: 64px;
height: 64px;
border-radius: 18px;
}
.dietlo-help__title {
font-size: 19px;
}
.dietlo-device {
padding: 12px 10px 18px;
border-radius: var(--dietlo-radius-card);
}
}
/* ═══════════════════════════════════════════════════════
IA LAYER — architektura ekosystemu (prompt 2026-07-07):
ścieżki (destination cards), materiały, społeczność,
6 obszarów wsparcia.
═══════════════════════════════════════════════════════ */
/* Jak mogę Ci pomóc: zwarta karta w układzie 3 + orbita + 3 */
.dietlo-help {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
grid-template-rows: auto auto 1fr;
column-gap: 16px;
row-gap: 8px;
align-content: start;
padding: 22px 20px;
}
.dietlo-help__art {
grid-column: 1;
grid-row: 1 / span 3;
width: 56px;
height: 56px;
border-radius: 16px;
}
.dietlo-help__art svg {
width: 38px;
height: 38px;
}
.dietlo-help__title {
grid-column: 2;
font-size: 17px;
line-height: 1.3;
}
.dietlo-help__tag,
.dietlo-help__how {
grid-column: 2;
}
.dietlo-help__chip {
min-height: 26px;
padding: 0 11px;
font-size: 10px;
}
.dietlo-help__how {
font-size: var(--dietlo-text-sm);
line-height: 1.5;
}
@media (max-width: 520px) {
.dietlo-help-list {
grid-template-columns: 1fr;
}
.dietlo-help {
padding: 20px 18px;
}
}
/* Final help-section layout overrides. */
.dietlo-section--help .dietlo-section-head {
max-width: 760px;
margin: 0 auto 42px;
text-align: center;
display: block !important;
}
.dietlo-section--help .dietlo-section-head p {
max-width: 620px;
margin-left: auto;
margin-right: auto;
}
.dietlo-section--help .dietlo-help-layout {
display: block;
}
.dietlo-section--help .dietlo-orbit {
display: none;
}
.dietlo-section--help .dietlo-help-list {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 24px;
}
.dietlo-section--help .dietlo-help-list .dietlo-help:nth-child(n) {
display: flex !important;
grid-column: auto !important;
grid-row: auto !important;
}
/* Home sequence: help follows the hero immediately. */
.dietlo-landing {
display: flex;
flex-direction: column;
}
.dietlo-landing > .dietlo-section { order: 20; }
.dietlo-landing > .dietlo-section--hero { order: 1; }
.dietlo-landing > .dietlo-section--help { order: 2; }
.dietlo-landing > .dietlo-section--proof { order: 3; }
.dietlo-landing > .dietlo-section--problem { order: 4; }
.dietlo-landing > .dietlo-section--editorial { order: 5; }
.dietlo-landing > .dietlo-section--paths { order: 6; }
.dietlo-landing > .dietlo-section--about { order: 7; }
.dietlo-landing > .dietlo-section--newsletter { order: 8; }
.dietlo-landing > .dietlo-section--materials { order: 9; }
.dietlo-landing > .dietlo-section--values { order: 10; }
.dietlo-landing > .dietlo-section--dark { order: 11; }
.dietlo-landing > #wspolpraca { order: 12; }
.dietlo-section--help {
background: #a372ef !important;
}
#oferta::before,
#oferta::after,
.dietlo-section--ebooks::before,
.dietlo-section--ebooks::after,
.dietlo-section--materials::before,
.dietlo-section--materials::after {
content: none !important;
}
#oferta,
.dietlo-section--ebooks,
.dietlo-section--materials {
background-image: none !important;
}
.dietlo-section--help .dietlo-section-head h2,
.dietlo-section--help .dietlo-section-head p,
.dietlo-section--help .dietlo-section-head .dietlo-eyebrow {
color: #fff;
}
.dietlo-section--help .dietlo-help-list .dietlo-help:nth-child(n + 4) {
display: none !important;
}
.dietlo-section--help .dietlo-help {
min-height: 260px;
padding: 30px;
border: 1px solid var(--dietlo-line);
border-radius: var(--dietlo-radius-control);
box-shadow: var(--dietlo-shadow-md);
}
.dietlo-section--help .dietlo-help__art {
width: 48px;
height: 48px;
border-radius: var(--dietlo-radius-control);
}
.dietlo-section--help .dietlo-help__title {
grid-column: auto;
font-size: var(--dietlo-text-3xl);
line-height: 1.2;
}
.dietlo-section--help .dietlo-help__tag,
.dietlo-section--help .dietlo-help__how {
grid-column: auto;
}
@media (max-width: 900px) {
.dietlo-section--help .dietlo-help-list {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 520px) {
.dietlo-section--help .dietlo-section-head {
margin-bottom: 30px;
}
.dietlo-section--help .dietlo-help-list {
grid-template-columns: 1fr !important;
gap: 16px;
}
.dietlo-section--help .dietlo-help {
min-height: 0;
padding: 24px;
}
}
/* Wybierz swoją ścieżkę: destination cards — główne wejścia ekosystemu */
.dietlo-section--paths {
position: relative;
overflow: hidden;
background: var(--dietlo-soft);
}
.dietlo-section--paths::after {
content: "";
position: absolute;
bottom: -160px;
left: -140px;
width: 380px;
height: 380px;
border-radius: 50%;
border: 1.5px dashed rgba(85, 185, 71, 0.16);
pointer-events: none;
}
.dietlo-paths {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
align-items: stretch;
}
.dietlo-path {
display: flex;
flex-direction: column;
gap: 16px;
min-height: 380px;
padding: clamp(28px, 3vw, 40px);
border-radius: 24px;
background: #fff;
border: 1px solid var(--dietlo-line);
text-decoration: none;
color: inherit;
box-shadow:
0 1px 2px rgba(24, 27, 34, 0.04),
0 16px 38px rgba(24, 27, 34, 0.07);
transition:
transform var(--dietlo-motion-base) var(--dietlo-ease-out),
box-shadow var(--dietlo-motion-base) var(--dietlo-ease-out);
}
.dietlo-path:hover,
.dietlo-path:focus-visible {
transform: translateY(-6px);
box-shadow:
0 2px 4px rgba(24, 27, 34, 0.05),
0 28px 56px rgba(24, 27, 34, 0.12);
}
.dietlo-path:focus-visible {
outline: 3px solid var(--dietlo-purple);
outline-offset: 3px;
}
.dietlo-path__kicker {
font-size: var(--dietlo-text-xs);
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--dietlo-green-dark);
}
.dietlo-path__title {
margin: 0;
font-family: var(--dietlo-font-display);
font-size: clamp(23px, 2.2vw, 28px);
line-height: 1.25;
letter-spacing: var(--dietlo-letter-display);
font-weight: 700;
color: var(--dietlo-text);
}
.dietlo-path__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
flex-grow: 1;
}
.dietlo-path__list li {
position: relative;
padding-left: 26px;
font-size: var(--dietlo-text-base);
line-height: 1.5;
color: var(--dietlo-muted);
}
.dietlo-path__list li::before {
content: "";
position: absolute;
left: 0;
top: 5px;
width: 15px;
height: 15px;
border-radius: 50%;
background: rgba(85, 185, 71, 0.16);
box-shadow: inset 0 0 0 4.5px rgba(46, 124, 40, 0);
}
.dietlo-path__list li::after {
content: "";
position: absolute;
left: 4px;
top: 9px;
width: 7px;
height: 4px;
border-left: 2px solid var(--dietlo-green-cta);
border-bottom: 2px solid var(--dietlo-green-cta);
transform: rotate(-45deg);
}
.dietlo-path__cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--dietlo-text-lg);
font-weight: 700;
color: var(--dietlo-purple);
}
.dietlo-path__cta span {
transition: transform var(--dietlo-motion-fast) var(--dietlo-ease-out);
}
.dietlo-path:hover .dietlo-path__cta span {
transform: translateX(5px);
}
/* Karta wyróżniona: współpraca indywidualna (fioletowy panel) */
.dietlo-path--featured {
background: var(--dietlo-purple);
border-color: transparent;
position: relative;
overflow: hidden;
}
.dietlo-path--featured::before {
content: "";
position: absolute;
top: -70px;
right: -60px;
width: 190px;
height: 190px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.05);
pointer-events: none;
}
.dietlo-path--featured .dietlo-path__kicker {
color: rgba(255, 255, 255, 0.85);
}
.dietlo-path--featured .dietlo-path__title {
color: #fff;
}
.dietlo-path--featured .dietlo-path__list li {
color: rgba(255, 255, 255, 0.88);
}
.dietlo-path--featured .dietlo-path__list li::before {
background: rgba(255, 255, 255, 0.16);
}
.dietlo-path--featured .dietlo-path__list li::after {
border-color: #fff;
}
.dietlo-path--featured .dietlo-path__cta {
color: #fff;
}
@media (max-width: 900px) {
.dietlo-paths {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dietlo-path:last-child {
grid-column: 1 / -1;
min-height: 0;
}
}
@media (max-width: 680px) {
.dietlo-paths {
grid-template-columns: 1fr;
}
.dietlo-path {
min-height: 0;
}
}
/* Społeczność: chipy korzyści nad formularzem */
.dietlo-home-newsletter__perks {
list-style: none;
margin: 0 0 26px;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.dietlo-home-newsletter__perks li {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 15px;
border-radius: var(--dietlo-radius-pill);
background: #fff;
border: 1px solid var(--dietlo-line);
font-size: var(--dietlo-text-sm);
font-weight: 600;
color: var(--dietlo-text);
}
.dietlo-home-newsletter__perks li::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--dietlo-green-cta);
}
.dietlo-home-newsletter__perks li:nth-child(even)::before {
background: var(--dietlo-purple);
}
/* Materiały i inspiracje: kompaktowe karty-linki */
.dietlo-material {
display: flex;
flex-direction: column;
gap: 10px;
padding: 28px 26px;
text-decoration: none;
color: inherit;
transition:
transform var(--dietlo-motion-base) var(--dietlo-ease-out),
box-shadow var(--dietlo-motion-base) var(--dietlo-ease-out);
}
.dietlo-material:hover,
.dietlo-material:focus-visible {
transform: translateY(-4px);
box-shadow:
0 2px 4px rgba(24, 27, 34, 0.05),
0 22px 48px rgba(24, 27, 34, 0.1);
}
.dietlo-material:focus-visible {
outline: 3px solid var(--dietlo-purple);
outline-offset: 2px;
}
.dietlo-material h3 {
margin: 0;
font-size: 19px;
color: var(--dietlo-text);
}
.dietlo-material p {
margin: 0;
font-size: 14.5px;
line-height: 1.55;
color: var(--dietlo-muted);
flex-grow: 1;
}
.dietlo-material .dietlo-icon {
margin-bottom: 4px;
}
.dietlo-section--materials .dietlo-materials {
display: none !important;
}
.dietlo-material-carousels {
display: grid;
gap: 34px;
min-width: 0;
max-width: 100%;
}
.dietlo-content-carousel {
margin: 0;
min-width: 0;
max-width: 100%;
}
.dietlo-content-carousel .dietlo-product-carousel__viewport {
min-width: 0;
max-width: 100%;
overflow: hidden;
}
.dietlo-content-carousel .dietlo-product-carousel__track {
gap: 18px;
max-width: 100%;
padding-bottom: 16px;
}
.dietlo-content-carousel .dietlo-product-carousel__slide {
flex: 0 0 320px;
padding: 0;
overflow: hidden;
}
.dietlo-content-carousel__link {
height: 100%;
}
.dietlo-content-carousel__image {
aspect-ratio: 16 / 10;
margin: 0;
border-radius: 8px 8px 0 0;
background: #f3effc;
}
.dietlo-content-carousel__image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.dietlo-content-carousel__placeholder {
display: grid;
width: 100%;
height: 100%;
place-items: center;
background: #f3effc;
color: var(--dietlo-purple);
font-family: var(--dietlo-font-display);
font-size: 56px;
font-weight: 700;
}
.dietlo-content-carousel__meta,
.dietlo-content-carousel__name,
.dietlo-content-carousel__desc {
margin-left: 18px;
margin-right: 18px;
}
.dietlo-content-carousel__meta {
margin-top: 16px;
margin-bottom: 8px;
color: var(--dietlo-purple);
font-size: var(--dietlo-text-xs);
font-weight: 700;
}
.dietlo-content-carousel__name {
font-size: var(--dietlo-text-xl);
font-weight: 700;
line-height: 1.25;
}
.dietlo-content-carousel__desc {
margin-bottom: 20px;
font-size: var(--dietlo-text-md);
line-height: 1.55;
color: var(--dietlo-muted);
}
@media (max-width: 520px) {
.dietlo-content-carousel .dietlo-product-carousel__slide {
flex-basis: min(82vw, 320px, 100%);
}
}
.dietlo-material__link {
font-size: var(--dietlo-text-md);
font-weight: 700;
color: var(--dietlo-purple);
}
.dietlo-material:hover .dietlo-material__link {
text-decoration: underline;
}
/* ── Ścieżki V2: karty-wejścia z wizualem i emocją ────── */
.dietlo-path {
min-height: 0;
gap: 14px;
}
.dietlo-path__media {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 185px;
border-radius: 18px;
background: #f1f8ef;
overflow: hidden;
margin-bottom: 4px;
}
.dietlo-path--featured .dietlo-path__media {
background: rgba(255, 255, 255, 0.1);
}
.dietlo-path--group .dietlo-path__media {
background: #f4edfd;
}
.dietlo-path__media-ring {
position: absolute;
width: 215px;
height: 215px;
border-radius: 50%;
border: 1.5px dashed rgba(112, 34, 215, 0.22);
transition: transform 700ms var(--dietlo-ease-premium);
}
.dietlo-path--featured .dietlo-path__media-ring {
border-color: rgba(255, 255, 255, 0.28);
}
.dietlo-path:hover .dietlo-path__media-ring {
transform: rotate(16deg) scale(1.06);
}
/* Karta 1: ebook w białej ramce */
.dietlo-path__book {
display: block;
width: 116px;
padding: 7px 7px 9px;
background: #fff;
border-radius: 10px;
box-shadow: var(--dietlo-shadow-md);
transform: rotate(-4deg);
transition: transform 500ms var(--dietlo-ease-premium);
}
.dietlo-path__book img {
display: block;
width: 100%;
height: auto;
border-radius: 6px;
transition: transform 700ms var(--dietlo-ease-premium);
}
.dietlo-path:hover .dietlo-path__book {
transform: rotate(-1.5deg) translateY(-5px);
}
.dietlo-path:hover .dietlo-path__book img {
transform: scale(1.05);
}
/* Karta 2: prawdziwa twarz + dymek rozmowy */
.dietlo-path__face {
display: block;
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
box-shadow:
0 0 0 5px rgba(255, 255, 255, 0.9),
0 16px 34px rgba(20, 5, 46, 0.35);
}
.dietlo-path__face img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
transition: transform 700ms var(--dietlo-ease-premium);
}
.dietlo-path:hover .dietlo-path__face img {
transform: scale(1.08);
}
.dietlo-path__bubble {
position: absolute;
top: 32px;
left: calc(50% + 44px);
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 14px 14px 14px 4px;
background: #fff;
color: var(--dietlo-purple);
box-shadow: 0 10px 22px rgba(20, 5, 46, 0.3);
transition: transform 500ms var(--dietlo-ease-premium);
}
.dietlo-path:hover .dietlo-path__bubble {
transform: translateY(-5px) rotate(6deg);
}
/* Karta 3: nakładające się awatary + "+Ty" */
.dietlo-path__crowd {
display: flex;
align-items: center;
}
.dietlo-path__face-sm {
display: inline-flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
margin-left: -16px;
border-radius: 50%;
border: 3px solid #f4edfd;
background: #fff;
color: var(--dietlo-purple);
font-weight: 700;
font-size: 19px;
transition: transform 400ms var(--dietlo-ease-premium);
}
.dietlo-path__face-sm:first-child {
margin-left: 0;
}
.dietlo-path__face-sm:nth-child(2) {
background: #f1f8ef;
color: var(--dietlo-green-dark);
transition-delay: 40ms;
}
.dietlo-path__face-sm:nth-child(3) {
transition-delay: 80ms;
}
.dietlo-path__face-sm--you {
background: var(--dietlo-green-cta);
color: #fff;
font-size: var(--dietlo-text-base);
transition-delay: 120ms;
}
.dietlo-path:hover .dietlo-path__face-sm {
transform: translateY(-4px);
}
/* Opis + podświetlenie CTA */
.dietlo-path__desc {
margin: 0;
flex-grow: 1;
font-size: var(--dietlo-text-base);
line-height: 1.55;
color: var(--dietlo-muted);
}
.dietlo-path--featured .dietlo-path__desc {
color: rgba(255, 255, 255, 0.88);
}
.dietlo-path__cta {
position: relative;
align-self: flex-start;
padding-bottom: 4px;
}
.dietlo-path__cta::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
border-radius: var(--dietlo-radius-pill);
background: currentColor;
transform: scaleX(0);
transform-origin: left center;
transition: transform 400ms var(--dietlo-ease-premium);
}
.dietlo-path:hover .dietlo-path__cta::after,
.dietlo-path:focus-visible .dietlo-path__cta::after {
transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
.dietlo-path__media-ring,
.dietlo-path__book,
.dietlo-path__book img,
.dietlo-path__face img,
.dietlo-path__bubble,
.dietlo-path__face-sm,
.dietlo-path__cta::after {
transition: none;
}
.dietlo-path:hover .dietlo-path__media-ring,
.dietlo-path:hover .dietlo-path__book,
.dietlo-path:hover .dietlo-path__book img,
.dietlo-path:hover .dietlo-path__face img,
.dietlo-path:hover .dietlo-path__bubble,
.dietlo-path:hover .dietlo-path__face-sm {
transform: none;
}
.dietlo-paths {
scroll-behavior: auto;
}
}
/* ═══════════════════════════════════════════════════════
V5 LAYER — anty-monotonia (prompt 2026-07-07 #2):
warianty nagłówków sekcji, motywy geometryczne per sekcja
(bez blobów), asymetryczne ścieżki, reverse-scroll reveal.
═══════════════════════════════════════════════════════ */
/* Warianty naglowkow A/B/NUM/E i animacja kreski mieszkaja
w css/components/section-head.css (splaszczone z korektami V5.1). */
/* ── Motywy geometryczne per sekcja (zero blobów/plam) ── */
/* Problem: orbitalne przerywane linie */
.dietlo-section--problem::before {
content: "";
position: absolute;
top: -130px;
right: -130px;
width: 350px;
height: 350px;
border-radius: 50%;
border: 1.5px dashed rgba(85, 185, 71, 0.15);
pointer-events: none;
}
.dietlo-section--problem::after {
top: -200px;
right: -200px;
width: 490px;
height: 490px;
border-radius: 50%;
border: 1.5px dashed rgba(112, 34, 215, 0.13);
background-image: none;
background-color: transparent;
}
/* Jak mogę pomóc: siatka punktów zamiast plam */
.dietlo-section--help::before {
top: 64px;
left: 34px;
width: 190px;
height: 132px;
border-radius: 0;
background-color: transparent;
background-image: url('data:image/svg+xml;utf8,');
}
.dietlo-section--help::after {
bottom: -150px;
right: -150px;
width: 340px;
height: 340px;
background-color: transparent;
border: 1.5px solid rgba(85, 185, 71, 0.14);
}
/* Ścieżki: koncentryczne okręgi */
.dietlo-section--paths::before {
content: "";
position: absolute;
bottom: -130px;
left: -130px;
width: 300px;
height: 300px;
border-radius: 50%;
border: 1.5px solid rgba(112, 34, 215, 0.12);
pointer-events: none;
}
.dietlo-section--paths::after {
bottom: -200px;
left: -200px;
width: 440px;
height: 440px;
border-style: solid;
border-color: rgba(85, 185, 71, 0.14);
}
/* O mnie: organiczna, rysowana linia */
.dietlo-section--about {
position: relative;
overflow: hidden;
}
.dietlo-section--about::after {
content: "";
position: absolute;
top: 8%;
right: -30px;
width: 300px;
height: 430px;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml;utf8,');
pointer-events: none;
}
/* Społeczność: połączone punkty (sieć) */
.dietlo-section--newsletter::before {
content: "";
position: absolute;
top: 56px;
left: 30px;
width: 170px;
height: 150px;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml;utf8,');
pointer-events: none;
}
/* Materiały: lekkie geometryczne ramki */
.dietlo-section--materials {
position: relative;
overflow: hidden;
}
.dietlo-section--materials::before {
content: "";
position: absolute;
top: 46px;
right: 38px;
width: 118px;
height: 118px;
border: 1.5px solid rgba(112, 34, 215, 0.14);
border-radius: var(--dietlo-radius-card);
transform: rotate(10deg);
pointer-events: none;
}
.dietlo-section--materials::after {
content: "";
position: absolute;
bottom: 64px;
left: 32px;
width: 84px;
height: 84px;
border: 1.5px solid rgba(85, 185, 71, 0.17);
border-radius: 16px;
transform: rotate(-8deg);
pointer-events: none;
}
/* Geometria odkrywa się PIERWSZA i cofa przy reverse scroll */
.dietlo-motion-ready .dietlo-section--problem::before,
.dietlo-motion-ready .dietlo-section--problem::after,
.dietlo-motion-ready .dietlo-section--help::before,
.dietlo-motion-ready .dietlo-section--help::after,
.dietlo-motion-ready .dietlo-section--paths::before,
.dietlo-motion-ready .dietlo-section--paths::after,
.dietlo-motion-ready .dietlo-section--about::after,
.dietlo-motion-ready .dietlo-section--newsletter::before,
.dietlo-motion-ready .dietlo-section--newsletter::after,
.dietlo-motion-ready .dietlo-section--materials::before,
.dietlo-motion-ready .dietlo-section--materials::after,
.dietlo-motion-ready .dietlo-section--editorial::after,
.dietlo-motion-ready .dietlo-section--values::after,
.dietlo-motion-ready #oferta::before,
.dietlo-motion-ready .dietlo-section--ebooks::after,
.dietlo-motion-ready .dietlo-section--dark::before,
.dietlo-motion-ready .dietlo-section--dark::after,
.dietlo-motion-ready .dietlo-section--journey::before {
opacity: 0;
transition: opacity 1600ms var(--dietlo-ease-premium);
}
.dietlo-motion-ready .dietlo-section--problem.is-inview::before,
.dietlo-motion-ready .dietlo-section--problem.is-inview::after,
.dietlo-motion-ready .dietlo-section--help.is-inview::before,
.dietlo-motion-ready .dietlo-section--help.is-inview::after,
.dietlo-motion-ready .dietlo-section--paths.is-inview::before,
.dietlo-motion-ready .dietlo-section--paths.is-inview::after,
.dietlo-motion-ready .dietlo-section--about.is-inview::after,
.dietlo-motion-ready .dietlo-section--newsletter.is-inview::before,
.dietlo-motion-ready .dietlo-section--newsletter.is-inview::after,
.dietlo-motion-ready .dietlo-section--materials.is-inview::before,
.dietlo-motion-ready .dietlo-section--materials.is-inview::after,
.dietlo-motion-ready .dietlo-section--editorial.is-inview::after,
.dietlo-motion-ready .dietlo-section--values.is-inview::after,
.dietlo-motion-ready #oferta.is-inview::before,
.dietlo-motion-ready .dietlo-section--ebooks.is-inview::after,
.dietlo-motion-ready .dietlo-section--dark.is-inview::before,
.dietlo-motion-ready .dietlo-section--dark.is-inview::after,
.dietlo-motion-ready .dietlo-section--journey.is-inview::before {
opacity: 1;
}
/* ── Ścieżki V3: asymetria, większe media, wyraziste CTA ── */
/* grid-equal-height: off - this is the deliberate asymmetric paths composition */
.dietlo-paths {
grid-template-columns: 1fr 1.16fr 1fr;
align-items: start;
}
.dietlo-path__media {
height: 205px;
}
.dietlo-path--featured {
transform: translateY(-16px);
padding-bottom: clamp(34px, 3.4vw, 48px);
}
.dietlo-path--featured:hover {
transform: translateY(-24px);
}
.dietlo-path--products,
.dietlo-path--group {
margin-top: 18px;
}
.dietlo-path--featured .dietlo-path__media {
height: 230px;
overflow: visible;
}
/* Zdjęcie wychodzi poza ramkę media (asymetria + głębia) */
.dietlo-path--featured .dietlo-path__face {
width: 152px;
height: 152px;
margin-bottom: -34px;
}
.dietlo-path--featured .dietlo-path__bubble {
left: calc(50% + 58px);
top: 26px;
}
.dietlo-path--featured .dietlo-path__kicker {
margin-top: 22px;
}
/* CTA jako wyraziste pigułki zamiast linku z podkreśleniem */
.dietlo-path__cta {
padding: 12px 24px;
border-radius: var(--dietlo-radius-control);
background: rgba(112, 34, 215, 0.09);
transition:
background var(--dietlo-motion-fast) var(--dietlo-ease-out),
color var(--dietlo-motion-fast) var(--dietlo-ease-out),
transform var(--dietlo-motion-fast) var(--dietlo-ease-out);
}
.dietlo-path__cta::after {
display: none;
}
.dietlo-path:hover .dietlo-path__cta {
background: var(--dietlo-purple);
color: #fff;
transform: translateY(-2px);
}
.dietlo-path--featured .dietlo-path__cta {
background: #fff;
color: var(--dietlo-purple);
}
.dietlo-path--featured:hover .dietlo-path__cta {
background: #fff;
color: var(--dietlo-purple);
box-shadow: 0 10px 22px rgba(20, 5, 46, 0.35);
}
@media (max-width: 900px) {
.dietlo-path--featured,
.dietlo-path--featured:hover {
transform: none;
}
.dietlo-path--products,
.dietlo-path--group {
margin-top: 0;
}
}
/* ── Mikro-życie: oddech centrum orbity ──────────────── */
@keyframes dietlo-center-breathe {
from { transform: translate(-50%, -50%) scale(1); }
to { transform: translate(-50%, -50%) scale(1.035); }
}
.dietlo-orbit__center {
animation: dietlo-center-breathe 5.5s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
.dietlo-orbit__center {
animation: none;
}
}
/* ── V5.1: geometria wyraźniejsza + w kadrze ── */
/* (korekta H2 sciezek splaszczona do css/components/section-head.css) */
/* Problem: orbity bliżej kadru, mocniejsze */
.dietlo-section--problem::before {
top: -70px;
right: -60px;
width: 300px;
height: 300px;
border-color: rgba(85, 185, 71, 0.26);
}
.dietlo-section--problem::after {
top: -140px;
right: -140px;
width: 430px;
height: 430px;
border-color: rgba(112, 34, 215, 0.22);
}
/* Pomoc: gęstsza siatka punktów + bliższy ring */
.dietlo-section--help::before {
width: 214px;
height: 152px;
background-image: url('data:image/svg+xml;utf8,');
}
.dietlo-section--help::after {
bottom: -90px;
right: -90px;
border-color: rgba(85, 185, 71, 0.24);
}
/* Ścieżki: koncentryczne okręgi widoczne, nie domyślne */
.dietlo-section--paths::before {
bottom: -70px;
left: -70px;
border-color: rgba(112, 34, 215, 0.22);
}
.dietlo-section--paths::after {
bottom: -130px;
left: -130px;
width: 400px;
height: 400px;
border-color: rgba(85, 185, 71, 0.24);
}
/* Editorial: okrąg bliżej + nowy mały dashed ring po prawej */
.dietlo-section--editorial::after {
left: -110px;
border-color: rgba(85, 185, 71, 0.24);
}
.dietlo-section--editorial::before {
content: "";
position: absolute;
top: 42px;
right: 7%;
width: 120px;
height: 120px;
border-radius: 50%;
border: 1.5px dashed rgba(112, 34, 215, 0.2);
pointer-events: none;
}
/* O mnie: mocniejsza linia + nowa siatka punktów u góry */
.dietlo-section--about::after {
right: -14px;
background-image: url('data:image/svg+xml;utf8,');
}
.dietlo-section--about::before {
content: "";
position: absolute;
top: 54px;
left: 32px;
width: 152px;
height: 110px;
background-image: url('data:image/svg+xml;utf8,');
pointer-events: none;
}
/* Społeczność: wyraźniejsza sieć + bliższy okrąg */
.dietlo-section--newsletter::before {
width: 190px;
height: 162px;
background-image: url('data:image/svg+xml;utf8,');
}
.dietlo-section--newsletter::after {
right: -90px;
border-color: rgba(85, 185, 71, 0.24);
}
/* Materiały: ramki mocniejsze */
.dietlo-section--materials::before {
border-color: rgba(112, 34, 215, 0.24);
}
.dietlo-section--materials::after {
border-color: rgba(85, 185, 71, 0.3);
}
/* Podejście / oferta / ebooki / dark / timeline: podbicie */
.dietlo-section--values::after {
top: -90px;
right: -130px;
border-color: rgba(112, 34, 215, 0.22);
}
#oferta::before {
top: -70px;
left: -70px;
border-color: rgba(85, 185, 71, 0.26);
box-shadow: 0 0 0 26px rgba(85, 185, 71, 0.08);
}
.dietlo-section--ebooks::after {
background-image: url('data:image/svg+xml;utf8,');
}
.dietlo-section--dark::before {
top: -90px;
right: -90px;
border-color: rgba(255, 255, 255, 0.13);
}
.dietlo-section--dark::after {
background-image: url('data:image/svg+xml;utf8,');
}
.dietlo-section--journey::before {
border-color: rgba(112, 34, 215, 0.18);
}
/* ── Checklista objawów "Brzmi znajomo?" (sugestywne wiersze) ── */
/* grid-equal-height: off - checklist card and ebook visual remain vertically centered */
.dietlo-checklist-layout {
position: relative;
display: grid;
grid-template-columns: minmax(min(520px, 45%), 0.78fr) minmax(min(360px, 45%), 1fr);
grid-template-areas:
"card visual"
"cta visual";
column-gap: clamp(24px, 4vw, 64px);
row-gap: 18px;
align-items: center;
min-height: 0;
isolation: isolate;
overflow: visible;
}
.dietlo-checklist {
position: relative;
grid-area: card;
z-index: 2;
width: min(100%, 680px);
padding: clamp(24px, 3vw, 36px) clamp(22px, 3.2vw, 38px);
border-radius: 18px;
background: rgba(255, 255, 255, 0.96);
box-shadow:
0 2px 5px rgba(24, 27, 34, 0.06),
0 22px 58px rgba(24, 27, 34, 0.12);
}
.dietlo-checklist__intro {
margin-bottom: 18px;
}
.dietlo-checklist__intro .dietlo-eyebrow {
margin-bottom: 12px;
}
.dietlo-checklist__intro h2 {
margin: 0;
font-family: var(--dietlo-font-display);
font-size: clamp(31px, 3.4vw, 46px);
line-height: var(--dietlo-line-display-tight);
letter-spacing: var(--dietlo-letter-display);
color: var(--dietlo-text);
}
.dietlo-checklist__intro p {
margin: 12px 0 0;
color: var(--dietlo-muted);
font-size: var(--dietlo-text-lg);
line-height: 1.6;
}
.dietlo-checklist__items {
display: grid;
grid-template-columns: 1fr;
row-gap: 6px;
list-style: none;
margin: 0;
padding: 0;
}
.dietlo-checklist__item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 12px 6px;
border-radius: 12px;
}
.dietlo-checklist__item + .dietlo-checklist__item {
border-top: 1.5px dashed var(--dietlo-line);
}
.dietlo-checklist__arrow {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
margin-top: 2px;
border-radius: 50%;
background: rgba(85, 185, 71, 0.12);
color: var(--dietlo-green-dark);
box-shadow: inset 0 0 0 1px rgba(52, 139, 46, 0.12);
}
.dietlo-checklist__text {
font-size: 16.5px;
line-height: 1.5;
font-weight: 600;
color: var(--dietlo-text);
}
.dietlo-checklist__result {
margin: 18px 6px 0;
padding-top: 16px;
border-top: 1.5px dashed var(--dietlo-line);
font-size: var(--dietlo-text-base);
color: var(--dietlo-muted);
}
.dietlo-checklist__result a {
color: var(--dietlo-purple);
font-weight: 700;
text-decoration: none;
}
.dietlo-checklist__result a:hover,
.dietlo-checklist__result a:focus-visible {
text-decoration: underline;
}
.dietlo-checklist__cta {
width: 100%;
margin: 18px 0 0;
}
.dietlo-checklist__cta--layout {
position: static;
grid-area: auto;
z-index: auto;
width: min(100%, 680px);
margin: 18px 6px 0;
}
.dietlo-checklist__cta .dietlo-button {
width: 100%;
}
.dietlo-checklist__cta--mobile {
display: none;
}
.dietlo-offer-backdrop {
position: relative;
grid-area: visual;
z-index: 1;
align-self: stretch;
width: 100%;
max-width: 560px;
min-height: 0;
aspect-ratio: 3 / 4;
justify-self: end;
pointer-events: none;
}
.dietlo-offer-backdrop__device {
position: absolute;
right: 0;
top: 50%;
width: min(100%, 560px);
max-width: 100%;
transform: translateY(-50%) rotate(2deg);
filter: drop-shadow(0 28px 54px rgba(24, 27, 34, 0.22));
margin: 0;
}
.dietlo-offer-backdrop__image {
position: static;
width: 100%;
max-width: 100%;
height: auto;
transform: none;
filter: none;
opacity: 1;
}
.dietlo-problem-commerce {
align-items: center;
}
.dietlo-problem-carousel {
position: relative;
z-index: 1;
margin-top: clamp(28px, 4.5vw, 56px);
padding: clamp(20px, 3vw, 30px);
border: 1px solid var(--dietlo-line);
border-radius: 24px;
background: #fff;
box-shadow: var(--dietlo-shadow-md);
}
.dietlo-problem-carousel .dietlo-product-carousel__header {
margin-bottom: 18px;
}
/* Animacje: wiersze wjeżdżają staggerem (JS). */
.dietlo-motion-ready .dietlo-checklist__item.dietlo-reveal {
transform: translateY(18px);
transition: opacity 760ms var(--dietlo-ease-premium), transform 760ms var(--dietlo-ease-premium), background-color var(--dietlo-motion-fast) var(--dietlo-ease-out);
}
.dietlo-motion-ready .dietlo-checklist__item.dietlo-reveal.is-revealed {
transform: none;
}
.dietlo-checklist__item:hover .dietlo-checklist__arrow {
transform: translateX(3px);
}
.dietlo-checklist__arrow {
transition: transform var(--dietlo-motion-fast) var(--dietlo-ease-out);
}
@media (max-width: 900px) {
.dietlo-checklist-layout {
grid-template-columns: 1fr;
grid-template-areas:
"card"
"visual"
"cta";
min-height: 0;
padding-top: 0;
row-gap: 22px;
}
.dietlo-checklist {
order: 1;
width: 100%;
}
.dietlo-checklist__items {
grid-template-columns: 1fr;
}
.dietlo-offer-backdrop {
order: 2;
position: relative;
inset: auto;
min-height: 0;
}
.dietlo-offer-backdrop__device {
position: relative;
top: auto;
right: auto;
left: auto;
width: min(100%, 384px);
margin: 0 auto;
transform: none;
opacity: 1;
}
.dietlo-checklist__cta--layout {
display: block;
order: 3;
width: 100%;
margin: 0;
}
.dietlo-checklist__cta--desktop {
display: none;
}
}
@media (max-width: 520px) {
.dietlo-checklist-layout {
row-gap: 34px;
}
.dietlo-checklist {
box-sizing: border-box;
width: 100%;
}
.dietlo-offer-backdrop,
.dietlo-checklist__cta--layout {
left: auto;
width: 100% !important;
transform: none;
}
.dietlo-offer-backdrop__device {
left: auto;
width: 100%;
transform: none;
}
.dietlo-problem-carousel {
margin-top: 44px;
padding: 18px 16px 20px;
border-radius: var(--dietlo-radius-card);
}
.dietlo-checklist__text {
font-size: var(--dietlo-text-base);
}
.dietlo-checklist__item {
padding: 13px 2px;
}
}
@media (prefers-reduced-motion: reduce) {
.dietlo-checklist__arrow,
.dietlo-checklist__item:hover .dietlo-checklist__arrow {
transition: none;
transform: none;
}
}
/* ── V5.2: SZAŁWIOWA warstwa geometrii w tłach sekcji ──
Duże wypełnione koła (jednolita szałwiowa zieleń) pod treścią
sekcji białych; na tłach szałwiowych — białe koła dla głębi.
Warstwa background-image sekcji: zawsze widoczna, zero JS. */
.dietlo-section--problem {
background-image:
url('data:image/svg+xml;utf8,'),
url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right -170px top -170px, left -85px bottom 60px;
}
.dietlo-section--values {
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: left -180px top 32%;
}
.dietlo-section--about {
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right -180px bottom -150px;
}
.dietlo-section--journey {
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: left -175px top 30%;
}
.dietlo-section--ebooks {
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right -145px top 18%;
}
.dietlo-section--newsletter {
background-image:
url('data:image/svg+xml;utf8,'),
url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: left -155px top -130px, right -115px bottom -95px;
}
/* Sekcje na tle szałwiowym: białe koła dają głębię warstwy */
.dietlo-section--paths {
background-image:
url('data:image/svg+xml;utf8,'),
url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right -210px top -190px, left 6% bottom -130px;
}
#oferta {
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: left -190px bottom -170px;
}
#oferta.dietlo-offer-backdrop {
overflow: visible;
background-image: none;
}
#oferta.dietlo-offer-backdrop::before {
content: none;
}
.dietlo-section--materials {
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right -170px bottom -150px;
}
.dietlo-section--editorial {
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right -175px top -155px;
}
.dietlo-section.dietlo-section--editorial.dietlo-section--soft {
padding: clamp(34px, 4vw, 52px) clamp(20px, 4vw, 32px);
}
.dietlo-section--editorial .dietlo-editorial {
max-width: 720px;
}
.dietlo-section--editorial .dietlo-editorial::before {
margin-bottom: 18px;
}
.dietlo-section--editorial .dietlo-editorial p {
margin: 0;
font-size: clamp(20px, 2.2vw, 26px);
}
@media (max-width: 520px) {
.dietlo-section--hero {
padding-top: 16px;
}
.dietlo-section--hero .dietlo-title {
font-size: clamp(29px, 8vw, 34px);
line-height: 1.02;
letter-spacing: -0.035em;
transform: none;
}
.dietlo-title__underline { transform: none; }
.dietlo-hero__mobile-pic {
width: calc(100% + 40px);
margin-left: -20px;
margin-right: -20px;
margin-top: 28px;
}
.dietlo-hero__mobile-art {
width: 100%;
max-width: none;
height: auto;
}
}
/* Reduced motion dla warstwy V2 */
@media (prefers-reduced-motion: reduce) {
.dietlo-problem,
.dietlo-feature,
.dietlo-testimonial,
.dietlo-product-carousel__slide {
transition: none;
}
.dietlo-problem:hover,
.dietlo-feature:hover,
.dietlo-testimonial:hover,
.dietlo-product-carousel__slide:hover {
transform: none;
}
}
/* Home cleanup: no decorative geometry in offer/ebook/material carousel areas. */
.dietlo-section--problem,
#oferta,
.dietlo-section--ebooks,
.dietlo-section--materials {
background-image: none !important;
}
.dietlo-section--problem {
background-color: #f8f7fc !important;
}
.dietlo-section--problem .dietlo-eyebrow {
background: rgba(112, 34, 215, 0.1) !important;
color: var(--dietlo-purple) !important;
}
.dietlo-section--problem .dietlo-checklist__arrow {
background: rgba(112, 34, 215, 0.1) !important;
color: var(--dietlo-purple) !important;
box-shadow: inset 0 0 0 1px rgba(112, 34, 215, 0.16) !important;
}
.dietlo-section--problem .dietlo-button {
background: var(--dietlo-purple) !important;
box-shadow: 0 10px 24px rgba(112, 34, 215, 0.22) !important;
}
.dietlo-section--problem .dietlo-checklist__cta--layout {
width: min(100%, 680px) !important;
}
.dietlo-section--editorial {
background: #a372ef !important;
background-image: none !important;
}
.dietlo-section--editorial .dietlo-editorial p,
.dietlo-section--editorial .dietlo-editorial em {
color: #fff !important;
}
.dietlo-section--editorial .dietlo-editorial::before {
background: rgba(255, 255, 255, 0.72) !important;
}
.dietlo-section--editorial::before,
.dietlo-section--editorial::after {
content: none !important;
display: none !important;
}
.dietlo-section--paths {
background: #f8f7fc !important;
background-image: none !important;
}
.dietlo-section--paths::before,
.dietlo-section--paths::after {
content: none !important;
display: none !important;
opacity: 0 !important;
}
.dietlo-section--problem::before,
.dietlo-section--problem::after,
#oferta::before,
#oferta::after,
.dietlo-section--ebooks::before,
.dietlo-section--ebooks::after,
.dietlo-section--materials::before,
.dietlo-section--materials::after {
content: none !important;
display: none !important;
opacity: 0 !important;
}
/* Home offer cards: reference layout from oferta.JPG. */
.dietlo-section--paths .dietlo-paths {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
align-items: stretch !important;
gap: 28px !important;
overflow: visible !important;
padding: 0 !important;
}
.dietlo-section--paths .dietlo-path,
.dietlo-section--paths .dietlo-path--featured,
.dietlo-section--paths .dietlo-path--products,
.dietlo-section--paths .dietlo-path--group {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
min-height: 0 !important;
margin-top: 0 !important;
padding: 0 !important;
gap: 0 !important;
overflow: hidden !important;
border: 0 !important;
border-radius: var(--dietlo-radius-card) !important;
background: #fff !important;
color: var(--dietlo-text) !important;
box-shadow: var(--dietlo-shadow-md) !important;
transform: none !important;
grid-column: auto !important;
}
.dietlo-section--paths .dietlo-path:hover,
.dietlo-section--paths .dietlo-path:focus-visible,
.dietlo-section--paths .dietlo-path--featured:hover {
transform: translateY(-4px) !important;
box-shadow: var(--dietlo-shadow-lg) !important;
}
.dietlo-section--paths .dietlo-path--featured::before {
content: none !important;
}
.dietlo-path__problem {
display: grid;
min-height: 72px;
padding: 18px 22px;
place-items: center;
background: #a372ef;
color: #fff;
font-size: 17px;
font-weight: 700;
line-height: 1.25;
text-align: center;
}
.dietlo-section--paths .dietlo-path__media,
.dietlo-section--paths .dietlo-path--featured .dietlo-path__media {
height: 250px !important;
width: 100% !important;
margin: 0 !important;
border-radius: 0 !important;
background: #f6f2ee !important;
overflow: hidden !important;
}
.dietlo-section--paths .dietlo-path__media-ring,
.dietlo-section--paths .dietlo-path__bubble {
display: none !important;
}
.dietlo-section--paths .dietlo-path__book {
width: min(52%, 150px) !important;
padding: 8px !important;
transform: rotate(-3deg) !important;
}
.dietlo-section--paths .dietlo-path__face,
.dietlo-section--paths .dietlo-path--featured .dietlo-path__face {
width: 168px !important;
height: 168px !important;
margin: 0 !important;
border-radius: 18px !important;
box-shadow: var(--dietlo-shadow-lg) !important;
}
.dietlo-section--paths .dietlo-path__crowd {
justify-content: center;
transform: scale(1.18);
}
.dietlo-section--paths .dietlo-path__kicker,
.dietlo-section--paths .dietlo-path--featured .dietlo-path__kicker {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 22px 26px 0 !important;
color: var(--dietlo-purple) !important;
font-size: var(--dietlo-text-lg) !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
text-align: center;
text-transform: none !important;
}
.dietlo-section--paths .dietlo-path__title,
.dietlo-section--paths .dietlo-path--featured .dietlo-path__title {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 8px 26px 0 !important;
color: var(--dietlo-text) !important;
font-size: clamp(22px, 2vw, 26px) !important;
line-height: 1.2 !important;
text-align: center;
}
.dietlo-section--paths .dietlo-path__desc {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
flex: 1 1 auto !important;
margin: 0 !important;
padding: 10px 30px 0 !important;
color: var(--dietlo-text) !important;
font-size: var(--dietlo-text-lg) !important;
line-height: 1.45 !important;
text-align: center;
}
.dietlo-section--paths .dietlo-path__cta,
.dietlo-section--paths .dietlo-path--featured .dietlo-path__cta {
align-self: center !important;
max-width: calc(100% - 48px) !important;
box-sizing: border-box !important;
margin: 18px 24px 26px !important;
padding: 10px 18px !important;
background: var(--dietlo-green) !important;
color: #fff !important;
text-align: center !important;
justify-content: center !important;
white-space: normal !important;
}
/* Nadpisanie CTA hero usuniete 2026-07-29: komponent przycisku maluje juz
dokladnie te wartosci, bo wlasciciel wskazal hero jako wzorzec. Trzymanie
tu kopii oznaczaloby dwa zrodla prawdy dla tego samego wygladu. */
.dietlo-section--help::before {
content: none !important;
display: none !important;
background-image: none !important;
}
.dietlo-section--help {
padding-bottom: clamp(40px, 4vw, 56px) !important;
}
.dietlo-help-person {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
width: max-content;
max-width: 100%;
margin: 34px auto 0 !important;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: #fff;
text-decoration: none !important;
transition: transform var(--dietlo-motion-fast) var(--dietlo-ease-out);
}
.dietlo-help-person:hover {
transform: translateY(-1px);
}
.dietlo-help-person:focus-visible {
outline: 3px solid rgba(255, 255, 255, 0.72);
outline-offset: 6px;
}
.dietlo-help-person img {
width: 76px;
height: 76px;
flex: 0 0 auto;
border: 3px solid rgba(255, 255, 255, 0.72);
border-radius: 50%;
object-fit: cover;
object-position: center top;
}
.dietlo-help-person strong,
.dietlo-help-person span {
display: block;
}
.dietlo-help-person strong {
display: inline-block;
position: relative;
z-index: 0;
width: fit-content;
margin-bottom: 3px;
padding: 0 3px;
border-radius: 0;
background: transparent;
color: #fff;
-webkit-text-stroke: 0;
font-family: var(--dietlo-font-body);
font-size: 17px;
font-weight: 700;
line-height: 1.2;
text-shadow: none;
}
.dietlo-help-person strong::after {
position: absolute;
right: -8px;
bottom: -2px;
left: -8px;
z-index: -1;
height: 1.23em;
border-radius: 999px 60% 80% 55%;
background: var(--dietlo-green);
content: "";
opacity: 0.95;
transform: rotate(-1.8deg);
}
.dietlo-help-person span {
max-width: 360px;
color: #fff;
font-size: var(--dietlo-text-base);
line-height: 1.4;
}
.dietlo-help-person > div {
text-align: left;
}
@media (max-width: 520px) {
.dietlo-help-person {
align-items: center;
margin-bottom: 26px;
padding-right: 16px;
border-radius: var(--dietlo-radius-pill);
}
}
.dietlo-landing > .dietlo-section--hero { order: 1; }
.dietlo-landing > .dietlo-section--help { order: 2; }
.dietlo-landing > .dietlo-section--proof { order: 3; }
.dietlo-landing > .dietlo-section--problem { order: 4; }
.dietlo-landing > .dietlo-section--editorial { order: 5; }
.dietlo-landing > .dietlo-section--paths { order: 6; }
.dietlo-landing > .dietlo-section--about { order: 7; }
.dietlo-landing > .dietlo-section--newsletter { order: 8; }
.dietlo-landing > .dietlo-section--materials { order: 9; }
.dietlo-landing > .dietlo-section--values { order: 10; }
.dietlo-landing > .dietlo-section--dark { order: 11; }
.dietlo-landing > #wspolpraca { order: 12; }
.dietlo-section--materials {
background: #f8f7fc !important;
background-image: none !important;
}
.dietlo-landing > .dietlo-section.dietlo-section--materials {
padding-bottom: clamp(32px, 4vw, 56px);
}
.dietlo-section--about {
background: #a372ef !important;
background-image: none !important;
}
.dietlo-section--about::before,
.dietlo-section--about::after {
content: none !important;
display: none !important;
}
.dietlo-section--about .dietlo-eyebrow {
background: rgba(255, 255, 255, 0.16) !important;
color: #fff !important;
}
.dietlo-section--about h2,
.dietlo-section--about .dietlo-about__lead,
.dietlo-section--about .dietlo-about__body,
.dietlo-section--about .dietlo-about__specs li {
color: #fff !important;
}
.dietlo-section--about .dietlo-about__specs svg {
color: #3f117f !important;
flex-shrink: 0;
}
.dietlo-section--about .dietlo-about__specs {
gap: 12px;
margin-bottom: 26px;
}
.dietlo-section--about .dietlo-about__specs li {
display: flex;
align-items: center;
gap: 12px;
}
@media (min-width: 901px) {
.dietlo-section--about .dietlo-split {
align-items: stretch;
}
.dietlo-section--about .dietlo-about__media {
align-self: stretch;
display: flex;
align-items: flex-end;
justify-content: center;
box-sizing: border-box;
min-height: 100%;
overflow: hidden;
border-radius: var(--dietlo-radius-card);
}
.dietlo-section--about .dietlo-about__media::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: var(--dietlo-radius-card);
background: #fff;
box-shadow: var(--dietlo-shadow);
}
.dietlo-section--about .dietlo-about__photo {
z-index: 2;
width: 124%;
max-width: none;
height: auto;
aspect-ratio: auto;
box-shadow: none;
object-fit: contain;
}
}
.dietlo-section--about .dietlo-button--about-cta {
background: var(--dietlo-green) !important;
color: #fff !important;
box-shadow: 0 10px 24px rgba(85, 185, 71, 0.24) !important;
}
@media (max-width: 520px) {
.dietlo-section--about .dietlo-button--about-cta {
padding-inline: 18px;
font-size: var(--dietlo-text-base);
line-height: 1;
white-space: nowrap;
}
}
@media (max-width: 380px) {
.dietlo-section--about .dietlo-button--about-cta {
padding-inline: 14px;
font-size: var(--dietlo-text-md);
}
}
.dietlo-section--about .dietlo-button--about-cta:hover,
.dietlo-section--about .dietlo-button--about-cta:focus-visible {
animation-play-state: paused;
transform: translateX(3px);
}
@keyframes dietlo-about-cta-sway {
0%, 38%, 100% {
transform: translateX(0);
}
8% {
transform: translateX(-8px);
}
16% {
transform: translateX(0);
}
24% {
transform: translateX(6px);
}
31% {
transform: translateX(0);
}
62% {
box-shadow:
0 10px 30px rgba(85, 185, 71, 0.4),
0 0 0 7px rgba(85, 185, 71, 0.16);
}
}
@media (prefers-reduced-motion: no-preference) {
.dietlo-section--about .dietlo-button--about-cta {
animation: dietlo-about-cta-sway 4.2s var(--dietlo-ease-out) 1.4s infinite;
}
}
@media (prefers-reduced-motion: reduce) {
.dietlo-section--about .dietlo-button--about-cta {
animation: none;
}
}
.dietlo-section--problem .dietlo-checklist-layout::before {
grid-area: card;
align-self: stretch;
justify-self: start;
z-index: 1;
width: min(calc(100% + 24px), 704px);
margin: -10px 0 -14px -12px;
border-radius: var(--dietlo-radius-card);
background: linear-gradient(135deg, #e8ddff 0%, #d8c4fb 100%);
box-shadow:
0 28px 58px rgba(74, 45, 124, 0.24),
0 10px 22px rgba(24, 27, 34, 0.13);
content: "";
pointer-events: none;
transform: rotate(-0.45deg);
}
.dietlo-section--problem .dietlo-checklist::before {
position: absolute;
top: -24px;
left: 50%;
z-index: 3;
width: clamp(148px, 22vw, 196px);
height: 38px;
border: 1px solid var(--dietlo-purple);
border-radius: 10px;
background: linear-gradient(180deg, var(--dietlo-purple) 0%, var(--dietlo-purple) 72%, #5f1abf 72%, #5f1abf 100%);
box-shadow: none;
content: "";
transform: translateX(-50%);
}
.dietlo-section--problem .dietlo-checklist::after {
position: absolute;
top: -15px;
left: 50%;
z-index: 4;
width: clamp(132px, 19vw, 178px);
height: 20px;
background:
radial-gradient(circle at 14px 11px, rgba(255, 255, 255, 0.48) 0 3px, transparent 3.5px),
radial-gradient(circle at calc(100% - 14px) 11px, rgba(255, 255, 255, 0.48) 0 3px, transparent 3.5px),
linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28) 18%, rgba(255, 255, 255, 0.28) 82%, transparent) center 5px / 66px 5px no-repeat;
border-radius: var(--dietlo-radius-control);
content: "";
pointer-events: none;
transform: translateX(-50%);
}
.dietlo-section--problem .dietlo-checklist__items {
row-gap: 0 !important;
margin-top: 22px !important;
}
/* grid-equal-height: off - checklist marker must align with the first text line */
.dietlo-section--problem .dietlo-checklist__item {
display: grid !important;
grid-template-columns: 26px minmax(0, 1fr);
column-gap: 16px;
align-items: start;
padding: 18px 0 !important;
border-radius: 0 !important;
}
.dietlo-section--problem .dietlo-checklist__item + .dietlo-checklist__item {
border-top: 1px dashed rgba(112, 34, 215, 0.22) !important;
}
.dietlo-section--problem .dietlo-checklist__text {
display: block;
padding-top: 1px;
text-align: left;
}
.dietlo-section--problem .dietlo-checklist__arrow {
position: relative;
overflow: visible;
grid-column: 1;
border-radius: var(--dietlo-radius-control) !important;
background: transparent !important;
color: var(--dietlo-green-cta) !important;
box-shadow: inset 0 0 0 1px rgba(46, 124, 40, 0.22) !important;
}
.dietlo-section--problem .dietlo-checklist__arrow::before {
position: absolute;
z-index: 2;
left: var(--dietlo-check-left, 8px);
top: var(--dietlo-check-top, 1px);
width: var(--dietlo-check-width, 11px);
height: var(--dietlo-check-height, 19px);
border-right: 2.8px solid currentColor;
border-bottom: 2.8px solid currentColor;
border-radius: 1px;
content: "";
opacity: 0;
transform: rotate(var(--dietlo-check-angle, 43deg)) skew(var(--dietlo-check-skew, -5deg)) scale(0.72);
transform-origin: 50% 70%;
}
.dietlo-section--problem .dietlo-checklist__arrow::after {
position: absolute;
z-index: 1;
inset: 3px;
border-radius: 6px;
background: transparent;
content: "";
opacity: 0;
transform: scale(0.65);
}
.dietlo-section--problem .dietlo-checklist__item:nth-child(1) .dietlo-checklist__arrow {
--dietlo-check-angle: 42deg;
--dietlo-check-skew: -6deg;
--dietlo-check-left: 8px;
}
.dietlo-section--problem .dietlo-checklist__item:nth-child(2) .dietlo-checklist__arrow {
--dietlo-check-angle: 45deg;
--dietlo-check-skew: -3deg;
--dietlo-check-left: 7px;
--dietlo-check-top: 0px;
}
.dietlo-section--problem .dietlo-checklist__item:nth-child(3) .dietlo-checklist__arrow {
--dietlo-check-angle: 41deg;
--dietlo-check-skew: -7deg;
--dietlo-check-width: 12px;
}
.dietlo-section--problem .dietlo-checklist__item:nth-child(4) .dietlo-checklist__arrow {
--dietlo-check-angle: 44deg;
--dietlo-check-skew: -4deg;
--dietlo-check-top: 2px;
}
.dietlo-section--problem .dietlo-checklist__item:nth-child(5) .dietlo-checklist__arrow {
--dietlo-check-angle: 40deg;
--dietlo-check-skew: -8deg;
--dietlo-check-left: 9px;
--dietlo-check-width: 12px;
}
@keyframes dietlo-checklist-check-1 {
0%, 8% { opacity: 0; transform: rotate(var(--dietlo-check-angle, 43deg)) skew(var(--dietlo-check-skew, -5deg)) scale(0.72); }
12%, 76% { opacity: 1; transform: rotate(var(--dietlo-check-angle, 43deg)) skew(var(--dietlo-check-skew, -5deg)) scale(1); }
84%, 100% { opacity: 0; transform: rotate(var(--dietlo-check-angle, 43deg)) skew(var(--dietlo-check-skew, -5deg)) scale(0.72); }
}
@keyframes dietlo-checklist-check-2 {
0%, 16% { opacity: 0; transform: rotate(var(--dietlo-check-angle, 43deg)) skew(var(--dietlo-check-skew, -5deg)) scale(0.72); }
20%, 76% { opacity: 1; transform: rotate(var(--dietlo-check-angle, 43deg)) skew(var(--dietlo-check-skew, -5deg)) scale(1); }
84%, 100% { opacity: 0; transform: rotate(var(--dietlo-check-angle, 43deg)) skew(var(--dietlo-check-skew, -5deg)) scale(0.72); }
}
@keyframes dietlo-checklist-check-3 {
0%, 24% { opacity: 0; transform: rotate(var(--dietlo-check-angle, 43deg)) skew(var(--dietlo-check-skew, -5deg)) scale(0.72); }
28%, 76% { opacity: 1; transform: rotate(var(--dietlo-check-angle, 43deg)) skew(var(--dietlo-check-skew, -5deg)) scale(1); }
84%, 100% { opacity: 0; transform: rotate(var(--dietlo-check-angle, 43deg)) skew(var(--dietlo-check-skew, -5deg)) scale(0.72); }
}
@keyframes dietlo-checklist-check-4 {
0%, 32% { opacity: 0; transform: rotate(var(--dietlo-check-angle, 43deg)) skew(var(--dietlo-check-skew, -5deg)) scale(0.72); }
36%, 76% { opacity: 1; transform: rotate(var(--dietlo-check-angle, 43deg)) skew(var(--dietlo-check-skew, -5deg)) scale(1); }
84%, 100% { opacity: 0; transform: rotate(var(--dietlo-check-angle, 43deg)) skew(var(--dietlo-check-skew, -5deg)) scale(0.72); }
}
@keyframes dietlo-checklist-check-5 {
0%, 40% { opacity: 0; transform: rotate(var(--dietlo-check-angle, 43deg)) skew(var(--dietlo-check-skew, -5deg)) scale(0.72); }
44%, 76% { opacity: 1; transform: rotate(var(--dietlo-check-angle, 43deg)) skew(var(--dietlo-check-skew, -5deg)) scale(1); }
84%, 100% { opacity: 0; transform: rotate(var(--dietlo-check-angle, 43deg)) skew(var(--dietlo-check-skew, -5deg)) scale(0.72); }
}
@keyframes dietlo-checklist-pulse-1 {
0%, 8% { opacity: 0; transform: scale(0.65); }
12% { opacity: 1; transform: scale(1); }
18%, 100% { opacity: 0; transform: scale(1.28); }
}
@keyframes dietlo-checklist-pulse-2 {
0%, 16% { opacity: 0; transform: scale(0.65); }
20% { opacity: 1; transform: scale(1); }
26%, 100% { opacity: 0; transform: scale(1.28); }
}
@keyframes dietlo-checklist-pulse-3 {
0%, 24% { opacity: 0; transform: scale(0.65); }
28% { opacity: 1; transform: scale(1); }
34%, 100% { opacity: 0; transform: scale(1.28); }
}
@keyframes dietlo-checklist-pulse-4 {
0%, 32% { opacity: 0; transform: scale(0.65); }
36% { opacity: 1; transform: scale(1); }
42%, 100% { opacity: 0; transform: scale(1.28); }
}
@keyframes dietlo-checklist-pulse-5 {
0%, 40% { opacity: 0; transform: scale(0.65); }
44% { opacity: 1; transform: scale(1); }
50%, 100% { opacity: 0; transform: scale(1.28); }
}
@media (prefers-reduced-motion: no-preference) {
.dietlo-section--problem .dietlo-checklist__arrow::before,
.dietlo-section--problem .dietlo-checklist__arrow::after {
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.dietlo-section--problem .dietlo-checklist__item:nth-child(1) .dietlo-checklist__arrow::before { animation-name: dietlo-checklist-check-1; }
.dietlo-section--problem .dietlo-checklist__item:nth-child(2) .dietlo-checklist__arrow::before { animation-name: dietlo-checklist-check-2; }
.dietlo-section--problem .dietlo-checklist__item:nth-child(3) .dietlo-checklist__arrow::before { animation-name: dietlo-checklist-check-3; }
.dietlo-section--problem .dietlo-checklist__item:nth-child(4) .dietlo-checklist__arrow::before { animation-name: dietlo-checklist-check-4; }
.dietlo-section--problem .dietlo-checklist__item:nth-child(5) .dietlo-checklist__arrow::before { animation-name: dietlo-checklist-check-5; }
.dietlo-section--problem .dietlo-checklist__item:nth-child(1) .dietlo-checklist__arrow::after { animation-name: dietlo-checklist-pulse-1; }
.dietlo-section--problem .dietlo-checklist__item:nth-child(2) .dietlo-checklist__arrow::after { animation-name: dietlo-checklist-pulse-2; }
.dietlo-section--problem .dietlo-checklist__item:nth-child(3) .dietlo-checklist__arrow::after { animation-name: dietlo-checklist-pulse-3; }
.dietlo-section--problem .dietlo-checklist__item:nth-child(4) .dietlo-checklist__arrow::after { animation-name: dietlo-checklist-pulse-4; }
.dietlo-section--problem .dietlo-checklist__item:nth-child(5) .dietlo-checklist__arrow::after { animation-name: dietlo-checklist-pulse-5; }
.dietlo-section--problem .dietlo-checklist__item:nth-child(5) .dietlo-checklist__arrow::before,
.dietlo-section--problem .dietlo-checklist__item:nth-child(5) .dietlo-checklist__arrow::after {
animation-name: none;
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.dietlo-section--problem .dietlo-checklist__arrow::before {
opacity: 1;
transform: rotate(45deg) scale(1);
}
.dietlo-section--problem .dietlo-checklist__arrow::after {
display: none;
}
}
.dietlo-section--help .dietlo-help-list .dietlo-help {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
gap: 0 !important;
text-align: left !important;
}
.dietlo-section--help .dietlo-help__art {
margin: 0 0 18px !important;
}
.dietlo-section--help .dietlo-help__title {
width: 100%;
margin: 0 0 14px !important;
text-align: left !important;
}
.dietlo-section--help .dietlo-help__tag {
width: 100%;
margin: 0 0 16px -4px !important;
text-align: left !important;
}
.dietlo-section--help .dietlo-help__chip {
justify-content: flex-start !important;
}
.dietlo-section--help .dietlo-help__how {
width: 100%;
margin: 0 !important;
text-align: left !important;
}
.dietlo-section--problem {
position: relative;
overflow: hidden;
}
.dietlo-section--problem > .dietlo-wrap {
position: relative;
z-index: 2;
}
.dietlo-section--problem::before,
.dietlo-problem-carousel::before {
position: absolute;
z-index: 1;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--dietlo-purple) !important;
box-shadow:
16px 0 0 var(--dietlo-purple),
32px 0 0 var(--dietlo-purple),
48px 0 0 var(--dietlo-purple),
64px 0 0 var(--dietlo-purple),
80px 0 0 var(--dietlo-purple),
0 16px 0 var(--dietlo-purple),
16px 16px 0 var(--dietlo-purple),
32px 16px 0 var(--dietlo-purple),
48px 16px 0 var(--dietlo-purple),
64px 16px 0 var(--dietlo-purple),
80px 16px 0 var(--dietlo-purple),
0 32px 0 var(--dietlo-purple),
16px 32px 0 var(--dietlo-purple),
32px 32px 0 var(--dietlo-purple),
48px 32px 0 var(--dietlo-purple),
64px 32px 0 var(--dietlo-purple),
80px 32px 0 var(--dietlo-purple),
0 48px 0 var(--dietlo-purple),
16px 48px 0 var(--dietlo-purple),
32px 48px 0 var(--dietlo-purple),
48px 48px 0 var(--dietlo-purple),
64px 48px 0 var(--dietlo-purple),
80px 48px 0 var(--dietlo-purple),
0 64px 0 var(--dietlo-purple),
16px 64px 0 var(--dietlo-purple),
32px 64px 0 var(--dietlo-purple),
48px 64px 0 var(--dietlo-purple),
64px 64px 0 var(--dietlo-purple),
80px 64px 0 var(--dietlo-purple),
0 80px 0 var(--dietlo-purple),
16px 80px 0 var(--dietlo-purple),
32px 80px 0 var(--dietlo-purple),
48px 80px 0 var(--dietlo-purple),
64px 80px 0 var(--dietlo-purple),
80px 80px 0 var(--dietlo-purple),
0 96px 0 var(--dietlo-purple),
16px 96px 0 var(--dietlo-purple),
32px 96px 0 var(--dietlo-purple),
48px 96px 0 var(--dietlo-purple),
64px 96px 0 var(--dietlo-purple),
80px 96px 0 var(--dietlo-purple),
0 112px 0 var(--dietlo-purple),
16px 112px 0 var(--dietlo-purple),
32px 112px 0 var(--dietlo-purple),
48px 112px 0 var(--dietlo-purple),
64px 112px 0 var(--dietlo-purple),
80px 112px 0 var(--dietlo-purple);
content: "" !important;
display: block !important;
opacity: 0.22 !important;
pointer-events: none;
}
.dietlo-section--problem::before {
top: 54px;
right: max(18px, calc((100vw - 1180px) / 2 - 44px));
}
.dietlo-section--problem::after {
content: none !important;
display: none !important;
}
.dietlo-problem-carousel::before {
top: 50%;
left: -138px;
transform: translateY(-50%);
}
@media (max-width: 900px) {
.dietlo-problem-carousel::before {
top: 50%;
bottom: auto;
left: -94px;
transform: translateY(-50%);
}
}
@media (max-width: 900px) {
.dietlo-section--paths .dietlo-paths {
display: grid !important;
grid-template-columns: 1fr !important;
overflow: visible !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding: 0 !important;
}
.dietlo-section--paths .dietlo-paths .dietlo-path {
flex: none !important;
width: 100% !important;
}
.dietlo-section--paths .dietlo-path__media,
.dietlo-section--paths .dietlo-path--featured .dietlo-path__media {
height: 340px !important;
}
}