/* ========================================================= CEYOUKA — style.css Sistem tema pakai CSS variables. Ganti tema = ganti attribute data-theme di , semua warna ikut berubah otomatis. ========================================================= */ :root{ --font-display: 'Poppins', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --radius: 18px; --radius-sm: 10px; --maxw: 880px; --shadow: 0 10px 30px rgba(0,0,0,.18); } /* ---------- THEME: default (mengikuti tampilan asli, sedikit dirapikan) ---------- */ [data-theme="default"]{ --bg: #0f1220; --bg-alt: #161a2e; --surface: #1c2138; --text: #eef0fb; --text-dim: #a7acc8; --accent: #7c8cff; --accent-2: #ff8fb1; --border: rgba(255,255,255,.08); --gradient: linear-gradient(135deg, #7c8cff 0%, #ff8fb1 100%); } /* ---------- THEME: sakura-dusk (lembut, pink-ungu, cocok galeri waifu) ---------- */ [data-theme="sakura-dusk"]{ --bg: #1a1225; --bg-alt: #22182f; --surface: #2a1e3b; --text: #fbeeff; --text-dim: #cbb3d6; --accent: #ff8fd4; --accent-2: #b48cff; --border: rgba(255,143,212,.15); --gradient: linear-gradient(135deg, #ff8fd4 0%, #b48cff 100%); } /* ---------- THEME: neon-night (cyberpunk gelap, cyan-magenta) ---------- */ [data-theme="neon-night"]{ --bg: #05070d; --bg-alt: #0a0e1a; --surface: #0d1420; --text: #e6fbff; --text-dim: #7fa6ad; --accent: #00f0ff; --accent-2: #ff00c8; --border: rgba(0,240,255,.18); --gradient: linear-gradient(135deg, #00f0ff 0%, #ff00c8 100%); } /* ---------- THEME: ocean-breeze (tenang, teal-biru) ---------- */ [data-theme="ocean-breeze"]{ --bg: #08181c; --bg-alt: #0c2126; --surface: #102a30; --text: #eafcff; --text-dim: #8fc4cc; --accent: #2fd8c8; --accent-2: #3a8dff; --border: rgba(47,216,200,.16); --gradient: linear-gradient(135deg, #2fd8c8 0%, #3a8dff 100%); } /* ---------- THEME: ink-paper (minimal, terang, editorial) ---------- */ [data-theme="ink-paper"]{ --bg: #f5f3ef; --bg-alt: #ffffff; --surface: #ffffff; --text: #17181c; --text-dim: #62636b; --accent: #17181c; --accent-2: #c9432c; --border: rgba(0,0,0,.1); --gradient: linear-gradient(135deg, #17181c 0%, #c9432c 100%); --shadow: 0 6px 18px rgba(0,0,0,.08); } /* ---------- THEME: sunset-glow (hangat, oranye-pink) ---------- */ [data-theme="sunset-glow"]{ --bg: #1c0f10; --bg-alt: #241414; --surface: #2c1a19; --text: #fff2ea; --text-dim: #d7ab9c; --accent: #ff8a3d; --accent-2: #ff4d6d; --border: rgba(255,138,61,.18); --gradient: linear-gradient(135deg, #ff8a3d 0%, #ff4d6d 100%); } *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth; scroll-padding-top:76px; overflow-x:hidden;} body{ background:var(--bg); color:var(--text); font-family:var(--font-body); line-height:1.6; transition:background .4s ease, color .4s ease; overflow-x:hidden; width:100%; } img{max-width:100%; display:block;} a{color:inherit; text-decoration:none;} h1,h2,h3{font-family:var(--font-display); font-weight:700;} .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 22px; padding-left:max(22px, env(safe-area-inset-left)); padding-right:max(22px, env(safe-area-inset-right)); } section{padding:64px 0;} .eyebrow{ display:inline-block; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:10px; } .grad-text{ background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } .btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:999px; background:var(--gradient); color:#fff; font-weight:600; font-size:.95rem; border:none; cursor:pointer; box-shadow:var(--shadow); transition:transform .2s ease, opacity .2s ease; } .btn:hover{transform:translateY(-2px); opacity:.92;} /* ---------- RELOAD / PAGE-LOAD OVERLAY ---------- */ #reload-overlay{ position:fixed; inset:0; z-index:9999; background:var(--bg); display:flex; align-items:center; justify-content:center; } #reload-overlay .spinner{ width:46px; height:46px; border-radius:50%; border:3px solid var(--border); border-top-color:var(--accent); animation:spin .8s linear infinite; } @keyframes spin{to{transform:rotate(360deg);}} #reload-overlay.anim-fade{animation:overlayFade .6s ease forwards; animation-delay:.4s;} #reload-overlay.anim-slide{animation:overlaySlide .7s cubic-bezier(.7,0,.2,1) forwards; animation-delay:.35s;} #reload-overlay.anim-none{display:none;} @keyframes overlayFade{to{opacity:0; visibility:hidden;}} @keyframes overlaySlide{to{transform:translateY(-100%); visibility:hidden;}} /* ---------- SCROLL REVEAL ---------- */ [data-animate]{opacity:0;} [data-animate].in-view{opacity:1;} [data-animate].fade-up{transform:translateY(28px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);} [data-animate].fade-up.in-view{transform:translateY(0);} [data-animate].zoom-in{transform:scale(.92); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);} [data-animate].zoom-in.in-view{transform:scale(1);} [data-animate].slide-side{transform:translateX(-32px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);} [data-animate].slide-side.in-view{transform:translateX(0);} [data-animate].anim-none{opacity:1 !important; transform:none !important;} /* ---------- NAV ---------- */ header.nav{ position:sticky; top:0; z-index:50; background:var(--bg-alt); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); } .nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 22px; max-width:var(--maxw); margin:0 auto;} .nav-brand{display:flex; align-items:center; gap:10px; font-weight:700;} .nav-brand img{width:34px; height:34px; border-radius:50%; object-fit:cover; border:2px solid var(--accent);} .nav-links{display:flex; gap:18px; font-size:.9rem; flex-wrap:wrap;} .nav-links a{opacity:.85; padding:4px 2px; border-bottom:2px solid transparent;} .nav-links a:hover{opacity:1; border-color:var(--accent);} /* ---------- HERO ---------- */ .hero{padding:70px 0 40px; text-align:center;} .hero-photo{ width:150px; height:150px; border-radius:50%; object-fit:cover; margin:0 auto 26px; border:4px solid var(--accent); box-shadow:var(--shadow); transition:transform .35s cubic-bezier(.2,.8,.2,1); } .hero-photo:hover{transform:scale(1.07);} .hero h1{ font-size:clamp(1.05rem,5vw,2.3rem); margin-bottom:14px; line-height:1.3; overflow-wrap:break-word; word-break:break-word; hyphens:auto; } .hero p{color:var(--text-dim); max-width:560px; margin:0 auto 20px;} .tags{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px;} .tag{ padding:6px 14px; border-radius:999px; background:var(--surface); border:1px solid var(--border); font-size:.8rem; color:var(--text-dim); } /* ---------- CARD / SURFACE ---------- */ .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); } .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:20px;} @media (max-width:640px){.grid-2{grid-template-columns:1fr;}} /* ---------- LINKTREE SECTION (BARU) ---------- */ .linktree{padding:60px 0;} .linktree-list{display:flex; flex-direction:column; gap:14px; max-width:460px; margin:26px auto 0;} .link-btn{ display:flex; align-items:center; gap:14px; padding:16px 20px; border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow); transition:transform .2s ease, border-color .2s ease, background .2s ease; font-weight:600; font-size:.98rem; } .link-btn:hover{transform:translateY(-3px) scale(1.01); border-color:var(--accent);} .link-btn .icon{ width:38px; height:38px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .link-btn .icon svg{width:19px; height:19px; fill:#fff;} .link-btn span.label{flex:1;} .link-btn .arrow{opacity:.5; font-size:1.1rem;} /* ---------- WAIFU / ALYA KUJOU SECTION (layout baru: teks kiri, foto kanan) ---------- */ .waifu-section{padding:60px 0;} .waifu-header{ display:grid; grid-template-columns:1.15fr 1fr; gap:20px; align-items:center; margin-bottom:34px; } .waifu-intro .eyebrow{display:flex; align-items:center; gap:8px;} .waifu-intro .eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0;} .waifu-title{ font-size:clamp(1.5rem,7.5vw,3.2rem); line-height:1.05; text-transform:uppercase; margin:8px 0 12px; } .waifu-title .line1{display:block; color:var(--text);} .waifu-title .line2{display:block;} .waifu-desc{color:var(--text-dim); max-width:440px; font-size:.95rem;} .waifu-banner{ position:relative; aspect-ratio:1/1; border-radius:20px; overflow:hidden; box-shadow:var(--shadow); background:var(--gradient); width:100%; } .waifu-banner img{width:100%; height:100%; object-fit:cover; transition:transform .45s cubic-bezier(.2,.8,.2,1);} .waifu-banner:hover img{transform:scale(1.08);} @media (max-width:600px){ .waifu-header{grid-template-columns:1fr; text-align:left;} } @media (max-width:480px){ .waifu-header{gap:16px;} .waifu-desc{font-size:.82rem; line-height:1.5;} .waifu-banner{border-radius:14px; max-width:320px; margin:0 auto;} } /* ---------- GALLERY GRID (foto-foto di bawah header waifu) ---------- */ .gallery-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; margin-top:22px;} @media (max-width:420px){ .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:10px;} } .gallery-grid figure{border-radius:var(--radius-sm); overflow:hidden; background:var(--surface); border:1px solid var(--border);} .gallery-grid img{aspect-ratio:3/4; object-fit:cover; width:100%; transition:transform .4s cubic-bezier(.2,.8,.2,1);} .gallery-grid figure:hover img{transform:scale(1.12);} .gallery-grid figcaption{padding:8px 10px; font-size:.78rem; color:var(--text-dim); text-align:center;} /* ---------- CONTACT ---------- */ .contact-box{text-align:center;} .contact-meta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:16px 0 24px; color:var(--text-dim); font-size:.9rem;} footer{padding:34px 0; text-align:center; color:var(--text-dim); font-size:.82rem; border-top:1px solid var(--border);} /* ---------- MUSIC WIDGET ---------- */ #music-widget{ position:fixed; bottom:20px; right:20px; z-index:60; width:56px; height:56px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow); border:none; } #music-widget svg{width:22px; height:22px; fill:#fff;} #music-widget.playing{animation:pulse 1.6s ease-in-out infinite;} @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(124,140,255,.55);}50%{box-shadow:0 0 0 12px rgba(124,140,255,0);}} /* ---------- SECTION TITLES ---------- */ .section-title{text-align:center; margin-bottom:8px;} .section-sub{text-align:center; color:var(--text-dim); max-width:520px; margin:0 auto 6px;} @media (max-width:640px){ .nav-toggle{ display:block; background:none; border:1px solid var(--border); color:var(--text); font-size:1.2rem; width:38px; height:38px; border-radius:8px; cursor:pointer; } .nav-links{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; background:var(--bg-alt); border-bottom:1px solid var(--border); padding:10px 22px 16px; gap:4px; } .nav-links.open{display:flex;} .nav-links a{padding:10px 4px; border-bottom:1px solid var(--border);} } .nav-toggle{display:none;} /* ---------- ANIMASI HOVER (kursor menunjuk, tanpa klik) — membesar halus di semua elemen interaktif & gambar ---------- */ .btn, .tag, .card, .link-btn, .theme-swatch, .gallery-grid figure, .nav-links a, .nav-brand, #music-widget, footer a, #contact-wa-btn, .nav-toggle{ transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease; } .btn:hover, .link-btn:hover, .theme-swatch:hover, #music-widget:hover, #contact-wa-btn:hover{ transform:translateY(-2px) scale(1.045); } .tag:hover{ transform:scale(1.08); border-color:var(--accent); color:var(--text); } .card:hover{ transform:scale(1.02); border-color:var(--accent); } .gallery-grid figure:hover{ border-color:var(--accent); } .nav-links a:hover{ transform:scale(1.08); } .nav-brand:hover{ transform:scale(1.04); } .nav-toggle:hover{ transform:scale(1.1); } /* elemen lain yang ikut membesar halus saat disentuh kursor (bukan gambar) */ .eyebrow, .tags .tag, .contact-meta span{ transition:transform .25s cubic-bezier(.2,.8,.2,1); } .contact-meta span:hover{ transform:scale(1.06); } /* di layar sentuh (HP), hover tidak berlaku — supaya sentuhan pertama tidak "nyangkut" di posisi membesar */ @media (hover:none){ .btn:hover, .link-btn:hover, .theme-swatch:hover, #music-widget:hover, #contact-wa-btn:hover, .tag:hover, .card:hover, .gallery-grid figure:hover img, .hero-photo:hover, .waifu-banner:hover img, .nav-links a:hover, .nav-brand:hover, .nav-toggle:hover, .contact-meta span:hover{ transform:none; } }