/* ============================================================ RojakStudio — rojakstudio.com Dark tech · brand-led · black / crimson / gold ============================================================ */ :root{ --bg:#0A0A0C; --bg-2:#0F0F13; --panel:#15151C; --panel-2:#1B1B23; --inset:#0D0D11; --line:rgba(255,255,255,0.08); --line-2:rgba(255,255,255,0.14); --line-3:rgba(255,255,255,0.22); --red:#E03A2C; --red-br:#FF4B3A; --red-dim:#7a241c; --gold:#CBA052; --gold-br:#E6C079; --gold-dim:#6b5523; --green:#33D17A; --green-dim:#1f8a52; --cream:#ECE7DD; --muted:#8B8478; --muted-2:#5E594F; --muted-3:#3a362f; --mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace; --disp:'Space Grotesk',system-ui,-apple-system,sans-serif; --maxw:1180px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ background:var(--bg); color:var(--cream); font-family:var(--disp); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; } ::selection{background:var(--red);color:#fff} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} /* ---- reusable atoms ---- */ .mono{font-family:var(--mono)} .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);display:inline-flex;align-items:center;gap:11px} .eyebrow::before{content:'';width:26px;height:1px;background:var(--red)} .eyebrow.gold{color:var(--gold)}.eyebrow.gold::before{background:var(--gold)} .eyebrow.muted{color:var(--muted)}.eyebrow.muted::before{background:var(--muted-2)} .blink{animation:blink 1.05s steps(1) infinite} @keyframes blink{50%{opacity:0}} .live{display:inline-flex;align-items:center;gap:7px;color:var(--green);font-family:var(--mono);font-size:11px;letter-spacing:.1em} .live .pulse{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(51,209,122,.6);animation:pulse 1.9s infinite} @keyframes pulse{70%{box-shadow:0 0 0 7px rgba(51,209,122,0)}100%{box-shadow:0 0 0 0 rgba(51,209,122,0)}} /* reveal on scroll */ /* Fallback: if JS never marks , content stays fully visible. */ .reveal{opacity:1;transform:none} html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)} html.js .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s} /* ============================================================ NAV */ nav{ position:fixed;top:0;left:0;right:0;z-index:200; display:flex;align-items:center;justify-content:space-between; padding:14px 30px; background:rgba(10,10,12,.72); backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid transparent; transition:border-color .3s,background .3s; } nav.scrolled{border-bottom-color:var(--line);background:rgba(10,10,12,.9)} .nav-brand{display:flex;align-items:center;gap:11px} .nav-brand img{width:32px;height:32px;object-fit:contain} .nav-brand b{font-family:var(--mono);font-size:14px;letter-spacing:.12em;font-weight:500} .nav-brand b span{color:var(--red)} .nav-links{display:flex;align-items:center;gap:30px;list-style:none} .nav-links a{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .2s;position:relative} .nav-links a::after{content:'';position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:var(--red);transition:right .25s} .nav-links a:hover{color:var(--cream)} .nav-links a:hover::after{right:0} .nav-cta{font-family:var(--mono);font-size:12px;letter-spacing:.06em;padding:9px 16px;border:1px solid var(--line-2);border-radius:6px;color:var(--cream);transition:.2s} .nav-cta:hover{border-color:var(--gold);color:var(--gold)} .nav-burger{display:none} /* ============================================================ HERO */ #hero{position:relative;min-height:100vh;overflow:hidden;display:flex;align-items:center;border-bottom:1px solid var(--line)} .hero-dots{position:absolute;inset:-25%;background-image:radial-gradient(rgba(203,160,82,.20) 1.3px,transparent 1.7px);background-size:36px 36px;animation:drift 34s linear infinite;mask-image:radial-gradient(circle at 72% 42%,#000 4%,transparent 66%);pointer-events:none} @keyframes drift{from{transform:translate(0,0)}to{transform:translate(36px,36px)}} .hero-hex{position:absolute;right:-140px;top:50%;width:640px;height:640px;transform:translateY(-50%);opacity:.05;background:url('logo.png') center/contain no-repeat;animation:spin 120s linear infinite;pointer-events:none} @keyframes spin{to{transform:translateY(-50%) rotate(360deg)}} .hero-glow{position:absolute;right:0;top:30%;width:560px;height:560px;background:radial-gradient(circle,rgba(224,58,44,.10),transparent 65%);pointer-events:none} .hero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:120px 30px 90px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:56px;width:100%} .hero-badge{width:228px;height:228px;object-fit:contain;filter:drop-shadow(0 18px 46px rgba(224,58,44,.22));animation:floaty 7s ease-in-out infinite} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} .hero-h{font-size:clamp(3rem,7vw,5.6rem);font-weight:700;letter-spacing:-.03em;line-height:.96;margin:20px 0 22px} .hero-h .red{color:var(--red)}.hero-h .gold{color:var(--gold)} .hero-sub{font-size:1.12rem;color:#a39d92;line-height:1.65;max-width:520px} .hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:15px;margin-top:32px} .btn{font-family:var(--mono);font-size:13px;letter-spacing:.05em;padding:13px 22px;border-radius:7px;display:inline-flex;align-items:center;gap:9px;transition:.2s;cursor:pointer;border:1px solid transparent} .btn-red{background:var(--red);color:#fff} .btn-red:hover{background:var(--red-br);transform:translateY(-2px)} .btn-ghost{border-color:var(--line-2);color:var(--cream)} .btn-ghost:hover{border-color:var(--gold);color:var(--gold)} .hero-stats{display:flex;gap:46px;margin-top:42px;padding-top:28px;border-top:1px solid var(--line)} .hstat .v{font-family:var(--mono);font-size:30px;font-weight:700;line-height:1} .hstat .v .red{color:var(--red)}.hstat .v .gold{color:var(--gold)} .hstat .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:8px} .hero-ticker{position:absolute;left:0;right:0;bottom:0;z-index:3;border-top:1px solid var(--line);background:rgba(8,8,11,.86);overflow:hidden;white-space:nowrap} .ticker-track{display:inline-flex;gap:34px;padding:10px 0;animation:scrollx 30s linear infinite;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;will-change:transform} .ticker-track:hover{animation-play-state:paused} .ticker-track span b{color:var(--cream);font-weight:500} .ticker-track .up{color:var(--green)}.ticker-track .dn{color:var(--red-br)}.ticker-track .gd{color:var(--gold)} .ticker-track .sep{color:var(--muted-2)} @keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ============================================================ SECTION SHELL */ section{position:relative} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 30px} .sec-pad{padding:96px 0} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:54px;padding-bottom:20px;border-bottom:1px solid var(--line)} .sec-head h2{font-size:clamp(1.8rem,3.4vw,2.7rem);font-weight:700;letter-spacing:-.02em;line-height:1.05} .sec-head h2 em{font-style:italic;font-weight:500;color:var(--gold)} .sec-head .meta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap;text-align:right} /* ============================================================ MANIFESTO */ #manifesto{border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--bg),var(--bg-2))} .man-grid{display:grid;grid-template-columns:1fr 1.7fr;gap:64px;align-items:start} .man-side{position:sticky;top:110px} .man-side .num{font-family:var(--mono);font-size:13px;color:var(--gold);letter-spacing:.1em} .man-side h3{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:12px;line-height:1.7} .man-chili{margin-top:26px;display:flex;flex-direction:column;gap:12px} .man-chili .row{display:flex;align-items:center;gap:11px;font-family:var(--mono);font-size:12px;color:#a39d92} .man-chili .ic{width:24px;height:24px;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px;flex:none} .man-body h2{font-size:clamp(2rem,4vw,3.1rem);font-weight:700;line-height:1.1;letter-spacing:-.02em;margin-bottom:24px} .man-body h2 .red{color:var(--red)}.man-body h2 em{font-style:italic;font-weight:500;color:var(--gold)} .man-body p{font-size:1.06rem;color:#a39d92;margin-bottom:18px;max-width:640px} .man-body p b{color:var(--cream);font-weight:600} .tagrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px} .tag{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border:1px solid var(--line);border-radius:999px;color:#a39d92;transition:.2s} .tag:hover{border-color:var(--gold);color:var(--gold)} /* ============================================================ PROJECTS */ #projects{border-bottom:1px solid var(--line)} .proj{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center;padding:60px 0;border-bottom:1px solid var(--line)} .proj:last-child{border-bottom:none} .proj.flip .proj-info{order:2} .proj-info .pcat{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc,var(--red));display:flex;align-items:center;gap:10px} .proj-info .pnum{color:var(--muted-2)} .proj-name{font-size:1.8rem;font-weight:700;letter-spacing:-.01em;line-height:1.12;margin:14px 0 14px} .proj-desc{font-size:1.02rem;color:#a39d92;line-height:1.6;max-width:480px;margin-bottom:20px} .proj-meta{display:flex;flex-wrap:wrap;gap:22px;margin-bottom:22px} .pm{} .pm .v{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--cream)} .pm .v em{font-style:normal;color:var(--acc,var(--red))} .pm .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:3px} .proj-tags{display:flex;flex-wrap:wrap;gap:7px} .ptag{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;padding:4px 9px;background:var(--panel);border:1px solid var(--line);border-radius:5px;color:#a39d92} /* ---- mini panel (mock) shared ---- */ .mock{border:1px solid var(--line-2);border-radius:12px;overflow:hidden;background:var(--inset);box-shadow:0 30px 70px -34px rgba(0,0,0,.85);position:relative} .mock:hover{box-shadow:0 36px 90px -34px rgba(0,0,0,.95)} .mock-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#0c0c10;border-bottom:1px solid var(--line)} .mock-bar .ico{width:22px;height:22px;border-radius:5px;display:grid;place-items:center;font-family:var(--mono);font-size:10px;font-weight:700;color:#0a0a0c;background:var(--acc,var(--red))} .mock-bar .ttl{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--cream)} .mock-bar .ttl small{color:var(--muted)} .mock-bar .rt{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--muted);display:flex;align-items:center;gap:10px} .mock-body{padding:16px} .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:14px} .kpi{background:var(--panel);padding:11px 12px} .kpi .k{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px} .kpi .v{font-family:var(--mono);font-size:17px;font-weight:700} .kpi .v.g{color:var(--green)}.kpi .v.r{color:var(--red-br)}.kpi .v.gd{color:var(--gold)} .kpi .s{font-family:var(--mono);font-size:9px;color:var(--muted);margin-top:3px} .mrow{display:grid;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-family:var(--mono);font-size:11.5px} .mrow:first-child{border-top:none} .sym{display:inline-flex;align-items:center;gap:7px} .sym .b{width:20px;height:20px;border-radius:4px;display:grid;place-items:center;font-size:8.5px;font-weight:700;color:#0a0a0c} .pill{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;border-radius:4px;padding:2px 6px;border:1px solid currentColor} .pos{color:var(--green)}.neg{color:var(--red-br)}.gld{color:var(--gold)}.mut{color:var(--muted)} .spark{width:100%;height:46px;display:block} .barmini{display:flex;align-items:flex-end;gap:5px;height:64px;padding-top:6px} .barmini .col{flex:1;display:flex;flex-direction:column-reverse;gap:2px;border-radius:2px 2px 0 0;overflow:hidden} .barmini .col i{display:block} .heat{display:grid;grid-template-columns:repeat(2,1fr);gap:8px} .heat .cell{border:1px solid var(--line);border-radius:7px;padding:9px 10px;background:var(--panel)} .heat .cell .top{display:flex;justify-content:space-between;align-items:baseline} .heat .cell .px{font-family:var(--mono);font-size:13px;font-weight:700} .heat .cell .nm{font-family:var(--mono);font-size:10px;color:var(--muted)} .heat .cell .ch{font-family:var(--mono);font-size:9.5px;margin-top:2px} .heat .cell .rsi{height:3px;border-radius:2px;background:var(--line);margin-top:7px;overflow:hidden} .heat .cell .rsi i{display:block;height:100%} .barbar{height:8px;border-radius:5px;background:var(--panel-2);overflow:hidden;border:1px solid var(--line)} .barbar i{display:block;height:100%;border-radius:5px} .slbar{position:relative;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--red-dim),var(--muted-3),var(--green-dim));margin:7px 0} .slbar .dot{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;background:#fff;border:2px solid var(--inset);transform:translate(-50%,-50%);box-shadow:0 0 8px rgba(255,255,255,.4)} .chips{display:flex;flex-wrap:wrap;gap:6px} .chip{font-family:var(--mono);font-size:10px;padding:4px 9px;border-radius:999px;border:1px solid var(--line);color:#a39d92;display:inline-flex;align-items:center;gap:6px} .chip .dot{width:7px;height:7px;border-radius:50%} /* japan editorial inset */ .jp-mock .mock-body{background:#F4EFE4;color:#1A1714} .jp-h{font-family:Georgia,'Times New Roman',serif} .jp-mock .day{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid rgba(26,23,20,.12)} .jp-mock .day .n{font-family:Georgia,serif;font-size:20px;color:#1A1714} .jp-mock .day .t{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:#9a8f80} .jp-mock .day .ti{font-size:13px;font-weight:600;color:#1A1714;font-family:var(--disp)} .jp-mock .day .ar{color:#C2392E} .jp-cd{display:flex;align-items:center;gap:12px;padding:11px 0 14px} .jp-cd .ring{width:40px;height:40px;border:1px solid #C2392E;border-radius:50%;display:grid;place-items:center;color:#C2392E;flex:none} .jp-cd .big{font-family:Georgia,serif;font-size:20px;font-weight:700;color:#1A1714} .jp-cd .sm{font-family:var(--mono);font-size:9px;color:#9a8f80;letter-spacing:.06em} /* quote tool */ .q-line{display:grid;grid-template-columns:1fr auto;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-family:var(--mono);font-size:11.5px} .q-line:first-child{border-top:none} .q-line .d{color:#a39d92}.q-line .a{color:var(--cream)} .q-total{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:12px;border-top:1px dashed var(--line-2);font-family:var(--mono)} .q-total .lbl{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .q-total .amt{font-size:22px;font-weight:700;color:var(--gold)} .q-btn{margin-top:12px;width:100%;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.08em;padding:10px;border-radius:7px;background:var(--gold);color:#0a0a0c;font-weight:700} /* quote builder (line-by-line) */ .qb-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:13px} .qb-title{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--cream);line-height:1.1} .qb-title small{display:block;font-family:var(--mono);font-size:8.5px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:3px} .qb-ctls{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end} .qb-ctl{font-family:var(--mono);font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:inline-flex;flex-direction:column;align-items:center;gap:3px} .qb-ctl b{font-size:11px;color:var(--cream);background:var(--panel);border:1px solid var(--line-2);border-radius:4px;padding:3px 8px;font-weight:700;min-width:34px;text-align:center} .qb-ctl.acc b{color:var(--gold);border-color:var(--gold-dim)} .qb-cols,.qb-row{display:grid;grid-template-columns:24px 1fr 26px 32px 70px;gap:8px;align-items:center} .qb-cols{font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);padding-bottom:8px;border-bottom:1px solid var(--line)} .qb-cols span:nth-child(3),.qb-cols span:nth-child(4){text-align:center} .qb-cols span:last-child{text-align:right} .qb-cat{display:flex;align-items:center;gap:9px;margin:0 -16px;padding:7px 16px;background:#0c0c10;border-bottom:1px solid var(--gold-dim);font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream)} .qb-cat .qn{color:var(--gold);font-weight:700} .qb-row{padding:9px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px} .qb-row .qid{color:var(--muted-2);font-size:9.5px} .qb-row .qd{color:var(--cream);font-family:var(--disp);font-size:12px;font-weight:600;line-height:1.15} .qb-row .qd i{display:block;font-style:normal;font-family:var(--mono);font-size:8.5px;color:var(--muted);font-weight:400;margin-top:3px;letter-spacing:.02em} .qb-row .qq{text-align:center;color:var(--muted)} .qb-row .qm{text-align:center;color:var(--gold)} .qb-row .qa{text-align:right;color:var(--cream);font-weight:700} /* W+Design — light editorial inset + live link */ .proj-link{display:inline-flex;align-items:center;gap:9px;margin-top:20px;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--gold);width:fit-content;border-bottom:1px solid transparent;padding-bottom:2px;transition:color .2s,border-color .2s} .proj-link span{transition:transform .2s} .proj-link:hover{color:var(--gold-br);border-bottom-color:var(--gold-br)} .proj-link:hover span{transform:translate(3px,-3px)} .wd-mock{display:block} .wd-mock .mock-body{background:#F2ECE0;color:#1F1B17;padding:16px 16px 18px} .wd-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:13px;border-bottom:1px solid rgba(31,27,23,.13);margin-bottom:18px} .wd-nav b{font-family:Georgia,'Times New Roman',serif;font-size:13px;font-weight:700;color:#1F1B17} .wd-nav b span{color:#C8794F;font-weight:400} .wd-links{font-family:var(--mono);font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:#9a9082;margin-left:auto;margin-right:9px} .wd-cta{font-family:var(--mono);font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:#1F1B17;border:1px solid rgba(31,27,23,.4);border-radius:999px;padding:4px 10px;display:inline-flex;align-items:center;gap:5px} .wd-cta::before{content:'';width:5px;height:5px;border-radius:50%;background:#C8794F} .wd-eyebrow{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#9a9082;margin-bottom:13px;display:flex;align-items:center;gap:9px} .wd-eyebrow::before{content:'';width:18px;height:1px;background:#b9a98f} .wd-h{font-family:Georgia,'Times New Roman',serif;font-size:31px;line-height:1.0;font-weight:600;letter-spacing:-.01em;color:#201B17;margin-bottom:14px} .wd-h em{font-style:italic;color:#C8794F} .wd-sub{font-family:var(--disp);font-size:11.5px;line-height:1.55;color:#6f665b;max-width:300px;margin-bottom:17px} .wd-actions{display:flex;gap:8px;flex-wrap:wrap} .wd-btn{font-family:var(--mono);font-size:9px;letter-spacing:.05em;padding:8px 14px;border-radius:6px;border:1px solid rgba(31,27,23,.32);color:#1F1B17} .wd-btn.fill{background:#C8794F;border-color:#C8794F;color:#fff} .wd-mock:hover .wd-btn.fill{background:#b96c43} /* ============================================================ STACK */ #stack{background:linear-gradient(180deg,var(--bg-2),var(--bg));border-bottom:1px solid var(--line)} .stack-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden} .stack-item{background:var(--bg);padding:24px 20px;transition:background .25s;position:relative} .stack-item:hover{background:var(--panel)} .stack-item .ic{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc,var(--gold));margin-bottom:14px;display:flex;align-items:center;gap:8px} .stack-item .ic .sq{width:7px;height:7px;background:currentColor;border-radius:1px} .stack-item .nm{font-size:1.05rem;font-weight:600;margin-bottom:6px} .stack-item .ds{font-family:var(--mono);font-size:11px;color:var(--muted);line-height:1.55} .stack-item .idx{position:absolute;top:16px;right:18px;font-family:var(--mono);font-size:10px;color:var(--muted-3)} /* ============================================================ WRITING */ #writing{border-bottom:1px solid var(--line)} .write-item{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;padding:26px 4px;border-bottom:1px solid var(--line);transition:padding-left .25s,background .25s} .write-item:hover{padding-left:16px;background:linear-gradient(90deg,rgba(224,58,44,.05),transparent)} .write-item .wnum{font-family:var(--mono);font-size:12px;color:var(--muted-2)} .write-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:7px} .write-title{font-size:1.22rem;font-weight:600;line-height:1.3;letter-spacing:-.01em;transition:color .2s;max-width:640px} .write-item:hover .write-title{color:var(--gold)} .write-right{font-family:var(--mono);font-size:11px;color:var(--muted);text-align:right;white-space:nowrap;display:flex;align-items:center;gap:14px} .write-arrow{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;transition:.25s;flex:none} .write-item:hover .write-arrow{border-color:var(--gold);color:var(--gold);transform:rotate(-45deg)} /* ============================================================ CONTACT */ #contact{position:relative;overflow:hidden;border-bottom:1px solid var(--line)} .contact-dots{position:absolute;inset:-20%;background-image:radial-gradient(rgba(203,160,82,.16) 1.2px,transparent 1.6px);background-size:34px 34px;mask-image:radial-gradient(circle at 50% 60%,#000,transparent 70%);animation:drift 40s linear infinite} .contact-inner{position:relative;z-index:2;text-align:center;padding:30px 0} .contact-inner h2{font-size:clamp(2.2rem,5vw,3.8rem);font-weight:700;letter-spacing:-.02em;line-height:1.05;margin:22px 0} .contact-inner h2 .red{color:var(--red)}.contact-inner h2 .gold{color:var(--gold)} .contact-mail{display:inline-flex;align-items:center;gap:13px;font-family:var(--mono);font-size:clamp(1rem,2.4vw,1.5rem);padding:16px 28px;border:1px solid var(--line-2);border-radius:10px;margin-top:8px;transition:.25s;background:rgba(13,13,17,.6)} .contact-mail:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)} .contact-mail .at{color:var(--red)} .contact-sub{color:#a39d92;max-width:520px;margin:22px auto 0;font-size:1.02rem} /* ============================================================ FOOTER */ footer{padding:46px 30px;max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap} .foot-brand{display:flex;align-items:center;gap:12px} .foot-brand img{width:34px;height:34px;object-fit:contain} .foot-brand b{font-family:var(--mono);font-size:13px;letter-spacing:.12em} .foot-brand b span{color:var(--red)} .foot-note{font-family:var(--mono);font-size:11px;color:var(--muted);line-height:1.8;text-align:right} .foot-note b{color:var(--gold)} .foot-status{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--muted)} /* ============================================================ RESPONSIVE */ @media(max-width:980px){ .hero-inner{grid-template-columns:1fr;gap:34px;padding-top:110px} .hero-badge{width:150px;height:150px} .man-grid{grid-template-columns:1fr;gap:34px}.man-side{position:static} .proj{grid-template-columns:1fr;gap:30px} .proj.flip .proj-info{order:0} .stack-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:680px){ nav{padding:12px 18px} .nav-links{display:none} .wrap{padding:0 18px} .sec-pad{padding:66px 0} .hero-inner{padding:104px 18px 90px} .hero-stats{gap:26px;flex-wrap:wrap} .sec-head{flex-direction:column;align-items:flex-start;gap:10px} .sec-head .meta{text-align:left} .write-item{grid-template-columns:1fr auto;gap:14px} .write-item .wnum{display:none} .write-right .label{display:none} .stack-grid{grid-template-columns:1fr} .proj-meta{gap:16px} footer{flex-direction:column;text-align:center}.foot-note{text-align:center} } /* ============================================================ TWEAKS — expressive controls data-blend (lead accent) · data-heat (energy) · data-base (canvas) Defaults (sambal / standard / midnight) reproduce the original look. All transitions eased so toggling feels like a live re-mix. ============================================================ */ body{transition:background-color .5s ease} .hero-glow,.hero-dots,.hero-hex,.hero-badge,.hero-h .red,.hero-h .gold{transition:opacity .5s ease,transform .6s ease,filter .5s ease,text-shadow .5s ease} /* ---- HOUSE BLEND · rotate which spice leads the mix ---- */ /* Re-points the lead (crimson) slot; the supporting gold + green stay, so the whole identity tilts warm or herbal without losing the mix. */ body[data-blend="kaya"]{--red:#D9A93F;--red-br:#F0C766;--red-dim:#6b5523} body[data-blend="pandan"]{--red:#2FBF6E;--red-br:#54E298;--red-dim:#1f8a52} /* ---- HEAT · ambient energy of the whole room ---- */ /* MILD — dim the glow, slow the drift, settle the texture. */ body[data-heat="mild"] .hero-glow{opacity:.38} body[data-heat="mild"] .hero-dots{opacity:.6;animation-duration:58s} body[data-heat="mild"] .hero-hex{animation-duration:220s;opacity:.035} body[data-heat="mild"] .ticker-track{animation-duration:54s} body[data-heat="mild"] .hero-badge{animation-duration:11s} /* FIERY — bloom the glow, speed everything, light up the headline. */ body[data-heat="fiery"] .hero-glow{transform:scale(1.5);filter:brightness(1.9) saturate(1.3)} body[data-heat="fiery"] .hero-dots{opacity:1;animation-duration:15s} body[data-heat="fiery"] .hero-hex{animation-duration:48s;opacity:.085} body[data-heat="fiery"] .ticker-track{animation-duration:12s} body[data-heat="fiery"] .hero-badge{filter:drop-shadow(0 18px 64px rgba(224,58,44,.55));animation-duration:4.5s} body[data-heat="fiery"] .hero-h .red{text-shadow:0 0 36px rgba(255,75,58,.55)} body[data-heat="fiery"] .hero-h .gold{text-shadow:0 0 36px rgba(230,192,121,.45)} /* ---- BASE · temperature of the canvas itself ---- */ /* GRAPHITE — neutral cool slate. KOPI — warm coffee-black. */ body[data-base="graphite"]{--bg:#0D0E11;--bg-2:#121318;--panel:#181A20;--panel-2:#1F2128;--inset:#0F1014} body[data-base="kopi"]{--bg:#0C0907;--bg-2:#120D0A;--panel:#1A1410;--panel-2:#231A13;--inset:#0E0A07}