/* styles.css — design branco, cuidadoso. Serif elegante nos títulos + sans no corpo. */ :root { --bg: #ffffff; --surface: #ffffff; --surface-2: #f8f3f2; --text: #2f2926; --muted: #a1938d; --line: #f0e9e7; --accent: #b76e79; /* rosa-amêndoa suave */ --accent-soft: #f6e7e9; /* tom rosado para destaques/ativo */ --accent-ink: #ffffff; --good: #6fa98c; --mid: #d3a35c; --bad: #cd7d74; --warn-bg: #fbf4ea; --warn-line: #f0e0c8; --danger-bg: #fbeeec; --danger-line: #f1cec9; --radius: 20px; --shadow: 0 6px 22px rgba(120, 80, 75, .07); --font-head: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* Tema escuro OPCIONAL — o branco é o padrão. Ative com . */ :root[data-theme="dark"] { --bg: #17120f; --surface: #1f1815; --surface-2: #2a211d; --text: #f2ebe7; --muted: #ab9c94; --line: #322722; --accent: #d18f98; --accent-soft: #38262a; --accent-ink: #1a110e; --good: #7cc0a0; --mid: #e0b56a; --bad: #dd938a; --warn-bg: #2c2314; --warn-line: #473719; --danger-bg: #301f1d; --danger-line: #542c28; --shadow: 0 6px 22px rgba(0,0,0,.4); } * { box-sizing: border-box; } html, body { margin: 0; } html, body { /* Trava scroll horizontal em qualquer tela — se algum elemento futuro estourar (imagem, tabela, canvas), o site ainda rola só na vertical. No iPhone isso também neutraliza o rubber-band lateral. */ overflow-x: hidden; max-width: 100vw; overscroll-behavior-x: none; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); padding-bottom: 28px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, video, canvas, svg { max-width: 100%; height: auto; } .ico { display: block; flex: none; } /* topo */ .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: rgba(255,255,255,.82); backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--line); } :root[data-theme="dark"] .topbar { background: rgba(31,24,21,.82); } .logo { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; letter-spacing: .2px; color: var(--accent); } .logo .ico { color: var(--accent); } .logo-mark { height: 30px; width: auto; display: block; } .beta { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 20px; padding: 3px 9px; } .screen { max-width: 560px; margin: 0 auto; padding: 22px 18px 8px; } h1 { font-family: var(--font-head); font-weight: 500; font-size: 1.85rem; line-height: 1.12; letter-spacing: -.01em; margin: 6px 0 6px; } h3 { font-family: var(--font-head); font-weight: 500; font-size: 1.12rem; letter-spacing: -.005em; margin: 0 0 12px; display: flex; align-items: center; gap: 9px; } h3 .ico { color: var(--accent); } .muted { color: var(--muted); } .small { font-size: .85rem; } /* cards */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 14px 0; box-shadow: var(--shadow); } .card-head { display: flex; align-items: center; justify-content: space-between; } .card-warn { background: var(--warn-bg); border-color: var(--warn-line); } .card-danger { background: var(--danger-bg); border-color: var(--danger-line); } .card-soft { background: var(--surface-2); box-shadow: none; } .card-cta { text-align: center; } .card-cta p { margin-top: 0; } /* form */ .opt { display: flex; align-items: center; gap: 10px; padding: 9px 0; cursor: pointer; } .opt input { width: 18px; height: 18px; accent-color: var(--accent); } select { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 1rem; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { position: relative; } .chip input { position: absolute; opacity: 0; } .chip span { display: inline-block; padding: 8px 12px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); font-size: .9rem; cursor: pointer; } .chip input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } /* botões */ .btn-primary, .btn-secondary { font-size: .98rem; font-weight: 600; letter-spacing: .01em; padding: 14px 20px; border-radius: 14px; border: none; cursor: pointer; font-family: inherit; transition: transform .08s ease, filter .15s ease; } .btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 16px rgba(183,110,121,.28); } .btn-primary:active { transform: scale(.98); filter: brightness(1.04); } .btn-secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); } .btn-block { width: 100%; margin-top: 8px; } .row { display: flex; gap: 10px; margin: 14px 0; } .row > * { flex: 1; text-align: center; } label.btn-secondary { display: inline-flex; align-items: center; justify-content: center; } .disclaimer { font-size: .78rem; color: var(--muted); margin: 18px 0 6px; border-top: 1px dashed var(--line); padding-top: 12px; } /* home */ .hero h1 { margin-bottom: 2px; } .hero { margin-bottom: 18px; } .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; } .tile { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; cursor: pointer; box-shadow: var(--shadow); color: var(--text); font: inherit; transition: transform .1s ease, box-shadow .2s ease; } .tile:active { transform: scale(.985); } .tile-badge { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); margin-bottom: 2px; } .tile b { font-size: 1rem; font-family: var(--font-head); font-weight: 500; } /* pills */ .pill { display: inline-block; font-size: .78rem; padding: 4px 10px; border-radius: 20px; font-weight: 600; } .pill-reparo { background: var(--warn-bg); color: var(--mid); border: 1px solid var(--warn-line); } .pill-tratamento { background: var(--surface-2); color: var(--muted); } /* câmera */ .cam-wrap { position: relative; width: 100%; aspect-ratio: 3/4; max-height: 60vh; background: #000; border-radius: var(--radius); overflow: hidden; margin: 8px 0; } .cam-wrap video { width: 100%; height: 100%; object-fit: cover; } .cam-guide { position: absolute; inset: 12% 22%; border: 2px dashed rgba(255,255,255,.7); border-radius: 50%; pointer-events: none; } .msg-warn { display: inline-flex; align-items: flex-start; gap: 6px; color: var(--bad); } .msg-warn .ico { margin-top: 2px; flex: none; } /* métricas */ .metric { margin: 12px 0; } .metric-top { display: flex; justify-content: space-between; font-size: .92rem; } .bar { height: 8px; background: var(--surface-2); border-radius: 20px; overflow: hidden; margin: 5px 0; } .bar-fill { height: 100%; border-radius: 20px; } .bar-fill.good { background: var(--good); } .bar-fill.mid { background: var(--mid); } .bar-fill.bad { background: var(--bad); } .metric-help { font-size: .78rem; color: var(--muted); margin: 2px 0 0; } /* resultado */ .result-head { display: flex; gap: 16px; align-items: center; margin: 10px 0; } .result-thumb { width: 92px; height: 92px; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); } .score-big { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--accent); } .score-big span { font-size: 1rem; color: var(--muted); font-weight: 500; } /* passos da rotina */ .steps { list-style: none; padding: 0; margin: 0; } .step { border-top: 1px solid var(--line); padding: 12px 0; } .step:first-child { border-top: none; } .step-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .step-name { font-weight: 600; } .step-meta { font-size: .82rem; color: var(--muted); margin: 3px 0; } .step-why { font-size: .9rem; margin: 4px 0; } .step-dica { font-size: .82rem; color: var(--muted); margin: 6px 0 0; display: flex; align-items: flex-start; gap: 7px; } .step-dica .ico { color: var(--accent); margin-top: 2px; } .badge { font-size: .68rem; padding: 3px 8px; border-radius: 20px; white-space: nowrap; } .ev-forte { background: #e3f3ec; color: #2f7d5c; } .ev-moderada { background: #fbf0dc; color: #a9772a; } .ev-incerta { background: #f0eceb; color: #8a7d76; } :root[data-theme="dark"] .ev-forte { background: #1e3a2d; color: #7fd0a8; } :root[data-theme="dark"] .ev-moderada { background: #3a2f18; color: #e0b565; } :root[data-theme="dark"] .ev-incerta { background: #2c2420; color: #a7988f; } .tag { font-size: .68rem; padding: 2px 7px; border-radius: 20px; } .tag-warn { background: var(--warn-bg); color: var(--mid); border: 1px solid var(--warn-line); } .notes { margin: 0; padding-left: 18px; } .notes li { margin: 6px 0; font-size: .9rem; } /* progresso */ .ba { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ba figure { margin: 0; text-align: center; } .ba img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); } .ba figcaption { font-size: .78rem; color: var(--muted); margin-top: 6px; } .trends { margin-top: 14px; } .trend-row { display: flex; justify-content: space-between; padding: 7px 0; border-top: 1px solid var(--line); font-size: .9rem; } .trend { font-size: .82rem; font-weight: 600; } .trend.up { color: var(--good); } .trend.down { color: var(--bad); } .trend.flat { color: var(--muted); } .hist { list-style: none; padding: 0; margin: 0; } .hist li { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); } .hist li:first-child { border-top: none; } .hist img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; } .hist div { display: flex; flex-direction: column; } /* nav inferior */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; display: flex; background: rgba(255,255,255,.9); backdrop-filter: saturate(1.2) blur(10px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); } :root[data-theme="dark"] .bottom-nav { background: rgba(31,24,21,.9); } .bottom-nav button { flex: 1; background: none; border: none; color: var(--muted); font: inherit; font-size: .68rem; letter-spacing: .01em; padding: 10px 0 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; transition: color .15s ease; } .bottom-nav button.active { color: var(--accent); } .bottom-nav button.active .ico { transform: translateY(-1px); } /* ===== campos de formulário (onboarding) ===== */ .field { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; } .field > span { font-size: .9rem; color: var(--muted); } input[type="text"] { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 1rem; font-family: inherit; } input[type="text"]:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* ===== check-in diário ===== */ .daily { border: 1px solid var(--accent-soft); } .daily-top { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; } .daily-top b { display: block; font-family: var(--font-head); font-weight: 500; font-size: 1.05rem; } .daily-badge { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); flex: none; } .daily-badge.ok { background: #e6f3ec; color: var(--good); } .daily-slots { display: flex; gap: 10px; margin-top: 12px; } .daily-slots span { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; color: var(--muted); background: var(--surface-2); border-radius: 20px; padding: 5px 11px; } .daily-slots .done { color: var(--good); background: #eaf5ef; } .daily-slots .ico { width: 15px; height: 15px; } /* ===== medidor de qualidade da câmera ===== */ .q-meter { height: 8px; background: var(--surface-2); border-radius: 20px; overflow: hidden; margin: 6px 0 12px; } .q-fill { height: 100%; width: 0; border-radius: 20px; transition: width .2s ease; background: var(--bad); } .q-fill.good { background: var(--good); } .q-fill.mid { background: var(--mid); } .q-fill.bad { background: var(--bad); } .cam-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); background: rgba(0,0,0,.6); color: #fff; font-size: .8rem; padding: 6px 14px; border-radius: 20px; white-space: nowrap; max-width: 90%; text-align: center; } .cam-hint.ok { background: rgba(111,169,140,.92); } .cam-guide.ok { border-color: #8fdcb4; border-style: solid; } /* ===== produtos na rotina ===== */ .prods { margin-top: 10px; } .prods-label { font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .prod { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--surface-2); border-radius: 12px; padding: 10px 12px; margin-top: 7px; } .prod-info { display: flex; flex-direction: column; } .prod-marca { font-size: .72rem; color: var(--accent); font-weight: 600; letter-spacing: .02em; } .prod-nome { font-size: .86rem; } .prod-meta { text-align: right; flex: none; } .prod-preco { display: block; font-weight: 600; font-size: .86rem; } .prod-tier { color: var(--good); font-weight: 700; } .prod-nota { display: inline-flex; align-items: center; gap: 3px; font-size: .74rem; color: var(--muted); } .prod-nota .ico { color: var(--mid); } /* ===== link refazer perfil ===== */ .link-reset { display: inline-flex; align-items: center; gap: 6px; margin: 6px auto 0; background: none; border: none; color: var(--muted); font: inherit; font-size: .86rem; cursor: pointer; padding: 8px; width: 100%; justify-content: center; } .link-reset:active { color: var(--accent); } /* ===== comparativo + decisões (diagnóstico) ===== */ .cmp-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: .9rem; } .cmp-row:first-child { border-top: none; } .trend { display: inline-flex; align-items: center; gap: 3px; font-size: .82rem; font-weight: 600; } .trend.up { color: var(--good); } .trend.down { color: var(--bad); } .trend.flat { color: var(--muted); } .card-decis { background: var(--accent-soft); border-color: transparent; } .decs { list-style: none; padding: 0; margin: 0; } .dec { display: flex; gap: 9px; align-items: flex-start; padding: 8px 0; font-size: .9rem; } .dec .ico { margin-top: 1px; flex: none; color: var(--accent); } .dec-ok .ico { color: var(--good); } .dec-atencao .ico, .dec-suavizar .ico { color: var(--bad); } /* ===== modal de confirmação ===== */ .modal-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(30,20,18,.45); display: flex; align-items: center; justify-content: center; padding: 24px; animation: fade .15s ease; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } .modal { background: var(--surface); border-radius: var(--radius); padding: 24px; max-width: 380px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.25); animation: pop .18s ease; } @keyframes pop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } } .modal h3 { margin-bottom: 8px; } .modal .row { margin-top: 20px; } .btn-danger { font-size: .98rem; font-weight: 600; padding: 14px 20px; border-radius: 14px; border: none; cursor: pointer; font-family: inherit; background: var(--bad); color: #fff; } /* ===== tela de carregamento ===== */ .loading-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 72vh; text-align: center; } .load-emblem { width: 76px; height: 76px; border-radius: 24px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; animation: floaty 2s ease-in-out infinite; } .load-logo { width: 92px; height: 92px; margin-bottom: 20px; animation: floaty 2s ease-in-out infinite; } .ob-logo { display: block; width: 132px; height: auto; margin: 0 auto 6px; } @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .load-pct { font-family: var(--font-head); font-size: 3rem; font-weight: 500; color: var(--accent); line-height: 1; } .load-pct span { font-size: 1.1rem; color: var(--muted); } .load-bar { width: 220px; max-width: 70%; height: 8px; background: var(--surface-2); border-radius: 20px; overflow: hidden; margin: 16px 0 18px; } .load-fill { height: 100%; width: 0; background: var(--accent); border-radius: 20px; } .load-msg { color: var(--muted); font-size: .95rem; transition: opacity .18s ease; min-height: 1.4em; } /* ===== calendário ===== */ .cal-card { padding-bottom: 12px; } .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .cal-head b { font-family: var(--font-head); font-weight: 500; font-size: 1.1rem; } .cal-nav { background: var(--surface-2); border: none; border-radius: 10px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--text); cursor: pointer; } .cal-week { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: .72rem; color: var(--muted); margin-bottom: 4px; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .cal-cell { aspect-ratio: 1; border: none; background: transparent; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; color: var(--text); font: inherit; padding: 0; } .cal-cell.empty { visibility: hidden; } .cal-cell[data-empty] { cursor: default; } .cal-num { font-size: .82rem; } .cal-cell.hoje { background: var(--accent-soft); } .cal-cell.hoje .cal-num { color: var(--accent); font-weight: 700; } .cal-cell.sel { outline: 2px solid var(--accent); } .cal-cell.futuro { opacity: .35; } .cal-dots { display: flex; gap: 3px; height: 7px; } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); } .dot.on.manha { background: var(--mid); } .dot.on.noite { background: #8189c0; } .cal-legend { display: flex; gap: 16px; justify-content: center; margin-top: 12px; font-size: .76rem; color: var(--muted); } .cal-legend span { display: inline-flex; align-items: center; gap: 5px; } /* detalhe do dia */ .dia-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .dia-slot { display: flex; flex-direction: column; gap: 6px; font-size: .84rem; } .dia-slot img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); } .dia-slot div { display: flex; flex-direction: column; gap: 2px; } .dia-slot b { font-size: .9rem; } .dia-slot.vazio { align-items: flex-start; color: var(--muted); background: var(--surface-2); border-radius: 12px; padding: 14px; gap: 4px; } .link-mini { background: none; border: none; color: var(--accent); font: inherit; font-size: .82rem; cursor: pointer; } /* ===== alimentos ===== */ .food-lead { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 12px 0 4px; } .food-list { list-style: none; padding: 0; margin: 0; } .food-list li { padding: 8px 0 8px 22px; position: relative; border-top: 1px solid var(--line); } .food-list li:first-child { border-top: none; } .food-list li b { display: block; font-size: .9rem; font-weight: 600; } .food-list li span { font-size: .8rem; color: var(--muted); } .food-list li::before { content: ''; position: absolute; left: 4px; top: 14px; width: 8px; height: 8px; border-radius: 50%; } .food-list.good li::before { background: var(--good); } .food-list.bad li::before { background: var(--mid); } /* ===== critérios do score ===== */ .crit { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); font-size: .9rem; } .crit:first-of-type { border-top: none; } .crit b.neg { color: var(--bad); } .crit.total { border-top: 2px solid var(--accent-soft); margin-top: 4px; font-weight: 700; } .crit.total b { color: var(--accent); font-family: var(--font-head); font-size: 1.1rem; } /* ===== misc ===== */ .stack { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; align-items: center; } .stack .btn-primary, .stack .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .tile-hero { background: linear-gradient(135deg, var(--accent-soft), var(--surface)); border-color: var(--accent-soft); } /* ===== v3: painel central, sem nav ===== */ .hero.center { text-align: center; } .link-back { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; color: var(--muted); font: inherit; font-size: .9rem; cursor: pointer; padding: 4px 0; margin-bottom: 4px; } .link-back:active { color: var(--accent); } /* campos numéricos e lado a lado */ .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } input[type="number"] { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 1rem; font-family: inherit; } input[type="number"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* seções recolhíveis */ .details-card { padding: 0; overflow: hidden; } .details-card > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 16px; font-family: var(--font-head); font-weight: 500; font-size: 1.08rem; } .details-card > summary::-webkit-details-marker { display: none; } .details-card > summary > span { display: inline-flex; align-items: center; gap: 9px; } .details-card > summary .ico:last-child { color: var(--muted); transition: transform .2s ease; } .details-card[open] > summary .ico:last-child { transform: rotate(90deg); } .details-body { padding: 0 16px 16px; } .details-body .card { box-shadow: none; } /* passos numerados + detalhes */ .step-head { gap: 10px; } .step-num { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: .78rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .step-det { margin: 8px 0 0; } .step-det-lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); font-weight: 600; } .step-det p { margin: 2px 0 0; font-size: .86rem; color: var(--text); } /* produtos como sub-link expansível */ .prod-toggle { margin-top: 10px; } .prod-toggle > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--accent); font-weight: 600; } .prod-toggle > summary::-webkit-details-marker { display: none; } .prod-toggle .ico { color: var(--accent); } /* alimentos */ .food-hero { display: flex; align-items: center; gap: 8px; background: var(--accent-soft); color: var(--accent); border-radius: 12px; padding: 12px 14px; font-size: .95rem; margin-bottom: 12px; } .food-hero b { font-family: var(--font-head); } .food-simple { margin: 4px 0 0; padding-left: 18px; } .food-simple li { font-size: .86rem; margin: 4px 0; } .food-list li.destaque b { color: var(--accent); } /* ===== paywall / premium ===== */ .premium-card { background: linear-gradient(160deg, var(--accent-soft), var(--surface)); border-color: var(--accent-soft); text-align: center; } .premium-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--surface); border: 1px solid var(--accent-soft); border-radius: 20px; padding: 5px 12px; margin-bottom: 10px; } .premium-card h3 { justify-content: center; } .premium-benes { list-style: none; padding: 0; margin: 0 0 16px; text-align: left; } .premium-benes li { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; font-size: .92rem; } .premium-benes li .ico { color: var(--good); flex: none; margin-top: 1px; } .premium-benes.big li { font-size: .98rem; } #tenho-codigo { margin-top: 10px; } .price { margin: 8px 0 2px; } .price-val { font-family: var(--font-head); font-size: 2.2rem; font-weight: 600; color: var(--accent); } .price-per { color: var(--muted); font-size: 1rem; } .code-row { display: flex; gap: 8px; } .code-row input { flex: 1; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 1rem; font-family: inherit; text-transform: uppercase; } .code-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .code-row .btn-secondary { flex: none; } /* ===== gamificação / jornada Love Care ===== */ .journey{background:linear-gradient(135deg,var(--accent-soft),#fff);border-color:var(--accent-soft)} .journey-top{display:flex;align-items:center;justify-content:space-between} .lvl{display:flex;align-items:center;gap:10px} .lvl-emoji{font-size:1.8rem} .lvl b{font-family:var(--font-head);font-weight:500;font-size:1.05rem;display:block} .fire{display:flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:6px 12px} .fire-emoji{filter:grayscale(.45);transition:.3s} .fire b{font-family:var(--font-head);font-size:1.15rem;color:var(--accent)} .fire-lbl{font-size:.72rem;color:var(--muted)} .fire.hot .fire-emoji{filter:none;animation:flick 1.2s ease-in-out infinite} .fire.blaze .fire-emoji{filter:none;animation:flick .8s ease-in-out infinite} @keyframes flick{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.15) rotate(3deg)}} .xp-bar{height:10px;background:var(--surface-2);border-radius:20px;overflow:hidden;margin:14px 0 8px} .xp-fill{height:100%;border-radius:20px;background:linear-gradient(90deg,#e0a24f,var(--accent));transition:width .5s ease} .journey-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap} /* temporada (tema do mês) */ .season{display:flex;align-items:center;gap:12px;border-radius:16px;padding:12px 14px;margin-bottom:14px} .season-emoji{font-size:1.7rem} .season b{font-family:var(--font-head);font-weight:600;display:block;color:#7a4a52;line-height:1.1} .season .small{font-size:.76rem;color:#9a6b72} /* fases (dias) */ .cal-cell{position:relative} .cal-cell.full{background:linear-gradient(135deg,var(--accent),#caa06a);box-shadow:0 4px 12px rgba(183,110,121,.28)} .cal-cell.full .cal-num{color:#fff;font-weight:700} .cal-cell.full .cal-dots{display:none} .cal-cell.full::after{content:"✿";position:absolute;top:3px;right:5px;font-size:.62rem;color:rgba(255,255,255,.9)} .cal-cell.partial{background:var(--accent-soft)} .dot.full-dot{background:linear-gradient(135deg,var(--accent),#caa06a)} /* medalhas */ .medals{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .medal{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:14px 8px;border-radius:16px;border:1px solid var(--line);background:var(--surface)} .medal.got{background:linear-gradient(160deg,var(--accent-soft),#fff);border-color:var(--accent-soft)} .medal.locked{opacity:.55} .medal-emoji{font-size:1.9rem;line-height:1} .medal b{font-size:.82rem;font-family:var(--font-head);font-weight:500;line-height:1.15} /* celebração de conquista */ .modal-overlay.celebrate{background:rgba(120,70,80,.5)} .celebrate-modal{text-align:center;position:relative;overflow:hidden} .celebrate-emoji{font-size:4rem;line-height:1;animation:pop .5s ease} .celebrate-tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border-radius:20px;padding:5px 12px;margin:10px 0 4px} .celebrate-modal h3{justify-content:center;font-size:1.45rem;margin:4px 0} .confetti{position:absolute;inset:0;top:0;pointer-events:none;overflow:hidden} .confetti i{position:absolute;top:-12px;width:8px;height:8px;border-radius:2px;animation-name:fall;animation-timing-function:linear;animation-iteration-count:infinite} .confetti i:nth-child(odd){background:var(--accent)} .confetti i:nth-child(even){background:#e0a24f} .confetti i:nth-child(3n){background:#e58aa0;border-radius:50%} .confetti i:nth-child(4n){background:#8fbf9f} @keyframes fall{0%{transform:translateY(-12px) rotate(0);opacity:1}100%{transform:translateY(360px) rotate(360deg);opacity:0}} /* ===== plataforma de acne ===== */ .grau-badge{display:inline-block;font-size:.76rem;font-weight:700;padding:4px 12px;border-radius:20px;margin-top:6px} .grau-badge.good{background:#e6f3ec;color:#3f8b68} .grau-badge.mid{background:#fbf0dc;color:#a9772a} .grau-badge.bad{background:#fbeeec;color:#b6584e} :root[data-theme="dark"] .grau-badge.good{background:#1e3a2d;color:#7fd0a8} :root[data-theme="dark"] .grau-badge.mid{background:#3a2f18;color:#e0b565} :root[data-theme="dark"] .grau-badge.bad{background:#3a201e;color:#e09a90} .lesoes-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px} .lesoes-num{display:flex;align-items:baseline;gap:8px} .lesoes-num b{font-family:var(--font-head);font-size:2.6rem;color:var(--accent);line-height:1} .lesoes-num span{color:var(--muted);font-size:.9rem} .fase-mini{margin-top:8px;font-size:.8rem;background:var(--accent-soft);color:var(--accent);border-radius:20px;padding:5px 14px;font-weight:600} /* mapa do rosto */ .fm-wrap{display:flex;gap:16px;align-items:center} .face-map{width:150px;height:auto;flex:none} .fm-zone{transition:fill .3s ease} .fm-zone.clicavel{cursor:pointer} .fm-n{font-size:15px;font-weight:700;fill:#7d3f45;text-anchor:middle;font-family:var(--font-body)} .fm-side{flex:1;min-width:0} .fm-lead{margin:0 0 10px;font-size:.95rem;line-height:1.35} .fm-lead b{font-family:var(--font-head);font-size:1.15rem} .fm-zona{color:var(--accent)} .fm-rank{list-style:none;padding:0;margin:0} .fm-rank li{display:flex;justify-content:space-between;font-size:.84rem;padding:4px 0;border-top:1px solid var(--line)} .fm-rank li:first-child{border-top:none} .fm-rank b{color:var(--accent)} .fm-alerta{display:flex;gap:10px;background:var(--accent-soft);border-radius:14px;padding:12px 14px;margin-top:14px;font-size:.86rem} .fm-alerta b{display:block;font-family:var(--font-head);margin-bottom:2px} .fm-alerta span{color:var(--text);opacity:.8} .fm-det{margin-top:12px} .fm-causas{margin-top:8px} .face-map + .muted.center{text-align:center} /* fase do tratamento */ .fase-card{background:linear-gradient(135deg,#fff,var(--accent-soft));border-color:var(--accent-soft)} .fase-top{display:flex;gap:12px;align-items:flex-start} .fase-emoji{font-size:1.9rem;line-height:1} .fase-top b{font-family:var(--font-head);font-weight:500;display:block;font-size:1.05rem} .fase-linha{display:flex;gap:4px;margin-top:14px} .fase-passo{flex:1;text-align:center;font-size:.68rem;padding:6px 2px;border-radius:8px;background:var(--surface-2);color:var(--muted)} .fase-passo.feito{background:#e6f3ec;color:#3f8b68} .fase-passo.atual{background:var(--accent);color:#fff;font-weight:700} /* titulação */ .titul{list-style:none;padding:0;margin:0} .titul li{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-top:1px solid var(--line)} .titul li:first-child{border-top:none} .titul b{font-size:.86rem} .tit-freq{color:var(--accent);font-weight:600;font-size:.92rem} /* check-in */ .checkin-card h3{justify-content:flex-start} .ck-ok{font-size:.7rem;color:var(--good);background:#e6f3ec;border-radius:20px;padding:3px 9px;margin-left:8px;font-family:var(--font-body);font-weight:600} .ck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:8px;margin-top:12px} .ck-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:11px 6px;border-radius:14px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font:inherit;color:var(--text);transition:.15s} .ck-item:active{transform:scale(.96)} .ck-emoji{font-size:1.35rem;filter:grayscale(.55);transition:.15s} .ck-nome{font-size:.7rem;text-align:center;line-height:1.2;color:var(--muted)} .ck-item.on{border-color:var(--accent);background:var(--accent-soft)} .ck-item.on .ck-emoji{filter:none;transform:scale(1.1)} .ck-item.on .ck-nome{color:var(--accent);font-weight:600} .ck-ciclo{display:flex;flex-wrap:wrap;gap:7px} .ck-fase{font-size:.78rem;padding:7px 12px;border-radius:20px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-family:inherit;color:var(--text)} .ck-fase.on{background:var(--accent);color:#fff;border-color:var(--accent)} .ins-emoji{font-size:1.05rem;flex:none} /* mensagem de apoio */ .apoio{text-align:center;font-size:.92rem;color:var(--muted);background:var(--surface-2);border-radius:16px;padding:14px 16px;margin:14px 0} /* ===== mobile: alvos de toque (mínimo 44px) e ajustes de tela pequena ===== */ .ck-fase{min-height:44px;display:inline-flex;align-items:center;padding:10px 14px} .cal-nav{width:44px;height:44px} .link-reset,.link-back,.link-mini{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px} .ck-item{min-height:64px} .chip span{min-height:40px;display:inline-flex;align-items:center} .details-card > summary{min-height:52px} .prod-toggle > summary{min-height:44px;align-items:center} @media (max-width:420px){ .screen{padding:18px 14px 8px} h1{font-size:1.6rem} .fm-wrap{flex-direction:column;align-items:stretch;gap:12px} .face-map{width:170px;margin:0 auto} .fm-side{text-align:center} .fm-rank li{font-size:.86rem} .medals{grid-template-columns:repeat(2,1fr)} .ck-grid{grid-template-columns:repeat(auto-fill,minmax(86px,1fr))} .result-head{gap:12px} .result-thumb{width:78px;height:78px} .score-big{font-size:2.2rem} .lesoes-num b{font-size:2.2rem} .grid{gap:10px} .tile{padding:15px} .dia-slots{gap:8px} .fase-passo{font-size:.62rem} .row{flex-direction:column} .row > *{width:100%} }