mirror of
https://github.com/mileswolfallen2/miles-web.git
synced 2026-09-08 11:23:17 +00:00
342 lines
15 KiB
CSS
342 lines
15 KiB
CSS
*{margin:0;padding:0;box-sizing:border-box;}
|
|
|
|
:root{
|
|
--bg:#000;
|
|
--text:#fff;
|
|
--muted:#666;
|
|
--accent:#FF3D9A;
|
|
--tape:#FFC93C;
|
|
--red:#FF0000;
|
|
--green:#39FF14;
|
|
--font-pixel:'Press Start 2P', monospace;
|
|
--font-mono:'Space Mono', monospace;
|
|
--font-body:'Inter', sans-serif;
|
|
}
|
|
|
|
html{scroll-behavior:smooth;}
|
|
body{
|
|
background:var(--bg);color:var(--text);font-family:var(--font-body);
|
|
line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;
|
|
}
|
|
|
|
body::before{
|
|
content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
|
|
}
|
|
body::after{
|
|
content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;
|
|
background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.15) 2px,rgba(0,0,0,0.15) 4px);
|
|
}
|
|
|
|
::selection{background:var(--accent);color:#000;}
|
|
a{color:inherit;text-decoration:none;}
|
|
|
|
body.custom-cursor-enabled *{cursor:none !important;}
|
|
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:99999;border-radius:50%;}
|
|
.cursor-dot{
|
|
width:6px;height:6px;background:var(--accent);
|
|
transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s;
|
|
}
|
|
.cursor-ring{
|
|
width:36px;height:36px;border:2px solid var(--accent);
|
|
transform:translate(-50%,-50%);transition:width .3s,height .3s,border-color .3s,opacity .3s;
|
|
opacity:.5;
|
|
}
|
|
.cursor-dot.hover{width:10px;height:10px;background:var(--tape);}
|
|
.cursor-ring.hover{width:50px;height:50px;border-color:var(--tape);opacity:.8;}
|
|
@media(max-width:640px){.cursor-dot,.cursor-ring{display:none;}}
|
|
@media(hover:none){.cursor-dot,.cursor-ring{display:none;}}
|
|
|
|
.container{max-width:1200px;margin:0 auto;padding:0 5vw;position:relative;z-index:2;}
|
|
|
|
/* NAV */
|
|
nav{padding:28px 0;display:flex;justify-content:space-between;align-items:center;position:relative;z-index:10;}
|
|
.nav-logo{font-family:var(--font-pixel);font-size:12px;color:var(--text);text-decoration:none;display:flex;align-items:center;gap:9px;}
|
|
.nav-logo .logo-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:pulse 1.6s ease-in-out infinite;}
|
|
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
|
|
.nav-links{display:flex;gap:6px;align-items:center;}
|
|
.nav-links a{
|
|
font-family:var(--font-pixel);font-size:9px;color:var(--muted);
|
|
padding:9px 16px;border:2px solid transparent;transition:all .25s;
|
|
text-transform:uppercase;letter-spacing:.06em;
|
|
}
|
|
.nav-links a:hover{color:var(--text);border-color:var(--accent);background:rgba(255,61,154,0.1);}
|
|
.nav-links a.active{color:var(--accent);border-color:var(--accent);background:rgba(255,61,154,0.15);}
|
|
|
|
/* PROJECT HERO */
|
|
.project-hero{padding:100px 0 40px;}
|
|
.breadcrumb{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-bottom:28px;transform:rotate(-1deg);}
|
|
.breadcrumb a{color:var(--muted);text-decoration:none;transition:color .2s;}
|
|
.breadcrumb a:hover{color:var(--accent);}
|
|
.breadcrumb svg{width:14px;height:14px;}
|
|
|
|
.project-hero h1{
|
|
font-family:var(--font-pixel);font-size:clamp(32px,7vw,72px);line-height:1.1;
|
|
letter-spacing:.01em;margin-bottom:18px;color:var(--text);
|
|
text-shadow:4px 4px 0 var(--accent),-2px -2px 0 var(--tape);
|
|
transform:rotate(-2deg);transform-origin:left center;
|
|
animation:glitch 5s ease-in-out infinite;margin-left:-1vw;
|
|
}
|
|
@keyframes glitch{
|
|
0%,90%,100%{text-shadow:3px 3px 0 var(--accent),-2px -2px 0 var(--tape);}
|
|
92%{text-shadow:3px 3px 0 var(--red),-2px -2px 0 var(--accent);transform:rotate(-1deg) translateX(2px);}
|
|
94%{text-shadow:3px 3px 0 var(--accent),-2px -2px 0 var(--red);transform:rotate(-1deg) translateX(-2px);}
|
|
}
|
|
.project-hero .tagline{font-size:15px;color:var(--muted);max-width:600px;margin-bottom:28px;line-height:1.7;font-family:var(--font-mono);transform:rotate(0.5deg);}
|
|
|
|
.project-meta-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
|
|
.meta-chip{
|
|
display:inline-flex;align-items:center;gap:6px;
|
|
background:rgba(255,255,255,0.02);border:2px solid rgba(255,255,255,0.12);
|
|
padding:8px 16px;font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--muted);
|
|
text-decoration:none;transition:all .25s;
|
|
}
|
|
.meta-chip:hover{border-color:var(--accent);color:var(--text);transform:translateY(-2px) rotate(-2deg);}
|
|
.meta-chip svg{width:14px;height:14px;}
|
|
.meta-chip.primary{background:var(--accent);border-color:var(--accent);color:#000;box-shadow:0 0 20px rgba(255,61,154,0.3);transform:rotate(-0.5deg);}
|
|
.meta-chip.primary:hover{box-shadow:0 0 30px rgba(255,61,154,0.5);transform:translateY(-2px) rotate(0deg);}
|
|
|
|
/* STATS BAR */
|
|
.stats-bar{
|
|
display:flex;gap:0;margin-top:32px;overflow:visible;
|
|
background:rgba(255,255,255,0.02);border:2px solid rgba(255,255,255,0.12);
|
|
position:relative;z-index:1;transform:rotate(-0.5deg);
|
|
}
|
|
.stat-item{flex:1;padding:20px 24px;text-align:center;border-right:2px solid rgba(255,255,255,0.12);transition:background .3s;}
|
|
.stat-item:nth-child(1){transform:rotate(-0.5deg);}
|
|
.stat-item:nth-child(2){transform:rotate(0.3deg);}
|
|
.stat-item:nth-child(3){transform:rotate(-0.4deg);}
|
|
.stat-item:last-child{border-right:none;}
|
|
.stat-item:hover{background:rgba(255,255,255,0.03);}
|
|
.stat-value{font-family:var(--font-mono);font-size:1.8rem;font-weight:700;color:var(--text);line-height:1;margin-bottom:4px;}
|
|
.stat-value.accent{color:var(--accent);}
|
|
.stat-value.green{color:var(--tape);}
|
|
.stat-value.orange{color:var(--tape);}
|
|
.stat-label{font-family:var(--font-pixel);font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);}
|
|
|
|
section{padding:48px 0;}
|
|
|
|
/* SECTION DIVIDER */
|
|
.section-divider{
|
|
width:60px;height:3px;background:var(--accent);margin-bottom:16px;
|
|
position:relative;transform:rotate(-2deg);
|
|
}
|
|
|
|
.section-title{font-family:var(--font-pixel);font-size:clamp(24px,5vw,44px);letter-spacing:.01em;margin-bottom:10px;transform:rotate(-1deg);transform-origin:left center;position:relative;}
|
|
.section-subtitle{color:var(--muted);font-size:14px;margin-bottom:28px;line-height:1.6;font-family:var(--font-mono);}
|
|
|
|
.feature-card h3:hover{
|
|
animation:titleGlitch .3s steps(2) infinite;
|
|
}
|
|
@keyframes titleGlitch{
|
|
0%{text-shadow:2px 0 var(--accent),-2px 0 var(--tape);}
|
|
25%{text-shadow:-2px 0 var(--red),2px 0 var(--accent);}
|
|
50%{text-shadow:2px 0 var(--tape),-2px 0 var(--red);}
|
|
75%{text-shadow:-2px 0 var(--accent),2px 0 var(--tape);}
|
|
100%{text-shadow:2px 0 var(--red),-2px 0 var(--accent);}
|
|
}
|
|
|
|
/* FEATURE CARDS */
|
|
.feature-grid{display:flex;flex-direction:column;gap:16px;margin-left:-2vw;margin-right:-2vw;}
|
|
.feature-card{
|
|
background:rgba(255,255,255,0.02);border:2px solid rgba(255,255,255,0.12);
|
|
padding:24px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:visible;
|
|
}
|
|
.feature-card:nth-child(odd){transform:rotate(-2deg) translateX(-8px);}
|
|
.feature-card:nth-child(even){transform:rotate(1.8deg) translateX(12px);}
|
|
.feature-card:nth-child(3n){transform:rotate(-2.5deg) translateX(-5px);}
|
|
.feature-card::before{
|
|
content:'';position:absolute;top:-3px;right:15px;width:35px;height:14px;
|
|
background:var(--tape);opacity:.6;transform:rotate(2deg);
|
|
}
|
|
.feature-card:hover{
|
|
transform:rotate(0deg) translateY(-5px) translateX(0);border-color:var(--accent);
|
|
box-shadow:0 0 30px rgba(255,61,154,0.2);
|
|
}
|
|
.feature-card::after{
|
|
content:'';position:absolute;bottom:-6px;left:15%;width:2px;height:0;
|
|
background:var(--accent);border-radius:0 0 2px 2px;opacity:0;
|
|
transition:height .3s ease, opacity .3s ease;
|
|
}
|
|
.feature-card:hover::after{height:6px;opacity:.5;}
|
|
|
|
.feature-card h3{font-family:var(--font-mono);font-size:14px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:10px;}
|
|
.feature-card h3 svg{width:20px;height:20px;color:var(--accent);flex-shrink:0;}
|
|
.feature-card p{font-size:13px;color:var(--muted);line-height:1.6;}
|
|
|
|
/* TECH BADGES */
|
|
.tech-stack{display:flex;gap:8px;flex-wrap:wrap;margin-left:-1vw;}
|
|
.tech-badge{
|
|
background:rgba(255,255,255,0.02);border:2px solid rgba(255,255,255,0.12);
|
|
padding:8px 16px;font-family:var(--font-mono);font-size:12px;font-weight:700;transition:all .25s;
|
|
}
|
|
.tech-badge:nth-child(3n){transform:rotate(-1deg);}
|
|
.tech-badge:nth-child(3n+1){transform:rotate(0.5deg);}
|
|
.tech-badge:hover{border-color:var(--accent);color:var(--text);transform:translateY(-3px) rotate(-2deg);}
|
|
|
|
/* TABLE */
|
|
.table-wrapper{overflow-x:auto;}
|
|
table{width:100%;border-collapse:collapse;font-size:13px;}
|
|
th,td{text-align:left;padding:12px 16px;border-bottom:2px solid rgba(255,255,255,0.12);}
|
|
th{color:var(--muted);font-family:var(--font-pixel);font-weight:700;font-size:8px;text-transform:uppercase;letter-spacing:.1em;}
|
|
td{color:var(--text);font-family:var(--font-mono);}
|
|
.check{color:var(--tape);}
|
|
.cross{color:var(--muted);opacity:.4;}
|
|
|
|
.desc-text{color:var(--muted);font-size:14px;line-height:1.7;max-width:680px;}
|
|
.desc-text code{background:rgba(255,255,255,0.02);border:2px solid rgba(255,255,255,0.12);padding:2px 6px;font-size:12px;}
|
|
|
|
code-block{
|
|
background:rgba(255,255,255,0.02);border:2px solid rgba(255,255,255,0.12);
|
|
padding:20px 24px;font-family:var(--font-mono);font-size:12px;color:var(--muted);
|
|
overflow-x:auto;margin:12px 0;position:relative;
|
|
}
|
|
code-block .comment{color:#999;}
|
|
code-block .cmd{color:var(--tape);}
|
|
|
|
/* FOOTER */
|
|
footer{
|
|
text-align:center;padding:60px 0 40px;
|
|
font-family:var(--font-mono);font-size:11px;color:var(--muted);
|
|
border-top:2px solid rgba(255,255,255,0.12);margin-top:40px;position:relative;
|
|
transform:rotate(-0.5deg);
|
|
}
|
|
footer a{color:var(--accent);}
|
|
|
|
/* FLASH & TOAST */
|
|
.flash{position:fixed;inset:0;pointer-events:none;z-index:10000;background:#fff;opacity:0;}
|
|
.toast-stack{position:fixed;bottom:20px;left:20px;z-index:9995;display:flex;flex-direction:column;gap:8px;}
|
|
.toast{
|
|
background:#111;border:2px solid var(--tape);
|
|
padding:12px 18px;font-family:var(--font-mono);font-size:11px;
|
|
display:flex;align-items:center;gap:10px;transform:translateX(-150%);max-width:260px;
|
|
}
|
|
.toast .icon{font-size:16px;}
|
|
.toast .title{color:var(--tape);font-family:var(--font-pixel);font-size:8px;display:block;margin-bottom:3px;text-transform:uppercase;}
|
|
|
|
/* REVEAL */
|
|
.reveal{opacity:0;transform:translateY(24px);}
|
|
.reveal.visible{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease;}
|
|
|
|
/* PROGRESS BAR */
|
|
.progress-bar{position:fixed;top:0;left:0;height:3px;background:var(--accent);z-index:10001;width:0;transition:width .1s linear;box-shadow:0 0 8px var(--accent);}
|
|
|
|
/* THEME TOGGLE */
|
|
body.light{--bg:#f5f5f0;--text:#111;--muted:#888;}
|
|
body.light .nav-links a{color:#888;}
|
|
body.light .project-hero h1{color:#111;}
|
|
body.light .feature-card{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.15);}
|
|
body.light .feature-card p{color:#555;}
|
|
body.light .stat-item{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.15);}
|
|
body.light .stat-value{color:#111;}
|
|
body.light .tech-badge{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.15);}
|
|
body.light .desc-text{color:#555;}
|
|
body.light .section-title{color:#111;}
|
|
body.light .section-subtitle{color:#888;}
|
|
body.light .tagline{color:#555;}
|
|
body.light .toast{background:#eee;border-color:#333;color:#333;}
|
|
body.light .toast .title{color:#333;}
|
|
body.light footer{color:#888;border-color:rgba(0,0,0,0.15);}
|
|
body.light .breadcrumb{color:#888;}
|
|
|
|
.theme-toggle{
|
|
position:fixed;top:20px;right:20px;z-index:600;
|
|
background:none;border:2px solid rgba(255,255,255,0.15);
|
|
width:40px;height:40px;display:flex;align-items:center;justify-content:center;
|
|
font-size:16px;cursor:pointer;transition:all .3s;color:var(--text);
|
|
}
|
|
.theme-toggle:hover{border-color:var(--accent);background:rgba(255,61,154,0.1);}
|
|
@media(max-width:640px){.theme-toggle{display:none;}}
|
|
|
|
/* SHORTCUT MODAL */
|
|
.shortcut-modal{
|
|
position:fixed;inset:0;z-index:10002;background:rgba(0,0,0,0.85);
|
|
display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px);
|
|
}
|
|
.shortcut-modal.open{display:flex;}
|
|
.shortcut-card{
|
|
background:#111;border:2px solid var(--accent);padding:32px;max-width:400px;width:90%;
|
|
font-family:var(--font-mono);font-size:12px;
|
|
}
|
|
.shortcut-card h3{font-family:var(--font-pixel);font-size:11px;color:var(--accent);margin-bottom:20px;text-transform:uppercase;}
|
|
.shortcut-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.08);color:var(--muted);}
|
|
.shortcut-row kbd{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.15);padding:2px 8px;font-family:var(--font-mono);font-size:11px;color:var(--text);}
|
|
.shortcut-card .close-hint{margin-top:16px;font-size:10px;color:var(--muted);text-align:center;}
|
|
|
|
/* GLITCH TITLE */
|
|
.section-title{position:relative;}
|
|
.feature-card h3{position:relative;}
|
|
|
|
/* MOBILE NAV */
|
|
.mobile-nav{
|
|
display:none;position:fixed;bottom:0;left:0;right:0;z-index:500;
|
|
background:rgba(0,0,0,0.92);border-top:2px solid rgba(255,255,255,0.12);
|
|
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
|
|
padding:8px 0 env(safe-area-inset-bottom,8px);
|
|
}
|
|
.mobile-nav a{
|
|
display:inline-flex;flex:1;justify-content:center;align-items:center;
|
|
font-family:var(--font-pixel);font-size:7px;color:var(--muted);
|
|
padding:10px 6px;text-transform:uppercase;letter-spacing:.04em;
|
|
text-decoration:none;transition:all .2s;border:none;background:none;
|
|
-webkit-tap-highlight-color:transparent;
|
|
}
|
|
.mobile-nav a:active,.mobile-nav a.active{color:var(--accent);}
|
|
|
|
@media(max-width:640px){
|
|
.mobile-nav{display:flex;gap:4px;}
|
|
|
|
.container{padding:0 5vw;}
|
|
|
|
nav{padding:20px 0;}
|
|
.nav-links{display:none;}
|
|
.nav-logo{font-size:10px;}
|
|
|
|
.project-hero{padding:60px 0 24px;}
|
|
.breadcrumb{transform:none;font-size:11px;margin-bottom:16px;}
|
|
.project-hero h1{font-size:clamp(24px,7vw,36px);transform:rotate(-1deg);margin-left:0;}
|
|
.project-hero .tagline{transform:none;font-size:13px;margin-bottom:20px;}
|
|
.project-meta-bar{gap:6px;}
|
|
.meta-chip{padding:7px 12px;font-size:11px;}
|
|
.meta-chip.primary{transform:none;}
|
|
|
|
.stats-bar{flex-direction:column;transform:none;margin-top:24px;}
|
|
.stat-item{border-right:none;border-bottom:2px solid rgba(255,255,255,0.12);transform:none!important;}
|
|
.stat-item:last-child{border-bottom:none;}
|
|
.stat-value{font-size:1.4rem;}
|
|
|
|
section{padding:32px 0;}
|
|
.section-title{font-size:clamp(20px,6vw,32px);transform:rotate(-0.5deg);}
|
|
.section-divider{width:40px;}
|
|
.section-subtitle{font-size:12px;margin-bottom:20px;}
|
|
|
|
.feature-grid{flex-direction:column;gap:12px;margin:0;}
|
|
.feature-card{padding:18px;transform:none!important;overflow:hidden;}
|
|
.feature-card::before{display:none;}
|
|
.feature-card h3{font-size:13px;}
|
|
.feature-card p{font-size:12px;}
|
|
|
|
.tech-stack{flex-wrap:wrap;gap:6px;margin:0;}
|
|
.tech-badge{padding:6px 12px;font-size:10px;transform:none!important;}
|
|
|
|
.table-wrapper{margin:0 -5vw;width:calc(100% + 10vw);padding:0 5vw;}
|
|
table{font-size:11px;}
|
|
th,td{padding:8px 10px;}
|
|
th{font-size:7px;}
|
|
|
|
.desc-text{font-size:13px;}
|
|
code-block{padding:14px 16px;font-size:11px;}
|
|
|
|
footer{padding:40px 0 100px;transform:none;font-size:10px;}
|
|
|
|
.toast-stack{bottom:70px;left:12px;}
|
|
.toast{max-width:220px;padding:10px 14px;font-size:10px;}
|
|
}
|
|
|
|
.footer-links{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;}
|
|
.footer-links a{font-family:var(--font-pixel);font-size:8px;color:var(--tape);letter-spacing:.08em;text-transform:uppercase;transition:color .2s;}
|
|
.footer-links a:hover{color:var(--accent);}
|
|
|
|
@media(prefers-reduced-motion:reduce){
|
|
*{animation:none!important;transition:none!important;}
|
|
}
|