/* ============================================================ RINALDISIGN — WORKS PAGE STYLES (v2, disatukan & disinkronkan) ------------------------------------------------------------ File ini MENGGANTIKAN "works.css" lama DAN "works/css/style.css" (yang sebelumnya disebut ROOT_works.css) — jangan link keduanya lagi, cukup satu file ini saja. Semua warna & font TIDAK didefinisikan ulang di sini. Semua diambil dari token yang sudah ada di css/style.css (ROOT.css): --ink, --forest, --forest-2, --paper, --paper-dim, --gold, --gold-soft, --mist, --line, --font-display, --font-ui, --font-mono, --ease Pastikan css/style.css di-load SEBELUM file ini di . Cara baca file ini (dari atas ke bawah): 1. Token tambahan khusus halaman Works (radius, glass, easing) 2. Background halaman + efek kunang-kunang 3. Layar intro (logo + ensō) 4. Navigasi 5. Hero / judul halaman 6. List katalog karya 7. Popup (modal) karya 8. Footer ============================================================ */ /* ---------- 1. Token tambahan (bukan pengganti token ROOT.css) ---------- */ :root{ --radius-lg:20px; --radius-md:12px; --ease-soft:cubic-bezier(.16,1,.3,1); --glass:rgba(7,9,10,0.55); /* kaca gelap, senada dengan --ink */ } /* ---------- 2. Background halaman + kunang-kunang ---------- Background ditaruh di (bukan div position:fixed) supaya tidak "putus" kalau ada transform/filter di elemen lain. */ html{ background:transparent; } body{ background:transparent; color:var(--paper); position:relative; min-height:100vh; overflow-x:hidden; font-family:var(--font-ui); } #bg-image{ position:fixed; inset:0; z-index:-2; pointer-events:none; background-color:var(--ink); background-image: linear-gradient( 180deg, rgba(9,8,6,0.72) 0%, rgba(9,8,6,0.55) 40%, rgba(9,8,6,0.85) 100% ), url('../../img/WORKS_BG.jpg'); background-repeat:no-repeat; background-position:center top; background-size:cover; } .bg-vignette{ position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 50% 30%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%); } #fireflies{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; } .firefly{ position:absolute; bottom:-10px; width:4px; height:4px; border-radius:50%; background:var(--gold); box-shadow:0 0 6px 2px rgba(185,141,74,0.9), 0 0 14px 6px rgba(185,141,74,0.35); opacity:0; animation-name:fly, flicker; animation-timing-function:ease-in-out, ease-in-out; animation-iteration-count:infinite, infinite; } @keyframes fly{ 0%{ transform:translate(0,0); } 25%{ transform:translate(20px,-28vh); } 50%{ transform:translate(-16px,-52vh); } 75%{ transform:translate(24px,-76vh); } 100%{ transform:translate(-10px,-104vh); } } @keyframes flicker{ 0%, 100%{ opacity:0; } 10%{ opacity:.85; } 30%{ opacity:.25; } 50%{ opacity:.9; } 70%{ opacity:.2; } 90%{ opacity:.7; } } /* konten selalu di atas background & kunang-kunang. .site-nav dipisah dengan z-index lebih tinggi (lihat blok Navigasi di bawah) supaya link header tetap bisa diklik saat discroll, walau main datang belakangan di DOM. */ main, footer, .work-modal, #introScreen{ position:relative; z-index:2; } /* ---------- 3. Intro: logo + ensō ---------- */ #introScreen{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; flex-direction:column; background:var(--ink); transition:opacity .9s var(--ease), visibility .9s var(--ease); } #introScreen.leaving{ opacity:0; visibility:hidden; } .intro-enso{ width:85px; height:85px; opacity:0; animation:ensoIn 1.4s var(--ease) forwards, ensoSpin 12s linear infinite; animation-delay:.15s, .15s; filter:drop-shadow(0 0 12px rgba(185,141,74,0.35)); } .intro-logo{ width:38px; margin-top:-70px; opacity:0; animation:logoIn 1s var(--ease) forwards; animation-delay:.7s; } .intro-word{ margin-top:16px; font-family:var(--font-display); letter-spacing:.28em; font-size:.7rem; text-transform:uppercase; color:var(--paper-dim); opacity:0; animation:wordIn 1s var(--ease) forwards; animation-delay:1.05s; } @keyframes ensoIn{ from{ opacity:0; transform:scale(.8); } to{ opacity:1; transform:scale(1); } } @keyframes ensoSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } @keyframes logoIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:.95; transform:translateY(0); } } @keyframes wordIn{ from{ opacity:0; } to{ opacity:1; } } /* ---------- 4. Navigasi ---------- Disamakan dengan .site-nav di homepage: font Manrope, uppercase, letter-spacing lebar. Logo "Rinaldisign" TIDAK lagi dipaksa pakai Cormorant — itu penyebab font header beda dari homepage. */ .site-nav{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:22px 6vw; font-family:var(--font-ui); font-size:12px; letter-spacing:.14em; text-transform:uppercase; background:rgba(13,12,9,0.55); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); transition:background .3s var(--ease), box-shadow .3s var(--ease); } .site-nav .mark{ font-weight:700; color:var(--paper); text-decoration:none; transition:color .3s var(--ease); } .site-nav .mark:hover{ color:var(--gold); } .site-nav .links{ display:flex; gap:28px; } .site-nav .links a{ position:relative; color:var(--paper-dim); text-decoration:none; padding-bottom:2px; transition:color .3s var(--ease); } .site-nav .links a::after{ content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--gold); transition:right .35s var(--ease-soft); } .site-nav .links a:hover{ color:var(--gold); } .site-nav .links a:hover::after{ right:0; } /* ---------- mobile: hamburger menu ---------- */ .nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:32px; height:32px; padding:0; background:none; border:none; cursor:pointer; z-index:60; } .nav-toggle span{ display:block; width:100%; height:1px; background:var(--paper); transition:transform .35s var(--ease), opacity .35s var(--ease); } .site-nav.nav-open .nav-toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); } .site-nav.nav-open .nav-toggle span:nth-child(2){ opacity:0; } .site-nav.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); } @media (max-width:700px){ .nav-toggle{ display:flex; } .site-nav .links{ position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:rgba(13,12,9,0.96); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); max-height:0; overflow:hidden; transition:max-height .4s var(--ease); } .site-nav .links a{ padding:16px 5vw; text-align:center; border-top:1px solid var(--line); } .site-nav .links a::after{ display:none; } .site-nav.nav-open .links{ max-height:320px; } } main{ padding-top:96px; } .section-inner{ max-width:900px; margin:0 auto; padding:0 6vw; } /* ---------- 5. Hero ---------- */ .works-hero{ padding:80px 0 60px; text-align:center; } .works-hero .label, .works-hero h1, .works-hero .sub, .works-hero .tally{ opacity:0; transform:translateY(14px); animation:heroIn .8s var(--ease-soft) forwards; } .works-hero .label{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); animation-delay:.05s; } .works-hero h1{ font-family:var(--font-display); font-weight:500; font-size:clamp(2.6rem,6vw,4.2rem); margin:10px 0 14px; animation-delay:.15s; } .works-hero .sub{ max-width:520px; margin:0 auto; color:var(--paper-dim); font-size:.98rem; line-height:1.65; animation-delay:.25s; } .tally{ margin-top:34px; display:inline-flex; align-items:baseline; gap:10px; font-family:var(--font-mono); animation-delay:.35s; } .tally .n{ font-size:2.4rem; color:var(--gold); font-weight:300; transition:color .3s var(--ease); } .tally .of{ font-size:.78rem; letter-spacing:.06em; color:var(--paper-dim); text-transform:uppercase; } @keyframes heroIn{ to{ opacity:1; transform:translateY(0); } } /* ---------- 6. List katalog karya ---------- */ .catalog{ padding:20px 0 100px; } /* Toolbar pencarian: nomor katalog (DN.12) atau judul */ .catalog-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; } .search-box{ flex:1 1 320px; max-width:480px; display:flex; align-items:center; gap:10px; padding:12px 16px; border:1px solid var(--line); border-radius:999px; background:rgba(7,9,10,0.35); transition:border-color .25s var(--ease), background .25s var(--ease); } .search-box:focus-within{ border-color:var(--gold); background:rgba(7,9,10,0.5); } .search-box svg{ flex:0 0 auto; color:var(--paper-dim); } .search-box:focus-within svg{ color:var(--gold); } .search-box input{ all:unset; flex:1 1 auto; width:100%; font-family:var(--font-ui); font-size:.9rem; color:var(--paper); } .search-box input::placeholder{ color:var(--paper-dim); } .result-count{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; color:var(--paper-dim); white-space:nowrap; } .no-results{ padding:40px 4px; text-align:center; font-family:var(--font-display); font-style:italic; font-size:1.05rem; color:var(--paper-dim); border-top:1px solid var(--line); } .comp-list{ display:flex; flex-direction:column; border-top:1px solid var(--line); min-height:60px; } .comp-row{ all:unset; cursor:pointer; box-sizing:border-box; display:flex; align-items:center; gap:20px; padding:16px 6px; border-bottom:1px solid var(--line); transform:translateX(0); opacity:0; animation:rowIn .6s var(--ease-soft) forwards; transition:background .35s var(--ease-soft), transform .35s var(--ease-soft); will-change:transform; } .comp-row:hover, .comp-row:focus-visible{ background:rgba(185,141,74,0.07); transform:translateX(10px); } .comp-row:active{ transform:translateX(10px) scale(.99); } .comp-row:focus-visible{ outline:1px solid var(--gold); outline-offset:-1px; } @keyframes rowIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } } .comp-row .cover{ width:52px; height:52px; border-radius:var(--radius-md); overflow:hidden; flex:0 0 auto; background:linear-gradient(135deg,#2a251d,#151210); border:1px solid var(--line); } .comp-row .cover img{ width:100%; height:100%; object-fit:cover; display:block; } .comp-row .catno{ font-family:var(--font-mono); font-size:.72rem; color:var(--gold); letter-spacing:.05em; flex:0 0 52px; } .comp-row .ctitle{ font-family:var(--font-display); font-size:1.35rem; font-weight:500; color:var(--paper); flex:1 1 auto; text-align:left; } .comp-row .plus{ width:24px; height:24px; border-radius:50%; border:1px solid var(--line); position:relative; flex:0 0 auto; transition:border-color .25s var(--ease), transform .25s var(--ease); } .comp-row .plus::before, .comp-row .plus::after{ content:''; position:absolute; background:var(--paper-dim); transition:background .25s var(--ease); } .comp-row .plus::before{ left:7px; right:7px; top:50%; height:1px; transform:translateY(-50%); } .comp-row .plus::after{ top:7px; bottom:7px; left:50%; width:1px; transform:translateX(-50%); } .comp-row:hover .plus{ border-color:var(--gold); transform:rotate(90deg); } .comp-row:hover .plus::before, .comp-row:hover .plus::after{ background:var(--gold); } /* Navigasi halaman: Prev / nomor halaman / Next, biar bisa "loncat" */ .pagination{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:36px; } .page-btn{ all:unset; box-sizing:border-box; cursor:pointer; min-width:36px; height:36px; padding:0 10px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:999px; font-family:var(--font-mono); font-size:.78rem; color:var(--paper-dim); transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease); } .page-btn:hover:not(:disabled){ border-color:var(--gold); color:var(--gold); background:rgba(185,141,74,0.08); } .page-btn.active{ border-color:var(--gold); color:var(--ink); background:var(--gold); font-weight:600; } .page-btn:disabled{ opacity:.35; cursor:default; } .page-ellipsis{ color:var(--paper-dim); font-family:var(--font-mono); font-size:.78rem; padding:0 2px; } .catalog-note{ margin-top:26px; font-size:.8rem; color:var(--paper-dim); line-height:1.6; max-width:520px; } /* ---------- 7. Popup (modal) karya — kompak, cover di kiri ---------- */ .work-modal{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:20px; visibility:hidden; pointer-events:none; } .work-modal.active{ visibility:visible; pointer-events:auto; } .work-modal-backdrop{ position:absolute; inset:0; background:rgba(6,5,4,0.6); backdrop-filter:blur(0px); opacity:0; transition:opacity .5s var(--ease-soft), backdrop-filter .5s var(--ease-soft); } .work-modal.active .work-modal-backdrop{ opacity:1; backdrop-filter:blur(9px); } .work-modal-panel{ position:relative; width:100%; max-width:400px; background:var(--glass); border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px; backdrop-filter:blur(20px) saturate(140%); box-shadow:0 24px 70px rgba(0,0,0,0.55); transform:scale(.94) translateY(18px); opacity:0; transition:transform .5s var(--ease-soft), opacity .4s var(--ease-soft); display:flex; flex-direction:row; gap:16px; align-items:flex-start; } .work-modal.active .work-modal-panel{ transform:scale(1) translateY(0); opacity:1; } .modal-close{ position:absolute; top:12px; right:12px; width:28px; height:28px; border-radius:50%; cursor:pointer; border:1px solid var(--line); z-index:2; transition:border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease); } .modal-close:hover{ border-color:var(--gold); transform:rotate(90deg); background:rgba(185,141,74,0.08); } .modal-close::before, .modal-close::after{ content:''; position:absolute; left:8px; right:8px; top:50%; height:1px; background:var(--paper-dim); } .modal-close::before{ transform:rotate(45deg); } .modal-close::after{ transform:rotate(-45deg); } .modal-cover{ width:96px; height:96px; border-radius:var(--radius-md); overflow:hidden; flex:0 0 auto; background:linear-gradient(135deg,#2a251d,#151210); border:1px solid var(--line); } .modal-cover img{ width:100%; height:100%; object-fit:cover; display:block; } .modal-body{ flex:1 1 auto; min-width:0; padding-top:2px; } .modal-body .catno{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; color:var(--gold); text-transform:uppercase; } .modal-body h3{ font-family:var(--font-display); font-weight:500; font-size:1.5rem; margin:4px 0 8px; color:var(--paper); line-height:1.15; } .modal-body p{ font-size:.82rem; line-height:1.6; color:var(--paper-dim); margin:0 0 14px; max-height:108px; overflow-y:auto; overflow-x:hidden; padding-right:10px; scrollbar-width:thin; scrollbar-color:rgba(185,141,74,0.5) transparent; } .modal-body p::-webkit-scrollbar{ width:5px; } .modal-body p::-webkit-scrollbar-track{ background:transparent; } .modal-body p::-webkit-scrollbar-thumb{ background:rgba(185,141,74,0.45); border-radius:10px; } .modal-body p::-webkit-scrollbar-thumb:hover{ background:rgba(185,141,74,0.75); } .modal-player{ border-radius:10px; overflow:hidden; margin-bottom:12px; border:1px solid var(--line); background:rgba(0,0,0,0.25); } .modal-player iframe{ display:block; width:100%; height:80px; border:0; } /* Embed Musescore — kompak by default; tombol di pojok toolbar bisa "memperbesar" bagian ini saja (lihat .ms-expanded di bawah), popup induknya sendiri tetap kecil kalau tidak di-expand. */ .modal-musescore{ border-radius:10px; overflow:hidden; margin-bottom:12px; border:1px solid var(--line); background:rgba(0,0,0,0.25); transition:margin .3s var(--ease-soft); } .mm-toolbar{ display:flex; align-items:center; justify-content:space-between; padding:7px 10px; border-bottom:1px solid var(--line); } .mm-label{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--paper-dim); } .mm-toggle{ all:unset; cursor:pointer; box-sizing:border-box; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); color:var(--paper-dim); transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease); } .mm-toggle:hover, .mm-toggle:focus-visible{ border-color:var(--gold); color:var(--gold); background:rgba(185,141,74,0.08); } .mm-toggle svg{ display:block; } .mm-toggle .icon-minimize{ display:none; } .mm-frame{ height:200px; background:rgba(0,0,0,0.35); } .mm-frame iframe{ display:block; width:100%; height:100%; border:0; } /* Klik tombol expand -> tambah class "ms-expanded" di #workModal (via JS). Hanya panel yang membesar & isi lain disembunyikan sementara; popup ini tetap modal yang sama, jadi klik minimize langsung kembali ke ukuran semula tanpa reload iframe. */ .work-modal.ms-expanded .work-modal-panel{ max-width:900px; width:94vw; height:88vh; max-height:88vh; flex-direction:column; align-items:stretch; } .work-modal.ms-expanded .modal-cover{ display:none; } .work-modal.ms-expanded .modal-body{ display:flex; flex-direction:column; height:100%; min-height:0; } .work-modal.ms-expanded .modal-body p, .work-modal.ms-expanded .modal-player, .work-modal.ms-expanded .modal-links{ display:none !important; } .work-modal.ms-expanded .modal-musescore{ flex:1 1 auto; min-height:0; margin-bottom:0; display:flex; flex-direction:column; } .work-modal.ms-expanded .mm-frame{ flex:1 1 auto; height:auto; min-height:0; } .work-modal.ms-expanded .mm-toggle .icon-expand{ display:none; } .work-modal.ms-expanded .mm-toggle .icon-minimize{ display:block; } .modal-links{ margin-top:auto; padding-top:18px; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; } .modal-links a{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; flex:0 0 auto; border-radius:50%; border:1px solid var(--line); transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease); } .modal-links a:hover{ border-color:var(--gold); background:rgba(185,141,74,0.08); transform:translateY(-2px); } .modal-links img{ width:16px; height:16px; object-fit:contain; filter:grayscale(1) brightness(1.6); opacity:.8; transition:filter .25s, opacity .25s; } .modal-links a:hover img{ filter:none; opacity:1; } .mm-copy-link{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; flex:0 0 auto; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--paper-dim); cursor:pointer; opacity:.8; transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease), opacity .25s; } .mm-copy-link:hover{ border-color:var(--gold); background:rgba(185,141,74,0.08); transform:translateY(-2px); opacity:1; } .mm-copy-link.copied{ border-color:var(--gold); color:var(--gold); opacity:1; } @media (max-width:480px){ .work-modal-panel{ flex-direction:column; align-items:center; text-align:center; max-width:320px; max-height:88vh; overflow-y:auto; } .modal-cover{ width:76px; height:76px; } .modal-links{ justify-content:center; } .modal-body p{ max-height:140px; padding-right:0; } } /* ---------- 8. Footer ---------- !important dipakai karena css/style.css (global, dipakai di semua halaman) sudah kasih footer warna terang untuk homepage — di halaman works yang gelap ini kita paksa transparan supaya menyatu dengan background. */ footer{ padding:40px 6vw 60px; text-align:center; color:var(--paper-dim) !important; background:transparent !important; border-top:1px solid var(--line); } footer .foot-mark{ height:26px; opacity:.7; margin-bottom:14px; } footer p{ font-size:.78rem; margin:0 0 14px; color:var(--paper-dim) !important; } .foot-links{ display:flex; gap:20px; justify-content:center; } .foot-links a{ color:var(--paper-dim) !important; text-decoration:none; font-size:.8rem; transition:color .3s var(--ease); } .foot-links a:hover{ color:var(--gold) !important; } @media (max-width:640px){ .comp-row{ gap:14px; padding:14px 2px; } .comp-row .catno{ flex-basis:40px; } .comp-row .ctitle{ font-size:1.15rem; } .catalog-toolbar{ flex-direction:column; align-items:stretch; } .search-box{ flex:1 1 auto; max-width:none; } .result-count{ align-self:flex-end; } .page-btn{ min-width:32px; height:32px; font-size:.72rem; } }