/* ════════════════════════════════════════════════════════════════ Layanan BBGTK Jawa Barat — Site CSS Brand: #067ac1 (blue) + #f9a703 (gold) Token-driven. All values flow from :root vars. ════════════════════════════════════════════════════════════════ */ /* ── Tokens ─────────────────────────────────────────────────── */ :root { /* Brand */ --clr-blue: #067ac1; --clr-blue-dark: #044f7e; --clr-blue-deeper: #033a5d; --clr-blue-light: #2196d3; --clr-blue-pale: #dbeafe; --clr-blue-tint: #f4f9fd; --clr-gold: #f9a703; --clr-gold-dark: #d48a00; --clr-gold-light: #ffc947; --clr-gold-pale: #fdf2da; /* Neutrals */ --clr-white: #ffffff; --clr-off-white: #f9fafb; --clr-surface: #f3f4f6; --clr-border: #e5e7eb; --clr-border-dark: #d1d5db; /* Text */ --clr-text-primary: #0f172a; --clr-text-secondary: #334155; --clr-text-muted: #64748b; --clr-text-inverse: #ffffff; /* Status (admin) */ --st-antrian: #6b7280; --st-pending: #f9a703; --st-proses: #067ac1; --st-selesai: #1a8f4d; --st-ditolak: #d23b3b; --st-batal: #9ca3af; /* Label tints */ --tint-gratis-bg: #e6f4ec; --tint-gratis-fg: #1a8f4d; --tint-berbayar-bg: #fdf2da; --tint-berbayar-fg: #d48a00; --tint-kerjasama-bg: #e3f1fa; --tint-kerjasama-fg: #044f7e; /* Gradients */ --grad-primary: linear-gradient(135deg, #067ac1 0%, #0558a0 100%); --grad-hero: linear-gradient(170deg, rgba(3, 58, 93, 0.86) 0%, rgba(4, 79, 126, 0.6) 60%, rgba(6, 122, 193, 0.35) 100%); --grad-gold: linear-gradient(135deg, #f9a703 0%, #d48a00 100%); --grad-dark: linear-gradient(135deg, #033a5d 0%, #044f7e 60%, #067ac1 100%); /* Spacing */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; /* Layout */ --container-max: 1200px; --container-pad: clamp(1.25rem, 4vw, 2.5rem); --nav-h: 80px; --nav-h-scrolled: 64px; /* Radius */ --r-sm: 0.375rem; --r-md: 0.625rem; --r-lg: 1rem; --r-xl: 1.5rem; --r-2xl: 2rem; --r-pill: 9999px; /* Shadow */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05); --shadow-lg: 0 8px 32px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.06); --shadow-xl: 0 20px 60px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08); --shadow-gold: 0 4px 20px rgba(249,167,3,0.3); --shadow-card: 0 1px 4px rgba(0,0,0,0.06), 0 2px 10px rgba(0,0,0,0.05); --shadow-card-hover: 0 12px 36px rgba(0,0,0,0.12), 0 4px 14px rgba(0,0,0,0.06); --shadow-nav: 0 4px 24px rgba(0,0,0,0.14); /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --t-fast: 0.15s; --t-normal: 0.3s; --t-slow: 0.5s; /* Z-index */ --z-nav: 1000; --z-overlay: 1500; --z-modal: 2000; } /* ── Dark theme tokens ──────────────────────────────────────── Activated via . Flips neutrals, surfaces, borders, text. Keeps brand blue/gold (slight tint). ──────────────────────────────────────────────────────────── */ html[data-theme="dark"] { /* Brand (slightly desaturated/lighter for dark bg visibility) */ --clr-blue: #38BDF8; --clr-blue-dark: #0EA5E9; --clr-blue-deeper: #07314A; /* footer / dark-bg sections */ --clr-blue-light: #7DD3FC; --clr-blue-pale: #1E293B; --clr-blue-tint: #0F1924; /* tinted section bg in dark */ --clr-gold: #D4B07A; --clr-gold-dark: #B89360; --clr-gold-light: #E5C690; --clr-gold-pale: #1F1A12; /* Neutrals — flipped */ --clr-white: #0B0B0B; /* body / surface bg */ --clr-off-white: #121212; --clr-surface: #161616; --clr-border: rgba(255,255,255,0.08); --clr-border-dark: rgba(255,255,255,0.15); /* Text — flipped */ --clr-text-primary: #F5F5F5; --clr-text-secondary: #C7C7C7; --clr-text-muted: #8A8A8A; --clr-text-inverse: #0F172A; /* Status colors stay semantic but tweaked for dark bg */ --st-antrian: #94a3b8; --st-pending: #fbbf24; --st-proses: #38BDF8; --st-selesai: #34d399; --st-ditolak: #ef4444; --st-batal: #cbd5e1; /* Label tints — darker variants */ --tint-gratis-bg: rgba(52,211,153,0.12); --tint-gratis-fg: #34d399; --tint-berbayar-bg: rgba(212,176,122,0.15); --tint-berbayar-fg: #D4B07A; --tint-kerjasama-bg: rgba(56,189,248,0.12); --tint-kerjasama-fg: #7DD3FC; /* Gradients — re-mixed for dark */ --grad-primary: linear-gradient(135deg, #38BDF8 0%, #0E5C8A 100%); --grad-hero: linear-gradient(170deg, rgba(11,11,11,0.92) 0%, rgba(7,49,74,0.72) 60%, rgba(14,92,138,0.45) 100%); --grad-gold: linear-gradient(135deg, #D4B07A 0%, #B89360 100%); --grad-dark: linear-gradient(135deg, #0B0B0B 0%, #161616 60%, #1F2937 100%); /* Shadows — tweaked for dark (stronger, more contrast) */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2); --shadow-md: 0 4px 16px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.25); --shadow-lg: 0 8px 32px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3); --shadow-xl: 0 20px 60px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.4); --shadow-gold: 0 4px 20px rgba(212,176,122,0.25); --shadow-card: 0 1px 4px rgba(0,0,0,0.3), 0 2px 10px rgba(0,0,0,0.25); --shadow-card-hover: 0 12px 36px rgba(0,0,0,0.5), 0 4px 14px rgba(0,0,0,0.3); --shadow-nav: 0 4px 24px rgba(0,0,0,0.5); } /* Some elements use hardcoded #fff or rgba(255,255,255,...) — fix in dark */ html[data-theme="dark"] body { background: var(--clr-white); color: var(--clr-text-secondary); } html[data-theme="dark"] .section--tint { background: var(--clr-blue-tint); } html[data-theme="dark"] .card, html[data-theme="dark"] .c-card { background: var(--clr-surface); border-color: var(--clr-border); } html[data-theme="dark"] .c-card__title, html[data-theme="dark"] .c-card-kategori__title { color: var(--clr-text-primary); } html[data-theme="dark"] .c-card__summary, html[data-theme="dark"] .c-card-kategori__desc { color: var(--clr-text-secondary); } html[data-theme="dark"] .btn-ghost { background: transparent; border-color: rgba(255,255,255,0.18); color: var(--clr-text-primary); } html[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,0.05); border-color: var(--clr-blue); color: var(--clr-blue); } html[data-theme="dark"] .form-control, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="url"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: var(--clr-surface); border-color: var(--clr-border); color: var(--clr-text-primary); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--clr-text-muted); } /* c-alur (Cara Mengajukan) — dark mode override */ html[data-theme="dark"] .c-alur__rail { background: rgba(255,255,255,0.08); } html[data-theme="dark"] .c-step-card { background: var(--clr-surface); border-color: var(--clr-border); } html[data-theme="dark"] .c-step-card__num { background: var(--clr-off-white); border-color: var(--clr-border); color: var(--clr-text-secondary); } html[data-theme="dark"] .c-step-card.is-active .c-step-card__num { background: var(--grad-gold); color: #0B0B0B; } html[data-theme="dark"] .c-step-card.is-done .c-step-card__num { background: var(--clr-blue); color: #fff; } /* ============================================================ Reusable Page Ornaments — used on Privacy, Terms, Formulir, Cek Status, Kontak, Layanan Detail. Markup via _PageOrnaments partial. Parent must have [data-page-ornaments] attribute. ============================================================ */ [data-page-ornaments] { position: relative; isolation: isolate; overflow: hidden; --pgo-line: rgba(6, 122, 193, 0.14); --pgo-flow-a: #067ac1; --pgo-flow-b: #f9a703; --pgo-mesh-a: rgba(6, 122, 193, 0.06); --pgo-mesh-b: rgba(249, 167, 3, 0.05); } html[data-theme="dark"] [data-page-ornaments] { --pgo-line: rgba(125, 211, 252, 0.10); --pgo-flow-a: #38BDF8; --pgo-flow-b: #D4B07A; --pgo-mesh-a: rgba(56, 189, 248, 0.05); --pgo-mesh-b: rgba(212, 176, 122, 0.04); } [data-page-ornaments] > *:not(.pgo-bg__ornaments) { position: relative; z-index: 1; } .pgo-bg__ornaments { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .pgo-bg__ornaments > * { pointer-events: none; } .pgo-bg__grid { position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0); background-size: 32px 32px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 90%); -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 90%); } html[data-theme="light"] .pgo-bg__grid { background-image: radial-gradient(circle at 1px 1px, rgba(14,92,138,0.10) 1px, transparent 0); background-size: 30px 30px; mask-image: radial-gradient(ellipse at center, #000 40%, transparent 95%); -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 95%); opacity: 0.7; } .pgo-bg__mesh { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 40% at 15% 12%, var(--pgo-mesh-a), transparent 65%), radial-gradient(ellipse 50% 35% at 88% 28%, var(--pgo-mesh-b), transparent 60%), radial-gradient(ellipse 60% 30% at 22% 55%, var(--pgo-mesh-b), transparent 60%), radial-gradient(ellipse 55% 32% at 80% 72%, var(--pgo-mesh-a), transparent 60%); } .pgo-bg__svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.85; } html[data-theme="light"] .pgo-bg__svg { opacity: 1; } .pgo-bg__contour path { vector-effect: non-scaling-stroke; } .pgo-bg__ribbon { vector-effect: non-scaling-stroke; } .pgo-bg__orb { position: absolute; border-radius: 50%; filter: blur(80px); } .pgo-bg__orb--1 { width: 480px; height: 480px; top: -100px; right: -120px; background: radial-gradient(circle, rgba(56,189,248,0.22), transparent 70%); } .pgo-bg__orb--2 { width: 380px; height: 380px; top: 35%; left: -120px; background: radial-gradient(circle, rgba(212,176,122,0.18), transparent 70%); } .pgo-bg__orb--3 { width: 340px; height: 340px; bottom: -60px; right: 15%; background: radial-gradient(circle, rgba(56,189,248,0.16), transparent 70%); } html[data-theme="light"] .pgo-bg__orb { filter: blur(60px); } html[data-theme="light"] .pgo-bg__orb--1 { background: radial-gradient(circle, rgba(14,92,138,0.40), transparent 60%); } html[data-theme="light"] .pgo-bg__orb--2 { background: radial-gradient(circle, rgba(201,162,105,0.45), transparent 60%); } html[data-theme="light"] .pgo-bg__orb--3 { background: radial-gradient(circle, rgba(14,92,138,0.32), transparent 60%); } .pgo-bg__dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--clr-gold, #f9a703); box-shadow: 0 0 12px rgba(249,167,3,0.55); } .pgo-bg__dot--a { top: 14%; left: 22%; } .pgo-bg__dot--b { top: 28%; right: 26%; background: #38BDF8; box-shadow: 0 0 12px rgba(56,189,248,0.55); } .pgo-bg__dot--c { top: 56%; left: 18%; width: 4px; height: 4px; } .pgo-bg__dot--d { top: 78%; right: 18%; background: #38BDF8; box-shadow: 0 0 12px rgba(56,189,248,0.55); } .pgo-bg__dot--e { bottom: 22%; left: 30%; width: 5px; height: 5px; } .pgo-bg__dot--f { top: 42%; right: 12%; } html[data-theme="light"] .pgo-bg__dot { width: 8px; height: 8px; background: #A8814A; box-shadow: 0 0 14px rgba(168,129,74,0.7), 0 0 0 4px rgba(168,129,74,0.12); } html[data-theme="light"] .pgo-bg__dot--b, html[data-theme="light"] .pgo-bg__dot--d { background: #0E5C8A; box-shadow: 0 0 14px rgba(14,92,138,0.7), 0 0 0 4px rgba(14,92,138,0.12); } /* Navbar glassmorphism — light mode (true frosted glass) */ html[data-theme="light"] .site-nav, html:not([data-theme="dark"]) .site-nav { background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); border-bottom: 1px solid rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 24px rgba(15, 23, 42, 0.05); } html[data-theme="light"] .site-nav.is-scrolled, html:not([data-theme="dark"]) .site-nav.is-scrolled { background: rgba(255, 255, 255, 0.72); border-bottom-color: rgba(15, 23, 42, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 28px rgba(15, 23, 42, 0.08); } /* ── Reset / Base ───────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif; font-size: 1rem; line-height: 1.7; color: var(--clr-text-secondary); background: var(--clr-white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--clr-blue); text-decoration: none; transition: color var(--t-fast); } a:hover { color: var(--clr-blue-dark); } button { font-family: inherit; cursor: pointer; } h1, h2, h3, h4, h5, h6 { color: var(--clr-text-primary); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 var(--sp-4); } h1 { font-weight: 800; font-size: clamp(1.875rem, 4vw, 2.75rem); } h2 { font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.125rem); } h3 { font-size: clamp(1.125rem, 2vw, 1.5rem); } p { margin: 0 0 var(--sp-4); } [data-motion="reduced"] *, [data-motion="reduced"] *::before, [data-motion="reduced"] *::after { animation: none !important; transition-duration: 0.01ms !important; } /* ── Utilities ──────────────────────────────────────────────── */ .container { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--container-pad); } .section { padding-block: clamp(4rem, 9vw, 7rem); position: relative; } .section--tint { background: var(--clr-blue-tint); } .section--dark { background: var(--clr-blue-deeper); color: var(--clr-text-inverse); } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; } .prose { max-width: 72ch; } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } .u-img-brand { filter: saturate(0.85) contrast(1.05); } .skip-link { position: absolute; top: -100px; left: var(--sp-4); background: var(--clr-blue-deeper); color: #fff; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); z-index: 9999; font-weight: 600; } .skip-link:focus { top: var(--sp-4); color: #fff; } /* ── Section Header ─────────────────────────────────────────── */ .section-header { margin-bottom: clamp(2rem, 4vw, 3rem); } .section-header.center { text-align: center; } .section-header.center .section-subtitle { margin-inline: auto; } .section-label { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clr-blue); margin-bottom: var(--sp-3); } .section-label::before { content: ''; width: 28px; height: 3px; background: var(--grad-gold); border-radius: var(--r-pill); } .section--dark .section-label { color: var(--clr-gold); } .section-title { font-size: clamp(1.5rem, 3vw, 2.125rem); font-weight: 800; letter-spacing: -0.025em; color: var(--clr-text-primary); margin-bottom: var(--sp-3); } .section--dark .section-title { color: #fff; } .section-subtitle { font-size: 1.0625rem; color: var(--clr-text-secondary); max-width: 640px; line-height: 1.7; margin-bottom: 0; } .section--dark .section-subtitle { color: rgba(255,255,255,0.82); } /* ── Buttons ────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 1.5rem; font-size: 0.9375rem; font-weight: 700; line-height: 1; border-radius: var(--r-pill); border: 2px solid transparent; transition: transform var(--t-normal), box-shadow var(--t-normal), background var(--t-normal), color var(--t-normal), border-color var(--t-normal); text-decoration: none; cursor: pointer; white-space: nowrap; } .btn:hover { text-decoration: none; } .btn:focus-visible { outline: 3px solid var(--clr-gold); outline-offset: 3px; } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; } .btn:active { transform: scale(0.98); } .btn-gold { background: var(--grad-gold); color: var(--clr-blue-deeper); box-shadow: var(--shadow-gold); } .btn-gold:hover { transform: translateY(-2px); color: var(--clr-blue-deeper); box-shadow: 0 8px 28px rgba(249,167,3,0.4); } .btn-blue { background: var(--grad-primary); color: #fff; } .btn-blue:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 8px 24px rgba(6,122,193,0.35); } .btn-ghost { background: transparent; border-color: var(--clr-border-dark); color: var(--clr-text-primary); } .btn-ghost:hover { background: var(--clr-surface); border-color: var(--clr-blue); color: var(--clr-blue); } .btn-ghost-on-dark { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.4); color: #fff; backdrop-filter: blur(8px); } .btn-ghost-on-dark:hover { background: rgba(255,255,255,0.14); border-color: #fff; color: #fff; } .btn-sm { padding: 0.5rem 1rem; font-size: 0.8125rem; } .btn-lg { padding: 1.125rem 2.25rem; font-size: 1rem; } .btn-xl { padding: 1.25rem 2.5rem; font-size: 1.0625rem; } /* ── Navbar ─────────────────────────────────────────────────── */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); height: var(--nav-h); background: rgba(255,255,255,0.94); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--clr-border); transition: height var(--t-normal), background var(--t-normal), box-shadow var(--t-normal); } .site-nav.nav-transparent { background: transparent; border-bottom-color: transparent; } .site-nav.is-scrolled { height: var(--nav-h-scrolled); box-shadow: var(--shadow-nav); background: rgba(255,255,255,0.96); border-bottom-color: transparent; } .site-nav.nav-transparent.is-scrolled { background: rgba(3,58,93,0.92); } .nav-container { max-width: var(--container-max); height: 100%; margin: 0 auto; padding-inline: var(--container-pad); display: flex; align-items: center; gap: 0.625rem; flex-wrap: nowrap; } /* Right cluster spacing slightly tighter for visual cohesion */ .nav-container > .text-resize, .nav-container > .theme-toggle, .nav-container > .lang-switch, .nav-container > .nav-cta { margin-left: 0; } .nav-brand { display: flex; align-items: center; gap: var(--sp-3); color: var(--clr-text-primary); font-weight: 800; font-size: 0.9375rem; line-height: 1.15; text-decoration: none; } .nav-brand:hover { color: var(--clr-blue); } .site-nav.nav-transparent .nav-brand { color: #fff; } .site-nav.nav-transparent.is-scrolled .nav-brand { color: #fff; } .nav-brand-icon { width: 42px; height: 42px; background: var(--grad-primary); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.25rem; flex-shrink: 0; } .nav-brand-text { display: flex; flex-direction: column; white-space: nowrap; } .nav-brand-text > span, .nav-brand-text small { white-space: nowrap; } .nav-brand-text small { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--clr-text-muted); } .site-nav.nav-transparent .nav-brand-text small, .site-nav.nav-transparent.is-scrolled .nav-brand-text small { color: rgba(255,255,255,0.7); } .nav-menu { display: flex; align-items: center; gap: 0.125rem; list-style: none; padding: 0; margin: 0 auto; } .nav-menu .nav-link { display: inline-flex; align-items: center; padding: 0.625rem 0.75rem; font-size: 0.875rem; font-weight: 600; color: var(--clr-text-primary); border-radius: var(--r-md); position: relative; white-space: nowrap; transition: color var(--t-fast), background var(--t-fast); } .nav-menu .nav-link::after { content: ''; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.35rem; height: 2px; background: var(--clr-gold); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform var(--t-normal) var(--ease-out); } .nav-menu .nav-link:hover::after, .nav-menu .nav-link[aria-current="page"]::after { transform: scaleX(1); } .nav-menu .nav-link:hover { color: var(--clr-blue); } .site-nav.nav-transparent .nav-menu .nav-link, .site-nav.nav-transparent.is-scrolled .nav-menu .nav-link { color: #fff; } .site-nav.nav-transparent .nav-menu .nav-link:hover, .site-nav.nav-transparent.is-scrolled .nav-menu .nav-link:hover { color: var(--clr-gold); } .nav-cta { display: flex; align-items: center; gap: var(--sp-3); } /* Theme toggle button */ .theme-toggle { background: transparent; border: 1px solid var(--clr-border); border-radius: 50%; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--clr-text-secondary); font-size: 1rem; flex-shrink: 0; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast); } .theme-toggle:hover { background: var(--clr-surface); color: var(--clr-blue); transform: scale(1.08); } .theme-toggle:focus-visible { outline: 2px solid var(--clr-gold); outline-offset: 2px; } .site-nav.nav-transparent .theme-toggle { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.18); } .site-nav.nav-transparent .theme-toggle:hover { background: rgba(255,255,255,0.08); color: var(--clr-gold); } [data-theme-show] { display: none; } html[data-theme="dark"] [data-theme-show="dark"] { display: inline-block; } html[data-theme="light"] [data-theme-show="light"] { display: inline-block; } /* Brand logo (theme-aware swap) */ .brand-logo { height: 56px; width: auto; max-width: 240px; flex-shrink: 0; object-fit: contain; transition: height var(--t-fast); } .site-nav.is-scrolled .brand-logo { height: 46px; } .brand-logo--footer { height: 56px; max-width: 240px; } @media (max-width: 600px) { .brand-logo { height: 44px; max-width: 180px; } .site-nav.is-scrolled .brand-logo { height: 38px; } } /* Text resizer — single A button + dropdown menu */ .text-resize { position: relative; } .text-resize__toggle { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--clr-border); background: transparent; color: var(--clr-text-secondary); font-family: inherit; font-size: 1rem; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all var(--t-fast); } .text-resize__toggle:hover { background: var(--clr-surface); color: var(--clr-blue); border-color: var(--clr-blue-pale); } .text-resize.is-open .text-resize__toggle { background: var(--clr-blue); color: #fff; border-color: var(--clr-blue); } .text-resize__menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 160px; padding: 0.4rem; background: #fff; border: 1px solid var(--clr-border); border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15); display: none; flex-direction: column; gap: 0.15rem; z-index: calc(var(--z-nav) + 1); } .text-resize.is-open .text-resize__menu { display: flex; animation: tr-menu-in 0.18s var(--ease-out); } @keyframes tr-menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .text-resize__opt { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.55rem 0.75rem; background: transparent; border: 0; border-radius: 8px; font-family: inherit; font-size: 0.875rem; font-weight: 600; color: var(--clr-text-primary); cursor: pointer; text-align: left; transition: all var(--t-fast); } .text-resize__opt:hover { background: var(--clr-blue-pale); color: var(--clr-blue-deeper); } .text-resize__opt.is-active { background: var(--clr-blue); color: #fff; } .text-resize__opt.is-active .text-resize__opt-a { color: #fff; } .text-resize__opt-a { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--clr-surface); border-radius: 6px; font-weight: 800; color: var(--clr-text-primary); flex-shrink: 0; } .text-resize__opt:hover .text-resize__opt-a { background: rgba(255,255,255,0.5); } .text-resize__opt.is-active .text-resize__opt-a { background: rgba(255,255,255,0.2); } html[data-theme="dark"] .text-resize__toggle { border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.85); } html[data-theme="dark"] .text-resize__toggle:hover { background: rgba(255,255,255,0.06); color: var(--clr-blue-light); border-color: rgba(255,255,255,0.32); } html[data-theme="dark"] .text-resize.is-open .text-resize__toggle { background: var(--clr-blue); border-color: var(--clr-blue); color: #fff; } html[data-theme="dark"] .text-resize__menu { background: var(--clr-surface); border-color: var(--clr-border); box-shadow: 0 12px 32px rgba(0,0,0,0.5); } html[data-theme="dark"] .text-resize__opt-a { background: var(--clr-off-white); color: var(--clr-text-primary); } html[data-theme="dark"] .text-resize__opt:hover { background: rgba(56,189,248,0.12); color: var(--clr-blue-light); } html[data-text-size="small"] { font-size: 14px; } html[data-text-size="normal"] { font-size: 16px; } html[data-text-size="large"] { font-size: 18px; } @media (max-width: 991px) { .text-resize { display: none; } } /* Footer bottom links */ .footer-bottom-links { display: inline-flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .footer-bottom-sep { opacity: 0.4; } .footer-brand-sub { font-size: 0.75rem; font-weight: 500; color: rgba(255,255,255,0.6); margin-top: 0.15rem; } html[data-theme="light"] .footer-brand-sub, html:not([data-theme="dark"]) .footer-brand-sub { color: var(--clr-text-muted); } /* ── Dark mode: navbar transparent globally ───────────────── */ html[data-theme="dark"] .site-nav { background: transparent; border-bottom-color: transparent; } html[data-theme="dark"] .site-nav.is-scrolled { background: rgba(11, 11, 11, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: rgba(255, 255, 255, 0.06); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); } html[data-theme="dark"] .nav-brand, html[data-theme="dark"] .nav-brand:hover { color: #fff; } html[data-theme="dark"] .nav-brand-text small { color: rgba(255, 255, 255, 0.6); } html[data-theme="dark"] .nav-menu .nav-link { color: rgba(255, 255, 255, 0.85); } html[data-theme="dark"] .nav-menu .nav-link:hover { color: var(--clr-gold); } html[data-theme="dark"] .nav-menu .nav-link::after { background: var(--clr-gold); } html[data-theme="dark"] .nav-burger { color: #fff; border-color: rgba(255, 255, 255, 0.18); } html[data-theme="dark"] .nav-burger:hover { background: rgba(255, 255, 255, 0.06); } html[data-theme="dark"] .lang-switch { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); } html[data-theme="dark"] .lang-switch__opt { color: rgba(255, 255, 255, 0.65); } html[data-theme="dark"] .lang-switch__opt:hover { color: var(--clr-gold); } html[data-theme="dark"] .lang-switch__opt.is-active { background: rgba(255, 255, 255, 0.92); color: rgb(11, 11, 11); } html[data-theme="dark"] .theme-toggle { color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.18); } html[data-theme="dark"] .theme-toggle:hover { background: rgba(255, 255, 255, 0.06); color: var(--clr-gold); border-color: rgba(255, 255, 255, 0.32); } .nav-burger { display: none; width: 44px; height: 44px; background: transparent; border: 1px solid var(--clr-border); border-radius: var(--r-md); align-items: center; justify-content: center; color: var(--clr-text-primary); font-size: 1.25rem; } .site-nav.nav-transparent .nav-burger { color: #fff; border-color: rgba(255,255,255,0.3); } .nav-mobile { position: fixed; inset: 0; background: var(--clr-blue-deeper); z-index: var(--z-overlay); display: none; flex-direction: column; padding: var(--sp-8) var(--container-pad); overflow-y: auto; } .nav-mobile.is-open { display: flex; } .nav-mobile-close { align-self: flex-end; background: transparent; border: 0; color: #fff; font-size: 1.5rem; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; } .nav-mobile-menu { display: flex; flex-direction: column; gap: 0.5rem; margin-block: var(--sp-6); flex: 1; } .nav-mobile-menu a { color: #fff; padding: 1rem var(--sp-4); font-size: 1.125rem; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.1); } .nav-mobile-menu a:hover { color: var(--clr-gold); } .nav-mobile-cta { padding-top: var(--sp-4); } .nav-mobile-cta .btn { width: 100%; } @media (max-width: 991px) { .nav-menu, .nav-cta { display: none; } .nav-burger { display: inline-flex; margin-left: auto; } .nav-container { gap: var(--sp-3); } } /* Very small screens: hide secondary toggles so brand + theme + burger fit cleanly. */ @media (max-width: 480px) { .theme-toggle { width: 36px; height: 36px; font-size: 0.875rem; } } @media (max-width: 360px) { .theme-toggle { display: none; } } /* ── Announcement bar ───────────────────────────────────────── */ .announcement-bar { background: var(--clr-gold); color: var(--clr-blue-deeper); padding: 0.6rem 1rem; text-align: center; font-size: 0.875rem; font-weight: 600; position: fixed; top: 0; left: 0; right: 0; z-index: calc(var(--z-nav) + 1); border-bottom: 1px solid rgba(15,23,42,0.08); } .announcement-bar a { color: var(--clr-blue-deeper); text-decoration: underline; } .site-nav.has-announcement { top: 42px; } /* ── Scroll to top ──────────────────────────────────────────── */ .scroll-top { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 48px; height: 48px; border-radius: 50%; background: var(--grad-primary); color: #fff; border: 0; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; box-shadow: var(--shadow-lg); z-index: 900; opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity var(--t-normal), transform var(--t-normal), background var(--t-fast); } .scroll-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .scroll-top:hover { background: var(--clr-blue-dark); } .scroll-top:focus-visible { outline: 3px solid var(--clr-gold); outline-offset: 2px; } /* Nav brand icon shrink with sticky */ .site-nav.is-scrolled .nav-brand-icon { width: 36px; height: 36px; font-size: 1rem; } /* ── Language switcher ──────────────────────────────────────── */ .lang-switch { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--r-pill); } .site-nav:not(.nav-transparent) .lang-switch { background: var(--clr-surface); border-color: var(--clr-border); } .lang-switch__opt { background: transparent; border: 0; color: rgba(255,255,255,0.7); padding: 0.35rem 0.75rem; font-size: 0.75rem; font-weight: 700; border-radius: var(--r-pill); cursor: pointer; letter-spacing: 0.05em; transition: all var(--t-fast); } .site-nav:not(.nav-transparent) .lang-switch__opt { color: var(--clr-text-muted); } .lang-switch__opt:hover { color: var(--clr-gold); } .lang-switch__opt.is-active { background: var(--clr-blue); color: #fff; } .site-nav:not(.nav-transparent) .lang-switch__opt.is-active { background: var(--clr-blue); color: #fff; } .lang-switch__opt:focus-visible { outline: 2px solid var(--clr-gold); outline-offset: 2px; } @media (max-width: 991px) { .lang-switch { display: none; } } /* ── Hero ───────────────────────────────────────────────────── */ .hero { position: relative; min-height: 92vh; display: flex; align-items: center; padding-top: calc(var(--nav-h) + 2rem); padding-bottom: var(--sp-16); overflow: hidden; background: var(--clr-blue-deeper); color: #fff; } .hero__photo { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; will-change: transform; } .hero__overlay { position: absolute; inset: 0; background: linear-gradient(170deg, rgba(3,58,93,0.92) 0%, rgba(4,79,126,0.78) 55%, rgba(6,122,193,0.45) 100%); z-index: 1; } .hero__orbs { position: absolute; inset: 0; pointer-events: none; z-index: 2; } .hero__orb { position: absolute; border-radius: 50%; filter: blur(80px); will-change: transform; } .hero__orb--back { width: 640px; height: 640px; background: rgba(33,150,211,0.18); top: -200px; right: -180px; } .hero__orb--mid { width: 480px; height: 480px; background: rgba(249,167,3,0.12); bottom: -160px; left: -120px; } .hero__orb--front { width: 320px; height: 320px; background: rgba(6,122,193,0.18); top: 30%; left: 40%; } .hero__content { position: relative; z-index: 3; width: 100%; max-width: 920px; margin: 0 auto; padding-inline: var(--container-pad); } .hero__eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clr-gold); margin-bottom: var(--sp-5); } .hero__eyebrow::before { content: ''; width: 28px; height: 3px; background: var(--clr-gold); border-radius: var(--r-pill); } .hero__title { font-size: clamp(2.25rem, 5.5vw, 3.75rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; color: #fff; margin-bottom: var(--sp-5); text-shadow: 0 2px 16px rgba(0,0,0,0.25); } .hero__title-accent { background: linear-gradient(135deg, #f9a703 0%, #ffc947 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero__subtitle { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.65; color: rgba(255,255,255,0.88); max-width: 640px; margin-bottom: var(--sp-8); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); } /* ── Card (layanan-card) ────────────────────────────────────── */ .c-card { display: flex; flex-direction: column; background: #fff; border-radius: var(--r-lg); border: 1px solid var(--clr-border); box-shadow: var(--shadow-card); overflow: hidden; transition: transform var(--t-normal), box-shadow var(--t-normal); text-decoration: none; color: inherit; position: relative; height: 100%; } .c-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); text-decoration: none; color: inherit; } .c-card:focus-visible { outline: 3px solid var(--clr-gold); outline-offset: 2px; } .c-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--grad-primary); overflow: hidden; } .c-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out); } .c-card:hover .c-card__media img { transform: scale(1.06); } .c-card__media--empty { display: flex; align-items: center; justify-content: center; background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.18), transparent 50%), radial-gradient(circle at 80% 70%, rgba(249,167,3,0.18), transparent 50%), var(--grad-primary); color: rgba(255,255,255,0.55); font-size: 3.5rem; font-weight: 900; letter-spacing: -0.03em; } .c-card__body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; gap: var(--sp-3); } .c-card__title { font-size: 1.0625rem; font-weight: 700; color: var(--clr-text-primary); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; } .c-card__summary { font-size: 0.9375rem; color: var(--clr-text-secondary); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; } .c-card__more { margin-top: auto; font-size: 0.875rem; font-weight: 700; color: var(--clr-blue); display: inline-flex; align-items: center; gap: 0.25rem; } .c-card:hover .c-card__more { color: var(--clr-blue-dark); } .c-card__label { position: absolute; top: 0.875rem; left: 0.875rem; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); box-shadow: var(--shadow-sm); } /* Kategori card */ .c-card-kategori { display: grid; grid-template-columns: 1.4fr 1fr; background: var(--grad-dark); color: #fff; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); text-decoration: none; position: relative; transition: transform var(--t-normal), box-shadow var(--t-normal); } .c-card-kategori:hover { transform: translateY(-3px); box-shadow: var(--shadow-xl); color: #fff; } .c-card-kategori__body { padding: clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: var(--sp-4); position: relative; z-index: 1; } .c-card-kategori__eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clr-gold); display: inline-flex; align-items: center; gap: 0.5rem; } .c-card-kategori__title { font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 800; color: #fff; margin: 0; } .c-card-kategori__desc { font-size: 0.9375rem; color: rgba(255,255,255,0.82); line-height: 1.65; margin: 0; } .c-card-kategori__count { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; background: rgba(249,167,3,0.18); border: 1px solid rgba(249,167,3,0.4); color: var(--clr-gold); font-size: 0.75rem; font-weight: 700; border-radius: var(--r-pill); width: fit-content; } .c-card-kategori__cta { margin-top: auto; align-self: flex-start; } .c-card-kategori__visual { position: relative; background-image: radial-gradient(circle at 30% 30%, rgba(249,167,3,0.2), transparent 60%), radial-gradient(circle at 70% 70%, rgba(33,150,211,0.3), transparent 60%); min-height: 200px; overflow: hidden; } .c-card-kategori__visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 30px 30px; } @media (max-width: 768px) { .c-card-kategori { grid-template-columns: 1fr; } .c-card-kategori__visual { min-height: 120px; order: -1; } } /* Grids */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 2.5vw, 1.75rem); } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); } .grid-mixed-5 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); } @media (max-width: 991px) { .grid-3, .grid-mixed-5, .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .grid-3, .grid-mixed-5, .grid-4, .grid-2 { grid-template-columns: 1fr; } } /* ── Badges ─────────────────────────────────────────────────── */ .c-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.75rem; font-size: 0.75rem; font-weight: 700; border-radius: var(--r-pill); letter-spacing: 0.02em; border: 1px solid transparent; text-decoration: none; white-space: nowrap; } .c-badge--gratis { background: var(--tint-gratis-bg); color: var(--tint-gratis-fg); border-color: rgba(26,143,77,0.2); } .c-badge--berbayar { background: var(--tint-berbayar-bg); color: var(--tint-berbayar-fg); border-color: rgba(212,138,0,0.25); } .c-badge--kerjasama { background: var(--tint-kerjasama-bg); color: var(--tint-kerjasama-fg); border-color: rgba(4,79,126,0.2); } .c-badge--sm { padding: 0.2rem 0.55rem; font-size: 0.6875rem; } /* ── Footer ─────────────────────────────────────────────────── */ .site-footer { background: #FAF7F0; /* light: cream (continues page bg) */ color: var(--clr-text-secondary); border-top: 1px solid rgba(15, 23, 42, 0.08); padding-block: var(--sp-16) 0; margin-top: var(--sp-16); } html[data-theme="dark"] .site-footer { background: #0B0B0B; /* dark: matches page bg */ color: rgba(255, 255, 255, 0.7); border-top-color: rgba(255, 255, 255, 0.06); } /* Light-mode footer text colors (override dark-bg defaults) */ html[data-theme="light"] .footer-brand, html:not([data-theme="dark"]) .footer-brand { color: var(--clr-text-primary); } html[data-theme="light"] .footer-brand .nav-brand-icon, html:not([data-theme="dark"]) .footer-brand .nav-brand-icon { background: var(--grad-primary); } html[data-theme="light"] .footer-desc, html:not([data-theme="dark"]) .footer-desc { color: var(--clr-text-secondary); } html[data-theme="light"] .footer-heading, html:not([data-theme="dark"]) .footer-heading { color: var(--clr-text-primary); } html[data-theme="light"] .footer-links a, html:not([data-theme="dark"]) .footer-links a { color: var(--clr-text-secondary); } html[data-theme="light"] .footer-links a:hover, html:not([data-theme="dark"]) .footer-links a:hover { color: var(--clr-blue); } html[data-theme="light"] .footer-contact-list li, html:not([data-theme="dark"]) .footer-contact-list li { color: var(--clr-text-secondary); } html[data-theme="light"] .footer-contact-list i, html:not([data-theme="dark"]) .footer-contact-list i { color: var(--clr-blue); } html[data-theme="light"] .footer-bottom, html:not([data-theme="dark"]) .footer-bottom { border-top-color: rgba(15, 23, 42, 0.08); color: var(--clr-text-muted); } html[data-theme="light"] .footer-bottom a, html:not([data-theme="dark"]) .footer-bottom a { color: var(--clr-text-secondary); } html[data-theme="light"] .footer-bottom a:hover, html:not([data-theme="dark"]) .footer-bottom a:hover { color: var(--clr-blue); } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: var(--sp-10); margin-bottom: var(--sp-12); } @media (max-width: 991px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } } @media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } } .footer-brand { display: flex; align-items: center; gap: var(--sp-3); color: #fff; font-weight: 800; font-size: 1.0625rem; text-decoration: none; margin-bottom: var(--sp-4); } .footer-brand .nav-brand-icon { background: rgba(255,255,255,0.1); } .footer-desc { font-size: 0.875rem; color: rgba(255,255,255,0.7); line-height: 1.7; max-width: 320px; } .footer-heading { font-size: 0.875rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; margin-bottom: var(--sp-4); } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: var(--sp-2); } .footer-links a { font-size: 0.9375rem; color: rgba(255,255,255,0.75); display: inline-flex; align-items: center; gap: 0.4rem; } .footer-links a:hover { color: var(--clr-gold); } .footer-contact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); } .footer-contact-list li { display: flex; gap: var(--sp-3); font-size: 0.875rem; color: rgba(255,255,255,0.75); line-height: 1.5; } .footer-contact-list i { color: var(--clr-gold); flex-shrink: 0; margin-top: 0.2rem; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-block: var(--sp-5); font-size: 0.8125rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); color: rgba(255,255,255,0.6); } .footer-bottom a { color: rgba(255,255,255,0.7); } .footer-bottom a:hover { color: var(--clr-gold); } /* ── Breadcrumbs ────────────────────────────────────────────── */ .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.8125rem; color: var(--clr-text-muted); margin-bottom: var(--sp-5); } .breadcrumb a { color: var(--clr-text-muted); } .breadcrumb a:hover { color: var(--clr-blue); } .breadcrumb__sep { opacity: 0.5; } .breadcrumb__current { color: var(--clr-text-primary); font-weight: 600; } /* ── Page sub-hero ──────────────────────────────────────────── */ .page-hero { padding-top: calc(var(--nav-h) + 3.5rem); padding-bottom: var(--sp-12); background: var(--grad-dark); color: #fff; position: relative; overflow: hidden; } .page-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 18% 50%, rgba(33,150,211,0.18), transparent 50%), radial-gradient(circle at 82% 30%, rgba(249,167,3,0.12), transparent 50%); } .page-hero .container { position: relative; z-index: 1; } .page-hero h1 { color: #fff; margin-bottom: var(--sp-3); } .page-hero p { color: rgba(255,255,255,0.85); max-width: 640px; margin: 0; line-height: 1.65; } .page-hero .breadcrumb { color: rgba(255,255,255,0.7); margin-bottom: var(--sp-5); } .page-hero .breadcrumb a { color: rgba(255,255,255,0.7); } .page-hero .breadcrumb a:hover { color: var(--clr-gold); } .page-hero .breadcrumb__current { color: #fff; } /* ── Detail Hero ────────────────────────────────────────────── */ .detail-hero { padding-top: calc(var(--nav-h) + 3rem); padding-bottom: var(--sp-12); background: var(--clr-blue-deeper); color: #fff; position: relative; overflow: hidden; } .detail-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; will-change: transform; } .detail-hero__overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(3,58,93,0.85) 0%, rgba(4,79,126,0.7) 100%); z-index: 1; } .detail-hero .container { position: relative; z-index: 2; } .detail-hero h1 { color: #fff; font-size: clamp(1.75rem, 4vw, 2.75rem); } .detail-hero p { color: rgba(255,255,255,0.88); } /* ── Step Card (Alur) ───────────────────────────────────────── */ .c-alur { position: relative; padding-block: clamp(4rem, 9vw, 7rem); max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } .c-alur__rail { position: absolute; left: calc(var(--container-pad) + 36px); right: calc(var(--container-pad) + 36px); top: calc(clamp(4rem, 9vw, 7rem) + 30px); height: 6px; background: rgba(6,122,193,0.10); border: 1px solid rgba(6,122,193,0.18); border-radius: var(--r-pill); overflow: hidden; z-index: 0; } .c-alur__rail-fill { width: 20%; height: 100%; background: var(--grad-gold); border-radius: var(--r-pill); transition: width 0.6s var(--ease-out); box-shadow: 0 0 14px rgba(249,167,3,0.5); } .c-alur__steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); position: relative; z-index: 1; } @media (max-width: 991px) { .c-alur__steps { grid-template-columns: 1fr; gap: var(--sp-5); } .c-alur__rail { left: calc(var(--container-pad) + 28px); right: auto; top: 0; bottom: 0; width: 6px; height: auto; } .c-alur__rail-fill { width: 100% !important; height: 20%; transition: height 0.6s var(--ease-out); } } .c-step-card { background: #fff; border-radius: var(--r-lg); border: 1px solid var(--clr-border); padding: var(--sp-6) var(--sp-4); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); position: relative; box-shadow: var(--shadow-card); transition: transform var(--t-normal), box-shadow var(--t-normal), border-color var(--t-normal); } .c-step-card__num { width: 56px; height: 56px; border-radius: 50%; background: var(--clr-surface); border: 2px solid var(--clr-border); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 900; color: var(--clr-text-muted); transition: all var(--t-normal); } .c-step-card__title { font-size: 0.9375rem; font-weight: 700; color: var(--clr-text-primary); margin: 0; line-height: 1.35; } .c-step-card__desc { font-size: 0.8125rem; color: var(--clr-text-secondary); margin: 0; line-height: 1.55; } .c-step-card__check { position: absolute; top: 0.75rem; right: 0.75rem; width: 24px; height: 24px; border-radius: 50%; background: var(--clr-gold); color: #fff; display: none; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 900; } .c-step-card.is-active { transform: scale(1.04); border-color: var(--clr-gold); box-shadow: 0 0 0 3px rgba(249,167,3,0.2), var(--shadow-lg); } .c-step-card.is-active .c-step-card__num { background: var(--grad-gold); color: var(--clr-blue-deeper); border-color: transparent; } .c-step-card.is-done .c-step-card__num { background: var(--clr-blue); color: #fff; border-color: transparent; } .c-step-card.is-done .c-step-card__check { display: flex; } /* ── Form Stepper ───────────────────────────────────────────── */ .c-stepper { max-width: 760px; margin: 0 auto; } .c-stepper__head { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; list-style: none; padding: 0; margin: 0 0 var(--sp-3); } .c-stepper__dot { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; font-size: 0.8125rem; font-weight: 600; color: var(--clr-text-muted); text-align: center; } .c-stepper__dot span { width: 36px; height: 36px; border-radius: 50%; background: var(--clr-surface); color: var(--clr-text-muted); display: flex; align-items: center; justify-content: center; font-weight: 800; border: 2px solid var(--clr-border); transition: all var(--t-normal); } .c-stepper__dot.is-current span { background: var(--clr-blue); color: #fff; border-color: var(--clr-blue); box-shadow: 0 0 0 4px rgba(6,122,193,0.15); } .c-stepper__dot.is-current { color: var(--clr-blue); } .c-stepper__dot.is-done span { background: var(--clr-gold); color: var(--clr-blue-deeper); border-color: var(--clr-gold); } .c-stepper__bar { height: 4px; background: var(--clr-surface); border-radius: var(--r-pill); overflow: hidden; margin-bottom: var(--sp-8); } .c-stepper__bar-fill { height: 100%; width: 33%; background: var(--grad-primary); transition: width var(--t-slow) var(--ease-out); } .c-stepper__panel { display: none; } .c-stepper__panel.is-current { display: block; animation: panelIn 0.25s var(--ease-out); } @keyframes panelIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } } .c-stepper__panel h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: var(--sp-2); } .c-stepper__panel-lead { color: var(--clr-text-muted); margin-bottom: var(--sp-6); font-size: 0.9375rem; } .c-stepper__nav { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--clr-border); } .c-stepper__nav .btn { min-width: 140px; } /* Form fields */ .c-field { margin-bottom: var(--sp-5); } .c-field__label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--clr-text-primary); margin-bottom: var(--sp-2); } .c-field__req { color: var(--clr-gold-dark); margin-left: 0.15rem; } .c-field__optional { color: var(--clr-text-muted); font-weight: 500; font-size: 0.75rem; margin-left: 0.35rem; } .c-field__input, .c-field__textarea, .c-field__select { width: 100%; min-height: 48px; padding: 0.75rem 1rem; font-size: 1rem; font-family: inherit; background: #fff; color: var(--clr-text-primary); border: 1.5px solid var(--clr-border-dark); border-radius: var(--r-md); transition: border-color var(--t-fast), box-shadow var(--t-fast); } .c-field__textarea { min-height: 110px; resize: vertical; padding: 0.85rem 1rem; line-height: 1.55; } .c-field__input:focus, .c-field__textarea:focus, .c-field__select:focus { outline: 0; border-color: var(--clr-blue); box-shadow: 0 0 0 3px rgba(6,122,193,0.15); } .c-field.has-error .c-field__input, .c-field.has-error .c-field__textarea, .c-field.has-error .c-field__select { border-color: var(--st-ditolak); box-shadow: 0 0 0 3px rgba(210,59,59,0.1); } .c-field__hint { font-size: 0.8125rem; color: var(--clr-text-muted); margin-top: var(--sp-1); } .c-field__error { font-size: 0.8125rem; color: var(--st-ditolak); margin-top: var(--sp-1); display: flex; align-items: center; gap: 0.3rem; font-weight: 600; } .c-field__error::before { content: '⚠'; } .c-field--checkbox { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4); background: var(--clr-blue-tint); border: 1px solid var(--clr-blue-pale); border-radius: var(--r-md); } .c-field--checkbox input { width: 20px; height: 20px; margin-top: 0.15rem; accent-color: var(--clr-blue); flex-shrink: 0; } .c-field--checkbox label { font-size: 0.9375rem; font-weight: 500; color: var(--clr-text-primary); line-height: 1.5; cursor: pointer; } .c-field--file { position: relative; } .c-field--file label.c-field__drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-6); border: 2px dashed var(--clr-border-dark); border-radius: var(--r-md); background: var(--clr-off-white); text-align: center; cursor: pointer; transition: all var(--t-fast); } .c-field--file label.c-field__drop:hover { border-color: var(--clr-blue); background: var(--clr-blue-tint); } .c-field--file label.c-field__drop.has-file { border-style: solid; border-color: #10b981; background: rgba(16,185,129,0.06); } .c-field--file label.c-field__drop.has-file b { color: #047857; word-break: break-all; } .c-field--file input[type="file"] { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; max-height: 100%; opacity: 0; cursor: pointer; z-index: 1; pointer-events: auto; } /* When input is a child of the drop label, scope its overlay to the label only */ .c-field--file label.c-field__drop > input[type="file"] { position: absolute; inset: 0; height: auto; } .c-field__filechip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; background: var(--clr-blue-pale); color: var(--clr-blue-dark); border-radius: var(--r-pill); font-size: 0.8125rem; font-weight: 600; margin-top: var(--sp-2); } /* Confirmation summary */ .c-summary { background: var(--clr-off-white); border-radius: var(--r-md); padding: var(--sp-5); border: 1px solid var(--clr-border); } .c-summary__group { margin-bottom: var(--sp-5); } .c-summary__group:last-child { margin-bottom: 0; } .c-summary__group-title { font-size: 0.875rem; font-weight: 700; color: var(--clr-blue); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--sp-3); } .c-summary__row { display: grid; grid-template-columns: 200px 1fr; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--clr-border); font-size: 0.9375rem; } .c-summary__row:last-child { border-bottom: 0; } .c-summary__row dt { color: var(--clr-text-muted); font-weight: 500; margin: 0; } .c-summary__row dd { color: var(--clr-text-primary); font-weight: 600; margin: 0; word-break: break-word; } .c-summary__disclaimer { font-size: 0.875rem; color: var(--clr-text-secondary); background: var(--clr-gold-pale); border: 1px solid rgba(249,167,3,0.3); border-radius: var(--r-md); padding: var(--sp-4); margin-top: var(--sp-4); line-height: 1.6; } @media (max-width: 640px) { .c-summary__row { grid-template-columns: 1fr; gap: 0.25rem; } } /* ── Status timeline ────────────────────────────────────────── */ .c-timeline { list-style: none; padding: 0; margin: 0; position: relative; } .c-timeline::before { content: ''; position: absolute; top: 0; bottom: 0; left: 13px; width: 2px; background: var(--clr-border); } .c-timeline__node { position: relative; padding-left: 44px; padding-bottom: var(--sp-6); } .c-timeline__node:last-child { padding-bottom: 0; } .c-timeline__dot { position: absolute; left: 0; top: 0.1rem; width: 28px; height: 28px; border-radius: 50%; background: var(--clr-surface); border: 3px solid var(--clr-border-dark); } .c-timeline__node.is-current .c-timeline__dot { background: #fff; border-color: var(--clr-blue); box-shadow: 0 0 0 4px rgba(6,122,193,0.18); } .c-timeline__node.is-done .c-timeline__dot { background: var(--clr-blue); border-color: var(--clr-blue); } .c-timeline__node.is-rejected .c-timeline__dot { background: var(--st-ditolak); border-color: var(--st-ditolak); } .c-timeline__node.is-cancelled .c-timeline__dot { background: var(--st-batal); border-color: var(--st-batal); } .c-timeline__label { font-size: 0.9375rem; font-weight: 700; color: var(--clr-text-primary); margin: 0 0 0.2rem; } .c-timeline__node.is-current .c-timeline__label { color: var(--clr-blue); } .c-timeline__time { font-size: 0.8125rem; color: var(--clr-text-muted); } .c-timeline__note { font-size: 0.875rem; color: var(--clr-text-secondary); margin-top: 0.4rem; line-height: 1.55; } /* ── CTA Band ──────────────────────────────────────────────── */ .cta-band { background: var(--grad-gold); padding-block: clamp(3rem, 7vw, 5rem); position: relative; overflow: hidden; text-align: center; } .cta-band::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px); background-size: 40px 40px; } .cta-band > .container { position: relative; z-index: 1; } .cta-band h2 { color: var(--clr-blue-deeper); font-weight: 800; } .cta-band p { color: rgba(15,23,42,0.78); max-width: 600px; margin: 0 auto var(--sp-6); font-size: 1.0625rem; line-height: 1.65; } /* Hero search */ .c-search { position: relative; max-width: 640px; margin-block: var(--sp-6); } .c-search__input { width: 100%; height: 64px; padding: 0 var(--sp-12) 0 3.25rem; font-size: 1rem; font-family: inherit; background: rgba(255,255,255,0.97); border: 1.5px solid rgba(255,255,255,0.3); border-radius: var(--r-pill); box-shadow: 0 8px 32px rgba(0,0,0,0.18); backdrop-filter: blur(12px); color: var(--clr-text-primary); } .c-search__input:focus { outline: 3px solid var(--clr-gold); outline-offset: 2px; } .c-search__icon { position: absolute; top: 50%; left: 1.25rem; transform: translateY(-50%); color: var(--clr-text-muted); font-size: 1.125rem; pointer-events: none; } .c-search__submit { position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%); background: var(--grad-gold); color: var(--clr-blue-deeper); border: 0; border-radius: var(--r-pill); height: 48px; padding: 0 1.25rem; font-weight: 700; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.4rem; } .c-search__submit:hover { transform: translateY(-50%) scale(1.04); } .c-search__list { position: absolute; top: calc(100% + 0.5rem); left: 0; right: 0; background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-xl); max-height: 320px; overflow-y: auto; z-index: 50; display: none; list-style: none; padding: var(--sp-2); margin: 0; } .c-search__list.is-open { display: block; } .c-search__list li { padding: 0.6rem 0.75rem; border-radius: var(--r-sm); cursor: pointer; font-size: 0.9375rem; color: var(--clr-text-primary); } .c-search__list li:hover, .c-search__list li.is-active { background: var(--clr-blue-pale); color: var(--clr-blue-dark); } /* Mini Alur strip (Beranda) */ .c-mini-alur { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); position: relative; } .c-mini-alur::before { content: ''; position: absolute; top: 30px; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, var(--clr-blue-pale), var(--clr-gold-pale)); border-radius: var(--r-pill); z-index: 0; } .c-mini-alur__step { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); } .c-mini-alur__num { width: 60px; height: 60px; border-radius: 50%; background: #fff; border: 2px solid var(--clr-border); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 900; color: var(--clr-blue); box-shadow: var(--shadow-card); } .c-mini-alur__step:hover .c-mini-alur__num { border-color: var(--clr-gold); color: var(--clr-gold-dark); } .c-mini-alur__label { font-size: 0.8125rem; font-weight: 700; color: var(--clr-text-primary); line-height: 1.35; } @media (max-width: 991px) { .c-mini-alur { grid-template-columns: 1fr; gap: var(--sp-4); } .c-mini-alur::before { display: none; } .c-mini-alur__step { flex-direction: row; text-align: left; } } /* Legend */ .c-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); background: var(--clr-off-white); border: 1px solid var(--clr-border); border-radius: var(--r-md); font-size: 0.875rem; align-items: center; } .c-legend__item { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--clr-text-secondary); } /* Success banner */ .c-banner-success { background: linear-gradient(135deg, rgba(26,143,77,0.1), rgba(26,143,77,0.04)); border: 1px solid rgba(26,143,77,0.3); border-left: 4px solid var(--st-selesai); border-radius: var(--r-md); padding: var(--sp-5); margin-bottom: var(--sp-6); } .c-banner-success__title { font-weight: 800; color: var(--st-selesai); margin-bottom: 0.4rem; } .c-banner-success__code { display: inline-block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 1.125rem; font-weight: 800; background: #fff; color: var(--clr-blue-deeper); padding: 0.4rem 0.85rem; border-radius: var(--r-sm); border: 1px solid var(--clr-border); margin-top: var(--sp-3); } /* Empty state */ .c-empty { padding: var(--sp-12) var(--sp-6); text-align: center; } .c-empty__icon { font-size: 3rem; color: var(--clr-border-dark); margin-bottom: var(--sp-3); } .c-empty p { color: var(--clr-text-muted); font-size: 0.9375rem; margin: 0; } /* Service detail content */ .detail-section { margin-bottom: var(--sp-10); } .detail-section h2 { font-size: 1.375rem; font-weight: 700; color: var(--clr-blue-deeper); margin-bottom: var(--sp-4); padding-bottom: var(--sp-2); border-bottom: 2px solid var(--clr-gold); display: inline-block; } .detail-section ul { padding-left: 1.25rem; line-height: 1.8; } .detail-section ol { padding-left: 1.25rem; line-height: 1.8; } .detail-faq { display: flex; flex-direction: column; gap: var(--sp-3); } .detail-faq__item { background: #fff; border: 1px solid var(--clr-border); border-radius: var(--r-md); overflow: hidden; } .detail-faq__q { width: 100%; text-align: left; background: none; border: 0; padding: var(--sp-4) var(--sp-5); font-weight: 700; color: var(--clr-text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); } .detail-faq__q:hover { background: var(--clr-off-white); } .detail-faq__a { padding: 0 var(--sp-5) var(--sp-4); color: var(--clr-text-secondary); line-height: 1.7; display: none; } .detail-faq__item.is-open .detail-faq__a { display: block; } .detail-faq__item.is-open .detail-faq__q { color: var(--clr-blue); } /* Stat strip (compact) */ .stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.1); border-radius: var(--r-xl); overflow: hidden; backdrop-filter: blur(12px); } .stat-strip__item { background: rgba(255,255,255,0.05); padding: var(--sp-5) var(--sp-4); text-align: center; } .stat-strip__num { font-size: 1.75rem; font-weight: 900; color: #fff; line-height: 1; margin-bottom: 0.3rem; } .stat-strip__num sup { font-size: 0.875rem; color: var(--clr-gold); } .stat-strip__label { font-size: 0.75rem; color: rgba(255,255,255,0.7); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } @media (max-width: 600px) { .stat-strip { grid-template-columns: 1fr; } } /* Cek Status lookup */ .lookup-card { background: #fff; border: 1px solid var(--clr-border); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: var(--shadow-card); max-width: 640px; margin: 0 auto; } .lookup-card form { display: flex; gap: var(--sp-3); align-items: stretch; } .lookup-card input { flex: 1; min-height: 52px; padding: 0 var(--sp-4); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; background: var(--clr-off-white); border: 1.5px solid var(--clr-border-dark); border-radius: var(--r-md); color: var(--clr-text-primary); } .lookup-card input:focus { outline: 0; border-color: var(--clr-blue); box-shadow: 0 0 0 3px rgba(6,122,193,0.15); background: #fff; } @media (max-width: 600px) { .lookup-card form { flex-direction: column; } } /* ── Admin Kanban ───────────────────────────────────────────── */ .kanban-board { display: grid; grid-template-columns: repeat(6, minmax(280px, 1fr)); gap: var(--sp-4); overflow-x: auto; padding-bottom: var(--sp-4); } .c-kanban-col { background: var(--clr-off-white); border: 1px solid var(--clr-border); border-radius: var(--r-md); border-top: 4px solid var(--col-stripe, var(--clr-text-muted)); padding: var(--sp-3); min-height: 320px; display: flex; flex-direction: column; } .c-kanban-col__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); border-bottom: 1px solid var(--clr-border); } .c-kanban-col__head h2 { font-size: 0.875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--clr-text-primary); margin: 0; } .c-kanban-col__count { background: var(--clr-surface); color: var(--clr-text-muted); padding: 0.15rem 0.55rem; border-radius: var(--r-pill); font-size: 0.75rem; font-weight: 700; } .c-kanban-col__list { flex: 1; display: flex; flex-direction: column; gap: var(--sp-3); min-height: 80px; } .c-kanban-col__empty { color: var(--clr-text-muted); font-size: 0.8125rem; text-align: center; padding: var(--sp-6) var(--sp-3); border: 1px dashed var(--clr-border-dark); border-radius: var(--r-sm); } .c-kanban-col.is-over { background: var(--clr-blue-tint); } .c-kanban-card { background: #fff; border: 1px solid var(--clr-border); border-radius: var(--r-md); padding: var(--sp-3); cursor: grab; transition: border-color var(--t-fast), box-shadow var(--t-fast); box-shadow: var(--shadow-sm); } .c-kanban-card:hover { border-color: var(--clr-blue); box-shadow: var(--shadow-md); } .c-kanban-card:focus-visible { outline: 3px solid var(--clr-gold); outline-offset: 2px; } .c-kanban-card.is-ghost { opacity: 0.5; border-style: dashed; } .c-kanban-card.is-dragging { opacity: 0.9; box-shadow: var(--shadow-lg); cursor: grabbing; } .c-kanban-card.is-saving { background: linear-gradient(90deg, #fff 50%, rgba(6,122,193,0.06) 50%); background-size: 200% 100%; animation: cardShimmer 1.2s linear infinite; } .c-kanban-card.is-error { border-color: var(--st-ditolak); animation: cardError 0.6s; } @keyframes cardShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } } @keyframes cardError { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } .c-kanban-card__code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 0.8125rem; color: var(--clr-blue-deeper); display: block; margin-bottom: 0.3rem; } .c-kanban-card__who { font-size: 0.8125rem; color: var(--clr-text-secondary); margin: 0 0 var(--sp-2); line-height: 1.4; } .c-kanban-card__meta { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px dashed var(--clr-border); font-size: 0.75rem; color: var(--clr-text-muted); flex-wrap: wrap; } .c-chip-staff { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--grad-primary); color: #fff; font-size: 0.6875rem; font-weight: 800; } .c-kanban-filter { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; padding: var(--sp-4); background: #fff; border: 1px solid var(--clr-border); border-radius: var(--r-md); margin-bottom: var(--sp-5); } .c-kanban-filter select, .c-kanban-filter input { min-height: 38px; padding: 0 var(--sp-3); font-size: 0.875rem; border: 1px solid var(--clr-border-dark); border-radius: var(--r-sm); background: #fff; color: var(--clr-text-primary); } .c-kanban-filter input[type="search"] { min-width: 180px; } /* Drawer */ .drawer-scrim { position: fixed; inset: 0; background: rgba(15,23,42,0.5); z-index: var(--z-modal); display: none; } .drawer-scrim.is-open { display: block; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: #fff; z-index: calc(var(--z-modal) + 1); transform: translateX(100%); transition: transform var(--t-normal) var(--ease-out); overflow-y: auto; box-shadow: var(--shadow-xl); padding: var(--sp-5); } .drawer.is-open { transform: translateX(0); } .drawer__close { position: absolute; top: var(--sp-3); right: var(--sp-3); background: var(--clr-surface); border: 0; width: 36px; height: 36px; border-radius: 50%; font-size: 1.125rem; } /* ════════════════════════════════════════════════════════════════ RESPONSIVE SAFETY NET — applies to ALL public pages. Only kicks in below desktop breakpoint, never touches ≥992px. These rules fix common mobile breakage WITHOUT overriding the desktop layouts/animations on individual pages. ════════════════════════════════════════════════════════════════ */ @media (max-width: 991px) { /* Container side padding scales tighter on mobile */ :root { --container-pad: clamp(1rem, 4vw, 1.5rem); } /* Prevent horizontal overflow caused by wide hero/section content */ html, body { overflow-x: hidden; } /* Hero scale down — keeps composition without making title huge */ .hero { min-height: 80vh; } .hero__title { font-size: clamp(1.75rem, 6vw, 2.5rem); } .hero__subtitle { font-size: 1rem; } .hero__actions .btn { width: 100%; justify-content: center; } .hero__actions { gap: 0.75rem; } /* Page hero (sub-pages) compact spacing */ .page-hero { padding-top: calc(var(--nav-h) + 2rem); padding-bottom: var(--sp-8); } .page-hero h1 { font-size: clamp(1.5rem, 5vw, 2rem); } /* Form stepper: stack head dots vertically too cramped at <600px — keep grid but reduce padding */ .c-stepper__head { gap: 0.25rem; } .c-stepper__dot { font-size: 0.6875rem; } .c-stepper__dot span { width: 30px; height: 30px; font-size: 0.75rem; } .c-stepper__nav .btn { min-width: 0; flex: 1; } /* CTA band scaled */ .cta-band { padding-block: clamp(2.5rem, 8vw, 4rem); } /* Footer grid — already handled, but tighten gap */ .footer-grid { gap: var(--sp-6); } /* Cards in grids: ensure min-width doesn't cause overflow */ .grid-3, .grid-4, .grid-mixed-5, .grid-2 { gap: 1rem; } /* Scroll-to-top button smaller, closer to edge */ .scroll-top { width: 42px; height: 42px; bottom: 1rem; right: 1rem; font-size: 1.125rem; } /* Tables on detail/cek-status: allow horizontal scroll */ table { display: block; max-width: 100%; overflow-x: auto; } } @media (max-width: 640px) { /* Smaller body font on phones for better reading */ body { font-size: 0.9375rem; } /* Form stepper head fully vertical/wrap allowed */ .c-stepper__head { grid-template-columns: repeat(3, 1fr); gap: 0.125rem; } .c-stepper__dot { padding: 0; } .c-stepper__dot > :not(span) { display: none; } /* hide step label, keep number */ /* Hero stat strip cramped — full column */ .stat-strip { grid-template-columns: 1fr !important; } /* Section padding tighter */ .section { padding-block: clamp(2.5rem, 8vw, 4rem); } }