/* ============================================================ COMIKA — Shared components (reset, type, topbar, footer, theme) Load AFTER tokens.css. Same on every inner page = consistency. ============================================================ */ /* cross-document morph between pages */ @view-transition{ navigation:auto } /* theme toggle: new theme dissolves out from the toggle corner (JS-driven clip-path + fade). Keep old frame static beneath. Scoped to .theme-anim so cross-document navigation keeps its default. */ html.theme-anim::view-transition-old(root), html.theme-anim::view-transition-new(root){animation:none;mix-blend-mode:normal} html.theme-anim::view-transition-old(root){z-index:1} html.theme-anim::view-transition-new(root){z-index:9999} /* blokir semua transition saat halaman pertama kali render (anti-FOUC). Class ini di-set inline di setiap halaman, dilepas oleh shared.js setelah paint pertama selesai. */ html.no-trans,html.no-trans *{transition:none!important} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;overflow-x:hidden} body{font-family:var(--f-b);background:var(--bg);color:var(--ink);line-height:1.6; overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background-color .5s var(--ease),color .5s var(--ease)} img,svg,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font-family:inherit;color:inherit;border:none;background:none;cursor:pointer} ::selection{background:var(--cy);color:#04122a} /* page grain */ body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--grain-op);mix-blend-mode:var(--grain-blend); background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:150px} /* MOBILE PERF: a fixed full-screen grain (mix-blend) + backdrop-filter blur repaint on every scroll frame → main cause of jank on phones. Drop both. */ @media(max-width:640px){ body::after{display:none} .site-top{-webkit-backdrop-filter:none;backdrop-filter:none; background:color-mix(in srgb,var(--bg) 94%,transparent)} } @media(prefers-reduced-motion:reduce){body::after{display:none}} .container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.25rem,5vw,3.5rem)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ---------- shared type helpers ---------- */ .eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--b2)} .gtext{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.8rem;border-radius:8px;font-weight:700; font-size:.85rem;letter-spacing:.04em;white-space:nowrap;transition:transform .3s var(--ease),box-shadow .3s,background .3s,border-color .3s;cursor:pointer} .btn svg{width:17px;height:17px} .btn-cy{background:var(--cy);color:#04122a} .btn-cy:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--cy),0 12px 30px rgba(31,195,243,.3)} .btn-ghost{border:1px solid var(--line);color:var(--ink2)} .btn-ghost:hover{border-color:var(--b2);color:var(--b2);transform:translateY(-2px)} /* ---------- CTA band (shared everywhere — edit once) ---------- */ /* gradient panel + decorative ring + white primary button. Markup (satu konvensi): .cta-band > .cta-text + .cta-actions */ .cta-band{position:relative;overflow:hidden;border-radius:22px; margin:clamp(1.2rem,2.5vw,2rem) 0 clamp(1rem,2vw,1.6rem);padding:clamp(1.6rem,3.5vw,2.6rem); background:var(--grad);color:#fff; display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem} .cta-band::after{content:"";position:absolute;width:280px;height:280px;right:-70px;top:-90px; border-radius:50%;border:1.5px solid rgba(255,255,255,.2);pointer-events:none} .cta-band .cta-text{position:relative;z-index:1} .cta-band h2,.cta-band h3{font-family:var(--f-h);font-size:clamp(1.6rem,3.5vw,2.6rem);line-height:1.05;color:#fff;margin:0} .cta-band p{opacity:.92;margin-top:.5rem;max-width:46ch;font-size:.95rem;color:#fff} .cta-band .cta-actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:1rem} .cta-band .btn-cy{background:#fff;color:var(--b1)} .cta-band .btn-cy:hover{box-shadow:0 14px 34px rgba(0,0,0,.25);transform:translateY(-2px)} .cta-band .btn-ghost{border-color:rgba(255,255,255,.45);color:#fff} .cta-band .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff;transform:translateY(-2px)} @media(max-width:560px){.cta-band{flex-direction:column;align-items:flex-start} .cta-band .cta-actions{width:100%;flex-direction:column} .cta-band .cta-actions .btn{width:100%;justify-content:center}} /* ---------- reveal-on-scroll ---------- */ .r{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .r.in{opacity:1;transform:none} .r.d1{transition-delay:.08s}.r.d2{transition-delay:.16s}.r.d3{transition-delay:.24s}.r.d4{transition-delay:.32s} @media(prefers-reduced-motion:reduce){.r{opacity:1;transform:none;transition:none}} /* ============================================================ TOP BAR (injected by shared.js) ============================================================ */ .site-top{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between; padding:14px clamp(1.25rem,5vw,3.5rem); background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%); border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);transition:background .5s var(--ease)} .site-top .tl{display:flex;align-items:center;gap:16px} .site-top .logo img{height:34px;width:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.15))} .top-back{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:700;letter-spacing:.02em; color:var(--muted);padding:7px 14px;border-radius:99px;border:1px solid var(--line); transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease),transform .3s var(--ease),text-shadow .4s var(--ease)} .top-back svg{width:15px;height:15px} .top-back:hover{color:var(--b2);border-color:var(--b2);transform:translateX(-2px)} /* Over hero image (topbar transparent): pill glows white */ html:not(.topbar-solid) .top-back{ color:#fff; border-color:rgba(255,255,255,.38); text-shadow:0 0 14px rgba(255,255,255,.55),0 0 28px rgba(255,255,255,.2); } html:not(.topbar-solid) .top-back:hover{ color:#fff; border-color:rgba(255,255,255,.8); background:rgba(255,255,255,.1); text-shadow:0 0 18px rgba(255,255,255,.8),0 0 36px rgba(255,255,255,.3); } /* theme toggle (shared) */ .theme-toggle{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink2); background:color-mix(in srgb,var(--bg2) 78%,transparent);border:1px solid var(--line);box-shadow:var(--shadow); transition:transform .3s var(--ease),color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease)} .theme-toggle:hover{transform:rotate(-15deg) scale(1.07)} /* Over hero: toggle juga putih */ html:not(.topbar-solid) .theme-toggle{ color:#fff; border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.08); } html:not(.topbar-solid) .theme-toggle .bulb{color:rgba(255,255,255,.9)} .theme-toggle svg{width:18px;height:18px} /* bulb: light theme = mati (abu, garis hilang), dark = nyala (kuning + garis) */ .theme-toggle .bulb{color:var(--muted);transition:color .5s var(--ease)} .theme-toggle .rays{opacity:0;transition:opacity .5s var(--ease)} .theme-toggle .glass{fill:none;transition:fill .5s var(--ease)} [data-theme="dark"] .theme-toggle .bulb{color:#F4B400} [data-theme="dark"] .theme-toggle .rays{opacity:1} [data-theme="dark"] .theme-toggle .glass{fill:rgba(244,180,0,.2)} /* ============================================================ FOOTER (injected by shared.js) — identical on every page ============================================================ */ /* deep blue gradient + tech grid; light text so it reads in both themes */ .site-footer{position:relative;z-index:2;overflow:hidden;margin-top:clamp(2rem,4vw,3.5rem); background:linear-gradient(165deg,#091230 0%,#15295E 52%,#1E4286 100%); color:rgba(255,255,255,.72);border-top:1px solid rgba(31,195,243,.22)} .ft-grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5; background-image:linear-gradient(rgba(31,195,243,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(31,195,243,.18) 1px,transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 30%,#000,transparent 85%); mask-image:radial-gradient(ellipse 90% 80% at 50% 30%,#000,transparent 85%)} .ft-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.3fr 1.6fr 1.3fr;gap:clamp(2rem,4vw,3.4rem); padding:clamp(3rem,6vw,5rem) clamp(1.25rem,5vw,3.5rem) 2.4rem} @media(max-width:920px){.ft-inner{grid-template-columns:1fr 1fr;gap:2.4rem}.ft-map{grid-column:1/-1}} @media(max-width:560px){.ft-inner{grid-template-columns:1fr;gap:2.2rem}.ft-map{grid-column:auto}} .ft-brand .ft-logo{height:clamp(96px,11vw,126px);width:auto;margin-bottom:1.1rem} .ft-name{font-family:var(--f-h);font-size:clamp(1.3rem,2.4vw,1.7rem);letter-spacing:.04em;color:#fff;line-height:1.05} .ft-desc{font-size:.85rem;color:rgba(255,255,255,.6);margin-top:.35rem} .ft-socials{display:flex;gap:10px;margin-top:1.5rem} .ft-socials a{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center; border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.8);transition:.3s var(--ease)} .ft-socials a:hover{color:#04122a;background:var(--cy);border-color:var(--cy);transform:translateY(-3px);box-shadow:0 8px 22px rgba(31,195,243,.4)} .ft-socials svg{width:18px;height:18px} .ft-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem 1.6rem} .ft-col h5{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--cy);margin-bottom:1rem} .ft-col a{display:block;font-size:.86rem;color:rgba(255,255,255,.68);padding:.3rem 0;transition:color .25s,transform .25s var(--ease)} .ft-col a:hover{color:#fff;transform:translateX(3px)} .ft-map .ft-maptitle{display:flex;align-items:center;gap:.4rem;font-family:var(--f-h);font-size:1rem;color:#fff} .ft-map .ft-maptitle svg{width:18px;height:18px;color:var(--cy)} .ft-addr{font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.62);margin:.5rem 0 .9rem;max-width:30ch} .ft-mapframe{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.16);box-shadow:0 12px 34px rgba(0,0,0,.3)} .ft-mapframe iframe{display:block;width:100%;height:170px;border:0;filter:grayscale(.25) contrast(1.05)} .ft-bottom{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;align-items:center; padding:1.3rem clamp(1.25rem,5vw,3.5rem);border-top:1px solid rgba(255,255,255,.12);font-size:.76rem;color:rgba(255,255,255,.55)} .ft-bottom .gt{font-family:var(--f-h);color:var(--cy)} /* ============================================================ PAGE HERO scaffold (shared skeleton, per-page art on top) ============================================================ */ .page{padding-top:64px} /* clears fixed top bar */ .page-hero{padding:clamp(3rem,8vw,6.5rem) 0 clamp(2rem,4vw,3rem);position:relative} .page-hero h1{font-family:var(--f-h);font-size:clamp(2.4rem,7vw,5.5rem);line-height:.98;letter-spacing:-.02em;color:var(--ink2);margin:.7rem 0} .page-hero .lead{font-size:clamp(1rem,1.6vw,1.18rem);color:var(--muted);max-width:48ch} /* ============================================================ MOBILE FLOATING PILL NAV — frosted glass, bottom center Desktop: hidden. Mobile only (≤820px). ============================================================ */ @keyframes mnPillIn{ from{transform:translateX(-50%) translateY(80px);opacity:0} to {transform:translateX(-50%) translateY(0); opacity:1} } .mn-pill{display:none} @media(max-width:820px){ .mn-pill{ display:flex;align-items:center;justify-content:space-around; position:fixed;bottom:calc(10px + env(safe-area-inset-bottom,0px)); left:50%;transform:translateX(-50%); z-index:200; width:88vw; padding:3px 6px; /* light: gradient biru → cyan */ background:linear-gradient(135deg,rgba(8,38,120,.88) 0%,rgba(31,195,243,.82) 100%); -webkit-backdrop-filter:blur(28px) saturate(200%); backdrop-filter:blur(28px) saturate(200%); border:none; border-radius:99px; box-shadow: 0 4px 14px rgba(31,195,243,.18), 0 1px 5px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.22); white-space:nowrap; /* entrance: slide up — lambat, delay 2s */ animation:mnPillIn 1.5s cubic-bezier(0.16,1,0.3,1) both; animation-delay:1s; } /* dark mode: flip ke frosted white */ [data-theme="dark"] .mn-pill{ background:rgba(255,255,255,.75); -webkit-backdrop-filter:blur(28px) saturate(200%) brightness(1.06); backdrop-filter:blur(28px) saturate(200%) brightness(1.06); box-shadow: 0 4px 14px rgba(0,0,0,.16), 0 1px 5px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.95); } .mn-item{ display:flex;flex-direction:column;align-items:center;gap:4px; flex:1; padding:4px 4px;border-radius:99px; color:rgba(255,255,255,.65);text-decoration:none; font-family:var(--f-h);font-size:.58rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase; transition:color .2s,background .2s,transform .15s; -webkit-tap-highlight-color:transparent; } /* divider antara item */ .mn-item:not(:last-child){border-right:1px solid rgba(255,255,255,.22)} [data-theme="dark"] .mn-item:not(:last-child){border-right:1px solid rgba(0,0,0,.12)} [data-theme="dark"] .mn-item{color:rgba(0,0,0,.42)} .mn-item svg{width:20px;height:20px;stroke-width:1.75} .mn-item:active{transform:scale(.86)} /* sembunyikan tombol back di mobile — pill nav sudah cukup */ .top-back{display:none !important} /* breathing room so footer/content not hidden behind pill */ .page,.site-footer{padding-bottom:80px} }