/* ============================================================ MORADA · MARSICANO — sistema visual Tipografia: Playfair Display (Pensar) + Montserrat (Fazer) Cores da marca: areia / ink / teal / ocre / marrom / verde ============================================================ */ :root{ /* brand palette (exatas da cartela) */ --c-ink: #16140f; /* near-black, levemente quente */ --c-black: #0d0d0d; --c-verde: #2c3a2f; --c-marrom: #833e17; --c-ocre: #b5541f; --c-teal: #096f7e; --c-areia: #eedfc4; /* derivadas */ --paper: #f5eedd; /* areia clareada p/ grandes superfícies */ --paper-2: #efe5cf; /* card / faixa alternada */ --line: #d8cbac; /* hairlines sobre paper */ --muted: #6f6650; /* texto secundário sobre paper */ /* papéis semânticos — sobrescritos pelos temas/tweaks */ --bg: var(--paper); --bg-alt: var(--paper-2); --fg: var(--c-ink); --fg-soft: var(--muted); --hair: var(--line); --accent: var(--c-teal); /* destaque primário */ --accent-2: var(--c-ocre); /* CTA / ação */ --on-accent: var(--c-areia); /* type */ --serif: "Playfair Display", Georgia, "Times New Roman", serif; --sans: "Montserrat", system-ui, -apple-system, sans-serif; /* ritmo */ --maxw: 1240px; --gut: clamp(20px, 5vw, 76px); --section-y: clamp(72px, 11vh, 152px); --radius: 2px; } /* ---------- temas (via Tweaks: data-theme em ) ---------- */ html[data-theme="escuro"]{ --bg: #14130f; --bg-alt: #1d1b15; --fg: #f1e7d2; --fg-soft: #a89b7e; --hair: #36312593; --on-accent: var(--c-areia); } html[data-theme="verde"]{ --bg: #20291f; --bg-alt: #283226; --fg: #ede4cf; --fg-soft: #9fae93; --hair: #3c4a3760; --accent: var(--c-areia); --on-accent: var(--c-verde); } /* ---------- reset ---------- */ *{ box-sizing: border-box; margin: 0; padding: 0; } html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body{ font-family: var(--sans); background: var(--bg); color: var(--fg); line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; transition: background .5s ease, color .5s ease; } img{ display: block; max-width: 100%; } a{ color: inherit; text-decoration: none; } button{ font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } ::selection{ background: var(--accent); color: var(--on-accent); } /* ---------- helpers ---------- */ .wrap{ max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); } .section{ padding-block: var(--section-y); } .kicker{ font-family: var(--sans); font-weight: 600; font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: .7em; } .kicker::before{ content: ""; width: 34px; height: 1px; background: currentColor; opacity: .6; } .kicker.center{ justify-content: center; } .eyebrow{ font-family: var(--sans); font-weight: 600; font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--fg-soft); } h1,h2,h3,h4{ font-family: var(--serif); font-weight: 500; line-height: 1.08; letter-spacing: -.01em; } .serif{ font-family: var(--serif); } .display{ font-size: clamp(2.6rem, 7vw, 5.4rem); font-weight: 500; } .h2{ font-size: clamp(2rem, 4.4vw, 3.4rem); } .h3{ font-size: clamp(1.4rem, 2.6vw, 2.1rem); } .lead{ font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--fg-soft); line-height: 1.66; } em.it{ font-style: italic; } .text-accent{ color: var(--accent); } /* botões */ .btn{ display: inline-flex; align-items: center; gap: .6em; font-family: var(--sans); font-weight: 600; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; padding: 1.05em 1.7em; border-radius: var(--radius); transition: transform .25s, background .25s, color .25s, border-color .25s, box-shadow .25s; white-space: nowrap; } .btn .arw{ transition: transform .25s; } .btn:hover .arw{ transform: translateX(4px); } .btn-primary{ background: var(--accent-2); color: #fff; } .btn-primary:hover{ background: var(--c-marrom); transform: translateY(-2px); } .btn-ink{ background: var(--fg); color: var(--bg); } .btn-ink:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px -14px rgba(0,0,0,.5); } .btn-ghost{ border: 1px solid var(--hair); color: var(--fg); background: transparent; } .btn-ghost:hover{ border-color: var(--accent); color: var(--accent); } .btn-lg{ padding: 1.2em 2em; font-size: .86rem; } .link-underline{ font-family: var(--sans); font-weight: 600; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); display: inline-flex; gap: .55em; align-items: center; padding-bottom: 3px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); } .link-underline .arw{ transition: transform .25s; } .link-underline:hover .arw{ transform: translateX(4px); } /* ========================================================= NAV — escura, fixa, em negativo (par do rodapé) ========================================================= */ .nav{ position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: var(--c-ink); border-bottom: 1px solid rgba(238,223,196,.12); transition: padding .4s, box-shadow .4s; } .nav .wrap{ display: flex; align-items: center; justify-content: space-between; padding-block: 16px; } .nav.scrolled{ box-shadow: 0 14px 40px -28px rgba(0,0,0,.7); } .nav.scrolled .wrap{ padding-block: 11px; } .nav__logo{ height: 40px; transition: height .4s; } .nav.scrolled .nav__logo{ height: 34px; } .nav__menu{ display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); } .nav__menu a.navlink{ font-family: var(--sans); font-weight: 500; font-size: .82rem; letter-spacing: .04em; color: var(--c-areia); opacity: .78; position: relative; padding: 4px 0; } .nav__menu a.navlink::after{ content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:0; background: var(--c-ocre); transition: width .28s; } .nav__menu a.navlink:hover{ opacity: 1; } .nav__menu a.navlink:hover::after{ width: 100%; } .nav__cta{ display:flex; align-items:center; gap: 14px; } .nav__wa{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--sans); font-weight:600; font-size:.8rem; letter-spacing:.04em; padding:.7em 1.2em; border-radius: var(--radius); background: var(--c-areia); color: var(--c-ink); transition: transform .2s, background .2s; } .nav__wa:hover{ transform: translateY(-2px); background: #fff; } .nav__burger{ display:none; width:42px; height:42px; align-items:center; justify-content:center; } .nav__burger span{ display:block; width:22px; height:2px; background: var(--c-areia); position:relative; transition:.3s; } .nav__burger span::before,.nav__burger span::after{ content:""; position:absolute; left:0; width:22px; height:2px; background: var(--c-areia); transition:.3s; } .nav__burger span::before{ top:-7px; } .nav__burger span::after{ top:7px; } body.menu-open .nav__burger span{ background: transparent; } body.menu-open .nav__burger span::before{ top:0; transform: rotate(45deg); } body.menu-open .nav__burger span::after{ top:0; transform: rotate(-45deg); } /* mobile drawer */ .drawer{ position: fixed; inset: 0; z-index: 55; background: var(--bg); display:flex; flex-direction:column; justify-content:center; gap: 6px; padding: var(--gut); transform: translateY(-100%); transition: transform .5s cubic-bezier(.7,0,.2,1); visibility:hidden; } body.menu-open .drawer{ transform: translateY(0); visibility:visible; } .drawer a{ font-family: var(--serif); font-size: clamp(2rem,9vw,3rem); padding: 8px 0; border-bottom: 1px solid var(--hair); } .drawer a:last-of-type{ border-bottom: none; } .drawer .drawer__cta{ margin-top: 28px; } /* ========================================================= HERO ========================================================= */ .hero{ position: relative; padding-top: clamp(120px, 17vh, 200px); padding-bottom: var(--section-y); overflow: hidden; } .hero__grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 72px); align-items: center; } .hero__eyebrow{ margin-bottom: 28px; } .hero h1{ font-size: clamp(2.7rem, 6.4vw, 5.2rem); margin-bottom: 26px; } .hero h1 .ln{ display:block; } .hero h1 em{ font-style: italic; color: var(--accent); } .hero__sub{ max-width: 32em; margin-bottom: 22px; } .hero__sub2{ max-width: 30em; margin-bottom: 36px; color: var(--fg-soft); font-size: 1rem; line-height: 1.65; } .hero__paths{ display:flex; flex-wrap:wrap; gap: 14px; } .hero__plate{ position: relative; } .hero__meta{ margin-top: 46px; display:flex; flex-wrap:wrap; gap: 26px 40px; align-items:center; } .hero__meta .mi{ display:flex; flex-direction:column; gap:3px; } .hero__meta .mi b{ font-family: var(--serif); font-size: 1.55rem; line-height:1; } .hero__meta .mi span{ font-family: var(--sans); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color: var(--fg-soft); } .hero__meta .vr{ width:1px; height:38px; background: var(--hair); } .hero__photo{ position: relative; } .hero__photo .frame{ position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/5; background: var(--bg-alt); box-shadow: 0 40px 80px -40px rgba(20,15,5,.5); } .hero__photo img{ width:100%; height:100%; object-fit: cover; object-position: center 20%; } .hero__photo .tag{ position:absolute; left:-14px; bottom: 34px; z-index:3; background: var(--accent); color: var(--on-accent); padding: 14px 20px; max-width: 60%; font-family: var(--sans); font-size:.74rem; letter-spacing:.04em; line-height:1.4; box-shadow: 0 20px 40px -20px rgba(0,0,0,.45); } .hero__photo .tag b{ font-weight:700; } /* logo-mark watermark behind hero */ .hero__mark{ position:absolute; top:-6%; right:-8%; width: min(46vw,640px); opacity:.05; pointer-events:none; z-index:0; } /* placa de marca (lado direito do hero) — grafismo dourado/verde sobre preto */ .plate{ position:relative; border-radius: var(--radius); background: var(--c-ink); display:flex; flex-direction:column; gap: clamp(20px,3vw,30px); padding: clamp(30px,4vw,46px); box-shadow: 0 40px 80px -42px rgba(20,15,5,.55); overflow:hidden; } .plate::after{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(120% 70% at 50% 0%, rgba(58,154,171,.08), transparent 60%); } .plate__art{ width: min(62%, 240px); align-self:center; position:relative; z-index:1; } .plate__eyebrow{ position:relative; z-index:1; text-align:center; font-family: var(--sans); font-weight:600; font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:#3a9aab; padding-bottom: clamp(14px,2vw,20px); border-bottom:1px solid rgba(238,223,196,.14); } .plate__index{ display:flex; flex-direction:column; position:relative; z-index:1; } .plate__cad{ display:flex; gap:15px; align-items:flex-start; padding: 18px 2px; border-bottom:1px solid rgba(238,223,196,.14); transition: padding-left .25s; } .plate__cad:hover{ padding-left: 10px; } .plate__dot{ width:9px; height:9px; border-radius:50%; margin-top:7px; flex:none; } .plate__dot--verde{ background:#8fa86f; } .plate__dot--ocre{ background:#cf6a2c; } .plate__txt b{ font-family: var(--serif); font-size: 1.3rem; color: var(--c-areia); display:block; line-height:1.1; } .plate__desc{ font-family: var(--sans); font-size:.82rem; color:#a99d82; line-height:1.5; margin-top:6px; display:block; } .plate__cta{ position:relative; z-index:1; align-self:flex-start; margin-top: 4px; display:inline-flex; align-items:center; gap:.55em; font-family:var(--sans); font-weight:600; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:#3a9aab; padding-bottom:3px; border-bottom:1px solid rgba(58,154,171,.4); } .plate__cta .arw{ transition: transform .25s; } .plate__cta:hover .arw{ transform: translateX(4px); } /* ========================================================= FAIXA CREDIBILIDADE ========================================================= */ .trust{ border-block: 1px solid var(--hair); background: var(--bg-alt); } .trust .wrap{ display:grid; grid-template-columns: repeat(4, 1fr); padding-block: 0; } .trust .ti{ display:flex; flex-direction:column; gap:7px; padding: 30px clamp(18px,2.4vw,40px); border-left:1px solid var(--hair); font-family:var(--sans); } .trust .ti:first-child{ border-left:none; padding-left:0; } .trust .ti__k{ font-size:.64rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color: var(--accent); } .trust .ti b{ font-family: var(--serif); font-weight:500; font-size:1.15rem; color: var(--fg); line-height:1.2; } .trust .ti__s{ font-size:.74rem; color: var(--fg-soft); line-height:1.4; } /* ========================================================= SECTION HEAD ========================================================= */ .shead{ max-width: 760px; margin-bottom: clamp(40px, 6vw, 70px); } .shead.center{ margin-inline:auto; text-align:center; } .shead .kicker{ margin-bottom: 22px; } .shead h2{ margin-bottom: 22px; } /* ========================================================= SOBRE / JORNADA ========================================================= */ .about__grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px,5vw,72px); align-items:center; } .about__photo{ position:relative; } .about__photo img{ width:100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius); } .about__photo .badge{ position:absolute; right:-18px; bottom: 28px; background: var(--bg); border:1px solid var(--hair); padding: 18px 22px; box-shadow: 0 24px 50px -28px rgba(0,0,0,.4); max-width: 230px; } .about__photo .badge b{ font-family:var(--serif); font-size: 1.2rem; display:block; } .about__photo .badge span{ font-family:var(--sans); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-soft); } .about p + p{ margin-top: 1.1em; } .about .lead{ color: var(--fg); } /* timeline pensar/fazer */ .duo{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 34px; } .duo .card{ border:1px solid var(--hair); padding: 24px; border-radius: var(--radius); } .duo .card .lbl{ font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color: var(--accent); } .duo .card h4{ font-size: 1.25rem; margin: 8px 0 6px; } .duo .card p{ font-size:.92rem; color:var(--fg-soft); } /* ========================================================= CONCEITOS (requalificação / virada de espaço) ========================================================= */ .concepts{ background: var(--bg-alt); border-top:1px solid var(--hair); } .concepts .kicker{ color: var(--c-verde); } .concepts h2{ color: var(--fg); } .concepts .lead{ color: var(--fg-soft); } .concept-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,3vw,44px); margin-top: 10px; } .concept{ padding: 38px 34px; border:1px solid var(--hair); border-radius: var(--radius); position:relative; overflow:hidden; transition: border-color .3s, background .3s; background: var(--bg); } .concept:hover{ border-color: var(--c-verde); } .concept__head{ display:flex; align-items:center; gap:10px; margin-bottom:18px; } .concept__tag{ font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color: var(--fg-soft); } .concept:first-child .concept__tag{ color:#5e7a4e; } .concept:last-child .concept__tag{ color:#a6772f; } .concept .num{ font-family:var(--serif); font-size: 3rem; color: var(--c-verde); opacity:.45; line-height:1; } .concept h3{ color: var(--fg); margin: 0 0 12px; } .concept p{ color: var(--fg-soft); font-size: .98rem; } .concept:first-child .tagword{ color:#5e7a4e; } .concept .tagword{ display:inline-block; margin-top:18px; font-family:var(--sans); font-weight:600; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color: var(--c-ocre); } /* ========================================================= IMÓVEIS ========================================================= */ .props__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom: 44px; } .prop-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2vw,26px); } .prop{ position:relative; border-radius: var(--radius); overflow:hidden; background: var(--bg-alt); cursor:pointer; } .prop .ph{ aspect-ratio: 3/4; position:relative; overflow:hidden; } .prop .ph .placeholder{ width:100%; height:100%; } .prop:hover .ph .placeholder{ transform: scale(1.04); } .prop .ph .placeholder{ transition: transform .6s cubic-bezier(.2,0,.1,1); } .prop__meta{ position:absolute; inset:auto 0 0 0; padding: 20px; z-index:2; background: linear-gradient(to top, rgba(13,13,13,.82), rgba(13,13,13,0)); color:#f4ecda; } .prop__meta .loc{ font-family:var(--sans); font-weight:600; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color: var(--c-areia); opacity:.9; } .prop__meta h4{ color:#fff; font-size:1.3rem; margin:5px 0 2px; } .prop__meta .det{ font-family:var(--sans); font-size:.82rem; opacity:.85; } .prop .corner{ position:absolute; top:14px; right:14px; z-index:2; background: var(--c-areia); color: var(--c-ink); font-family:var(--sans); font-weight:700; font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; padding:.5em .8em; border-radius:var(--radius); } /* selo de endosso pessoal — usar com escassez */ .prop__seal{ position:absolute; top:14px; left:14px; z-index:3; display:inline-flex; align-items:center; gap:.5em; background: color-mix(in srgb, var(--c-areia) 94%, transparent); color: var(--c-ink); font-family: var(--serif); font-style: italic; font-size: .92rem; line-height:1; padding:.55em .85em; border-radius: var(--radius); transform: rotate(-2.5deg); box-shadow: 0 8px 22px -12px rgba(0,0,0,.5); backdrop-filter: blur(2px); white-space: nowrap; } .prop__seal svg{ color: var(--c-ocre); flex:none; } .legend{ display:inline-flex; align-items:center; gap:.7em; margin-bottom: 30px; flex-wrap:wrap; font-family: var(--sans); font-size:.82rem; color: var(--fg-soft); } .legend .seal-mini{ display:inline-flex; align-items:center; gap:.45em; font-family: var(--serif); font-style:italic; font-size:.95rem; color: var(--fg); border:1px solid var(--hair); padding:.35em .7em; border-radius:var(--radius); white-space:nowrap; } .legend .seal-mini svg{ color: var(--c-ocre); } .props__foot{ margin-top: 40px; display:flex; gap:18px; align-items:center; flex-wrap:wrap; justify-content:center; text-align:center; flex-direction:column; } .props__foot p{ color: var(--fg-soft); } /* placeholder striped */ .placeholder{ position:relative; background: repeating-linear-gradient(135deg, var(--bg-alt) 0 14px, color-mix(in srgb, var(--bg-alt) 80%, var(--fg) 8%) 14px 28px); display:flex; align-items:center; justify-content:center; } .placeholder span{ font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size:.68rem; letter-spacing:.08em; color: var(--fg-soft); background: var(--bg); padding:.4em .7em; border-radius:2px; opacity:.9; text-align:center; } /* ========================================================= QUERO VENDER (faixa escura) ========================================================= */ .sell{ background: var(--bg); --accent: #b5541f; border-top:1px solid var(--hair); } .sell__head{ margin-bottom: clamp(30px,4vw,52px); } .sell__body{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(34px,5vw,80px); align-items:start; } .sell .kicker{ color: var(--c-ocre); } .sell h2{ color: var(--fg); margin: 22px 0; } .sell .lead{ color: var(--fg-soft); } .sell__steps{ margin-top: 30px; display:grid; grid-template-columns:1fr 1fr; gap: 24px 30px; } .sell__steps .st{ display:flex; gap:14px; padding: 0; border-bottom:none; } .sell__steps .st:last-child{ border-bottom:none; } @media (max-width: 520px){ .sell__steps{ grid-template-columns:1fr; } } .sell__steps .st .n{ font-family:var(--serif); font-size:1.2rem; color: var(--c-ocre); flex:none; width:34px; } .sell__steps .st b{ display:block; font-family:var(--sans); font-weight:600; font-size:1rem; color: var(--fg); margin-bottom:2px; } .sell__steps .st p{ font-size:.9rem; color: var(--fg-soft); } /* ========================================================= FORM / CAPTURA DE LEAD ========================================================= */ .form-card{ background: var(--bg); border:1px solid var(--hair); border-radius: var(--radius); padding: clamp(26px,3vw,40px); box-shadow: 0 40px 80px -50px rgba(0,0,0,.4); } .sell .form-card{ background: var(--bg-alt); } .form-card h3{ font-size:1.5rem; margin-bottom: 6px; } .form-card .fsub{ color: var(--fg-soft); font-size:.92rem; margin-bottom: 24px; } .seg{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-bottom: 20px; } .seg--3{ grid-template-columns: 1fr 1fr 1fr; } .seg--3 button{ text-align:center; padding: 12px 8px; } .seg button{ border:1px solid var(--hair); padding: 14px; border-radius: var(--radius); text-align:left; font-family:var(--sans); font-size:.86rem; font-weight:500; color: var(--fg); transition:.2s; line-height:1.3; } .seg button .sl{ display:block; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-soft); margin-bottom:4px; } .seg button.active{ border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--fg); } .seg button.active .sl{ color: var(--accent); } .field{ margin-bottom: 16px; } .field label{ display:block; font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color: var(--fg-soft); margin-bottom: 7px; } .field input, .field select, .field textarea{ width:100%; font-family:var(--sans); font-size:.95rem; color: var(--fg); background: var(--bg-alt); border:1px solid var(--hair); border-radius: var(--radius); padding: 13px 14px; transition:.2s; } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--accent); background: var(--bg); } .field input.err, .field select.err{ border-color: var(--c-ocre); } .field .msg{ font-size:.74rem; color: var(--c-ocre); margin-top:5px; min-height: 0; } .row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .form-card .btn{ width:100%; justify-content:center; margin-top: 8px; } .form-note{ font-size:.74rem; color: var(--fg-soft); text-align:center; margin-top:14px; } .form-success{ text-align:center; padding: 30px 10px; } .form-success .ic{ width:64px; height:64px; border-radius:50%; background: color-mix(in srgb, var(--accent) 18%, transparent); display:flex; align-items:center; justify-content:center; margin: 0 auto 18px; color: var(--accent); } .form-success h3{ margin-bottom:8px; } .form-success p{ color: var(--fg-soft); } /* ========================================================= BLOG / MORADA ========================================================= */ .blog__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom: 46px; } .feat{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px,4vw,56px); align-items:center; margin-bottom: 56px; } .feat__media{ position:relative; aspect-ratio: 5/4; border-radius:var(--radius); overflow:hidden; } .feat__media .placeholder{ width:100%; height:100%; } .feat__media .ribbon{ position:absolute; top:16px; left:16px; background:var(--accent); color:var(--on-accent); font-family:var(--sans); font-weight:700; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; padding:.5em .9em; } .feat__body .meta{ display:flex; gap:14px; align-items:center; font-family:var(--sans); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-soft); margin-bottom:16px; } .feat__body h3{ font-size: clamp(1.6rem,3vw,2.4rem); margin-bottom: 16px; } .feat__body p{ color: var(--fg-soft); margin-bottom: 24px; } .post-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2.5vw,30px); } .post{ border-top:1px solid var(--hair); padding-top: 22px; } .post .cat{ font-family:var(--sans); font-weight:600; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color: var(--accent); } .post h4{ font-size: 1.3rem; margin:12px 0 10px; transition: color .2s; } .post:hover h4{ color: var(--accent); } .post p{ font-size:.9rem; color: var(--fg-soft); margin-bottom: 14px; } .post .pmeta{ font-family:var(--sans); font-size:.72rem; color: var(--fg-soft); letter-spacing:.04em; } .post .pmeta.soon{ color: var(--accent-2); } /* newsletter */ .news{ background: var(--bg-alt); border:1px solid var(--hair); border-radius: var(--radius); padding: clamp(30px,4vw,56px); margin-top: 60px; display:grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items:center; } .news h3{ font-size: clamp(1.6rem,2.6vw,2.2rem); margin-bottom: 12px; } .news p{ color: var(--fg-soft); } .news__form{ display:flex; gap:10px; flex-wrap:wrap; } .news__form input{ flex:1; min-width: 200px; font-family:var(--sans); font-size:.95rem; padding: 14px 16px; border:1px solid var(--hair); background: var(--bg); border-radius:var(--radius); color: var(--fg); } .news__form input:focus{ outline:none; border-color: var(--accent); } /* ========================================================= MORADA — caderno neutro, assinatura verde ========================================================= */ .morada-block{ background: var(--bg-alt); --accent: #355140; border-top:1px solid var(--hair); } .morada-block .feat__media .ribbon{ background: var(--c-verde); color: var(--c-areia); } .morada-block .post .cat{ color: var(--c-verde); } .morada-block .post .pmeta.soon{ color: var(--c-ocre); } .morada-block .news{ background: var(--bg); } /* ========================================================= CONTATO ========================================================= */ .contact{ background: var(--bg-alt); border-top:1px solid var(--hair); } .contact .wrap{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(34px,5vw,80px); align-items:center; } .contact .kicker{ color: var(--c-teal); } .contact h2{ margin: 20px 0; } .contact__list{ display:flex; flex-direction:column; gap: 2px; } .contact__list a, .contact__list .ci{ display:flex; align-items:center; gap:16px; padding: 16px 0; border-bottom:1px solid var(--hair); transition: color .2s; } .contact__list a:hover{ color: var(--c-teal); } .contact__list .ci-ic{ width:40px; height:40px; border:1px solid var(--hair); border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; } .contact__list b{ font-family:var(--sans); font-weight:600; font-size:.95rem; display:block; } .contact__list span{ font-family:var(--sans); font-size:.78rem; color: var(--fg-soft); letter-spacing:.04em; } /* ========================================================= ASSINATURA ÚNICA (Morada + Varanda) ========================================================= */ .subscribe{ background: var(--c-ink); position:relative; overflow:hidden; } .subscribe__art{ position:absolute; right:-40px; bottom:-30px; width:min(38vw,380px); opacity:.14; pointer-events:none; } .subscribe .wrap{ position:relative; z-index:1; } .subscribe__inner{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,72px); align-items:center; } .subscribe .kicker{ color:#3a9aab; } .subscribe .kicker::before{ background:#3a9aab; } .subscribe h2{ color:#fff; margin:20px 0; } .subscribe .lead{ color:#cdbf9f; } .subscribe__cadence{ display:flex; gap:28px; margin-top:26px; flex-wrap:wrap; } .subscribe__cadence .sc{ display:flex; align-items:center; gap:9px; font-family:var(--sans); font-size:.92rem; color:#a99d82; } .subscribe__cadence .sc b{ color:#fff; font-weight:600; } .subscribe__form{ background: rgba(255,255,255,.05); border:1px solid rgba(238,223,196,.16); border-radius:var(--radius); padding: clamp(24px,3vw,36px); } .subscribe__form label{ display:block; font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#a99d82; margin-bottom:10px; } .subscribe__row{ display:flex; gap:10px; flex-wrap:wrap; } .subscribe__row input{ flex:1; min-width:200px; font-family:var(--sans); font-size:.95rem; padding:14px 16px; border:1px solid rgba(238,223,196,.2); background:#1b1914; color:#f4ecda; border-radius:var(--radius); } .subscribe__row input::placeholder{ color:#8f8265; } .subscribe__row input:focus{ outline:none; border-color:#3a9aab; } .subscribe__form .btn-primary{ background:#0f7d8e; color:#fff; } .subscribe__form .btn-primary:hover{ background:#13909f; } .subscribe__form .form-note{ color:#8f8265; margin-top:12px; } /* ---- Assinatura do MORADA (lançamento): fundo verde da paleta + detalhes ocre ---- */ body[data-launch="blog-vender"] .subscribe{ background: var(--c-verde); } body[data-launch="blog-vender"] .subscribe .kicker{ color:#d9702f; } body[data-launch="blog-vender"] .subscribe .kicker::before{ background:#d9702f; } body[data-launch="blog-vender"] .subscribe__art [stroke]{ stroke:#d9702f !important; } body[data-launch="blog-vender"] .subscribe__art{ opacity:.2; } /* caixa do Substack em cartão claro (areia) com borda ocre */ .subscribe__substack{ display:flex; flex-direction:column; gap:12px; background: var(--c-areia); border:1px solid color-mix(in srgb, var(--c-ocre) 38%, transparent); border-radius: var(--radius); padding: clamp(20px,3vw,30px); } .subscribe__substack iframe{ width:100%; min-height:160px; border:0; background:transparent; border-radius:8px; } .subscribe__substack .form-note{ color: color-mix(in srgb, var(--c-ink) 62%, transparent); margin:0; font-size:.8rem; } /* Varanda — aside (assinatura unificada) */ .varanda__aside{ display:flex; flex-direction:column; gap:18px; align-items:flex-start; } .varanda__aside-quote{ font-style:italic; font-size:1.2rem; color:var(--fg-soft); line-height:1.45; } /* ========================================================= FOOTER ========================================================= */ .footer{ background: var(--c-ink); color: #b9ad92; } .footer .wrap{ padding-block: 64px 40px; } .footer__top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom:1px solid #2b291f; } .footer__logo{ height: 70px; margin-bottom: 20px; } .footer__top p{ font-size:.9rem; max-width: 32ch; color:#9c906f; } .footer h5{ font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#f1e7d2; margin-bottom: 18px; } .footer ul{ list-style:none; display:flex; flex-direction:column; gap: 11px; } .footer ul a{ font-size:.9rem; color:#b9ad92; transition:.2s; } .footer ul a:hover{ color: var(--c-areia); } .footer__bot{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; padding-top: 26px; font-size:.78rem; color:#7d7459; } .footer__bot .soc{ display:flex; gap:14px; } .footer__bot .soc a:hover{ color: var(--c-areia); } /* ========================================================= MODO LANÇAMENTO — só blog + quero vender (Imóveis fica escondido, pronto pra reativar: basta remover data-launch="blog-vender" do ) ========================================================= */ body[data-launch="blog-vender"] #imoveis, body[data-launch="blog-vender"] #varanda, body[data-launch="blog-vender"] #sobre, body[data-launch="blog-vender"] .trust, body[data-launch="blog-vender"] .lk-imoveis, body[data-launch="blog-vender"] [data-when="full"]{ display: none !important; } body:not([data-launch="blog-vender"]) [data-when="launch"]{ display: none; } /* logotipo temporário em texto (modo lançamento) */ .logo-text{ font-family: var(--sans); font-weight: 700; text-transform: uppercase; color: var(--fg); letter-spacing: .34em; } .masthead__logo .logo-text{ font-size: clamp(1.4rem, 4.2vw, 2.3rem); padding-left: .34em; } .snav__logo .logo-text{ font-size: .95rem; letter-spacing: .26em; padding-left: .26em; } /* seta "Voltar" no masthead das páginas internas */ .masthead__back{ justify-self:start; display:inline-flex; align-items:center; gap:.5em; font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-soft); transition: color .2s, gap .2s; } .masthead__back span{ font-size:1.15em; } .masthead__back:hover{ color:var(--accent); gap:.8em; } /* próxima leitura em preparação (sem box, só texto) */ .nextup__prep{ margin-top:16px; font-family:var(--sans); font-weight:700; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--c-ocre); } /* ========================================================= INSTAGRAM — feed ========================================================= */ .insta__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom: clamp(28px,4vw,44px); } .insta__head--center{ flex-direction:column; align-items:center; text-align:center; gap:0; } .insta__head--center .h2{ max-width: 18ch; } .insta__follow{ flex-shrink:0; } .insta__grid{ display:grid; grid-template-columns: repeat(6,1fr); gap: clamp(8px,1vw,14px); } .insta__tile{ position:relative; aspect-ratio:1/1; border-radius: var(--radius); overflow:hidden; background: var(--bg-alt); display:block; } .insta__tile .placeholder{ width:100%; height:100%; } .insta__tile img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s cubic-bezier(.2,0,.1,1); } .insta__tile:hover img{ transform: scale(1.05); } .insta__ov{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; opacity:0; background: rgba(22,20,15,0); transition: opacity .3s, background .3s; } .insta__tile:hover .insta__ov{ opacity:1; background: rgba(22,20,15,.42); } .insta__ov--always{ opacity:1; background: transparent; color: color-mix(in srgb, var(--c-ocre) 75%, var(--fg)); } .insta__tile:hover .insta__ov--always{ background: rgba(22,20,15,.30); color:#fff; } @media (max-width: 860px){ .insta__grid{ grid-template-columns: repeat(3,1fr); } } @media (max-width: 480px){ .insta__grid{ grid-template-columns: repeat(2,1fr); } } .insta__grid.insta__grid--two{ grid-template-columns: repeat(2, minmax(0,360px)); justify-content:center; } @media (max-width: 520px){ .insta__grid.insta__grid--two{ grid-template-columns: 1fr; max-width:360px; margin-inline:auto; } } .insta__widget{ margin-top: clamp(28px,4vw,44px); } /* Morada — só 3 edições por padrão; "Ver outras edições" revela o restante */ #morada-grid .arch-card--hidden{ display:none; } #morada-grid.show-all .arch-card--hidden{ display:block; } /* Morada — cards sem imagem; status NO AR / EM PREPARAÇÃO */ #morada-grid .arch-card__thumb{ display:none; } .arch-status{ display:inline-flex; align-items:center; gap:.55em; font-family:var(--sans); font-weight:700; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; padding:.55em 1em; border-radius:2px; margin-bottom:16px; } .arch-status--live{ background:var(--c-verde); color:var(--c-areia); } .arch-status--live::before{ content:""; width:6px; height:6px; border-radius:50%; background:#8fcf99; } .arch-status--prep{ background:transparent; color:var(--c-ocre); border:1px solid color-mix(in srgb, var(--c-ocre) 50%, transparent); } .arch-card--locked{ cursor: default; } #morada-grid .arch-card{ padding-bottom: 8px; } /* ========================================================= VARIANTES (Tweaks) ========================================================= */ /* hero: retrato à esquerda */ body[data-hero="esquerda"] .hero__grid{ grid-template-columns: .85fr 1.15fr; } body[data-hero="esquerda"] .hero__copy{ order: 2; } body[data-hero="esquerda"] .hero__photo{ order: 1; } body[data-hero="esquerda"] .hero__photo .tag{ left: auto; right: -14px; } /* hero: sem retrato (tipográfico, centrado) */ body[data-hero="tipografico"] .hero__grid{ grid-template-columns: 1fr; text-align: center; } body[data-hero="tipografico"] .hero__photo{ display: none; } body[data-hero="tipografico"] .hero h1{ font-size: clamp(2.9rem, 8vw, 6rem); max-width: 14ch; margin-inline: auto; } body[data-hero="tipografico"] .hero__sub{ margin-inline: auto; } body[data-hero="tipografico"] .hero__paths{ justify-content: center; } body[data-hero="tipografico"] .hero__meta{ justify-content: center; } body[data-hero="tipografico"] .hero__eyebrow{ display:block; } /* títulos em Montserrat (modo "Fazer") */ body[data-display="sans"] h1, body[data-display="sans"] h2, body[data-display="sans"] h3, body[data-display="sans"] h4, body[data-display="sans"] .serif{ font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; } body[data-display="sans"] .hero h1 em, body[data-display="sans"] em.it{ font-style: normal; } /* ========================================================= VARANDA — a carta semanal (identidade quente) ========================================================= */ .varanda{ background: var(--bg); --accent: #9a4a1c; border-top:1px solid var(--hair); } .varanda .kicker{ color: var(--c-ocre); } .varanda h2{ color: var(--fg); } .varanda .lead{ color: var(--fg-soft); } .varanda .eyebrow{ color: var(--c-ocre); } .varanda .link-underline{ color: var(--c-ocre); border-bottom-color: color-mix(in srgb, var(--c-ocre) 40%, transparent); } .varanda__panel{ display:grid; grid-template-columns: 1.4fr .9fr; gap: clamp(24px,4vw,56px); background: var(--bg-alt); border:1px solid var(--hair); border-radius: var(--radius); padding: clamp(28px,4vw,52px); align-items:center; } .varanda__latest .vstamp{ font-family: var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color: var(--c-ocre); margin-bottom: 16px; display:inline-flex; align-items:center; gap:.6em; } .varanda__latest .vstamp::before{ content:""; width:26px; height:1px; background: currentColor; opacity:.6; } .varanda__latest h3{ color: var(--fg); font-size: clamp(1.6rem,3vw,2.4rem); margin-bottom: 14px; } .varanda__latest .vexcerpt{ color: var(--fg-soft); font-family: var(--serif); font-style: italic; font-size: 1.12rem; line-height:1.55; margin-bottom: 22px; max-width: 42ch; } .varanda__sub{ border-left: 1px solid var(--hair); padding-left: clamp(20px,3vw,40px); } .varanda__archive{ display:inline-flex; align-items:center; gap:.7em; margin-top: 34px; font-family: var(--sans); font-weight:600; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color: var(--c-ocre); border:1px solid var(--hair); padding: .9em 1.5em; border-radius: var(--radius); transition:.25s; } .varanda__archive:hover{ background: var(--bg-alt); border-color: var(--c-ocre); } .varanda__archive .arw{ transition: transform .25s; } .varanda__archive:hover .arw{ transform: translateX(4px); } @media (max-width: 1000px){ .varanda__panel{ grid-template-columns: 1fr; } .varanda__sub{ border-left:none; padding-left:0; border-top:1px solid var(--hair); padding-top: 26px; } } /* ========================================================= PÁGINA VARANDA (canal da carta) ========================================================= */ .vhero{ background: var(--c-marrom); color: var(--c-areia); padding-top: clamp(130px,17vh,190px); padding-bottom: clamp(40px,6vw,72px); position:relative; overflow:hidden; } .vhero .back{ font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#e6c9a6; display:inline-flex; gap:.5em; align-items:center; margin-bottom: 30px; transition:.2s; } .vhero .back:hover{ color:#fff; } .vhero .vkick{ font-family:var(--sans); font-weight:600; font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:#e6c9a6; margin-bottom: 22px; } .vhero h1{ font-family: var(--serif); font-size: clamp(2.6rem,6vw,4.6rem); color:#fff; line-height:1.05; max-width: 15ch; margin-bottom: 24px; } .vhero h1 em{ font-style: italic; color: var(--c-areia); } .vhero .vintro{ font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem,2vw,1.6rem); color:#ecd9c2; max-width: 34ch; line-height:1.45; } .vhero .vmeta{ margin-top: 34px; display:flex; gap:26px 40px; flex-wrap:wrap; } .vhero .vmeta .mi b{ font-family:var(--serif); font-size:1.5rem; display:block; color:#fff; line-height:1; } .vhero .vmeta .mi span{ font-family:var(--sans); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#d8b896; } .vhero__sub{ margin-top: 36px; display:flex; gap:10px; flex-wrap:wrap; max-width: 480px; } .vhero__sub input{ flex:1; min-width:200px; font-family:var(--sans); font-size:.95rem; padding:14px 16px; border:1px solid #9a5a31; background:#6e3413; color:#fbeee0; border-radius:var(--radius); } .vhero__sub input::placeholder{ color:#c79d7c; } .vhero__sub input:focus{ outline:none; border-color:var(--c-areia); } .vhero__sub .btn-primary{ background:var(--c-areia); color:var(--c-marrom); } .vhero__sub .btn-primary:hover{ background:#fff; } /* carta em destaque */ .letter{ max-width: 720px; margin: clamp(40px,6vw,72px) auto 0; } .letter__head{ text-align:center; padding-bottom: 30px; margin-bottom: 36px; border-bottom: 1px solid var(--hair); } .letter__head .stamp{ font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color: var(--accent); margin-bottom: 16px; } .letter__head h2{ font-size: clamp(1.9rem,4vw,2.8rem); margin-bottom: 14px; } .letter__head .when{ font-family:var(--sans); font-size:.8rem; letter-spacing:.06em; color: var(--fg-soft); } .letter__body p{ font-size:1.15rem; line-height:1.75; margin-bottom: 1.4em; color: var(--fg); } .letter__body p.greeting{ font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--fg); } .letter__body p.dropcap::first-letter{ font-family: var(--serif); font-size: 3.4em; float:left; line-height:.78; padding:6px 12px 0 0; color: var(--accent); } .letter__body h3{ font-family: var(--serif); font-size: 1.4rem; margin: 1.6em 0 .5em; } .letter__body .sign{ margin-top: 2em; font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--fg); } .letter__body .sign span{ display:block; font-family:var(--sans); font-style:normal; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color: var(--fg-soft); margin-top: 8px; } .letter__body h3.letter-section{ font-family: var(--sans); font-weight:700; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color: var(--accent); margin: 2.2em 0 1em; padding-bottom: 12px; border-bottom: 1px solid var(--hair); display:flex; align-items:center; gap:.7em; } .letter__body h3.letter-section::before{ content:""; width:7px; height:7px; background: var(--accent); border-radius:50%; flex:none; } .letter__body p b{ color: var(--fg); font-weight:600; } .letter-motto{ margin-top: 2.4em; padding-top: 1.6em; border-top: 1px solid var(--hair); font-style: italic; font-size: 1.5rem; color: var(--accent); text-align:center; } /* arquivo de cartas */ .archive{ max-width: 860px; margin: clamp(50px,7vw,90px) auto 0; } .archive .lbl{ font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color: var(--fg-soft); margin-bottom: 8px; } .archive h2{ font-size: clamp(1.6rem,3vw,2.2rem); margin-bottom: 28px; } .letter-row{ display:flex; gap: 22px; align-items:baseline; padding: 22px 0; border-top:1px solid var(--hair); transition:.2s; } .letter-row:hover{ padding-left: 8px; } .letter-row .no{ font-family:var(--serif); font-size:1.3rem; color: var(--accent); flex:none; width: 64px; } .letter-row .lr-body{ flex:1; } .letter-row h3{ font-size: 1.3rem; margin-bottom: 4px; transition: color .2s; } .letter-row:hover h3{ color: var(--accent); } .letter-row .lr-meta{ font-family:var(--sans); font-size:.76rem; letter-spacing:.06em; color: var(--fg-soft); } .letter-row .lr-when{ font-family:var(--sans); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color: var(--fg-soft); flex:none; } .letter-row .lr-when.soon{ color: var(--accent-2); } @media (max-width:760px){ .letter-row{ flex-wrap:wrap; gap:6px; } .letter-row .no{ width:auto; } .letter-row .lr-when{ width:100%; } } /* ========================================================= ARTIGO (página do blog) ========================================================= */ .art-hero{ padding-top: clamp(130px, 17vh, 190px); padding-bottom: clamp(30px,5vw,56px); } .art-hero .back{ font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--fg-soft); display:inline-flex; gap:.5em; align-items:center; margin-bottom: 34px; transition: color .2s; } .art-hero .back:hover{ color: var(--accent); } .art-hero .meta{ display:flex; gap:14px; align-items:center; font-family:var(--sans); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color: var(--accent); margin-bottom: 24px; } .art-hero .meta .sep{ color: var(--fg-soft); } .art-hero h1{ font-size: clamp(2.3rem, 5.2vw, 4rem); max-width: 16ch; margin-bottom: 24px; } .art-hero .dek{ font-family:var(--serif); font-style:italic; font-size: clamp(1.2rem,2vw,1.6rem); color: var(--fg-soft); max-width: 30ch; line-height:1.4; } .art-cover{ aspect-ratio: 16/7; border-radius: var(--radius); overflow:hidden; margin-bottom: clamp(40px,6vw,72px); } .art-cover .placeholder{ width:100%; height:100%; } .art-cover img{ width:100%; height:100%; object-fit:cover; object-position:center 38%; display:block; } .article{ max-width: 720px; margin-inline:auto; } .article p{ font-size: 1.15rem; line-height: 1.75; margin-bottom: 1.5em; color: var(--fg); } .article p.dropcap::first-letter{ font-family: var(--serif); font-size: 3.6em; float:left; line-height:.78; padding: 6px 12px 0 0; color: var(--accent); } .article h2{ font-size: clamp(1.6rem,3vw,2.2rem); margin: 1.8em 0 .7em; } .article h2 .lbl{ display:block; font-family:var(--sans); font-weight:600; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color: var(--accent); margin-bottom: 10px; } .article blockquote{ margin: 1.8em 0; padding: 4px 0 4px 30px; border-left: 3px solid var(--accent); font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem,2.4vw,1.85rem); line-height:1.35; color: var(--fg); } .article .tags, .letter__body .tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 40px; padding-top: 30px; border-top:1px solid var(--hair); } .article .tags span, .letter__body .tags span{ font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--fg-soft); border:1px solid var(--hair); padding:.5em .9em; border-radius: 100px; } /* assinatura do autor */ .author{ max-width: 720px; margin: clamp(46px,6vw,70px) auto 0; padding: 30px; border:1px solid var(--hair); border-radius: var(--radius); background: var(--bg-alt); display:flex; gap:22px; align-items:center; } .author img{ width:84px; height:84px; border-radius:50%; object-fit:cover; flex:none; } .author b{ font-family:var(--serif); font-size:1.25rem; display:block; } .author .role{ font-family:var(--sans); font-size:.82rem; color: var(--fg-soft); margin-top:3px; } .author .role .nx{ color: var(--accent); } /* next up */ .nextup{ max-width: 720px; margin: 50px auto clamp(56px,8vw,96px); } .nextup .lbl{ font-family:var(--sans); font-weight:600; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color: var(--fg-soft); margin-bottom:14px; } .nextup a{ display:block; padding: 26px; border:1px solid var(--hair); border-radius:var(--radius); transition:.25s; } .nextup a:hover{ border-color: var(--accent); } .nextup .cat{ font-family:var(--sans); font-weight:600; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color: var(--accent); } .nextup h3{ font-size: 1.5rem; margin: 10px 0 0; } @media (max-width:760px){ .author{ flex-direction:column; text-align:center; } .art-cover{ aspect-ratio: 4/3; } } /* ========================================================= reveal anim ========================================================= */ .reveal{ opacity:0; transform: translateY(26px); } .reveal.in{ animation: revealIn .8s cubic-bezier(.2,0,.1,1) forwards; } .reveal.d1.in{ animation-delay:.08s; } .reveal.d2.in{ animation-delay:.16s; } .reveal.d3.in{ animation-delay:.24s; } @keyframes revealIn{ from{ opacity:0; transform: translateY(26px); } to{ opacity:1; transform: none; } } /* failsafe: nunca deixa conteúdo invisível se a animação não rodar */ html.reveal-off .reveal{ opacity:1 !important; transform:none !important; animation:none !important; } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } .reveal.in{ animation:none; } } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1000px){ .hero__grid{ grid-template-columns: 1fr; } .hero__plate{ max-width: 460px; } .about__grid, .sell__body, .concept-grid, .feat, .news, .contact .wrap, .subscribe__inner, .varanda__panel{ grid-template-columns: 1fr; } .prop-grid, .post-grid{ grid-template-columns: 1fr 1fr; } .footer__top{ grid-template-columns: 1fr 1fr; } .about__photo{ max-width: 460px; } .news{ gap: 22px; } .trust .wrap{ grid-template-columns: 1fr 1fr; } .trust .ti{ border-left:none; padding: 22px 0; } .trust .ti:nth-child(even){ padding-left: clamp(18px,3vw,30px); border-left:1px solid var(--hair); } } @media (max-width: 760px){ body{ font-size: 16px; } .nav__menu{ display:none; } .nav__cta .nav__wa{ display:none; } .nav__burger{ display:flex; } .nav__cta{ gap: 6px; } .duo, .seg, .row2{ grid-template-columns: 1fr; } .prop-grid, .post-grid{ grid-template-columns: 1fr; } .footer__top{ grid-template-columns: 1fr; } .hero__meta{ gap: 18px 26px; } .hero__meta .vr{ display:none; } .trust .wrap{ grid-template-columns: 1fr; } .trust .ti, .trust .ti:nth-child(even){ border-left:none; border-top:1px solid var(--hair); padding: 18px 0; } .trust .ti:first-child{ border-top:none; padding-top:0; } } /* ========================================================= EDITORIAL (estilo New Yorker) — masthead, menu, destaque ========================================================= */ .masthead{ background: var(--bg); padding-top: clamp(22px,3.5vw,40px); } .masthead__bar{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: 16px; } .masthead__left{ font-family:var(--sans); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color: var(--fg-soft); } .masthead__logo{ justify-self:center; display:block; } .masthead__logo img{ height: clamp(48px,6.5vw,80px); display:block; } .masthead__right{ justify-self:end; font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: var(--accent); transition: opacity .2s; } .masthead__right:hover{ opacity:.7; } .masthead__motto{ text-align:center; font-style:italic; font-size: clamp(1.05rem,1.9vw,1.5rem); color: var(--fg-soft); margin-top: 16px; } /* matéria atual em destaque */ .feature{ background: var(--bg); padding-block: clamp(34px,5vw,68px); border-bottom: 1px solid var(--hair); } .feature .wrap{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,5vw,68px); align-items:center; } .feature__media{ display:block; aspect-ratio: 4/3; border-radius: var(--radius); overflow:hidden; background: var(--bg-alt); } .feature__media .placeholder{ width:100%; height:100%; } .feature__kicker{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color: var(--fg-soft); margin-bottom: 18px; } .feature__title{ font-family: var(--serif); font-weight:500; font-size: clamp(2.1rem,4.4vw,3.5rem); line-height:1.07; letter-spacing:-.01em; margin-bottom: 18px; } .feature__dek{ font-family: var(--serif); font-size: clamp(1.1rem,1.7vw,1.4rem); line-height:1.5; color: var(--fg-soft); margin-bottom: 20px; max-width: 36ch; } .feature__meta{ font-family:var(--sans); font-size:.76rem; letter-spacing:.04em; color: var(--fg-soft); margin-bottom: 26px; } .feature__cta{ display:inline-flex; align-items:center; gap:.55em; font-family:var(--sans); font-weight:600; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color: var(--accent); padding-bottom:3px; border-bottom:1px solid color-mix(in srgb, var(--accent) 40%, transparent); } .feature__cta .arw{ transition: transform .25s; } .feature__cta:hover .arw{ transform: translateX(4px); } /* página /morada — edição atual em destaque + anteriores */ .morada-current{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,5vw,68px); align-items:center; margin-bottom: clamp(34px,5vw,60px); } .morada-current .feature__media{ aspect-ratio: 4/3; border-radius: var(--radius); overflow:hidden; background: var(--bg-alt); } .morada-current .feature__media img{ width:100%; height:100%; object-fit:cover; object-position:center 38%; display:block; transition: transform .5s cubic-bezier(.2,0,.1,1); } .morada-current .feature__media:hover img{ transform: scale(1.03); } .morada-current .feature__title{ font-size: clamp(1.9rem,3.6vw,2.9rem); } .morada-empty{ font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--fg-soft); padding: 40px 0; } .morada-prev{ margin-top: clamp(26px,4vw,40px); } .morada-prev .arch-card__thumb{ display:none; } @media (max-width: 1000px){ .morada-current{ grid-template-columns: 1fr; } .morada-current .feature__media{ order:-1; } } /* menu que gruda no topo */ .snav{ position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px) saturate(1.1); border-block: 1px solid var(--hair); transition: box-shadow .3s; } .snav.stuck{ box-shadow: 0 10px 30px -22px rgba(0,0,0,.4); } .snav .wrap{ display:flex; align-items:center; justify-content:center; gap: clamp(20px,3vw,42px); padding-block: 15px; position:relative; } .snav__logo{ position:absolute; left: var(--gut); top:50%; transform: translateY(-50%); opacity:0; pointer-events:none; transition: opacity .3s; } .snav.stuck .snav__logo{ opacity:1; pointer-events:auto; } .snav__logo img{ height: 26px; display:block; } .snav__links{ display:flex; gap: clamp(20px,3vw,42px); } .snav__links a{ font-family:var(--sans); font-weight:500; font-size:.82rem; letter-spacing:.06em; color: var(--fg); opacity:.82; position:relative; padding: 4px 0; } .snav__links a:hover{ opacity:1; } .snav__links a::after{ content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:0; background: var(--accent); transition: width .28s; } .snav__links a:hover::after{ width:100%; } .snav__sub{ position:absolute; right: var(--gut); top:50%; transform: translateY(-50%); font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: var(--accent); } .snav .nav__burger{ position:absolute; right: var(--gut); top:50%; transform: translateY(-50%); display:none; } .snav .nav__burger span, .snav .nav__burger span::before, .snav .nav__burger span::after{ background: var(--fg); } /* nav de páginas de artigo: logo sempre visível */ .snav--article{ border-top:none; } .snav--article .snav__logo, body.is-article .snav__logo{ opacity:1; pointer-events:auto; } /* cadernos — cabeçalho e cards de arquivo */ .caderno__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom: clamp(28px,4vw,46px); padding-bottom: 22px; border-bottom: 2px solid var(--fg); } .caderno__id{ display:flex; align-items:flex-start; gap:13px; } .caderno__id .plate__dot{ margin-top:11px; } .caderno__name{ font-family: var(--serif); font-weight:500; font-size: clamp(1.8rem,3.4vw,2.6rem); line-height:1; } .caderno__tag{ font-family:var(--sans); font-size:.8rem; color: var(--fg-soft); margin-top:7px; letter-spacing:.02em; } .caderno__head-link{ font-family:var(--sans); font-weight:600; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color: var(--accent); display:inline-flex; align-items:center; gap:.5em; } .caderno__head-link .arw{ transition: transform .25s; } .caderno__head-link:hover .arw{ transform: translateX(4px); } .arch-card{ display:block; } .arch-card__thumb{ position:relative; aspect-ratio: 4/3; border-radius: var(--radius); overflow:hidden; background: var(--bg-alt); margin-bottom: 18px; } .arch-card__thumb .placeholder{ width:100%; height:100%; } .arch-card__thumb img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; transition: transform .5s cubic-bezier(.2,0,.1,1); } a.arch-card:hover .arch-card__thumb img{ transform: scale(1.04); } .arch-card__thumb .placeholder span{ font-size:.6rem; } .arch-card__badge{ position:absolute; top:12px; left:12px; background: var(--c-verde); color: var(--c-areia); font-family:var(--sans); font-weight:700; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; padding:.45em .8em; border-radius: var(--radius); } .arch-card__badge--ocre{ background: var(--c-ocre); } .arch-card .cat{ font-family:var(--sans); font-weight:600; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color: var(--accent); } .arch-card h4{ font-family: var(--serif); font-weight:500; font-size: 1.4rem; line-height:1.15; margin: 11px 0 9px; transition: color .2s; } .arch-card h4 a{ color: inherit; transition: color .2s; } .arch-card h4 a:hover, .arch-card:hover h4 a{ color: var(--accent); } .arch-card:hover h4{ color: var(--accent); } .arch-card p{ font-size:.92rem; color: var(--fg-soft); line-height:1.55; margin-bottom: 12px; } .arch-card .pmeta{ font-family:var(--sans); font-size:.74rem; letter-spacing:.04em; color: var(--fg-soft); } .arch-card .pmeta.soon{ color: var(--accent-2); } a.arch-card .arch-card__thumb .placeholder{ transition: transform .5s cubic-bezier(.2,0,.1,1); } a.arch-card:hover .arch-card__thumb .placeholder{ transform: scale(1.04); } .caderno__more{ margin-top: clamp(30px,4vw,46px); display:flex; justify-content:center; } .more-link{ font-family:var(--sans); font-weight:600; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color: var(--fg); display:inline-flex; align-items:center; gap:.6em; border:1px solid var(--hair); padding: .9em 1.6em; border-radius: var(--radius); transition:.25s; } .more-link:hover{ border-color: var(--accent); color: var(--accent); } .more-link .arw{ transition: transform .25s; } .more-link:hover .arw{ transform: translateX(4px); } /* cor de destaque por caderno */ .morada-block{ --accent: #355140; } .morada-block .arch-card__badge{ background: var(--c-verde); } .varanda{ --accent: #9a4a1c; } /* Varanda — ilustração como base da seção + cards de texto */ .varanda__banner{ position:relative; border-radius: var(--radius); overflow:hidden; margin-bottom: clamp(30px,4vw,46px); background: var(--bg-alt); } .varanda__banner img{ width:100%; height:auto; max-height: 460px; object-fit: cover; object-position: center 60%; display:block; } .varanda__banner-cap{ position:absolute; left:0; right:0; bottom:0; margin:0; padding: clamp(40px,7vw,72px) clamp(20px,3vw,40px) clamp(18px,2.5vw,28px); font-style:italic; font-size: clamp(1.2rem,2.2vw,1.75rem); color:#fff; background: linear-gradient(to top, rgba(20,15,5,.62), transparent); } .varanda__cards{ border-top: 2px solid var(--fg); padding-top: clamp(26px,3.5vw,40px); } .arch-card--text{ display:block; } .arch-card--text .cat .tag-live{ display:inline-block; background: var(--c-ocre); color:#fff; font-weight:700; font-size:.6rem; letter-spacing:.12em; padding:.35em .6em; border-radius: var(--radius); margin-right:.5em; vertical-align:middle; } /* Sobre — bloco do portal (duas ideias) */ .about-portal{ margin-top: clamp(50px,7vw,90px); padding-top: clamp(40px,5vw,64px); border-top:1px solid var(--hair); } .about-portal .shead{ margin-bottom: clamp(30px,4vw,44px); } @media (max-width: 1000px){ .feature .wrap{ grid-template-columns: 1fr; } .feature__media{ order:-1; } } @media (max-width: 760px){ .masthead__left, .masthead__right{ display:none; } .masthead__bar{ grid-template-columns: 1fr; } .snav__links, .snav__sub{ display:none; } .snav .nav__burger{ display:flex; } .snav .wrap{ justify-content:flex-start; padding-block: 12px; } .snav__logo{ position:static; transform:none; opacity:1; pointer-events:auto; } }