/* kleiton.app — tema herdado do site pessoal (modern-resume-theme), reescrito em CSS puro: sem Bootstrap, sem jQuery e sem requisições externas. Roboto, navbar escura fixa, containers arredondados, títulos com sublinhado tracejado, marcadores (mark) para tecnologias e modo escuro próprio. A cor de destaque (--accent) vem por app, definida inline no . */ @import url("/assets/fonts.fa358de2.css"); :root { --accent: #3b7dd8; --accent-deep: #1f4e96; --nav: #2e3440; --nav-text: #ffffff; --nav-hover: #48ca85; --bg: #ffffff; --card: #f5f5f5; --card-shadow: 0 5px 8px 0 rgba(0, 0, 0, .068); --text: #333333; --muted: #5f666f; --rule: #cccccc; --hr: #dddddd; --link: #477dca; --link-hover: #355e98; --badge: #2e3440; --badge-text: #ffffff; --badge-date: #579463; --hero-pattern: url("/assets/hero-pattern.png"); } @media (prefers-color-scheme: dark) { :root:not(.theme-light) { --nav: #1a1d23; --bg: #0d1c2b; --card: #182838; --card-shadow: 0 5px 8px 0 rgba(0, 0, 0, .205); --text: #e0e1dd; --muted: #a7b0bd; --rule: #40506180; --hr: #ffffff1f; --link: #9baeff; --link-hover: #c2cdff; --badge: #e0e1dd; --badge-text: #2e3440; --badge-date: #6fbd85; --hero-pattern: url("/assets/hero-pattern-dark.png"); } } :root.theme-dark { --nav: #1a1d23; --bg: #0d1c2b; --card: #182838; --card-shadow: 0 5px 8px 0 rgba(0, 0, 0, .205); --text: #e0e1dd; --muted: #a7b0bd; --rule: #40506180; --hr: #ffffff1f; --link: #9baeff; --link-hover: #c2cdff; --badge: #e0e1dd; --badge-text: #2e3440; --badge-date: #6fbd85; --hero-pattern: url("/assets/hero-pattern-dark.png"); } *, *::before, *::after { box-sizing: border-box; } html { font-size: 62.5%; /* 1rem = 10px, como no tema original */ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 1.6rem; line-height: 1.5; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; } a { color: var(--link); text-decoration: none; transition: color 150ms ease; } a:hover, a:focus { color: var(--link-hover); text-decoration: underline; } img { max-width: 100%; vertical-align: middle; } h1, h2, h3, h4, h5, h6 { font-family: inherit; line-height: 1.2; margin: 0 0 .75rem; } h1 { font-size: 3.4rem; font-weight: 500; margin-bottom: .1rem; } h2 { font-size: 2rem; font-weight: 300; } h4 { font-size: 2rem; font-weight: 500; margin-bottom: .3rem; } p { margin: 0 0 .75rem; } code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: color-mix(in srgb, var(--text) 10%, transparent); border-radius: .5rem; padding: .2rem .6rem; } mark { padding: .2rem .6rem; font-size: 90%; color: var(--badge-text); background-color: var(--badge); border-radius: .4rem; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); } hr { width: 70%; border: 0; border-top: 1px solid var(--hr); margin: 2.4rem auto; } .skip-link { position: absolute; left: -9999px; background: var(--nav); color: var(--nav-text); padding: 1rem 1.6rem; border-radius: .6rem; z-index: 100; } .skip-link:focus { left: 1rem; top: 1rem; } /* Blocos de idioma: um visível por vez; sem JS, português. */ [data-l10n] { display: none; } html.lang-pt [data-l10n="pt"], html.lang-en [data-l10n="en"], html:not(.lang-pt):not(.lang-en) [data-l10n="pt"] { display: revert; } /* ------------------------------------------------------------------ navbar */ .navbar { position: sticky; top: 0; z-index: 30; background: var(--nav); color: var(--nav-text); } .navbar-inner { max-width: 114rem; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; gap: 1.6rem; min-height: 6rem; flex-wrap: wrap; } .navbar-brand { font-size: 2rem; font-weight: 600; color: var(--nav-text); text-transform: lowercase; display: flex; align-items: center; gap: .6rem; margin-right: auto; } .navbar-brand:hover { color: var(--nav-hover); text-decoration: none; } .blinking { width: .5rem; height: 1.7rem; display: inline-block; background-color: var(--nav-text); animation: blinking 2s infinite; } @keyframes blinking { 0%, 49% { background-color: transparent; } 50%, 100% { background-color: var(--nav-text); } } @media (prefers-reduced-motion: reduce) { .blinking { animation: none; } html { scroll-behavior: auto; } } .nav-links { display: flex; align-items: center; gap: 2.4rem; list-style: none; margin: 0; padding: 0; font-size: 1.7rem; font-weight: 600; text-transform: capitalize; } .nav-links a { color: var(--nav-text); padding: .6rem 0; } .nav-links a:hover { color: var(--nav-hover); text-decoration: none; } .nav-links a.active { color: var(--nav-hover); border-bottom: 2px solid var(--nav-hover); } .nav-actions { display: flex; align-items: center; gap: .8rem; } .lang-switch { display: flex; gap: .2rem; background: rgba(255, 255, 255, .12); border-radius: 999px; padding: .3rem; } .lang-switch button { font: inherit; font-size: 1.2rem; font-weight: 700; letter-spacing: .04em; color: rgba(255, 255, 255, .75); background: transparent; border: 0; border-radius: 999px; padding: .4rem 1.1rem; cursor: pointer; } .lang-switch button:hover { color: #fff; } html.lang-pt .lang-switch button[data-set-lang="pt"], html.lang-en .lang-switch button[data-set-lang="en"], html:not(.lang-pt):not(.lang-en) .lang-switch button[data-set-lang="pt"] { background: #e0e1dd; color: #2e3440; } .theme-toggle { font: inherit; font-size: 1.6rem; line-height: 1; width: 3.2rem; height: 3.2rem; border: 0; border-radius: 999px; background: #e0e1dd; color: #2e3440; cursor: pointer; } .theme-toggle:hover { background: var(--nav-hover); } .theme-toggle .icon-dark { display: none; } html.theme-dark .theme-toggle .icon-dark { display: inline; } html.theme-dark .theme-toggle .icon-light { display: none; } @media (prefers-color-scheme: dark) { html:not(.theme-light) .theme-toggle .icon-dark { display: inline; } html:not(.theme-light) .theme-toggle .icon-light { display: none; } } .nav-toggle { display: none; } @media (max-width: 860px) { .navbar-inner { min-height: 5.4rem; padding: .8rem 1.6rem; } .navbar-brand { font-size: 1.7rem; } .nav-toggle { display: block; order: 2; font: inherit; font-size: 2.2rem; line-height: 1; width: 3.6rem; height: 3.2rem; border: 0; border-radius: .6rem; background: rgba(255, 255, 255, .12); color: var(--nav-text); cursor: pointer; } .nav-actions { order: 1; } .nav-links { order: 3; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 0; display: none; border-top: 1px solid rgba(255, 255, 255, .12); margin-top: .4rem; padding: .4rem 0 .8rem; } .nav-links.open { display: flex; } .nav-links a { display: block; width: 100%; padding: 1rem 0; } .nav-links a.active { border-bottom: 0; } } /* -------------------------------------------------------------- containers */ .pagecontent { flex: 1; padding-bottom: 2rem; } .container { max-width: 114rem; margin: 1.6rem auto 0; padding: 1.2rem 3rem 1.8rem; border-radius: 2rem; background: var(--card); box-shadow: var(--card-shadow); } .container > h3:first-child { margin-top: .6rem; } .container h3 { font-size: 2.4rem; font-weight: 400; text-align: center; border-bottom: dashed 2px var(--rule); padding-bottom: .8rem; margin: 0 0 2rem; } .header-container { margin-top: 1.8rem; padding-top: .4rem; padding-bottom: .4rem; background: none; box-shadow: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .header-left h1 { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; } .header-left h2 { color: var(--muted); margin: .6rem 0 0; } .header-left .header-meta { color: var(--muted); font-size: 1.5rem; margin: .8rem 0 0; } .icons { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.2rem; flex-wrap: wrap; } .icons a { display: inline-block; padding: .6rem 1.6rem; border-radius: 999px; background: var(--badge); color: var(--badge-text); font-size: 1.5rem; font-weight: 500; } .icons a:hover { background: var(--nav-hover); color: #2e3440; text-decoration: none; } /* --------------------------------------------------------- sobre / conteúdo */ .intro-row { display: flex; gap: 2.6rem; align-items: flex-start; } /* Segunda faixa da home, na mesma grade da de cima: "Vamos conversar" sob a foto e as tecnologias ao lado, ocupando a largura que o texto deixaria vazia. É o que faz a página caber numa tela só. */ .intro-bottom { display: grid; grid-template-columns: 19rem 1fr; gap: 2.6rem; margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--hr); } .intro-bottom .prose h2 { margin-top: 0; } .intro-bottom .prose p { font-size: 1.5rem; } .profile-img { width: 19rem; height: 19rem; flex: none; display: block; border-radius: 50%; background-size: cover; background-position: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); } .intro-text { flex: 1; min-width: 0; } .prose h2 { font-size: 2rem; font-weight: 500; margin: 2rem 0 .8rem; } .prose > h2:first-child { margin-top: 0; } .prose p, .prose ul { font-size: 1.6rem; } .prose ul { padding-left: 2.2rem; } .prose li { margin: .6rem 0; } .lead { font-size: 1.8rem; font-weight: 300; color: var(--muted); border-left: 3px solid var(--accent); padding-left: 1.6rem; margin: 0 0 2rem; } .stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.2rem 2.4rem; } .stack h4 { font-size: 1.6rem; font-weight: 500; margin-bottom: .6rem; } .stack p { display: flex; flex-wrap: wrap; gap: .6rem; } /* --------------------------------------------------- entradas (duas colunas) */ .layout { display: flex; gap: 3rem; margin-top: 3rem; align-items: flex-start; } .layout:first-of-type { margin-top: 0; } .layout .details { flex: 0 0 28%; min-width: 0; } .layout .details h4 { font-size: 2rem; margin-bottom: .2rem; } .layout .details h4 a { color: inherit; } .layout .details h4 a:hover { color: var(--link); } .layout .details p { font-size: 1.5rem; font-weight: 300; margin-bottom: .3rem; color: var(--muted); } .layout .details .tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; } .layout .details .tags mark { font-size: 1.2rem; font-weight: 400; } .layout .body { flex: 1; min-width: 0; } .layout .body p, .layout .body ul { font-size: 1.6rem; } .layout .body ul { padding-left: 2.2rem; margin: 0; } .layout .body li { margin: .6rem 0; } .layout .quote { font-size: 1.6rem; font-style: italic; color: var(--muted); margin-bottom: 1.2rem; } .badge-degree, .badge-date { display: inline-block; font-size: 1.3rem; font-weight: 600; color: var(--badge-text); background: var(--badge); border-radius: .6rem; padding: .3rem .8rem; } .badge-date { background: var(--badge-date); color: #fff; border-radius: .9rem; } .badge-muted { background: transparent; color: var(--muted); border: 1px solid var(--rule); } /* --------------------------------------------------------------- apps: hero */ .app-hero { background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 90%, #000), color-mix(in srgb, var(--accent-deep) 94%, #000)), var(--hero-pattern); background-blend-mode: multiply; color: #fff; box-shadow: 0 5px 8px 0 rgba(0, 0, 0, .14); padding: 2.6rem 3rem 3rem; display: block; } .app-hero .back { display: inline-block; color: rgba(255, 255, 255, .85); font-size: 1.4rem; margin-bottom: 2rem; } .app-hero .back:hover { color: #fff; } .app-hero-main { display: flex; align-items: center; gap: 2.6rem; } .app-icon { width: 12.8rem; height: 12.8rem; border-radius: 2.8rem; flex: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); } .app-hero h1 { font-size: 3.4rem; margin-bottom: .6rem; } .app-hero .tagline { font-size: 1.8rem; font-weight: 300; color: rgba(255, 255, 255, .9); max-width: 46rem; margin: 0; } .app-hero .platforms { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0 0; } .app-hero .platforms mark { background: rgba(255, 255, 255, .18); color: #fff; box-shadow: none; font-size: 1.3rem; border-radius: 999px; padding: .3rem 1.1rem; } .store-link { display: inline-block; margin-top: 1.8rem; background: #fff; color: color-mix(in srgb, var(--accent-deep) 88%, #000); padding: 1rem 2.2rem; border-radius: 999px; font-weight: 600; font-size: 1.5rem; } .store-link:hover { text-decoration: none; opacity: .9; color: color-mix(in srgb, var(--accent-deep) 88%, #000); } .store-soon { margin: 1.8rem 0 0; font-size: 1.4rem; color: rgba(255, 255, 255, .78); } /* --------------------------------------------------------------- apps: abas */ .tab-links { display: flex; gap: 2.4rem; overflow-x: auto; scrollbar-width: none; border-bottom: dashed 2px var(--rule); margin-bottom: 2.4rem; } .tab-links::-webkit-scrollbar { display: none; } .tab-links a { color: var(--muted); font-size: 1.6rem; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; padding: 1rem 0; border-bottom: 4px solid transparent; margin-bottom: -2px; } .tab-links a:hover { color: var(--text); text-decoration: none; } .tab-links a.active { color: var(--text); border-bottom-color: var(--accent); } /* ------------------------------------------------------------ apps: capturas */ .shots { display: flex; gap: 1.6rem; overflow-x: auto; padding-bottom: 1.2rem; scroll-snap-type: x mandatory; } .shots img { width: 24rem; height: auto; flex: none; border-radius: 1.8rem; border: 1px solid var(--hr); scroll-snap-align: start; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); } /* -------------------------------------------------------------- lista de apps */ .app-row { padding: 2.2rem 0; border-bottom: 1px solid var(--hr); } .app-row:last-child { border-bottom: 0; } .app-row-main { display: flex; align-items: center; gap: 2rem; color: inherit; } .app-row-main:hover { text-decoration: none; } .app-row-main:hover .app-row-name { color: var(--link); } .app-row-main img { width: 7.2rem; height: 7.2rem; border-radius: 1.7rem; flex: none; box-shadow: 0 2px 10px rgba(0, 0, 0, .16); } .app-row-text { display: block; min-width: 0; } .app-row-name { display: block; font-size: 2rem; font-weight: 500; margin-bottom: .2rem; } .app-row .tagline { display: block; color: var(--muted); font-size: 1.5rem; font-weight: 300; } .app-row .platforms { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; } .app-row .platforms mark { font-size: 1.2rem; font-weight: 400; } .app-row-links { display: flex; flex-wrap: wrap; gap: 2rem; margin: 1.2rem 0 0; padding-left: 9.2rem; font-size: 1.5rem; } /* -------------------------------------------------------- documentos legais */ .doc-title { font-size: 2.6rem; font-weight: 400; text-align: center; border-bottom: dashed 2px var(--rule); padding-bottom: 1rem; margin: 4rem 0 .4rem; scroll-margin-top: 8rem; } .container > div > .doc-title:first-child { margin-top: 1rem; } .doc-updated { color: var(--muted); font-size: 1.4rem; text-align: center; margin-bottom: 2.4rem; } .block { margin-top: 2.6rem; padding-top: 2.6rem; border-top: 1px solid var(--hr); } .block:first-of-type { border-top: 0; padding-top: 0; } .block h2 { font-size: 2rem; font-weight: 500; margin-bottom: .8rem; } .block h3 { font-size: 1.7rem; font-weight: 500; text-align: left; border: 0; padding: 0; margin: 2rem 0 .4rem; } .block p, .block ul { font-size: 1.6rem; } .block ul { padding-left: 2.2rem; } .block li { margin: .6rem 0; } .block .lead { font-size: 1.7rem; } /* ------------------------------------------------------------------- rodapé */ .footer-box { margin-top: auto; background: var(--card); border-top: 1px solid var(--hr); padding: 1.4rem 2rem; font-size: 1.5rem; text-align: center; color: var(--muted); } .footer-box p { margin: .4rem 0; } /* ------------------------------------------------------------------ telas ↓ */ @media (max-width: 860px) { .container { margin-top: 1.6rem; padding: 1.5rem 2rem 2rem; border-radius: 1.6rem; } .container h3 { font-size: 2.4rem; margin-bottom: 2.4rem; } .header-container { margin-top: 2.4rem; } .header-left { text-align: center; width: 100%; } .header-left h1 { font-size: 3.2rem; justify-content: center; } .header-left h2 { font-size: 1.8rem; } .header-left .header-meta { text-align: center; } .icons { justify-content: center; width: 100%; } .intro-row { flex-direction: column; align-items: center; } .intro-bottom { grid-template-columns: 1fr; gap: 1.6rem; } .profile-img { width: 18rem; height: 18rem; } .layout { flex-direction: column; gap: 1.4rem; margin-top: 2.4rem; } .layout .details { flex: 1 1 auto; width: 100%; } .app-hero { padding: 2rem 2rem 2.4rem; } .app-hero-main { flex-direction: column; align-items: flex-start; gap: 1.8rem; } .app-icon { width: 9.6rem; height: 9.6rem; border-radius: 2.2rem; } .app-hero h1 { font-size: 2.8rem; } .app-row-main { align-items: flex-start; gap: 1.6rem; } .app-row-main img { width: 6rem; height: 6rem; border-radius: 1.4rem; } .app-row-links { padding-left: 0; gap: 1.6rem; } .shots img { width: 20rem; } .doc-title { font-size: 2.2rem; margin-top: 3.2rem; } } @media print { .navbar, .tab-links, .app-row-links, .lang-switch, .theme-toggle { display: none !important; } .container { box-shadow: none; background: none; margin-top: 1rem; } body { font-size: 1.4rem; } }