/* ───────────────────────────────────────────────────────────── Portfolio v4 — themeable design system. All color flows from a handful of CSS variables; presets swap them wholesale, and the owner's custom colors (from the site editor) override via inline style on . Derived shades use color-mix so one text/background choice restyles the site. ───────────────────────────────────────────────────────────── */ :root{ --bg:#000; --panel:#101013; --panel2:#16161a; --ink:#f5f4f0; --accent:#E8A33D; --on-accent:#171310; --g1:#F6C670; --g2:#F0855A; --g3:#C86DD7; --paper:#F5F2EC; --paper-ink:#17140F; --card-blur:0px; --card-border:color-mix(in srgb, var(--ink) 13%, transparent); --dim: color-mix(in srgb, var(--ink) 66%, var(--bg)); --faint:color-mix(in srgb, var(--ink) 42%, var(--bg)); --hair: color-mix(in srgb, var(--ink) 13%, transparent); --paper-dim: color-mix(in srgb, var(--paper-ink) 62%, var(--paper)); --r-tile:22px; --r-pill:980px; --disp:"Sora",sans-serif; --body:"Inter",sans-serif; --ease:cubic-bezier(.16,1,.3,1); } /* ── THEME PRESETS ─────────────────────────────────────────── */ body[data-theme="glass"]{ --bg:#0A0E1A; --panel:rgba(255,255,255,.06); --panel2:rgba(255,255,255,.10); --ink:#F2F6FF; --accent:#7DD3FC; --on-accent:#06121F; --g1:#7DD3FC; --g2:#A78BFA; --g3:#F0ABFC; --paper:rgba(255,255,255,.07); --paper-ink:#F2F6FF; --card-blur:22px; --card-border:rgba(255,255,255,.16); } body[data-theme="military"]{ --bg:#191E17; --panel:#20261D; --panel2:#272E23; --ink:#E7E2D0; --accent:#C9A86A; --on-accent:#1B1A12; --g1:#C9A86A; --g2:#9AA86B; --g3:#6E8B5E; --paper:#E5DCC3; --paper-ink:#23241A; } body[data-theme="paper"]{ --bg:#F6F3EC; --panel:#FFFFFF; --panel2:#F1EDE3; --ink:#1A170F; --accent:#B0761E; --on-accent:#FFF9EE; --g1:#B0761E; --g2:#C2452F; --g3:#7C4DB8; --paper:#17140F; --paper-ink:#F5F2EC; --card-border:color-mix(in srgb, var(--ink) 14%, transparent); } body[data-theme="ocean"]{ --bg:#081120; --panel:#0E1B30; --panel2:#13233D; --ink:#E9F1FA; --accent:#6FB9E8; --on-accent:#06131F; --g1:#6FB9E8; --g2:#4C86C6; --g3:#8AD3C6; --paper:#EAF0F5; --paper-ink:#101A26; } body[data-theme="violet"]{ --bg:#0D0916; --panel:#161022; --panel2:#1D152C; --ink:#F1ECFA; --accent:#B79CFF; --on-accent:#160E28; --g1:#B79CFF; --g2:#7C5CFF; --g3:#FF8AD8; --paper:#F1ECFA; --paper-ink:#181026; } /* liquid-glass aurora backdrop */ body[data-theme="glass"]::before{ content:"";position:fixed;inset:-25%;z-index:-1;pointer-events:none; background: radial-gradient(38% 38% at 22% 28%, rgba(125,211,252,.28), transparent 62%), radial-gradient(32% 32% at 78% 18%, rgba(167,139,250,.25), transparent 62%), radial-gradient(42% 42% at 62% 84%, rgba(240,171,252,.18), transparent 62%); filter:blur(58px); animation:aurora 20s ease-in-out infinite alternate; } @keyframes aurora{to{transform:translate(-4%,3%) rotate(3deg) scale(1.1)}} body[data-theme="military"]::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(120% 90% at 50% 0%, rgba(201,168,106,.07), transparent 55%); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{background:var(--bg);color:var(--ink);font-family:var(--body); font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden; transition:background .4s ease} ::selection{background:var(--accent);color:var(--on-accent)} a{color:var(--accent);text-decoration:none} img,video{display:block;max-width:100%} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} /* ── nav ── */ .nav{position:fixed;top:0;left:0;right:0;z-index:50; background:color-mix(in srgb, var(--bg) 74%, transparent); backdrop-filter:saturate(1.6) blur(20px);-webkit-backdrop-filter:saturate(1.6) blur(20px); border-bottom:1px solid var(--hair)} .nav-inner{max-width:1040px;margin:0 auto;height:50px;padding:0 22px; display:flex;align-items:center;gap:26px} .nav-brand{color:var(--ink);font-family:var(--disp);font-size:14.5px;font-weight:600;letter-spacing:-.01em} .nav-links{display:flex;gap:24px;margin-left:auto} .nav-links a{color:var(--dim);font-size:13px;transition:color .25s} .nav-links a:hover{color:var(--ink)} @media(max-width:760px){.nav-links{display:none}.nav-inner{justify-content:space-between}} /* ── pills & links ── */ .pill{display:inline-block;background:var(--accent);color:var(--on-accent);font-size:16.5px; font-weight:600;padding:12px 26px;border-radius:var(--r-pill); transition:filter .25s,transform .25s var(--ease)} .pill:hover{filter:brightness(1.12);transform:scale(1.02)} .pill-sm{font-size:13px;padding:7px 16px;margin-left:8px} .tlink{font-size:17px;color:var(--accent);display:inline-flex;align-items:center;gap:4px;font-weight:500} .tlink span{transition:transform .25s var(--ease)} .tlink:hover span{transform:translateX(3px)} /* ── hero ── */ .hero{min-height:92vh;display:flex;flex-direction:column;justify-content:center; align-items:center;text-align:center;padding:130px 22px 60px} .kicker{font-size:15px;font-weight:600;color:var(--dim);margin-bottom:14px} .kicker.accent{color:var(--accent)} .hero h1{font-family:var(--disp);font-size:clamp(44px,8.4vw,92px);font-weight:800; letter-spacing:-.035em;line-height:1.02} .hero h1 .dot{color:var(--accent)} .hero-sub{font-family:var(--disp);font-size:clamp(28px,5vw,52px);font-weight:700; letter-spacing:-.03em;margin-top:8px} .grad{background:linear-gradient(94deg,var(--g1) 0%,var(--g2) 45%,var(--g3) 90%,var(--g1) 130%); background-size:220% 100%; -webkit-background-clip:text;background-clip:text;color:transparent; animation:shimmer 7s ease-in-out infinite alternate} @keyframes shimmer{to{background-position:90% 0}} .hero-copy{margin-top:26px;font-size:clamp(17px,2vw,20px);color:var(--dim);line-height:1.55;max-width:62ch} .cta{display:flex;align-items:center;gap:26px;margin-top:34px;flex-wrap:wrap;justify-content:center} .cta.center{justify-content:center} /* ── highlights strip ── */ .strip{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)} .strip-inner{max-width:1040px;margin:0 auto;padding:34px 22px; display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:20px;text-align:center} .strip b{display:block;font-family:var(--disp);font-size:clamp(21px,2.5vw,29px); font-weight:700;letter-spacing:-.02em} .strip span{display:block;margin-top:4px;font-size:12.5px;color:var(--faint)} @media(max-width:760px){.strip-inner{grid-template-columns:repeat(2,1fr);gap:26px 12px}} /* ── feature sections ── */ .feature{max-width:1040px;margin:0 auto;padding:120px 22px 46px;text-align:center} .feature.align-left{text-align:left} .display{font-family:var(--disp);font-size:clamp(36px,5.8vw,64px);font-weight:800; letter-spacing:-.035em;line-height:1.04} .display .sub{display:block;color:var(--faint);font-size:clamp(22px,3.4vw,38px); letter-spacing:-.025em;margin-top:8px;font-weight:700} .display.dark{color:var(--paper-ink)} .lede{max-width:660px;margin:24px auto 0;font-size:clamp(17px,2vw,20px);color:var(--dim)} .align-left .lede{margin-left:0} .lede.center{text-align:center} .rich p{margin:0 0 .6em} .rich p:last-child{margin-bottom:0} .rich ul,.rich ol{margin:.4em 0 .6em 1.3em;text-align:left} /* clean points — no boxes, no square markers */ .points{max-width:640px;margin:30px auto 0;text-align:left} .align-left .points{margin-left:0} .points p{padding:13px 2px;color:var(--dim);font-size:15.5px;line-height:1.6; border-bottom:1px solid var(--hair)} .points p:first-child{border-top:1px solid var(--hair)} /* ── text ⇢ gallery divider ── */ .tdiv{display:flex;align-items:center;gap:16px;max-width:560px;margin:52px auto 44px} .tdiv::before,.tdiv::after{content:"";flex:1;height:1px;background:var(--accent); opacity:.55;transform:scaleX(0);transition:transform 1s var(--ease) .15s} .tdiv::before{transform-origin:right} .tdiv::after{transform-origin:left} .tdiv span{color:var(--accent);font-size:12px;transform:rotate(45deg) scale(0); transition:transform .7s var(--ease) .5s} .tdiv.in::before,.tdiv.in::after{transform:scaleX(1)} .tdiv.in span{transform:rotate(0) scale(1)} /* ── gallery ── */ .gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px; grid-auto-flow:dense;text-align:left} .g-item{position:relative;border-radius:var(--r-tile);overflow:hidden; background:var(--panel);border:1px solid var(--card-border); backdrop-filter:blur(var(--card-blur));-webkit-backdrop-filter:blur(var(--card-blur)); transition:transform .5s var(--ease),box-shadow .5s var(--ease)} .g-item:hover{transform:translateY(-4px); box-shadow:0 18px 44px color-mix(in srgb, var(--bg) 30%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent)} .w2{grid-column:span 2} .g-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;cursor:zoom-in; transition:transform .7s var(--ease)} .g-photo:hover img{transform:scale(1.045)} .g-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px; font-size:13px;font-weight:600;color:#fff;pointer-events:none; background:linear-gradient(transparent, rgba(0,0,0,.66)); opacity:0;transition:opacity .4s} .g-photo:hover figcaption{opacity:1} .g-item video{width:100%;aspect-ratio:16/9;background:#000} .g-model .stl-stage,.g-model model-viewer{width:100%;aspect-ratio:16/10;min-height:300px; position:relative;background:color-mix(in srgb, var(--bg) 60%, #000);touch-action:none;display:block} .stl-stage canvas{display:block;width:100%;height:100%} .stl-hint{position:absolute;left:14px;bottom:12px;font-size:11px;letter-spacing:.04em; color:var(--faint);pointer-events:none;z-index:2} figcaption.bar{padding:12px 16px;border-top:1px solid var(--hair); font-size:13px;color:var(--dim)} .g-file{display:flex;align-items:center;gap:14px;padding:20px 22px} .f-ic{font-size:20px;color:var(--accent)} .f-name{font-size:15px;color:var(--ink);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .f-ext{font-size:11px;letter-spacing:.08em;color:var(--faint); border:1px solid var(--hair);padding:4px 9px;border-radius:8px} @media(max-width:880px){.gallery{grid-template-columns:1fr 1fr}} @media(max-width:560px){.gallery{grid-template-columns:1fr}.w2{grid-column:span 1} .feature{padding:92px 18px 26px}} .tags{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:34px} .align-left .tags{justify-content:flex-start} .tags span{font-size:12px;font-weight:500;color:var(--dim); border:1px solid var(--hair);padding:7px 14px;border-radius:var(--r-pill)} /* ── light break section ── */ .light{background:var(--paper);margin-top:120px; backdrop-filter:blur(var(--card-blur));-webkit-backdrop-filter:blur(var(--card-blur))} body[data-theme="glass"] .light{border-top:1px solid var(--card-border); border-bottom:1px solid var(--card-border)} .light-inner{max-width:1040px;margin:0 auto;padding:110px 22px;text-align:center} .skills{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 36px;margin-top:60px;text-align:left} .skills b{display:block;color:var(--paper-ink);font-family:var(--disp); font-size:16.5px;font-weight:700;letter-spacing:-.01em} .skills span{display:block;margin-top:6px;font-size:15px;color:var(--paper-dim);line-height:1.5} @media(max-width:820px){.skills{grid-template-columns:1fr 1fr}} @media(max-width:540px){.skills{grid-template-columns:1fr}} /* ── contact ── */ .contact{max-width:1040px;margin:0 auto;padding:150px 22px 140px;text-align:center} .mail{display:inline-block;margin-top:30px;font-family:var(--disp); font-size:clamp(19px,3vw,28px);font-weight:600;letter-spacing:-.015em;color:var(--ink)} .mail:hover{color:var(--accent)} .contact .cta{margin-top:36px} footer{border-top:1px solid var(--hair)} .foot-inner{max-width:1040px;margin:0 auto;padding:26px 22px 40px} footer p{font-size:12px;color:var(--faint)} /* ── lightbox ── */ #lb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center; background:rgba(0,0,0,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} #lb.open{display:flex} #lb figure{max-width:min(1200px,92vw);max-height:88vh;display:flex;flex-direction:column; animation:lbIn .35s var(--ease)} @keyframes lbIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}} #lb img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:14px} #lb figcaption{text-align:center;color:#d5d5d5;font-size:14px;padding:14px 8px 0} .lb-x{position:fixed;top:18px;right:22px;font-size:20px;background:rgba(255,255,255,.1); color:#fff;border:none;border-radius:50%;width:44px;height:44px;cursor:pointer; transition:background .25s} .lb-x:hover{background:rgba(255,255,255,.22)} .lb-nav{position:fixed;top:50%;transform:translateY(-50%);font-size:34px;line-height:1; background:rgba(255,255,255,.08);color:#fff;border:none;border-radius:50%; width:52px;height:52px;cursor:pointer;transition:background .25s} .lb-nav:hover{background:rgba(255,255,255,.2)} .lb-prev{left:18px}.lb-next{right:18px} @media(max-width:640px){.lb-nav{width:42px;height:42px;font-size:26px}} /* ── reveal ── */ .rv{opacity:0;transform:translateY(22px); transition:opacity .9s var(--ease),transform .9s var(--ease)} .rv.in{opacity:1;transform:none} .d0{transition-delay:0s}.d1{transition-delay:.08s}.d2{transition-delay:.16s} .d3{transition-delay:.24s}.d4{transition-delay:.32s} @media(prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} .grad{animation:none} body[data-theme="glass"]::before{animation:none} .tdiv::before,.tdiv::after,.tdiv span{transform:none;transition:none} }