/* ========================================================= HIROKE NINKY — DESIGN TOKENS Half-demon hybrid creator: two halves, one seam. Ember/Arcane = the demon half. Circuit = the code half. ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Orbitron:wght@500;700;900&family=Sora:wght@300;400;500;600&display=swap'); :root{ --void: #0a0710; --void-2: #120a1c; --void-3: #1a1026; --ember: #e63950; --ember-dim: #7a1c2c; --arcane: #8b2fd1; --arcane-dim: #3f1660; --horn: #d4a857; --circuit: #2fe8d4; --circuit-dim: #14544d; --ash: #ede6ec; --ash-dim: #a79ab0; --ash-faint: #6e6278; --f-display: 'Cinzel', serif; --f-tech: 'Orbitron', sans-serif; --f-body: 'Sora', sans-serif; --seam-grad: linear-gradient(90deg, var(--ember) 0%, var(--horn) 48%, var(--circuit) 100%); --radius: 2px; --sigil-opacity: .05; --sigil-size: 340px; --sigil-tile: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22140%22%20height%3D%22140%22%20viewBox%3D%220%200%20140%20140%22%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%0A%3Ccircle%20cx%3D%2270%22%20cy%3D%2270%22%20r%3D%223%22%20fill%3D%22%23000%22%20stroke%3D%22none%22/%3E%0A%3Cpath%20d%3D%22M70%2040%20a10%2010%200%201%201%20-2%2019%22%20/%3E%0A%3Cpath%20d%3D%22M30%20100%20l10%20-14%20l12%204%22%20/%3E%0A%3Cpath%20d%3D%22M108%2034%20l-8%2012%20l-12%20-3%22%20/%3E%0A%3Cpath%20d%3D%22M20%2030%20l14%206%22%20/%3E%0A%3Cpath%20d%3D%22M112%20108%20l-14%20-6%22%20/%3E%0A%3C/g%3E%0A%3C/svg%3E"); } /* ========================================================= THEME: DAWN (light) — toggled via [data-theme="light"] on Same seams, different lighting: the rift by daylight. ========================================================= */ html[data-theme="light"]{ --void: #f4efe6; --void-2: #ffffff; --void-3: #e9e0d1; --ember: #c22a3f; --ember-dim: #f2b8bf; --arcane: #6d21a8; --arcane-dim: #d9c2f0; --horn: #96701f; --circuit: #0e8f80; --circuit-dim: #bfeee7; --ash: #221a2a; --ash-dim: #5b5064; --ash-faint: #8b8090; --sigil-opacity: .07; } html[data-theme="light"] body::before{ background: radial-gradient(ellipse 60% 40% at 20% 0%, rgba(109,33,168,.10), transparent 60%), radial-gradient(ellipse 50% 40% at 85% 100%, rgba(194,42,63,.08), transparent 60%), radial-gradient(ellipse 40% 30% at 90% 10%, rgba(14,143,128,.06), transparent 60%); } html{ transition: background .4s ease; } body, .seam-nav, .stat-card, .btn{ transition: background-color .4s ease, border-color .4s ease, color .4s ease; } *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ background:var(--void); color:var(--ash); font-family:var(--f-body); overflow-x:hidden; min-height:100vh; position:relative; } /* ambient backdrop: cracked void texture */ body::before{ content:''; position:fixed; inset:0; background: radial-gradient(ellipse 60% 40% at 20% 0%, rgba(139,47,209,.18), transparent 60%), radial-gradient(ellipse 50% 40% at 85% 100%, rgba(230,57,80,.14), transparent 60%), radial-gradient(ellipse 40% 30% at 90% 10%, rgba(47,232,212,.08), transparent 60%); pointer-events:none; z-index:0; } /* ========================================================= HIROKE NINKY SIGIL — merged glyph watermark One emblem, three scripts folded into it: the curled swashes echo aksara Jawa, the angled kicks echo Japanese strokes, the hexagram + interlocked H/N seam echo an old demon-ward sigil. ========================================================= */ body::after{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none; background-color: var(--ash); opacity: var(--sigil-opacity); -webkit-mask-image: var(--sigil-tile); mask-image: var(--sigil-tile); -webkit-mask-size: var(--sigil-size) var(--sigil-size); mask-size: var(--sigil-size) var(--sigil-size); -webkit-mask-repeat: repeat; mask-repeat: repeat; } .sigil-hero{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:.16; pointer-events:none; z-index:0; } .sigil-hero svg{ width:min(64vw,560px); height:min(64vw,560px); color:var(--ash); animation:sigil-breathe 9s ease-in-out infinite; } @keyframes sigil-breathe{ 0%,100%{ transform:scale(1); opacity:.9; } 50%{ transform:scale(1.03); opacity:1; } } .sigil-mark{ display:inline-block; } .sigil-mark svg{ width:100%; height:100%; color:currentColor; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; } img{ max-width:100%; display:block; } button{ font-family:inherit; cursor:pointer; } ::selection{ background:var(--ember); color:var(--void); } ::-webkit-scrollbar{ width:8px; } ::-webkit-scrollbar-track{ background:var(--void); } ::-webkit-scrollbar-thumb{ background:var(--seam-grad); border-radius:4px; } /* reduced motion */ @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* ========================================================= LOADING / RIFT SCREEN ========================================================= */ #rift-loader{ position:fixed; inset:0; z-index:9999; background:var(--void); display:flex; align-items:center; justify-content:center; flex-direction:column; transition:opacity .6s ease, visibility .6s ease; } #rift-loader.hidden{ opacity:0; visibility:hidden; pointer-events:none; } .rift-mark{ position:relative; width:180px; height:180px; } .rift-mark svg{ width:100%; height:100%; } .rift-ring{ transform-origin:50% 50%; animation:rift-spin 3s linear infinite; } .rift-ring.rev{ animation-direction:reverse; animation-duration:4.5s; } @keyframes rift-spin{ to{ transform:rotate(360deg); } } .rift-crack{ stroke-dasharray:340; stroke-dashoffset:340; animation:rift-draw 1.8s ease-out forwards infinite alternate; } @keyframes rift-draw{ to{ stroke-dashoffset:0; } } .rift-label{ margin-top:28px; font-family:var(--f-tech); letter-spacing:.35em; font-size:.72rem; color:var(--ash-dim); text-transform:uppercase; } .rift-label span{ background:var(--seam-grad); -webkit-background-clip:text; background-clip:text; color:transparent; } .rift-bar{ width:220px; height:2px; background:var(--void-3); margin-top:18px; overflow:hidden; position:relative; } .rift-bar i{ position:absolute; inset:0; background:var(--seam-grad); transform:translateX(-100%); animation:rift-load 2.2s ease-in-out infinite; } @keyframes rift-load{ 0%{transform:translateX(-100%);} 60%{transform:translateX(0%);} 100%{transform:translateX(100%);} } /* ========================================================= NAV ========================================================= */ .seam-nav{ position:sticky; top:0; z-index:500; display:flex; align-items:center; justify-content:space-between; padding:18px clamp(20px,5vw,64px); background:rgba(10,7,16,.72); backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.06); } .seam-nav .brand{ display:flex; align-items:center; gap:12px; font-family:var(--f-display); font-weight:700; letter-spacing:.08em; font-size:1.15rem; } .seam-nav .brand .mark{ width:34px; height:34px; } .seam-nav .brand .sub{ display:block; font-family:var(--f-tech); font-size:.55rem; letter-spacing:.3em; color:var(--circuit); font-weight:500; margin-top:2px; } .seam-links{ display:flex; gap:clamp(14px,2.5vw,34px); align-items:center; } .seam-links a{ position:relative; font-family:var(--f-tech); font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ash-dim); padding:6px 2px; transition:color .25s ease; } .seam-links a::after{ content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--seam-grad); transition:width .3s ease; } .seam-links a:hover, .seam-links a.active{ color:var(--ash); } .seam-links a:hover::after, .seam-links a.active::after{ width:100%; } .burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; } .burger span{ width:24px; height:2px; background:var(--ash); } /* ========================================================= NAV TOOLS — language switch + theme toggle ========================================================= */ .nav-tools{ display:flex; align-items:center; gap:14px; margin-left:clamp(10px,2vw,26px); } .lang-switch{ display:flex; border:1px solid rgba(255,255,255,.16); overflow:hidden; clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); } .lang-switch button{ background:transparent; border:none; color:var(--ash-dim); font-family:var(--f-tech); font-size:.62rem; letter-spacing:.14em; padding:7px 10px; transition:color .25s ease, background .25s ease; } .lang-switch button.active{ background:var(--seam-grad); color:var(--void); font-weight:700; } .lang-switch button:not(.active):hover{ color:var(--ash); } .theme-toggle{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.16); background:transparent; position:relative; flex:none; transition:border-color .25s ease, transform .25s ease; } .theme-toggle:hover{ border-color:var(--circuit); transform:rotate(20deg); } .theme-toggle svg{ width:17px; height:17px; color:var(--ash); } .theme-toggle .i-moon{ display:block; } .theme-toggle .i-sun{ display:none; } html[data-theme="light"] .theme-toggle .i-moon{ display:none; } html[data-theme="light"] .theme-toggle .i-sun{ display:block; } @media (max-width:820px){ .nav-tools{ margin-left:auto; margin-right:10px; } } @media (max-width:820px){ .seam-links{ position:fixed; inset:64px 0 0 0; background:var(--void-2); flex-direction:column; justify-content:flex-start; padding:40px 30px; gap:26px; transform:translateX(100%); transition:transform .4s ease; border-left:1px solid rgba(255,255,255,.08); } .seam-links.open{ transform:translateX(0); } .burger{ display:flex; } } /* ========================================================= BUTTONS — futuristic, animated ========================================================= */ .btn{ position:relative; display:inline-flex; align-items:center; gap:10px; font-family:var(--f-tech); font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ash); background:transparent; border:1px solid rgba(255,255,255,.18); padding:14px 26px; clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px); overflow:hidden; transition:border-color .3s ease, color .3s ease, transform .2s ease; isolation:isolate; } .btn::before{ content:''; position:absolute; inset:0; z-index:-1; background:var(--seam-grad); transform:translateX(-105%); transition:transform .45s cubic-bezier(.7,0,.2,1); } .btn:hover::before{ transform:translateX(0); } .btn:hover{ color:var(--void); border-color:transparent; transform:translateY(-2px); } .btn:active{ transform:translateY(0); } .btn.ghost{ border-color:var(--circuit); color:var(--circuit); } .btn.solid{ background:var(--seam-grad); color:var(--void); border-color:transparent; font-weight:700; } .btn.solid::before{ display:none; } .btn.small{ padding:9px 18px; font-size:.62rem; } .btn .ico{ width:16px; height:16px; } /* icon buttons (social) with pulse */ .icon-orb{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.15); position:relative; transition:transform .3s ease, border-color .3s ease; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.06), transparent 70%); } .icon-orb svg{ width:22px; height:22px; z-index:2; position:relative; } .icon-orb::after{ content:''; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--circuit); opacity:0; transition:opacity .3s ease, transform .3s ease; } .icon-orb:hover{ transform:translateY(-4px) scale(1.05); border-color:var(--circuit); } .icon-orb:hover::after{ opacity:.6; transform:scale(1.15); } .icon-orb.pulse::before{ content:''; position:absolute; inset:0; border-radius:50%; border:1px solid var(--ember); animation:orb-pulse 2.4s ease-out infinite; } @keyframes orb-pulse{ 0%{ transform:scale(.9); opacity:.9;} 100%{ transform:scale(1.7); opacity:0;} } /* ========================================================= FOOTER ========================================================= */ .seam-footer{ position:relative; z-index:1; padding:60px clamp(20px,5vw,64px) 30px; border-top:1px solid rgba(255,255,255,.06); margin-top:100px; } .seam-footer .foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:36px; } .seam-footer h4{ font-family:var(--f-tech); font-size:.7rem; letter-spacing:.2em; color:var(--circuit); margin-bottom:16px; text-transform:uppercase; } .seam-footer p, .seam-footer a{ color:var(--ash-dim); font-size:.88rem; line-height:1.9; } .seam-footer a:hover{ color:var(--ember); } .foot-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; padding-top:24px; border-top:1px solid rgba(255,255,255,.06); font-family:var(--f-tech); font-size:.65rem; letter-spacing:.12em; color:var(--ash-faint); } @media (max-width:700px){ .seam-footer .foot-grid{ grid-template-columns:1fr; } } /* ========================================================= SHARED UTILS ========================================================= */ .wrap{ max-width:1240px; margin:0 auto; padding:0 clamp(20px,5vw,64px); position:relative; z-index:1; } .eyebrow{ font-family:var(--f-tech); font-size:.68rem; letter-spacing:.35em; text-transform:uppercase; color:var(--circuit); display:flex; align-items:center; gap:12px; margin-bottom:18px; } .eyebrow::before{ content:''; width:26px; height:1px; background:var(--seam-grad); } .section-title{ font-family:var(--f-display); font-size:clamp(2rem,4.2vw,3.4rem); line-height:1.1; font-weight:700; } .grad-text{ background:var(--seam-grad); -webkit-background-clip:text; background-clip:text; color:transparent; } .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; } .reveal.in{ opacity:1; transform:translateY(0); } .stat-card{ border:1px solid rgba(255,255,255,.08); padding:22px 20px; background:rgba(255,255,255,.02); clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); } .stat-card .n{ font-family:var(--f-tech); font-size:1.9rem; font-weight:700; } .stat-card .l{ font-size:.72rem; letter-spacing:.15em; color:var(--ash-dim); text-transform:uppercase; margin-top:4px; } .live-dot{ width:7px; height:7px; border-radius:50%; background:var(--ember); display:inline-block; margin-right:6px; box-shadow:0 0 0 0 rgba(230,57,80,.6); animation:live-ping 1.6s infinite; } @keyframes live-ping{ 0%{box-shadow:0 0 0 0 rgba(230,57,80,.55);} 70%{box-shadow:0 0 0 8px rgba(230,57,80,0);} 100%{box-shadow:0 0 0 0 rgba(230,57,80,0);} } .cursor-fx{ position:fixed; width:22px; height:22px; border:1px solid var(--circuit); border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:width .2s, height .2s, border-color .2s; mix-blend-mode:difference; }