/* ============================================================ RINALDISIGN — ABOUT PAGE STYLES ------------------------------------------------------------ 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 . Struktur file ini sengaja disamakan dengan works/css/works.css supaya "keluarga visual" (background, intro, nav, footer) tetap konsisten di semua halaman. ============================================================ */ :root{ --ease-soft:cubic-bezier(.16,1,.3,1); } /* ---------- Background halaman + kunang-kunang ---------- */ 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; } } main, footer, #introScreen{ position:relative; z-index:2; } /* ---------- 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; } } /* ---------- Navigasi ---------- */ .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; } /* ---------- About hero: photo + bio ---------- */ .about-hero{ padding:70px 0 90px; } .about-inner{ display:grid; grid-template-columns:220px 1fr; gap:60px; align-items:start; } .about-photo{ opacity:0; transform:translateY(14px); animation:heroIn .8s var(--ease-soft) forwards; animation-delay:.05s; } .about-photo img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:14px; border:1px solid var(--line); box-shadow:0 18px 40px rgba(0,0,0,.45); } .about-copy{ opacity:0; transform:translateY(14px); animation:heroIn .8s var(--ease-soft) forwards; animation-delay:.18s; } .about-copy .label{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:10px; margin-bottom:20px; } .about-copy .label::before{ content:""; width:20px; height:1px; background:var(--gold); } .about-copy h1{ font-family:var(--font-display); font-weight:500; font-size:clamp(2.2rem,4.4vw,3.2rem); margin:0 0 20px; } .about-text p{ font-family:var(--font-display); font-size:clamp(17px, 1.9vw, 20px); line-height:1.75; color:var(--paper-dim); margin-bottom:18px; } .about-text p:last-child{ margin-bottom:0; } @keyframes heroIn{ to{ opacity:1; transform:translateY(0); } } /* ---------- About social: platform icon grid ---------- */ .about-social{ padding:20px 0 100px; } .about-social .heading{ text-align:center; margin-bottom:48px; } .about-social .heading h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(26px, 3.4vw, 36px); } .about-social .heading .sub{ margin-top:12px; font-size:13px; color:var(--paper-dim); } .platform-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); } .platform-card{ background:rgba(19,31,25,0.55); padding:34px 18px; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; text-decoration:none; transition:background .4s var(--ease); } .platform-card:hover{ background:rgba(19,31,25,0.9); } .platform-card img{ width:28px; height:28px; object-fit:contain; filter:grayscale(1) brightness(1.6); opacity:.75; transition:filter .4s var(--ease), opacity .4s var(--ease), transform .4s var(--ease); } .platform-card:hover img{ filter:none; opacity:1; transform:translateY(-3px) scale(1.05); } .platform-card span{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--paper-dim); transition:color .3s; } .platform-card:hover span{ color:var(--paper); } /* ---------- Footer ---------- */ footer{ padding:60px 6vw 40px; text-align:center; 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; } /* ---------- Mobile ---------- */ @media (max-width:760px){ .about-inner{ grid-template-columns:1fr; gap:32px; } .about-photo{ max-width:200px; margin:0 auto; } .about-copy{ text-align:center; } .about-copy .label{ justify-content:center; } .platform-grid{ grid-template-columns:repeat(3, 1fr); } } @media (max-width:480px){ .platform-grid{ grid-template-columns:repeat(2, 1fr); } }