/* ============================================================ OMNIWARGA - dunia visual "MADING RT" (landing) Token & font bersama ada di tokens.css (di- dari HTML). Kontrak arah: seed 539e13af (komentar di index.html) ============================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--wall); color: var(--cream); font-family: var(--font-body); font-size: clamp(16px, 1.05vw + 12px, 18px); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--red); color: var(--paper); } :focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 2px; } .hero :focus-visible, .demo :focus-visible, .hitung :focus-visible, .kontak :focus-visible, .topbar :focus-visible, .footer :focus-visible { outline-color: var(--cream); } /* ---- scrollbar & caret ikut dunia ---- */ html { scrollbar-color: var(--wood) var(--wall-deep); scrollbar-width: thin; } ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: var(--wall-deep); } ::-webkit-scrollbar-thumb { background: var(--wood); border-radius: 6px; border: 2px solid var(--wall-deep); } input[type='range'] { caret-color: var(--red); } .wrap { max-width: 1180px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 44px); } .skip-link { position: absolute; left: 16px; top: -60px; z-index: 99; background: var(--paper); color: var(--ink); padding: 10px 16px; border-radius: 4px; font-weight: 700; text-decoration: none; transition: top 0.2s ease-out; } .skip-link:focus { top: 12px; } .mono-note { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.09em; color: var(--cream-70); font-variant-numeric: tabular-nums; } .dark-note { color: var(--ink-soft); } .ic { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.125em; flex: none; } /* ---------------- tipografi ---------------- */ .display, .display-sm { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 0.98; letter-spacing: 0.002em; text-wrap: balance; } .display { font-size: clamp(46px, 7vw, 92px); } .display-sm { font-size: clamp(34px, 4.6vw, 60px); } .display em, .display-sm em, .statement-h em { font-style: normal; color: var(--cream); position: relative; white-space: nowrap; } .statement-h em { color: var(--ink); } .statement-h em::after, .display em::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0.04em; height: 0.14em; background: var(--red); z-index: -1; } .lede { max-width: 54ch; color: var(--cream-70); font-size: 1.06em; } h2 + p, h3 + p { max-width: 62ch; } /* section spacing: lebih lapang di atas heading */ .sec-head { display: grid; gap: 18px; margin-bottom: clamp(40px, 5vw, 64px); } .sec-head p { color: var(--cream-70); } /* ---------------- tombol ---------------- */ .btn { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1rem; line-height: 1; padding: 17px 26px; border-radius: 8px; text-decoration: none; cursor: pointer; border: 0; font-family: var(--font-body); transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, background-color 0.15s ease-out; } .btn-solid { background: var(--red); color: var(--btn-text); box-shadow: var(--shadow-soft); } .btn-solid:hover { background: var(--red-deep); transform: translateY(-1px); box-shadow: var(--shadow-lift); } .btn-solid:active { transform: translateY(0); } .btn-wa { background: var(--green); color: var(--btn-text); box-shadow: var(--shadow-soft); } .btn-wa:hover { background: var(--green-deep); transform: translateY(-1px); box-shadow: var(--shadow-lift); } .btn-wa:active { transform: translateY(0); } .btn-ghost { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 2px var(--line-on-wall); } .btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--cream-70); transform: translateY(-1px); } .btn-ghost-dark { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--paper-edge); } .btn-ghost-dark:hover { box-shadow: inset 0 0 0 2px var(--ink-soft); transform: translateY(-1px); } .btn-sm { padding: 12px 18px; font-size: 0.92rem; border-radius: 6px; } .btn-lg { padding: 20px 32px; font-size: 1.05rem; } .cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } /* ---------------- topbar ---------------- */ .topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px clamp(20px, 4vw, 44px); background: rgba(18, 54, 46, 0.94); border-bottom: 1px solid var(--line-on-wall); } .brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--cream); } .brand-mark { width: 38px; height: 38px; border-radius: 8px; background: var(--red); color: var(--btn-text); display: grid; place-items: center; font-size: 1.25rem; box-shadow: inset 0 -2px 0 rgba(10,26,22,.3); } .brand-word { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.02em; text-transform: uppercase; } .topnav { display: flex; gap: clamp(14px, 2.4vw, 30px); } .topnav a { color: var(--cream-70); text-decoration: none; font-weight: 600; font-size: 0.95rem; text-underline-offset: 5px; } .topnav a:hover { color: var(--cream); text-decoration: underline; } @media (max-width: 880px) { .topnav { display: none; } } /* ---------------- hero ---------------- */ .hero { padding-top: clamp(48px, 7vh, 90px); padding-bottom: var(--sp); overflow-x: clip; } .hero-grid { display: grid; grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.08fr); gap: clamp(36px, 5vw, 72px); align-items: center; } .hero-copy { display: grid; gap: 26px; justify-items: start; } .hero-facts { display: grid; gap: 10px; border-top: 1px solid var(--line-on-wall); padding-top: 22px; margin-top: 6px; } .hero-facts div { display: flex; gap: 14px; align-items: baseline; } .hero-facts dt { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.09em; color: var(--cream-70); min-width: 64px; } .hero-facts dd { font-size: 0.92rem; font-weight: 600; } /* ---- PAPAN MADING ---- */ .mading { margin: 0; display: grid; gap: 14px; } .board { position: relative; background: repeating-linear-gradient(0deg, rgba(10,26,22,.08) 0 2px, transparent 2px 26px), linear-gradient(160deg, var(--felt), var(--felt-deep) 70%); border: 14px solid transparent; border-image: repeating-linear-gradient(90deg, var(--wood-dark) 0 6px, var(--wood) 6px 14px, var(--wood-light) 14px 18px, var(--wood) 18px 30px) 14; outline: 2px solid var(--wood-dark); border-radius: 6px; box-shadow: var(--shadow-lift), inset 0 0 60px rgba(6, 20, 16, 0.55); padding: clamp(28px, 4vw, 56px); min-height: 640px; } .glass { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(247, 240, 222, 0.075) 0%, rgba(247, 240, 222, 0.02) 34%, transparent 42%); border-radius: 4px; } .notice { position: relative; display: grid; gap: 7px; justify-items: start; background: var(--paper); color: var(--ink); padding: 18px 18px 15px; width: min(100%, 250px); text-decoration: none; box-shadow: var(--shadow-soft); border: 1px solid var(--paper-edge); transition: transform 0.18s ease-out, box-shadow 0.18s ease-out; } .notice strong { font-size: 1rem; line-height: 1.3; letter-spacing: -0.01em; } .notice .small { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.45; } .notice:hover, .notice:focus-visible { transform: translateY(-5px) rotate(var(--rot, 0deg)); box-shadow: var(--shadow-lift); z-index: 3; } .notice .pin { position: absolute; top: -7px; left: 50%; translate: -50% 0; width: 15px; height: 15px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, var(--pin-light), var(--red-deep) 68%); box-shadow: 0 3px 4px rgba(10, 26, 22, 0.45), inset 0 -1px 2px rgba(10,26,22,.3); } .chip { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--btn-text); padding: 4px 8px; border-radius: 4px; } .chip-orange { background: var(--orange); } .chip-amber { background: var(--amber-deep); } .chip-red { background: var(--red); } .chip-gold { background: var(--gold-deep); } /* emas cetak gelap: teks kecil tetap AA */ .chip-green { background: var(--green); } .stamp-line { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--ink-soft); font-style: normal; border-top: 1px dashed var(--paper-edge); padding-top: 7px; width: 100%; } .bar { position: relative; width: 100%; height: 10px; background: rgba(38, 33, 23, 0.14); border-radius: 99px; overflow: hidden; } .bar i { position: absolute; inset: 0 auto 0 0; width: var(--w, 50%); background: var(--amber-deep); border-radius: inherit; } .n-kas .bar i { background: var(--amber-deep); } .qr { width: 52px; height: 52px; fill: var(--ink); margin-top: 2px; } .qr path { fill: var(--ink); } .qr-sm { width: 34px; height: 34px; } .qr-sm path { fill: var(--ink); } /* penempatan notis pada papan */ .n-komunitas { --rot: -1.6deg; position: absolute; left: 4%; top: 7%; rotate: -1.6deg; } .n-kas { --rot: 1.2deg; position: absolute; right: 5%; top: 9%; rotate: 1.2deg; width: min(100%, 245px); } .n-surat { --rot: -1deg; position: absolute; left: 6%; top: 50%; rotate: -1deg; z-index: 3; width: min(100%, 240px); } .n-dkm { --rot: 1.8deg; position: absolute; right: 4%; top: 54%; rotate: 1.8deg; width: min(100%, 235px); } .n-posyandu { --rot: 0.8deg; position: absolute; left: 37%; top: 29%; rotate: 0.8deg; z-index: 2; width: min(100%, 225px); } @keyframes pin-in { from { opacity: 0; translate: 0 -16px; scale: 0.97; } to { opacity: 1; translate: 0 0; scale: 1; } } .notice { animation: pin-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) backwards; } .n-komunitas { animation-delay: 0.05s; } .n-kas { animation-delay: 0.18s; } .n-posyandu { animation-delay: 0.31s; } .n-surat { animation-delay: 0.44s; } .n-dkm { animation-delay: 0.57s; } .agenda { position: absolute; left: 4%; right: 4%; bottom: 4.5%; list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: rgba(9, 26, 21, 0.72); border: 1px solid var(--line-on-wall); border-radius: 6px; overflow: hidden; z-index: 4; } .agenda li { position: relative; display: grid; place-items: center; gap: 1px; padding: 9px 4px 8px; color: var(--cream-70); border-right: 1px dashed rgba(240, 233, 214, 0.18); } .agenda li:last-child { border-right: 0; } .agenda .d { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; } .agenda .n { font-family: var(--font-mono); font-weight: 600; font-size: 0.95rem; color: var(--cream); } .agenda .tag { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.09em; background: var(--red); color: var(--btn-text); padding: 2px 6px; border-radius: 4px; margin-top: 3px; } .agenda li.today { background: rgba(181, 115, 23, 0.2); } .agenda li.today .n { color: var(--gold-light); } @keyframes today-pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.55 } } .agenda li.today .tag { animation: today-pulse 2.6s ease-in-out infinite; } .agenda li.event { box-shadow: inset 0 0 0 2px rgba(181, 115, 23, 0.55); } #madingCap { text-align: center; } @media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } .board { min-height: 0; display: grid; gap: 26px 18px; padding: 30px 18px 84px; } .notice { position: static; width: 100% !important; max-width: 340px; margin-inline: auto; rotate: 0deg; } .agenda { left: 18px; right: 18px; bottom: 14px; } .agenda .d { font-size: 0.56rem; } .agenda .n { font-size: 0.8rem; } .agenda .tag { font-size: 0.56rem; padding: 2px 4px; } } /* ---------------- posisi / statement ---------------- */ .posisi { background: var(--paper); color: var(--ink); position: relative; } .posisi::before, .posisi::after { content: ''; display: block; height: 10px; background: repeating-linear-gradient(90deg, var(--paper-edge) 0 14px, transparent 14px 28px); } .posisi-grid { position: relative; padding-top: clamp(64px, 8vw, 110px); padding-bottom: clamp(64px, 8vw, 110px); display: grid; gap: 26px; max-width: 980px; } .posisi-kicker-line { font-weight: 600; color: var(--ink-soft); max-width: 58ch; } .statement-h { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.12; text-transform: none; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; } .statement-h em::after { background: rgba(178, 58, 46, 0.32); height: 0.34em; bottom: 0.02em; z-index: 0; } .posisi-p p { color: var(--ink-soft); max-width: 62ch; } .posisi-p strong { color: var(--ink); } .stamp { justify-self: start; font-family: var(--font-display); font-size: clamp(1.1rem, 2vw, 1.5rem); letter-spacing: 0.08em; color: var(--red); border: 3px solid var(--red); border-radius: 8px; padding: 10px 18px; rotate: -4deg; opacity: 0.82; mask-image: radial-gradient(circle at 30% 40%, black 92%, transparent 96%), radial-gradient(circle at 74% 66%, black 94%, transparent 98%); -webkit-mask-image: radial-gradient(circle at 30% 40%, black 92%, transparent 96%), radial-gradient(circle at 74% 66%, black 94%, transparent 98%); mask-composite: intersect; -webkit-mask-composite: source-in; } /* ---------------- pilar ---------------- */ .pilar { padding-block: var(--sp); } .poster-wall { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(22px, 3vw, 34px); perspective: 1200px; } .poster { background: var(--paper); color: var(--ink); border-radius: 6px; overflow: hidden; box-shadow: var(--shadow-soft); border: 1px solid var(--paper-edge); transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; } .poster:hover { transform: translateY(-4px) rotate(var(--tilt, 0deg)); box-shadow: var(--shadow-lift); } .span-7 { grid-column: span 7; } .span-5 { grid-column: span 5; } .tilt-l { --tilt: -0.5deg; rotate: -0.5deg; } .tilt-r { --tilt: 0.5deg; rotate: 0.5deg; } .poster-head { display: flex; align-items: center; gap: 12px; padding: 15px 20px; color: var(--btn-text); } .poster-head .ic { width: 21px; height: 21px; } .poster-head h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.25rem; } .ph-blue { background: linear-gradient(180deg, var(--blue), var(--blue-deep)); } .ph-red { background: linear-gradient(180deg, var(--red), var(--red-deep)); } .ph-amber { background: linear-gradient(180deg, var(--amber), var(--amber-deep)); } .ph-gold { background: linear-gradient(180deg, var(--gold), var(--gold)); } .ph-green { background: linear-gradient(180deg, var(--green), var(--green)); } .ph-orange { background: linear-gradient(180deg, var(--orange), var(--orange)); } .poster-body { padding: 24px 22px 26px; display: grid; gap: 13px; } .poster-body h4 { font-size: 1.05rem; letter-spacing: -0.01em; line-height: 1.3; margin-top: 4px; } .poster-body > p:not([class]) { color: var(--ink-soft); font-size: 0.95rem; } /* KK card */ .kk-card { background: var(--blue-tint); border: 1px solid var(--blue-edge); padding: 14px 16px; border-radius: 4px; display: grid; gap: 9px; } .kk-no { color: var(--ink-soft); } .kk-rows { list-style: none; display: grid; gap: 6px; } .kk-rows li { display: flex; justify-content: space-between; gap: 12px; font-size: 0.85rem; border-bottom: 1px dotted var(--paper-edge); padding-bottom: 5px; } .kk-rows li span { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.09em; color: var(--blue-deep); align-self: center; } .kk-meta { display: flex; gap: 8px; flex-wrap: wrap; } .tagline-chip { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; border: 1px solid var(--paper-edge); border-radius: 4px; padding: 3px 7px; color: var(--ink-soft); } /* ledger */ .ledger { display: grid; gap: 7px; background: var(--panel); border: 1px solid var(--paper-edge); border-radius: 4px; padding: 14px 16px; } .lg-row { display: flex; align-items: center; gap: 9px; font-size: 0.85rem; } .lg-row .ic { width: 15px; height: 15px; } .lg-row span { flex: 1; } .lg-row b { font-family: var(--font-mono); font-size: 0.8rem; font-variant-numeric: tabular-nums; } .lg-head { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.09em; color: var(--ink-soft); justify-content: space-between; border-bottom: 1px dashed var(--paper-edge); padding-bottom: 7px; } .lg-ok .ic { color: var(--green); } .ok .ic { color: var(--green); } .no .ic { color: var(--red); } .lg-bar { height: 10px; border-radius: 99px; background: rgba(38,33,23,0.12); overflow: hidden; position: relative; margin-top: 4px; } .lg-bar i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--amber-deep); } .ledger .mono-note { color: var(--ink-soft); } /* doc surat */ .doc { background: var(--panel); border: 1px solid var(--paper-edge); border-radius: 4px; padding: 16px 18px; display: grid; gap: 8px; justify-items: start; } .doc-title { font-weight: 800; letter-spacing: 0.04em; font-size: 0.85rem; } .doc-lines { display: grid; gap: 6px; width: 100%; } .doc-lines i { display: block; height: 8px; border-radius: 2px; background: rgba(38,33,23,0.1); width: 92%; } .doc-lines i:nth-child(3) { width: 64%; } .doc-foot { display: flex; align-items: center; gap: 10px; margin-top: 2px; } .doc-foot span { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.1em; color: var(--ink-soft); } /* campaign DKM */ .dkm-body { grid-template-columns: 1fr; } .campaign { background: linear-gradient(165deg, var(--felt), var(--wall-deep)); color: var(--cream); border-radius: 6px; padding: 18px; display: grid; gap: 8px; box-shadow: inset 0 0 0 1px rgba(240,233,214,0.12), var(--shadow-soft); } .cmp-title { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; color: var(--gold-light); } .cmp-big { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: 0.01em; } .cmp-big span { font-family: var(--font-body); font-size: 0.55em; color: var(--cream-70); font-weight: 600; } .cmp-bar { position: relative; height: 12px; background: rgba(240,233,214,0.14); border-radius: 99px; } .cmp-bar i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: linear-gradient(90deg, var(--gold-light), var(--gold-mid)); border-radius: inherit; } .cmp-bar b { position: absolute; right: 0; top: 100%; translate: 0 4px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--cream-70); } .campaign { padding-bottom: 24px; } /* posyandu */ .posy-list { list-style: none; display: grid; gap: 8px; } .posy-list li { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--paper-edge); border-radius: 4px; padding: 10px 13px; font-size: 0.85rem; } .posy-list li span:last-child { margin-left: auto; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.07em; color: var(--ink-soft); } .dot { width: 11px; height: 11px; border-radius: 50%; flex: none; } .dot-a { background: var(--green); } .dot-b { background: var(--paper); box-shadow: inset 0 0 0 2.5px var(--green-deep); } .remind { color: var(--ink-soft) !important; display: flex; gap: 7px; align-items: center; } /* poll */ .poll { border: 1px solid var(--paper-edge); border-radius: 6px; padding: 16px; display: grid; gap: 10px; background: var(--panel); } .poll legend { font-weight: 700; font-size: 0.95rem; padding-inline: 6px; } .poll-opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1.5px solid var(--paper-edge); background: var(--paper); padding: 12px 14px; border-radius: 6px; cursor: pointer; font: inherit; font-weight: 600; font-size: 0.92rem; color: var(--ink); overflow: hidden; transition: border-color 0.15s ease-out, transform 0.12s ease-out; text-align: left; width: 100%; } .poll-opt span { position: relative; z-index: 1; } .poll-opt b { position: relative; z-index: 1; font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .poll-fill { position: absolute; inset: 0; width: 100%; background: rgba(168, 84, 28, 0.16); transform: scaleX(calc(var(--fw, 0) / 100)); transform-origin: left center; transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1); } .poll-opt[aria-pressed='true'] { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); } .poll-opt[aria-pressed='true'] b { color: var(--orange); } .poll-opt:hover { transform: translateY(-1px); } .poll-note { color: var(--ink-soft) !important; } @media (max-width: 900px) { .span-7, .span-5 { grid-column: 1 / -1; } .tilt-l, .tilt-r { rotate: 0deg; } } /* ---------------- demo dua aplikasi ---------------- */ .demo { background: var(--wall-deep); padding-block: var(--sp); border-top: 1px solid rgba(240,233,214,0.08); } .demo-grid { display: grid; grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 5vw, 80px); align-items: start; } .demo-copy { display: grid; gap: 20px; } .demo-copy p:not([class]) { color: var(--cream-70); max-width: 52ch; } .wa-stack { margin-top: 10px; background: var(--wall-deep); background: linear-gradient(175deg, var(--felt), var(--wall-deep)); border-radius: 12px; padding: 18px; display: grid; gap: 10px; box-shadow: inset 0 0 0 1px rgba(240,233,214,0.09), var(--shadow-soft); } .wa-day { text-align: center; color: var(--cream-70) !important; } .wa-bubble { max-width: 82%; padding: 10px 13px 7px; border-radius: 10px; font-size: 0.85rem; line-height: 1.5; } .wa-in { background: var(--felt); color: var(--btn-text); justify-self: start; border-bottom-left-radius: 3px; } .wa-out { background: var(--green); color: var(--btn-text); justify-self: end; border-bottom-right-radius: 3px; } .wa-bubble .wa-meta { display: block; text-align: right; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.07em; opacity: 0.88; margin-top: 4px; } .dash { background: var(--paper); color: var(--ink); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-lift); position: relative; } .dash-tabs { display: flex; border-bottom: 1px solid var(--paper-edge); background: var(--paper-deep); } .dash-tabs button { flex: 1; padding: 15px 10px; font: inherit; font-weight: 700; font-size: 0.95rem; background: transparent; border: 0; cursor: pointer; color: var(--ink-soft); border-right: 1px solid var(--paper-edge); transition: background-color 0.15s ease-out, color 0.15s ease-out; } .dash-tabs button:last-child { border-right: 0; } .dash-tabs button:hover { background: rgba(38,33,23,0.05); color: var(--ink); } .dash-tabs button[aria-selected='true'] { background: var(--paper); color: var(--ink); box-shadow: inset 0 -3px 0 var(--red); } .dash-panel { padding: clamp(22px, 3vw, 34px); display: grid; gap: 20px; } .dash-panel[hidden] { display: none; } .dash-title { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.11em; color: var(--ink-soft); } .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .stat { background: var(--panel); border: 1px solid var(--paper-edge); border-radius: 8px; padding: 16px; display: grid; gap: 3px; } .stat b { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1; letter-spacing: 0.01em; } .stat b small { font-size: 0.5em; color: var(--ink-soft); letter-spacing: 0; } .stat b span { font-size: 0.45em; margin-left: 2px; color: var(--amber-deep); } .stat.split b small { color: var(--blue-deep); } .stat span { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--ink-soft); } .panel-block { background: var(--panel); border: 1px solid var(--paper-edge); border-radius: 8px; padding: 17px; display: grid; gap: 9px; } .pb-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 0.95rem; } .pb-big { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.05; } .panel-block .mono-note { color: var(--ink-soft); } .bar.lg { height: 14px; } .bar.lg i { background: linear-gradient(90deg, var(--amber), var(--amber-deep)); } .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .owe-list { list-style: none; display: grid; gap: 7px; } .owe-list li { display: flex; align-items: center; gap: 9px; font-size: 0.92rem; border-bottom: 1px dotted var(--paper-edge); padding-bottom: 7px; } .owe-list li:last-child { border-bottom: 0; padding-bottom: 0; } .owe-list li span { flex: 1; } .owe-list li b { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.05em; } .owe-list li.no b { color: var(--red-deep); } .owe-list li.ok b { color: var(--green); } .bill-row { display: flex; align-items: center; gap: 12px; font-size: 1rem; } .bill-row span { flex: 1; font-weight: 600; } .bill-row b { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; } .pill { font-style: normal; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.09em; padding: 4px 8px; border-radius: 99px; } .pill-warn { background: rgba(178, 58, 46, 0.12); color: var(--red-deep); } .demo-btn { justify-self: start; } .toast { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; z-index: 6; background: var(--wall); color: var(--cream); padding: 11px 18px; border-radius: 8px; white-space: nowrap; box-shadow: var(--shadow-lift); font-size: 0.68rem; animation: toast-in 0.25s ease-out; } @keyframes toast-in { from { opacity: 0; translate: -50% 8px; } to { opacity: 1; translate: -50% 0; } } @media (max-width: 900px) { .demo-grid { grid-template-columns: 1fr; } .stat-row { grid-template-columns: repeat(3, minmax(0,1fr)); } } /* ---------------- cara kerja ---------------- */ .cara { background: var(--paper); color: var(--ink); padding-block: var(--sp); } .cara .sec-head h2 { color: var(--ink); } .steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 48px); counter-reset: langkah; } .steps li { position: relative; display: grid; gap: 12px; align-content: start; } .step-stamp { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.5rem; color: var(--red); border: 3px double var(--red); rotate: -5deg; mask-image: radial-gradient(circle at 32% 36%, black 94%, transparent 97%); -webkit-mask-image: radial-gradient(circle at 32% 36%, black 94%, transparent 97%); } .steps h3 { font-size: 1.25rem; letter-spacing: -0.01em; } .steps p { color: var(--ink-soft); font-size: 0.95rem; } .steps li:not(:last-child)::after { content: ''; position: absolute; top: 29px; left: calc(100% - 14px); width: 28px; border-top: 3px dashed rgba(178, 58, 46, 0.45); } @media (max-width: 800px) { .steps { grid-template-columns: 1fr; } .steps li:not(:last-child)::after { display: none; } } /* ---------------- hitung ---------------- */ .hitung { padding-block: var(--sp); } .hitung-grid { display: grid; grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr); gap: clamp(40px, 5vw, 80px); align-items: center; } .hitung-copy { display: grid; gap: 18px; } .hitung-copy p:not([class]) { color: var(--cream-70); max-width: 46ch; } .hitung-board { background: repeating-linear-gradient(0deg, rgba(10,26,22,.06) 0 2px, transparent 2px 26px), linear-gradient(165deg, var(--felt), var(--felt-deep)); border-radius: 10px; box-shadow: var(--shadow-lift), inset 0 0 50px rgba(10,26,22,.5); outline: 2px solid var(--wood-dark); border: 8px solid transparent; border-image: repeating-linear-gradient(90deg, var(--wood-dark) 0 6px, var(--wood) 6px 14px, var(--wood-light) 14px 18px, var(--wood) 18px 30px) 8; padding: clamp(26px, 3.4vw, 44px); display: grid; gap: 26px; } .ctrl label { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-weight: 700; margin-bottom: 12px; font-size: 1rem; } .ctrl output { font-family: var(--font-mono); font-weight: 600; font-size: 1rem; color: var(--gold-light); font-variant-numeric: tabular-nums; } input[type='range'] { width: 100%; appearance: none; -webkit-appearance: none; height: 30px; background: transparent; cursor: pointer; } input[type='range']::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: repeating-linear-gradient(90deg, rgba(240,233,214,0.28) 0 2px, transparent 2px 14px); box-shadow: inset 0 0 0 1px rgba(240,233,214,0.22); } input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 6px; background: var(--paper); border: 3px solid var(--red); box-shadow: 0 3px 8px rgba(10,26,22,.5); margin-top: -9px; } input[type='range']::-moz-range-track { height: 8px; border-radius: 99px; background: repeating-linear-gradient(90deg, rgba(240,233,214,0.28) 0 2px, transparent 2px 14px); } input[type='range']::-moz-range-thumb { width: 20px; height: 20px; border-radius: 6px; background: var(--paper); border: 3px solid var(--red); box-shadow: 0 3px 8px rgba(10,26,22,.5); } .result { border-top: 1px dashed var(--line-on-wall); padding-top: 22px; display: grid; gap: 7px; } .result-big b, .result-mid b { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; } .result-big b { font-size: clamp(2.2rem, 4.4vw, 3.4rem); color: var(--gold-light); line-height: 1.02; } .result-mid b { font-size: clamp(1.5rem, 2.6vw, 2.1rem); } .fine-print { color: var(--cream-70); font-size: 0.85rem; max-width: 52ch; } @media (max-width: 860px) { .hitung-grid { grid-template-columns: 1fr; } } /* ---------------- keamanan ---------------- */ .keamanan { background: var(--paper); color: var(--ink); padding-block: var(--sp); } .sec-grid { display: grid; grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 5vw, 80px); align-items: start; } .sec-copy { display: grid; gap: 18px; position: sticky; top: 92px; } .sec-copy .lede-dark { color: var(--ink-soft); max-width: 46ch; } /* daftar jaminan: baris beratur dengan ikon di rel kiri — bukan kartu seragam */ .sec-list { list-style: none; display: grid; } .sec-list li { display: flex; gap: 17px; align-items: flex-start; padding: 19px 6px; border-bottom: 1px dashed var(--paper-edge); } .sec-list li:first-child { border-top: 1px dashed var(--paper-edge); } .sec-list .ic { width: 23px; height: 23px; color: var(--red-deep); margin-top: 3px; flex: none; } .sec-list h3 { font-size: 1.05rem; margin-bottom: 4px; } .sec-list p { color: var(--ink-soft); font-size: 0.92rem; } @media (max-width: 860px) { .sec-grid { grid-template-columns: 1fr; } .sec-copy { position: static; } } /* ---------------- faq ---------------- */ .faq { background: var(--paper); color: var(--ink); padding-bottom: var(--sp); } .faq-wrap { display: grid; grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr); gap: clamp(36px, 5vw, 72px); align-items: start; } .faq-wrap > h2 { color: var(--ink); position: sticky; top: 92px; } .faq-list { display: grid; gap: 12px; } .faq-list details { background: var(--panel); border: 1px solid var(--paper-edge); border-radius: 8px; overflow: hidden; } .faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; font-weight: 700; transition: background-color 0.15s ease-out; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary:hover { background: rgba(38,33,23,0.04); } .faq-list summary h3 { font-size: 1rem; font-weight: 700; letter-spacing: -0.005em; } .faq-list summary .ic { width: 19px; height: 19px; color: var(--ink-soft); transition: rotate 0.2s ease-out; } .faq-list details[open] summary .ic { rotate: 180deg; } .faq-list details p { padding: 0 20px 20px; color: var(--ink-soft); font-size: 0.95rem; max-width: 68ch; } @media (max-width: 800px) { .faq-wrap { grid-template-columns: 1fr; } .faq-wrap > h2, .sec-copy { position: static; } } /* ---------------- kontak & footer ---------------- */ .kontak { background: var(--wall-deep); border-top: 1px solid rgba(240,233,214,0.08); padding-block: calc(var(--sp) * 1.05); } .kontak-wrap { display: grid; gap: 28px; justify-items: start; text-align: left; } .footer { background: var(--wall-deep); border-top: 1px solid rgba(240,233,214,0.1); padding-top: clamp(48px, 6vw, 76px); } .foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(140px, 1fr)); gap: clamp(28px, 4vw, 56px); padding-bottom: 44px; } .foot-brand p { color: var(--cream-70); margin-top: 16px; font-size: 0.95rem; } .foot-brand .brand { margin-left: -2px; } .foot-col h3 { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--cream-70); margin-bottom: 15px; } .foot-col a { display: block; color: var(--cream); text-decoration: none; font-size: 0.95rem; padding-block: 5px; text-underline-offset: 5px; } .foot-col a:hover { text-decoration: underline; color: var(--btn-text); } .foot-org p { color: var(--cream-70); font-size: 0.85rem; line-height: 1.9; } .foot-base { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; border-top: 1px solid rgba(240,233,214,0.1); padding-block: 22px; } .foot-base p { font-size: 0.85rem; color: var(--cream-70); } @media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } } /* ---------------- reveal ---------------- */ .js [data-reveal] { opacity: 0; translate: 0 16px; transition: opacity 0.55s ease-out, translate 0.55s cubic-bezier(0.2, 0.8, 0.3, 1); } .js [data-reveal].in { opacity: 1; translate: 0 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .js [data-reveal] { opacity: 1; translate: 0 0; } } @media print { .topbar, .skip-link { display: none; } body { background: var(--panel); color: var(--ink); } } /* ---------------- harga ---------------- */ .harga { padding-block: var(--sp); } .harga-grid { display: grid; grid-template-columns: 1.06fr 1fr 1fr; gap: clamp(18px, 2.4vw, 28px); align-items: stretch; } .tier { position: relative; background: var(--paper); color: var(--ink); border: 1px solid var(--paper-edge); border-radius: 6px; box-shadow: var(--shadow-soft); padding: 30px 24px 24px; display: grid; gap: 13px; align-content: start; rotate: -0.8deg; transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s cubic-bezier(.16,1,.3,1); } .tier:nth-child(2) { rotate: 0.7deg; } .tier:nth-child(3) { rotate: -0.5deg; } .tier:hover, .tier:focus-within { transform: translateY(-5px); box-shadow: var(--shadow-lift); } .tier .pin { position: absolute; top: -7px; left: 50%; translate: -50% 0; width: 15px; height: 15px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, var(--pin-light), var(--red-deep) 68%); } .tier h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; text-transform: uppercase; letter-spacing: .01em; } .tier-sub { color: var(--ink-soft); font-size: .95rem; line-height: 1.55; } .price { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; } .price b { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1; font-variant-numeric: tabular-nums; } .price span { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .09em; color: var(--ink-soft); } .tier .mono-note { color: var(--ink-soft); } .tier-list { list-style: none; display: grid; gap: 9px; padding-top: 12px; border-top: 1px dashed var(--paper-edge); } .tier-list li { display: flex; gap: 9px; align-items: flex-start; font-size: .93rem; line-height: 1.5; color: var(--ink-soft); } .tier-list .ic { color: var(--green); margin-top: 2px; flex: none; } .tier-featured { background: var(--panel); border-color: var(--amber-deep); box-shadow: var(--shadow-lift); transform: translateY(-10px); } .tier-featured:hover, .tier-featured:focus-within { transform: translateY(-15px); } .tier-cta { justify-self: start; margin-top: 4px; } .chip-ink { background: var(--paper-deep); color: var(--ink-soft); } .harga-foot { margin-top: clamp(26px, 3vw, 38px); } @media (max-width: 860px) { .harga-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; gap: 26px; } .tier, .tier-featured { rotate: 0deg; transform: none; } .tier:hover, .tier:focus-within, .tier-featured:hover, .tier-featured:focus-within { transform: none; } }