/* Landing do ModoCalmo. Arquivo externo: a CSP não permite estilo inline. */ /* Fontes servidas do próprio domínio (OFL): nenhuma requisição a terceiros ao abrir a página. */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/fraunces-latin.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/inter-latin.woff2') format('woff2'); } :root { --stone: #F2F0EA; --stone-2: #E7E4DA; --ink: #1C2523; --ink-soft: #4A524F; --teal: #26504C; --teal-deep: #1A3835; --ember: #D9663B; --ember-deep: #A24724; --ember-darker: #8F3D1F; --mist: #C9CCC4; --on-teal-soft: #C9D4D2; --on-teal-muted: #A9B7B5; --on-teal-error: #F0B49B; --on-teal-success: #BFE3C8; --max-w: 1040px; } /* ---------- variante do título na home (html[data-v] vem do script do ) ---------- */ .hero-a, .hero-b { display: none; } html[data-v="a"] .hero-a, html[data-v="b"] .hero-b, html:not([data-v]) .hero-a { display: block; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } [hidden] { display: none !important; } body { margin: 0; background: var(--stone); color: var(--ink); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; font-weight: 500; line-height: 1.15; margin: 0; color: var(--teal-deep); } p { margin: 0; } a { color: inherit; } .nowrap { white-space: nowrap; } .wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 28px; } :focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; } /* ---------- nav ---------- */ .nav { padding: max(28px, env(safe-area-inset-top)) 0 0; } .nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .wordmark { text-decoration: none; font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 600; letter-spacing: 0.01em; color: var(--teal-deep); } .nav-cta { font-size: 14px; font-weight: 500; padding: 9px 18px; border: 1px solid var(--teal-deep); border-radius: 100px; text-decoration: none; color: var(--teal-deep); transition: background 0.15s ease, color 0.15s ease; } .nav-cta:hover { background: var(--teal-deep); color: var(--stone); } /* ---------- hero ---------- */ .hero { padding: 64px 0 24px; } .hero .wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; } .hero h1 { font-size: clamp(32px, 4.4vw, 46px); max-width: 18ch; } .hero .sub { margin-top: 20px; max-width: 48ch; font-size: 18px; color: var(--ink-soft); } .paths { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; } .btn-primary { display: inline-block; background: var(--ember-deep); color: var(--stone); text-decoration: none; font-family: inherit; font-weight: 500; font-size: 15px; line-height: 1.4; padding: 14px 26px; border-radius: 100px; border: none; cursor: pointer; transition: background 0.15s ease; } .btn-primary:hover { background: var(--ember-darker); } .btn-primary:disabled { cursor: progress; background: var(--ember-darker); } .btn-secondary { font-size: 15px; font-weight: 500; color: var(--teal-deep); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } .btn-secondary:hover { text-decoration-thickness: 2px; } .hero .microcopy { margin-top: 16px; font-size: 13px; color: var(--ink-soft); } .wave-graphic { width: 100%; height: auto; } .wave-path { fill: none; stroke: var(--teal); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } @media (prefers-reduced-motion: no-preference) { .wave-path { stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 2.2s ease-out 0.2s forwards; } } @keyframes draw { to { stroke-dashoffset: 0; } } /* ---------- problem ---------- */ .problem { padding: 56px 0; margin-top: 48px; border-top: 1px solid var(--mist); border-bottom: 1px solid var(--mist); } .problem .wrap { display: grid; grid-template-columns: 0.6fr 1fr; gap: 40px; } .problem .side { font-family: inherit; font-weight: 400; font-size: 15px; line-height: 1.6; color: var(--ink-soft); } .problem .lead { font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 400; line-height: 1.4; color: var(--teal-deep); max-width: 40ch; } .problem .lead + .lead { margin-top: 20px; } /* ---------- section heads ---------- */ .head { max-width: 56ch; margin-bottom: 44px; } .head h2 { font-size: 30px; } .head p { margin-top: 14px; color: var(--ink-soft); font-size: 17px; } /* ---------- o que estamos construindo ---------- */ .features { padding: 72px 0; } .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--mist); border: 1px solid var(--mist); } .feature { background: var(--stone); padding: 32px 28px; } .feature h3 { font-size: 19px; margin-bottom: 12px; } .feature p { color: var(--ink-soft); font-size: 15px; } /* ---------- familiares: chamada na home ---------- */ .familia { padding: 72px 0; background: var(--stone-2); } .familia .head { margin-bottom: 36px; } .familia .ideas-label { font-size: 15px; font-weight: 500; color: var(--teal-deep); margin-bottom: 20px; } .familia-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } .familia-list { display: grid; gap: 28px; } .familia-item h3 { font-size: 19px; margin-bottom: 8px; } .familia-item p { color: var(--ink-soft); font-size: 15px; max-width: 48ch; } .signal-demo { background: var(--stone); border: 1px solid var(--mist); border-radius: 16px; padding: 28px; } .signal-demo .who { font-size: 13px; color: var(--ink-soft); } .signal-demo .chips { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .chip { font-size: 15px; line-height: 1.35; padding: 10px 16px; border-radius: 14px 14px 14px 4px; background: var(--teal-deep); color: var(--stone); } .chip.alt { background: transparent; color: var(--teal-deep); border: 1px solid var(--teal); } .familia .actions { margin-top: 40px; } .status { display: inline-block; margin-bottom: 18px; font-size: 13px; color: var(--teal-deep); border: 1px dashed var(--teal); border-radius: 100px; padding: 4px 12px; } /* ---------- /familia ---------- */ .hero-familia .wrap { grid-template-columns: 1fr; } .hero-familia h1 { max-width: 20ch; } .hero-familia .sub { max-width: 60ch; } .builds { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--mist); border: 1px solid var(--mist); } .builds li { background: var(--stone); padding: 24px 28px; font-size: 16px; color: var(--ink-soft); } .builds strong { color: var(--teal-deep); font-weight: 600; } .aviso { margin-top: 28px; max-width: 64ch; font-size: 14px; color: var(--ink-soft); } /* ---------- na sequência ---------- */ .roadmap { padding: 72px 0; } .roadmap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .roadmap-item { border: 1px dashed var(--mist); border-radius: 12px; padding: 24px 20px; } .roadmap-item h3 { font-size: 17px; margin-bottom: 8px; } .roadmap-item p { color: var(--ink-soft); font-size: 14px; } /* ---------- grupo inicial / pesquisa (#acesso) ---------- */ .pricing { padding: 80px 0; background: var(--teal-deep); color: var(--stone); } .pricing .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } .pricing h2 { color: var(--stone); font-size: 30px; } .pricing .lead { margin-top: 16px; color: var(--on-teal-soft); font-size: 16px; max-width: 44ch; } .plans { margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(242,240,234,0.25); max-width: 44ch; } .plans h3 { color: var(--stone); font-size: 21px; line-height: 1.3; } .plans .price { margin-top: 12px; font-size: 16px; color: var(--stone); } .plans .price strong { font-weight: 600; } .plans h3 + .price { margin-top: 12px; } .plans > .price:first-child { margin-top: 0; } .plans .note { margin-top: 10px; font-size: 14px; color: var(--on-teal-muted); } .price-card { border: 1px solid rgba(242,240,234,0.25); border-radius: 12px; padding: 32px; } .choice { border: none; margin: 0 0 18px; padding: 0; } .choice legend { font-size: 14px; color: var(--on-teal-soft); margin-bottom: 10px; padding: 0; } .choice .options { display: flex; flex-wrap: wrap; gap: 8px; } .choice label { position: relative; font-size: 14px; cursor: pointer; padding: 9px 14px; border-radius: 100px; border: 1px solid rgba(242,240,234,0.3); color: var(--stone); } .choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .choice label:has(input:checked) { background: var(--stone); color: var(--teal-deep); border-color: var(--stone); } .choice label:has(input:focus-visible) { outline: 2px solid var(--ember); outline-offset: 3px; } .field { margin-bottom: 14px; } .field label { display: block; font-size: 14px; color: var(--on-teal-soft); margin-bottom: 6px; } .field input { width: 100%; padding: 12px 14px; border-radius: 8px; border: 1px solid rgba(242,240,234,0.3); background: rgba(242,240,234,0.06); color: var(--stone); font-family: 'Inter', system-ui, sans-serif; font-size: 16px; } .field textarea { width: 100%; resize: vertical; padding: 12px 14px; border-radius: 8px; border: 1px solid rgba(242,240,234,0.3); background: rgba(242,240,234,0.06); color: var(--stone); font-family: 'Inter', system-ui, sans-serif; font-size: 16px; } .survey-comment { margin-top: 18px; } .survey-comment label { color: var(--stone); font-size: 15px; } .field input::placeholder { color: var(--on-teal-muted); } .field input[aria-invalid="true"] { border-color: var(--on-teal-error); } .field .help { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--on-teal-muted); } .check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 20px; font-size: 14px; line-height: 1.5; color: var(--stone); cursor: pointer; } .check input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--ember); cursor: pointer; } .price-card .btn-primary { width: 100%; } .notice { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--on-teal-muted); } .notice a { color: var(--stone); text-underline-offset: 3px; } .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .field-error, .form-error { color: var(--on-teal-error); font-size: 13px; margin-top: 6px; } .form-error { margin-top: 10px; } .success-msg { font-size: 16px; color: var(--on-teal-success); } .survey { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(242,240,234,0.25); } .survey legend { font-size: 16px; color: var(--stone); margin-bottom: 6px; padding: 0; } .survey .microcopy { font-size: 13px; color: var(--on-teal-muted); margin-bottom: 14px; } .survey .options { display: grid; gap: 8px; } .survey .option { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--stone); cursor: pointer; } .survey .option input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--ember); cursor: pointer; } .survey .actions { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; } .survey .actions .btn-primary { width: auto; } .survey .btn-primary:disabled { cursor: not-allowed; opacity: 0.75; } .btn-link { background: none; border: none; padding: 8px 0; cursor: pointer; font-family: inherit; font-size: 15px; color: var(--stone); text-decoration: underline; text-underline-offset: 4px; } .survey-done { margin-top: 20px; font-size: 15px; color: var(--on-teal-success); } /* ---------- footer ---------- */ .foot { padding: 40px 0 max(48px, env(safe-area-inset-bottom)); } .foot .disclaimer { font-size: 13px; color: var(--ink-soft); max-width: 64ch; padding-bottom: 20px; border-bottom: 1px solid var(--mist); margin-bottom: 20px; } .foot .crisis { font-size: 14px; color: var(--ink-soft); max-width: 64ch; } .foot .crisis strong { color: var(--teal-deep); font-weight: 600; } .foot .legal { margin-top: 16px; font-size: 13px; color: var(--ink-soft); } @media (max-width: 760px) { .hero .wrap, .problem .wrap, .pricing .wrap, .familia-grid { grid-template-columns: 1fr; } .familia-grid { gap: 40px; } .feature-grid, .roadmap-grid { grid-template-columns: 1fr; } .hero { padding-top: 40px; } .price-card { padding: 24px 20px; } }