/* Site lembrade.com — estilos. Spec: docs/mockups/mockup-site-decisoes.html (rev. 4). Tokens: os do app (docs/design/tokens-cor.md, tokens-tipografia-espacamento.md) + os três tokens só do site (Web/Display/L, Web/Display/M, Web/Space/Section). Nada de valor fora daqui. */ @font-face{font-family:'Figtree';src:url('/assets/fonts/figtree-latin.woff2') format('woff2');font-weight:300 900;font-display:swap} @font-face{font-family:'Poppins';src:url('/assets/fonts/poppins-800-latin.woff2') format('woff2');font-weight:800;font-display:swap} :root{ --primary:#FF0D5E; --on-primary:#FFFFFF; --accent-ink:#E0004B; --neutral:#332621; --ink:#27282D; --muted:#464850; --border:#DFDFE2; --icon-muted:#A4A6AF; --card-bg:#FFFFFF; --screen-bg:#FFFFFF; --recv-bg:#EBECEE; --success-ink:#17814F; --success-soft:#E2F5EA; --danger-ink:#DC1F2C; --primary-soft:#FFE4EC; --disabled-bg:#EBECEE; --disabled-text:#ABADB6; --space-4:4px; --space-8:8px; --space-12:12px; --space-16:16px; --space-20:20px; --space-24:24px; --space-32:32px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px; --radius-full:999px; --font-display:'Poppins',sans-serif; --font-text:'Figtree',sans-serif; /* Tokens só do site (26/09/2026) */ --web-display-l:48px; --web-display-l-lh:52px; --web-display-m:32px; --web-display-m-lh:36px; --web-section:64px; } /* Fase do site: um bloco com data-fases="2 3" só aparece nas fases listadas. A fase é definida em /assets/fase.js, que roda no antes de pintar. Se ele não carregar, a página se comporta como fase 1 em vez de mostrar todas as fases juntas. */ html:not([data-fase]) [data-fases]:not([data-fases~="1"]), html[data-fase="1"] [data-fases]:not([data-fases~="1"]), html[data-fase="2"] [data-fases]:not([data-fases~="2"]), html[data-fase="3"] [data-fases]:not([data-fases~="3"]){display:none !important} /* Text Styles LembraDe/* */ .t-headline-l{font-family:var(--font-display);font-weight:800;font-size:24px;line-height:28px} .t-title-l{font-family:var(--font-text);font-weight:700;font-size:18px;line-height:22px} .t-title-m{font-family:var(--font-text);font-weight:600;font-size:16px;line-height:20px} .t-title-s{font-family:var(--font-text);font-weight:600;font-size:14px;line-height:18px} .t-body-l{font-family:var(--font-text);font-weight:400;font-size:14px;line-height:18px} .t-body-m{font-family:var(--font-text);font-weight:500;font-size:14px;line-height:18px} .t-body-s{font-family:var(--font-text);font-weight:500;font-size:12px;line-height:16px} .t-label-l{font-family:var(--font-text);font-weight:500;font-size:12px;line-height:16px;text-transform:uppercase} .t-label-e{font-family:var(--font-text);font-weight:600;font-size:12px;line-height:16px} .t-web-display{font-family:var(--font-display);font-weight:800;font-size:var(--web-display-l);line-height:var(--web-display-l-lh);letter-spacing:-.01em;margin:0} *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--screen-bg);color:var(--ink);font-family:var(--font-text);min-height:100vh;display:flex;flex-direction:column} a{color:inherit} .muted{color:var(--muted)} .wrap{width:100%;max-width:960px;margin:0 auto;padding:0 var(--space-32)} main{flex:1} /* cabeçalho e rodapé */ .s-head{height:72px;display:flex;align-items:center;justify-content:space-between} .lockup{display:block;line-height:0} .lockup img{height:28px;width:auto} .s-nav{display:flex;gap:var(--space-20);align-items:center} .s-nav a{color:var(--muted);text-decoration:none} .s-nav a:hover{color:var(--ink)} .s-foot{border-top:1px solid var(--border);padding:var(--space-24) 0 var(--space-32);margin-top:var(--space-32)} .s-foot .row{display:flex;justify-content:space-between;gap:var(--space-16);flex-wrap:wrap;align-items:center} .s-foot .links{display:flex;gap:var(--space-16);flex-wrap:wrap} .s-foot a{color:var(--muted);text-decoration:none} .s-foot a:hover{color:var(--ink);text-decoration:underline} /* botões */ .btn{height:52px;border-radius:var(--radius-xl);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);padding:0 var(--space-24);border:0;font:inherit;cursor:pointer;text-decoration:none} .btn.primary{background:var(--primary);color:var(--on-primary)} .btn.secondary{background:var(--card-bg);color:var(--ink);border:1.5px solid var(--border)} .btn.small{height:40px;padding:0 var(--space-16)} a.lnk{color:var(--accent-ink);text-decoration:underline} /* selos: "em breve" (fase 1) é pílula de texto; os selos oficiais entram na fase 2 */ .badges{display:flex;gap:var(--space-12);flex-wrap:wrap} .soon{height:48px;border-radius:var(--radius-md);background:var(--disabled-bg);color:var(--disabled-text);display:inline-flex;flex-direction:column;justify-content:center;padding:0 var(--space-16);min-width:150px} .soon small{font-size:10px;line-height:12px} .soon span{font-size:15px;line-height:18px;font-weight:600} /* hero */ .hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-16);padding:var(--web-section) 0;max-width:560px;margin:0 auto} .eyebrow{display:inline-flex;align-items:center;background:var(--primary-soft);color:var(--accent-ink);border-radius:var(--radius-full);padding:var(--space-4) var(--space-12)} .hero .sub{color:var(--muted);font-size:16px;line-height:22px;margin:0} .hero .badges{justify-content:center} /* convite */ .inv{max-width:440px;margin:0 auto;padding:var(--space-32) 0 var(--web-section);display:flex;flex-direction:column;align-items:center;gap:var(--space-16);text-align:center} .inv h1{margin:0} .inv p{margin:0} .inv .sym{height:56px;width:auto} .alt{display:none} .alt.on{display:contents} .codebox{width:100%;border:1.5px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-20);display:flex;flex-direction:column;gap:var(--space-12);align-items:center} .code{font-family:var(--font-display);font-weight:800;font-size:var(--web-display-m);line-height:var(--web-display-m-lh);letter-spacing:.18em;padding-left:.18em} .box{width:100%;background:var(--recv-bg);border-radius:var(--radius-lg);padding:var(--space-16);text-align:left;display:flex;flex-direction:column;gap:var(--space-8)} .box.outline{background:transparent;border:1.5px solid var(--border)} .toast{position:fixed;left:50%;bottom:var(--space-24);transform:translateX(-50%);background:var(--ink);color:var(--on-primary);border-radius:var(--radius-full);padding:var(--space-8) var(--space-16);opacity:0;transition:opacity .2s;pointer-events:none} .toast.on{opacity:1} /* páginas de texto */ .doc{max-width:720px;margin:0 auto;padding:var(--space-32) 0 var(--web-section)} .doc .meta{color:var(--muted);margin:var(--space-8) 0 var(--space-24)} .doc h2{margin:var(--space-32) 0 var(--space-8)} .doc p,.doc li{color:var(--muted);font-size:16px;line-height:24px} .doc p{margin:0 0 var(--space-12)} .doc ol,.doc ul{padding-left:22px;margin:0 0 var(--space-12)} .doc b{color:var(--ink)} .card{border:1.5px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-20);margin-bottom:var(--space-16)} .card .t-body-l{margin-top:var(--space-4)} details.faq{border-top:1px solid var(--border)} details.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--space-12);padding:var(--space-16) 0;cursor:pointer;color:var(--ink)} details.faq summary::-webkit-details-marker{display:none} details.faq summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-right:var(--space-4);transition:transform .15s;flex-shrink:0} details.faq[open] summary::after{transform:rotate(-135deg)} details.faq p{padding:0 0 var(--space-16);margin:0} .case{display:grid;grid-template-columns:auto 1fr;gap:var(--space-12);padding:var(--space-12) 0;border-top:1px solid var(--border)} .case .dot{width:10px;height:10px;border-radius:50%;background:var(--primary);margin-top:7px} .case p{margin:0} .center{text-align:center} .notfound{max-width:560px;margin:0 auto;padding:var(--web-section) 0;display:flex;flex-direction:column;gap:var(--space-12);align-items:center;text-align:center} .notfound h1,.notfound p{margin:0} /* celular */ @media (max-width:640px){ .wrap{padding:0 var(--space-20)} .s-head{height:60px} .lockup img{height:22px} .t-web-display{font-size:var(--web-display-m);line-height:var(--web-display-m-lh)} .hero{padding:var(--space-32) 0} .s-foot .row{flex-direction:column;align-items:flex-start} }