/* ============================================================ Did You Know? — identidade clean: gradientes vivos + grain (granito) ============================================================ */ :root { --bg-0: #f4f1ea; --bg-1: #e7e0d4; --blob-warm: rgba(228, 176, 122, 0.55); --blob-cool: rgba(150, 173, 191, 0.42); --blob-rose: rgba(200, 128, 108, 0.34); --text: #201c16; --muted: #6f6656; --card: rgba(255, 255, 255, 0.52); --card-2: rgba(255, 255, 255, 0.30); --card-border: rgba(120, 90, 60, 0.16); --chip-bg: rgba(255, 255, 255, 0.55); --accent: #bd5138; /* terracota granito */ --accent-2: #d98a56; /* âmbar quente p/ gradientes */ --accent-ink: #fdf9f4; --shadow: 0 30px 70px -30px rgba(60, 40, 22, 0.42); --shadow-btn: 0 12px 26px -12px rgba(189, 81, 56, 0.6); --noise-opacity: 0.10; /* grain de fundo */ --grain-opacity: 0.09; /* grain por cima (filme) */ --ring: rgba(189, 81, 56, 0.55); } /* Tema controlado por data-theme no (um script inline no define, a partir da escolha salva ou do sistema, antes da 1ª pintura — sem flash). */ :root[data-theme="dark"] { --bg-0: #12100e; --bg-1: #1c1915; --blob-warm: rgba(150, 98, 55, 0.42); --blob-cool: rgba(52, 73, 85, 0.40); --blob-rose: rgba(150, 82, 64, 0.34); --text: #efe9dd; --muted: #a29a88; --card: rgba(255, 255, 255, 0.055); --card-2: rgba(255, 255, 255, 0.02); --card-border: rgba(255, 255, 255, 0.10); --chip-bg: rgba(255, 255, 255, 0.06); --accent: #dd6f4f; --accent-2: #e8a469; --accent-ink: #17110d; --shadow: 0 34px 80px -34px rgba(0, 0, 0, 0.78); --shadow-btn: 0 14px 30px -12px rgba(221, 111, 79, 0.5); --noise-opacity: 0.14; --grain-opacity: 0.12; --ring: rgba(221, 111, 79, 0.6); } * { box-sizing: border-box; } html { height: 100%; } body { margin: 0; min-height: 100dvh; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text); background: var(--bg-0); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(18px, 5vw, 40px); position: relative; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Camada de gradientes (blobs desfocados que derivam lentamente) */ body::before { content: ""; position: fixed; inset: -30%; z-index: -2; background: radial-gradient(38% 42% at 16% 12%, var(--blob-warm), transparent 70%), radial-gradient(44% 48% at 86% 20%, var(--blob-cool), transparent 72%), radial-gradient(40% 44% at 74% 88%, var(--blob-rose), transparent 72%), radial-gradient(46% 52% at 30% 96%, var(--blob-warm), transparent 75%), linear-gradient(160deg, var(--bg-0), var(--bg-1)); filter: saturate(1.08); animation: drift 28s ease-in-out infinite; } @keyframes drift { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 33% { transform: translate3d(1.6%, -1.4%, 0) scale(1.045); } 66% { transform: translate3d(-1.4%, 1.8%, 0) scale(1.02); } } /* Camada de textura (grain fino) */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--noise-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Grain de filme por cima de tudo (inclusive o card), sutil e sem bloquear clique */ .grain { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: var(--grain-opacity); mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); } /* ---------- Layout ---------- */ .wrap { width: 100%; max-width: 620px; min-width: 0; position: relative; } .fact, .source { overflow-wrap: break-word; } .head { text-align: center; margin-bottom: clamp(20px, 4vw, 30px); } .eyebrow { display: inline-block; font-size: clamp(28px, 6.5vw, 44px); font-weight: 680; letter-spacing: -0.035em; line-height: 1.02; } .eyebrow-mark { color: var(--accent); } .sub { margin: 10px 0 0; color: var(--muted); font-size: clamp(13.5px, 3vw, 15.5px); letter-spacing: 0.01em; } /* ---------- Card (vidro + borda em gradiente) ---------- */ .card { position: relative; overflow: hidden; border-radius: 26px; padding: clamp(24px, 5.5vw, 36px); min-height: 230px; display: flex; flex-direction: column; gap: 18px; color: var(--text); background: linear-gradient(160deg, var(--card), var(--card-2)) padding-box, linear-gradient(140deg, rgba(255, 255, 255, 0.5), transparent 40%, var(--accent)) border-box; border: 1px solid transparent; box-shadow: var(--shadow); backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15); } /* aspas decorativas gigantes ao fundo */ .quote-mark { position: absolute; top: clamp(-34px, -6vw, -18px); left: 10px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(150px, 34vw, 230px); line-height: 1; font-weight: 700; color: var(--accent); opacity: 0.1; pointer-events: none; user-select: none; } .card-foot { position: relative; z-index: 1; margin-top: auto; /* empurra a citação p/ a base do card */ display: flex; flex-direction: column; align-items: flex-start; gap: 5px; } /* "mentioned at x:xx" — discreto, secundário */ .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--muted); opacity: 0.9; transition: opacity 0.35s ease; } .badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .fact { position: relative; z-index: 1; margin: 0; font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, ui-serif, serif; font-size: clamp(22px, 5vw, 31px); line-height: 1.34; font-weight: 500; letter-spacing: -0.006em; text-wrap: balance; transition: opacity 0.35s ease, transform 0.35s ease; } /* nome do vídeo — elemento de destaque da citação */ .source { max-width: 100%; margin: 0; color: var(--text); font-size: clamp(15px, 3.6vw, 17px); font-weight: 580; line-height: 1.3; letter-spacing: -0.005em; transition: opacity 0.35s ease; } /* estado de carregamento: só o conteúdo some, a moldura fica */ .card.is-loading .fact { opacity: 0; transform: translateY(8px); } .card.is-loading .source, .card.is-loading .badge { opacity: 0; } /* ---------- Botões ---------- */ .actions { display: flex; gap: 12px; margin-top: clamp(18px, 4vw, 24px); flex-wrap: wrap; } .btn { flex: 1 1 auto; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 22px; border-radius: 15px; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .btn .ico { flex: none; } .btn:active { transform: translateY(1px) scale(0.995); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); } .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); box-shadow: var(--shadow-btn); } .btn-primary:hover { filter: brightness(1.05) saturate(1.05); } .btn-primary:disabled { opacity: 0.6; cursor: default; filter: saturate(0.7); } .btn-ghost { background: var(--chip-bg); color: var(--text); border-color: var(--card-border); backdrop-filter: blur(6px); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } .btn-ghost[aria-disabled="true"] { opacity: 0.4; pointer-events: none; } .foot { text-align: center; color: var(--muted); font-size: 12.5px; margin-top: clamp(20px, 4vw, 28px); opacity: 0.85; } /* ---------- Controles (tema + idioma), canto superior direito ---------- */ .controls { position: fixed; top: 14px; right: 14px; z-index: 60; display: flex; align-items: center; gap: 8px; } .ctrl { height: 40px; min-width: 40px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 12px; background: var(--chip-bg); border: 1px solid var(--card-border); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; backdrop-filter: blur(8px) saturate(1.1); -webkit-backdrop-filter: blur(8px) saturate(1.1); transition: border-color 0.15s ease, color 0.15s ease, transform 0.12s ease; } .ctrl:hover { border-color: var(--accent); color: var(--accent); } .ctrl:active { transform: translateY(1px); } .ctrl:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); } /* botão de tema: mostra o ícone do tema-alvo (lua no claro, sol no escuro) */ #btn-theme .ico-sun, #btn-theme .ico-moon { display: none; } :root[data-theme="light"] #btn-theme .ico-moon { display: block; } :root[data-theme="dark"] #btn-theme .ico-sun { display: block; } /* seletor de idioma */ .lang { appearance: none; -webkit-appearance: none; padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; } /* ---------- Responsivo / mobile ---------- */ @media (max-width: 420px) { .btn { flex-basis: 100%; } .controls { top: 10px; right: 10px; } } /* ---------- Acessibilidade: reduzir movimento ---------- */ @media (prefers-reduced-motion: reduce) { body::before { animation: none; } .fact, .source, .badge, .btn { transition: none; } }