/* ==========================================================================
Aquaponia — Site stylesheet (APP-LEVEL, editable)
--------------------------------------------------------------------------
Layout + the 8 design-system components rebuilt as CSS classes, each one
mirroring the prop contract in design/aquaponia-design/components/**.d.ts
(the design folder is a repo-only source; it is NOT served — see .htaccess).
Every value that exists as a design token is consumed via var(--token);
nothing here hardcodes a palette hex or the section rhythm.
Load order (see index.html ):
1. css/tokens.css (tokens, copied from the design system by
scripts/sync-design.sh — do not edit by hand)
2. css/theme-v2.css (approved v2 token swap)
3. css/site.css (this file — layout + components)
========================================================================== */
/* ---------------------------------------------------------------------------
Base / reset + the fluid type scale from the original live site
(html font-size steps 16px → 20px at 1455px+, so every rem grows together)
--------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--text-body);
line-height: var(--leading-body);
color: var(--color-ink);
background: var(--color-surface-page);
}
/* `height: auto` is the mandatory companion to `max-width: 100%` once images
carry width/height attributes. Without it, max-width clamps the width while
the height attribute still applies as a presentational hint, and the image
renders stretched. Specificity 0,0,1 — every class rule below that sets its
own height (.lesson-card__thumb img, .video img, …) still wins. */
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5 { line-height: var(--leading-heading); }
a { color: inherit; }
strong { font-weight: var(--font-weight-bold); }
/* Applied type scale (rem values come from tokens/typography.css) */
h5 { font-size: var(--text-h5); }
h4 { font-size: var(--text-h4); }
h3 { font-size: var(--text-h3); }
h2 { font-size: var(--text-h2); }
h1 { font-size: var(--text-h1); }
.h1-big { font-size: var(--text-h1-big); }
.p-big { font-size: var(--text-body-lg); }
.p-small{ font-size: var(--text-small); }
@media only screen and (min-width: 1455px) {
html, body { font-size: 20px; }
h1 { font-size: 2.5rem; }
.h1-big { font-size: 3.125rem; }
}
@media only screen and (max-width: 767px) {
h5 { font-size: 1.125rem; }
h4 { font-size: 1.375rem; }
h3 { font-size: 1.5rem; }
h2 { font-size: 1.625rem; }
h1 { font-size: 1.75rem; }
.h1-big { font-size: 2rem; }
}
/* Accessibility: focus rings (handoff: add :focus-visible rings) */
:focus-visible {
outline: 3px solid var(--ocean-accent);
outline-offset: 2px;
border-radius: 4px;
}
/* Reduced motion: kill the smooth scroll + hover transforms */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { transition: none !important; }
.btn:hover, .card-bonus:hover, .pillar-card:hover { transform: none !important; }
}
/* ---------------------------------------------------------------------------
Section rhythm — percentage padding, verbatim from the design system
--------------------------------------------------------------------------- */
.section {
padding: var(--section-padding-block) var(--section-padding-inline);
}
.section--center { text-align: center; }
.section--white { background: var(--color-surface-page); }
.container-narrow { max-width: 700px; margin: 0 auto; }
/* ===========================================================================
COMPONENT 1 — Button (contract: components/buttons/Button.d.ts)
5 variants, always a pill; v2 adds a -2px lift + soft shadow on hover.
=========================================================================== */
.btn {
font-family: var(--font-sans);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
text-decoration: none;
border: 2px solid transparent;
border-radius: var(--radius-pill);
font-size: 17px;
font-weight: var(--font-weight-semibold);
letter-spacing: 0.01em;
padding: 13px 28px;
transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: var(--btn-hover-shadow);
}
.btn--primary { background: var(--guava); border-color: var(--guava); color: #fff; }
.btn--primary:hover { background: var(--guava-dark); border-color: var(--guava-dark); }
.btn--warm { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.btn--warm:hover { background: var(--leaf-dark); border-color: var(--leaf-dark); }
.btn--outline { background: transparent; border-color: rgba(255,255,255,.75); color: #fff; text-transform: uppercase; }
.btn--outline:hover { background: #fff; border-color: #fff; color: var(--mud); }
.btn--outline-muted { background: transparent; border-color: var(--mud); color: var(--mud); }
.btn--outline-muted:hover { background: var(--mud); border-color: var(--mud); color: #fff; }
.btn--small {
background: var(--guava);
border-color: var(--guava);
color: #fff;
font-size: 14px;
padding: 9px 18px;
border-radius: var(--radius-pill-sm);
}
.btn--small:hover { background: var(--guava-dark); border-color: var(--guava-dark); }
/* ===========================================================================
SECTION OPENER RHYTHM — the one pattern for every heading that opens a section
---------------------------------------------------------------------------
THE RULE, in three parts:
1. The SECTION owns the top space. A section opener never carries its own
margin-top — `padding-block: var(--section-padding-block)` on the section
is the whole story. This is the part that was broken: `.testimonials__
title`, `.professor__title` and `.bonuses__title` set no margin-top, so
they silently inherited the browser's `h2 { margin-top: 0.83em }` and sat
~27px lower than every other section title. That is why the gap above a
heading measured 72px in some sections and 99px in others.
2. Inside the block: eyebrow → title → subtitle, spaced by two tokens.
3. Below the block: ONE gap to the section's first real content
(--section-opener-gap). It measured 16 / 22 / 24 / 40 / 48 / 56 / 64px
across the page before this.
Tokens live in theme-v2.css (promote to tokens/spacing.css on re-export).
Applies to the heading block that OPENS a section. A heading that sits
inside a column of a split layout (.benefits__title, .how__title) is NOT a
section opener — it is aligned to its media instead, and is excluded below.
=========================================================================== */
.section-heading__title,
.testimonials__title,
.professor__title,
.bonuses__title,
.first-course__title,
.pricing__intro h2,
.curriculum__inside-title {
margin-top: 0;
}
/* ===========================================================================
COMPONENT 2 — SectionHeading (contract: components/content/SectionHeading.d.ts)
The canonical section opener — the ad-hoc openers below are aligned to it.
=========================================================================== */
.section-heading { max-width: 700px; margin: 0 auto var(--section-opener-gap); text-align: center; }
.section-heading--left { text-align: left; margin-inline: 0; }
.section-heading__eyebrow {
margin: 0 0 var(--section-opener-eyebrow-gap);
font-size: 13.5px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.section-heading__title {
margin: 0 0 var(--section-opener-title-gap);
font-size: var(--text-h1-big);
font-weight: var(--font-weight-extrabold);
line-height: 1.1;
letter-spacing: -0.01em;
}
/* Last element in the block — the block's own margin-bottom owns the gap. */
.section-heading__subtitle { margin: 0; font-size: 18.5px; line-height: 1.55; }
.section-heading__title:last-child { margin-bottom: 0; }
/* tone=dark: white title, muted-on-dark subtitle, light-leaf eyebrow */
.section-heading--dark .section-heading__eyebrow { color: var(--ocean-300); }
.section-heading--dark .section-heading__title { color: #fff; }
.section-heading--dark .section-heading__subtitle { color: var(--color-ink-muted-on-dark); }
/* tone=light: mud title, muted-on-light subtitle, guava eyebrow */
.section-heading--light .section-heading__eyebrow { color: var(--guava-dark); }
.section-heading--light .section-heading__title { color: var(--mud); }
.section-heading--light .section-heading__subtitle { color: var(--color-ink-muted-on-light); }
/* ===========================================================================
COMPONENT 3 — IconListItem (contract: components/content/IconListItem.d.ts)
=========================================================================== */
.icon-list { display: flex; flex-direction: column; gap: 18px; }
.icon-list__item { display: flex; gap: 16px; align-items: flex-start; }
.icon-list__icon {
flex-shrink: 0;
width: 34px; height: 34px;
border-radius: var(--radius-sm);
background: var(--guava);
display: flex; align-items: center; justify-content: center;
color: #fff;
}
.icon-list__icon svg { width: 18px; height: 18px; }
.icon-list__text { font-size: 16px; line-height: 1.5; color: var(--mud); padding-top: 5px; }
.icon-list__text--dark { color: #fff; }
/* ===========================================================================
COMPONENT 4 — BenefitCard (contract: components/cards/BenefitCard.d.ts)
=========================================================================== */
.card-benefit {
border: 1px solid var(--mud);
border-radius: var(--radius-md);
padding: 15px;
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: 6px; width: 160px;
}
.card-benefit__label { font-size: 13px; font-weight: var(--font-weight-bold); color: var(--mud); letter-spacing: .04em; }
.card-benefit__desc { font-size: 15.5px; color: var(--mud); }
/* ===========================================================================
COMPONENT 5 — PricingFeatureCard (contract: components/cards/PricingFeatureCard.d.ts)
=========================================================================== */
.card-pricing-feature {
border: 1px solid var(--mud);
border-radius: var(--radius-lg);
padding: 20px;
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: 15px;
}
.card-pricing-feature__icon { color: var(--ocean-700); }
.card-pricing-feature__icon svg { width: 40px; height: 40px; }
.card-pricing-feature__text { font-size: 16px; color: var(--mud); line-height: 1.4; }
/* ===========================================================================
COMPONENT 6 — TestimonialCard (contract: components/cards/TestimonialCard.d.ts)
=========================================================================== */
.card-testimonial { padding: 15px; }
.card-testimonial__head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.card-testimonial__avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.card-testimonial__name { font-weight: var(--font-weight-semibold); font-size: 15px; color: var(--mud); }
.card-testimonial__role { font-size: 12.5px; color: var(--dim-grey); }
.card-testimonial__quote { margin: 0; font-size: 14px; line-height: 1.5; color: var(--mud); }
/* ===========================================================================
COMPONENT 7 — BonusCard, v2 treatment (contract: components/cards/BonusCard.d.ts)
=========================================================================== */
.card-bonus {
background: #fff;
border-radius: var(--radius-lg);
overflow: hidden;
text-align: left;
display: flex; flex-direction: column;
transition: transform .22s ease, box-shadow .22s ease;
box-shadow: var(--shadow-card-rest);
}
.card-bonus:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-lift); }
.card-bonus__media { position: relative; aspect-ratio: 16 / 10; }
.card-bonus__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-bonus__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,43,54,0) 35%, rgba(12,43,54,.88) 100%); }
.card-bonus__tag {
position: absolute; top: 14px; left: 14px;
background: var(--guava); color: #fff;
font-size: 11px; font-weight: var(--font-weight-extrabold); letter-spacing: .12em;
padding: 6px 13px; border-radius: 999px;
}
.card-bonus__price {
position: absolute; left: 16px; right: 16px; bottom: 13px;
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.card-bonus__price-old { color: rgba(255,255,255,.75); text-decoration: line-through; font-size: 15px; }
.card-bonus__price-free { color: #a5d96c; font-weight: var(--font-weight-extrabold); font-size: 12.5px; letter-spacing: .08em; white-space: nowrap; }
.card-bonus__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.card-bonus__title { margin: 0; font-size: 18px; font-weight: var(--font-weight-extrabold); color: var(--mud); line-height: 1.3; }
.card-bonus__desc { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--color-ink-muted-on-light); }
/* ===========================================================================
COMPONENT 8 — Tabs (contract: components/navigation/Tabs.d.ts)
=========================================================================== */
.tabs { width: 100%; }
.tabs__list { display: flex; }
.tabs__tab {
flex: 1; text-align: center; text-transform: uppercase;
font-weight: var(--font-weight-bold); font-size: 15px;
padding: 18px 10px; cursor: pointer; color: #fff;
border: 3px solid var(--dark-moss); background: var(--mud);
font-family: var(--font-sans);
transition: background-color .2s ease;
}
.tabs__tab[aria-selected="true"] { background: var(--dark-moss); }
.tabs__panel { background: var(--dark-moss); padding: 5%; }
.tabs__panel[hidden] { display: none; }
.tabs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; }
.tabs__lesson { text-align: center; padding: 5%; }
.tabs__lesson h3 { color: #fff; font-weight: var(--font-weight-regular); font-size: 18px; margin: 0 0 20px; }
.tabs__lesson p { color: #fff; margin: 0; font-size: 14px; }
/* ===========================================================================
Pillar cards — v2 "Os 3 Pilares" (design: v2.jsx PilaresCardsV2)
=========================================================================== */
.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.pillar-card {
background: rgba(255,255,255,.045);
border: 1px solid rgba(255,255,255,.09);
border-radius: 24px;
padding: 38px 32px;
transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.pillar-card:hover { background: rgba(255,255,255,.07); transform: translateY(-6px); }
.pillar-card:hover { border-color: var(--pillar-accent); }
.pillar-card__num {
width: 52px; height: 52px; border-radius: 50%;
background: var(--pillar-accent); color: var(--dark-moss);
display: flex; align-items: center; justify-content: center;
font-size: 19px; font-weight: var(--font-weight-extrabold); margin-bottom: 24px;
}
.pillar-card__eyebrow { margin: 0 0 8px; font-size: 12.5px; font-weight: var(--font-weight-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--pillar-accent); }
.pillar-card__title { margin: 0 0 14px; font-size: 24px; font-weight: var(--font-weight-extrabold); color: #fff; }
.pillar-card__body { margin: 0; font-size: 15.5px; line-height: 1.6; color: #c2cbc7; }
/* ===========================================================================
Video embed — click-to-load YouTube (lazy)
=========================================================================== */
.video {
position: relative; display: block; aspect-ratio: 16 / 9;
border-radius: 10px; overflow: hidden; background: #000; cursor: pointer;
}
.video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__play {
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
width: 70px; height: 70px; border-radius: 50%;
background: rgba(0,0,0,.55); color: #fff;
display: flex; align-items: center; justify-content: center;
transition: background-color .2s ease;
}
.video:hover .video__play { background: rgba(0,0,0,.75); }
.video__play svg { width: 30px; height: 30px; margin-left: 4px; }
/* ===========================================================================
SECTIONS
=========================================================================== */
/* Hero — split editorial (design system: components/sections/Hero).
Hard vertical division, no fade between the halves: copy column left on the
flat --hero-bg surface, full-bleed motion right. */
.hero { display: grid; grid-template-columns: 1.02fr 1fr; background: var(--hero-bg); min-height: 720px; }
.hero__copy { display: flex; flex-direction: column; padding: 46px 60px 62px; }
/* align-self is load-bearing: .hero__copy is a column flex container, so the
default `stretch` blows the logo out to the full column width and the
width:auto never gets a chance to preserve the ratio. */
.hero__logo { height: 46px; width: auto; align-self: flex-start; }
/* Pushes the copy block to the bottom of the column, under the lone logo. */
.hero__inner { margin-top: auto; padding-top: 52px; max-width: 580px; }
.hero__eyebrow {
display: inline-flex; align-items: center; gap: 10px;
color: var(--leaf-light); font-weight: var(--font-weight-bold);
font-size: 14px; letter-spacing: .14em; margin: 0 0 20px;
}
.hero__eyebrow::before { content: ""; width: 30px; height: 2px; background: currentColor; }
.hero__title { color: #fff; font-size: var(--text-h1-big); font-weight: var(--font-weight-extrabold); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 20px; }
.hero__title .hl { color: var(--guava); }
.hero__sub { color: rgba(255,255,255,.92); font-weight: var(--font-weight-regular); font-size: 18px; line-height: 1.55; margin: 0 0 30px; max-width: 540px; }
.hero__cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.hero__proof { display: flex; align-items: center; gap: 12px; margin: 0; color: rgba(255,255,255,.72); font-size: 14.5px; font-weight: var(--font-weight-medium); }
.hero__avatars { display: flex; }
.hero__avatars img {
width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
border: 2px solid var(--ocean-700); margin-left: -11px;
}
.hero__avatars img:first-child { margin-left: 0; }
.hero__media { position: relative; overflow: hidden; }
/* The width/height attributes on .hero__photo give the intrinsic ratio, but the
element is absolutely sized to fill the column and object-fit does the
cropping — so `height` here must win over the base `img { height: auto }`. */
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block; }
/* The hero collapses earlier than the rest of the page (1024 vs the site-wide
768): two columns of this headline size go cramped well before tablet width,
and the CTAs get pushed under the fold. Copy first, motion as a banner. */
@media only screen and (max-width: 1023px) {
.hero { grid-template-columns: 1fr; min-height: 0; }
.hero__inner { max-width: 100%; }
/* Stacked, the media becomes a full-width band. A fixed short height would
crop this portrait photo down to a strip across the subject's forehead, so
the band takes the image's own ratio instead and shows the whole frame —
capped so it can never eat the entire viewport on a narrow phone. */
.hero__media { height: auto; aspect-ratio: 1100 / 1214; max-height: 62vh; }
}
/* Color strip */
.color-strip { height: 6px; background: var(--strip-bg); }
/* Benefits (58 / 36 split) */
.benefits { display: flex; gap: 40px; align-items: center; }
.benefits__text { flex: 0 0 58%; }
/* COLUMN heading, not a section opener: it is centred against the media in a
split, so the section padding does not own its top space. Internal rhythm
still uses the opener tokens so no magic numbers survive. */
.benefits__title { color: var(--mud); font-size: var(--text-h1); font-weight: var(--font-weight-extrabold); margin: 0 0 var(--section-opener-title-gap); }
.benefits__lead { color: var(--mud); font-size: 16px; line-height: 1.4; margin-bottom: 24px; }
.benefits__media { flex: 0 0 36%; }
/* Pilares (v2 dark band) */
.pilares { background: var(--pilares-photo-bg, var(--pilares-bg)); padding: var(--section-padding-block) var(--section-padding-inline); }
.pilares__cta { text-align: center; margin-top: 44px; }
/* How it works */
/* Section B — modernized: video-lead 55/45 split; container query (howstage)
stacks the video above the text by the section's OWN width. */
/* Inline padding stays narrower than the token: this split needs a wider
media column. Block padding uses the section token like everything else. */
.how { padding: var(--section-padding-block) 6%; background: var(--color-surface-page); container-type: inline-size; container-name: howstage; }
.how__row { display: flex; gap: 56px; align-items: center; }
.how__media { flex: 0 0 55%; }
.how__video { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 24px 50px -20px rgba(28,34,34,.35); }
.how__video-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 22px 16px; background: linear-gradient(0deg, rgba(0,0,0,.75), transparent); pointer-events: none; }
.how__video-caption span { color: #fff; font-size: 14.5px; font-weight: var(--font-weight-bold); }
.how__text { flex: 1; }
.how__eyebrow { display: inline-block; background: var(--frog); color: var(--mud); font-size: 11.5px; font-weight: var(--font-weight-bold); letter-spacing: .06em; text-transform: uppercase; padding: 5px 13px; border-radius: var(--radius-pill); margin-bottom: 16px; }
/* COLUMN heading, not a section opener — see .benefits__title. */
.how__title { font-size: 34px; font-weight: var(--font-weight-extrabold); color: var(--mud); line-height: 1.15; margin: 0 0 var(--section-opener-title-gap); letter-spacing: -0.01em; }
.how__lead { color: var(--color-ink-muted-on-light); font-size: 16px; line-height: 1.5; margin: 0 0 26px; max-width: 460px; }
.how__lead strong { color: var(--mud); }
.how__facts { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 28px; }
.how__fact { display: flex; flex-direction: column; }
.how__fact-num { font-size: 16px; font-weight: var(--font-weight-extrabold); color: var(--mud); }
.how__fact-label { font-size: 13px; color: var(--dim-grey); }
.how__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
@container howstage (max-width: 640px) {
.how__row { flex-direction: column; gap: 28px; }
.how__media { flex: 1 1 auto; width: 100%; }
.how__text { width: 100%; }
}
/* Curriculum (ocean band) */
/* Section A — modernized: same dark radial stage as the "3 Pilares" section.
Chip-filtered LessonCard grid replaces the old Tabs. */
.curriculum { background: var(--pilares-bg); padding: var(--section-padding-block) var(--section-padding-inline); text-align: center; }
.curriculum__cta { margin-top: 48px; }
.curriculum__inside { margin-top: 6%; }
.curriculum__inside-eyebrow { margin: 0 0 var(--section-opener-eyebrow-gap); font-size: 15px; font-weight: var(--font-weight-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--ocean-300); }
.curriculum__inside-title { color: #fff; font-weight: var(--font-weight-extrabold); font-size: var(--text-h1); margin: 0 0 var(--section-opener-gap); }
.curriculum__video { max-width: 820px; margin: 0 auto; }
/* ---- LessonTypeChip filter row (components/cards/LessonTypeChip) ----
Per-pillar accent when active; outline pill on the dark stage otherwise. ---- */
/* Top gap is owned by the section opener (.section-heading margin-bottom). */
.lesson-filter { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0 0 36px; }
.lesson-chip { font-family: inherit; display: inline-flex; align-items: center; padding: 15px 33px; border: 1.5px solid var(--chip-accent); border-radius: var(--radius-pill); font-size: 22px; font-weight: var(--font-weight-semibold); cursor: pointer; background: var(--chip-accent); color: var(--dark-moss); transition: transform .2s ease, filter .2s ease; }
.lesson-chip:hover { filter: brightness(1.07); }
.lesson-chip.is-active { animation: chip-pulse 1.6s ease-in-out infinite; }
@keyframes chip-pulse {
0%, 100% { box-shadow: 0 0 9px 1px color-mix(in srgb, var(--chip-accent) 40%, transparent); }
50% { box-shadow: 0 0 24px 8px color-mix(in srgb, var(--chip-accent) 80%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
.lesson-chip.is-active { animation: none; box-shadow: 0 0 16px 4px color-mix(in srgb, var(--chip-accent) 60%, transparent); }
}
.lesson-chip--circuitos { --chip-accent: var(--ocean-accent); }
.lesson-chip--ciclagem { --chip-accent: var(--guava); }
.lesson-chip--cuidados { --chip-accent: var(--leaf-light); }
/* v2 remaps --banana to leaf-green, so pin the canonical banana yellow here for the "amarelo" bônus chip */
.lesson-chip--bonus { --chip-accent: #ffce32; }
/* ---- Lesson grid + LessonCard (components/cards/LessonCard) ---- */
.lesson-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 24px; max-width: 1200px; margin: 0 auto; text-align: left; }
.lesson-card { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card-rest); transition: box-shadow .2s ease; }
.lesson-card:hover { box-shadow: var(--shadow-card-lift); }
.lesson-card__thumb { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-md) var(--radius-md) 0 0; overflow: hidden; background: var(--dark-moss); }
.lesson-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lesson-card__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.45); background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 12px, rgba(255,255,255,.09) 12px 24px), var(--dark-moss); }
.lesson-card__placeholder svg { width: 34px; height: 34px; }
.lesson-card__chip { position: absolute; top: 10px; left: 10px; background: var(--mud); color: #fff; font-size: 11px; font-weight: var(--font-weight-bold); letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill); }
.lesson-card--bonus .lesson-card__chip { background: var(--goiaba); }
.lesson-card__badge { position: absolute; top: 10px; right: 10px; background: var(--banana); color: var(--mud); font-size: 10.5px; font-weight: var(--font-weight-extrabold); letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill); }
.lesson-card__duration { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,.72); color: #fff; font-size: 12px; font-weight: var(--font-weight-semibold); padding: 3px 9px; border-radius: var(--radius-sm); }
.lesson-card__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.lesson-card__title { margin: 0; font-size: 16px; font-weight: var(--font-weight-extrabold); color: var(--mud); line-height: 1.3; }
.lesson-card__rating { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: var(--font-weight-bold); color: var(--mud); }
.lesson-card__star { color: var(--orange); }
.lesson-card__desc { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--color-ink-muted-on-light); }
.lesson-card__price { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.lesson-card__price s { font-size: 13px; color: var(--dim-grey); }
.lesson-card__free { background: var(--frog); color: var(--mud); font-size: 11px; font-weight: var(--font-weight-bold); letter-spacing: .05em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
/* Testimonials */
/* Section opener — see SECTION OPENER RHYTHM. */
.testimonials__title { font-size: var(--text-h1); font-weight: var(--font-weight-extrabold); color: var(--mud); margin-bottom: var(--section-opener-title-gap); }
.testimonials__title .hl { color: var(--leaf-on-white); }
.testimonials__lead { color: var(--mud); font-size: 16px; max-width: 700px; margin: 0 auto var(--section-opener-gap); }
/* ---- TestimonialCarousel (components/navigation) + QuoteCard (components/cards).
Progressive enhancement: without JS the track wraps into a responsive grid
(arrows/dots hidden); site.js adds `.is-ready` to switch to carousel mode. ---- */
.carousel-block { max-width: 1320px; margin: 0 auto; }
.carousel__stage { position: relative; }
.carousel__viewport { overflow: hidden; }
.carousel__track { display: flex; align-items: stretch; flex-wrap: wrap; }
.carousel-block.is-ready .carousel__track { flex-wrap: nowrap; }
.carousel__slide { flex: 0 0 100%; padding: 4px 12px; box-sizing: border-box; }
@media (min-width: 760px) { .carousel-block:not(.is-ready) .carousel__slide { flex-basis: 50%; } }
@media (min-width: 1280px) { .carousel-block:not(.is-ready) .carousel__slide { flex-basis: 25%; } }
.carousel__arrow {
position: absolute; top: 50%; transform: translateY(-50%);
width: 44px; height: 44px; border-radius: 50%;
border: 1px solid rgba(62,75,76,.18); background: #fff; color: var(--mud);
font-size: 22px; line-height: 1; display: none; align-items: center; justify-content: center;
cursor: pointer; box-shadow: 0 6px 16px -8px rgba(28,34,34,.25); z-index: 2;
transition: color .2s ease;
}
.carousel-block.is-ready .carousel__arrow { display: flex; }
.carousel__arrow--prev { left: -20px; }
.carousel__arrow--next { right: -20px; }
.carousel__arrow:hover { color: var(--orange); }
.carousel__dots { display: none; justify-content: center; gap: 8px; margin-top: 28px; }
.carousel-block.is-ready .carousel__dots { display: flex; }
.carousel__dot { width: 8px; height: 8px; border-radius: var(--radius-pill); border: none; padding: 0; cursor: pointer; background: rgba(62,75,76,.25); transition: all .25s ease; }
.carousel__dot--active { width: 22px; background: var(--orange); }
.carousel__hint { display: none; margin-top: 14px; font-size: 12.5px; color: var(--dim-grey); }
.carousel-block.is-ready .carousel__hint { display: block; }
.quote-card { text-align: left; border: 1px solid rgba(62,75,76,.14); border-radius: var(--radius-md); padding: 28px 26px; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; background: #fff; margin: 0; }
.quote-card__mark { font-family: Georgia, serif; font-size: 44px; line-height: 1; color: var(--mud); margin-bottom: 10px; }
.quote-card__quote { margin: 0 0 24px; font-size: 15px; line-height: 1.55; color: var(--mud); flex: 1; }
.quote-card__foot { display: flex; align-items: center; gap: 12px; }
.quote-card__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.quote-card__initials { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: var(--font-weight-bold); }
.quote-card__initials--1 { background: var(--orange); }
.quote-card__initials--2 { background: var(--moss); }
.quote-card__initials--3 { background: var(--goiaba); }
.quote-card__initials--4 { background: var(--dark-moss); }
.quote-card__name { font-size: 14.5px; font-weight: var(--font-weight-bold); color: var(--mud); }
.quote-card__role { font-size: 12.5px; color: var(--dim-grey); }
/* Bonuses (leaf band) */
.bonuses { background: var(--leaf); padding: var(--section-padding-block) var(--section-padding-inline); text-align: center; }
/* Section opener — see SECTION OPENER RHYTHM. */
.bonuses__title { font-size: var(--text-h1); font-weight: var(--font-weight-extrabold); color: var(--mud); margin-bottom: var(--section-opener-gap); }
.bonuses__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bonuses__cert { margin-top: 30px; margin-bottom: 24px; font-size: 20px; color: var(--mud); }
/* Professor — alternating photo+bio rows */
/* Section opener — see SECTION OPENER RHYTHM. */
.professor__title { text-align: center; font-size: var(--text-h1); font-weight: var(--font-weight-extrabold); color: var(--guava-dark); margin-bottom: var(--section-opener-gap); }
.professor__row { display: flex; gap: 48px; align-items: center; }
.professor__row + .professor__row { margin-top: 56px; }
.professor__row--reverse { flex-direction: row-reverse; }
.professor__photo { flex: 1 1 0; min-width: 0; }
.professor__photo img { border-radius: 12px; width: 100%; display: block; }
/* Two rectangular photos stacked into one square block */
.professor__photo--stack { display: flex; flex-direction: column; gap: 10px; }
.professor__photo--stack img { aspect-ratio: 2 / 1; object-fit: cover; }
.professor__bio { flex: 1 1 0; min-width: 0; }
/* Was `.professor__bio h4`. That copy is bio prose, not a section label — the
regular font-weight gave it away — so it is a now. Same declarations,
identical rendering; it just leaves the heading outline. */
.professor__bio p { font-weight: var(--font-weight-regular); font-size: 22px; color: var(--mud); margin: 0 0 24px; }
/* Closing testimonial quote card (photo + quote-mark glyph, left-aligned) */
.pm-photo {
display: block; box-sizing: border-box; object-fit: cover; flex-shrink: 0;
border-radius: 10px;
box-shadow: 0 16px 34px -14px rgba(29, 41, 42, .55);
}
.pm-photo--avatar { width: 300px; aspect-ratio: 1 / 1; }
.pm-quote { display: flex; gap: 56px; align-items: center; margin-top: 64px; padding-top: 56px; border-top: 1px solid #e7e9e5; }
.pm-quote-mark { font-size: 64px; line-height: 1; color: var(--frog); font-weight: var(--font-weight-extrabold); margin: 0 0 8px; }
.pm-quote-text { font-size: 24px; font-weight: var(--font-weight-regular); color: var(--mud); margin: 0; line-height: 1.45; }
.pm-quote-name { margin-top: 20px; font-size: 13.5px; font-weight: var(--font-weight-bold); color: var(--color-ink-muted-on-light); letter-spacing: .02em; }
/* ===========================================================================
PRICING (section D — modernized "Matrículas abertas").
Centered header on a dark gradient → white 58/42 value|price panel →
PaymentMethods trust row. Container query (prstage) stacks the split by the
section's OWN width, not the viewport.
=========================================================================== */
.pricing {
background:
radial-gradient(ellipse 900px 500px at 50% 0%, rgba(255,255,255,.06), transparent 60%),
linear-gradient(165deg, var(--dark-moss), var(--moss));
/* Inline stays narrower than the token (the value/price split needs the
width); block uses the section token so it gets the 40px floor. */
padding: var(--section-padding-block) 8%;
container-type: inline-size;
container-name: prstage;
}
/* Section opener — see SECTION OPENER RHYTHM. */
.pricing__intro { text-align: center; max-width: 700px; margin: 0 auto var(--section-opener-gap); }
.pricing__intro h2 { margin: 0 0 var(--section-opener-title-gap); font-weight: var(--font-weight-extrabold); line-height: 1.15; color: #fff; }
.pricing__intro p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--color-ink-muted-on-dark); }
.pricing__intro strong { color: #fff; }
.pricing__panel {
max-width: 1080px; margin: 0 auto; background: #fff;
border-radius: var(--radius-lg); overflow: hidden; display: flex;
box-shadow: 0 30px 60px -24px rgba(12,20,18,.4);
}
.pricing__value { flex: 1 1 58%; padding: 44px; display: flex; flex-direction: column; gap: 20px; }
.pricing__value-title { margin: 0 0 4px; font-size: 19px; font-weight: var(--font-weight-extrabold); color: var(--mud); }
.pricing__price { flex: 0 0 42%; background: var(--dark-moss); padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; gap: 14px; text-align: center; }
.pricing__price-promo { margin: 0 0 6px; font-size: 21px; font-weight: var(--font-weight-extrabold); color: #fff; }
.pricing__price-old { font-size: 16px; color: rgba(255,255,255,.55); }
.pricing__price-now { font-size: 34px; font-weight: var(--font-weight-extrabold); color: #fff; line-height: 1.15; }
.pricing__price-cash { font-size: 16px; font-weight: var(--font-weight-semibold); color: var(--frog); }
.pricing__price .btn { width: 100%; justify-content: center; margin-top: 8px; }
/* ---- ValueRow (components/content/ValueRow) — icon-chip + text + optional
bônus pricing pill (same "Grátis para alunos" treatment as LessonCard) ---- */
.value-row { display: flex; align-items: flex-start; gap: 14px; }
.value-row__icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--frog); color: var(--mud); display: flex; align-items: center; justify-content: center; }
.value-row__icon svg { width: 16px; height: 16px; }
/* min-width:0 is load-bearing. A flex item will not shrink below its
min-content width, and this one contains the nowrap "GRÁTIS PARA ALUNOS"
pill — so without it the text column refuses to narrow and spills past the
card's right padding, leaving the left inset visibly larger than the right.
Same trap applies to any flex child holding nowrap content. */
.value-row__text { min-width: 0; flex: 1 1 auto; font-size: 16px; line-height: 1.45; color: var(--mud); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.value-row__was { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.value-row__was s { font-size: 13px; color: var(--dim-grey); white-space: nowrap; }
.value-row__free { background: var(--frog); color: var(--mud); font-size: 11px; font-weight: var(--font-weight-bold); letter-spacing: .05em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
/* ---- ReassuranceLine (components/content/ReassuranceLine) ----
Light-bg default (used in section B); the dark price panel below scopes
its own lighter text + brighter check + centering. ---- */
.reassurance-line { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13.5px; color: var(--dim-grey); }
.reassurance-line__check { color: var(--leaf-on-white); font-weight: var(--font-weight-extrabold); }
.pricing__price .reassurance-line { justify-content: center; color: var(--color-ink-muted-on-dark); }
.pricing__price .reassurance-line__check { color: var(--frog); }
/* ---- PaymentMethods (components/content/PaymentMethods) — text-wordmark
badges in real network BRAND colors (external identifiers, not tokens).
PIX leads as the dominant Brazilian rail. Row wraps via flex-wrap. ---- */
.payment-methods { max-width: 700px; margin: 56px auto 0; text-align: center; }
.payment-methods__title { margin: 0 0 10px; font-size: 26px; font-weight: var(--font-weight-extrabold); color: #fff; }
.payment-methods__desc { margin: 0 0 26px; font-size: 15.5px; line-height: 1.5; color: var(--color-ink-muted-on-dark); }
.payment-methods__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.payment-methods__badge {
display: flex; align-items: center; justify-content: center;
height: 52px; min-width: 92px; padding: 0 16px;
background: #fff; border: 1px solid rgba(28,34,34,.12); border-radius: var(--radius-sm);
font-size: 15px; font-weight: var(--font-weight-extrabold); color: var(--mud); white-space: nowrap;
}
.payment-methods__badge--pix { color: #32bcad; }
.payment-methods__badge--master { color: #eb001b; font-style: italic; }
.payment-methods__badge--visa { color: #1a1f71; font-style: italic; }
.payment-methods__badge--amex { color: #016fd0; font-size: 12.5px; font-weight: var(--font-weight-bold); }
.payment-methods__badge--elo { color: #000; }
.payment-methods__badge--hipercard { color: #c8102e; font-style: italic; }
.payment-methods__badge--hiper { color: #ff6600; font-style: italic; }
.payment-methods__badge--diners { color: #004b93; font-size: 12px; }
.payment-methods__badge--boleto { color: #000; letter-spacing: 2px; font-family: ui-monospace, monospace; }
.payment-methods__badge--paypal { color: #003087; }
/* Section D stacks via container query — the section's own width, not viewport */
@container prstage (max-width: 640px) {
.pricing__panel { flex-direction: column; }
.pricing__value, .pricing__price { flex: 1 1 auto; width: 100%; }
}
/* First course */
.first-course { display: flex; gap: 48px; align-items: flex-start; }
.first-course__left { flex: 0 0 42%; }
/* Was `.first-course__left h1`. The heading is now an
(a page should have
one h1), so the selector moves to the class — same declarations, so the
approved design is byte-for-byte unchanged. Specificity still beats the bare
h1/h2 type-scale rules at every breakpoint, exactly as before. */
/* Section opener — see SECTION OPENER RHYTHM. */
.first-course__title { text-align: center; color: var(--mud); font-weight: var(--font-weight-extrabold); font-size: var(--text-h1); margin: 0 0 var(--section-opener-gap); }
.first-course__right { flex: 1; }
/* Was `.first-course__right h5`. These are real subheadings under the section's
h2, so they are h3 now — the level matches the outline instead of jumping
h2→h5. font-size stays pinned at 18px, so nothing moves visually. */
.first-course__right h3 { color: var(--mud); font-weight: var(--font-weight-bold); font-size: 18px; margin: 0 0 14px; }
.first-course__steps { display: flex; flex-direction: column; gap: 14px; }
.first-course__steps p { margin: 0; color: var(--mud); font-size: 16px; line-height: 1.5; }
.first-course__contact { margin-top: 30px; }
/* ===========================================================================
FOOTER. Short decorative full-bleed photo band (no text/CTA): bottom edge
solid, top fades into the page background (#fff) so the photo reads as an
atmospheric close above the credit row. Credit row unchanged.
=========================================================================== */
.footer-band { position: relative; width: 100%; height: 440px; overflow: hidden; }
.footer-band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.footer-band__fade { position: absolute; inset: 0; background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0) 55%); pointer-events: none; }
/* Same floor as the sections: 1.5% resolves against WIDTH, so on a phone it
collapsed to 6px and the credit row hugged the photo band above it. */
/* The footer is a slim credit row, not a content section: it takes the 40px
floor but NOT the full 5% rhythm, which would triple its height on desktop.
1.5% alone collapsed to 6px on a phone and made the credit row hug the
photo band above it. */
.footer { padding: max(40px, 1.5%) var(--section-padding-inline); display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.footer__logo { height: 34px; width: auto; }
.footer__legal { font-size: 12px; color: var(--dim-grey); text-align: center; max-width: 460px; margin: 0; }
.footer__credit { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim-grey); }
.footer__credit img { height: 24px; width: auto; }
/* ===========================================================================
RESPONSIVE — stack columns < 768px (prototypes are desktop 1440)
=========================================================================== */
@media only screen and (max-width: 767px) {
.hero__copy { padding: 40px 24px 44px; }
.hero__inner { padding-top: 36px; }
.hero__sub { font-size: 16.5px; }
.hero__cta .btn { flex: 1 1 100%; }
.benefits, .professor__row, .first-course { flex-direction: column; }
.benefits__text, .benefits__media,
.professor__photo, .professor__bio,
.first-course__left, .first-course__right { flex: 1 1 auto; width: 100%; }
.pillar-grid, .bonuses__grid { grid-template-columns: 1fr; }
.tabs__list { flex-direction: column; }
.tabs__grid { grid-template-columns: 1fr; }
.pm-quote { flex-direction: column; align-items: flex-start; gap: 28px; }
.pm-photo--avatar { width: 100%; }
.footer { flex-direction: column; text-align: center; }
}