/* ========================================================================== 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); } img { max-width: 100%; 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); } /* =========================================================================== COMPONENT 2 — SectionHeading (contract: components/content/SectionHeading.d.ts) =========================================================================== */ .section-heading { max-width: 700px; margin: 0 auto; text-align: center; } .section-heading--left { text-align: left; margin: 0; } .section-heading__eyebrow { margin: 0 0 16px; font-size: 13.5px; font-weight: var(--font-weight-bold); letter-spacing: 0.14em; text-transform: uppercase; } .section-heading__title { margin: 0 0 18px; font-size: var(--text-h1-big); font-weight: var(--font-weight-extrabold); line-height: 1.1; letter-spacing: -0.01em; } .section-heading__subtitle { margin: 0; font-size: 18.5px; line-height: 1.55; } /* 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 */ .hero { background: var(--hero-bg); padding: 3% 10% 7%; } .hero__bar { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 24px; } .hero__logo { height: 46px; } .hero__inner { text-align: center; max-width: 70%; margin: 4% auto 2%; } .hero__eyebrow { color: rgba(255,255,255,.92); font-weight: var(--font-weight-bold); font-size: 14px; letter-spacing: .14em; margin: 0 0 14px; text-shadow: 0 1px 8px rgba(12,43,54,.5); } .hero__title { color: #fff; font-size: var(--text-h1-big); font-weight: var(--font-weight-extrabold); line-height: 1.2; margin: 0 0 10px; } .hero__title .hl { color: var(--guava); } .hero__sub { color: rgba(255,255,255,.92); font-weight: var(--font-weight-regular); font-size: 20px; line-height: 1.4; margin: 0 0 22px; } /* 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%; } .benefits__title { color: var(--mud); font-size: var(--text-h1); font-weight: var(--font-weight-extrabold); margin: 15px 0 30px; } .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-bg); padding: 5.5% 10%; } .pilares__cta { text-align: center; margin-top: 44px; } /* How it works */ .how__title { font-size: var(--text-h1); font-weight: var(--font-weight-extrabold); color: var(--guava-dark); margin: 0 0 20px; } .how__lead { color: var(--mud); font-size: 16px; line-height: 1.4; max-width: 780px; margin: 0 auto 34px; } .how__facts { display: flex; justify-content: center; gap: 18px; margin-bottom: 40px; flex-wrap: wrap; } .how__video { max-width: 820px; margin: 0 auto; } .how__cta { margin-top: 52px; } .how__cta-title { color: var(--leaf-light); font-weight: var(--font-weight-extrabold); font-size: var(--text-h1-big); margin: 0 0 16px; } /* Curriculum (ocean band) */ .curriculum { background: var(--ocean-700); padding: 5% 10%; text-align: center; } .curriculum__tabs { margin-top: 4%; } .curriculum__cta { margin-top: 4%; } .curriculum__inside { margin-top: 6%; } .curriculum__inside-eyebrow { margin: 0 0 10px; 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 24px; } .curriculum__video { max-width: 820px; margin: 0 auto; } /* Testimonials */ .testimonials__title { font-size: var(--text-h1); font-weight: var(--font-weight-extrabold); color: var(--mud); } .testimonials__title .hl { color: var(--leaf-on-white); } .testimonials__lead { color: var(--mud); font-size: 16px; max-width: 700px; margin: 0 auto 30px; } .testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left; } /* Bonuses (leaf band) */ .bonuses { background: var(--leaf); padding: 5% 10%; text-align: center; } .bonuses__title { font-size: var(--text-h1); font-weight: var(--font-weight-extrabold); color: var(--mud); margin-bottom: 30px; } .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 */ .professor__title { text-align: center; font-size: var(--text-h1); font-weight: var(--font-weight-extrabold); color: var(--guava-dark); margin-bottom: 30px; } .professor__row { display: flex; gap: 40px; align-items: center; } .professor__photo { flex: 0 0 38%; } .professor__photo img { border-radius: 12px; } .professor__bio { flex: 0 0 55%; } .professor__bio h4 { font-weight: var(--font-weight-regular); font-size: 22px; color: var(--mud); margin: 0 0 24px; } .professor__quote { text-align: center; font-weight: var(--font-weight-regular); font-size: 24px; color: var(--mud); margin: 40px auto 0; max-width: 800px; } /* Pricing */ .pricing { background: var(--pricing-bg); padding: 5% 10%; text-align: center; } .pricing__card { background: #fff; border-radius: var(--radius-lg); padding: 4% 5%; max-width: 1000px; margin: 0 auto; } .pricing__title { font-size: var(--text-h1-big); font-weight: var(--font-weight-extrabold); color: var(--guava-dark); margin: 0 0 10px; } .pricing__lead { color: var(--mud); max-width: 640px; margin: 0 auto 30px; } .pricing__features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; } .pricing__recap { max-width: 620px; margin: 0 auto 36px; } .pricing__recap h3 { font-weight: var(--font-weight-extrabold); color: var(--mud); font-size: 24px; margin: 0 0 18px; } .pricing__recap-list { font-size: 16px; line-height: 1.5; color: var(--mud); display: flex; flex-direction: column; gap: 16px; text-align: left; } .pricing__strike { font-weight: var(--font-weight-bold); text-decoration: line-through; } .pricing__free { color: #26a65b; font-weight: var(--font-weight-bold); } .pricing__promo { font-weight: var(--font-weight-bold); color: var(--mud); font-size: 20px; margin: 28px 0 0; } .pricing__old { font-size: 18px; text-decoration: line-through; color: #941d1d; margin: 0; } .pricing__now { font-size: 32px; font-weight: var(--font-weight-extrabold); color: var(--mud); margin: 4px 0; } .pricing__cash { color: var(--ocean-500); font-weight: var(--font-weight-semibold); margin-bottom: 24px; } .pricing__fine { font-size: 13px; color: var(--dim-grey); margin-top: 10px; } /* First course */ .first-course { display: flex; gap: 48px; align-items: flex-start; } .first-course__left { flex: 0 0 42%; } .first-course__left h1 { text-align: center; color: var(--mud); font-weight: var(--font-weight-extrabold); font-size: var(--text-h1); margin: 0 0 22px; } .first-course__right { flex: 1; } .first-course__right h5 { 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; } /* Transition band */ .transition-band { padding: 3% 2% 0; background: #fff; } .transition-band__img { background-image: url("/assets/img/herobg-1600.png"); background-position: 50% 100%; background-size: cover; height: 200px; } /* WhatsApp + footer */ .whatsapp { background: var(--ocean-700); padding: 5% 10%; display: flex; justify-content: space-between; align-items: center; gap: 24px; } .whatsapp h3 { color: #fff; font-weight: var(--font-weight-extrabold); margin: 0; } .footer { padding: 1.5% 10%; display: flex; justify-content: space-between; align-items: center; gap: 24px; } .footer__logo { height: 34px; } .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; } /* =========================================================================== RESPONSIVE — stack columns < 768px (prototypes are desktop 1440) =========================================================================== */ @media only screen and (max-width: 767px) { .hero__inner { max-width: 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, .testimonials__grid, .bonuses__grid, .pricing__features { grid-template-columns: 1fr; } .tabs__list { flex-direction: column; } .tabs__grid { grid-template-columns: 1fr; } .whatsapp, .footer { flex-direction: column; text-align: center; } } @media only screen and (max-width: 1100px) { .pricing__features { grid-template-columns: repeat(2, 1fr); } .testimonials__grid { grid-template-columns: repeat(2, 1fr); } }