@tailwind base; @tailwind components; @tailwind utilities; *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --stone:#F7F6F1; --stone2:#FFFFFF; --stone3:rgba(193,18,31,.03); --deep:#FFFFFF; --navy:#111110; --navy2:#C1121F; --accent2:#C1121F; --mid:#726F66; --muted:#8F8C82; --line:#DAD7CC; --line2:rgba(17,17,16,.32); --line3:rgba(17,17,16,.5); --container:1180px; --pad:52px; --r:0px; --r-sm:0px; --shadow:none; --f-head:'Archivo',sans-serif; --f-body:'Inter',sans-serif; --f-mono:'IBM Plex Mono',monospace; } html{scroll-behavior:smooth} body{ background:var(--stone); color:var(--navy); font-family:var(--f-body); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } .wrap{max-width:var(--container);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)} /* ---------- SECTION NUMBERING (Swiss index) ---------- */ .site-shell{counter-reset:sec} .about-split,.sec{counter-increment:sec} /* ---------- NAV ---------- */ nav{ position:sticky;top:0;z-index:300; background:rgba(247,246,241,.9); backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%); border-bottom:1px solid var(--line); transition:background .25s ease,border-color .25s ease; } nav.nav-scrolled{ background:rgba(247,246,241,.98); border-bottom-color:var(--navy); } .nav-bar{ max-width:var(--container);margin:0 auto; padding:0 var(--pad); height:64px; display:flex;align-items:center;justify-content:space-between; } .nav-logo-wrap{ display:flex;align-items:center;gap:9px; text-decoration:none;color:var(--navy); } .nav-logosvg{width:24px;height:24px} .nav-name{ font-family:var(--f-head); font-size:15px;font-weight:700; letter-spacing:-.01em; } .nav-name sup{ font-size:8px;font-weight:500; opacity:.55;vertical-align:super; letter-spacing:.06em;font-family:var(--f-mono); } .nav-links{display:flex;align-items:center;gap:4px} .nav-links a{ display:flex;align-items:center; padding:8px 14px; font-size:12.5px;color:var(--mid); text-decoration:none; transition:color .15s,background .15s; font-weight:500;letter-spacing:.03em; font-family:var(--f-mono);text-transform:uppercase; } .nav-links a:hover{color:var(--navy2);background:var(--stone3)} .nav-socials{display:flex;align-items:center;gap:4px;margin-left:8px;padding-left:14px;border-left:1px solid var(--line)} .nav-socials a{ display:flex;align-items:center;justify-content:center; width:32px;height:32px; color:var(--mid);text-decoration:none; transition:color .15s,background .15s; } .nav-socials a:hover{color:var(--navy2);background:var(--stone3)} .nav-socials svg{width:15px;height:15px;fill:currentColor} .nav-burger{ display:none;flex-direction:column;justify-content:center;gap:4px; width:36px;height:36px;background:transparent;border:1px solid var(--line3); cursor:pointer;flex-shrink:0; } .nav-burger span{display:block;width:15px;height:1.5px;background:var(--navy);margin:0 auto;transition:transform .2s,opacity .2s} nav.nav-open .nav-burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)} nav.nav-open .nav-burger span:nth-child(2){opacity:0} nav.nav-open .nav-burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)} /* ---------- STRIP ---------- */ .strip{ background:var(--navy); border-bottom:1px solid var(--navy); display:flex;align-items:center;justify-content:center;gap:12px; padding:9px 24px;font-size:12px; color:rgba(247,246,241,.7); font-family:var(--f-mono); } .strip-pill{ background:var(--navy2); color:#F7F6F1; padding:2px 10px; font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; } .strip a{color:#F7F6F1;text-decoration:none;font-weight:500;display:flex;align-items:center;gap:5px} .strip-arr{opacity:.6;font-size:13px} /* ---------- HERO ---------- */ .hero-row{ position:relative; display:flex;flex-wrap:wrap;gap:48px; max-width:var(--container);margin:0 auto; padding:80px var(--pad) 76px; overflow:hidden; } .hero-glow{ position:absolute;top:-220px;left:50%; width:900px;height:600px;transform:translateX(-50%); background:radial-gradient(closest-side,rgba(193,18,31,.06),transparent 70%); filter:blur(20px);pointer-events:none;z-index:0; } .hero-main{flex:1 1 480px;position:relative;z-index:1} .status-row{ display:inline-flex;align-items:center;gap:8px; font-size:11.5px;color:var(--mid);font-weight:500; letter-spacing:.04em;margin-bottom:26px; font-family:var(--f-mono);text-transform:uppercase; } .green-dot{width:6px;height:6px;background:var(--navy2);position:relative;flex-shrink:0} .green-dot::after{content:'';position:absolute;inset:-3px;background:rgba(193,18,31,.18);animation:gpulse 2.2s ease-in-out infinite} @keyframes gpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.7);opacity:0}} .hero-name{ font-family:var(--f-head); font-size:clamp(42px,6vw,72px); font-weight:700; line-height:1.0; letter-spacing:-.03em; color:var(--navy); margin-bottom:10px; } .hero-name::after{content:'';display:block;width:64px;height:3px;background:var(--navy2);margin-top:18px} .hero-role{ font-family:var(--f-mono); font-size:clamp(12px,1.5vw,13.5px); color:var(--mid); font-weight:400; letter-spacing:.04em;text-transform:uppercase; margin-top:18px; margin-bottom:26px; } .hero-lead{ font-size:14.5px;color:var(--mid);line-height:1.7; max-width:520px;margin-bottom:16px;font-weight:400; } .hero-thesis{ font-size:14.5px;color:var(--navy);line-height:1.6; max-width:520px;margin-bottom:18px;font-weight:500; padding-left:14px;border-left:2px solid var(--navy2); } .btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px} .btn{ display:inline-flex;align-items:center;gap:7px; padding:11px 22px; font-size:12.5px;font-weight:600;font-family:var(--f-mono); text-decoration:none;cursor:pointer;border:1px solid transparent; transition:all .15s ease;letter-spacing:.05em;text-transform:uppercase; } .btn-d{background:var(--navy2);color:#F7F6F1} .btn-d:hover{background:#96090F;transform:translateY(-1px)} .btn-o{background:transparent;color:var(--navy);border:1px solid var(--navy)} .btn-o:hover{background:var(--navy);color:#F7F6F1} .hero-stats{ flex:0 1 300px;position:relative;z-index:1; display:flex;flex-direction:column; align-self:flex-start; border-top:1px solid var(--navy); } .stat{ padding:13px 2px; border-bottom:1px solid var(--line); display:flex;align-items:baseline;justify-content:space-between;gap:12px; } .stat-val{font-size:13.5px;font-weight:600;color:var(--navy);letter-spacing:-.01em;font-family:var(--f-head)} .stat-lbl{font-size:10px;color:var(--muted);font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.05em;text-align:right} /* ---------- SECTIONS ---------- */ .sec{border-bottom:1px solid var(--line)} .sec-body{padding:64px var(--pad);max-width:var(--container);margin:0 auto} .section-label{display:flex;align-items:baseline;gap:14px;margin:0 0 32px} .section-label .num{font-family:var(--f-mono);font-size:13px;color:var(--navy2);flex-shrink:0} .about-text>.section-label:first-child .num::before, .sec-body>.section-label:first-child .num::before{content:counter(sec,decimal-leading-zero)} .section-label h2,.section-label .slbl-t{ font-family:var(--f-head);font-weight:600;font-size:13px; text-transform:uppercase;letter-spacing:.12em;color:var(--navy); } .section-label .rule{flex:1;height:1px;background:var(--line)} .section-sub{font-family:var(--f-mono);font-size:11px;color:var(--navy2);text-transform:uppercase;letter-spacing:.1em;margin:0 0 32px;display:flex;align-items:baseline;gap:14px} .section-sub .rule{flex:1;height:1px;background:var(--line)} /* ---------- ABOUT ---------- */ .about-split{ border-bottom:1px solid var(--line); max-width:var(--container);margin:0 auto; padding:64px var(--pad); display:grid;grid-template-columns:1.3fr 1fr;gap:56px; } .about-text p{font-size:14.5px;color:var(--mid);line-height:1.75;font-weight:400;margin-bottom:16px} .about-text strong{color:var(--navy);font-weight:600} .about-card{ align-self:start; border-top:1px solid var(--navy); } .about-card-row{ padding:16px 2px; border-bottom:1px solid var(--line); } .about-card-t{font-size:13.5px;font-weight:600;color:var(--navy);font-family:var(--f-head)} .about-card-d{font-size:11px;color:var(--mid);margin-top:4px;font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.04em} /* ---------- LEGEND ---------- */ .legend{ display:flex;gap:28px;margin:0 0 32px;flex-wrap:wrap; font-family:var(--f-mono);font-size:10.5px;color:var(--mid); text-transform:uppercase;letter-spacing:.04em; } .legend span{display:flex;align-items:center;gap:7px} .legend .mark{font-size:9px} .legend .l-applied .mark{color:var(--navy2)} .legend .l-exposure .mark{color:var(--mid)} /* ---------- CORE STACK BAND ---------- */ .core-band{ border-top:1px solid var(--navy);border-bottom:1px solid var(--navy); padding:22px 0;margin-bottom:48px; display:grid;grid-template-columns:220px 1fr;gap:32px;align-items:baseline; } .core-band .label{ font-family:var(--f-mono);font-size:11px;color:var(--navy2); text-transform:uppercase;letter-spacing:.1em; } .core-band .label span{display:block;color:var(--mid);font-size:10.5px;margin-top:6px;letter-spacing:.03em;text-transform:none} .core-band .stack{ font-family:var(--f-head);font-weight:600;font-size:19px;letter-spacing:-.01em; display:flex;flex-wrap:wrap;row-gap:6px; } .core-band .stack .item{white-space:nowrap;padding-right:14px} .core-band .stack .item:not(:last-child)::after{ content:'/';color:var(--line);padding-left:14px;font-weight:400; } /* ---------- CATEGORY INDEX (skills, homelab services, desktop parts, projects) ---------- */ .category-index{border-top:1px solid var(--navy)} .category-row{ display:grid; grid-template-columns:48px 220px 1fr; gap:28px; padding:24px 2px; border-bottom:1px solid var(--line); align-items:baseline; transition:background .15s; } .category-row:hover{background:var(--stone3)} .category-row .cat-num{font-family:var(--f-mono);font-size:12.5px;color:var(--navy2)} .category-row .cat-name{font-family:var(--f-head);font-weight:600;font-size:16px;letter-spacing:-.01em} .category-row .cat-name span{ display:block;font-family:var(--f-mono);font-weight:400;font-size:10.5px; color:var(--mid);letter-spacing:.06em;margin-top:5px;text-transform:uppercase; } /* row variant with a description line (homelab services, desktop parts, projects) */ .detail-row{ display:grid;grid-template-columns:48px 220px 1fr;gap:28px; padding:26px 2px;border-bottom:1px solid var(--line);align-items:start; transition:background .15s; } .detail-row:hover{background:var(--stone3)} .detail-row .cat-num{font-family:var(--f-mono);font-size:12.5px;color:var(--navy2);padding-top:2px} .detail-row .row-meta{display:flex;flex-direction:column;gap:8px} .detail-row .cat-name{font-family:var(--f-head);font-weight:600;font-size:15.5px;letter-spacing:-.01em} .detail-row .status-tag{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;width:fit-content} .status-tag.live{color:var(--navy2)} .status-tag.oss{color:var(--mid)} .status-tag.dev{color:#8A5A1E} .detail-row .desc{font-family:var(--f-body);font-size:13px;color:var(--mid);line-height:1.65;margin-bottom:12px;max-width:560px} .detail-row .pr-type{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .detail-row .pr-t{font-family:var(--f-head);font-weight:600;font-size:16px;letter-spacing:-.01em;margin-bottom:8px} /* skill / spec / tag lists — slash-separated mono lists */ .skill-list{ font-family:var(--f-mono);font-size:12.5px;color:var(--navy); line-height:2.1; display:flex;flex-wrap:wrap; } .skill-list .skill{white-space:nowrap;padding-right:10px} .skill-list .skill:not(:last-child)::after{ content:'/';color:var(--line);padding-left:10px; } .skill-list .skill.applied::before{content:'\25AA';color:var(--navy2);font-size:9px;padding-right:7px} .skill-list .skill.exposure{color:var(--mid)} .skill-list .skill.exposure::before{content:'\25AB';color:var(--mid);font-size:9px;padding-right:7px} /* ---------- QUANT GRID (leaner two-col variant) ---------- */ .quant-grid{ display:grid;grid-template-columns:1fr 1fr;gap:0; border-top:1px solid var(--navy);margin-bottom:48px; } .quant-cell{padding:24px 28px 24px 2px;border-bottom:1px solid var(--line)} .quant-cell:nth-child(odd){border-right:1px solid var(--line);padding-right:28px} .quant-cell .cat-head{display:flex;align-items:baseline;gap:10px;margin-bottom:14px} .quant-cell .cat-head .cat-num{font-family:var(--f-mono);font-size:12px;color:var(--navy2)} .quant-cell .cat-head h3{font-family:var(--f-head);font-weight:600;font-size:14.5px} .quant-cell .skill-list{font-size:12px;line-height:2} .hw-table{ width:100%;border-collapse:separate;border-spacing:0;margin-bottom:32px;font-size:12.5px; border-top:1px solid var(--navy); } .hw-table th{text-align:left;font-weight:500;font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mid);padding:12px 16px 12px 2px;border-bottom:1px solid var(--navy)} .hw-table td{padding:12px 16px 12px 2px;border-bottom:1px solid var(--line);color:var(--mid);vertical-align:top;font-family:var(--f-body)} .hw-table td:first-child{color:var(--navy);font-weight:600;width:140px;min-width:100px;font-family:var(--f-head);font-size:12.5px} .hw-table tr:last-child td{border-bottom:1px solid var(--navy)} .hw-table tr:hover td{background:var(--stone3)} .note{ padding:16px 0 16px 20px; border-left:2px solid var(--navy2); } .note-t{font-size:13px;font-weight:600;color:var(--navy);margin-bottom:4px;font-family:var(--f-head)} .note-d{font-size:12.5px;color:var(--mid);line-height:1.6;font-weight:400} .gh-list{border-top:1px solid var(--navy)} .gh-item{ display:flex;align-items:center;justify-content:space-between; padding:18px 2px; border-bottom:1px solid var(--line); transition:background .15s;gap:16px; } .gh-item:hover{background:var(--stone3)} .gh-n{font-size:13px;font-weight:500;color:var(--navy);margin-bottom:3px;font-family:var(--f-mono)} .gh-d{font-size:12px;color:var(--mid);font-weight:400;font-family:var(--f-body)} .gh-r{display:flex;align-items:center;gap:14px;flex-shrink:0} .gh-lang,.gh-stars{font-size:10px;font-family:var(--f-mono);color:var(--mid);text-transform:uppercase;letter-spacing:.04em} .gh-stars{color:#8A6416} .gh-lnk{color:var(--navy2);text-decoration:none;font-size:11px;font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.04em;transition:opacity .14s} .gh-lnk:hover{opacity:.6} /* ---------- ACCORDION ---------- */ .acc{display:flex;flex-direction:column} .acc-item{border-bottom:1px solid var(--line);transition:background .18s} .acc .acc-item:first-child{border-top:1px solid var(--navy)} .acc-item.open{background:var(--stone3)} .acc-btn{ width:100%;background:none;border:none; padding:20px 2px;display:flex;align-items:flex-start; justify-content:space-between;cursor:pointer; text-align:left;font-family:inherit;gap:20px; } .acc-btn:hover .acc-t{color:var(--navy2)} .acc-l{flex:1} .acc-t{font-size:16px;font-weight:600;color:var(--navy);letter-spacing:-.01em;line-height:1.25;margin-bottom:4px;transition:color .14s;font-family:var(--f-head)} .acc-s{font-size:11px;color:var(--mid);font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.04em} .acc-r2{display:flex;align-items:center;gap:12px;flex-shrink:0} .acc-per{font-size:11px;color:var(--mid);font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.03em} .acc-chev{width:15px;height:15px;color:var(--mid);transition:transform .2s} .acc-item.open .acc-chev{transform:rotate(180deg)} .acc-body-wrap{ display:grid;grid-template-rows:0fr; transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1); } .acc-item.open .acc-body-wrap{grid-template-rows:1fr} .acc-body{min-height:0;overflow:hidden;color:var(--mid);font-size:13.5px;line-height:1.7;font-weight:400} .acc-body > *{padding-left:2px;padding-right:2px} .acc-body > p:first-child{padding-top:0} .acc-body > *:last-child{padding-bottom:24px} .acc-body ul{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:8px} .acc-body li{display:flex;gap:11px;align-items:flex-start} .acc-body li::before{content:'\2192';color:var(--navy2);flex-shrink:0;font-size:11px;margin-top:2px} .econ-tags{margin-top:14px} .langs{display:flex;flex-wrap:wrap;border-top:1px solid var(--navy);margin-top:28px} .langc{padding:16px 26px 16px 0;margin-right:26px;border-bottom:1px solid var(--line)} .langc:not(:last-child){border-right:1px solid var(--line)} .lang-n{font-size:13px;font-weight:600;color:var(--navy);margin-bottom:3px;font-family:var(--f-head)} .lang-l{font-size:10px;color:var(--mid);text-transform:uppercase;letter-spacing:.05em;font-family:var(--f-mono)} .certs{border-top:1px solid var(--navy)} .cert-row{ display:grid;grid-template-columns:44px 1fr 130px;gap:24px; padding:18px 2px;border-bottom:1px solid var(--line);align-items:center; } .cert-mark{ font-family:var(--f-mono);font-size:11px;color:var(--navy2);border:1px solid var(--navy2); width:36px;height:36px;display:flex;align-items:center;justify-content:center; } .cert-name{font-family:var(--f-body);font-weight:500;font-size:14px;color:var(--navy)} .cert-issuer{font-family:var(--f-mono);font-size:10.5px;color:var(--mid);margin-top:3px;text-transform:uppercase;letter-spacing:.04em} .cert-status{ font-family:var(--f-mono);font-size:10.5px;color:var(--mid);text-align:right; text-transform:uppercase;letter-spacing:.05em; } /* ---------- CONTACT ---------- */ .contact{border-bottom:1px solid var(--line);padding:64px var(--pad)} .contact-body{ max-width:var(--container);margin:0 auto; background:var(--navy); padding:64px 56px; position:relative;overflow:hidden; } .contact-body h2{ font-family:var(--f-head);font-weight:700; font-size:clamp(30px,3.6vw,50px);letter-spacing:-.02em; margin-bottom:14px;line-height:1.05;color:var(--stone); } .contact-body p{font-size:14.5px;color:rgba(247,246,241,.68);margin-bottom:32px;line-height:1.65;max-width:460px;font-weight:400} .contact-ctas{display:flex;gap:10px;flex-wrap:wrap} .btn-li{background:var(--navy2);color:#F7F6F1;padding:11px 22px;font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-family:var(--f-mono);text-decoration:none;transition:all .15s;word-break:break-all} .btn-li:hover{background:#96090F;transform:translateY(-1px)} .btn-gh{background:transparent;color:var(--stone);border:1px solid rgba(247,246,241,.3);padding:11px 22px;font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-family:var(--f-mono);text-decoration:none;transition:all .15s} .btn-gh:hover{background:rgba(247,246,241,.08);border-color:rgba(247,246,241,.6)} /* ---------- FOOTER ---------- */ footer{padding:24px var(--pad)} .foot{max-width:var(--container);margin:0 auto;display:flex;align-items:center;justify-content:space-between} footer p,footer a{font-size:11.5px;color:var(--muted);text-decoration:none;font-family:var(--f-mono)} footer a:hover{color:var(--navy2)} .site-shell{transition:opacity .3s ease} .site-hidden{opacity:0;visibility:hidden;height:0;overflow:hidden} /* ---------- BOOT SEQUENCE ---------- */ .boot-overlay{ position:fixed;inset:0;z-index:1000; background:#000;color:#8fe3a8; font-family:'DM Mono',monospace; cursor:pointer; display:flex;flex-direction:column;justify-content:center; padding:8vh 6vw; opacity:1;transition:opacity .38s ease; } .boot-overlay.boot-exit{opacity:0} .boot-inner{max-width:640px} .boot-lines{display:flex;flex-direction:column} .boot-line{ font-size:clamp(11px,1.6vw,13.5px); line-height:1.7;white-space:pre; color:rgba(143,227,168,.82); } .boot-greet{margin-top:22px;display:flex;flex-direction:column;gap:6px} .boot-greet-line{ font-size:clamp(13px,2vw,17px); color:#EAF7EE;font-weight:500;letter-spacing:-.005em; } .boot-prompt-stage{margin-top:22px} .boot-cmd-row{display:flex;align-items:center;gap:6px;font-size:14px} .boot-p{color:#5FCE8A} .boot-c{color:rgba(143,227,168,.4)} .boot-input{ background:transparent;border:none;outline:none; color:#EAF7EE;font:inherit;flex:1;caret-color:#8fe3a8; } .boot-input:disabled{opacity:.5} .boot-hint{color:rgba(143,227,168,.35);font-size:11.5px;margin-top:12px} .boot-hint strong{color:rgba(143,227,168,.7)} .boot-skip{ position:absolute;bottom:28px;right:32px; font-size:11px;letter-spacing:.04em;color:rgba(143,227,168,.32); } @media(max-width:700px){ .boot-overlay{padding:10vh 6vw} .boot-skip{right:20px;bottom:20px} } .boot-egg{display:flex;flex-direction:column;gap:12px;max-width:100%} .boot-ascii-scroll{max-width:100%;overflow-x:auto} .boot-ascii{white-space:pre;margin:0;line-height:1.05;font-family:'DM Mono',monospace} .boot-ascii-moria{ font-size:clamp(5px,2.1vw,8.5px); color:#7ee7ff; text-shadow:0 0 4px #7ee7ff,0 0 14px rgba(126,231,255,.55),0 0 28px rgba(126,231,255,.3); animation:boot-pulse-cyan 2.2s ease-in-out infinite; } .boot-ascii-balrog{ font-size:clamp(3px,1vw,4.8px); color:#ff7a3d; text-shadow:0 0 4px #ff7a3d,0 0 14px rgba(255,122,61,.6),0 0 30px rgba(255,80,20,.35); animation:boot-pulse-fire 1.4s ease-in-out infinite; } .boot-ascii-iddqd{ font-size:clamp(7px,2.6vw,13px); color:#ff2e4d; text-shadow:0 0 4px #ff2e4d,0 0 16px rgba(255,46,77,.65),0 0 32px rgba(255,0,30,.4); animation:boot-pulse-fire 1.1s ease-in-out infinite; } .boot-ascii-idkfa{ font-size:clamp(7px,2.6vw,13px); color:#ffb020; text-shadow:0 0 4px #ffb020,0 0 16px rgba(255,176,32,.6),0 0 32px rgba(255,140,0,.35); animation:boot-pulse-fire 1.1s ease-in-out infinite; } @keyframes boot-pulse-cyan{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}} @keyframes boot-pulse-fire{0%,100%{filter:brightness(1) hue-rotate(0deg)}50%{filter:brightness(1.4) hue-rotate(-6deg)}} .boot-egg-cap{font-size:11px;letter-spacing:.02em;font-family:'DM Mono',monospace;color:rgba(232,229,223,.45)} .boot-egg-cap-moria{color:#a9e9f7} .boot-egg-cap-balrog{color:#ffb08a} .boot-egg-cap-iddqd{color:#ff8a97} .boot-egg-cap-idkfa{color:#ffce85} /* ---------- SCROLL REVEAL ---------- */ .sec-body,.hero-main,.hero-stats,.about-text,.about-card,.contact-body{ opacity:0;transform:translateY(26px); transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1); } .sec-body.in-view,.hero-main.in-view,.hero-stats.in-view,.about-text.in-view,.about-card.in-view,.contact-body.in-view{ opacity:1;transform:translateY(0); } .hero-stats{transition-delay:.12s} .about-card{transition-delay:.08s} @media(prefers-reduced-motion:reduce){ .sec-body,.hero-main,.hero-stats,.about-text,.about-card,.contact-body{ opacity:1!important;transform:none!important;transition:none!important; } .acc-body-wrap{transition:none!important} } /* ---------- RESPONSIVE ---------- */ @media(max-width:1100px){ :root{--pad:28px} .about-split{grid-template-columns:1fr;gap:36px} .about-card{max-width:440px} } @media(max-width:820px){ .nav-links{ position:fixed;top:64px;left:0;right:0;bottom:0; background:rgba(247,246,241,.98);backdrop-filter:blur(16px); flex-direction:column;align-items:stretch;gap:2px; padding:16px; transform:translateY(-8px);opacity:0;pointer-events:none; transition:opacity .2s ease,transform .2s ease; } nav.nav-open .nav-links{opacity:1;transform:translateY(0);pointer-events:auto} .nav-links a{padding:14px 16px;font-size:14px} .nav-socials{margin:10px 0 0;padding:14px 16px 0;border-left:none;border-top:1px solid var(--line);justify-content:flex-start} .nav-burger{display:flex} .category-row,.detail-row{grid-template-columns:1fr;gap:8px} .core-band{grid-template-columns:1fr;gap:10px} .quant-grid{grid-template-columns:1fr} .quant-cell:nth-child(odd){border-right:none} .cert-row{grid-template-columns:36px 1fr} .cert-status{display:none} } @media(max-width:700px){ :root{--pad:18px} .hero-row{padding:56px var(--pad) 48px;flex-direction:column} .sec-body,.about-split,.contact{padding:40px var(--pad)} .contact-body{padding:40px 24px} }