/* ======================================================================== OBRALIVRE SIGNATURE — Design System (1 sistema, 2 temas) Fontes esperadas na página (via CDN): Instrument Serif · IBM Plex Sans · IBM Plex Mono Uso: (docs Obralivre) | (produto Tecfit) Hospedado em https://tecfit.obralivre.com.br/ds.css ======================================================================== */ /* ---- TEMAS: papéis semânticos ---- */ :root[data-theme="papel"]{ --bg:#EFE8DC; --surface:#F4EEE2; --surface-2:#E7DECF; --ink:#0F0D0B; --muted:#6B6560; --line:#D9D0C4; --accent:#9B3A16; --accent-soft:rgba(155,58,22,.10); --brass:#8B6B2E; --pulse:#C0341A; --pulse-glow:rgba(192,52,26,.45); --shadow:0 8px 24px rgba(15,13,11,.08); } :root[data-theme="navy"]{ --bg:#0A0E14; --surface:#141A24; --surface-2:#1C2430; --ink:#EAF2F5; --muted:#7A8794; --line:rgba(255,255,255,.10); --accent:#22D3EE; --accent-soft:rgba(34,211,238,.12); --brass:#C8A56A; --pulse:#FF3B3B; --pulse-glow:rgba(255,59,48,.6); --shadow:0 10px 30px rgba(0,0,0,.35); } /* ---- FONTES / TOKENS ---- */ :root{ --font-display:'Instrument Serif',Georgia,serif; --font-sans:'IBM Plex Sans',system-ui,sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,monospace; --wrap:920px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--ink);font-family:var(--font-sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased} .ds-wrap{max-width:var(--wrap);margin:0 auto;padding:0 2rem} /* ---- TIPOGRAFIA ---- */ h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.04;letter-spacing:-.01em;color:var(--ink)} h1{font-size:clamp(2.6rem,6vw,4.6rem)} h2{font-size:clamp(1.9rem,3.6vw,2.9rem)} h3{font-size:clamp(1.3rem,2.2vw,1.7rem)} p{font-size:1rem;line-height:1.72} .ds-lead{font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.6;color:var(--muted)} em{font-style:italic} strong,b{font-weight:600} /* ---- EYEBROW ---- */ .ds-eyebrow{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:.6rem} .ds-eyebrow::before{content:"";width:22px;height:1px;background:var(--accent)} /* ---- BOTÕES ---- */ .ds-btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-sans);font-weight:600;font-size:.95rem;text-decoration:none;padding:.85rem 1.6rem;border-radius:10px;border:1.5px solid transparent;cursor:pointer;transition:filter .18s,background .18s,border-color .18s} .ds-btn--solid{background:var(--accent);color:var(--bg)} .ds-btn--solid:hover{filter:brightness(1.08)} .ds-btn--ghost{border-color:var(--line);color:var(--ink)} .ds-btn--ghost:hover{background:var(--accent-soft);border-color:var(--accent)} /* ---- CARD ---- */ .ds-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.5rem} /* ---- STAT / NÚMERO ---- */ .ds-stat .num{font-family:var(--font-display);font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;color:var(--accent)} .ds-stat .label{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)} /* ---- BADGE severidade ---- */ .ds-badge{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .55rem;border-radius:5px;border:1px solid var(--line);color:var(--muted);white-space:nowrap} .ds-badge--crit{color:var(--accent);border-color:var(--accent)} /* ---- PAGE HEAD / FOOTER ---- */ .ds-pagehead{display:flex;justify-content:space-between;gap:1rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:1.2rem 0;border-bottom:1px solid var(--line)} .ds-footer{border-top:1px solid var(--line);padding:2.25rem 0;text-align:center;color:var(--muted);font-family:var(--font-mono);font-size:.72rem} .ds-footer .tag{display:block;font-family:var(--font-display);font-style:italic;font-size:1.5rem;color:var(--ink);margin-bottom:.4rem} /* ---- ASSINATURA: pulso/ECG (o fio que amarra papel + navy) ---- */ .ds-pulse{display:block;width:100%;height:48px;opacity:.6;pointer-events:none} .ds-pulse path{fill:none;stroke:var(--pulse);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px var(--pulse-glow))} /* ---- MISC ---- */ .ds-rule{height:1px;background:var(--line);border:0;margin:2rem 0} a{color:var(--accent)} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} @media (max-width:640px){.ds-wrap{padding:0 1.25rem}} /* Path de referência p/ o pulso (usar em ): */