/* ============================================================ custom.css — thiago.dev design system aplicado ao site estático Sem framework de CSS por baixo (Pico foi removido): os tokens e componentes abaixo vêm direto do "Thiago.dev Design System". ============================================================ */ /* ---------------------------- Tokens ---------------------------- */ :root { /* Cores — superfícies (tema escuro, padrão) */ --bg-page: #12151c; --surface-card: #1a1e27; --surface-header: rgba(18, 21, 28, 0.82); --border: #262b36; --border-hover: #333946; --text-h1: #f4f6f8; --text-h3: #eceef1; --text-body: #e8eaed; --text-muted: #9aa0aa; /* Acento âmbar */ --accent: #e0a458; --accent-hover: #ecb977; --accent-inverse: #12151c; --accent-underline: rgba(224, 164, 88, 0.4); --accent-focus: rgba(224, 164, 88, 0.3); --accent-tint: rgba(224, 164, 88, 0.10); /* Bancos — cores semânticas */ --db-pg: #7db8e8; --db-pg-bg: rgba(74, 143, 199, 0.12); --db-pg-border: rgba(74, 143, 199, 0.35); --db-mongo: #6fd89b; --db-mongo-bg: rgba(75, 191, 115, 0.12); --db-mongo-border: rgba(75, 191, 115, 0.35); --link: var(--accent); --link-hover: var(--accent-hover); /* Tipografia */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --fs-h1: clamp(2.4rem, 6.5vw, 4.2rem); --fs-h2: clamp(1.9rem, 4.2vw, 2.6rem); --fs-h3: 1.4rem; --fs-stat: 1.3rem; --fs-lead: 1.3rem; --fs-body: 1.05rem; --fs-small: 1rem; --fs-eyebrow: 0.88rem; --fs-tag: 0.82rem; --fs-badge: 0.78rem; --fs-url: 0.88rem; --lh-tight: 1.08; --lh-snug: 1.3; --lh-body: 1.6; --tracking-h1: -0.02em; --tracking-h2: -0.01em; --tracking-mono: 0.02em; --tracking-badge: 0.03em; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; /* Espaçamento / raio / layout */ --space-3: 0.6rem; --radius-sm: 5px; --radius-md: 6px; --radius-lg: 10px; --container-max: 1240px; --scroll-offset: 5rem; --pad-section: clamp(3rem, 7vw, 5.5rem); --pad-hero: clamp(3.5rem, 10vw, 7rem); --project-min: 320px; --arch-min: 170px; /* Efeitos */ --shadow-avatar: 0 0 0 2px var(--bg-page), 0 4px 18px rgba(224, 164, 88, 0.25); --blur-header: saturate(140%) blur(10px); --ease: ease; --dur-hover: 0.18s; --transition-card: transform var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease); --transition-btn: background-color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease); --wash-featured: linear-gradient(135deg, rgba(224, 164, 88, 0.08), transparent 70%); } /* Cores — tema claro, ativado via [data-theme="light"] na */ :root[data-theme="light"] { --bg-page: #f6f5f2; --surface-card: #ffffff; --surface-header: rgba(246, 245, 242, 0.85); --border: #e1e3e8; --border-hover: #cbcfd7; --text-h1: #14171c; --text-h3: #1b1f26; --text-body: #2c3038; --text-muted: #5c626b; --accent: #b6752c; --accent-hover: #a5661f; --accent-inverse: #fdfaf6; --accent-underline: rgba(182, 117, 44, 0.4); --accent-focus: rgba(182, 117, 44, 0.3); --accent-tint: rgba(182, 117, 44, 0.08); --db-pg: #2f6fa6; --db-pg-bg: rgba(47, 111, 166, 0.08); --db-pg-border: rgba(47, 111, 166, 0.3); --db-mongo: #2c8a5a; --db-mongo-bg: rgba(44, 138, 90, 0.08); --db-mongo-border: rgba(44, 138, 90, 0.3); --shadow-avatar: 0 0 0 2px var(--bg-page), 0 4px 18px rgba(182, 117, 44, 0.2); } /* ---------------------------- Base ---------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--scroll-offset); } body { margin: 0; background: var(--bg-page); color: var(--text-body); font-family: var(--font-sans); font-size: 1.0625rem; line-height: var(--lh-body); -webkit-font-smoothing: antialiased; transition: background-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease); } .container { max-width: var(--container-max); margin: 0 auto; padding-inline: 1.25rem; } a { color: var(--link); } a:hover { color: var(--link-hover); } h1, h2, h3 { color: var(--text-h1); font-weight: var(--fw-semibold); } /* -------- Wordmark e eyebrows em monospace (textura de infra) -------- */ .mono { font-family: var(--font-mono); } .eyebrow { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-mono); color: var(--text-muted); margin: 0 0 var(--space-3); } .eyebrow::before { content: "// "; color: var(--accent); } /* -------------------------- Header / nav -------------------------- */ .site-header { position: sticky; top: 0; z-index: 20; background: var(--surface-header); backdrop-filter: var(--blur-header); -webkit-backdrop-filter: var(--blur-header); border-bottom: 1px solid var(--border); } .site-header nav { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding-block: 2.5rem; } .site-header nav ul { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .wordmark { font-family: var(--font-mono); font-weight: var(--fw-semibold); font-size: 1.5rem; color: var(--text-body); text-decoration: none; display: inline-flex; align-items: center; gap: 0.6rem; } .wordmark-mark { width: 1.6em; height: 1.6em; display: block; } .wordmark .accent { color: var(--accent); } .site-header nav ul.nav-links a { color: var(--text-muted); text-decoration: none; font-size: 1.15rem; transition: color var(--dur-hover) var(--ease); } .site-header nav ul.nav-links a:hover { color: var(--text-body); } .nav-right { display: flex; align-items: center; gap: 1.5rem; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.35rem; height: 2.35rem; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; transition: var(--transition-btn); } .theme-toggle:hover { border-color: var(--border-hover); color: var(--text-body); } .theme-toggle svg { width: 1.15rem; height: 1.15rem; } .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } /* ------------------------------ Botões ------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-sans); font-size: 1.08rem; font-weight: var(--fw-medium); line-height: 1.2; padding: 0.75rem 1.5rem; border-radius: var(--radius-lg); border: 1px solid transparent; text-decoration: none; white-space: nowrap; transition: var(--transition-btn); } .btn--primary { background: var(--accent); color: var(--accent-inverse); border-color: var(--accent); } .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-inverse); } .btn--secondary { background: transparent; color: var(--text-body); border-color: var(--border); } .btn--secondary:hover { border-color: var(--border-hover); color: var(--text-h1); } .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } /* -------------------------- Apresentação -------------------------- */ .apresentacao { padding-block: var(--pad-hero); } .apresentacao-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.5rem, 5vw, 3.5rem); align-items: center; } .apresentacao h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-h1); margin: 0 0 1.1rem; } .apresentacao .lead { font-size: var(--fs-lead); color: var(--text-muted); max-width: 56ch; margin-bottom: 1.5rem; } .apresentacao-photo { flex-shrink: 0; width: 240px; height: 240px; border-radius: 50%; object-fit: cover; border: 4px solid var(--accent); box-shadow: var(--shadow-avatar); } /* --------------------- Faixa de arquitetura --------------------- */ .arch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--arch-min), 1fr)); gap: 1.25rem 2rem; padding-block: 1.5rem; border-block: 1px solid var(--border); } .arch-item .k { font-family: var(--font-mono); font-size: var(--fs-stat); color: var(--text-body); } .arch-item .v { font-size: 0.92rem; color: var(--text-muted); margin-top: 0.15rem; } /* ---------------------- Seções genéricas ---------------------- */ .section { padding-block: var(--pad-section); } .section > h2 { font-size: var(--fs-h2); letter-spacing: var(--tracking-h2); margin: 0 0 0.35rem; } .section-lead { color: var(--text-muted); max-width: 60ch; margin-bottom: 2.5rem; } /* ----------------------- Grid de projetos ----------------------- */ .projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--project-min), 1fr)); gap: 1.5rem; } .project { margin: 0; display: flex; flex-direction: column; gap: 0.95rem; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; transition: var(--transition-card); } .project:hover { transform: translateY(-3px); border-color: var(--border-hover); } .project-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; } .project-top h3 { margin: 0; font-size: var(--fs-h3); color: var(--text-h3); } .project-url { font-family: var(--font-mono); font-size: var(--fs-url); color: var(--text-muted); text-decoration: none; white-space: nowrap; } .project-url:hover { color: var(--accent); } .project-desc { margin: 0; color: var(--text-muted); font-size: var(--fs-body); flex-grow: 1; } /* Motivo da escolha do banco — o elemento âncora do card */ .why { border-left: 3px solid var(--db-border, var(--border)); padding: 0.6rem 0 0.6rem 0.85rem; background: linear-gradient(90deg, var(--db-bg, transparent), transparent 85%); border-radius: 0 var(--radius-md) var(--radius-md) 0; } .why p { margin: 0.45rem 0 0; font-size: var(--fs-small); color: var(--text-body); } .badge { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-badge); font-weight: var(--fw-medium); letter-spacing: var(--tracking-badge); padding: 0.16rem 0.55rem; border-radius: var(--radius-sm); border: 1px solid transparent; } .badge + .badge { margin-left: 0.35rem; } .badge--pg { color: var(--db-pg); background: var(--db-pg-bg); border-color: var(--db-pg-border); } .badge--mongo { color: var(--db-mongo); background: var(--db-mongo-bg); border-color: var(--db-mongo-border); } .why--pg { --db-border: var(--db-pg-border); --db-bg: var(--db-pg-bg); } .why--mongo { --db-border: var(--db-mongo-border); --db-bg: var(--db-mongo-bg); } .why--both { --db-border: var(--accent); --db-bg: var(--accent-tint); } .tags { display: flex; flex-wrap: wrap; gap: 0.4rem; } .tag { font-family: var(--font-mono); font-size: var(--fs-tag); color: var(--text-muted); border: 1px solid var(--border); padding: 0.12rem 0.5rem; border-radius: var(--radius-sm); } /* Pizzaria: card poliglota em destaque, largura total */ .project--featured { grid-column: 1 / -1; } .project--featured .featured-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; align-items: center; } .project--featured .badge { font-size: 0.85rem; } /* ------------------------------ Stacks ------------------------------ */ .stacks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; } .stack-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.3rem 1.4rem; } .stack-card .stack-group { font-family: var(--font-mono); font-size: var(--fs-url); color: var(--accent); margin-bottom: 0.75rem; } .stack-card .tags { gap: 0.4rem; } /* ------------------------------ Gancho / contato ------------------------------ */ .contact-box { border: 1px solid var(--accent); background: var(--wash-featured); border-radius: var(--radius-lg); padding: clamp(1.75rem, 4vw, 2.75rem); } .contact-box .section-lead { margin-bottom: 1.5rem; } .contact-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 2rem; } .contact-card { display: block; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.2rem 1.35rem; text-decoration: none; transition: var(--transition-card); } .contact-card:hover { border-color: var(--border-hover); transform: translateY(-3px); } .contact-card .k { font-family: var(--font-mono); font-size: var(--fs-url); color: var(--accent); margin-bottom: 0.35rem; } .contact-card .v { font-family: var(--font-mono); font-size: 1rem; color: var(--text-body); } /* ----------------------------- Footer ----------------------------- */ .site-footer { border-top: 1px solid var(--border); padding-block: 2.5rem; margin-top: 2rem; } .footer-stack { font-family: var(--font-mono); font-size: 0.88rem; color: var(--text-muted); margin-bottom: 0.75rem; } .footer-links { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 0.75rem; } .footer-links a { color: var(--text-body); text-decoration: none; font-size: 1.02rem; } .footer-links a:hover { color: var(--accent); } .footer-note { font-size: 0.88rem; color: var(--text-muted); margin: 0; } /* ---------------------------- Responsivo ---------------------------- */ @media (max-width: 700px) { .apresentacao-grid { grid-template-columns: 1fr; } .apresentacao-grid .apresentacao-photo { order: -1; margin: 0 auto; } } @media (max-width: 640px) { .project--featured .featured-inner { grid-template-columns: 1fr; } .site-header nav ul.nav-links { display: none; } } @media (prefers-reduced-motion: reduce) { .project, .contact-card { transition: none; } .project:hover, .contact-card:hover { transform: none; } }