:root{ --bg: #f6f7f8; --text: #111214; --muted: rgba(17,18,20,.62); --border: rgba(17,18,20,.12); --glass: rgba(255,255,255,.70); --shadow: 0 12px 34px rgba(0,0,0,.10); --accent: #0a84ff; --radius: 18px; --pad: clamp(18px, 3vw, 30px); --w: 74ch; /* Escala global controlada por JS (A-, A, A+) */ --scale: 1; /* Fontes: UI em sans, leitura em serif */ --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; --font-serif: ui-serif, "Iowan Old Style", "Charter", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --h1: clamp(2.0rem, 1.2rem + 2.2vw, 3.0rem); --h2: clamp(1.35rem, 1.05rem + 1.0vw, 1.8rem); --h3: 1.18rem; --p: clamp(1.02rem, 0.98rem + 0.25vw, 1.12rem); --lh: 1.78; --lh-tight: 1.22; } @media (prefers-color-scheme: dark){ :root{ --bg: #0b0c0f; --text: rgba(255,255,255,.92); --muted: rgba(255,255,255,.62); --border: rgba(255,255,255,.14); --glass: rgba(18,19,24,.68); --shadow: 0 22px 60px rgba(0,0,0,.45); --accent: #64d2ff; } } *{ box-sizing: border-box; } html, body{ height: 100%; } /* Aumenta/diminui tudo com segurança */ html{ font-size: calc(16px * var(--scale)); } body{ margin: 0; color: var(--text); font-family: var(--font-serif); letter-spacing: .01em; text-rendering: optimizeLegibility; font-kerning: normal; background: radial-gradient(1100px 800px at 20% 0%, rgba(10,132,255,.07), transparent 58%), radial-gradient(900px 650px at 90% 10%, rgba(100,210,255,.07), transparent 58%), var(--bg); } /* Fundo mais neutro para leitura longa (use no reader.html) */ body.reader{ background: var(--bg); } a{ color: var(--accent); text-decoration: none; } a:hover{ text-decoration: underline; } ::selection{ background: rgba(10,132,255,.18); } @media (prefers-color-scheme: dark){ ::selection{ background: rgba(100,210,255,.22); } } :focus-visible{ outline: 2px solid rgba(10,132,255,.55); outline-offset: 3px; border-radius: 12px; } @media (prefers-color-scheme: dark){ :focus-visible{ outline-color: rgba(100,210,255,.55); } } .skip-link{ position:absolute; top:10px; left:10px; padding:10px 12px; background: rgba(255,255,255,.95); border: 1px solid var(--border); border-radius: 12px; transform: translateY(-200%); transition: transform .18s ease; z-index: 999; color: #111214; font-family: var(--font-sans); } @media (prefers-color-scheme: dark){ .skip-link{ background: rgba(18,19,24,.95); color: rgba(255,255,255,.92); } } .skip-link:focus{ transform: translateY(0); } .progress{ position: sticky; top:0; height: 3px; width: 100%; z-index: 60; background: transparent; } .progress > div{ height: 100%; width: 0%; background: var(--accent); border-radius: 999px; } header.site-header{ position: sticky; top: 10px; z-index: 50; margin: 10px auto 0; padding: 12px 14px; max-width: min(1100px, calc(100% - 20px)); border-radius: var(--radius); background: var(--glass); border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); font-family: var(--font-sans); } .topbar{ display:flex; align-items:center; justify-content:space-between; gap: 12px; } .brand{ display:flex; flex-direction:column; line-height: 1.1; min-width: 0; font-family: var(--font-sans); } .brand .t{ font-weight: 650; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand .s{ font-size: .82rem; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .btn{ appearance:none; border: 1px solid var(--border); background: rgba(255,255,255,.55); color: var(--text); padding: 9px 12px; border-radius: 12px; font-size: .92rem; cursor:pointer; font-family: var(--font-sans); } @media (prefers-color-scheme: dark){ .btn{ background: rgba(255,255,255,.06); } } .btn:hover{ filter: brightness(1.03); } /* Botões compactos do controle de fonte */ .btn-compact{ padding: 8px 10px; min-width: 40px; font-weight: 650; } .fontControls{ display: inline-flex; gap: 8px; align-items: center; } .nav-inline{ display:none; gap: 8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; font-family: var(--font-sans); } .nav-inline a{ padding: 8px 10px; border-radius: 12px; border: 1px solid transparent; color: var(--text); font-size: .92rem; text-decoration:none; } .nav-inline a:hover{ background: rgba(10,132,255,.08); border-color: rgba(10,132,255,.18); text-decoration:none; } .nav-inline a.active{ background: rgba(10,132,255,.14); border-color: rgba(10,132,255,.30); } @media (min-width: 960px){ .nav-inline{ display:flex; } .menu-btn{ display:none; } } /* Drawer mobile */ .overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.22); opacity: 0; pointer-events: none; transition: opacity .18s ease; z-index: 80; } .overlay.open{ opacity: 1; pointer-events: auto; } .drawer{ position: fixed; top: 0; right: 0; height: 100%; width: min(360px, 92vw); background: var(--glass); border-left: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transform: translateX(102%); transition: transform .22s ease; z-index: 90; padding: 14px; overflow:auto; font-family: var(--font-sans); } .drawer.open{ transform: translateX(0); } .drawer h2{ margin: 6px 0 10px; font-size: 1.0rem; letter-spacing: .01em; } .drawer a{ display:flex; align-items:center; justify-content:space-between; gap: 10px; padding: 12px 12px; border-radius: 14px; border: 1px solid transparent; color: var(--text); text-decoration:none; margin-bottom: 8px; } .drawer a:hover{ background: rgba(10,132,255,.08); border-color: rgba(10,132,255,.18); } .drawer a.active{ background: rgba(10,132,255,.14); border-color: rgba(10,132,255,.30); } main{ padding: 0 var(--pad) 60px; } .wrap{ max-width: 980px; margin: 0 auto; padding-top: 28px; } .readWrap{ max-width: var(--w); margin: 0 auto; padding-top: 26px; } /* Index hero */ .hero{ border-radius: 22px; background: var(--glass); border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); padding: clamp(18px, 3vw, 28px); } .heroGrid{ display:grid; grid-template-columns: 1.25fr .75fr; gap: 16px; align-items:start; } @media (max-width: 920px){ .heroGrid{ grid-template-columns: 1fr; } } .bookTitle{ margin: 6px 0 10px; font-size: clamp(2.2rem, 1.2rem + 2.8vw, 3.35rem); line-height: 1.15; letter-spacing: -0.02em; max-width: 22ch; font-family: var(--font-sans); } .lead{ margin: 0 0 16px; font-size: var(--p); line-height: 1.65; color: var(--muted); max-width: 70ch; } .ctaRow{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 10px; } .cta{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(10,132,255,.28); background: rgba(10,132,255,.10); color: var(--text); text-decoration:none; font-weight: 650; font-family: var(--font-sans); } .cta:hover{ text-decoration:none; background: rgba(10,132,255,.14); } .cta.secondary{ border-color: var(--border); background: rgba(127,127,127,.10); font-weight: 600; } .sideCard{ border: 1px solid var(--border); border-radius: 18px; padding: 14px 14px; background: rgba(255,255,255,.42); font-family: var(--font-sans); } @media (prefers-color-scheme: dark){ .sideCard{ background: rgba(255,255,255,.05); } } .sideCard h2{ margin: 6px 0 10px; font-size: var(--h2); letter-spacing: -0.01em; font-family: var(--font-sans); } .small{ margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.55; } .grid{ margin-top: 16px; display:grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 920px){ .grid{ grid-template-columns: 1fr; } } .card{ border-radius: 22px; background: var(--glass); border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); padding: 16px 16px; } .card h2{ margin: 6px 0 10px; font-size: 1.05rem; letter-spacing: .01em; font-family: var(--font-sans); } .list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 8px; } .item a{ display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 12px 12px; border-radius: 16px; border: 1px solid transparent; color: var(--text); text-decoration:none; font-family: var(--font-sans); } .item a:hover{ background: rgba(10,132,255,.08); border-color: rgba(10,132,255,.18); } .left{ display:flex; flex-direction:column; gap:2px; min-width:0; } .name{ font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .desc{ font-size:.92rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .right{ display:flex; align-items:center; gap:10px; flex-shrink:0; } .badge{ font-variant-numeric: tabular-nums; font-size: .86rem; color: var(--muted); border: 1px solid var(--border); background: rgba(255,255,255,.42); padding: 6px 10px; border-radius: 999px; font-family: var(--font-sans); } @media (prefers-color-scheme: dark){ .badge{ background: rgba(255,255,255,.05); } } .arrow{ width: 34px; height: 34px; display:grid; place-items:center; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.42); } @media (prefers-color-scheme: dark){ .arrow{ background: rgba(255,255,255,.05); } } /* Reader page */ .pageTitle{ font-size: var(--h1); line-height: var(--lh-tight); margin: 10px 0 8px; letter-spacing: -0.02em; font-family: var(--font-sans); } .meta{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin: 0 0 18px; color: var(--muted); font-size: .94rem; font-family: var(--font-sans); } .pill{ display:inline-flex; align-items:center; gap:8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,.45); font-family: var(--font-sans); } @media (prefers-color-scheme: dark){ .pill{ background: rgba(255,255,255,.06); } } details.toc{ border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; background: rgba(255,255,255,.42); margin: 12px 0 22px; font-family: var(--font-sans); } @media (prefers-color-scheme: dark){ details.toc{ background: rgba(255,255,255,.05); } } details.toc summary{ cursor:pointer; font-weight: 650; list-style: none; } details.toc summary::-webkit-details-marker{ display:none; } .toc-list{ list-style:none; padding: 10px 0 0 0; margin: 0; display:flex; flex-direction:column; gap: 6px; } .toc-list a{ display:block; padding: 8px 10px; border-radius: 12px; border: 1px solid transparent; color: var(--text); text-decoration:none; font-size: .95rem; line-height: 1.25; font-family: var(--font-sans); } .toc-list a:hover{ background: rgba(10,132,255,.08); border-color: rgba(10,132,255,.18); } .toc-list .lvl4{ padding-left: 28px; color: var(--muted); } /* Markdown typography */ article.content{ font-family: var(--font-serif); font-size: var(--p); line-height: var(--lh); text-wrap: pretty; hyphens: auto; } article.content a{ text-decoration: underline; text-decoration-color: rgba(10,132,255,.38); text-underline-offset: .18em; text-decoration-thickness: .08em; } article.content a:hover{ text-decoration-color: rgba(10,132,255,.80); } article.content mark{ background: rgba(10,132,255,.14); color: inherit; padding: 0 .12em; border-radius: .35em; } @media (prefers-color-scheme: dark){ article.content mark{ background: rgba(100,210,255,.16); } } article.content h1{ display:none; } article.content h2{ font-family: var(--font-sans); font-size: var(--h2); line-height: 1.28; margin: 34px 0 10px; letter-spacing: -0.015em; } article.content h3{ font-family: var(--font-sans); font-size: var(--h3); margin: 24px 0 8px; } article.content h4{ font-family: var(--font-sans); font-size: 1.05rem; margin: 18px 0 6px; letter-spacing: -0.005em; } article.content p{ margin: 12px 0; } article.content strong{ font-weight: 700; } article.content hr{ border:0; border-top: 1px solid var(--border); margin: 26px 0; } article.content blockquote{ margin: 18px 0; padding: 12px 14px; border-left: 4px solid rgba(10,132,255,.45); background: rgba(10,132,255,.05); border-radius: 14px; color: inherit; } @media (prefers-color-scheme: dark){ article.content blockquote{ background: rgba(100,210,255,.06); border-left-color: rgba(100,210,255,.45); } } article.content ul, article.content ol{ padding-left: 1.2rem; margin: 12px 0; } article.content li{ margin: 6px 0; } article.content code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: .95em; background: rgba(127,127,127,.14); padding: .15em .35em; border-radius: 8px; border: 1px solid rgba(127,127,127,.16); } article.content pre{ overflow:auto; padding: 14px 14px; border-radius: 14px; border: 1px solid var(--border); background: rgba(127,127,127,.10); margin: 16px 0; } article.content pre code{ background: transparent; border: 0; padding: 0; font-size: .92em; } article.content img{ max-width: 100%; border-radius: 14px; border: 1px solid var(--border); margin: 14px 0; } .pager{ margin-top: 26px; display:flex; justify-content:space-between; gap: 10px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: .95rem; font-family: var(--font-sans); } .pager a{ display:inline-flex; align-items:center; gap:10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: rgba(255,255,255,.42); color: var(--text); text-decoration:none; } @media (prefers-color-scheme: dark){ .pager a{ background: rgba(255,255,255,.05); } } .pager a:hover{ filter: brightness(1.03); } footer.site-footer{ margin-top: 18px; color: var(--muted); text-align:center; font-size: .92rem; font-family: var(--font-sans); } /* Corner counter */ .cornerCounter{ position: fixed; right: 14px; bottom: 14px; z-index: 999; display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--glass); box-shadow: var(--shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: var(--text); font-size: .92rem; font-family: var(--font-sans); } .cornerCounter .dot{ width: 8px; height: 8px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 3px rgba(10,132,255,.12); } @media (max-width: 520px){ .cornerCounter{ right: 10px; bottom: 10px; padding: 9px 10px; font-size: .88rem; } } /* Fundo cinematográfico apenas no index */ body.index{ background: url("/bg_cinematic.webp") center/cover no-repeat fixed; background-color: var(--bg); } /* Evita “fixed background” no mobile (pode engasgar em alguns aparelhos) */ @media (max-width: 900px){ body.index{ background-attachment: scroll; } } /* Capa no hero do index */ .coverCard{ width: 100%; max-width: 380px; margin-left: auto; border-radius: 18px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); background: rgba(255,255,255,.22); } @media (prefers-color-scheme: dark){ .coverCard{ background: rgba(255,255,255,.05); } } .coverCard img{ width: 100%; height: auto; display: block; } .coverCaption{ font-family: var(--font-sans); color: var(--muted); font-size: .92rem; padding: 10px 12px; } /* No mobile, centraliza a capa */ @media (max-width: 920px){ .coverCard{ max-width: 420px; margin: 10px auto 0; } } /* Superscrito de referência no texto */ .ref{ font-family: var(--font-sans); font-size: .78em; line-height: 1; vertical-align: super; margin-left: .06em; padding: .10em .35em; border-radius: 999px; border: 1px solid rgba(10,132,255,.25); background: rgba(10,132,255,.08); color: var(--text); cursor: pointer; user-select: none; } @media (prefers-color-scheme: dark){ .ref{ border-color: rgba(100,210,255,.25); background: rgba(100,210,255,.08); } } .ref:hover{ filter: brightness(1.03); } /* Tooltip flutuante */ .refTooltip{ position: absolute; z-index: 2000; display: none; max-width: min(520px, calc(100vw - 24px)); padding: 12px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--glass); box-shadow: var(--shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: var(--text); font-family: var(--font-sans); } .refTooltip.open{ display: block; } .refTooltipHead{ font-weight: 750; font-size: .92rem; color: var(--muted); margin-bottom: 8px; } .refTooltipBody{ font-size: .95rem; line-height: 1.45; } .refTooltipBody em{ font-style: italic; } .refTooltipBody a{ text-decoration: underline; } .refGroup{ font-family: var(--font-sans); font-size: .78em; line-height: 1; vertical-align: super; margin-left: .06em; } .refGroup .ref{ font-size: 1em; /* mantém o tamanho interno consistente */ } .refSep{ color: var(--muted); }