/* ---------- tokens ---------- */ :root { --bg: #05060a; --bg-alt: #0a0d14; --bg-card: #0d1119; --border: #1c2230; --text: #dfe8f0; --muted: #8b98a5; --green: #39ff8c; --green-rgb: 57,255,140; --cyan: #00e0ff; --cyan-rgb: 0,224,255; --magenta: #ff2bd6; --magenta-rgb: 255,43,214; --yellow: #ffd93d; --red: #ff5f56; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; --font-display: 'Space Grotesk', var(--font-mono), sans-serif; --radius: 10px; --glow: 0 0 20px rgba(var(--green-rgb),.35); } /* alternate terminal color schemes — swapped live via data-theme on */ :root[data-theme="amber"] { --bg: #0a0603; --bg-alt: #120a04; --bg-card: #150d05; --border: #2b1d0c; --text: #ffe9c7; --muted: #a9875a; --green: #ffb000; --green-rgb: 255,176,0; --cyan: #ffcf6b; --cyan-rgb: 255,207,107; --magenta: #ff6f3c; --magenta-rgb: 255,111,60; } :root[data-theme="dracula"] { --bg: #191a21; --bg-alt: #21222c; --bg-card: #282a36; --border: #44475a; --text: #f8f8f2; --muted: #6272a4; --green: #50fa7b; --green-rgb: 80,250,123; --cyan: #8be9fd; --cyan-rgb: 139,233,253; --magenta: #ff79c6; --magenta-rgb: 255,121,198; } :root[data-theme="nord"] { --bg: #242933; --bg-alt: #2e3440; --bg-card: #3b4252; --border: #4c566a; --text: #eceff4; --muted: #81a1c1; --green: #88c0d0; --green-rgb: 136,192,208; --cyan: #8fbcbb; --cyan-rgb: 143,188,187; --magenta: #b48ead; --magenta-rgb: 180,142,173; } :root[data-theme="synthwave"] { --bg: #150826; --bg-alt: #1a0b2e; --bg-card: #241242; --border: #3d1e6d; --text: #f2e9ff; --muted: #a68fd1; --green: #ff2bd6; --green-rgb: 255,43,214; --cyan: #00fff5; --cyan-rgb: 0,255,245; --magenta: #ffde59; --magenta-rgb: 255,222,89; } .tabular { font-variant-numeric: tabular-nums; } body.no-scroll { overflow: hidden; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .scanlines, .cursor-dot, .cursor-ring { display: none; } .glitch::before, .glitch::after { animation: none; } .terminal-window--maximized { animation: none; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } body { overflow-x: hidden; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-mono); line-height: 1.6; overflow-x: hidden; cursor: default; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } code { font-family: var(--font-mono); color: var(--green); } .muted { color: var(--muted); } .accent { color: var(--green); } ::selection { background: var(--green); color: #05060a; } /* ---------- scrollbar ---------- */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--green); } /* ---------- matrix canvas ---------- */ #matrix-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: .16; pointer-events: none; } .scanlines { position: fixed; inset: 0; z-index: 999; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px ); mix-blend-mode: overlay; opacity: .5; } /* ---------- custom cursor ---------- */ .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; border-radius: 50%; transform: translate(-50%, -50%); will-change: transform; } .cursor-dot { width: 6px; height: 6px; background: var(--green); box-shadow: 0 0 8px var(--green); } .cursor-ring { width: 32px; height: 32px; border: 1px solid rgba(57,255,140,.5); transition: width .18s ease, height .18s ease, border-color .18s ease, background .18s ease; } .cursor-ring.is-active { width: 50px; height: 50px; background: rgba(var(--green-rgb),.08); border-color: var(--cyan); } @media (pointer: coarse), (hover: none) { .cursor-dot, .cursor-ring { display: none; } } /* ---------- boot screen ---------- */ .boot { position: fixed; inset: 0; z-index: 10000; background: rgba(5,6,10,.88); color: var(--green); font-family: var(--font-mono); padding: 6vh 6vw; display: flex; flex-direction: column; justify-content: flex-end; gap: .3rem; cursor: pointer; transition: opacity .25s ease, visibility .25s ease; } .boot.hidden { opacity: 0; visibility: hidden; } .boot__lines p { margin: 0 0 .35rem; font-size: .85rem; white-space: pre-wrap; } .boot__lines .ok { color: var(--green); } .boot__skip { position: absolute; bottom: 20px; right: 24px; font-size: .7rem; color: var(--muted); opacity: .7; } /* ---------- nav ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 500; display: flex; align-items: center; gap: 1.5rem; padding: 1.1rem 2.5rem; background: rgba(5,6,10,.65); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .nav__logo { font-weight: 700; color: var(--green); font-size: .95rem; position: relative; margin-right: auto; } .nav__logo-cursor { animation: navCursorBlink 13s step-end infinite; } @keyframes navCursorBlink { 0%, 97% { opacity: 1; } 98% { opacity: 0; } 99%, 100% { opacity: 1; } } .nav__links { display: flex; gap: 2rem; } .nav__controls { display: flex; align-items: center; gap: .6rem; } .nav__iconbtn { display: flex; align-items: center; gap: .35rem; background: transparent; border: 1px solid var(--border); color: var(--muted); font-family: var(--font-mono); font-size: .75rem; padding: .45rem .7rem; border-radius: 8px; cursor: pointer; transition: border-color .2s ease, color .2s ease; } .nav__iconbtn:hover { border-color: var(--green); color: var(--text); } .nav__trophy .trophy__count { color: var(--green); font-weight: 700; } @media (max-width: 480px) { .nav { padding: .85rem 1rem; gap: .6rem; } .nav__trophy .trophy__count { display: none; } } .nav__links a { font-size: .85rem; color: var(--muted); position: relative; transition: color .2s ease; } .nav__links a::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 1px; background: var(--green); transition: width .25s ease; } .nav__links a:hover { color: var(--text); } .nav__links a:hover::after { width: 100%; } .nav__links a.active { color: var(--green); } .nav__links a.active::after { width: 100%; } .nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; } .nav__burger span { width: 22px; height: 2px; background: var(--green); display: block; } .nav__mobile { display: none; position: fixed; top: 60px; right: 0; background: var(--bg-alt); border: 1px solid var(--border); border-right: none; flex-direction: column; padding: 1rem 1.5rem; gap: 1rem; z-index: 499; transform: translateX(110%); transition: transform .3s ease; } .nav__mobile.open { transform: translateX(0); } .nav__mobile a { color: var(--muted); font-size: .9rem; } @media (max-width: 780px) { .nav__links { display: none; } .nav__burger { display: flex; } .nav__mobile { display: flex; } .nav { padding: 1rem 1.25rem; } .nav__iconbtn--kbd { display: none; } } /* ---------- layout helpers ---------- */ .section { max-width: 1100px; margin: 0 auto; padding: 9rem 2rem 5rem; position: relative; scroll-margin-top: 88px; } .hero { scroll-margin-top: 88px; } .section__tag { color: var(--green); font-size: .8rem; letter-spacing: .1em; margin: 0 0 .5rem; } .section__title { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 3rem; color: var(--text); } /* ---------- fixed social sidebar ---------- */ .side-links { position: fixed; left: 2rem; bottom: 0; z-index: 400; display: flex; flex-direction: column; align-items: center; gap: 1.3rem; } .side-links a { color: var(--muted); display: flex; transition: color .2s ease, transform .2s ease; } .side-links a:hover { color: var(--green); transform: translateY(-3px); } .side-links__line { width: 1px; height: 90px; background: linear-gradient(var(--muted), transparent); opacity: .4; } @media (max-width: 900px) { .side-links { display: none; } } @media (prefers-reduced-motion: reduce) { .side-links a { transition: none; } } /* ---------- back to top ---------- */ .back-to-top { position: fixed; right: 1.75rem; bottom: 1.75rem; z-index: 400; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-card); color: var(--green); font-size: 1.1rem; font-family: var(--font-mono); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s ease, transform .25s ease, border-color .2s ease; } .back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .back-to-top:hover { border-color: var(--green); } .back-to-top[hidden] { display: none !important; } @media (prefers-reduced-motion: reduce) { .back-to-top { transition: opacity .1s linear; } } .reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; } .reveal.in-view { opacity: 1; transform: translateY(0); } /* ---------- hero ---------- */ .hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 8rem 2.5rem 4rem; max-width: 1100px; margin: 0 auto; position: relative; } .hero__bg-glow { position: absolute; width: 500px; height: 500px; background: radial-gradient(circle, rgba(var(--green-rgb),.18), transparent 70%); border-radius: 50%; top: 10%; left: 60%; filter: blur(10px); pointer-events: none; transition: transform .3s ease; z-index: -1; } .hero__eyebrow { color: var(--cyan); font-size: .85rem; margin: 0 0 1rem; } .hero__title { font-family: var(--font-display); font-size: clamp(3.2rem, 11vw, 7.5rem); font-weight: 700; margin: 0; line-height: .95; letter-spacing: -.02em; background: linear-gradient(120deg, var(--green), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .hero__role { font-size: clamp(1rem, 2.6vw, 1.4rem); color: var(--green); margin: 1rem 0 1.5rem; font-weight: 500; min-height: 1.6em; } .hero__role-prefix { color: var(--muted); margin-right: .5rem; } .cursor-blink { animation: blink 1s step-end infinite; color: var(--green); } @keyframes blink { 50% { opacity: 0; } } .hero__desc { max-width: 560px; color: var(--muted); font-size: .95rem; margin-bottom: 2.2rem; } .hero__desc strong { color: var(--text); } .hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3.5rem; } .btn { font-family: var(--font-mono); font-size: .85rem; padding: .85rem 1.5rem; border-radius: var(--radius); border: 1px solid var(--green); transition: all .25s ease; display: inline-block; cursor: pointer; } .btn--primary { background: var(--green); color: #05060a; font-weight: 700; } .btn--primary:hover { box-shadow: var(--glow); transform: translateY(-2px); } .btn--ghost { color: var(--green); background: transparent; } .btn--ghost:hover { background: rgba(57,255,140,.1); transform: translateY(-2px); } .hero__stats { display: flex; gap: 2.5rem; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 1.5rem; width: 100%; max-width: 620px; } .stat { display: flex; flex-direction: column; gap: .3rem; } .stat__label { font-size: .65rem; color: var(--muted); letter-spacing: .08em; } .stat__value { font-size: .95rem; color: var(--text); font-weight: 700; } .stat__value--online { color: var(--green); } .stat__value--online::before { content: '● '; } .stat__value--error { color: var(--red); animation: statusBlink 2.6s step-end infinite; } .stat__value--error::before { content: '▲ '; } @keyframes statusBlink { 50% { opacity: 0; } } .scroll-hint { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); } .scroll-hint span { display: block; width: 22px; height: 36px; border: 1px solid var(--muted); border-radius: 12px; position: relative; } .scroll-hint span::before { content: ''; position: absolute; top: 6px; left: 50%; width: 4px; height: 4px; background: var(--green); border-radius: 50%; transform: translateX(-50%); animation: scrollDot 1.6s ease infinite; } @keyframes scrollDot { 0% { top: 6px; opacity: 1; } 70% { top: 20px; opacity: 0; } 100% { opacity: 0; } } /* ---------- glitch text ---------- */ .glitch { position: relative; } .glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; } .glitch::before { color: var(--cyan); -webkit-text-fill-color: var(--cyan); animation: glitchTop 3.5s infinite linear alternate-reverse; clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); } .glitch::after { color: var(--green); -webkit-text-fill-color: var(--green); animation: glitchBottom 2.8s infinite linear alternate-reverse; clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%); } @keyframes glitchTop { 0% { transform: translate(0,0); } 20% { transform: translate(-3px,-1px); } 40% { transform: translate(3px,1px); } 60% { transform: translate(-2px,1px); } 80% { transform: translate(2px,-1px); } 100% { transform: translate(0,0); } } @keyframes glitchBottom { 0% { transform: translate(0,0); } 20% { transform: translate(2px,1px); } 40% { transform: translate(-3px,-1px); } 60% { transform: translate(3px,0); } 80% { transform: translate(-2px,1px); } 100% { transform: translate(0,0); } } /* ---------- terminal window (shared) ---------- */ .terminal-window { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.4); } .terminal-window__bar { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; background: #10151f; border-bottom: 1px solid var(--border); } .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .dot--red { background: var(--red); } .dot--yellow { background: var(--yellow); } .dot--green { background: var(--green); } .terminal-window__bar .dot--red, .terminal-window__bar .dot--yellow, .terminal-window__bar .dot--green { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; } .terminal-window__bar .dot--red:hover, .terminal-window__bar .dot--yellow:hover, .terminal-window__bar .dot--green:hover { transform: scale(1.25); } .terminal-window__bar .dot--red:focus-visible, .terminal-window__bar .dot--yellow:focus-visible, .terminal-window__bar .dot--green:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .terminal-window__title { margin-left: .75rem; font-size: .75rem; color: var(--muted); } .terminal-window__body { padding: 1.3rem 1.4rem; font-size: .85rem; } .terminal-window__body p { margin: 0 0 .7rem; color: var(--text); } .prompt { color: var(--green); margin-right: .4rem; } .blink-caret { animation: blink 1s step-end infinite; } /* minimized: collapse everything but the title bar */ .terminal-window--minimized > *:not(.terminal-window__bar) { display: none; } .terminal-window--minimized .terminal-window__bar { cursor: pointer; border-bottom: none; } .terminal-window--minimized .terminal-window__title::after { content: ' — minimizada, clique para reabrir'; font-style: italic; } /* maximized: the green dot pops the window into a focused, oversized view */ .terminal-window-max-backdrop { position: fixed; inset: 0; z-index: 9000; background: rgba(3,4,7,.75); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; } .terminal-window-max-backdrop.open { opacity: 1; visibility: visible; } .terminal-window--maximized { position: fixed !important; inset: 5vh 5vw !important; z-index: 9001; width: auto !important; max-width: none !important; height: auto; display: flex; flex-direction: column; animation: maximizeIn .25s cubic-bezier(.2,.9,.2,1); } .terminal-window--maximized .terminal-window__body, .terminal-window--maximized .terminal-window__body--interactive, .terminal-window--maximized .snake, .terminal-window--maximized .project-card__body { flex: 1; overflow-y: auto; } @keyframes maximizeIn { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* closed: replaced entirely by a small reopen chip */ .terminal-window__restore { display: flex; align-items: center; gap: .6rem; width: 100%; background: var(--bg-card); border: 1px dashed var(--border); border-radius: var(--radius); padding: .9rem 1.2rem; color: var(--muted); font-family: var(--font-mono); font-size: .8rem; cursor: pointer; transition: border-color .2s ease, color .2s ease; } .terminal-window__restore:hover { border-color: var(--green); color: var(--text); } .terminal-window__restore strong { color: var(--text); } /* ---------- about ---------- */ .about__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; } .about__facts { display: flex; flex-direction: column; gap: 1.2rem; } .fact-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.3rem 1.4rem; transition: border-color .25s ease, transform .25s ease; } .fact-card:hover { border-color: var(--green); transform: translateY(-3px); } .fact-card__icon { font-size: 1.3rem; } .fact-card h3 { margin: .5rem 0 .3rem; font-family: var(--font-display); font-size: 1rem; } .fact-card p { margin: 0; color: var(--muted); font-size: .85rem; } @media (max-width: 860px) { .about__grid { grid-template-columns: 1fr; } } /* ---------- about: career as a git log ---------- */ .git-log { margin-top: 2rem; } .git-log__body { list-style: none; margin: 0; padding: 1.4rem 1.4rem 1.4rem 1.8rem; } .git-log__commit { position: relative; display: flex; gap: 1rem; padding-bottom: 1.5rem; } .git-log__commit::before { content: ''; position: absolute; left: 5px; top: 16px; bottom: -4px; width: 2px; background: rgba(var(--green-rgb), .3); } .git-log__commit--root::before { display: none; } .git-log__commit--head .git-log__dot { background: var(--green); box-shadow: 0 0 8px rgba(var(--green-rgb),.8); animation: statusBlink 2.6s step-end infinite; } .git-log__node { position: relative; z-index: 1; flex-shrink: 0; padding-top: 3px; } .git-log__dot { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); border: 2px solid var(--bg-card); } .git-log__info { flex: 1; min-width: 0; } .git-log__meta { display: flex; align-items: baseline; gap: .7rem; margin: 0 0 .3rem; flex-wrap: wrap; } .git-log__hash { color: var(--cyan); font-size: .75rem; } .git-log__date { color: var(--muted); font-size: .7rem; } .git-log__msg { margin: 0; font-size: .85rem; color: var(--text); } .git-log__tag { font-weight: 700; margin-right: .3rem; } .git-log__tag--feat { color: var(--green); } .git-log__tag--refactor { color: var(--yellow); } .git-log__tag--chore { color: var(--muted); } .git-log__tag--init { color: var(--cyan); } /* ---------- skills: interactive graph ---------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skill-graph { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem; } #skillGraphCanvas { display: block; width: 100%; height: 420px; cursor: default; } .skill-graph__hint { margin: .6rem 0 0; text-align: center; font-size: .75rem; color: var(--muted); } .badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; } .badge { font-size: .75rem; padding: .5rem 1rem; border: 1px dashed var(--border); border-radius: 20px; color: var(--muted); transition: all .2s ease; } .badge:hover { border-color: var(--green); color: var(--green); } @media (max-width: 600px) { #skillGraphCanvas { height: 480px; } } /* ---------- projects ---------- */ .projects__filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.75rem; } .projects__filter { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); background: transparent; border: 1px solid var(--border); padding: .4rem .9rem; border-radius: 999px; cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease; } .projects__filter:hover { color: var(--text); border-color: var(--green); } .projects__filter.active { color: #05060a; background: var(--green); border-color: var(--green); } .projects__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .project-card.is-filtered-out { display: none !important; } .project-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .project-card:hover { transform: translateY(-5px); border-color: var(--green); box-shadow: 0 12px 30px rgba(var(--green-rgb),.08); } .project-card__body { padding: 1.4rem; } .project-card__body h3 { margin: 0 0 .6rem; font-family: var(--font-display); font-size: 1.05rem; } .project-card__body p { margin: 0 0 1rem; color: var(--muted); font-size: .85rem; } .tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; } .tags span { font-size: .7rem; padding: .25rem .6rem; background: #131a26; border-radius: 6px; color: var(--cyan); } .project-card__links { display: flex; gap: 1.2rem; } .project-card__links a { font-size: .8rem; color: var(--green); } .project-card__links a:hover { text-decoration: underline; } .project-card--ghost { border-style: dashed; display: flex; align-items: center; justify-content: center; min-height: 180px; } .project-card__body--center { text-align: center; } @media (max-width: 860px) { .projects__grid { grid-template-columns: 1fr; } } /* ---------- interactive terminal section ---------- */ .terminal-section__hint { color: var(--muted); font-size: .85rem; margin-top: -2rem; margin-bottom: 2rem; } .terminal-window--big .terminal-window__body--interactive { height: 320px; overflow-y: auto; font-size: .82rem; } .terminal-window__body--interactive p { color: var(--text); margin: 0 0 .5rem; white-space: pre-wrap; } .terminal-window__body--interactive .accent { color: var(--green); } .terminal-input-row { display: flex; align-items: center; gap: .6rem; padding: .8rem 1.4rem; border-top: 1px solid var(--border); background: #0a0e17; } .terminal-input-row input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-family: var(--font-mono); font-size: .85rem; } /* ---------- contact ---------- */ .contact__desc { color: var(--muted); max-width: 500px; margin-bottom: 2.5rem; } .contact__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .contact-card { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem; display: flex; flex-direction: column; gap: .4rem; transition: transform .25s ease, border-color .25s ease; } .contact-card:hover { transform: translateY(-4px); border-color: var(--green); } .contact-card__icon { font-size: 1.4rem; color: var(--green); } .contact-card__label { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .contact-card__value { font-size: .9rem; color: var(--text); word-break: break-all; } .contact-card__copy { position: absolute; top: .9rem; right: .9rem; background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 6px; width: 28px; height: 28px; font-size: .9rem; line-height: 1; cursor: pointer; transition: border-color .2s ease, color .2s ease; } .contact-card__copy:hover { border-color: var(--green); color: var(--green); } @media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; } } /* ---------- footer ---------- */ .footer { text-align: center; padding: 3rem 1.5rem; border-top: 1px solid var(--border); color: var(--muted); font-size: .8rem; } .footer p { margin: .3rem 0; } .footer__small { font-size: .7rem; opacity: .6; } .konami-hint { margin-left: .6rem; opacity: .4; } /* ---------- secret overlay ---------- */ .secret-overlay { position: fixed; inset: 0; z-index: 10001; background: rgba(3,4,7,.92); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; } .secret-overlay.open { opacity: 1; visibility: visible; } .secret-overlay__content { text-align: center; } .secret-overlay__content .glitch { font-family: var(--font-display); font-size: clamp(1.6rem, 5vw, 3rem); color: var(--green); margin-bottom: 1rem; } .secret-overlay__content p { color: var(--muted); margin-bottom: 1.5rem; } /* ---------- command palette ---------- */ .palette-backdrop { position: fixed; inset: 0; z-index: 10002; background: rgba(3,4,7,.6); backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 1rem 0; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; } .palette-backdrop.open { opacity: 1; visibility: visible; } .palette { width: min(560px, 100%); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.5); overflow: hidden; transform: translateY(-10px); transition: transform .2s ease; } .palette-backdrop.open .palette { transform: translateY(0); } .palette__input-row { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--border); } .palette__prompt { color: var(--green); font-weight: 700; } .palette__input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font-family: var(--font-mono); font-size: .9rem; } .palette__esc { font-size: .65rem; color: var(--muted); border: 1px solid var(--border); padding: .15rem .4rem; border-radius: 4px; flex-shrink: 0; } .palette__results { max-height: 340px; overflow-y: auto; list-style: none; margin: 0; padding: .5rem; } .palette__result { padding: .65rem .8rem; border-radius: 6px; font-size: .85rem; color: var(--muted); cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .palette__result .hint { font-size: .7rem; color: var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .palette__result.active { background: rgba(var(--green-rgb),.12); color: var(--text); } .palette__empty { padding: 1.2rem; text-align: center; color: var(--muted); font-size: .85rem; } /* ---------- achievement toasts ---------- */ .toast-stack { position: fixed; bottom: 1.5rem; right: 1.5rem; left: 1.5rem; z-index: 10003; display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; pointer-events: none; } .toast { max-width: 320px; width: 100%; background: var(--bg-card); border: 1px solid var(--green); border-radius: var(--radius); padding: .8rem 1rem; display: flex; gap: .6rem; align-items: flex-start; font-size: .8rem; color: var(--text); box-shadow: 0 10px 30px rgba(0,0,0,.4); opacity: 0; transform: translateX(20px); transition: opacity .3s ease, transform .3s ease; } .toast.in { opacity: 1; transform: translateX(0); } .toast__icon { font-size: 1.1rem; } /* ---------- achievements modal ---------- */ .achievements-panel { padding: 1.5rem; } .achievements-panel h3 { display: flex; justify-content: space-between; align-items: center; margin: 0 0 1rem; font-family: var(--font-display); font-size: 1.1rem; color: var(--green); } .achievements-list { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-direction: column; gap: .7rem; max-height: 340px; overflow-y: auto; } .achievements-list li { display: flex; gap: .8rem; align-items: flex-start; font-size: .8rem; padding: .65rem .7rem; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); } .achievements-list li.unlocked { border-color: var(--green); color: var(--text); } .achievements-list li.locked { opacity: .55; } .achievements-list__icon { font-size: 1.2rem; } /* ---------- keyboard shortcuts modal ---------- */ .shortcuts-list { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-direction: column; gap: .7rem; } .shortcuts-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .8rem; padding: .5rem 0; border-bottom: 1px solid var(--border); } .shortcuts-list li:last-child { border-bottom: none; } .shortcuts-list__keys { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; white-space: nowrap; } .shortcuts-list__desc { color: var(--muted); text-align: right; } kbd { display: inline-block; font-family: var(--font-mono); font-size: .7rem; padding: .2rem .45rem; background: var(--bg); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; color: var(--text); } /* ---------- playground: snake ---------- */ .playground__hint { color: var(--muted); font-size: .85rem; margin-top: -2rem; margin-bottom: 2rem; } .game-switcher { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: .8rem 1rem; border-bottom: 1px solid var(--border); } .game-switcher__tabs { display: flex; gap: .5rem; } .game-switcher__tab { background: transparent; border: 1px solid var(--border); border-radius: 8px; padding: .4rem .65rem; font-size: 1.05rem; line-height: 1; cursor: pointer; opacity: .5; transition: opacity .15s ease, border-color .15s ease, background-color .15s ease; } .game-switcher__tab:hover { opacity: .8; } .game-switcher__tab.is-active { opacity: 1; border-color: var(--green); background: rgba(var(--green-rgb),.1); } .game-page[hidden] { display: none !important; } .snake { padding: 1.4rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .snake__top { width: 100%; max-width: 560px; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: var(--muted); } .snake__top b { color: var(--green); } .snake__select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: .5rem .7rem; font-family: var(--font-mono); font-size: .75rem; } .snake__replay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 50%; background: rgba(10,14,23,.85); border: 2px solid var(--green); color: var(--green); font-size: 2.4rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .15s ease, border-color .15s ease; } .snake__replay:hover { transform: translate(-50%, -50%) scale(1.08); border-color: var(--cyan); } .snake__replay[hidden] { display: none; } .snake__canvas-wrap { position: relative; width: 100%; max-width: 560px; } #snakeCanvas { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; background: #0a0e17; border: 1px solid var(--border); border-radius: 8px; touch-action: none; } .snake__hint { color: var(--muted); font-size: .75rem; text-align: center; max-width: 560px; } .snake__hint--touch { display: none; } @media (pointer: coarse) { .snake__hint--desktop { display: none; } .snake__hint--touch { display: block; } } .snake__dpad { display: none; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(2, 48px); gap: .4rem; } .snake__dpad button { background: var(--bg-card); border: 1px solid var(--border); color: var(--green); border-radius: 8px; font-size: 1.1rem; cursor: pointer; } .snake__dpad button:hover { border-color: var(--green); } .snake__dpad button[data-dir="up"] { grid-column: 2; grid-row: 1; } .snake__dpad button[data-dir="left"] { grid-column: 1; grid-row: 2; } .snake__dpad button[data-dir="down"] { grid-column: 2; grid-row: 2; } .snake__dpad button[data-dir="right"] { grid-column: 3; grid-row: 2; } @media (pointer: coarse) { .snake__dpad { display: grid; } } /* ---------- playground: typing race (type the snippet, fast & correct) ---------- */ .typing { padding: 1.4rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .typing__top { width: 100%; max-width: 560px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: .85rem; color: var(--muted); } .typing__top b { color: var(--green); } .typing__field-wrap { position: relative; width: 100%; max-width: 560px; display: flex; align-items: center; gap: .75rem; } .typing__field { position: relative; flex: 1; min-height: 140px; background: #0a0e17; border: 1px solid var(--border); border-radius: 8px; padding: 1.2rem; cursor: text; } .typing__field.is-focused { border-color: var(--green); } .typing__text { margin: 0; font-family: var(--font-mono); font-size: 1rem; line-height: 1.7; white-space: pre-wrap; word-break: break-word; color: var(--muted); pointer-events: none; } .typing__text .char--correct { color: var(--text); } .typing__text .char--wrong { color: #fff; background: rgba(255,95,86,.55); border-radius: 2px; } .typing__text .char--current { border-bottom: 2px solid var(--green); } .typing__input { position: absolute; inset: 0; width: 100%; height: 100%; resize: none; border: none; background: transparent; color: transparent; caret-color: transparent; padding: 1.2rem; font-family: var(--font-mono); font-size: 1rem; line-height: 1.7; } .typing__input:focus { outline: none; } .typing__hint { color: var(--muted); font-size: .8rem; text-align: center; max-width: 460px; } .typing__done { color: var(--green); font-weight: 700; } /* ---------- playground: memory match ---------- */ .mem { padding: 1.4rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .mem__hint { color: var(--muted); font-size: .8rem; text-align: center; max-width: 320px; } .mem__board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; max-width: 320px; } .mem__card { aspect-ratio: 1 / 1; background: #0a0e17; border: 1px solid var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, opacity .15s ease; } .mem__card:hover:not(:disabled) { border-color: var(--green); } .mem__card:disabled { cursor: default; } .mem__card--flipped { border-color: var(--cyan); background: rgba(var(--cyan-rgb),.1); } .mem__card--matched { border-color: var(--green); background: rgba(var(--green-rgb),.12); opacity: .6; } .mem__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; font-size: .8rem; color: var(--muted); } .mem__stats b { color: var(--green); } /* ---------- memory game icons: line-art shapes masked with a moving gradient ---------- */ .mem__icon { width: 55%; height: 55%; background: linear-gradient(120deg, var(--green), var(--cyan), var(--magenta), var(--green)); background-size: 300% 300%; animation: memIconGradient 4s ease infinite; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } @keyframes memIconGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @media (prefers-reduced-motion: reduce) { .mem__icon { animation: none; } } .mem__icon--zap { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 11 14 9 22 21 10 13 10 13 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 11 14 9 22 21 10 13 10 13 2'/%3E%3C/svg%3E"); } .mem__icon--terminal { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpolyline points='6 9 10 12 6 15'/%3E%3Cline x1='12' y1='15' x2='16' y2='15'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpolyline points='6 9 10 12 6 15'/%3E%3Cline x1='12' y1='15' x2='16' y2='15'/%3E%3C/svg%3E"); } .mem__icon--code { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3Cpolyline points='16 6 22 12 16 18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3Cpolyline points='16 6 22 12 16 18'/%3E%3C/svg%3E"); } .mem__icon--lock { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); } .mem__icon--git { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='4' r='2'/%3E%3Ccircle cx='6' cy='20' r='2'/%3E%3Ccircle cx='18' cy='9' r='2'/%3E%3Cpath d='M6 6v10a4 4 0 0 0 4 4h4'/%3E%3Cpath d='M18 11v-2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='4' r='2'/%3E%3Ccircle cx='6' cy='20' r='2'/%3E%3Ccircle cx='18' cy='9' r='2'/%3E%3Cpath d='M6 6v10a4 4 0 0 0 4 4h4'/%3E%3Cpath d='M18 11v-2'/%3E%3C/svg%3E"); } .mem__icon--signal { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13a10 10 0 0 1 14 0'/%3E%3Cpath d='M8.5 16.5a5 5 0 0 1 7 0'/%3E%3Ccircle cx='12' cy='20' r='1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13a10 10 0 0 1 14 0'/%3E%3Cpath d='M8.5 16.5a5 5 0 0 1 7 0'/%3E%3Ccircle cx='12' cy='20' r='1'/%3E%3C/svg%3E"); } .mem__icon--cpu { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='2'/%3E%3Crect x='9' y='9' width='6' height='6'/%3E%3Cline x1='9' y1='1' x2='9' y2='4'/%3E%3Cline x1='15' y1='1' x2='15' y2='4'/%3E%3Cline x1='9' y1='20' x2='9' y2='23'/%3E%3Cline x1='15' y1='20' x2='15' y2='23'/%3E%3Cline x1='1' y1='9' x2='4' y2='9'/%3E%3Cline x1='1' y1='15' x2='4' y2='15'/%3E%3Cline x1='20' y1='9' x2='23' y2='9'/%3E%3Cline x1='20' y1='15' x2='23' y2='15'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='2'/%3E%3Crect x='9' y='9' width='6' height='6'/%3E%3Cline x1='9' y1='1' x2='9' y2='4'/%3E%3Cline x1='15' y1='1' x2='15' y2='4'/%3E%3Cline x1='9' y1='20' x2='9' y2='23'/%3E%3Cline x1='15' y1='20' x2='15' y2='23'/%3E%3Cline x1='1' y1='9' x2='4' y2='9'/%3E%3Cline x1='1' y1='15' x2='4' y2='15'/%3E%3Cline x1='20' y1='9' x2='23' y2='9'/%3E%3Cline x1='20' y1='15' x2='23' y2='15'/%3E%3C/svg%3E"); } .mem__icon--db { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v6c0 1.66 3.58 3 8 3s8-1.34 8-3V5'/%3E%3Cpath d='M4 11v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v6c0 1.66 3.58 3 8 3s8-1.34 8-3V5'/%3E%3Cpath d='M4 11v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6'/%3E%3C/svg%3E"); } /* ========================================================= PRINT MODE — Ctrl+P swaps the whole hacker aesthetic for a clean, ink-friendly one-page résumé built from the same content. ========================================================= */ @media print { * { animation: none !important; transition: none !important; box-shadow: none !important; text-shadow: none !important; } html, body { background: #fff !important; color: #111 !important; cursor: auto !important; } /* kill every decorative / interactive-only layer */ #matrix-canvas, .scanlines, .cursor-dot, .cursor-ring, .boot, .nav, .nav__mobile, .scroll-hint, .hero__bg-glow, .hero__cta, .hero__stats, .side-links, .back-to-top, .projects__filters, .contact-card__copy, .toast-stack, .palette-backdrop, .secret-overlay, .terminal-window-max-backdrop, #terminal, #playground, .footer, .konami-hint, .terminal-window__bar, .project-card .terminal-window__bar, .git-log__node, .git-log__commit::before, #skillGraphCanvas, .skill-graph__hint, .badges { display: none !important; } .sr-only { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; clip: auto !important; overflow: visible !important; white-space: normal !important; } .sr-only { display: flex !important; flex-wrap: wrap; gap: .4rem 1rem; list-style: none; padding-left: 0 !important; } .sr-only li { font-size: 10pt; } body { font-family: Georgia, 'Times New Roman', serif; } .section, .hero { max-width: 100% !important; padding: 0 0 18pt !important; margin: 0 !important; page-break-inside: avoid; } .hero { min-height: 0 !important; display: block !important; padding-top: 0 !important; } .hero__eyebrow, .section__tag { display: none !important; } .hero__title, .hero__title.glitch { background: none !important; -webkit-text-fill-color: #111 !important; color: #111 !important; font-size: 28pt !important; letter-spacing: normal !important; } .glitch::before, .glitch::after { display: none !important; content: none !important; } .hero__role { color: #444 !important; font-size: 13pt; } .hero__role-prefix, .cursor-blink { display: none !important; } .hero__desc { color: #222 !important; max-width: 100% !important; font-size: 11pt; } .hero__desc strong { color: #000 !important; } .section__title { color: #000 !important; font-size: 15pt !important; margin-bottom: 10pt !important; border-bottom: 1pt solid #999; padding-bottom: 4pt; } .terminal-window, .fact-card, .project-card, .contact-card { background: #fff !important; border: 1pt solid #ccc !important; box-shadow: none !important; border-radius: 0 !important; page-break-inside: avoid; } .skill-graph { background: none !important; border: none !important; padding: 0 !important; } .sr-only li { color: #222 !important; border: 1pt solid #ccc; padding: 3pt 6pt; border-radius: 3pt; } .terminal-window__body, .terminal-window__body p, .fact-card p, .project-card__body p, .contact__desc { color: #222 !important; } .prompt, .blink-caret, .typed-cmd .blink-caret { display: none !important; } .about__grid { display: block !important; } .about__facts { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 10pt !important; margin-top: 10pt; } .fact-card { flex: 1 1 30%; padding: 8pt !important; } .fact-card h3, .project-card__body h3, .contact-card__label { color: #000 !important; } .git-log { margin-top: 10pt !important; } .git-log__body { padding: 0 !important; } .git-log__commit { padding-bottom: 8pt !important; gap: .4rem !important; } .git-log__hash { color: #555 !important; } .git-log__date { color: #777 !important; } .git-log__msg { color: #111 !important; } .git-log__tag--feat, .git-log__tag--refactor, .git-log__tag--chore, .git-log__tag--init { color: #000 !important; } .projects__grid { display: block !important; } .project-card { margin-bottom: 8pt; } .project-card__file { display: none !important; } .tags span { background: #eee !important; color: #333 !important; border: 1pt solid #ddd; } .project-card__links a { color: #000 !important; } .project-card--ghost { display: none !important; } .contact { padding-bottom: 0 !important; } .contact__grid { display: flex !important; flex-direction: row; flex-wrap: wrap; gap: 8pt !important; } .contact-card { flex: 1 1 30%; } .contact-card__value { color: #222 !important; } a { color: #111 !important; text-decoration: underline; } body::after { content: 'gerado a partir do portfolio interativo de Artur Tavares de Melo — arturtmelo1@gmail.com'; display: block; margin-top: 18pt; font-size: 8pt; color: #888; text-align: center; } }