/* site/css/leah.css — Wolf & Stone / Leah Wolf pages only (SITE_VARIANT=leah).
Loaded by every site-leah/*.html AFTER fonts/styles/cursor/effects/cookies/
design.css — nothing here touches wolfbordin.com's own pages. Reuses
--espresso/--cream/--gold + --theme-* from styles.css (not redefined here).
Visual identity (hero, palette, type) is NOT touched — see CLAUDE.md.
1 Respiro · 2 Reduced motion + never-invisible .rv · 3 Nav Enquire pill ·
4 .lw-cats · 5 Wolf & Stone (.lw-ws-*) · 6 .lw-list · 7 .lw-form ·
8 .lw-preview / .lw-final-cta · 9 Nav compacta (8 itens) ·
10 Learn (.lw-form__consent + .d-split media ratios) */
/* ============================================================
1. RESPIRO — "menos espaço vazio, sem perder o luxo", ~30% off the
vertical padding. Two padding systems govern .aeterna-section, both
need their own override or one silently wins on some pages:
(a) styles.css:2149-2157/2185-2187 — flat 44px/32px desktop, 28/24
≤800px. Governs about/404/terms.html (no design.css) and any
.p-hero/.d-line section everywhere.
(b) design.css:697-704 — `main#main > .aeterna-section:not(.d-line)
:not(.p-hero)` replaces (a) with clamp(88px,11vw,150px)/
clamp(56px,9vw,80px) × the layout editor's --tune-space, on
index/contact/portfolio/property-assessment.html. Higher
specificity than (a), wins there regardless of load order.
Both rules below exclude :not(.d-line):not(.p-hero) so they never
match those — NOT to shrink them: .p-hero (styles.css:4542) has its
own padding-top: clamp(150px,20vh,210px) for fixed-header
clearance; .d-line (design.css:548) has its own clamp(100px,13vw,
200px) quote-band rhythm. Same-or-lower specificity than a bare
`.aeterna-section` rule loaded after them — without the :not() this
file would silently crush header clearance / the quote band. */
.aeterna-section:not(.d-line):not(.p-hero) {
padding-top: calc(44px * .7);
padding-bottom: calc(44px * .7);
}
@media (max-width: 800px) {
.aeterna-section:not(.d-line):not(.p-hero) {
padding-top: calc(28px * .7);
padding-bottom: calc(28px * .7);
}
}
main#main > .aeterna-section:not(.d-line):not(.p-hero) {
padding-block: calc(clamp(88px, 11vw, 150px) * var(--tune-space, 1) * .7);
}
@media (max-width: 820px) {
main#main > .aeterna-section:not(.d-line):not(.p-hero) {
padding-block: calc(clamp(56px, 9vw, 80px) * var(--tune-space, 1) * .7);
}
}
/* ============================================================
2. REDUCED MOTION + CONTEÚDO NUNCA INVISÍVEL
-----------------------------------------------------------
.rv/.rv.in is the reveal-on-scroll primitive (styles.css:385-402):
.rv starts opacity:0/translateY(34px)/blur(6px); main.js's
IntersectionObserver adds .in on scroll, which *transitions* it to
visible. styles.css already resets .rv under prefers-reduced-motion
— restated here verbatim per the task spec (belt-and-suspenders): */
@media (prefers-reduced-motion: reduce) {
.rv {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* That media query only covers users who ask for reduced motion — not
the other way .rv stays invisible forever: JS never running at all
(blocked script, an error before initScrollReveal() wires up, JS
disabled). With no .in ever added, .rv sits at opacity:0 forever —
unacceptable for image-led sections like .lw-cats.
FIX: give every .rv here a second, CSS-only path to the same
end-state — a delayed keyframe landing on opacity:1/translateY(0)/
blur(0) regardless of JS. `forwards`, not the `both` the task note
suggested: a `both` fill-mode animation is "in effect" during its
own delay too, which suppresses any CSS *transition* on the same
property in that window — it would fight .rv.in's transition the
instant JS fires before the 2.4s mark. `forwards` only takes hold
once the delay elapses, so on a normal load JS wins the race
outright (IntersectionObserver fires within ~1s of scroll) and this
animation's identical end-state just re-confirms it, no seam. Only
if JS never runs at all does this become the sole reveal path. */
@keyframes lw-reveal-fallback {
from { opacity: 0; transform: translateY(34px); filter: blur(6px); }
to { opacity: 1; transform: none; filter: none; }
}
.rv {
animation: lw-reveal-fallback 1.1s var(--ease, ease) 2.4s forwards;
}
@media (prefers-reduced-motion: reduce) {
.rv { animation: none; }
}
/* ============================================================
3. NAV ENQUIRE — strongest call in the 7-item nav. Same .header__link
/ .mobile-menu__link markup (styles.css:510-548, :709-720) plus one
extra class each — not a new nav component. Gold-outline pill,
inverts to solid gold on hover/active, breaking from the other 6
links' plain underline so it reads as the CTA. --espresso/--gold
are raw (non --theme-*) on purpose: hover fill is always gold with
always-dark text regardless of theme — same convention as
.aeterna-section--green's bone-on-green treatment. */
.header__link--enquire {
padding: 7px 20px;
border: 1px solid var(--gold);
border-radius: 999px;
letter-spacing: .3em;
/* opacity/transform kept in the list — the header entrance stagger
(effects.css) reveals links via an opacity transition; dropping
those properties here would snap the pill in with no animation. */
transition: background .4s var(--ease, ease), color .4s var(--ease, ease), border-color .4s var(--ease, ease), opacity .6s ease, transform .6s ease;
}
/* The header entrance stagger in effects.css enumerates nth-child(1..7)
only (wolfbordin nav width). The Leah nav has 8 links — without this
rule the 8th (Enquire) never leaves opacity:0. Same failure mode the
V4 redesign hit with links 6-7 (see effects.css comment). */
.header--loaded .header__link:nth-child(8) { opacity: 1; transform: translateY(0); transition-delay: 0.39s; }
.header__link--enquire::after { content: none; } /* pill, no underline-sweep */
.header__link--enquire:hover,
.header__link--enquire.header__link--active {
background: var(--gold);
color: var(--espresso);
border-color: var(--gold);
}
.mobile-menu__link--enquire {
padding: 10px 30px;
border: 1px solid var(--gold);
border-radius: 999px;
letter-spacing: 2px;
transition: background .4s var(--ease, ease), color .4s var(--ease, ease);
}
.mobile-menu__link--enquire:hover {
background: var(--gold);
color: var(--espresso);
}
/* ============================================================
4. CATEGORIAS — .lw-cats: 3 image-led cards (home teaser into
Private Homes / Vacation Rentals / Boutique Hospitality). Markup
contract for whoever wires this up (not part of A5):
Placeholder images (task brief): design-philosophy/hero.webp
(Private Homes), design-after/hero.webp (Vacation Rentals),
design-hospitality/hero.webp (Boutique Hospitality) — byte-identical
URLs already in site-leah/index.html:110/159, portfolio.html:125;
do not invent a new r2_key. Overlay tints with raw rgba(26,19,14,…)
(= --espresso), not a --theme-* token: it sits on a *photo*, must
read the same in both themes — same pattern as design.css:715 and
styles.css:2841/:3685. */
.lw-cats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 28px;
margin-top: 40px;
}
.lw-cats__card {
position: relative;
display: block;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: 2px;
}
.lw-cats__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s var(--ease, ease);
}
.lw-cats__card:hover .lw-cats__img,
.lw-cats__card:focus-visible .lw-cats__img {
transform: scale(1.03);
}
.lw-cats__overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 6px;
padding: 24px 22px;
background: linear-gradient(to top, rgba(26, 19, 14, .55) 0%, rgba(26, 19, 14, 0) 55%);
transition: background .6s var(--ease, ease);
}
.lw-cats__card:hover .lw-cats__overlay,
.lw-cats__card:focus-visible .lw-cats__overlay {
background: linear-gradient(to top, rgba(26, 19, 14, .72) 0%, rgba(26, 19, 14, 0) 60%);
}
.lw-cats__title {
font-family: 'Bodoni Moda', 'Times New Roman', serif;
font-size: 19px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--cream);
}
.lw-cats__sub {
font-family: 'Cormorant Garamond', serif;
font-size: 15px;
line-height: 1.5;
color: rgba(241, 233, 216, .78);
max-width: 30ch;
}
.lw-cats__cta {
margin-top: 4px;
font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
font-size: 9.5px;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--gold);
}
.lw-cats__card:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
}
/* ============================================================
5. WOLF & STONE — .lw-ws-hero (typographic, fixed espresso band,
same theme-independent treatment as .aeterna-section--green),
.lw-ws-grid (piece-category cards, hairline gold border),
.lw-ws-line (recurring brand phrase, centered micro-label). */
.lw-ws-hero {
text-align: center;
background: var(--espresso);
color: var(--cream);
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
}
.lw-ws-hero__eyebrow {
font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
font-size: 10px;
letter-spacing: .4em;
text-transform: uppercase;
color: var(--gold);
}
.lw-ws-hero__title {
font-family: 'Bodoni Moda', 'Times New Roman', serif;
font-size: clamp(32px, 6vw, 64px);
line-height: 1.15;
max-width: 18ch;
}
.lw-ws-hero__sub {
font-family: 'Cormorant Garamond', serif;
font-size: 18px;
line-height: 1.6;
color: rgba(241, 233, 216, .75);
max-width: 50ch;
}
.lw-ws-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 40px;
}
.lw-ws-grid__item {
padding: 28px 22px;
border: 1px solid var(--gold-22);
display: flex;
flex-direction: column;
gap: 8px;
transition: border-color .4s var(--ease, ease);
}
.lw-ws-grid__item:hover,
.lw-ws-grid__item:focus-within {
border-color: var(--gold-70);
}
.lw-ws-grid__label {
font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
font-size: 9.5px;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--theme-accent-muted);
}
.lw-ws-grid__title {
font-family: 'Bodoni Moda', 'Times New Roman', serif;
font-size: 20px;
color: var(--theme-ink);
}
.lw-ws-line {
text-align: center;
font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
font-size: 10px;
letter-spacing: .35em;
text-transform: uppercase;
color: var(--theme-accent);
padding: 32px 24px;
}
/* ============================================================
6. LISTAS DE SERVIÇO — .lw-list: two CSS columns desktop, one on
mobile. `break-inside: avoid` keeps an item from being cut across
the column gap; hairline separates every item except the very
first (in a 2-column flow, each column's own opening item still
keeps its top hairline — a continuous list read top-to-bottom,
then wrapped). */
.lw-list {
column-count: 2;
column-gap: 56px;
margin-top: 32px;
}
@media (max-width: 720px) {
.lw-list { column-count: 1; }
}
.lw-list__item {
break-inside: avoid;
padding: 16px 0;
border-top: 1px solid var(--theme-hair);
font-family: 'Cormorant Garamond', serif;
font-size: 17px;
line-height: 1.5;
color: var(--theme-ink-72);
}
.lw-list__item:first-child { border-top: 0; }
/* ============================================================
7. FORM ENQUIRE — .lw-form does not re-implement field/input/select/
textarea/button styling: the Enquire markup should carry BOTH
classes (class="design-form lw-form") to inherit .design-form's
treatment verbatim (design.css:32-135 — grid, focus states, submit
button, .design-form__feedback). .lw-form only adds what a
standalone Enquire page needs beyond that: .design-form normally
sits inside a `.d-split` column (which supplies its max-width); on
its own page it needs one of its own. */
.lw-form {
max-width: 640px;
margin: 40px auto 0;
}
/* ============================================================
8. HOME PREVIEWS + CLOSING CTA — .lw-preview (2-image split with a
caption, for a "peek into Design" / "peek into Wolf & Stone" home
teaser) and .lw-final-cta (centered block ahead of the footer). */
.lw-preview {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 40px;
}
@media (max-width: 640px) {
.lw-preview { grid-template-columns: 1fr; }
}
.lw-preview__item {
display: flex;
flex-direction: column;
gap: 12px;
}
.lw-preview__img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
}
.lw-preview__caption {
text-align: center;
font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
font-size: 10px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--theme-ink-45);
}
.lw-final-cta {
text-align: center;
max-width: 640px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.lw-final-cta__title {
font-family: 'Bodoni Moda', 'Times New Roman', serif;
font-size: clamp(26px, 4vw, 40px);
line-height: 1.2;
color: var(--theme-ink);
}
.lw-final-cta__sub {
font-family: 'Cormorant Garamond', serif;
font-size: 17px;
line-height: 1.6;
color: var(--theme-ink-72);
max-width: 46ch;
}
/* CTA button: reuse .cta/.btn-ghost/.btn-heritage (styles.css) inside
.lw-final-cta — no new button style, per "PRESERVAR identidade
visual". */
/* ============================================================
9. NAV COMPACTA (laptop, 8 itens) — the added "Learn" link pushes the
7-item nav (tuned by styles.css:1559-1578) past what a laptop-width
viewport can hold. Two independent measures, both gated by
`:has(a[href="/learn.html"])` on a header-level ancestor rather than
applied to every `.header__links`/`.header__menu` unconditionally:
leah.css loads on EVERY site-leah page, including wolf-and-stone.html
— the one page in this branch a sibling task still keeps at 7 items
(task brief: "NÃO tocar em wolf-and-stone.html") — and an unqualified
rule here would silently recompact/re-collapse ITS nav too, even
though its HTML was never touched. Gating on "does this header
actually contain the Learn link" makes both rules describe an
8-item nav structurally instead of matching every Leah page by
assumption; :has() is already used elsewhere in this tree
(design.css:47), so it's not a new technique for this codebase.
(a) 1024-1400px — shrink font-size/letter-spacing/gap on
.header__links. Both .header__link and .header__link--enquire set
their own letter-spacing at equal specificity; declaring both
explicitly here (rather than relying on source order alone) keeps
the compacted value predictable regardless of future reordering
upstream.
(b) 1081-1180px — a dead zone the old breakpoint pair
(max-width:1080 / min-width:1081, styles.css:1564/1574) never
covered: below 1081 it already collapses to the hamburger, at
1081 exactly it flips back to the 7-item-tuned desktop nav. With
an 8th item even the compacted (a) version doesn't reliably clear
that narrow a bar, so this range collapses to the hamburger too.
styles.css's `min-width:1081px { .header__menu{display:none
!important} }` rule is `!important` — this override must match
that (and now also out-specifies it via the :has() ancestor) or
lose the cascade tie despite loading later. */
@media (min-width: 1024px) and (max-width: 1400px) {
.header__nav:has(a[href="/learn.html"]) .header__links { gap: clamp(8px, 1.1vw, 16px); }
.header__nav:has(a[href="/learn.html"]) .header__link { font-size: 9.5px; letter-spacing: .2em; }
.header__nav:has(a[href="/learn.html"]) .header__link--enquire { letter-spacing: .2em; padding: 6px 14px; }
}
@media (min-width: 1081px) and (max-width: 1180px) {
.header__nav:has(a[href="/learn.html"]) .header__links { display: none; }
.header__nav:has(a[href="/learn.html"]) .header__menu { display: flex !important; }
}
/* ============================================================
10. LEARN (/learn.html) — .lw-form__consent mirrors the row-shaped
checkbox label styles.css's footer newsletter signup already uses
(.newsletter-signup__consent, styles.css:2744): `.design-form label`
is flex-column (label text above the field), the wrong shape for a
checkbox sitting beside running text. Themed for --theme-canvas-alt
(the #early-access section's background) rather than the footer.
The embedded inherits colour from --gold on hover only — default
state matches the surrounding copy so the sentence reads as one
voice, not a link fragment glued onto a label. */
.lw-form__consent {
flex-direction: row !important;
align-items: flex-start;
gap: 10px !important;
cursor: pointer;
}
/* `.design-form input` (design.css:56-71) styles every input as a full-
width text field — appearance:none, 14px/16px padding, 1px field
border. A checkbox needs none of that undone piecemeal: the
[type="checkbox"] attribute selector already out-specifies
`.design-form input` ((0,2,1) vs (0,1,1), no !important needed), so
every property below is a full, explicit reset rather than a diff
against the text-field styling. */
.lw-form__consent input[type="checkbox"] {
appearance: auto;
-webkit-appearance: auto;
-moz-appearance: auto;
width: 16px;
height: 16px;
padding: 0;
margin: 3px 0 0;
background: none;
border: 0;
border-radius: 0;
accent-color: var(--gold);
flex-shrink: 0;
}
.lw-form__consent span {
font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
font-size: 12px;
letter-spacing: normal;
text-transform: none;
line-height: 1.6;
color: var(--theme-ink-72);
}
.lw-form__consent a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
.lw-form__consent a:hover { color: var(--gold); }
/* Photo enquadramento per block — .d-split__media only gets an
aspect-ratio from design.css for the #philosophy/#hospitality/
#briefing ids it already owns (design.css:376-384); every other
.d-split instance needs its own or the absolutely-positioned image
inside collapses the box to 0 height (same reason §8's .lw-preview__img
sets its own aspect-ratio directly rather than relying on a parent).
Four different ratios here so the
4 Learn blocks vary their crop rather than repeating one — same photo
reused across the site, different frame each time (FOTOS rule).
Desktop-only, same as design.css's own #philosophy/#hospitality rules
(design.css:376-384) — and for the same reason theirs is (design.css
comment above its mobile block, ~line 394): an ID selector always
outranks the plain-class `.d-split__media{aspect-ratio:4/3}` mobile
override (design.css:410-421, the shared "photo always on top, 4:3 on
every split" S1 mobile spec) regardless of media query or source
order — ID specificity (1,1,0) beats a class selector (0,1,0)
unconditionally. Scoping these to min-width:821 keeps that rule the
ONLY aspect-ratio in effect on mobile, exactly like every other split
on this site; without the guard these 5 ids would silently override
the 4:3 mobile crop everywhere they're used. */
@media (min-width: 821px) {
#experiences .d-split__media { aspect-ratio: 4 / 5; }
#learn-c2 .d-split__media { aspect-ratio: 3 / 2; }
#learn-c3 .d-split__media { aspect-ratio: 1 / 1; }
#learn-c4 .d-split__media { aspect-ratio: 4 / 5; }
#learn-preview .d-split__media { aspect-ratio: 4 / 3; }
}