/* ============================================================ Loteamento Panorama — base styles + 3 style directions Style directions are toggled via [data-style] on : raizes — editorial, warm, serif headings (Lora) horizonte — modern clean, green-forward (Bricolage Grotesque) refugio — immersive, earthy, dark green (Newsreader) ============================================================ */ :root { /* shared neutrals (warm, low chroma) */ --ink: oklch(0.26 0.012 75); --ink-soft: oklch(0.44 0.014 75); --ink-faint: oklch(0.60 0.012 75); --line: oklch(0.88 0.010 85); --line-soft: oklch(0.92 0.008 85); /* defaults (overridden per style) */ --bg: oklch(0.975 0.008 85); --surface: oklch(0.995 0.004 85); --surface-2: oklch(0.955 0.012 85); --green: oklch(0.40 0.060 152); --green-deep: oklch(0.30 0.050 152); --green-tint: oklch(0.93 0.020 150); --clay: oklch(0.58 0.105 48); --clay-soft: oklch(0.93 0.030 55); --accent: var(--clay); --font-head: "Lora", Georgia, serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; --radius: 14px; --radius-lg: 22px; --shadow: 0 1px 2px rgba(40,35,25,.05), 0 14px 38px -18px rgba(40,35,25,.28); --shadow-sm: 0 1px 2px rgba(40,35,25,.06), 0 6px 18px -12px rgba(40,35,25,.22); --maxw: 1180px; --gutter: clamp(20px, 5vw, 64px); --head-weight: 600; --head-spacing: -0.01em; --hero-overlay: 0.34; } /* ---- Raízes (default-ish, editorial warm) ---- */ [data-style="raizes"] { --bg: oklch(0.972 0.010 80); --surface: oklch(0.995 0.004 85); --surface-2: oklch(0.948 0.014 78); --green: oklch(0.40 0.058 150); --green-deep:oklch(0.30 0.048 150); --accent: var(--clay); --font-head: "Bricolage Grotesque", system-ui, sans-serif; --head-weight: 600; --head-spacing: -0.02em; } /* ---- Horizonte (modern, clean, green-forward) ---- */ [data-style="horizonte"] { --bg: oklch(0.982 0.006 95); --surface: oklch(1 0 0); --surface-2: oklch(0.962 0.010 120); --green: oklch(0.38 0.062 158); --green-deep:oklch(0.27 0.050 158); --green-tint:oklch(0.94 0.022 155); --accent: oklch(0.50 0.075 145); --font-head: "Bricolage Grotesque", system-ui, sans-serif; --head-weight: 600; --head-spacing: -0.025em; --radius: 10px; --radius-lg: 16px; --hero-overlay: 0.40; } /* ---- Refúgio (immersive, earthy, dark) ---- */ [data-style="refugio"] { --bg: oklch(0.955 0.014 70); --surface: oklch(0.985 0.008 75); --surface-2: oklch(0.928 0.020 68); --green: oklch(0.34 0.052 148); --green-deep:oklch(0.24 0.044 148); --green-tint:oklch(0.91 0.026 145); --clay: oklch(0.55 0.115 45); --accent: var(--clay); --font-head: "Newsreader", Georgia, serif; --head-weight: 500; --head-spacing: 0; --radius: 18px; --radius-lg: 28px; --hero-overlay: 0.46; } /* ============================================================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: var(--head-weight); letter-spacing: var(--head-spacing); line-height: 1.08; margin: 0; color: var(--ink); text-wrap: balance; } p { margin: 0; text-wrap: pretty; } a { color: inherit; text-decoration: none; } .container { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); } .section { padding-block: clamp(64px, 9vw, 132px); } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); } .eyebrow::before { content: ""; width: 26px; height: 1.5px; background: var(--accent); display: inline-block; } .lede { color: var(--ink-soft); font-size: clamp(17px, 1.5vw, 19px); } /* ---- colored emphasis words inside headings (solid color) ---- */ .hl-word { color: var(--accent); -webkit-text-fill-color: var(--accent); font-style: inherit; } /* lighter solid tone when emphasis sits over dark media (hero, lead band) */ .hero-copy .hl-word, .lead-copy .hl-word { color: oklch(0.86 0.10 80); -webkit-text-fill-color: oklch(0.86 0.10 80); text-shadow: 0 2px 24px rgba(0,0,0,.25); } /* ---- shared subtle motion keyframes ---- */ @keyframes float-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes glow-pulse { 0%, 100% { box-shadow: 0 10px 30px -8px rgba(31,170,87,.6), 0 0 0 0 rgba(31,170,87,.45); } 50% { box-shadow: 0 10px 30px -8px rgba(31,170,87,.7), 0 0 0 12px rgba(31,170,87,0); } } @keyframes rise-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ---- buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-body); font-weight: 600; font-size: 15.5px; letter-spacing: 0.005em; padding: 14px 24px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: transform .18s cubic-bezier(.3,.7,.4,1), box-shadow .18s, background .18s, color .18s; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--green); color: oklch(0.98 0.01 120); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--green-deep); transform: translateY(-1px); } .btn-wa { background: #1faa57; color: #fff; } .btn-wa:hover { background: #178a47; transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--green); color: var(--green); } .btn-lg { padding: 17px 30px; font-size: 16.5px; } /* ---- striped image placeholder ---- */ .ph { position: relative; overflow: hidden; border-radius: var(--radius); background-color: var(--surface-2); background-image: repeating-linear-gradient( 45deg, color-mix(in oklch, var(--green) 8%, transparent) 0 11px, transparent 11px 22px ); border: 1px solid var(--line-soft); display: flex; align-items: flex-end; min-height: 180px; } .ph::after { content: attr(data-label); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; letter-spacing: 0.02em; color: var(--ink-soft); background: color-mix(in oklch, var(--surface) 86%, transparent); backdrop-filter: blur(2px); border: 1px solid var(--line-soft); border-radius: 7px; padding: 5px 10px; margin: 14px; max-width: calc(100% - 28px); } .ph-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .ph-icon svg { width: 40px; height: 40px; opacity: 0.32; color: var(--green); } /* Reveal-on-scroll: content is visible by default; JS "arms" the entrance animation only when it can also un-hide it, so a timing/JS hiccup never leaves the page blank. */ .reveal { opacity: 1; transform: none; } .reveal.armed { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); } .reveal.armed.in { opacity: 1; transform: none; } /* ---- glassmorphism utilities ---- */ .glass { background: color-mix(in oklch, var(--surface) 52%, transparent); -webkit-backdrop-filter: blur(18px) saturate(165%); backdrop-filter: blur(18px) saturate(165%); border: 1px solid color-mix(in oklch, #fff 55%, transparent); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 18px 48px -22px rgba(40,35,25,.35); } .glass-dark { background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border: 1px solid rgba(255,255,255,.24); box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 18px 50px -20px rgba(0,0,0,.5); color: #fff; } /* lighter glass for cards sitting on light backgrounds */ .glass-soft { background: color-mix(in oklch, var(--surface) 62%, transparent); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); border: 1px solid color-mix(in oklch, #fff 60%, transparent); box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 14px 40px -24px rgba(40,35,25,.3); } /* soft colored blobs that sit behind sections so glass reads with depth */ .blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .blobs::before, .blobs::after { content: ""; position: absolute; width: 46vw; height: 46vw; max-width: 560px; max-height: 560px; border-radius: 50%; filter: blur(70px); opacity: 0.5; animation: float-soft 14s ease-in-out infinite; } .blobs::before { top: -12%; left: -8%; background: radial-gradient(circle, color-mix(in oklch, var(--green) 30%, transparent), transparent 70%); } .blobs::after { bottom: -16%; right: -6%; background: radial-gradient(circle, color-mix(in oklch, var(--accent) 26%, transparent), transparent 70%); animation-delay: -7s; } .section { position: relative; } .section > .container { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal, .reveal.armed { transition: none !important; opacity: 1 !important; transform: none !important; } .hl-word, .blobs::before, .blobs::after, .brand-mark, .wa-float { animation: none !important; } .hero-slide.is-active .hero-media-el, .hero-slide.is-active .hero-media-ph { animation: none !important; transform: none !important; } }