) rather than
widened sitewide — the treatment page's own #cennik accordion rows keep
their real, archon.au-measured 16px untouched; this is cennik's own,
locally-introduced 3-tier hierarchy problem, not a sitewide one. */
.cennik-page .price-tier-rows .price-row p{ font-size:13px; }
/* main.js wraps EVERY .treatment-accordion-body's children in its own freshly
created .treatment-accordion-body-inner div (for the height-animation system —
see main.js, "document.querySelectorAll('.treatment-accordion-body').forEach"),
regardless of section. That wrapper's own max-width:720px (sized for FAQ's prose
answers) was still capping the price rows even after giving .price-tier-rows
itself max-width:none, because the JS-made wrapper is a SEPARATE, outer element —
not the one carrying that class in this file. .price-list-scoped override (same
reasoning as the border-fix above — moved off the treatment page's #cennik id so
it also reaches cennik/index.html's 8 sections, Round 128) removes the cap only
where it doesn't belong, so the price rows span the full .container width like
every other full-width element on the page, not a narrow reading column. */
.price-list .treatment-accordion-body-inner{ max-width:none; }
.price-tier-rows{ display:flex; flex-direction:column; }
.price-row{
display:flex;
justify-content:space-between;
align-items:center;
gap:var(--sp-16);
padding-top:var(--sp-16);
margin-top:var(--sp-16);
border-top:1px solid var(--a-taupe);
}
.price-row:first-child{ margin-top:0; }
/* archon.au's real #cost .price-table row text (measured directly, live): Inter
16px/400/27.2px for BOTH the name and the price — 15px/1.4 and a bold price
were unmeasured guesses. Skips the real text-transform:capitalize measured on
archon's own item names (an English title-case convention) — same documented
exception already applied to FAQ's own dedicated heading class, since our real
Polish body-area names are already correctly cased and capitalize would mangle
them word-by-word. */
.price-row p{
margin:0;
font-family:"Inter",sans-serif;
font-size:16px;
font-weight:400;
line-height:27.2px;
color:var(--a-ink-warm);
}
/* :first-of-type (not :first-child) — a leading .promo-badge sibling (Round 140+
package rows, e.g. "Pakiet 10x Endermologia") pushes the label to be the
row's 2nd child, so :first-child silently missed it (label text rendered full
ink-warm/16px instead of gray/14px, unnoticed until Round 193 flagged it on a
newly-built page — turned out to already be broken sitewide on every existing
promo-badge package row too). :first-of-type still correctly targets ONLY the
first
(the label) among .price-row's children regardless of what non-
siblings precede it. */
.price-row p:first-of-type span{ color:var(--a-gray); font-size:14px; }
.price-row > :last-child{ flex:0 0 auto; }
/* Round 159 (user: DERMOkonsultacja's real Fresha service description — "149 zł
zaliczane na poczet zabiegu w ciągu 14 dni") — a short explanatory note tied
to one specific price-row, on its own line below it (prose, not a name/price
pair, so it doesn't fit .price-row's own flex layout). Italic + muted gray so
it reads as commentary, distinct from the row itself; pulled up close to that
row (negative margin-top) so it visually belongs to it, not to whatever comes
next. Small gift-box icon reuses the site's own minimal stroke-icon language
(16px viewBox, ~1.2px stroke, currentColor — same idiom as .accordion-info-link's
circle-and-dot "i") instead of a system emoji, on request ("użyj ikony, która
pasuje do stylu strony"). First attempt used a negative margin-top to pull it
close to the row above, but that overlapped the row's own text/price/button
(measured: -10px margin gave a -10px actual gap, i.e. real overlap, not just a
tight visual pairing) — a small positive margin reads as "attached" without
colliding. */
.price-row-note{
display:flex;
align-items:flex-start;
gap:6px;
margin:14px 0 var(--sp-16);
font-family:"Inter",sans-serif;
font-style:italic;
font-size:13px;
line-height:1.5;
color:var(--a-gray);
}
.price-row-note svg{ flex:none; width:15px; height:15px; margin-top:1px; }
/* current, bookable price next to a struck-through .price-old regular price —
rust ties it back visually to the "Promocja" badge on the Konsultacje
accordion header itself, without repeating the badge on every row. Full size
(16px, matching every other .price-row price), not the .price-old's de-emphasized
14px — this is the real, payable price, not a secondary detail.
Selector needs p:first-child + the class (not just .price-row .price-promo)
because the price
sits inside .price-row-buy, making it a :first-child
itself — .price-row p:first-child span (the row-label's gray/14px duration
span rule, above) outranks a plain two-class selector and was winning. Same
specificity pitfall as the original badge-inside-.price-row bug this session. */
.price-row p:first-child .price-promo{ color:var(--a-rust); font-size:16px; }
/* Round 157 (user: "dostosuj wielkość ceny w przypadku konsultacji dot.
depilacji laserowej tak jak jest wszędzie w trzecim poziomie"): the rule
above sets 16px sitewide, matching the treatment page's own #cennik
accordion (its native, measured size) — but this promo price now also
lives inside cennik/index.html's own nested .price-tier-rows (Round 156's
Konsultacje→accordion conversion), where every other row's price is 13px
(.cennik-page .price-tier-rows .price-row p, Round 141). Scoped override
wins by extra specificity (adds .cennik-page + .price-tier-rows), not
source order, so it stays correct regardless of future edits above.
.price-old brought down to 11px in the same scope to keep the original
16px/14px "promo price bigger than the struck-through old price"
proportion at the smaller size, instead of ending up backwards. */
.cennik-page .price-tier-rows .price-row p:first-child .price-promo{ font-size:13px; }
.cennik-page .price-tier-rows .price-row .price-old{ font-size:11px; }
/* Round 133 (user: "ten rdzawy badge niech ma styl jak w pakietach depilacji
laserowej taki sam kolor i rozmiar"): cennik/index.html's .promo-badge sits
inside the SAME p:first-child as the row's gray/14px duration span (the
generator puts name + duration + badge in one
, since .price-row only
supports exactly 2 flex children — name and price), so the row above
silently overrode it to gray/14px, exactly the same specificity pitfall
already hit twice before by .price-promo and the original 0 zł bug — the
base .promo-badge rule (own file, single class, specificity 0,1,0) never
had a chance against .price-row p:first-child span (0,2,2). Restored here
at higher specificity, matching .price-package-badge's real values (rust
bg, cream text, 11px/700/uppercase) exactly, per the request. */
.price-row p:first-child .promo-badge{ color:var(--a-cream); font-size:11px; }
/* Round 140: .promo-badge moved OUT of the row's
(see below) — no longer a
descendant of p:first-child at all, so the specificity fight this rule
existed to win never happens anymore and the rule above is dead code. Left
in place (harmless — it simply can't match anything now) rather than
deleted, since the reasoning above is still useful history; the base
.promo-badge rule's own color/size now apply untouched, uncontested. */
/* Round 152 (user: "jeśli jakaś pozycja ma rdzawy badge to cena tej pozycji
też niech będzie rdzawa"): :has() so this applies to every current AND
future promo-badge row automatically instead of hand-tagging each price
with .price-promo one at a time — two selectors for the row's two real
shapes (see the Round 140 comment above .price-row-buy): with a booking
button, the price is .price-row-buy's own
; without one (the 2 combo
deals with no serviceId), it's the row's bare 2nd
sibling. */
.price-row:has(.promo-badge) .price-row-buy > p,
.price-row:has(.promo-badge) > p:nth-of-type(2){ color:var(--a-rust); }
/* cennik/index.html: a treatment with several real Fresha positions (e.g. Epilacja
laserowa LightSheer®'s S/M/L body areas, or any other multi-variant service in the
full Fresha catalog aggregated here — Round 127) expands ONCE (single .price-tier
details/summary, reusing the exact same mechanism/JS animation as the treatment
page's own #cennik accordion) to reveal every real position at once — no nested
per-tier accordions. Single-price items reuse the plain .price-row directly. */
/* Per-row booking button: reuses .treatment-card-cta verbatim (same "Kup pakiet"
link style as the package cards) — wrapped with its price in .price-row-buy so
.price-row keeps exactly two flex children and its existing space-between/
:last-child rules above still apply unchanged. */
.price-row-buy{ display:flex; align-items:center; gap:var(--sp-24); }
/* Runda 181: a row with no CTA (just a bare price
as the row's own
:last-child, e.g. "Wizyta kontrolna" · 0 zł, "+50 zł" add-ons) sits flush
against the row's own right edge — but every OTHER row's price text sits
~119px further left, making room for its own .treatment-card-cta button
(measured live: button ~95px + the row's own 24px gap). Down a list that
mixes both row shapes, the no-button price visibly "jumps" right instead
of reading as part of the same price column — reserve that same ~119px on
the right of a bare price so it lines up with where prices sit elsewhere,
instead of guessing at a single fixed price-column width for every row
(button widths do vary a little by their own text, but they're all
"Zarezerwuj" in every list this currently applies to). */
.price-row > p:last-child{ margin-right:119px; }
.price-row .treatment-card-cta{ margin-top:0; align-self:center; }
/* Round 140 (user: Round 139's "give the badge its own line" fix (below,
narrowed to ≤767px) still looked broken between ~767–991px — wide enough
that .price-row-buy stays inline instead of dropping to its own full-width
line, so the row tried to fit name+duration+badge+price+button on one row,
and only the badge (least essential, needing ~140px it couldn't get) spilled
alone onto a 2nd line, vertically centered by align-items:center against the
WHOLE row's height — reading as an accidentally stray, un-anchored chip
rather than a positioned element. Root cause: the badge lived INSIDE the
row's
as inline content (see gen_cennik_v2.py's `name + duration +
badge` note above), so its position could only ever be wherever THAT
specific text happened to wrap, never something CSS could pin. Moved out of
to be its own flex sibling (now the row's first DOM child, before
)
so it can be positioned independent of the name text's own line breaks:
ordered back to sit after the name on desktop (order:2, matching where it
visually sat before) via :has() so ONLY badge-bearing rows get this
restructuring — plain rows keep the original 2-child space-between exactly
as before — and ordered FIRST (order:-1, row user asked for: "na górze
wiersza a nie na dole czy po środku") below desktop's 991px breakpoint,
where the row also stacks to one column per line: badge, then name, then
price+button, always in that predictable order regardless of text length. */
/* Runda 180: all the reordering rules below use :has(> .promo-badge) — DIRECT
child only — not the bare :has(.promo-badge) descendant match used by the
.price-old/.price-promo/rust-price rules above. Runda 177/178 introduced a
SECOND badge shape (.price-row-badges wrapper nested INSIDE the row's
,
after the name/duration text, on laser-tulowy-plock) that :has(.promo-badge)
would also match — but that shape already sits correctly via the row's
plain 2-child space-between layout (name-
, .price-row-buy), the same as
any badge-less row, so re-running this old shape's column-stacking at
≤991px (built only for the OLD direct-child shape below) broke it: price
fully justified. */
.price-row:has(> .promo-badge){ justify-content:flex-start; }
.price-row:has(> .promo-badge) > :last-child{ margin-left:auto; }
.price-row .promo-badge{ order:2; margin-left:0; }
/* two shapes of row share this markup: [badge, name-
, .price-row-buy] when
there's a booking button, or [badge, name-
, price-
] for the 2 combo
deals that have none (see the generator note above .price-row-buy) — :nth-
of-type(2) only ever matches a SECOND
, so it's a no-op in the first
shape (there's only one
) and correctly targets the price line in the
second, without two separate rules needing to know which shape they're in. */
.price-row:has(> .promo-badge) > p:first-of-type{ order:1; }
.price-row:has(> .promo-badge) > p:nth-of-type(2){ order:3; }
.price-row:has(> .promo-badge) > .price-row-buy{ order:3; }
@media (max-width:991px){
.price-row:has(> .promo-badge){ flex-direction:column; align-items:flex-start; row-gap:var(--sp-8); }
.price-row:has(> .promo-badge) > :last-child{ margin-left:0; }
.price-row .promo-badge{ order:-1; }
}
@media (max-width:767px){
.price-row{ flex-wrap:wrap; row-gap:var(--sp-8); }
.price-row-buy{ width:100%; justify-content:space-between; }
}
/* PAKIETY sub-section: real data from instytutem.pl/pakiety, not archon.au (archon
has no package-pricing equivalent — its whole pitch is "one price for all"). Reuses
.treatment-cards/.treatment-card verbatim (same component as the S/M/L cards
higher up this page) without the image block, so no new card visual language is
introduced for content this page-specific. */
/* more air on request: bumped from the sitewide sp-80 section gap to sp-120 —
Pakiety reads as its own distinct block, not just a continuation of the price
list right above it. */
.price-packages{ margin-top:var(--sp-120); }
/* same real #cost divider color as the Cennik eyebrow above — reused here for
visual consistency between the two sub-sections sharing this one light section
(archon.au has no packages equivalent to measure directly for this one). */
.price-packages .treatment-intro-divider{ background:var(--a-gray); }
.price-package-card h3{ margin-top:0; }
/* on request: the per-treatment price is the main thing a customer's eye should
land on in each card (it's the number that actually communicates the discount
— "315 zł / zabieg" vs the regular 349 zł — better than the total package price
does on its own), so it gets the biggest, boldest treatment in the card, well
above the now-secondary total/count/validity line (reusing .treatment-card-time
for that, unchanged). */
.price-package-per-treatment{
display:flex;
align-items:baseline;
gap:6px;
margin:16px 0 4px;
}
.price-package-per-treatment-num{
font-family:"Inter",sans-serif;
font-weight:700;
font-size:36px;
line-height:1.15;
color:var(--a-ink-warm);
}
.price-package-per-treatment-suffix{
font-family:"Inter",sans-serif;
font-weight:400;
font-size:15px;
color:var(--a-gray);
}
.price-package-per-treatment-compare{
font-family:"Inter",sans-serif;
font-size:13px;
color:var(--a-gray);
margin:0 0 16px;
}
.price-package-card{ position:relative; }
/* on the light section, the featured card needs real contrast against the cream
page instead of the rgba(255,255,255,.66) lift used elsewhere (that trick is for
OLIVE backgrounds — on cream it would barely register): a solid white card with
a taupe border, same shadow already used sitewide for lifted cards. */
.price-package-card--featured{
border-radius:4px;
background-color:var(--a-white);
border:1px solid var(--a-taupe);
box-shadow:0 12px 14px -7px rgba(122,119,114,.26);
}
/* on request: the 3 package names should sit at the same level across cards. The
badge used to be an in-flow first child, pushing "comfort 10" down below where
"mini 6"/"premium 20" start (they carry no badge) — positioned as an absolute
"ribbon" hanging off the card's top edge instead, so it no longer consumes flow
height and every card's h3 starts at the same padding-top position. Centered
(left:50%/translateX(-50%), on request) rather than pinned to the card's own
left padding. Accent color is the sitewide rust hover/accent (--a-rust, already
used for nav-link/mega-menu/footer hovers and this section's own bullet dashes)
— not the brand lime, which was only ever used here as an unrelated one-off pick. */
.price-package-badge{
position:absolute;
top:-13px;
left:50%;
transform:translateX(-50%);
/* absolutely-positioned + left:50% (no matching `right`) shrink-to-fit sizing
measures its "available width" from `left` to the containing block's right
edge — effectively half the card's width — so at card widths around 900px
viewport (~250px), the badge text wrapped to 2 lines even though it fits
comfortably on one. That taller, wrapped badge poked further above the card
(fixed top:-13px), eating into the gap from the paragraph above and reading
as "too close" exactly at that range. nowrap sizes it to its real content
width regardless of that constraint, keeping badge height constant. */
white-space:nowrap;
font-family:"Inter",sans-serif;
font-weight:700;
font-size:11px;
letter-spacing:.04em;
text-transform:uppercase;
color:var(--a-cream);
background:var(--a-rust);
display:inline-block;
padding:4px 10px;
border-radius:2px;
margin:0;
}
/* .treatment-card-cta's own margin-top:auto already pins the button to the card's
bottom edge, but since .treatment-cards stretches all 3 cards to equal height,
the tallest card (comfort 10, with the most list items) ends up with almost no
gap between its list and button — the auto margin has nothing left to consume.
Both margins here guarantee real breathing room on both sides of the list
(description→list, list→button) in every card, not just the shorter ones that
already had slack from the equal-height stretch. */
.price-package-list{
list-style:none;
margin:var(--sp-24) 0 var(--sp-40);
padding:0;
display:flex;
flex-direction:column;
gap:6px;
}
.price-package-list li{
font-family:"Inter",sans-serif;
font-size:14px;
line-height:20px;
color:var(--a-ink-warm);
padding-left:16px;
position:relative;
}
.price-package-list li::before{ content:"–"; position:absolute; left:0; color:var(--a-rust); }
/* archon.au's real fine-print asterisk note (measured directly on #cost
.paragraph.asterisk.dark, live): Inter 12px/400/20.4px, color rgb(63,61,59)
= --a-ink-warm — NOT the muted --a-gray/13px/1.5 this had before, which was
never actually measured for this specific component. margin-top 40px already
matched (--sp-40). */
.price-packages-note{
font-family:"Inter",sans-serif;
font-size:12px;
font-weight:400;
line-height:20.4px;
color:var(--a-ink-warm);
margin:var(--sp-40) 0 0;
}
/* the reference site's real "15-Minute Block" / "30-Minute Block" / "1-Hour Block"
cards (.treatment-cards): square photo, bold 15px h3, 1px divider, bold 16px
price, 14px duration, 14px description, then an underlined "Book Just this"
link with a trailing arrow pinned to the card's bottom — all measured
directly on archon.au. display:flex + flex-wrap:wrap (not grid) is archon's
own mechanism for going from 3-across to stacked at narrow widths, so this
reuses the same approach instead of a media query. */
.treatment-cards{
display:flex;
flex-wrap:wrap;
gap:30px 20px;
margin-top:var(--sp-24);
}
/* more air on request, one step up the sitewide 8px spacing scale from the 64px
"heading→list" convention used elsewhere (#wskazania, .price-list above) — this
particular gap (description paragraph → cards) reads tighter than those since
the cards themselves are visually heavier (bordered/padded boxes, not bare text
rows), so it earns the extra room. Placed AFTER .treatment-cards (same
specificity, so source order decides) — an earlier attempt at this same
position lost to .treatment-cards' own 24px and never actually took effect,
the same class-ordering bug already found and fixed for the mobile breakpoint
below (Round 70). */
.price-package-cards{ margin-top:var(--sp-120); }
.treatment-card{
/* the reference site's real flex sizing (measured directly, not the
flex-basis:300px this had before): flex-basis:0%, min-width:31%,
max-width:50% — the max-width is what matters: it caps a lone card
wrapped onto its own row at half-width instead of flex-grow stretching
it to fill the whole row, which is what a bare `flex:1 1 300px` (no
upper bound) was doing here. */
flex:1 1 0%;
min-width:31%;
max-width:50%;
display:flex;
flex-direction:column;
/* the reference site's real hover: measured directly on archon.au as a
plain CSS :hover (not a Webflow IX2 interaction) on .treatment-cards-wrapper
— padding:20px is part of that same rule (the card lifts and a white
card-shape appears behind the padded content, not flush against the
photo's edge), transition 0.3s cubic-bezier(.25,.46,.45,.94) (the same
easing already used elsewhere on this site, e.g. .abtn:hover). */
padding:20px;
transition:transform .3s cubic-bezier(.25,.46,.45,.94), box-shadow .3s cubic-bezier(.25,.46,.45,.94), background-color .3s cubic-bezier(.25,.46,.45,.94);
}
.treatment-card:hover{
transform:translateY(-8px);
transform-origin:50% 100%;
border-radius:4px;
background-color:rgba(255,255,255,.66);
box-shadow:0 12px 14px -7px rgba(122,119,114,.26);
}
@media (max-width:479px){
/* the reference site's real breakpoint (measured: still 31%/50% at 480px,
switches to 100%/100% exactly at 479px) — same tier used sitewide for
the narrowest mobile rules. */
.treatment-card{ min-width:100%; max-width:100%; }
}
/* on request: one package box per row on mobile (3 stacked rows), not the shared
.treatment-card breakpoint above (479px, measured for the S/M/L cards higher up
this page — a different, archon-original component this must not affect) —
package cards are our own content and, being 3-wide with generous 32px padding,
read as cramped in the ~480-767px range where the shared component still shows
2-up. Placed after .treatment-card's own rules (same specificity, so source
order decides) so this actually wins in that range. */
@media (max-width:767px){
.price-package-card{ min-width:100%; max-width:100%; }
}
/* package cards are our own content, not a literal archon.au component (unlike the
S/M/L cards, which reuse this same .treatment-card class 1:1 from a measured
archon element) — safe to give them more interior breathing room on request
without touching that shared, measured padding used by the S/M/L cards too.
Extra bottom padding specifically for more air below the "Kup pakiet" button.
Placed after .treatment-card's own padding:20px rule above (equal specificity,
so source order decides) — an earlier attempt at this same position lost to
that rule and never actually took effect; verified this time via
getComputedStyle, not just a screenshot (same class-ordering pitfall as
Rounds 70/72, logged as lesson #20 in the "Ważne odkrycia" section above). */
.price-package-card{ padding:32px 32px 56px; }
.treatment-card-image-link{
position:relative;
overflow:hidden;
aspect-ratio:1/1;
display:block;
}
.treatment-card-image{ width:100%; height:100%; object-fit:cover; }
.treatment-card h3{
font-family:"Inter",sans-serif;
font-weight:700;
font-size:15px;
color:var(--a-cream);
margin:20px 0 10px;
}
.section--cream .treatment-card h3{ color:var(--a-ink-warm); }
.treatment-card-divider{
height:1px;
background:rgba(212,212,212,.15);
margin-bottom:10px;
}
.section--cream .treatment-card-divider{ background:var(--a-taupe); }
.treatment-card-price{
font-family:"Inter",sans-serif;
font-weight:700;
font-size:16px;
color:var(--a-cream);
margin:0;
}
.section--cream .treatment-card-price{ color:var(--a-olive-black); }
.treatment-card-time{
font-family:"Inter",sans-serif;
font-weight:400;
font-size:14px;
/* dimmed cream, as an actual color value rather than element opacity — an
opacity:.8 here would collide with the scroll-reveal system's own
opacity toggle on this same element ([data-reveal], added below), since
both would fight over the one CSS property. */
color:rgba(241,237,231,.8);
margin:0 0 20px;
}
.section--cream .treatment-card-time{ color:var(--a-ink-warm); }
.treatment-card-desc{
font-family:"Inter",sans-serif;
font-weight:400;
font-size:14px;
color:rgba(241,237,231,.8);
margin:0 0 20px;
}
.section--cream .treatment-card-desc{ color:var(--a-ink-warm); }
.treatment-card-cta{
display:flex;
flex-direction:column;
align-items:flex-start;
overflow:hidden; /* archon.au's .arrow-button: clips the underline's horizontal
hover-jump, measured live (getComputedStyle) rather than guessed */
align-self:flex-start;
margin-top:auto;
font-family:"Inter",sans-serif;
font-weight:500;
font-size:14px;
color:var(--a-cream);
}
.section--cream .treatment-card-cta{ color:var(--a-olive-black); }
.treatment-card-cta-title-wrap{
display:flex;
align-items:center;
gap:6px; /* archon.au .title-wrapper: measured gap between text and arrow is 6px, not 8px */
}
.treatment-card-cta-underline{
width:100%;
height:1px;
background:var(--a-cream);
}
.section--cream .treatment-card-cta-underline{ background:var(--a-olive-black); }
@keyframes cta-underline-jump{
0%{ transform:translateX(0); }
50%{ transform:translateX(100%); }
50.01%{ transform:translateX(-100%); }
100%{ transform:translateX(0); }
}
.treatment-card-cta:hover .treatment-card-cta-underline{
animation:cta-underline-jump .6s ease-out; /* archon.au IX2 "Arrow Button Hover In"
(a-33): TRANSFORM_MOVE .button-underline x:100% 300ms easeOut, teleport to
-100%, slide back to 0 in 300ms easeOut — runs in parallel with the arrow */
}
.treatment-card-cta-arrow{
width:14px;
height:10px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden; /* archon.au's .button-arrow-3 wrapper: clips the arrow during
the hover jump so it never visibly leaves the button */
flex:0 0 auto;
}
.treatment-card-cta-arrow svg{ width:14px; height:10px; }
@keyframes cta-arrow-jump{
0%{ transform:translateX(0); }
50%{ transform:translateX(15px); }
50.01%{ transform:translateX(-15px); }
100%{ transform:translateX(0); }
}
.treatment-card-cta:hover .treatment-card-cta-arrow svg{
animation:cta-arrow-jump .6s ease-out; /* archon.au IX2 "Arrow Button Hover In"
(a-33): TRANSFORM_MOVE .button-arrow-3 x:15px 300ms easeOut, teleport to
-15px, slide back to 0 in 300ms easeOut — measured via ix2 store, not guessed */
}
/* the reference site's real "Never had Laser? Get 50% off..." split-2 promo:
text column left (eyebrow+divider+h2+paragraph+CTA) / photo column right,
both full section height — all measured directly, including the ≥992px
breakpoint (the same tablet tier as the intro grid and hero, confirmed
again here rather than assumed) and the mobile column-reverse stacking
(photo first, text below, not the other way round). No .container/max-width
here on purpose — archon.au's own version has none either (confirmed: its
image column runs flush to the viewport edge on the right, zero gutter).
A prior round wrapped this in the sitewide .container to give it the same
margins as the rest of the page, which technically worked but produced a
visible dark gap between the photo and the viewport edge that archon.au
doesn't have — reverted on request, back to archon.au's real mechanism:
the LEFT gutter comes from .treatment-split-content's own padding-left
(equal to the sitewide clamp(20px,5%,72px), same value, just applied here
as padding instead of a wrapping container), while the RIGHT side (the
photo) bleeds all the way to the viewport edge with no cap, matching. */
.treatment-split{
display:flex;
flex-direction:column-reverse;
}
@media (min-width:992px){
.treatment-split{
display:grid;
grid-template-columns:1fr 2fr;
}
}
.treatment-split-content{
/* horizontal was a fixed 18.75px, only correct at the 375px width it was
originally measured at — it's really the same sitewide gutter formula
as everywhere else (measured directly on archon.au's .left-content at
815px: 40px = max(20px,5%), same mechanism as .container), just never
switched from the flat px value to the formula. Vertical (56.25px)
left as-is — that one genuinely isn't a simple %-of-width formula. */
padding:56.25px max(20px, 5%);
display:flex;
flex-direction:column;
}
@media (min-width:992px){
/* clamp() here must use vw, not the sitewide %, unlike .container's own
clamp(20px,5%,72px) — that % correctly resolves against the viewport
because .container has no narrower ancestor constraining it, but this
element is a grid ITEM inside .treatment-split (a 1fr column, 475px at
1440px wide), so a % here would resolve against that narrow column
instead (measured bug: 24px instead of ~72px) — vw always resolves
against the viewport regardless of nesting, giving the same real gutter. */
.treatment-split-content{
padding:47.5px 47.5px 47.5px max(20px, 5vw);
/* the reference site's real mechanism for "paragraph+button stuck to the
bottom of the banner": .left-content is a 2-row CSS grid (measured:
grid-template-rows come out as two near-identical halves, i.e. 1fr 1fr)
— NOT a fixed margin-top on the heading. A fixed px gap (what this used
to be) only ever matches archon.au's own photo's specific height; with a
different photo (different aspect ratio → different section height) the
footer would sit at the wrong spot. The 1fr/1fr split + the footer's own
justify-content:flex-end (below) reproduces the real, height-independent
behavior instead. */
display:grid;
grid-template-rows:1fr 1fr;
/* Real bug found at tablet widths (~1080px): this row-split trick only
produces visible spacing when there's slack left over in each row after
its own content — but our heading is real Polish marketing copy, much
longer than archon's own short English original, so at some widths it
wraps to just enough lines to fill its entire 1fr row with zero slack
left (measured directly: heading's own bottom edge and the paragraph's
own top edge landed on the exact same pixel, 0px gap — not a rounding
artifact). A guaranteed minimum row-gap fixes it at every width without
touching the row-split mechanism itself, which still does its job
whenever there IS slack (e.g. shorter headings, wider desktop columns). */
row-gap:32px;
}
}
.treatment-split-top{ margin-bottom:44px; }
@media (min-width:992px){
/* the grid row split above already provides the spacing on desktop —
measured directly as 0 extra margin between the two halves. */
.treatment-split-top{ margin-bottom:0; }
}
.treatment-split-title-line{ margin-bottom:20px; }
.treatment-split-divider{
height:1px;
background:#1E1D1D;
margin-bottom:22px;
}
@media (min-width:992px){ .treatment-split-divider{ margin-bottom:27px; } }
.treatment-split-heading{
font-family:"Tenor Sans",Georgia,serif;
font-weight:500;
font-size:30px;
line-height:36px;
letter-spacing:-1px;
color:var(--a-cream);
margin:0;
}
.treatment-split-footer{
display:flex;
flex-direction:column;
align-items:flex-start;
}
@media (min-width:992px){
/* pushes the paragraph+CTA to the bottom of this row's own half of the
content box — measured directly (button's own bottom edge sits flush
with the row's bottom edge, 0px gap) — this is the real "stuck to the
bottom" archon.au behavior. */
.treatment-split-footer{ justify-content:flex-end; }
/* real bug found: .treatment-card-cta (shared with the S/M/L/package cards,
where margin-top:auto is the ONLY bottom-pinning mechanism) also carries
that auto margin here — an auto margin on a flex item takes priority over
the parent's own justify-content for distributing free space, so inside
this now grid-stretched, taller-than-its-content footer box it swallowed
ALL the slack itself and dragged the button away from the paragraph
(measured: 93.5px gap instead of the real 10px). justify-content:flex-end
above already does the "stick to bottom of the banner" job on its own;
this cancels the competing auto margin so the button sits its normal
10px (the paragraph's own margin-bottom) below the paragraph instead. */
.treatment-split-footer .treatment-card-cta{ margin-top:0; }
}
.treatment-split-footer p{
font-family:"Inter",sans-serif;
font-size:16px;
line-height:27.2px;
color:var(--a-cream);
margin:0 0 10px;
}
/* #promo (Pakiet Powitalny) needs more breathing room than the archon.au-measured
10px — scoped to this section only, .treatment-split--price keeps the original
10px. Since Runda 161 this also does double duty as the visible gap the user
asked for between the two
the copy is now split into ("Zarezerwuj termin
we Fresha..." on its own paragraph) — no extra CSS needed, this rule already
applies its margin-bottom to every
in the section, including that one. */
#promo .treatment-split-footer p{ margin-bottom:var(--sp-24); }
/* Runda 161 (użytkownik: "wyróżnij coś ważnego na rdzawy nasz kolor") — zastępuje
dawny .promo-code (kod rabatowy usunięty z treści #promo w Rundzie 160, ta sama
idea rdzawego wyróżnienia zastosowana teraz do konkretnych kwot). */
#promo .promo-highlight{ color:var(--a-rust); font-weight:600; }
.treatment-split-image-wrapper{
position:relative;
overflow:hidden;
height:450px;
}
@media (min-width:992px){ .treatment-split-image-wrapper{ height:auto; } }
.treatment-split-image{ width:100%; height:100%; object-fit:cover; display:block; }
/* .treatment-split--price: mirrored variant for the "ONE PRICE FOR ALL"-style
banner (archon.au's real .split-1 — measured live: image LEFT/text RIGHT,
grid-template-columns:2fr 1fr at ≥992px, i.e. the exact opposite ratio and
side of the promo section's .split-2). Image already comes first in the
HTML here, so mobile just needs plain column (not column-reverse — no flip
needed, unlike the promo section where DOM order was text-then-photo). */
.treatment-split--price{ flex-direction:column; }
@media (min-width:992px){
.treatment-split--price{ grid-template-columns:2fr 1fr; }
/* mirrored padding: small inner gap on the left (next to the image), the
real sitewide gutter on the right (outer edge) — measured directly on
archon.au's .right-content: 47.5px 71.25px 47.5px 47.5px. */
.treatment-split--price .treatment-split-content{ padding:47.5px max(20px, 5vw) 47.5px 47.5px; }
}
/* archon.au's real text here is ink-warm (rgb(63,61,59)), not the cream this
component's base rules assume (built for the dark promo section only) —
this is a light .section--cream context, so override explicitly. Simpler
content split than the promo section too: real archon.au groups the
paragraph with the eyebrow/heading (not with the button), and its footer
row isn't an even 1fr/1fr split (measured: 279px/45px, content-sized, not
halves) — reusing .treatment-split-top/-footer as generic "text block" and
"button block" containers instead of replicating that exact asymmetric
grid, since the visual difference is negligible on a section this short. */
.treatment-split--price .eyebrow{ color:var(--a-ink-warm); }
.treatment-split--price .treatment-split-heading{ color:var(--a-ink-warm); }
.treatment-split-top p:not(.eyebrow){
/* :not(.eyebrow) matters — the eyebrow is also a bare
, and without this
exclusion this rule's font-size (16px) was winning over .eyebrow's own
.75rem (higher specificity: class+element beats class alone), silently
resizing the eyebrow instead of just styling the description paragraph. */
font-family:"Inter",sans-serif;
font-size:16px;
line-height:27.2px;
color:var(--a-ink-warm);
margin:16px 0 0;
}
/* archon.au's real #care ("treatment recommendations") tab component, measured
directly: eyebrow→heading gap 47px (same value already used for #wskazania —
consistent, not coincidence), heading→tab-menu gap 104px, tab-menu→content gap
50px. 3 equal-width columns (flex:1, not sized to text), each with its own
border-bottom acting as an underline — active tab: cream/600, its own
full-width cream underline; inactive: taupe/400, gray underline. On request,
the underline segments now have a visible gap between them: the 30px spacing
moved from each tab's own right padding into the flex container's own `gap`,
so that gap sits OUTSIDE every tab's border-box and the border-bottom simply
doesn't reach across it — no separate pseudo-element needed. */
#postepowanie .eyebrow{ margin-bottom:47px; }
#postepowanie .h-section{ margin-bottom:0; }
.care-tabs{
display:flex;
gap:30px;
margin-top:104px;
margin-bottom:50px;
}
.care-tab{
flex:1 1 0%;
text-align:left;
background:none;
border:none;
border-bottom:1px solid var(--a-gray);
padding:9px 0;
font-family:"Inter",sans-serif;
font-size:16px;
line-height:27.2px;
font-weight:400;
color:var(--a-taupe);
cursor:pointer;
}
.care-tab.is-active{ color:var(--a-cream); font-weight:600; border-bottom-color:var(--a-cream); }
.section--cream .care-tab{ color:var(--a-gray); border-bottom-color:var(--a-taupe); }
.section--cream .care-tab.is-active{ color:var(--a-ink-warm); border-bottom-color:var(--a-ink-warm); }
/* archon.au's real tab-pane switch (measured on the live Webflow w-tabs element:
data-duration-in="300" data-duration-out="100" data-easing="ease") — main.js
cross-fades via inline opacity/transition (asymmetric durations each direction,
can't be done with one CSS transition rule), not an instant hidden-attribute
swap. [hidden] stays as the reduced-motion / no-JS fallback. */
.care-panel[hidden]{ display:none; }
/* archon.au's real list marker: a plain disc bullet (list-style:disc), not a
custom dash — measured, not guessed, unlike most other lists on this page
which deliberately use a leading-divider pattern instead. */
.care-panel{
list-style:disc;
padding-left:20px;
margin:0;
}
/* archon.au's real mobile behaviour for this component (measured live at ≤767px,
the same breakpoint already used sitewide, e.g. #wskazania): the 3 tabs stack
vertically instead of sitting in equal-width columns, each getting its own
full-width underline — not just the row wrapping under narrow flex-wrap. The
30px column gap doesn't carry over as a row gap either (measured: adjacent
stacked tabs touch exactly, spacing comes only from each tab's own 9px
padding) — so `gap` is reset to 0, not left at 30px. Surrounding spacing also
shrinks (eyebrow→heading 17px — same value as #wskazania's own mobile
override; heading→tabs 74px; tabs→content 25px), all measured, not scaled by
a guessed ratio. */
@media (max-width:767px){
#postepowanie .eyebrow{ margin-bottom:17px; }
.care-tabs{ flex-direction:column; gap:0; margin-top:74px; margin-bottom:25px; }
}
.care-panel li{
font-family:"Inter",sans-serif;
font-size:16px;
line-height:27.2px;
color:var(--a-taupe);
padding-bottom:10px;
}
.section--cream .care-panel li{ color:var(--a-ink-warm); }
/* archon.au's real #Solution (.section-parallax) — full-bleed photo banner CTA,
measured directly: fixed height 400px, centered content, heading Tenor Sans
36px/400/43.2px/cream/center, button-wrapper margin-top 50px (gap to button).
No separate dark overlay in the real component (measured: fully transparent,
.abtn's own hover hasn't been paired with a magnetic-cursor JS effect archon
uses — same reasoning as skipping that elsewhere on this page: a genuine
Webflow interaction detail already scoped out of this project's animation
budget, not an oversight). Button reuses the already-existing, already-
measured .abtn.outline-light 1:1 (same 44px height/27px padding/2px radius/
cream border as archon's real .button.outline). */
.cta-banner{
position:relative;
height:400px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
.cta-banner-image{
position:absolute;
top:-90px;
left:0;
width:100%;
height:calc(100% + 180px);
object-fit:cover;
will-change:transform;
}
.cta-banner-content{
position:relative;
z-index:1;
text-align:center;
padding:0 20px;
}
.cta-banner-heading{
font-family:"Tenor Sans",Georgia,serif;
font-weight:400;
font-size:36px;
line-height:43.2px;
color:var(--a-cream);
margin:0;
}
.cta-banner-content .abtn{ margin-top:50px; }
/* scroll-reveal — the reference site's own real, confirmed IX2 presets
("slideInBottom"/"fadeIn"), read directly out of its Webflow.require('ix2')
store rather than guessed: opacity 0→1 (+ translateY(100px)→0 for the
"slide" variant), duration 1000ms, easing "outQuart" (the standard
ease-out-quartic curve, cubic-bezier(.25,1,.5,1)). JS (main.js) adds
.is-revealed via IntersectionObserver, which fires immediately for
anything already in view on load — so nothing gets stuck invisible if a
user never scrolls, unlike the scroll-reveal mistake documented in
CLAUDE.md's "Błędy, które popełniliśmy" #4. */
[data-reveal]{ opacity:0; }
[data-reveal="slide"]{ transform:translateY(100px); }
[data-reveal].is-revealed{
opacity:1;
transform:none;
transition:opacity 1s cubic-bezier(.25,1,.5,1), transform 1s cubic-bezier(.25,1,.5,1);
}
/* the reference site's real "Divider Scroll into View" preset (read the same
way, via ix2 store, not guessed): width 0%→100%, 300ms, "easeIn" (the
standard CSS ease-in curve). Unlike the fade/slide variants above, the
reference site's own divider never has opacity:0 — only width animates —
so this variant overrides the shared opacity:0 back to fully opaque. */
[data-reveal="grow"]{ opacity:1; width:0%; }
[data-reveal="grow"].is-revealed{
width:100%;
transition:width .3s ease-in;
}
/* the reference site's real image reveal on the "Rekomendacje sezonowe" cards
(`.treatment-cards-wrapper.dark img`): opacity stays at 1 throughout — only a
slow scale-in, measured by sampling its live computed transform every ~50ms
during the actual scroll-into-view transition (not guessed): scale(1) settling
to scale(1.085) over roughly 2.5s, easing slow→fast→slow (approximated here
with a symmetric ease-in-out cubic-bezier — Webflow's exact internal curve for
this specific effect isn't exposed via its IX2 store, unlike the shared fade/
slide/grow presets above, which are read directly from it). */
[data-reveal="zoom"]{ opacity:1; transform:scale(1); }
[data-reveal="zoom"].is-revealed{
transform:scale(1.085);
transition:transform 2.5s cubic-bezier(.65,0,.35,1);
}
@media (prefers-reduced-motion: reduce){
[data-reveal]{ opacity:1 !important; transform:none !important; width:100% !important; }
}
/* ============ BLOG (2026-09-09) ============
Zmierzone na żywym archon.au: listing "/articles/skincare" (nav "Articles & News")
i pojedynczy wpis "/articles/skincare-and-grooming-essentials-guide-for-australian-men"
— desktop viewport 1440px (resize_window, nie domyślny wąski panel podglądu, który
fałszywie wygląda jak układ 1-kolumnowy mobile). Kolor tekstu ujednolicony na
--a-ink-warm (zasada "jedna czerń na całej stronie") — archon w tym jednym komponencie
listy miał inny odcień (rgb(30,30,32)), ale na stronie pojedynczego wpisu H1 i akapity
już używają dokładnie #3F3D3B, więc to prawdopodobnie niezamierzona niekonsekwencja
źródła, nie świadomy wybór do skopiowania. */
.blog-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:var(--sp-64);
}
@media (max-width:767px){
.blog-grid{ grid-template-columns:1fr; }
}
.blog-card{ display:block; color:inherit; text-decoration:none; }
.blog-card-thumb{
display:block;
width:100%;
aspect-ratio:621/400;
border-radius:20px;
overflow:hidden;
margin-bottom:24px;
}
.blog-card-thumb img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(85%) sepia(8%); }
.blog-card-meta{
display:flex; align-items:center; gap:8px;
font-family:"Inter",sans-serif; font-size:12px; font-weight:400; line-height:16px;
color:var(--a-ink-warm);
margin-bottom:8px;
}
.blog-card-meta .dot-small{ width:4px; height:4px; border-radius:100px; background:var(--a-ink-warm); flex:none; }
.blog-card-title{
font-family:"Inter",sans-serif; font-size:24px; font-weight:500; line-height:31.2px;
letter-spacing:-0.48px; color:var(--a-ink-warm); margin:0 0 10px;
}
.blog-card-line{ display:block; width:100%; height:1px; background:#D2D2D7; margin:24px 0 8px; }
/* Pojedynczy wpis — struktura DOKŁADNIE odtworzona z żywego archon.au (2026-09-09, druga
runda pomiarów po uwadze użytkownika "1:1, żebym nie mógł się do niczego przyczepić").
Pierwsza runda pomiarów złapała tylko powierzchowne wartości typograficzne i pominęła
prawdziwy układ: archon NIE ma linku powrotu przed hero (usunięty), tytuł siedzi w gridzie
2-kolumnowym (druga kolumna pusta — prawdopodobnie zarezerwowana pod nagłówek/cytat na
innych wpisach), data+autor to OSOBNY wiersz PO tytule (nie przed nim, nie przy zdjęciu),
w formacie "DATA / AUTOR" z ukośnikiem (nie kropką) i własnym podkreśleniem (divider-line),
a sama treść artykułu siedzi w DRUGIEJ kolumnie 2-kolumnowego gridu — pierwsza kolumna to
pusty "spacer" (weryfikowane wprost w DOM, nie domysł). Wartości opacity:0/width:0% złapane
przy pomiarze to niewystrzelone jeszcze animacje wejścia (Webflow IX2, ten sam mechanizm co
nasze [data-reveal]) — nie mają wpływu na finalne, docelowe wartości typografii/koloru/
marginesów użyte tutaj. */
/* Pionowa paralaksa (2026-09-09) — ten sam wzorzec co już istniejący .cta-banner-image
(przewymiarowany ![]()
przesuwany transformem na scroll, patrz main.js), zastosowany na
zdjęciu hero wpisu blogowego: kontener position:relative/overflow:hidden, obraz o 100px
większy niż kontener (50px zapasu na górze i dole) żeby przesunięcie nigdy nie odkryło
pustej krawędzi. */
.blog-hero-image{
position:relative; display:block; width:100%; aspect-ratio:1283/640; border-radius:20px;
overflow:hidden; margin-bottom:32px;
}
.blog-hero-image img{
position:absolute; top:-50px; left:0; width:100%; height:calc(100% + 100px);
object-fit:cover; display:block; will-change:transform; filter:grayscale(85%) sepia(8%);
}
.blog-post-header{
display:grid; grid-template-columns:3fr 2fr; column-gap:72px; margin:0 0 50px;
}
.blog-post-header h1{
font-family:"Inter",sans-serif; font-size:56px; font-weight:400; line-height:61.6px;
letter-spacing:-2px; color:var(--a-ink-warm); margin:0;
}
.blog-byline-row{ display:grid; grid-template-columns:1fr 2fr; column-gap:40px; }
.blog-byline{
font-family:"Inter",sans-serif; font-size:12px; font-weight:600; letter-spacing:0.5px;
text-transform:uppercase; color:var(--a-ink-warm); margin:0;
}
/* Linia pod datą/autorem jest SIOSTRĄ gridu .blog-byline-row (pełna szerokość kontenera),
NIE elementem wewnątrz jego wąskiej kolumny — zweryfikowane wprost w DOM archon.au
(.divider-line jest bezpośrednim dzieckiem pełnoszerokiego .section-title-line.home,
nie zagnieżdżone w jego wewnętrznym _2-column-grid) i potwierdzone przez użytkownika
po zrzucie ekranu z pierwszej (błędnej) wersji, 2026-09-09. */
.blog-byline-divider{ height:1px; width:100%; background:var(--a-gray); margin:20px 0 25px; }
.blog-content-row{ display:grid; grid-template-columns:1fr 2fr; column-gap:40px; }
.blog-content-row .blog-spacer{ display:block; }
.blog-article-body .blog-lede{
font-family:"Inter",sans-serif; font-size:28px; font-weight:500; line-height:40px;
color:var(--a-ink-warm); margin:0 0 10px;
}
.blog-article-body p{
font-family:"Inter",sans-serif; font-size:16px; font-weight:400; line-height:27.2px;
color:var(--a-ink-warm); margin:0 0 10px;
}
.blog-article-body h2{
font-family:"Inter",sans-serif; font-size:24px; font-weight:500; line-height:28.8px;
letter-spacing:-0.5px; color:var(--a-ink-warm); margin:60px 0 20px;
}
.blog-article-body h3{
font-family:"Inter",sans-serif; font-size:16px; font-weight:600; line-height:19.2px;
color:var(--a-ink-warm); margin:30px 0 10px;
}
/* Numerowany ranking (np. "Ranking najskuteczniejszych laserów") — pozycja jako
stonowany numer obok nagłówka podsekcji, zamiast gołego h3. Reużywa wzorca
liczb .treatment-benefit-num (waga/kolor), dopasowany do rozmiaru h3 wpisu. */
.blog-rank-item{ display:flex; align-items:baseline; gap:16px; margin:30px 0 10px; }
.blog-rank-item h3{ margin:0; }
.blog-rank-num{
font-family:"Inter",sans-serif; font-weight:600; font-size:20px; line-height:19.2px;
color:var(--a-rust); flex:0 0 auto;
}
.blog-article-body ul{ list-style:disc; margin:0 0 20px; padding-left:20px; }
.blog-article-body ol{ list-style:decimal; margin:0 0 20px; padding-left:20px; }
.blog-article-body li{
font-family:"Inter",sans-serif; font-size:16px; font-weight:400; line-height:27.2px;
color:var(--a-ink-warm); margin-bottom:6px;
}
.blog-article-body li::marker{ color:var(--a-rust); }
/* linki w treści wpisu — sitewide wzorzec spod .legal-content a: domyślnie
podkreślenie w kolorze tekstu, kolor rdzawy (--a-rust) dopiero na hover.
:not(.abtn) wyklucza przycisk CTA (.blog-cta a) — ten ma wyglądać i
zachowywać się 1:1 jak przycisk "Rezerwuj online" w headerze, bez
podkreślenia tekstu. */
.blog-article-body a:not(.abtn){ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.blog-article-body a:not(.abtn):hover{ color:var(--a-rust); }
.blog-article-body .blog-cta{ margin-top:32px; }
@media (max-width:767px){
.blog-post-header, .blog-byline-row, .blog-content-row{ grid-template-columns:1fr; column-gap:0; }
.blog-content-row .blog-spacer{ display:none; }
.blog-post-header h1{ font-size:36px; line-height:41px; letter-spacing:-1px; }
}
/* ============ STRONA "O NAS" (2026-09-10) — 1:1 z archon.au /about/about-us ============
Struktura zmierzona bezpośrednio na żywej archon.au: ciemne hero (.section--olive)
z wyśrodkowanym eyebrow+H1+lede, potem zdjęcie, potem dalej na ciemnym tle sekcja
"HISTORY" (H2 statyczny + 3 zakładki), potem marquee (jasne tło), potem "OUR VALUES"
(jasne tło, siatka 4 wartości w układzie schodkowym), potem baner CTA (.cta-banner,
już istniejący komponent .section-parallax), newsletter, stopka.
Świadome odejście od 1:1: hero na żywej archon.au ma zdjęcie jako background-image
całej (bardzo wysokiej) sekcji hero z overlayem — u nasto osobny blok zdjęcia
bezpośrednio pod tekstem hero, bo realne zdjęcie dostarczone przez użytkownika jest
w orientacji pionowej (portret gabinetu), nie nadaje się na szerokie tło całej sekcji. */
.about-hero-intro{ max-width:640px; margin:0 auto; text-align:center; }
.about-hero-intro .eyebrow{ margin-bottom:20px; }
.about-hero-heading{
font-family:"Tenor Sans",Georgia,serif; font-weight:500; font-size:60px; line-height:60px;
letter-spacing:-2px; margin:0 0 35px;
}
.about-hero-intro .lede{ margin:0 auto; }
.about-hero-photo{
position:relative; margin-top:64px; border-radius:20px; overflow:hidden; aspect-ratio:3/2;
}
/* Mocna pionowa paralaksa (na wyraźną prośbę użytkownika) — ten sam wzorzec co
.cta-banner-image/.blog-hero-image (przewymiarowany ![]()
, JS translateY na
scroll w main.js), ale z większym zapasem (160px zamiast 100/180px gdzie indziej)
i mocniejszym współczynnikiem (-0.4 zamiast standardowych -0.22), żeby ruch był
wyraźnie odczuwalny, nie subtelny jak w pozostałych miejscach. */
.about-hero-photo img, .about-hero-photo video{
position:absolute; top:-80px; left:0; width:100%; height:calc(100% + 160px);
object-fit:cover; display:block; will-change:transform;
}
/* Kadr wideo /salon (2026-09-11, użytkownik: "wykadruj ten film tak żeby było
widać twarz i głowę Julii bo teraz ją obcina") — domyślne object-position:50%
50% (center) + silna paralaksa powyżej (-80px w spoczynku, patrz main.js) razem
ucinały górę kadru: źródłowe wideo 1080×1920 (pion) wewnątrz szerokiego,
niskiego kontenera .about-hero-photo (3:2 desktop, 4:5 mobile) jest i tak mocno
przycinane przez object-fit:cover, a paralaksa w spoczynku dodatkowo przesuwa
widoczne okno w górę o ~80px — zmierzone bezpośrednio (przewijanie