/* ============================================================ NATHALIA LISOWSKI — Landing Page Built on the brand design system (colors_and_type.css). Editorial, calm-luxury. Cream / ink rhythm, wine accent. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { display: block; max-width: 100%; } /* ---- WEB TYPE SCALE (the token scale is sized for 1080px canvas) ---- */ :root { --w-display: clamp(46px, 8.5vw, 104px); --w-h1: clamp(36px, 6vw, 72px); --w-h2: clamp(27px, 3.6vw, 46px); --w-h3: clamp(21px, 2.4vw, 30px); --w-script: clamp(54px, 10vw, 122px); --w-lead: clamp(18px, 1.9vw, 23px); --w-body: clamp(16px, 1.25vw, 18px); --w-label: clamp(12px, 1vw, 14px); --gutter: clamp(20px, 5vw, 96px); --maxw: 1240px; --rule: 1px solid var(--line); } /* ============================================================ LAYOUT PRIMITIVES ============================================================ */ .section { position: relative; padding: clamp(72px, 11vh, 150px) var(--gutter); } .wrap { max-width: var(--maxw); margin: 0 auto; } .ground-cream { background: var(--cream); color: var(--ink); } .ground-ink { background: var(--ink); color: var(--cream); } .ground-wine { background: var(--wine); color: var(--cream); } /* hairline divider between same-ground sections */ .ground-cream + .ground-cream { border-top: var(--rule); } /* ---- Running eyebrow: [0X] · SECTION NAME ---- */ .eyebrow { display: flex; align-items: center; gap: 18px; font-family: var(--sans); font-weight: 600; font-size: var(--w-label); letter-spacing: 0.22em; text-transform: uppercase; margin: 0 0 clamp(28px, 4vw, 48px); } .eyebrow .idx { color: var(--wine); } .ground-ink .eyebrow .idx { color: var(--camel); } .eyebrow .ln { flex: 1; height: 1px; background: currentColor; opacity: 0.22; } .eyebrow .nm { opacity: 0.75; } /* ---- Type helpers ---- */ .display { font-family: var(--serif); font-weight: 500; line-height: 0.98; letter-spacing: -0.01em; } .h1 { font-family: var(--serif); font-weight: 500; font-size: var(--w-h1); line-height: 1.04; letter-spacing: -0.01em; } .h2 { font-family: var(--serif); font-weight: 500; font-size: var(--w-h2); line-height: 1.1; letter-spacing: -0.005em; } .h3 { font-family: var(--serif); font-weight: 500; font-size: var(--w-h3); line-height: 1.18; } .script { font-family: var(--script); font-weight: 400; line-height: 0.82; color: var(--camel); } .lead { font-size: var(--w-lead); line-height: 1.5; } .body { font-size: var(--w-body); line-height: 1.62; } .label { font-family: var(--sans); font-weight: 600; font-size: var(--w-label); letter-spacing: 0.16em; text-transform: uppercase; } .muted { color: var(--taupe); } .wine { color: var(--wine); } .ground-ink .wine { color: var(--wine-soft); } /* ============================================================ BARCODE ORNAMENT ============================================================ */ .barcode { display: flex; align-items: stretch; height: 46px; gap: 0; } .barcode i { display: block; background: var(--camel); } /* ============================================================ BUTTONS — variations driven by [data-btn] on ============================================================ */ .cta { --btn-bg: var(--wine); --btn-fg: var(--cream); --btn-bd: transparent; display: inline-flex; align-items: center; gap: 14px; font-family: var(--sans); font-weight: 600; font-size: clamp(13px, 1.1vw, 15px); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; padding: 20px 38px; border-radius: var(--r-none); background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd); cursor: pointer; white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease); position: relative; } .cta .arrow { transition: transform var(--dur) var(--ease); } .cta:hover { background: var(--wine-deep); } .cta:hover .arrow { transform: translateX(6px); } .cta:active { transform: scale(0.98); } /* on ink/wine grounds default solid stays wine; ensure contrast */ .ground-ink .cta, .ground-wine .cta { --btn-bg: var(--cream); --btn-fg: var(--ink); } .ground-ink .cta:hover, .ground-wine .cta:hover { background: #fff; } /* --- btn variant: outline (hairline) --- */ [data-btn="outline"] .cta { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); } [data-btn="outline"] .cta:hover { background: var(--ink); color: var(--cream); } [data-btn="outline"] .ground-ink .cta, [data-btn="outline"] .ground-wine .cta { --btn-fg: var(--cream); --btn-bd: var(--cream); } [data-btn="outline"] .ground-ink .cta:hover, [data-btn="outline"] .ground-wine .cta:hover { background: var(--cream); color: var(--ink); } /* --- btn variant: underline (minimal editorial) --- */ [data-btn="underline"] .cta { --btn-bg: transparent; --btn-fg: var(--wine); --btn-bd: transparent; padding: 14px 4px; } [data-btn="underline"] .cta::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 8px; height: 1.5px; background: currentColor; transform: scaleX(1); transform-origin: left; } [data-btn="underline"] .cta:hover { background: transparent; color: var(--wine-deep); } [data-btn="underline"] .cta:hover .arrow { transform: translateX(6px); } [data-btn="underline"] .ground-ink .cta, [data-btn="underline"] .ground-wine .cta { --btn-fg: var(--camel); } /* --- btn shape: pill --- */ [data-btnshape="pill"] .cta { border-radius: var(--r-pill); padding-left: 42px; padding-right: 42px; } /* ============================================================ HERO — variants via [data-hero] on ============================================================ */ .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: clamp(64px, 9vh, 120px); padding-bottom: clamp(56px, 8vh, 110px); } .hero__variant { display: none; } [data-hero="editorial"] .hero { background: var(--ink); color: var(--cream); } [data-hero="editorial"] .hero .hv-editorial { display: block; } [data-hero="floral"] .hero { background: var(--ink); color: var(--cream); } [data-hero="floral"] .hero .hv-floral { display: block; } [data-hero="split"] .hero { background: var(--cream); color: var(--ink); } [data-hero="split"] .hero .hv-split { display: grid; } /* topline meta inside hero */ .hero__meta { position: absolute; top: clamp(22px, 4vh, 44px); left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; font-family: var(--sans); font-weight: 600; font-size: var(--w-label); letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.85; } [data-hero="split"] .hero__meta { color: var(--ink); } /* shared hero type pieces */ .hero-eyebrow { font-family: var(--sans); font-weight: 600; font-size: var(--w-label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--camel); margin: 0 0 26px; display: flex; align-items: center; gap: 16px; } .hero-eyebrow::before { content: ""; width: 40px; height: 1px; background: var(--camel); display: inline-block; } .hero-accent { font-family: var(--script); font-weight: 400; color: var(--camel); font-size: clamp(52px, 7.6vw, 104px); line-height: 0.78; display: block; margin: 6px 0 0; } /* -- editorial hero -- */ .hv-editorial { max-width: 1100px; } .hv-editorial .statement { font-family: var(--serif); font-weight: 500; font-size: var(--w-display); line-height: 1.0; letter-spacing: -0.01em; margin: 0; max-width: 17ch; } .hv-editorial .sub { font-size: var(--w-lead); line-height: 1.55; color: var(--cream); opacity: 0.82; max-width: 60ch; margin: 38px 0 46px; } /* -- floral hero: full-bleed image + floating card -- */ .hv-floral { position: relative; width: 100%; } .hv-floral .floral-bg { position: absolute; inset: calc(-1 * clamp(56px,8vh,110px)) calc(-1 * var(--gutter)); width: calc(100% + 2 * var(--gutter)); height: calc(100% + 2 * clamp(56px,8vh,110px)); object-fit: cover; z-index: 0; } .hv-floral .floral-tint { position: absolute; inset: calc(-1 * clamp(56px,8vh,110px)) calc(-1 * var(--gutter)); background: linear-gradient(110deg, rgba(46,42,39,.62), rgba(46,42,39,.18)); z-index: 1; } .hv-floral .card { position: relative; z-index: 2; background: var(--card); color: var(--ink); box-shadow: var(--shadow-card); padding: clamp(38px, 5vw, 72px); max-width: 760px; } .hv-floral .card .hero-eyebrow { color: var(--wine); margin-bottom: 20px; } .hv-floral .card .hero-eyebrow::before { background: var(--wine); } .hv-floral .card .hero-accent { font-size: clamp(40px, 5vw, 66px); } .hv-floral .card .statement { font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 5.2vw, 70px); line-height: 1.03; letter-spacing: -0.01em; margin: 0; } .hv-floral .card .sub { font-size: var(--w-lead); line-height: 1.55; color: var(--ink-70); margin: 28px 0 38px; max-width: 54ch; } /* -- split hero: text + portrait -- */ .hv-split { grid-template-columns: 1.05fr 0.95fr; gap: clamp(36px, 6vw, 96px); align-items: center; width: 100%; } .hv-split .copy .hero-eyebrow { color: var(--wine); } .hv-split .copy .hero-eyebrow::before { background: var(--wine); } .hv-split .copy .hero-accent { font-size: clamp(44px, 6vw, 76px); } .hv-split .copy .statement { font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 5.2vw, 72px); line-height: 1.0; letter-spacing: -0.01em; margin: 0; max-width: 14ch; } .hv-split .copy .sub { font-size: var(--w-lead); line-height: 1.55; color: var(--ink-70); margin: 30px 0 40px; max-width: 48ch; } .hv-split .portrait { width: 100%; height: clamp(380px, 44vw, 520px); box-shadow: var(--shadow-soft); display: block; object-fit: contain; object-position: center bottom; } image-slot { background: var(--cream-2); } .scrollcue { position: absolute; bottom: clamp(20px, 4vh, 40px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.6; } .scrollcue .line { width: 1px; height: 42px; background: currentColor; animation: cue 2.4s var(--ease) infinite; transform-origin: top; } @keyframes cue { 0%,100% { transform: scaleY(0.4); opacity: .4 } 50% { transform: scaleY(1); opacity: 1 } } /* ============================================================ IDENTIFICAÇÃO — 6 items, 3 top / 3 bottom ============================================================ */ .ident-intro { max-width: none; } .ident-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: clamp(40px,6vw,72px) 0; } .ident-cell { position: relative; background: var(--cream-2); padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; gap: 22px; overflow: hidden; transition: background 420ms var(--ease), box-shadow 420ms var(--ease); } .ident-cell::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--wine); transform: scaleX(0); transform-origin: left; transition: transform 520ms var(--ease); } .ident-cell:hover::before { transform: scaleX(1); } .ident-cell .tick { width: 34px; height: 2px; background: var(--wine); flex: none; transition: width 420ms var(--ease); } .ident-cell p { margin: 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--ink); font-weight: 500; letter-spacing: -0.01em; } .ident-cell:hover { background: var(--cream); box-shadow: var(--shadow-soft); } .ident-cell:hover .tick { width: 64px; } /* ---- Dark (inverted) variant of the Identificação fold ---- */ section.ident-dark { background: var(--ink); color: var(--cream); } section.ident-dark .ident-intro { color: var(--cream); } section.ident-dark .ident-cell { background: rgba(242, 239, 233, 0.06); } section.ident-dark .ident-cell p { color: var(--cream); } section.ident-dark .ident-cell:hover { background: rgba(242, 239, 233, 0.12); box-shadow: none; } section.ident-dark .ident-root .body { color: var(--cream); opacity: 0.82; } section.ident-dark .ident-root .punch { color: var(--camel); } .ident-root { max-width: none; text-align: center; } .ident-root .vrule { display: block; width: 1px; height: 64px; background: var(--wine); margin: 28px 0; } .ident-root .punch { font-family: var(--serif); font-weight: 500; font-size: var(--w-h2); line-height: 1.12; color: var(--wine); margin: 52px 0 0; } /* ============================================================ O QUE É — não é / é (two columns) ============================================================ */ .def-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(40px,5vw,64px); max-width: none; align-items: center; text-align: center; } .def-head .h1 { max-width: none; } .def-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid rgba(242,239,233,0.16); } .def-col { padding: clamp(32px, 4vw, 56px); } .def-col--not { border-right: 1px solid rgba(242,239,233,0.16); } .def-col h3 { font-family: var(--serif); font-weight: 500; font-size: var(--w-h2); margin: 0 0 8px; } .def-col--not h3 { color: var(--taupe); } .def-col--is h3 { color: var(--wine-soft); } .def-col .col-tag { font-family: var(--script); font-size: clamp(40px,5vw,64px); line-height: 0.8; display: block; margin-bottom: 18px; } .def-col--not .col-tag { color: var(--taupe); } .def-col--is .col-tag { color: var(--camel); } .def-list { list-style: none; margin: clamp(20px,3vw,32px) 0 0; padding: 0; display: flex; flex-direction: column; } .def-list li { padding: 20px 0; border-top: 1px solid rgba(242,239,233,0.13); font-size: var(--w-body); line-height: 1.5; display: flex; gap: 16px; } .def-list li:last-child { border-bottom: 1px solid rgba(242,239,233,0.13); } .def-list .mk { flex: none; font-family: var(--serif); line-height: 1.2; } .def-list .mk-x { display: inline-flex; align-items: center; margin-top: 4px; } .def-list .mk-x svg, .def-list .mk-check svg { width: 26px; height: 26px; display: block; stroke-width: 2.4px; } .def-list .mk-check { display: inline-flex; align-items: center; margin-top: 4px; } .def-col--not .mk.mk-x { color: #CE3526; } .def-col--is .mk.mk-check { color: #2E8B57; } .def-col--not .mk { color: var(--taupe); } .def-col--is .mk { color: var(--camel); } .def-outro { margin-top: clamp(40px,5vw,64px); max-width: none; } .def-outro .punch { font-family: var(--serif); font-weight: 500; font-size: var(--w-h3); line-height: 1.3; } /* ============================================================ MÉTODO 5 E's — vertical timeline (option 0) ============================================================ */ .method-head { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: clamp(48px,6vw,80px); max-width: 30ch; } .timeline { position: relative; max-width: 880px; } .timeline::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1px; background: var(--line-strong); } .tl-item { position: relative; padding: clamp(26px,3vw,40px) 0 clamp(26px,3vw,40px) clamp(48px,5vw,72px); border-bottom: var(--rule); } .tl-item:last-child { border-bottom: none; } .tl-item::before { content: ""; position: absolute; left: 0; top: clamp(30px,3.4vw,46px); width: 15px; height: 15px; border-radius: 50%; background: var(--wine); } .tl-item .step { font-family: var(--script); font-size: clamp(34px,4vw,52px); color: var(--camel); line-height: 0.8; } .tl-item h3 { font-family: var(--serif); font-weight: 500; font-size: var(--w-h3); margin: 8px 0 10px; } .tl-item .ename { color: var(--wine); } .tl-item p { margin: 0; font-size: var(--w-body); line-height: 1.6; max-width: 64ch; } @media (min-width: 760px) { .tl-item { display: grid; grid-template-columns: 200px 1fr; gap: clamp(24px,3vw,48px); align-items: start; } .tl-item .tl-left { display: flex; flex-direction: column; gap: 6px; } } /* ---- Dark (inverted) variant of the Método fold ---- */ section.method-dark { background: var(--ink); color: var(--cream); } section.method-dark .method-head .h1 { color: var(--cream); } section.method-dark .timeline::before { background: rgba(242,239,233,0.16); } section.method-dark .tl-item { border-bottom-color: rgba(242,239,233,0.22); border-bottom-width: 2px; padding-left: clamp(56px,6vw,88px); border-radius: 4px; transition: background var(--dur) var(--ease); } section.method-dark .tl-item::before { width: 17px; height: 17px; background: var(--camel); box-shadow: 0 0 0 6px rgba(197,160,127,0.18); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } section.method-dark .tl-item .step { font-family: var(--sans); font-weight: 700; font-size: clamp(40px,4.6vw,60px); color: var(--camel); line-height: 0.9; letter-spacing: -0.02em; } section.method-dark .tl-item h3 { margin: 6px 0 12px; } section.method-dark .tl-item .ename { font-family: var(--sans); font-weight: 600; color: var(--cream); font-size: clamp(26px,2.9vw,40px); letter-spacing: -0.02em; } section.method-dark .tl-item p { color: var(--cream); opacity: 0.78; font-size: clamp(17px,1.4vw,20px); max-width: none; } /* highlight on hover: brighten row, grow the dot, accent the title */ section.method-dark .tl-item:hover { background: rgba(242,239,233,0.05); } section.method-dark .tl-item:hover::before { transform: scale(1.18); box-shadow: 0 0 0 9px rgba(197,160,127,0.30); } section.method-dark .tl-item:hover .ename { color: var(--camel); } /* ============================================================ MÉTODO 5 E's — RADIAL (círculo com nós ao redor) ============================================================ */ .method-radial { position: relative; padding: clamp(10px,2vw,28px) 0; } .method-radial.mr-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(32px,5vw,80px); align-items: center; } .mr-stage { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; margin: 0 auto; justify-self: center; } .mr-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .mr-ring-bg { fill: none; stroke: rgba(242,239,233,0.14); stroke-width: 1; } .mr-ring-draw { fill: none; stroke: var(--camel); stroke-width: 1.5; stroke-linecap: round; opacity: 0.55; stroke-dasharray: 1320; stroke-dashoffset: 1320; transform: rotate(-90deg); transform-origin: 260px 260px; transition: stroke-dashoffset 1500ms var(--ease); } .method-radial.in .mr-ring-draw { stroke-dashoffset: 0; } /* center panel (mini — only the step name) */ .mr-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(70%, 300px); text-align: center; pointer-events: none; } .mr-mini .mr-c-num { display: none; } .mr-mini .mr-c-name { margin: 0; } .mr-panel { display: none; } .mr-panel.is-active { display: block; animation: mrFade 460ms var(--ease); } @keyframes mrFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .mr-c-num { display: block; font-family: var(--sans); font-weight: 700; font-size: clamp(18px,1.8vw,24px); color: var(--camel); letter-spacing: 0.06em; } .mr-c-name { font-family: var(--sans); font-weight: 700; color: var(--cream); font-size: clamp(22px,2.6vw,32px); letter-spacing: -0.02em; line-height: 1.05; margin: 10px 0 14px; } .mr-c-desc { font-size: clamp(14px,1.25vw,17px); line-height: 1.5; color: var(--cream); opacity: 0.82; margin: 0; } /* right detail panel (full — "Etapa N | Nome" on one line + description) */ .mr-detail { position: relative; padding-left: clamp(20px,2vw,32px); min-height: 300px; display: flex; flex-direction: column; justify-content: center; } .mr-detail::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: rgba(242,239,233,0.16); } .mr-full .mr-c-num { display: inline; font-size: clamp(16px,1.5vw,20px); } .mr-full .mr-c-num::after { content: "|"; color: var(--camel); margin: 0 10px; font-weight: 400; } .mr-full .mr-c-name { display: inline; font-family: var(--sans); font-weight: 700; color: var(--camel); font-size: clamp(16px,1.5vw,20px); letter-spacing: 0.06em; line-height: 1.3; margin: 0; } .mr-full .mr-c-desc { font-size: clamp(17px,1.5vw,22px); line-height: 1.5; margin: clamp(18px,2vw,26px) 0 0; max-width: 46ch; opacity: 0.9; } /* nodes around the ring — visible by default; entrance is a one-shot pop */ .mr-node { position: absolute; transform: translate(-50%,-50%); opacity: 1; appearance: none; -webkit-appearance: none; cursor: pointer; width: clamp(58px,8.5vw,80px); height: clamp(58px,8.5vw,80px); border-radius: 50%; background: var(--ink); border: 1px solid rgba(242,239,233,0.32); color: var(--cream); display: flex; align-items: center; justify-content: center; z-index: 2; font-family: var(--sans); font-weight: 700; font-size: clamp(17px,1.9vw,23px); letter-spacing: -0.01em; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } @keyframes mrPop { from { transform: translate(-50%,-50%) scale(0.2); } to { transform: translate(-50%,-50%) scale(1); } } .method-radial.in .mr-node { animation: mrPop 560ms var(--ease); } .method-radial.in .mr-node[data-e="1"] { animation-delay: 160ms; } .method-radial.in .mr-node[data-e="2"] { animation-delay: 300ms; } .method-radial.in .mr-node[data-e="3"] { animation-delay: 440ms; } .method-radial.in .mr-node[data-e="4"] { animation-delay: 580ms; } .method-radial.in .mr-node[data-e="5"] { animation-delay: 720ms; } .mr-node:hover { transform: translate(-50%,-50%) scale(1.06); border-color: var(--camel); } .method-radial[data-active="1"] .mr-node[data-e="1"], .method-radial[data-active="2"] .mr-node[data-e="2"], .method-radial[data-active="3"] .mr-node[data-e="3"], .method-radial[data-active="4"] .mr-node[data-e="4"], .method-radial[data-active="5"] .mr-node[data-e="5"] { background: var(--wine); border-color: var(--wine); color: var(--cream); box-shadow: 0 0 0 8px rgba(146,43,84,0.18); } .mr-hint { font-family: var(--sans); font-size: clamp(12px,1vw,14px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe); margin: 0; } /* mobile: hide circle, show full detail list (all five) */ @media (max-width: 860px) { .method-radial.mr-split { grid-template-columns: 1fr; gap: clamp(26px,5vw,44px); } .mr-stage { max-width: 400px; } } @media (max-width: 560px) { .mr-stage { display: none; } .mr-detail { padding-left: 0; } .mr-detail::before { display: none; } .mr-hint { display: none; } .mr-full, .mr-full.is-active { display: block; animation: none; padding: 22px 0; border-bottom: 1px solid rgba(242,239,233,0.14); } .mr-full .mr-c-name { margin: 8px 0 10px; } } @media (prefers-reduced-motion: reduce) { .mr-node { opacity: 1 !important; transform: translate(-50%,-50%) scale(1) !important; } .mr-ring-draw { stroke-dashoffset: 0 !important; } } /* ============================================================ DIAGNÓSTICO + CTA band ============================================================ */ .diag-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px,4vw,48px); } @media (min-width: 860px) { .diag-grid { grid-template-columns: 1fr; gap: clamp(20px,2.4vw,40px); align-items: start; } } .diag-grid { max-width: none; } .diag-grid .h1 { max-width: none; } .diag-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .diag-card { position: relative; background: var(--cream-2); padding: clamp(28px,3vw,40px); display: flex; flex-direction: column; gap: 22px; overflow: hidden; transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .diag-card::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--wine); transform: scaleX(0); transform-origin: left; transition: transform 520ms var(--ease); } .diag-card:hover::before { transform: scaleX(1); } .diag-card:hover { background: var(--cream); box-shadow: var(--shadow-soft); } .diag-card .dc-num { font-family: var(--sans); font-weight: 700; font-size: clamp(40px,4.4vw,60px); color: var(--camel); line-height: 0.9; letter-spacing: -0.02em; } .diag-card p { margin: 0; font-size: clamp(17px,1.4vw,20px); line-height: 1.5; color: var(--ink); font-weight: 500; letter-spacing: -0.01em; } @media (max-width: 760px) { .diag-steps { grid-template-columns: 1fr; } } .diag-grid > .reveal.d1 { text-align: center; } .diag-grid > .reveal.d1 .lead { margin-left: auto; margin-right: auto; } .diag-grid > .reveal.d2 { text-align: center; } .diag-grid > .reveal.d2 .diag-payoff { margin-left: auto; margin-right: auto; max-width: 30ch; } .diag-grid > .reveal.d2 .cta { display: inline-flex; } .diag-card { text-align: left; } .diag-payoff { font-family: var(--serif); font-weight: 500; font-size: var(--w-h2); line-height: 1.15; } /* ============================================================ PROVA SOCIAL — elegant placeholder ============================================================ */ .proof { text-align: center; max-width: 1000px; margin: 0 auto; } .proof .quotemark { font-family: var(--script); font-size: clamp(80px,12vw,160px); color: var(--camel); line-height: 0.5; display: block; } .proof .ph { border: 1px dashed var(--line-strong); padding: clamp(40px,6vw,80px) clamp(28px,5vw,72px); margin: clamp(24px,4vw,40px) 0; background: rgba(255,255,255,0.25); } .proof .ph .label { color: var(--taupe); display: block; margin-bottom: 16px; } .proof .ph .hint { font-family: var(--serif); font-style: italic; font-size: var(--w-h3); color: var(--taupe); line-height: 1.4; max-width: 44ch; margin: 0 auto; } .proof .payoff { font-family: var(--serif); font-weight: 500; font-size: var(--w-h2); line-height: 1.15; } /* depoimentos — masonry (mesma largura, alturas variadas) */ .dep-masonry { column-count: 4; column-gap: 14px; margin: clamp(28px,4vw,48px) 0 clamp(32px,5vw,56px); text-align: left; } .dep-card { break-inside: avoid; margin: 0 0 14px; background: var(--card); box-shadow: var(--shadow-soft); border-radius: 2px; overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .dep-card img { width: 100%; height: auto; display: block; } .dep-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(46,42,39,0.16); } @media (max-width: 1100px) { .dep-masonry { column-count: 3; } } @media (max-width: 760px) { .dep-masonry { column-count: 2; } } @media (max-width: 460px) { .dep-masonry { column-count: 1; max-width: 420px; margin-left: auto; margin-right: auto; } } /* ============================================================ QUEM SOU EU — portrait split ============================================================ */ .about-grid { display: grid; grid-template-columns: 1fr; gap: clamp(36px,5vw,72px); align-items: center; } @media (min-width: 900px) { .about-grid { grid-template-columns: 0.85fr 1.15fr; } } .about-portrait { width: 100%; height: clamp(440px, 46vw, 580px); box-shadow: var(--shadow-soft); display: block; object-fit: cover; object-position: center 28%; } .about-copy p { font-size: var(--w-body); line-height: 1.72; margin: 0 0 22px; max-width: 60ch; } .about-copy p:last-child { margin-bottom: 0; } .about-copy .signoff { font-family: var(--serif); font-weight: 500; font-size: var(--w-h3); color: var(--camel); line-height: 1.3; } .about-name { font-family: var(--script); font-size: clamp(48px,7vw,90px); color: var(--camel); line-height: 0.8; margin-bottom: 6px; } .about-stat { display: flex; gap: clamp(20px,3vw,40px); margin: clamp(24px,3vw,36px) 0; flex-wrap: nowrap; } .about-stat .s { flex: 1; min-width: 0; } .about-stat .num { font-family: var(--serif); font-size: clamp(28px,3.4vw,52px); line-height: 1; color: var(--cream); white-space: nowrap; } .about-stat .cap { font-size: clamp(11px,1vw,13px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--taupe); margin-top: 8px; } /* ============================================================ CHAMADA FINAL (wine) + FOOTER ============================================================ */ .final { text-align: center; } .final .script { color: var(--cream); display: block; font-size: clamp(40px,6vw,80px); margin-bottom: 10px; opacity: 0.9; } .final .h1 { color: var(--cream); max-width: 20ch; margin: 0 auto; } .final .sub { font-size: var(--w-lead); line-height: 1.55; color: var(--cream); opacity: 0.9; max-width: 56ch; margin: 30px auto 44px; } .footer { background: var(--ink); color: var(--cream); padding: clamp(56px,8vh,96px) var(--gutter) clamp(36px,5vh,56px); } .footer__top { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; align-items: flex-end; } .footer__brand .name { font-family: var(--serif); font-size: clamp(28px,3.4vw,44px); line-height: 1; } .footer__brand .role { font-family: var(--sans); font-weight: 600; font-size: var(--w-label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--taupe); margin-top: 14px; } .socials { display: flex; gap: 14px; } .socials a { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(242,239,233,0.28); color: var(--cream); transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .socials a:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); } .socials svg { width: 22px; height: 22px; } .footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; margin-top: clamp(40px,6vw,72px); padding-top: 28px; border-top: 1px solid rgba(242,239,233,0.16); font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--taupe); } .footer__bottom .barcode { height: 38px; } /* ============================================================ SCROLL REVEAL ============================================================ */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: 90ms; } .reveal.d2 { transition-delay: 180ms; } .reveal.d3 { transition-delay: 270ms; } .reveal.d4 { transition-delay: 360ms; } .reveal.d5 { transition-delay: 450ms; } .reveal.d6 { transition-delay: 540ms; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .scrollcue .line { animation: none; } html { scroll-behavior: auto; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 900px) { .hv-split { grid-template-columns: 1fr; } .hv-split .portrait { max-width: 460px; } .def-cols { grid-template-columns: 1fr; } .def-col--not { border-right: none; border-bottom: 1px solid rgba(242,239,233,0.16); } } @media (max-width: 680px) { .ident-grid { grid-template-columns: 1fr; } .hero { min-height: auto; } .footer__bottom .tag { width: 100%; order: 3; } } /* tweaks mount */ #tweaks-root { position: fixed; z-index: 9999; } /* ============================================================ CLIENT REVISION — LIGHT + DM SANS One typeface (DM Sans), hierarchy by size/weight. Every ground light & airy; wine is the only accent. ============================================================ */ :root { --serif: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; --script: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; } /* ---- Grounds: all light ---- */ .ground-ink { background: var(--cream-2); color: var(--ink); } .ground-wine { background: var(--cream); color: var(--ink); } .footer { background: var(--cream-2); color: var(--ink); } .section + .section { border-top: 1px solid var(--line); } /* ---- Accents stay wine on light grounds ---- */ .ground-ink .eyebrow .idx { color: var(--wine); } .ground-ink .wine { color: var(--wine); } .eyebrow .nm { opacity: 0.6; } /* ---- DM Sans display tuning (hierarchy via weight + tracking) ---- */ .h1, .display, .statement { font-weight: 600; letter-spacing: -0.022em; } .h2 { font-weight: 600; letter-spacing: -0.015em; } .h3 { font-weight: 600; letter-spacing: -0.01em; } .accentword { color: var(--wine); font-weight: 600; font-style: normal; } /* ---- CTA always wine on every (now light) ground ---- */ .ground-ink .cta, .ground-wine .cta { --btn-bg: var(--wine); --btn-fg: var(--cream); } .ground-ink .cta:hover, .ground-wine .cta:hover { background: var(--wine-deep); } [data-btn="outline"] .ground-ink .cta, [data-btn="outline"] .ground-wine .cta { --btn-fg: var(--ink); --btn-bd: var(--ink); } [data-btn="outline"] .ground-ink .cta:hover, [data-btn="outline"] .ground-wine .cta:hover { background: var(--ink); color: var(--cream); } [data-btn="underline"] .ground-ink .cta, [data-btn="underline"] .ground-wine .cta { --btn-fg: var(--wine); } /* ============================================================ HERO — light editorial split (copy + portrait) ============================================================ */ [data-hero="editorial"] .hero { background: var(--cream); color: var(--ink); } .hv-editorial { max-width: none; } .hv-editorial-inner { display: grid; grid-template-columns: 1.08fr 0.82fr; gap: clamp(36px, 6vw, 88px); align-items: center; width: 100%; max-width: var(--maxw); margin: 0 auto; } .hv-editorial .statement { font-size: clamp(36px, 5.2vw, 70px); line-height: 1.04; max-width: none; } .hv-editorial .sub { color: var(--ink-70); opacity: 1; max-width: 46ch; } .hero-photo { width: 100%; height: clamp(420px, 50vw, 600px); background: transparent; box-shadow: none; display: block; object-fit: contain; object-position: center bottom; } .hero-eyebrow { color: var(--wine); } .hero-eyebrow::before { background: var(--wine); } /* split variant: portrait left */ .hv-split { grid-template-columns: 0.82fr 1.08fr; align-items: center; } .hv-split .copy .sub { color: var(--ink-70); } .hv-split .statement { font-size: clamp(34px, 4.6vw, 64px); } @media (max-width: 900px) { .hv-editorial-inner { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 44px); } .hero-photo { max-width: 440px; height: clamp(340px, 60vw, 460px); } .hv-split { grid-template-columns: 1fr; } } /* ============================================================ O QUE É — light hairlines + clean tags ============================================================ */ .def-cols { border-color: var(--line); } .def-col--not { border-right-color: var(--line); } .def-list li, .def-list li:last-child { border-top-color: var(--line); border-bottom-color: var(--line); } .def-col--is h3 { color: var(--wine); } .def-col--not h3 { color: var(--taupe); } .def-col .col-tag { font-family: var(--sans); font-weight: 700; font-size: clamp(12px, 1vw, 14px); letter-spacing: 0.18em; text-transform: uppercase; line-height: 1; margin-bottom: 24px; } .def-col--is .col-tag { color: var(--wine); } .def-col--not .col-tag { color: var(--taupe); } .def-outro .punch { color: var(--wine); } @media (max-width: 900px) { .def-col--not { border-bottom-color: var(--line); } } /* ============================================================ MÉTODO — headline fills the width ============================================================ */ .method-head { max-width: none; justify-items: center; text-align: center; margin-bottom: clamp(24px,3vw,40px); } .method-head .h1 { max-width: 26ch; } /* ============================================================ QUEM SOU EU — light ============================================================ */ .about-stat .num { color: var(--ink); font-weight: 600; } .about-name { font-family: var(--sans); font-weight: 700; color: var(--ink); font-size: clamp(28px, 3.4vw, 42px); line-height: 1.05; letter-spacing: -0.015em; margin-bottom: 20px; } .about-copy .signoff { color: var(--wine); font-weight: 500; } /* ============================================================ PROVA SOCIAL — light ============================================================ */ .proof .quotemark { font-family: var(--sans); font-weight: 700; color: var(--camel); font-size: clamp(56px, 8vw, 110px); line-height: 0.7; } .proof-stat { display: block; font-family: var(--sans); font-weight: 700; color: var(--wine); letter-spacing: 0.14em; line-height: 1.1; text-transform: uppercase; margin-bottom: clamp(28px,3vw,40px); } .proof .ph { background: var(--card); border-color: var(--line-strong); } .proof .ph .hint { font-family: var(--sans); font-style: normal; } .proof .payoff { color: var(--wine); } /* ============================================================ CHAMADA FINAL — light with wine accents ============================================================ */ .final .script { font-family: var(--sans); color: var(--wine); font-weight: 600; font-size: var(--w-label); letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 22px; } .final .h1 { color: var(--ink); } .final .sub { color: var(--ink-70); opacity: 1; } /* ============================================================ FOOTER — light ============================================================ */ .footer__brand .name { color: var(--ink); } .footer__brand .role { color: var(--taupe); } .socials a { border-color: var(--line-strong); color: var(--ink); } .socials a:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); } .footer__bottom { border-top-color: var(--line); color: var(--taupe); } /* image slot: gentle hairline so empty state reads on light grounds */ image-slot { background: var(--card); } /* ============================================================ MOBILE — scale down manually-set fixed px sizes (inline → need !important) Keeps the desktop sizes the user tuned, only shrinks on small screens. ============================================================ */ @media (max-width: 600px) { /* big headings */ .hv-editorial .statement, .ident-intro, .def-head .h1, .method-head .h1, .diag-grid .h1, .final .h1 { font-size: clamp(28px, 8.4vw, 36px) !important; line-height: 1.1 !important; } /* hero subtitle */ .hv-editorial .sub { font-size: 17px !important; letter-spacing: -0.2px !important; } /* identificação punch */ .ident-root .punch { font-size: 20px !important; } /* o que é — column tags + list items */ .def-col .col-tag { font-size: 22px !important; } .def-list li span { font-size: 17px !important; } .def-outro .punch { font-size: 24px !important; line-height: 1.15 !important; } /* diagnóstico */ .diag-grid .lead { font-size: 19px !important; line-height: 1.35 !important; letter-spacing: -0.2px !important; } .diag-payoff { font-size: 22px !important; line-height: 1.15 !important; } .diag-card .dc-num { font-size: 40px !important; } /* prova social + chamada final */ .proof-stat { font-size: 20px !important; } .proof .payoff { font-size: 19px !important; } /* método: right detail readable */ .mr-full .mr-c-desc { font-size: 18px !important; } } /* ============================================================ PROVA SOCIAL — olive ground (verde da paleta, antes não usado) ============================================================ */ .ground-olive { background: var(--olive); color: var(--cream); } .ground-olive .proof-stat { color: var(--cream); } .ground-olive .proof .payoff { color: var(--cream); } .ground-olive .dep-card { box-shadow: 0 14px 38px rgba(35,38,30,0.30); } .ground-olive .dep-card:hover { box-shadow: 0 22px 50px rgba(35,38,30,0.40); } /* ============================================================ CTA — green brand override (#04ab39) on every ground/variant ============================================================ */ .cta, .ground-ink .cta, .ground-wine .cta { --btn-bg: #04ab39; --btn-fg: #ffffff; --btn-bd: transparent; } .cta:hover, .ground-ink .cta:hover, .ground-wine .cta:hover { background: #038a2f; color: #ffffff; } [data-btn="outline"] .cta, [data-btn="outline"] .ground-ink .cta, [data-btn="outline"] .ground-wine .cta { --btn-bg: transparent; --btn-fg: #04ab39; --btn-bd: #04ab39; } [data-btn="outline"] .cta:hover, [data-btn="outline"] .ground-ink .cta:hover, [data-btn="outline"] .ground-wine .cta:hover { background: #04ab39; color: #ffffff; } [data-btn="underline"] .cta, [data-btn="underline"] .ground-ink .cta, [data-btn="underline"] .ground-wine .cta { --btn-bg: transparent; --btn-fg: #04ab39; } [data-btn="underline"] .cta:hover { color: #038a2f; }