/* ===========================================
Shared styles — josemayo.com
Use in every page:
(adjust path with ../ if page is in a subfolder)
=========================================== */
:root{
--bg:#0E1113;
--surface:#171B1E;
--surface-2:#1E2327;
--line:#2A3034;
--text:#EDEAE4;
--muted:#8A9098;
--accent:#5C7A99;
--accent-soft:rgba(92,122,153,0.15);
--good:#5C9974;
--bad:#B3675C;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
background:var(--bg);
color:var(--text);
font-family:'Inter', sans-serif;
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
a{color:inherit;}
.wrap{max-width:920px; margin:0 auto; padding:0 28px;}
/* Fonts (add this link in of every page):
*/
/* NAV */
nav{
position:sticky; top:0; z-index:50;
background:rgba(14,17,19,0.85);
backdrop-filter:blur(8px);
border-bottom:1px solid var(--line);
}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:64px;}
.logo{font-family:'IBM Plex Mono', monospace; font-size:14px; letter-spacing:0.5px; color:var(--text); text-decoration:none;}
.logo span{color:var(--accent);}
.navlinks{display:flex; gap:28px; list-style:none;}
.navlinks a{font-size:14px; color:var(--muted); text-decoration:none; transition:color .2s;}
.navlinks a:hover{color:var(--text);}
.back{font-size:13px; color:var(--muted); text-decoration:none;}
.back:hover{color:var(--text);}
/* HEADINGS */
h1{
font-family:'Space Grotesk', sans-serif;
font-weight:700;
letter-spacing:-1px;
}
h2{
font-family:'Space Grotesk', sans-serif;
font-weight:600;
letter-spacing:-0.5px;
}
.eyebrow, .meta, .section-tag{
font-family:'IBM Plex Mono', monospace;
font-size:12.5px;
color:var(--accent);
letter-spacing:1.5px;
text-transform:uppercase;
}
/* BUTTONS */
.btn{
font-family:'Inter'; font-size:14px; font-weight:500;
padding:12px 22px; border-radius:2px;
text-decoration:none; transition:all .2s;
border:1px solid var(--line);
display:inline-block;
}
.btn-primary{background:var(--accent); color:#0E1113; border-color:var(--accent);}
.btn-primary:hover{opacity:0.88;}
.btn-ghost{color:var(--text);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent);}
/* SECTION SHARED */
section{padding:88px 0; border-bottom:1px solid var(--line);}
.section-head{margin-bottom:48px;}
/* CARDS / GRIDS (used by skills, tools) */
.grid-cards{
display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:1px; background:var(--line); border:1px solid var(--line);
}
.grid-card{background:var(--surface); padding:22px 20px;}
/* FOOTER */
footer{padding:40px 0; text-align:center;}
footer p{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--muted);}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto;}
}