/* Tema: Adigunawan Portfolio File: main.css Deskripsi: Seluruh styling utama diambil dari prototype gdrink-prototype-v15-social-footer.html Jangan hapus variabel :root di bagian atas, dipakai di semua section. */ :root{--paper:#f1ece2;--ink:#111;--red:#e64034;--yellow:#edc94c;--blue:#6ca0b6;--muted:#88837b;--line:#1112;--ease:cubic-bezier(.16,1,.3,1);--header-h:104px} *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:var(--header-h)}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif;overflow-x:hidden}body.lock{overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;border:0;background:none;cursor:pointer} .top{position:fixed;inset:0 0 auto;height:var(--header-h);padding:0 clamp(22px,5vw,72px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;z-index:50;color:var(--ink);background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.16));backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(17,17,17,.06),0 10px 30px rgba(17,17,17,.05)}.brandmark{justify-self:start;font:700 30px/1 "Space Grotesk";letter-spacing:-.06em}.brandmark small{display:block;font:500 8px/1 "DM Sans";letter-spacing:.18em;margin-top:6px}.menubtn{justify-self:end;display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.15em;color:inherit}.menubtn-icon{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:20px;height:14px}.menubtn-icon span{display:block;height:2px;width:100%;background:currentColor;border-radius:2px;transition:.3s var(--ease)}.menubtn[aria-expanded=true] .menubtn-icon span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}.menubtn[aria-expanded=true] .menubtn-icon span:nth-child(2){transform:translateY(-5.5px) rotate(-45deg)} .top-nav{grid-column:2;justify-self:center;display:flex;align-items:center;gap:8px} .top-nav a{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:11px 20px;border-radius:100px;transition:.3s var(--ease)} #adigunawan-bgmusic{position:fixed;width:1px;height:1px;left:-9999px;top:-9999px;overflow:hidden;opacity:0;pointer-events:none} .top-nav a:hover{background:rgba(17,17,17,.08)}.top-nav a.active,.top-nav a:hover.active,.top-nav .current-menu-item>a,.top-nav .current_page_item>a{background:#111;color:#fff} .footer-brand{font-size:20px;letter-spacing:-.06em} .menu{position:fixed;inset:0;background:var(--red);z-index:40;padding:13vw 8vw;display:flex;flex-direction:column;justify-content:center;clip-path:inset(0 0 100%);transition:clip-path .75s var(--ease)}.menu.open{clip-path:inset(0)}.menu a{font:700 clamp(44px,7vw,105px)/.87 "Space Grotesk";letter-spacing:-.07em;transform:translateY(30px);opacity:0;transition:.6s var(--ease)}.menu.open a{transform:none;opacity:1}.menu.open a:nth-child(1){transition-delay:.05s}.menu.open a:nth-child(2){transition-delay:.1s}.menu.open a:nth-child(3){transition-delay:.15s}.menu.open a:nth-child(4){transition-delay:.2s}.menu.open a:nth-child(5){transition-delay:.25s}.menu.open a:nth-child(6){transition-delay:.3s}.menu-meta{font-size:10px;font-weight:700;letter-spacing:.12em;margin-top:45px} .hero{height:100svh;min-height:680px;background:#0e0e0e;color:var(--paper);position:relative;overflow:hidden;display:flex;align-items:center;padding:12vw 8vw}.hero-copy{position:relative;z-index:5;max-width:850px}.eyebrow,.label{font-size:10px;font-weight:700;letter-spacing:.2em}.hero h1{font:700 clamp(100px,18vw,280px)/.68 "Space Grotesk";letter-spacing:-.11em;margin:32px 0 42px}.hero h1 span{display:block;font-size:.255em;line-height:1;letter-spacing:-.035em;margin-left:.13em}.hero p{font-size:16px;line-height:1.45;max-width:460px}.cta{display:inline-flex;align-items:center;gap:16px;border:1px solid currentColor;border-radius:100px;padding:17px 25px;font-size:10px;font-weight:700;letter-spacing:.12em;margin-top:24px;transition:.4s var(--ease)}.cta:hover{background:var(--paper);color:#111;transform:translateY(-4px)}.orb{position:absolute;border-radius:50%;will-change:transform}.orb1{width:62vw;height:62vw;right:-19vw;top:3vh;background:radial-gradient(circle at 35% 34%,#ff7964,#e22129 44%,#68151c 68%,transparent 69%);animation:float 8s ease-in-out infinite alternate}.orb2{width:24vw;height:24vw;right:23vw;bottom:-8vw;background:var(--yellow);mix-blend-mode:screen;animation:float2 7s ease-in-out infinite alternate}@keyframes float{to{transform:translate(-2vw,2vh) scale(1.04)}}@keyframes float2{to{transform:translate(2vw,-3vh) scale(.92)}}.hero-stamp{position:absolute;right:11%;top:17%;width:170px;height:170px;border:1px solid #fff5;border-radius:50%;display:grid;place-items:center;text-align:center;transform:rotate(-12deg);z-index:3;animation:stamp 5s ease-in-out infinite alternate}.hero-stamp strong{font:700 58px/.8 "Space Grotesk";letter-spacing:-.1em}.hero-stamp span{display:block;font-size:7px;letter-spacing:.2em;margin-top:13px}@keyframes stamp{to{transform:rotate(-5deg) translateY(12px)}}.scroll{position:absolute;left:8vw;bottom:28px;font-size:9px;letter-spacing:.2em;z-index:4}.scroll:after{content:"";display:block;width:1px;height:48px;background:#fff5;margin:12px auto 0;animation:pulse 1.8s infinite}@keyframes pulse{50%{transform:scaleY(1);opacity:1}0%,100%{transform:scaleY(.25);opacity:.3}} section{padding:clamp(90px,12vw,180px) clamp(22px,8vw,140px)}.about{display:grid;grid-template-columns:1fr 2fr;gap:5vw}.about h2,.section-title{font:700 clamp(58px,9vw,145px)/.82 "Space Grotesk";letter-spacing:-.075em;margin:0}.red{color:var(--red)}.about-copy{max-width:900px}.about-copy>p{font-size:clamp(20px,2.1vw,28px);line-height:1.35;max-width:760px;margin:0 0 42px}.pill{display:inline-block;border:1px solid #111;border-radius:100px;padding:14px 21px;font-size:10px;font-weight:700;letter-spacing:.1em;transition:.3s}.pill:hover{background:#111;color:var(--paper)} .services{background:#111;color:var(--paper)}.intro{display:flex;justify-content:space-between;align-items:end;gap:30px;margin:60px 0}.intro p{max-width:310px;color:#aaa;line-height:1.45}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}.service{min-height:310px;padding:28px;background:#181818;border:1px solid #fff08;display:flex;flex-direction:column;justify-content:space-between;transition:.5s var(--ease)}.service:hover{background:var(--red);color:#111;transform:translateY(-7px)}.service span{font-size:9px;letter-spacing:.15em;color:#aaa}.service:hover span{color:#111}.service h3{font:700 clamp(28px,3.2vw,48px)/.9 "Space Grotesk";letter-spacing:-.05em;margin:0}.service p{font-size:13px;line-height:1.4;max-width:310px;margin:0} .experience{background:var(--paper)}.experience-list{margin-top:65px;border-top:1px solid var(--line)}.job{display:grid;grid-template-columns:20% 1fr;gap:25px;padding:32px 0;border-bottom:1px solid var(--line);transition:.4s var(--ease)}.job:hover{padding-left:16px;background:#11105}.job-year{font-size:10px;font-weight:700;letter-spacing:.1em}.job h3{font:700 clamp(29px,3.6vw,54px)/.9 "Space Grotesk";letter-spacing:-.05em;margin:0 0 10px}.job-company{color:var(--red);font-size:17px;margin-bottom:6px}.job-date{font-size:10px;color:var(--muted)} .skills-interactive{background:#e5ded1;position:relative;overflow:hidden}.skills-interactive:before{content:"";position:absolute;width:52vw;height:52vw;right:-26vw;top:-18vw;border:1px solid #1111;border-radius:50%;box-shadow:0 0 0 70px #11104,0 0 0 140px #11103;pointer-events:none}.skills-intro{display:flex;justify-content:space-between;align-items:end;gap:30px;margin:60px 0 54px}.skills-intro p{max-width:330px;margin:0;line-height:1.5;color:#5e5a54}.skills-explorer{display:grid;grid-template-columns:minmax(420px,.85fr) minmax(420px,1.15fr);gap:34px;min-height:520px;position:relative}.skill-list{display:flex;flex-direction:column;border-top:1px solid #1113;position:relative;z-index:3}.skill-item{min-height:61px;display:grid;grid-template-columns:38px 1fr 30px;align-items:center;gap:12px;padding:0 15px;border-bottom:1px solid #1113;text-align:left;color:#111;transition:.45s var(--ease)}.skill-item span{font-size:9px;font-weight:700;letter-spacing:.12em;opacity:.42}.skill-item strong{font:600 clamp(20px,2.1vw,29px)/1 "Space Grotesk";letter-spacing:-.04em}.skill-item i{font-style:normal;font-size:18px;opacity:.3;transition:.35s var(--ease)}.skill-item:hover,.skill-item.active{background:#111;color:#f1ece2;padding-left:25px}.skill-item:hover i,.skill-item.active i{opacity:1;transform:translate(3px,-3px)}.skill-orbit{position:absolute;left:-4vw;top:25px;width:470px;height:470px;border-radius:50%;display:grid;place-items:center;pointer-events:none}.orbit{position:absolute;border:1px solid #1112;border-radius:50%}.orbit-a{inset:40px;animation:skillSpin 18s linear infinite}.orbit-b{inset:105px;animation:skillSpin 13s linear infinite reverse}.orbit-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--red)}.dot-1{top:54px;left:95px;animation:skillFloat 4s ease-in-out infinite}.dot-2{right:74px;top:210px;background:#111;animation:skillFloat 5s .4s ease-in-out infinite}.dot-3{bottom:85px;left:170px;background:var(--yellow);animation:skillFloat 4.5s .8s ease-in-out infinite}.skill-detail{min-height:470px;background:#111;color:#f1ece2;padding:48px;position:relative;overflow:hidden;display:flex;align-items:center;border-radius:0 28px 28px 28px;box-shadow:18px 18px 0 rgba(17,17,17,.08)}.skill-detail:before{content:"";position:absolute;width:260px;height:260px;right:-105px;top:-105px;border:1px solid #fff2;border-radius:50%;box-shadow:0 0 0 30px #fff1,0 0 0 62px #fff08}.skill-detail:after{content:"";position:absolute;inset:auto -80px -120px auto;width:310px;height:310px;border-radius:50%;background:var(--red);opacity:.9;mix-blend-mode:screen}.skill-detail-inner{position:relative;z-index:2;transition:.35s var(--ease)}.skill-detail-inner.swap{opacity:0;transform:translateY(18px)}.skill-detail-kicker{font-size:9px;font-weight:700;letter-spacing:.18em;opacity:.5;margin-bottom:25px}.skill-detail h3{font:700 clamp(46px,5.4vw,78px)/.86 "Space Grotesk";letter-spacing:-.07em;margin:0 0 24px;max-width:620px}.skill-detail p{max-width:520px;font-size:15px;line-height:1.55;color:#aaa;margin:0 0 28px}.skill-detail-tags{display:flex;flex-wrap:wrap;gap:8px}.skill-detail-tags span{border:1px solid #fff3;border-radius:999px;padding:9px 13px;font-size:9px;font-weight:700;letter-spacing:.05em}.skill-detail-count{position:absolute;right:0;bottom:-5px;font:700 11px/1 "Space Grotesk";opacity:.35}.skill-detail-cursor{position:absolute;right:32px;bottom:28px;z-index:4;font-size:8px;font-weight:700;letter-spacing:.15em;opacity:.5}.skills-hint{margin-top:24px;font-size:9px;font-weight:700;letter-spacing:.14em;opacity:.4}@keyframes skillSpin{to{transform:rotate(360deg)}}@keyframes skillFloat{50%{transform:translate(12px,-10px) scale(1.35)}}@media(max-width:900px){.skills-intro{display:block}.skills-intro p{margin-top:28px}.skills-explorer{grid-template-columns:1fr;min-height:0}.skill-orbit{display:none}.skill-detail{min-height:390px}}@media(max-width:600px){.skill-item{min-height:58px;padding:0 10px}.skill-item:hover,.skill-item.active{padding-left:16px}.skill-item strong{font-size:19px}.skill-detail{padding:34px 28px;border-radius:0 22px 22px 22px}.skill-detail h3{font-size:44px}} .work{background:#e5ded1}.work-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin:60px 0}.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.work-card{min-height:540px;display:flex;flex-direction:column}.work-art{height:380px;padding:28px;display:flex;align-items:end;font:700 clamp(44px,4.8vw,72px)/.82 "Space Grotesk";letter-spacing:-.065em;transition:.6s var(--ease)}.work-card:hover .work-art{transform:scale(.97)}.art-red{background:var(--red)}.art-black{background:#111;color:var(--paper)}.art-yellow{background:var(--yellow)}.work-meta{font-size:9px;letter-spacing:.15em;margin:18px 0 9px;font-weight:700}.work-card h3{font:700 26px/1 "Space Grotesk";margin:0 0 10px}.work-card p{font-size:13px;line-height:1.4;margin:0;max-width:390px} .projects-strip{ background:#111; color:var(--paper); padding:clamp(70px,9vw,120px) 0; overflow:hidden; position:relative; } .projects-head{ padding:0 clamp(22px,8vw,140px); display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:48px; } .projects-head p{ max-width:340px; margin:0; color:#999; font-size:13px; line-height:1.5; } .project-marquee{ width:100%; overflow:hidden; border-top:1px solid #fff1; border-bottom:1px solid #fff1; padding:22px 0; transform:rotate(-1deg) scale(1.02); } .project-track{ display:flex; width:max-content; animation:projectFlow 24s linear infinite; } .project-marquee:hover .project-track{ animation-play-state:paused; } .project-logo{ width:180px; height:112px; margin-right:12px; padding:18px; flex:0 0 180px; display:flex; flex-direction:column; justify-content:space-between; background:#181818; border:1px solid #fff1; transition:.4s var(--ease); } .project-logo:hover{ background:var(--red); color:#111; transform:translateY(-7px) rotate(2deg); } .project-logo span{ font:700 39px/.8 "Space Grotesk"; letter-spacing:-.08em; } .project-logo.has-logo{justify-content:center;align-items:flex-start;gap:10px} .project-logo.has-logo img{display:block;max-width:100%;max-height:58px;width:auto;height:auto;object-fit:contain} .project-logo.has-logo small{margin-top:auto} .project-logo small{ font-size:8px; font-weight:700; letter-spacing:.14em; opacity:.55; } .project-logo-a{border-radius:28px 5px 5px 5px} .project-logo-b{border-radius:5px 28px 5px 5px} .project-logo-c{border-radius:5px 5px 28px 5px} .project-logo-d{border-radius:5px 5px 5px 28px} .project-logo-e{border-radius:50%} .project-logo-f{border-radius:5px} .projects-note{ padding:30px clamp(22px,8vw,140px) 0; font-size:8px; font-weight:700; letter-spacing:.16em; color:#666; } @keyframes projectFlow{ from{transform:translateX(0)} to{transform:translateX(-50%)} } @media(max-width:700px){ .projects-head{display:block} .projects-head p{margin-top:22px} .project-logo{width:150px;height:96px;flex-basis:150px} .project-logo span{font-size:32px} } .partners-strip{ background:var(--paper); color:#111; padding:clamp(80px,10vw,140px) 0; overflow:hidden; position:relative; } .partners-head{ padding:0 clamp(22px,8vw,140px); display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:52px; } .partners-head p{ max-width:340px; margin:0; color:#68645d; font-size:13px; line-height:1.5; } .partner-marquee{ width:100%; overflow:hidden; border-top:1px solid #1112; border-bottom:1px solid #1112; padding:14px 0; } .partner-marquee + .partner-marquee{ border-top:0; } .partner-track{ display:flex; width:max-content; } .partner-marquee-forward .partner-track{ animation:partnerFlowForward 32s linear infinite; } .partner-marquee-reverse .partner-track{ animation:partnerFlowReverse 36s linear infinite; } .partner-marquee:hover .partner-track{ animation-play-state:paused; } .partner-logo{ width:190px; height:88px; flex:0 0 190px; margin-right:10px; padding:16px 18px; background:#e9e3d8; border:1px solid #1111; display:flex; flex-direction:column; justify-content:space-between; transition:.4s var(--ease); } .partner-logo:hover{ background:#111; color:var(--paper); transform:translateY(-5px); } .partner-logo span{ font:700 12px/1 "Space Grotesk"; opacity:.35; } .partner-logo strong{ font:700 20px/.9 "Space Grotesk"; letter-spacing:-.045em; } .partner-logo.has-logo{justify-content:center;align-items:flex-start;gap:8px} .partner-logo.has-logo img{display:block;max-width:100%;max-height:44px;width:auto;height:auto;object-fit:contain} .partner-logo.has-logo small{margin-top:auto} .partner-logo small{ font-size:7px; font-weight:700; letter-spacing:.14em; opacity:.45; } .partners-note{ padding:30px clamp(22px,8vw,140px) 0; font-size:8px; font-weight:700; letter-spacing:.16em; color:#77716a; } @keyframes partnerFlowForward{ from{transform:translateX(0)} to{transform:translateX(-50%)} } @keyframes partnerFlowReverse{ from{transform:translateX(-50%)} to{transform:translateX(0)} } @media(max-width:700px){ .partners-head{display:block} .partners-head p{margin-top:22px} .partner-logo{width:155px;height:80px;flex-basis:155px} .partner-logo strong{font-size:17px} } .certs{background:#111;color:var(--paper)}.cert-list{border-top:1px solid #fff2;margin-top:60px}.cert{display:grid;grid-template-columns:60px 1fr;gap:20px;padding:28px 0;border-bottom:1px solid #fff2}.cert>span{font-size:9px;color:#888}.cert h3{font:700 clamp(24px,3vw,42px)/.95 "Space Grotesk";margin:0 0 9px;letter-spacing:-.04em}.cert p{margin:0;color:#999;font-size:13px} .contact{background:var(--red);min-height:88vh;position:relative;overflow:hidden}.contact h2{font:700 clamp(70px,11vw,175px)/.76 "Space Grotesk";letter-spacing:-.08em;margin:38px 0}.contact>p:not(.eyebrow){max-width:450px;font-size:19px;line-height:1.4}.contact .cta{border-color:#111}.contact .cta:hover{background:#111;color:var(--red)}.shape{position:absolute;width:45vw;height:45vw;border-radius:50%;border:70px solid var(--yellow);right:-15vw;bottom:-20vw;opacity:.8;animation:spin 18s linear infinite}@keyframes spin{to{transform:rotate(360deg)}} footer{background:#111;color:var(--paper);padding:70px 8vw;display:grid;grid-template-columns:1fr 2fr 1fr;gap:30px}footer nav{display:flex;flex-direction:column;gap:9px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em}footer .social{font-size:10px;font-weight:700}footer small{grid-column:1/-1;color:#777;margin-top:45px} .reveal{opacity:0;transform:translateY(35px);transition:.9s var(--ease)}.reveal.in{opacity:1;transform:none} @media(max-width:800px){ .about{grid-template-columns:1fr}.service-grid,.work-grid{grid-template-columns:1fr}.skill-grid{grid-template-columns:repeat(2,1fr)}.job{grid-template-columns:1fr;gap:10px}.hero{padding:18vw 6vw}.hero h1{font-size:clamp(100px,26vw,180px)}.hero-stamp{width:120px;height:120px;right:7%;top:13%}.hero-stamp strong{font-size:44px}.intro,.work-head{display:block}.intro p{margin-top:28px}.work-art{height:310px}footer{grid-template-columns:1fr}.menu{padding:20vw 8vw}} /* === 02 / WHAT I DO — FILE EXPLORER === */ .what-files{ background:#111; color:#f1ece2; min-height:100vh; padding:clamp(90px,10vw,140px) clamp(22px,5vw,72px); position:relative; overflow:hidden; } .what-files .section-label{font-size:10px;font-weight:700;letter-spacing:.2em;margin-bottom:34px} .what-files-wrap{ display:grid; grid-template-columns:minmax(420px,1.05fr) minmax(420px,.95fr); gap:28px; align-items:center; max-width:1180px; margin:0 auto; } .file-stack{ position:relative; padding-top:18px; padding-left:0; filter:drop-shadow(0 18px 24px rgba(14,30,40,.10)); } .what-file{ --file:#3158d8; height:66px; position:relative; display:flex; align-items:center; gap:22px; padding:0 28px; margin:0 0 0 0; background:var(--file); color:#fff; border:0; width:100%; text-align:left; cursor:pointer; transition:transform .45s var(--ease),filter .35s ease,box-shadow .35s ease; z-index:var(--z); border-radius:0; } .what-file:first-child{border-radius:0 14px 0 0} .what-file:last-child{border-radius:0 0 14px 14px} .what-file:before{ content:""; position:absolute; left:0; top:-34px; width:100px; height:34px; background:var(--file); border-radius:24px 24px 0 0; } .what-file:after{ content:""; position:absolute; left:0; top:0; width:100px; height:100%; background:var(--file); border-radius:0 0 24px 0; transform:translateX(0); z-index:-1; } .what-file + .what-file{margin-top:0} .what-file:hover{ transform:translateX(10px); filter:brightness(1.05); } .what-file.active{ transform:translateX(10px); box-shadow:18px 8px 0 rgba(14,30,40,.10); z-index:30; } .file-no{ width:38px; flex:0 0 38px; font-size:10px; font-weight:700; letter-spacing:.12em; opacity:.8; } .file-name{ font:500 clamp(22px,2.35vw,30px)/1 "Georgia",serif; letter-spacing:-.035em; white-space:nowrap; } .file-meta{ margin-left:auto; display:flex; align-items:center; gap:12px; font-size:9px; font-weight:700; letter-spacing:.05em; opacity:.85; white-space:nowrap; } .file-arrow{font-size:17px;line-height:1;transition:transform .3s ease} .what-file.active .file-arrow{transform:translate(3px,-3px)} .file-blue{--file:#3658d6} .file-teal{--file:#148f8a} .file-purple{--file:#70227b} .file-red{--file:#ea272d} .file-yellow{--file:#f0cd22;color:#111} .file-black{--file:#fff;color:#111} .what-sheet{ min-height:360px; border-radius:30px; background:var(--sheet-file); color:var(--sheet-text); padding:54px 48px; position:relative; overflow:hidden; box-shadow:0 24px 45px rgba(0,0,0,.22); display:flex; flex-direction:column; justify-content:center; } .what-sheet:before{ content:""; position:absolute; width:240px;height:240px; right:-100px;bottom:-120px; border:1px solid color-mix(in srgb,var(--sheet-text) 16%,transparent); border-radius:50%; box-shadow:0 0 0 28px color-mix(in srgb,var(--sheet-text) 3.5%,transparent),0 0 0 58px color-mix(in srgb,var(--sheet-text) 2.5%,transparent); } .what-sheet:after{ content:"↗"; position:absolute; right:38px; top:32px; font-size:24px; opacity:.7; } .sheet-content{ position:relative; z-index:2; transition:opacity .2s ease,transform .45s var(--ease); } .sheet-content.swap-out{opacity:0;transform:translateY(14px)} .sheet-kicker{ font-size:10px; font-weight:700; letter-spacing:.18em; opacity:.8; margin-bottom:26px; } .sheet-title{ font:700 clamp(42px,5vw,66px)/.9 "Space Grotesk"; letter-spacing:-.065em; margin:0 0 20px; } .sheet-desc{ font-size:15px; line-height:1.55; max-width:520px; margin:0 0 30px; opacity:.88; } .sheet-tags{display:flex;flex-wrap:wrap;gap:9px} .sheet-tag{ border:1px solid color-mix(in srgb,var(--sheet-text) 35%,transparent); border-radius:999px; padding:9px 13px; font-size:9px; font-weight:700; letter-spacing:.04em; } .sheet-index{ position:absolute; right:48px; bottom:38px; font:700 12px/1 "Space Grotesk"; opacity:.55; } .what-files-note{ max-width:1180px; margin:28px auto 0; padding-left:2px; font-size:9px; font-weight:700; letter-spacing:.12em; opacity:.48; } @media(max-width:900px){ .what-files-wrap{grid-template-columns:1fr;gap:46px} .what-sheet{min-height:390px} } @media(max-width:600px){ .what-files{padding:82px 18px 90px} .what-file{height:60px;padding:0 18px;gap:12px} .what-file:before{width:82px;height:28px;top:-28px} .file-no{width:28px;flex-basis:28px} .file-name{font-size:21px} .file-meta{display:none} .what-file.active,.what-file:hover{transform:translateX(5px)} .what-sheet{border-radius:22px;padding:42px 28px;min-height:400px} .sheet-title{font-size:43px} .sheet-index{right:28px;bottom:26px} } .what-files-intro{ max-width:1180px; margin:0 auto 58px; display:flex; justify-content:space-between; align-items:end; gap:30px; } .what-files-intro h2{margin:0} .what-files-intro p{ max-width:310px; color:#aaa; line-height:1.45; margin:0; } @media(max-width:900px){ .what-files-intro{display:block} .what-files-intro p{margin-top:28px} } /* === MOBILE RESPONSIVE REFINEMENT === */ @media (max-width: 800px){ :root{--header-h:96px} body{min-width:0} /* Header mobile: bar oval mengambang, tidak menyentuh tepi kiri/kanan layar */ .top{ inset:16px 18px auto 18px; height:58px; padding:0 22px; border-radius:999px; display:flex; justify-content:space-between; background:rgba(241,236,226,.65); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); color:var(--ink); box-shadow:0 12px 30px rgba(17,17,17,.12); border:1px solid rgba(17,17,17,.08); } .brandmark{font-size:25px} .brandmark small{font-size:7px;margin-top:5px} /* Logo disembunyikan di mobile — hanya Profile / Portofolio / Menu yang tampil di dalam oval */ .top .brandmark{display:none} .top-nav{ display:flex; align-items:center; gap:16px; margin-left:0; margin-right:0; } .top-nav a{ font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; padding:9px 14px; } .top-nav a:nth-child(1),.top-nav a:nth-child(2){display:inline-flex} .top-nav a:nth-child(3){display:none} /* Contact tetap ada di menu overlay penuh */ .top-nav a:hover{background:rgba(17,17,17,.08)} .top-nav a.active,.top-nav a:hover.active{background:#111;color:#fff} .menubtn{ display:inline-flex; align-items:center; gap:0; padding-left:16px; margin-left:16px; } .menubtn-label{display:none} .menubtn-icon{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:18px;height:13px} .menubtn-icon span{display:block;height:2px;width:100%;background:currentColor;border-radius:2px;transition:.3s var(--ease)} .menubtn[aria-expanded=true] .menubtn-icon span:nth-child(1){transform:translateY(5.5px) rotate(45deg)} .menubtn[aria-expanded=true] .menubtn-icon span:nth-child(2){transform:translateY(-5.5px) rotate(-45deg)} .menu{ padding:92px 22px 34px; overflow-y:auto; justify-content:flex-start; } .menu nav{display:flex;flex-direction:column;gap:4px} .menu a{ font-size:clamp(42px,13vw,68px); line-height:.88; } .menu-meta{margin-top:32px;line-height:1.5} .hero{ min-height:100svh; height:auto; padding:104px 22px 72px; align-items:flex-start; } .hero-copy{width:100%;max-width:100%;padding-top:8vh} .hero .eyebrow{font-size:8px;line-height:1.5;max-width:240px} .hero h1{ font-size:clamp(88px,25vw,150px); line-height:.69; margin:26px 0 34px; max-width:100%; } .hero h1 span{font-size:.27em;margin-left:.1em} .hero p{font-size:14px;max-width:330px} .hero .cta{max-width:100%;padding:15px 20px;margin-top:20px} .hero-stamp{ width:92px;height:92px; right:18px;top:96px; } .hero-stamp strong{font-size:34px} .hero-stamp span{font-size:5px;margin-top:8px} .scroll{display:none} .orb1{width:92vw;height:92vw;right:-38vw;top:20vh} .orb2{width:34vw;height:34vw;right:12vw;bottom:5vh} section{padding:76px 22px} .about{gap:32px} .about h2,.section-title{font-size:clamp(52px,15vw,78px)} .about-copy>p{font-size:18px;line-height:1.4;margin-bottom:28px} .what-files{ min-height:0; padding:78px 18px 84px; } .what-files-intro{margin-bottom:42px} .what-files-intro h2{font-size:clamp(52px,15vw,78px)} .what-files-wrap{gap:30px} .file-stack{padding-top:12px} .what-file{ height:58px; padding:0 14px; gap:10px; } .what-file:before{width:76px;height:25px;top:-25px} .what-file:first-child:before{border-radius:18px 18px 0 0} .file-no{width:24px;flex-basis:24px;font-size:8px} .file-name{ font-size:clamp(17px,5.2vw,21px); white-space:normal; line-height:1.05; } .what-file.active,.what-file:hover{transform:translateX(4px)} .what-sheet{ min-height:360px; padding:34px 24px; border-radius:20px; } .sheet-title{font-size:clamp(38px,11vw,52px)} .sheet-desc{font-size:14px} .sheet-index{right:24px;bottom:22px} .what-files-note{line-height:1.5} .experience-list{margin-top:42px} .job{padding:25px 0;gap:8px} .job h3{font-size:clamp(28px,8vw,42px);line-height:.95} .job-company{font-size:15px;line-height:1.3} .job-date{font-size:9px} .skills-intro{margin:42px 0 34px} .skills-explorer{gap:22px} .skill-list{width:100%} .skill-item{ min-height:56px; grid-template-columns:28px minmax(0,1fr) 24px; padding:0 10px; } .skill-item strong{font-size:18px;min-width:0} .skill-item:hover,.skill-item.active{padding-left:14px} .skill-detail{ min-height:360px; padding:32px 24px; border-radius:0 20px 20px 20px; } .skill-detail h3{font-size:clamp(40px,11vw,50px)} .skill-detail p{font-size:14px} .skill-detail-cursor{right:24px;bottom:22px} .skills-hint{line-height:1.5} .work{padding-left:22px;padding-right:22px} .work-head{margin:42px 0 36px} .work-head .pill{margin-top:24px} .work-card{min-height:0;margin-bottom:42px} .work-art{height:min(72vw,310px);min-height:230px;padding:22px;font-size:clamp(40px,12vw,58px)} .work-card h3{font-size:24px;line-height:1.02} .work-card p{font-size:13px} .projects-strip,.partners-strip{padding-top:76px;padding-bottom:82px} .projects-head,.partners-head{ padding:0 22px; margin-bottom:36px; } .projects-head p,.partners-head p{font-size:12px;margin-top:18px} .project-marquee{padding:18px 0} .project-logo{width:138px;height:88px;flex-basis:138px;margin-right:8px;padding:15px} .project-logo span{font-size:29px} .project-logo small{font-size:7px} .partner-marquee{padding:12px 0} .partner-logo{width:150px;height:76px;flex-basis:150px;margin-right:8px;padding:14px 15px} .partner-logo strong{font-size:16px} .partners-note,.projects-note{padding:26px 22px 0;line-height:1.5} .certs{padding-top:76px;padding-bottom:76px} .cert-list{margin-top:42px} .cert{grid-template-columns:30px minmax(0,1fr);gap:12px;padding:24px 0} .cert h3{font-size:clamp(22px,6.4vw,32px)} .cert p{font-size:12px;line-height:1.45;overflow-wrap:anywhere} .contact{ min-height:0; padding:78px 22px 92px; } .contact h2{ font-size:clamp(58px,16vw,92px); line-height:.78; margin:30px 0 34px; max-width:100%; } .contact>p:not(.eyebrow){font-size:16px;max-width:330px} .contact .cta{ max-width:100%; white-space:normal; overflow-wrap:anywhere; text-align:center; justify-content:center; font-size:9px; padding:15px 18px; } .shape{ width:70vw;height:70vw; border-width:36px; right:-30vw;bottom:-28vw; } footer{ padding:52px 22px 28px; grid-template-columns:1fr; gap:30px; } footer nav{gap:8px} footer small{margin-top:18px;line-height:1.5} } @media (max-width:380px){ :root{--header-h:88px} .top{inset:12px 12px auto 12px;padding:0 16px;height:52px} .top-nav{gap:12px} .top-nav a{font-size:9.5px} .top-nav a.active{padding:7px 13px} .menubtn{padding-left:12px;margin-left:12px} .menubtn-icon{width:16px;height:12px;gap:4px} .hero{padding-left:18px;padding-right:18px} .hero-copy{padding-top:7vh} .hero h1{font-size:clamp(82px,24vw,112px);margin-top:24px} .hero-stamp{width:78px;height:78px;right:14px;top:92px} .hero-stamp strong{font-size:29px} .hero-stamp span{font-size:4.5px} section{padding-left:18px;padding-right:18px} .what-files{padding-left:14px;padding-right:14px} .what-file{padding-left:11px;padding-right:11px} .file-no{width:21px;flex-basis:21px} .file-name{font-size:16px} .what-sheet{padding:30px 20px} .skill-detail{padding:30px 20px} .skill-item strong{font-size:17px} .work{padding-left:18px;padding-right:18px} .projects-head,.partners-head{padding-left:18px;padding-right:18px} .projects-note,.partners-note{padding-left:18px;padding-right:18px} .contact{padding-left:18px;padding-right:18px} footer{padding-left:18px;padding-right:18px} } @media (hover:none){ .top-nav a:hover,.cta:hover,.pill:hover,.service:hover,.job:hover,.work-card:hover .work-art, .project-logo:hover,.partner-logo:hover,.what-file:hover,.skill-item:hover{ transform:none; } } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } .social-links{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-top:14px; } .social-links a{ display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:0 11px; border:1px solid currentColor; border-radius:999px; font-size:9px; font-weight:700; letter-spacing:.08em; text-decoration:none; transition:.25s ease; } .social-links a:hover{ background:#111; color:var(--paper); } @media(max-width:700px){ .social-links{ justify-content:flex-start; margin-top:18px; } .social-links a{ min-height:36px; padding:0 13px; font-size:9px; } } /* === LAMAN /PORTOFOLIO === */ .portfolio-hero-title{font:700 clamp(38px,5.6vw,80px)/1.08 "Space Grotesk";letter-spacing:-.03em;margin:28px 0 26px;max-width:920px} .portfolio-hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:6px} .portfolio-hero-cta .cta,.portfolio-hero-cta .pill{margin-top:0} .stats-strip{background:#111;color:var(--paper);display:grid;grid-template-columns:repeat(3,1fr);gap:40px;text-align:center} .stat-number{font:700 clamp(46px,6vw,88px)/1 "Space Grotesk";letter-spacing:-.04em;color:var(--yellow)} .stat-label{margin-top:14px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#aaa} .testimonials{background:var(--paper)} .testimonials .label{margin-bottom:16px} .testimonial-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:50px;background:var(--line);border:1px solid var(--line)} .testimonial-card{background:var(--paper);padding:44px} .testimonial-quote{font-size:19px;line-height:1.5;margin:0 0 26px} .testimonial-name{font-weight:700;font-size:14px} .testimonial-role{font-size:12px;color:var(--muted);margin-top:4px} .portfolio-cta{background:#0e0e0e;color:var(--paper);text-align:center} .portfolio-cta .section-title{margin:0 auto 40px} .portfolio-cta .cta{border-color:#fff;margin:0 auto} @media(max-width:900px){ .testimonial-grid{grid-template-columns:1fr} } @media(max-width:700px){ .stats-strip{grid-template-columns:1fr;gap:44px} .portfolio-hero-cta{flex-direction:column;align-items:flex-start} } /* ========================================================= ADIGUNAWAN — HEADER / PORTFOLIO PATCH Hanya override header & portfolio; layout section lama tetap. ========================================================= */ :root{--header-h:76px} .top{height:76px;padding:0 clamp(22px,4vw,58px);grid-template-columns:1fr auto 1fr;background:#111;color:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border:0;transition:background .35s ease,color .35s ease,box-shadow .35s ease} .top.is-scrolled{background:rgba(241,236,226,.78);color:#111;backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);box-shadow:0 8px 26px rgba(17,17,17,.07)} .top-nav{gap:3px;align-items:center} .top-nav a{font-size:10px;padding:8px 13px;letter-spacing:.1em} .top-nav a.active,.top-nav a:hover.active,.top-nav .current-menu-item>a,.top-nav .current_page_item>a{background:#111;color:#fff} .top.is-scrolled .top-nav a.active,.top.is-scrolled .top-nav a:hover.active{background:#111;color:#fff} .menubtn{font-size:10px;gap:8px;justify-self:start;margin-left:8px} .brandmark{font-size:27px} /* Portfolio page: jangan hilangkan deskripsi dan pastikan header punya state yang sama. */ .adigunawan-portfolio-page .top{background:#111;color:#fff} .adigunawan-portfolio-page .top.is-scrolled{background:rgba(241,236,226,.78);color:#111} /* Mockup browser */ .portfolio-card .work-art{padding:0;overflow:hidden;background:#151515;border-radius:18px;display:block;box-shadow:0 18px 45px rgba(17,17,17,.12)} .mockup-browser{height:100%;padding:13px 13px 18px;display:flex;flex-direction:column} .mockup-bar{height:30px;display:flex;align-items:center;gap:5px;color:#aaa;font-size:8px;letter-spacing:.08em;text-transform:uppercase;flex:none} .mockup-bar i{width:7px;height:7px;border-radius:50%;background:#777;display:block} .mockup-bar span{margin-left:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mockup-screen{position:relative;flex:1;min-height:0;border-radius:11px;background:#f1ece2 center/cover no-repeat;overflow:hidden} .mockup-ui{height:100%;padding:clamp(24px,4vw,46px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px;background:linear-gradient(135deg,#f1ece2 0%,#fff 55%,#dcd6cc 100%);color:#111} .mockup-ui b{font-size:9px;letter-spacing:.18em;opacity:.65} .mockup-ui strong{font:700 clamp(30px,4vw,62px)/.9 "Space Grotesk";letter-spacing:-.06em;max-width:80%} .mockup-ui em{font-style:normal;font-size:11px;line-height:1.4;max-width:390px;opacity:.72} .mockup-ui span{height:7px;width:55%;background:#111;border-radius:20px;opacity:.12} .mockup-ui span:nth-last-child(1){width:34%} .mockup-ui span:nth-last-child(2){width:44%} @media(min-width:701px){ .top-nav,.menubtn{grid-row:1} .menubtn{grid-column:3} .top-nav{grid-column:2} } @media(max-width:700px){ :root{--header-h:62px} .top{inset:10px 12px auto;height:48px;padding:0 11px;border-radius:999px;display:grid;grid-template-columns:1fr auto 1fr;background:#111;color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.12)} .top.is-scrolled{background:rgba(241,236,226,.88);color:#111} .top .brandmark{display:none} .top-nav{grid-column:2;gap:1px;justify-self:center} .top-nav a{font-size:8.5px;padding:7px 9px;letter-spacing:.06em} .menubtn{grid-column:3;justify-self:end;margin-left:5px;padding:0 2px;gap:0} .menubtn-label{display:none} .menubtn-icon{width:16px;height:11px;gap:4px} .menubtn-icon span{height:1.5px} .portfolio-hero{padding-top:100px} .portfolio-hero-title{font-size:clamp(40px,11vw,72px);margin-top:22px} .portfolio-hero p{display:block;max-width:330px;font-size:14px;line-height:1.5} .portfolio-card .work-art{height:min(70vw,320px);min-height:230px} .mockup-browser{padding:9px 9px 12px} .mockup-bar{height:24px;font-size:7px} .mockup-ui{padding:22px} } /* ========================================================= HEADER COMPACT — hanya membungkus 3 kontrol: Profile, Portofolio, Menu ========================================================= */ @media (min-width:701px){ :root{--header-h:58px} .top{ left:50%; right:auto; inset-inline:auto; width:max-content; min-width:0; height:46px; padding:5px 7px; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; gap:3px; border-radius:999px; } .top .brandmark{display:none} .top-nav{ display:flex; align-items:center; justify-content:center; gap:2px; margin:0; } .top-nav a{ font-size:9px; line-height:1; padding:8px 12px; border-radius:999px; white-space:nowrap; } .menubtn{ margin:0; padding:8px 11px; gap:7px; justify-self:auto; font-size:9px; line-height:1; border-radius:999px; white-space:nowrap; } .menubtn-icon{width:16px;height:11px;gap:4px} .menubtn-icon span{height:1.5px} } @media (max-width:700px){ :root{--header-h:52px} .top{ left:50%; right:auto; inset-inline:auto; width:max-content; min-width:0; height:42px; padding:4px 6px; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; gap:1px; border-radius:999px; } .top .brandmark{display:none} .top-nav{display:flex;align-items:center;gap:1px;margin:0} .top-nav a{ font-size:8px; line-height:1; padding:7px 9px; border-radius:999px; white-space:nowrap; } .menubtn{ margin:0; padding:7px 8px; gap:0; justify-self:auto; border-radius:999px; } } /* FINAL HEADER CENTER FIX — glass pill benar-benar mengikuti 3 kontrol */ @media (min-width:701px){ .top{ position:fixed; top:16px; left:50%; right:auto; bottom:auto; inset-inline:auto; width:max-content; height:46px; min-width:0; margin:0; padding:5px 7px; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; gap:0; box-sizing:border-box; } .top .brandmark{display:none} .header-controls{ width:max-content; max-width:none; display:flex; align-items:center; justify-content:center; gap:2px; margin:0; padding:0; } .header-controls > .top-nav{ display:flex; width:max-content; max-width:none; align-items:center; justify-content:center; gap:2px; margin:0; padding:0; } .header-controls .top-nav .top-nav{ display:flex; width:max-content; align-items:center; justify-content:center; gap:2px; margin:0; padding:0; } .header-controls .top-nav a{ display:inline-flex; align-items:center; justify-content:center; width:auto; min-width:0; white-space:nowrap; } .header-controls .menubtn{ display:inline-flex; align-items:center; justify-content:center; width:auto; min-width:0; margin:0; } } @media (max-width:700px){ .top{ position:fixed; top:10px; left:50%; right:auto; bottom:auto; inset-inline:auto; width:max-content; height:42px; min-width:0; margin:0; padding:4px 6px; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; gap:0; box-sizing:border-box; } .top .brandmark{display:none} .header-controls{ width:max-content; max-width:none; display:flex; align-items:center; justify-content:center; gap:1px; margin:0; padding:0; } .header-controls > .top-nav, .header-controls .top-nav .top-nav{ display:flex; width:max-content; max-width:none; align-items:center; justify-content:center; gap:1px; margin:0; padding:0; } .header-controls .top-nav a{ display:inline-flex; align-items:center; justify-content:center; width:auto; min-width:0; white-space:nowrap; } .header-controls .menubtn{ display:inline-flex; align-items:center; justify-content:center; width:auto; min-width:0; margin:0; } } /* HEADER FINAL FIX: satu nav tanpa nested