/* Dário Gabriel — portfolio styles * Custom CSS supplementing Tailwind (loaded via CDN in index.html ). */ html { font-family: 'Inter', system-ui, sans-serif; } .gradient-text { background-image: linear-gradient(100deg, #8ec7ff 0%, #2f83f4 50%, #154fae 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .atmosphere { background: radial-gradient(60rem 40rem at 80% -10%, rgba(47,131,244,.18), transparent 60%), radial-gradient(50rem 30rem at 10% 10%, rgba(20,68,140,.25), transparent 60%), linear-gradient(to right, rgba(148,163,184,.06) 1px, transparent 1px) 0 0 / 36px 36px, linear-gradient(to bottom, rgba(148,163,184,.06) 1px, transparent 1px) 0 0 / 36px 36px; } .hairline { background: linear-gradient(to right, transparent, rgba(148,163,184,.25), transparent); height: 1px; } /* Driven by the IntersectionObserver in assets/js/observers.js */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } .reveal.is-visible { opacity: 1; transform: none; } .node { position: relative; } .node::before { content: ''; position: absolute; left: calc(-2rem - 0.5rem - 0.5px); /* pl-8 + half dot + half border */ top: 0.5rem; width: 1rem; height: 1rem; border-radius: 9999px; background: #0b1220; border: 2px solid #2f83f4; box-shadow: 0 0 0 4px rgba(47,131,244,.15); } .card { background: linear-gradient(180deg, rgba(30,41,59,.5) 0%, rgba(15,23,42,.5) 100%); border: 1px solid rgba(148,163,184,.12); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; } .card:hover { transform: translateY(-3px); border-color: rgba(47,131,244,.45); box-shadow: 0 24px 48px -24px rgba(47,131,244,.35); } .chip { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; border-radius: 9999px; font-size: 0.72rem; font-family: 'JetBrains Mono', ui-monospace, monospace; background: rgba(47,131,244,.08); border: 1px solid rgba(47,131,244,.25); color: #8ec7ff; } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }