Repository navigation
Expand file tree
/
Copy pathstyles.css
More file actions
1 lines (1 loc) · 4.97 KB
/
Copy pathstyles.css
File metadata and controls
1 lines (1 loc) · 4.97 KB
1
:root{--bg:#08090b;--text:#f3f1eb;--muted:#96999f;--line:#25272c;--accent:#c7ff51;--panel:#101216}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif}a{color:inherit;text-decoration:none}.grain{position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='4' stitchTiles='stitch' type='fractalNoise'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}nav{position:sticky;top:0;z-index:8;height:74px;padding:0 5vw;border-bottom:1px solid var(--line);backdrop-filter:blur(14px);background:rgba(8,9,11,.72);display:flex;align-items:center;gap:2rem}.brand{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.08em;font-size:1.35rem}.brand span{color:var(--accent)}.links{display:flex;gap:1.8rem;margin:auto;font:.68rem 'DM Mono',monospace;text-transform:uppercase;color:var(--muted)}.links a:hover,.github:hover,footer a:hover,.socials a:hover{color:var(--accent)}.github,.section-head,footer,.tag{font:.67rem 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.08em}.hero{min-height:calc(100vh - 74px);padding:9vw 5vw 6vw;position:relative;overflow:hidden}.hero-kicker{font:.68rem 'DM Mono',monospace;letter-spacing:.12em;color:var(--accent)}h1,h2{font-family:'Space Grotesk',sans-serif;letter-spacing:-.065em;line-height:.92;margin:0}h1{font-size:clamp(4.2rem,11vw,11rem);max-width:1050px;margin-top:6vw}i{font-style:normal;color:var(--accent)}.intro{max-width:540px;color:var(--muted);font-size:1.05rem;line-height:1.55;margin:6vw 0 2.5rem}.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap}.pill{display:inline-flex;align-items:center;gap:.7rem;padding:.85rem 1.1rem;border:1px solid var(--line);border-radius:999px;font-size:.78rem;transition:transform .2s}.pill.primary{background:var(--accent);color:#10120a;border-color:var(--accent)}.pill:hover{transform:translateY(-2px)}.orb{position:absolute;right:-9vw;top:18vh;width:min(44vw,560px);height:min(44vw,560px);border:1px solid #3c402f;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 100px rgba(199,255,81,.04)}.orb:before,.orb:after{content:"";position:absolute;border:1px solid #2a2d25;border-radius:50%}.orb:before{inset:12%}.orb:after{inset:28%}.orb-core{width:32%;height:32%;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#e8ffb8,var(--accent) 36%,#677f27 65%,#15180e 100%);color:#10120a;font:700 clamp(3rem,8vw,6rem) 'Space Grotesk';box-shadow:0 0 70px rgba(199,255,81,.22)}.section{padding:7rem 5vw;border-top:1px solid var(--line)}.section-head{display:flex;justify-content:space-between;color:var(--muted)}.projects{margin-top:4rem;display:grid;gap:1px;background:var(--line)}.project{background:var(--bg);min-height:300px;padding:2rem;display:grid;grid-template-columns:90px 1fr 150px;gap:2rem;align-items:start;transition:.25s}.project:hover{background:var(--panel)}.project-num{font:1rem 'DM Mono',monospace;color:var(--accent)}.tag{color:var(--accent);margin:0 0 1rem}.project h2{font-size:clamp(2rem,4.7vw,4.4rem);margin-bottom:1rem}.project p:not(.tag){max-width:560px;color:var(--muted);line-height:1.55}.project a{display:inline-block;margin-top:.8rem;font:.68rem 'DM Mono',monospace;text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:.35rem}.card-mark,.mini-grid{justify-self:end;width:150px;height:150px;border:1px solid var(--line);display:grid;place-items:center;color:var(--accent);font:700 4rem 'Space Grotesk'}.mini-grid{font:1rem 'DM Mono',monospace;line-height:1.8;text-align:center}.about{background:#0c0e11}.about-grid{display:grid;grid-template-columns:1.25fr .8fr;gap:10vw;margin-top:4rem}.about h2,.contact h2{font-size:clamp(3rem,7vw,7.5rem)}.about p{color:var(--muted);font-size:1.05rem;line-height:1.65;margin:0 0 1.5rem}.contact{padding-bottom:8rem}.contact h2{margin:4rem 0 3rem}.contact-link{font:clamp(1.1rem,2vw,1.5rem) 'DM Mono',monospace;border-bottom:1px solid var(--accent);padding-bottom:.45rem}.socials{display:flex;gap:2rem;margin-top:5rem;font:.7rem 'DM Mono',monospace;text-transform:uppercase;color:var(--muted)}footer{padding:1.8rem 5vw;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;color:var(--muted)}footer a{color:var(--text)}@media(max-width:800px){nav{padding:0 6vw}.links{display:none}.github{margin-left:auto}.hero{padding:18vw 6vw 10vw}.orb{opacity:.42;right:-30vw;top:34vh;width:85vw;height:85vw}.intro{margin-top:10vw}.section{padding:5rem 6vw}.section-head span:last-child{display:none}.project{grid-template-columns:48px 1fr;min-height:0;padding:1.5rem}.card-mark,.mini-grid{grid-column:2;width:100px;height:100px;justify-self:start;font-size:2.6rem}.about-grid{grid-template-columns:1fr;gap:3rem}.socials{flex-wrap:wrap}footer{padding:1.4rem 6vw;flex-direction:column}footer span:nth-child(2){display:none}}