/* Vera Terna — veraterna.com. Aurora theme (gradient mesh) + a live CI/CD diagram hero. Progressive enhancement: reveal/animation styles are gated on the .js class set in , so with JS disabled the whole page is readable and every section is visible. */ :root{ --bg:#0a0713; --panel:rgba(255,255,255,.045); --edge:rgba(255,255,255,.12); --text:#f3f0ff; --muted:#b3a9d6; --a1:#7c5cff; --a2:#22d3ee; --a3:#ff5db1; --a4:#ffb44c; --a5:#3ee6a0; --sans:"Sora",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace; --max:74rem; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative} a{color:inherit} /* animated aurora mesh */ .aurora{position:fixed; inset:0; z-index:-2; filter:blur(70px); opacity:.55} .aurora span{position:absolute; border-radius:50%; mix-blend-mode:screen; animation:float 18s ease-in-out infinite} .aurora .b1{width:52vw;height:52vw;left:-8vw;top:-12vw;background:radial-gradient(circle,var(--a1),transparent 60%)} .aurora .b2{width:46vw;height:46vw;right:-10vw;top:2vw;background:radial-gradient(circle,var(--a2),transparent 60%);animation-delay:-4s} .aurora .b3{width:44vw;height:44vw;left:18vw;top:38vw;background:radial-gradient(circle,var(--a3),transparent 60%);animation-delay:-9s} .aurora .b4{width:34vw;height:34vw;right:6vw;bottom:-8vw;background:radial-gradient(circle,var(--a4),transparent 60%);animation-delay:-13s} @keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(4vw,3vw) scale(1.08)}66%{transform:translate(-3vw,-2vw) scale(.95)}} .grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.04;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:3px 3px} .wrap{max-width:var(--max); margin:0 auto; padding:0 clamp(1.1rem,4vw,2.5rem)} .grad{background:linear-gradient(100deg,var(--a2),var(--a1) 45%,var(--a3)); -webkit-background-clip:text; background-clip:text; color:transparent} /* NAV */ .nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(16px);background:rgba(10,7,19,.55);border-bottom:1px solid var(--edge)} .nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:.85rem clamp(1.1rem,4vw,2.5rem)} .brand{font-family:var(--mono);font-weight:600;text-decoration:none} .nav-links{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap} .nav-links a{font-size:.82rem;text-decoration:none;color:var(--muted);padding:.35rem .6rem;border-radius:8px;transition:.15s} .nav-links a:hover{color:var(--text);background:var(--panel)} .nav-links a.solid{color:#0a0713;background:linear-gradient(100deg,var(--a2),var(--a1));font-weight:600} .nav-links a.wire{border:1px solid var(--edge)} /* HERO */ .hero{padding:clamp(2.2rem,7vw,5rem) 0 3rem} .hero-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center} .kicker{font-family:var(--mono);font-size:.8rem;color:var(--a2);letter-spacing:.08em;text-transform:uppercase} .hero h1{font-size:clamp(2.9rem,8vw,5.4rem);font-weight:800;line-height:1;letter-spacing:-.03em;margin:.5rem 0 .4rem} .hero .role{font-size:clamp(1.15rem,3.4vw,1.6rem);font-weight:500} .hero .tag{color:var(--muted);max-width:32rem;margin:1rem 0 1.4rem;font-size:1.03rem} .badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem} .badge{font-family:var(--mono);font-size:.74rem;padding:.34rem .75rem;border-radius:999px;border:1px solid var(--edge);color:var(--muted);background:var(--panel)} .badge.hot{border:none;color:#0a0713;background:linear-gradient(100deg,var(--a5),var(--a2));font-weight:700} .cta{display:flex;flex-wrap:wrap;gap:.6rem} .btn{display:inline-flex;align-items:center;gap:.45rem;padding:.65rem 1.15rem;border-radius:999px;text-decoration:none;font-size:.9rem;border:1px solid var(--edge);background:var(--panel);transition:.18s;backdrop-filter:blur(6px)} .btn:hover{transform:translateY(-2px);border-color:var(--a2)} .btn.primary{border:none;color:#0a0713;font-weight:700;background:linear-gradient(100deg,var(--a2),var(--a1))} .btn.primary:hover{box-shadow:0 10px 34px rgba(124,92,255,.5)} /* DIAGRAM */ .diagram-card{position:relative;background:var(--panel);border:1px solid var(--edge);border-radius:20px;padding:1rem 1rem .6rem;backdrop-filter:blur(10px);box-shadow:0 30px 80px -30px rgba(0,0,0,.7)} .diagram-card .barlabel{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:.72rem;color:var(--muted);padding:.2rem .4rem .6rem} .win-dots{display:flex;gap:.35rem} .win-dots i{width:9px;height:9px;border-radius:50%;display:inline-block} svg.diagram{width:100%;height:auto;display:block} .node{cursor:pointer} .node rect{transition:.18s} .node:hover rect{filter:brightness(1.35)} .node text{font-family:var(--mono);fill:var(--text);font-size:12px} .node .sub{fill:var(--muted);font-size:9.5px} .flow{stroke-dasharray:5 7;animation:dash 1.4s linear infinite} @keyframes dash{to{stroke-dashoffset:-24}} .annot{min-height:2.6rem;margin-top:.5rem;padding:.55rem .7rem;border-top:1px dashed var(--edge);font-size:.85rem;color:var(--muted);font-family:var(--mono)} .annot b{color:var(--a2)} section.block{padding:clamp(2.5rem,6vw,4.2rem) 0} .h2{font-family:var(--mono);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--a2);margin-bottom:.4rem} .h2b{font-size:clamp(1.6rem,4vw,2.3rem);font-weight:700;letter-spacing:-.02em;margin-bottom:1.5rem} /* METRICS */ .metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem} .metric{background:var(--panel);border:1px solid var(--edge);border-radius:18px;padding:1.3rem 1.1rem;backdrop-filter:blur(8px)} .metric .num{font-family:var(--mono);font-weight:700;font-size:2rem;line-height:1} .metric .lbl{color:var(--muted);font-size:.82rem;margin-top:.5rem} /* BEFORE / AFTER */ .ba{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem} .ba-card{background:var(--panel);border:1px solid var(--edge);border-radius:18px;padding:1.3rem;backdrop-filter:blur(8px)} .ba-card h4{font-size:.98rem;margin-bottom:.9rem;color:var(--text);font-weight:600} .bar-row{display:flex;align-items:center;gap:.6rem;margin:.45rem 0;font-family:var(--mono);font-size:.78rem} .bar-row .tag{width:2.9rem;color:var(--muted)} .bar{height:14px;border-radius:7px;background:rgba(255,255,255,.08);flex:1;overflow:hidden} .bar i{display:block;height:100%;border-radius:7px;transition:width 1s cubic-bezier(.2,.8,.2,1)} .bar.before i{background:linear-gradient(90deg,#5b6478,#8a93ab)} .bar.after i{background:linear-gradient(90deg,var(--a2),var(--a5))} .ba-card .val{font-family:var(--mono);font-weight:600;white-space:nowrap} .ba-card .note{color:var(--muted);font-size:.76rem;margin-top:.7rem} /* SKILLS cards */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem} .card{position:relative;background:var(--panel);border:1px solid var(--edge);border-radius:18px;padding:1.3rem;backdrop-filter:blur(8px);transition:.2s;overflow:hidden} .card:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 20px 50px -20px rgba(124,92,255,.5)} .card .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:1.2rem;margin-bottom:.8rem} .card h3{font-size:1.05rem;margin-bottom:.35rem} .card p{color:var(--muted);font-size:.88rem} .c1 .ic{background:linear-gradient(135deg,var(--a2),var(--a1))} .c2 .ic{background:linear-gradient(135deg,var(--a1),var(--a3))} .c3 .ic{background:linear-gradient(135deg,var(--a5),var(--a2))} .c4 .ic{background:linear-gradient(135deg,var(--a4),var(--a3))} .c5 .ic{background:linear-gradient(135deg,var(--a3),var(--a1))} .c6 .ic{background:linear-gradient(135deg,var(--a2),var(--a5))} /* AGENTS */ .agents{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem} .agent{position:relative;border-radius:20px;padding:1.5rem;background:var(--panel);border:1px solid var(--edge);backdrop-filter:blur(8px)} .agent.star{background:linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(120deg,var(--a2),var(--a1),var(--a3)) border-box;border:1.5px solid transparent} .star-tag{position:absolute;top:-11px;left:1.3rem;font-family:var(--mono);font-size:.68rem;padding:.22rem .6rem;border-radius:999px;color:#0a0713;background:linear-gradient(100deg,var(--a2),var(--a1));font-weight:700} .agent h3{font-size:1.2rem;margin-bottom:.35rem} .agent .desc{color:var(--muted);font-size:.92rem;margin-bottom:1rem} .flow-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem} .flow-chip{font-family:var(--mono);font-size:.72rem;padding:.3rem .55rem;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid var(--edge)} .flow-arrow{color:var(--a2);font-family:var(--mono)} .flow-chip.win{color:#0a0713;background:linear-gradient(100deg,var(--a5),var(--a2));border:none;font-weight:700} .out{display:flex;align-items:baseline;gap:.5rem;font-family:var(--mono);margin-bottom:.6rem} .out .big{font-size:1.7rem;font-weight:700} .out .cap{color:var(--muted);font-size:.8rem} .shown{font-family:var(--mono);font-size:.74rem;color:var(--muted)} .shown i{color:var(--a5);font-style:normal} /* EXPERIENCE */ .job{position:relative;padding-left:1.6rem;margin-bottom:2rem} .job::before{content:"";position:absolute;left:0;top:.5rem;width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--a2),var(--a1));box-shadow:0 0 0 4px rgba(124,92,255,.18)} .job::after{content:"";position:absolute;left:5px;top:1.4rem;bottom:-1.4rem;width:2px;background:linear-gradient(var(--a1),transparent)} .job:last-child::after{display:none} .job-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1rem;align-items:baseline} .job-head h3{font-size:1.1rem} .job-head .when{font-family:var(--mono);font-size:.8rem;color:var(--muted)} .job .meta{color:var(--muted);font-size:.85rem;font-style:italic;margin:.15rem 0 .7rem} .job ul{list-style:none;display:grid;gap:.45rem} .job li{position:relative;padding-left:1.2rem;font-size:.95rem} .job li::before{content:"→";position:absolute;left:0;color:var(--a2)} .contact-card{border-radius:22px;padding:2.4rem;text-align:center;background:linear-gradient(120deg,rgba(34,211,238,.12),rgba(124,92,255,.12),rgba(255,93,177,.1));border:1px solid var(--edge);backdrop-filter:blur(8px)} .foot{text-align:center;color:var(--muted);font-size:.8rem;padding:2rem;font-family:var(--mono)} /* Reveal-on-scroll — only hides content when JS is present to reveal it (graceful degradation). */ .js .reveal{opacity:0;transform:translateY(20px);transition:.6s ease} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .aurora span,.flow{animation:none} .js .reveal{opacity:1;transform:none;transition:none} .bar i{transition:none} } @media(max-width:860px){ .hero-grid{grid-template-columns:1fr} .diagram-card{order:2} .metrics{grid-template-columns:repeat(2,1fr)} .cards{grid-template-columns:1fr 1fr} .agents{grid-template-columns:1fr} .ba{grid-template-columns:1fr} } @media(max-width:560px){ .cards{grid-template-columns:1fr} .nav-links a:not(.solid):not(.wire){display:none} }