/*! krv-ui v1 — design system do ecossistema KRV/Larke * Fonte de verdade: extraído do krv-site (next/app/globals.css + next/tailwind.config.js). * Consumo (apps estáticos/vanilla/Supabase/Python): * * Tema de cor por marca (KRV é o padrão): * KRV — vermelho (site + ferramentas) * Calculadora * Larke (corporativo) * simulador-caixa */ /* ---- Fontes (SELF-HOST, offline-safe nos apps nginx; OFL) — subsets latin + latin-ext ---- * .woff2 em /ui/v1/fonts/ (Bricolage Grotesque + Instrument Sans, variáveis). Sem dependência * de Google Fonts em runtime. font-display:swap → fallback de sistema enquanto carrega. */ @font-face{font-family:'Bricolage Grotesque';font-weight:500 800;font-style:normal;font-display:swap;src:url('/ui/v1/fonts/BricolageGrotesque-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Bricolage Grotesque';font-weight:500 800;font-style:normal;font-display:swap;src:url('/ui/v1/fonts/BricolageGrotesque-latinext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Instrument Sans';font-weight:400 700;font-style:normal;font-display:swap;src:url('/ui/v1/fonts/InstrumentSans-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Instrument Sans';font-weight:400 700;font-style:normal;font-display:swap;src:url('/ui/v1/fonts/InstrumentSans-latinext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} /* ---- Tokens (tema KRV padrão) ---- */ :root{ --krv-brand:#E0040B; --krv-brand-dark:#B5030A; --krv-brand-soft:#FFF1F1; --krv-ink:#15171C; --krv-ink-soft:#3A3E47; --krv-ink-mute:#6B6F78; --krv-paper:#F6F4EF; --krv-paper-alt:#ECE9E1; --krv-paper-line:#D8D4C9; --krv-wa:#1FAF5A; --krv-accent:var(--krv-brand); --krv-font-display:'Bricolage Grotesque',system-ui,-apple-system,sans-serif; --krv-font-sans:'Instrument Sans',system-ui,-apple-system,sans-serif; --krv-radius-card:1rem; --krv-radius-field:.75rem; --krv-radius-pill:9999px; --krv-shadow-card:0 10px 30px rgba(21,23,28,.06); --krv-shadow-lift:0 18px 44px rgba(21,23,28,.12); --krv-shadow-glow:0 10px 24px -10px rgba(224,4,11,.55); --krv-shadow-glow-wa:0 12px 26px -10px rgba(31,175,90,.55); } /* ---- Temas (mesma base, cor diferente) ---- */ [data-brand="emerald"]{ --krv-brand:#065f46; --krv-brand-dark:#047857; --krv-brand-soft:#ecfdf5; --krv-paper:#ffffff; --krv-paper-alt:#f5f5f4; --krv-paper-line:#e7e5e4; --krv-shadow-glow:0 10px 24px -10px rgba(6,95,70,.45); } [data-brand="larke"]{ --krv-brand:#c8a96a; --krv-brand-dark:#b2935a; --krv-brand-soft:#f4f1ea; --krv-ink:#1a1a18; --krv-ink-soft:#3a3a33; --krv-paper:#f4f1ea; --krv-paper-alt:#ece7db; --krv-paper-line:#ddd5c5; --krv-shadow-glow:0 10px 24px -10px rgba(200,169,106,.5); } [data-brand="caixa"]{ --krv-brand:#005CA9; --krv-brand-dark:#00457e; --krv-brand-soft:#EEF4FB; --krv-accent:#F39200; --krv-paper:#ffffff; --krv-paper-alt:#f1f5f9; --krv-paper-line:#dbe3ec; --krv-shadow-glow:0 10px 24px -10px rgba(0,92,169,.45); } /* ---- Base opt-in (aplique a classe .krv-base no ou num root) ---- */ .krv-base{ background:var(--krv-paper); color:var(--krv-ink); font-family:var(--krv-font-sans); -webkit-font-smoothing:antialiased; } .krv-base h1,.krv-base h2,.krv-base h3,.krv-base h4{ font-family:var(--krv-font-display); font-weight:800; letter-spacing:-.02em; line-height:1.1; } .krv-base h3,.krv-base h4{ font-weight:700; } .krv-base h1{ font-size:2.5rem; line-height:1.04; } .krv-base h2{ font-size:1.9rem; } .krv-base h3{ font-size:1.22rem; } @media(min-width:768px){ .krv-base h1{ font-size:4rem; } .krv-base h2{ font-size:2.55rem; } } /* ---- Componentes (porte de globals.css, em CSS puro) ---- */ .container-k{ max-width:72rem; margin-inline:auto; padding-inline:1.25rem; } @media(min-width:768px){ .container-k{ padding-inline:2rem; } } .kicker{ display:inline-flex; align-items:center; gap:.5rem; color:var(--krv-brand); font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; } .kicker::before{ content:""; width:1.75rem; height:2.5px; background:var(--krv-brand); border-radius:2px; } .btn-k,.btn-ghost,.btn-light{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:var(--krv-radius-pill); font-weight:700; padding:.875rem 1.5rem; min-height:44px; font-size:.95rem; line-height:1; cursor:pointer; text-decoration:none; border:0; transition:background-color .2s,border-color .2s,transform .2s,box-shadow .2s,opacity .2s; } .btn-k{ background:var(--krv-brand); color:#fff; box-shadow:var(--krv-shadow-glow); } .btn-k:hover{ background:var(--krv-brand-dark); transform:translateY(-2px); } .btn-k:active{ transform:none; background:var(--krv-brand-dark); } .btn-ghost{ background:#fff; color:var(--krv-ink); border:1.5px solid var(--krv-paper-line); } .btn-ghost:hover{ border-color:var(--krv-ink); transform:translateY(-2px); } .btn-light{ background:#fff; color:var(--krv-ink); } .btn-light:hover{ transform:translateY(-2px); box-shadow:var(--krv-shadow-lift); } .btn-k:disabled,.btn-ghost:disabled,.btn-light:disabled{ opacity:.6; pointer-events:none; } .card-k{ background:#fff; border:1px solid var(--krv-paper-line); border-radius:var(--krv-radius-card); box-shadow:var(--krv-shadow-card); transition:box-shadow .3s,transform .3s; } .card-k:hover{ box-shadow:var(--krv-shadow-lift); transform:translateY(-4px); } .fld-k{ display:block; font-size:.85rem; font-weight:600; color:var(--krv-ink-soft); } .fld-k input,.fld-k select,.fld-k textarea{ margin-top:.375rem; width:100%; border-radius:var(--krv-radius-field); border:1.5px solid var(--krv-paper-line); background:#fff; padding:.75rem 1rem; min-height:44px; font-size:1rem; font-weight:500; color:var(--krv-ink); outline:0; transition:border-color .15s; } .fld-k input:focus,.fld-k select:focus,.fld-k textarea:focus{ border-color:var(--krv-brand); } .fld-k input[aria-invalid="true"],.fld-k select[aria-invalid="true"],.fld-k textarea[aria-invalid="true"]{ border-color:var(--krv-brand); } .fld-err{ margin-top:.25rem; display:flex; align-items:center; gap:.25rem; font-size:.8rem; font-weight:600; color:var(--krv-brand); } .chip-k{ display:inline-flex; align-items:center; gap:.25rem; border-radius:var(--krv-radius-pill); padding:.375rem .75rem; font-size:.78rem; font-weight:600; font-variant-numeric:tabular-nums; } .price-k{ font-variant-numeric:tabular-nums; } details.faq-k{ border:1px solid var(--krv-paper-line); border-radius:.75rem; background:#fff; padding-inline:1.25rem; } details.faq-k summary{ cursor:pointer; list-style:none; padding-block:1rem; min-height:44px; font-weight:700; font-size:1.02rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; } details.faq-k summary::-webkit-details-marker{ display:none; } details.faq-k summary::after{ content:'+'; color:var(--krv-brand); font-size:1.5rem; font-family:var(--krv-font-display); line-height:1; transition:transform .2s; } details.faq-k[open] summary::after{ transform:rotate(45deg); } details.faq-k p{ padding-bottom:1.25rem; color:var(--krv-ink-mute); line-height:1.6; } /* ---- A11y + movimento (porte do krv-site) ---- */ .krv-base :focus-visible,.btn-k:focus-visible,.btn-ghost:focus-visible,.btn-light:focus-visible{ outline:2px solid var(--krv-brand); outline-offset:2px; border-radius:4px; } .reveal-k{ opacity:0; transform:translateY(18px); transition:opacity .6s ease-out,transform .6s ease-out; } .reveal-k.in{ opacity:1; transform:none; } .grain-k{ position:relative; } .grain-k::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5; background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px); background-size:22px 22px; } @keyframes krv-wa-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(31,175,90,.45); } 50%{ box-shadow:0 0 0 14px rgba(31,175,90,0); } } .wa-pulse{ animation:krv-wa-pulse 2.4s infinite; } @media (prefers-reduced-motion: reduce){ .reveal-k{ opacity:1; transform:none; transition:none; } .wa-pulse{ animation:none; } }