/* Allora Landing — base styles */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11"; transition: background-color .25s ease, color .25s ease; } :root { /* Brand green — fixed regardless of accent (used by logo) */ --brand-green: #2F6E54; --brand-green-deep: #1F4D3A; --bg-cream: #F4EFE4; /* Light theme defaults — overridden by tweak vars on */ --bg: #EFEEEA; --bg-elev: #FFFFFF; --bg-card: #FFFFFF; --ink: #111111; --ink-2: #2A2A2A; --muted: #6B6B6B; --muted-2: #9A9A9A; --line: rgba(17,17,17,.08); --line-strong: rgba(17,17,17,.14); --shadow-sm: 0 1px 2px rgba(15,15,15,.05), 0 1px 1px rgba(15,15,15,.04); --shadow-md: 0 10px 30px -10px rgba(15,15,15,.18), 0 2px 6px rgba(15,15,15,.05); --shadow-lg: 0 30px 60px -30px rgba(15,15,15,.30), 0 8px 24px -8px rgba(15,15,15,.08); --accent: #25D366; --accent-deep: #128C7E; --accent-ink: #052e1a; --accent-tint: #DCFBE7; --pad: 24px; --section-y: clamp(72px, 9vw, 132px); --container: 1240px; --radius-card: 24px; --radius-tile: 18px; --radius-pill: 999px; } html[data-theme="dark"] { --bg: #0E0F0D; --bg-elev: #17181A; --bg-card: #1A1C1E; --ink: #F2F1ED; --ink-2: #D7D6D2; --muted: #9C9C99; --muted-2: #6A6A68; --line: rgba(255,255,255,.08); --line-strong: rgba(255,255,255,.14); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 12px 36px -10px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4); --shadow-lg: 0 30px 60px -30px rgba(0,0,0,.7), 0 8px 24px -8px rgba(0,0,0,.4); --accent-tint: #122B1E; --accent-ink: #DCFBE7; } html[data-density="airy"] { --section-y: clamp(96px, 11vw, 160px); } html[data-density="compact"]{ --section-y: clamp(48px, 6vw, 84px); } /* ───── responsive (mobile-first overrides) ─────────────────────────── Inline styles can't carry media queries, so we use [style*="…"] selectors to collapse the 12-col grids and the wide spans below 768px. Desktop behavior is untouched. */ @media (max-width: 768px) { /* All 12-col grids → single column on mobile */ [style*="repeat(12, 1fr)"] { grid-template-columns: 1fr !important; gap: 24px !important; } /* Reset any explicit column-span so children take full width */ [style*="gridColumn"], [style*="span 4"], [style*="span 5"], [style*="span 6"], [style*="span 7"], [style*="span 8"], [style*="span 12"] { grid-column: 1 / -1 !important; } /* Contact form: 2-column field row → 1 column. React renders inline-style names as kebab-case in the DOM, so we match the value pattern with the property prefix. */ [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; } /* Guarantee block (auto 1fr) — let icon sit on top */ [style*="auto 1fr"] { grid-template-columns: 1fr !important; text-align: left !important; } /* FAQ sticky sidebar — unstick on mobile so it doesn't dominate the viewport */ #faq [style*="position: sticky"], #faq [style*="position:sticky"] { position: static !important; } /* Cards: tighten the giant clamp() paddings on small screens */ .card { padding: 24px 20px !important; } .tile { padding: 22px 20px !important; } .section-head { margin-bottom: 32px !important; } /* Section vertical rhythm — half the desktop value */ .section { padding-block: clamp(40px, 10vw, 64px) !important; } /* Buttons go full-width inside any flex/CTA cluster, except in the nav pill */ .btn-lg { width: 100%; justify-content: center; } .nav-pill .btn { width: auto; } /* Pricing comparison table — let it scroll horizontally rather than collapse */ #planos .card > [style*="minmax(220px, 1.4fr)"] { grid-template-columns: 220px repeat(3, minmax(140px, 1fr)) !important; min-width: 660px; } #planos .card[style*="overflow: hidden"], #planos .card[style*="overflow:hidden"] { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; } /* Hero: tighten paddings, kill the 50% min-height that creates dead space */ .hero-floating { padding-bottom: 32px !important; } .hero-center { padding-top: 0 !important; } .hero-h1 { font-size: clamp(34px, 9vw, 48px) !important; } .hero-grid { min-height: 0 !important; } /* Number band: vertical stack instead of side-by-side borders */ #prova .card [style*="borderLeft"] { border-left: none !important; padding-left: 0 !important; border-top: 1px solid var(--line); padding-top: 16px; } #prova .card [style*="borderLeft"]:first-child { border-top: none; padding-top: 0; } /* Pain/Benefits/Testimonials grids using auto-fit — slightly tighter min */ [style*="minmax(300px, 1fr)"], [style*="minmax(320px, 1fr)"] { grid-template-columns: 1fr !important; } /* Containers: tighter side padding */ .container { padding-inline: 16px !important; } /* Footer link columns — 2 per row on mobile */ footer.section [style*="repeat(12, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; } footer.section [style*="repeat(12, 1fr)"] > div[style*="span 5"] { grid-column: 1 / -1 !important; } footer.section [style*="repeat(12, 1fr)"] > div[style*="span 2"] { grid-column: span 1 !important; } } /* Small phones (≤430px) — text scaling */ @media (max-width: 430px) { .display-md { font-size: clamp(26px, 8vw, 36px) !important; } .display-lg { font-size: clamp(30px, 10vw, 44px) !important; } .hero-h1 { font-size: clamp(30px, 9.5vw, 40px) !important; } } /* ───── typography ───── */ .display { font-family: "Bricolage Grotesque", "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif; font-weight: 800; letter-spacing: -0.035em; line-height: 0.94; color: var(--ink); font-variation-settings: "wdth" 100, "opsz" 96; } .display-xl { font-size: clamp(48px, 8.5vw, 128px); } .display-lg { font-size: clamp(40px, 6vw, 88px); } .display-md { font-size: clamp(32px, 4.4vw, 64px); } .display-sm { font-size: clamp(28px, 3.4vw, 48px); } .eyebrow { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 500; } .lede { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.45; color: var(--ink-2); max-width: 56ch; } .body { font-size: 16px; line-height: 1.55; color: var(--ink-2); } .small { font-size: 13.5px; line-height: 1.5; color: var(--muted); } .tabular { font-variant-numeric: tabular-nums; } /* ───── layout ───── */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: clamp(20px, 4vw, 48px); } .section { padding-block: calc(var(--section-y) * 0.5); position: relative; } .section:first-of-type { padding-top: var(--section-y); } .section-head { display: flex; flex-direction: column; gap: 14px; max-width: 760px; margin-bottom: clamp(40px, 5vw, 72px); } /* ───── scroll reveal ───── */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.65,.2,1), transform .8s cubic-bezier(.2,.65,.2,1); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: translateY(0); } .reveal.delay-1 { transition-delay: .06s; } .reveal.delay-2 { transition-delay: .12s; } .reveal.delay-3 { transition-delay: .18s; } .reveal.delay-4 { transition-delay: .24s; } .reveal.delay-5 { transition-delay: .30s; } .reveal.delay-6 { transition-delay: .36s; } .reveal.delay-7 { transition-delay: .42s; } .reveal.delay-8 { transition-delay: .48s; } /* honor reduce-motion */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .drift, .drift-2, .drift-3 { animation: none !important; } } /* ───── buttons ───── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: var(--radius-pill); font-family: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s ease; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 8px 22px -10px color-mix(in srgb, var(--accent) 70%, transparent); } .btn-primary:hover { background: color-mix(in srgb, var(--accent) 90%, black 6%); } .btn-dark { background: var(--ink); color: var(--bg); } .btn-dark:hover { background: color-mix(in srgb, var(--ink) 88%, black); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); } .btn-ghost:hover { background: var(--bg-elev); } .btn-lg { padding: 17px 28px; font-size: 16px; } .btn-sm { padding: 9px 14px; font-size: 13.5px; } /* ───── cards / tiles ───── */ .card { background: var(--bg-card); border-radius: var(--radius-card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .card-elev { box-shadow: var(--shadow-md); } .tile { background: var(--bg-card); border-radius: var(--radius-tile); border: 1px solid var(--line); box-shadow: var(--shadow-sm); } /* ───── brand ───── */ .brand { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -0.02em; display: inline-flex; align-items: center; color: var(--ink); } /* ───── nav ───── */ .nav-shell { position: sticky; top: 16px; z-index: 50; display: flex; justify-content: center; padding-inline: 16px; pointer-events: none; } .nav-pill { pointer-events: auto; display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 22px; background: var(--bg-card); border-radius: var(--radius-pill); border: 1px solid var(--line); box-shadow: var(--shadow-md); backdrop-filter: blur(12px); } .nav-pill .brand { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -0.02em; margin-right: 8px; display: inline-flex; align-items: center; gap: 8px; } .nav-pill .brand .dot { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); position: relative; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } .nav-pill .brand .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.6), transparent 55%); } .nav-pill a.nav-link { padding: 9px 14px; color: var(--ink-2); font-size: 14px; font-weight: 500; text-decoration: none; border-radius: var(--radius-pill); transition: background .15s ease; } .nav-pill a.nav-link:hover { background: var(--bg); } @media (max-width: 820px) { .nav-pill .nav-link.hide-sm { display: none; } .nav-pill { padding-left: 16px; } } /* ───── hero floating tiles ───── */ .float-tile { position: absolute; background: var(--bg-card); border-radius: var(--radius-tile); border: 1px solid var(--line); box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: transform .4s cubic-bezier(.2,.7,.2,1); } .float-tile.icon { width: 76px; height: 76px; } .float-tile.icon.lg { width: 116px; height: 116px; border-radius: 26px; } .float-tile.icon.xl { width: 144px; height: 144px; border-radius: 32px; } .float-tile.chip { padding: 12px 16px; width: auto; height: auto; display: flex; align-items: center; gap: 10px; border-radius: 18px; } .float-tile.bubble { padding: 14px 18px; border-radius: 22px 22px 22px 6px; background: var(--bg-card); font-size: 14px; line-height: 1.35; max-width: 260px; text-align: left; } .float-tile.bubble.them { background: var(--ink); color: var(--bg-card); border-color: var(--ink); border-radius: 22px 22px 6px 22px; } .float-tile.avatar { border-radius: 22px; } /* connector lines (svg overlay) */ .connector { position: absolute; inset: 0; pointer-events: none; } .connector path { stroke: var(--line-strong); stroke-width: 1; fill: none; stroke-dasharray: 2 4; } .connector circle { fill: var(--ink); } /* ───── hero grid (rails + center can't overlap) ───── */ .hero-grid { display: grid; grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) minmax(180px, 220px); gap: clamp(24px, 4vw, 64px); align-items: stretch; min-height: min(78vh, 720px); position: relative; z-index: 1; } .hero-rail { position: relative; min-height: 600px; transition: transform .12s linear; will-change: transform; } .hero-rail .float-tile { position: absolute; z-index: 2; } /* connector lines (svg overlay) — thin dashed network between the floating tiles */ .hero-connectors { position: absolute; inset: 0 0 0 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; transition: opacity .2s linear; } .hero-connectors path { fill: none; stroke: color-mix(in srgb, var(--ink) 22%, transparent); stroke-width: 1; stroke-dasharray: 3 5; stroke-linecap: round; vector-effect: non-scaling-stroke; } .hero-connectors circle { fill: var(--ink); opacity: 0.45; r: 0.6; } html[data-theme="dark"] .hero-connectors path { stroke: color-mix(in srgb, white 22%, transparent); } html[data-theme="dark"] .hero-connectors circle { fill: white; } /* brand tile sits above the connectors */ .hero-brand-tile { z-index: 3; } .hero-center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 24px; padding-top: clamp(20px, 4vw, 56px); min-width: 0; } .hero-h1 { font-size: clamp(36px, 5.4vw, 80px); line-height: 0.98; letter-spacing: -0.035em; text-wrap: balance; } .hero-sub { margin: 0; max-width: 520px; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.45; color: var(--ink-2); } .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; } .hero-micro { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; } .hero-trust { margin-top: 24px; display: inline-flex; gap: 16px; align-items: center; padding: 10px 18px; background: var(--bg-card); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-sm); font-size: 13px; color: var(--ink-2); flex-wrap: wrap; justify-content: center; max-width: 100%; } @media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; min-height: 0; } .hero-rail { display: none; } } /* ───── misc utilities ───── */ .check { color: var(--accent-deep); } html[data-theme="dark"] .check { color: var(--accent); } .divider { height: 1px; background: var(--line); width: 100%; } .kbd { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; padding: 2px 6px; border-radius: 6px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); } .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: pulse 2.2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 70%{ box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 0%, transparent); } 100%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); } } /* placeholder image slots */ .ph-img { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 6%, transparent) 0 8px, transparent 8px 16px), var(--bg); color: var(--muted); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; } /* selection */ ::selection { background: var(--accent); color: var(--accent-ink); } /* footer giant text */ .giant-wordmark { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800; font-size: clamp(80px, 22vw, 360px); line-height: 0.85; letter-spacing: -0.05em; color: var(--brand-green); filter: blur(0.5px); text-align: center; user-select: none; } /* small chip */ .chip-tiny { display: inline-flex; align-items: center; gap: 6px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; padding: 5px 10px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--line); color: var(--ink-2); letter-spacing: 0.04em; text-transform: uppercase; } .chip-tiny.accent { background: var(--accent-tint); border-color: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent-ink); } html[data-theme="dark"] .chip-tiny.accent { color: var(--accent); } /* segmented toggle (pricing variant etc) */ .seg { display: inline-flex; padding: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; } .seg button { padding: 8px 16px; border: 0; background: transparent; font: 500 13px/1 inherit; cursor: pointer; border-radius: 999px; color: var(--muted); } .seg button.on { background: var(--bg-card); color: var(--ink); box-shadow: var(--shadow-sm); } /* faq */ details.faq { padding: 22px 4px; border-bottom: 1px solid var(--line); } details.faq[open] { padding-bottom: 26px; } details.faq summary { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: clamp(18px, 1.6vw, 22px); letter-spacing: -0.01em; color: var(--ink); } details.faq summary::-webkit-details-marker { display: none; } details.faq summary .toggle { width: 32px; height: 32px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; border: 1px solid var(--line); transition: transform .2s ease, background .2s ease; } details.faq[open] summary .toggle { transform: rotate(45deg); background: var(--ink); color: var(--bg-card); } details.faq .answer { padding-top: 14px; max-width: 64ch; color: var(--ink-2); line-height: 1.55; } /* gentle float */ @keyframes drift { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) } } .drift { animation: drift 6s ease-in-out infinite; } .drift-2 { animation: drift 7.5s ease-in-out -2s infinite; } .drift-3 { animation: drift 9s ease-in-out -4s infinite; } /* link-arrow */ .link-arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14.5px; border-bottom: 1px solid transparent; } .link-arrow:hover { border-bottom-color: var(--ink); } .link-arrow svg { transition: transform .2s ease; } .link-arrow:hover svg { transform: translateX(3px); }