/* ============================================================================ GamaPOS — halaman daftar tunggu Acuan desain: LANDING LIVE ~/PhpstormProjects/gamapos/landing/index.html (CSS tulisan tangan di , baris ±45–337) — BUKAN repo lama gamapos-landing-page (Tailwind cyan). Token :root terang+gelap, resep latar heksagonal+glow, resep tombol .btn-primary, tipografi (sans sistem + mono aksen + Yellowtail khusus wordmark), dan bahasa kartu/surface disalin dari sana supaya pengunjung yang datang dari gamapos.id tidak merasa pindah dunia. Jangan menambah janji visual baru di sini: satu-satunya janji halaman ini adalah kabar peluncuran lewat email. --------------------------------------------------------------------------- KONTRAS (formula WCAG 2.x, dihitung — bukan dikira; ambang 4,5:1 teks normal, 3:1 teks besar/tebal & elemen non-teks): TERANG rasio ambang - teks tubuh --ink #12141A / surface #FFFFFF 18,41:1 4,5 OK - teks tubuh --ink #12141A / ground #F1F5F2 16,73:1 4,5 OK - teks lunak --ink-soft #55605A / surface 6,55:1 4,5 OK - teks lunak --ink-soft #55605A / ground 5,95:1 4,5 OK - tautan/tag --green-ink #0B7F56 / surface 5,02:1 4,5 OK - tautan/tag --green-ink #0B7F56 / ground 4,56:1 4,5 OK - teks tombol --on-green #FFFFFF / --green-ink 5,02:1 4,5 OK - teks tombol hover #FFFFFF / mix(green-ink 88%, #000) 6,13:1 4,5 OK - wordmark (BESAR) --green #0F9E6C / ground 3,11:1 3,0 OK - galat --danger-ink #B42318 / surface 6,57:1 4,5 OK - galat di ringkasan #B42318 / mix(danger 8%, putih) 5,76:1 4,5 OK - teks banner --ink / mix(amber 10%, surface) 16,44:1 4,5 OK - bingkai banner --amber #BE7314 / surface 3,72:1 3,0 OK - teks janji --ink / mix(green-bright 10%, surface)17,14:1 4,5 OK - strong janji --green-ink / mix(gb 10%, surface) 4,67:1 4,5 OK - kotak email --ink / inset #EAF0EC 15,93:1 4,5 OK - bingkai input --line-strong #77837C / surface 3,95:1 3,0 OK GELAP - teks tubuh --ink #E9F2EC / surface #101A15 15,57:1 4,5 OK - teks tubuh --ink #E9F2EC / ground #0A120E 16,62:1 4,5 OK - teks lunak --ink-soft #92A69C / surface 6,91:1 4,5 OK - teks lunak --ink-soft #92A69C / ground 7,38:1 4,5 OK - tautan/tag --green-ink #33D099 / surface 9,00:1 4,5 OK - tautan/tag --green-ink #33D099 / ground 9,61:1 4,5 OK - teks tombol --on-green #08130D / --green-ink 9,58:1 4,5 OK - teks tombol hover #08130D / mix(green-ink 88%, #000) 7,42:1 4,5 OK - galat --danger-ink #F97066 / surface 6,38:1 4,5 OK - galat di ringkasan #F97066 / mix(danger 8%, surface) 5,78:1 4,5 OK - teks banner --ink / mix(amber 10%, surface) 13,15:1 4,5 OK - bingkai banner --amber #E5A64A / surface 8,37:1 3,0 OK - teks janji --ink / mix(green-bright 10%, surface)12,98:1 4,5 OK - strong janji --green-ink / mix(gb 10%, surface) 7,51:1 4,5 OK - kotak email --ink / inset #0D1712 16,00:1 4,5 OK - bingkai input --line-strong #5F7267 / surface 3,46:1 3,0 OK Penyimpangan sadar dari landing, demi kontras (perintah: jangan korbankan kontras demi kemiripan): - --green-ink TERANG #0B7F56 (bukan #0F9E6C): hijau landing di atas putih hanya 3,43:1 — cukup untuk elemen besar/dekoratif (wordmark, garis tag, ring fokus) tetapi GAGAL 4,5:1 untuk teks tautan dan teks tombol putih. #0B7F56 = hijau senada yang lolos. Di GELAP nilainya kembali persis hijau landing (#33D099) karena di sana ia memang lolos. - --line-strong: bingkai input formulir. --line landing (±1,2:1) cukup untuk kartu dekoratif tetapi gagal ambang non-teks 3:1 untuk batas kontrol formulir sungguhan. - --danger-*: landing tidak punya warna galat formulir (tidak berformulir); dipilih merah yang lolos di kedua tema. ========================================================================= */ /* Wordmark Yellowtail di-embed dalam biner — tidak bergantung host lain. Byte woff2 identik dengan assets/fonts/yellowtail-latin.woff2 landing. */ @font-face { font-family: "Yellowtail"; font-style: normal; font-weight: 400; font-display: swap; src: url("/aset/yellowtail-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- Token: disalin dari :root landing live + tambahan waitlist ---- */ :root { --ground: #F1F5F2; --surface: #FFFFFF; --inset: #EAF0EC; --ink: #12141A; --ink-soft: #55605A; --line: #DBE2DD; --line-soft: #E8EDE9; --green: #0F9E6C; --green-bright: #33D099; --cyan: #14929F; --purple: #7A11D6; --purple-bright: #A347EE; --mint: #DDFFF7; --amber: #BE7314; --on-green: #FFFFFF; --shadow: 24px 46px 90px -36px rgba(20,40,30,.34); --shadow-soft: 0 3px 14px -6px rgba(20,40,30,.2); --grid: rgba(16,60,45,.045); --glow-a: rgba(51,208,153,.22); --glow-b: rgba(48,227,227,.12); /* Tambahan waitlist (lihat tabel kontras di atas) */ --green-ink: #0B7F56; --line-strong: #77837C; --danger-ink: #B42318; --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; --font-script: "Yellowtail", ui-sans-serif, cursive; color-scheme: light; } /* Tema gelap mengikuti preferensi sistem — persis nilai token gelap landing. (Landing punya toggle [data-theme] ber-JavaScript; halaman ini tanpa JS, jadi hanya prefers-color-scheme.) */ @media (prefers-color-scheme: dark) { :root { --ground: #0A120E; --surface: #101A15; --inset: #0D1712; --ink: #E9F2EC; --ink-soft: #92A69C; --line: #21322A; --line-soft: #182722; --green: #33D099; --green-bright: #33D099; --cyan: #30E3E3; --purple: #A347EE; --purple-bright: #B76BF2; --mint: #DDFFF7; --amber: #E5A64A; --on-green: #08130D; --shadow: 28px 52px 100px -34px rgba(0,0,0,.74); --shadow-soft: 0 3px 16px -7px rgba(0,0,0,.6); --grid: rgba(120,230,190,.05); --glow-a: rgba(51,208,153,.16); --glow-b: rgba(48,227,227,.1); --green-ink: #33D099; --line-strong: #5F7267; --danger-ink: #F97066; color-scheme: dark; } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(24px, 4vw, 40px); padding: clamp(28px, 5vw, 56px) clamp(16px, 5vw, 24px); font-family: var(--font-sans); font-size: 1rem; line-height: 1.5; color: var(--ink); -webkit-font-smoothing: antialiased; background: var(--ground); } /* Latar ambien landing, disalin utuh: dua glow radial + pola heksagonal SVG data-URI (fill %2333D099, opacity .045). CSP img-src 'self' data: mengizinkan data-URI di dalam CSS ini. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(60% 45% at 85% 0%, var(--glow-a), transparent 60%), radial-gradient(50% 40% at 5% 20%, var(--glow-b), transparent 55%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z' fill='%2333D099' fill-opacity='0.045' fill-rule='evenodd'/%3E%3C/svg%3E"); background-size: 100% 100%, 100% 100%, 44px 77px; background-repeat: no-repeat, no-repeat, repeat; } .gp-kolom { width: 100%; max-width: 34rem; margin-inline: auto; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; } /* Lompat-ke-isi untuk pengguna papan ketik */ .gp-lewati { position: absolute; left: -9999px; top: 0; background: var(--surface); color: var(--green-ink); border: 1px solid var(--line); padding: 10px 16px; border-radius: 8px; font-weight: 700; z-index: 10; box-shadow: var(--shadow-soft); } .gp-lewati:focus { left: 12px; top: 12px; } /* ---------- Kepala berlogo (bahasa wordmark landing: Yellowtail hijau) ---- */ .gp-kepala { text-align: center; max-width: 40rem; margin-inline: auto; } .gp-merek { display: flex; align-items: center; justify-content: center; gap: clamp(.5rem, 2vw, .9rem); } .gp-merek img { height: clamp(44px, 9vw, 64px); width: auto; display: block; } .gp-wordmark { font-family: var(--font-script); font-weight: 400; font-size: clamp(2.3rem, 8vw, 3.1rem); line-height: 1; color: var(--green); padding-bottom: .10em; } /* Jargon bergaya .tag landing: mono uppercase hijau bergaris pendek. (Landing memakai satu garis di kiri; di sini dua sisi karena kepalanya simetris-terpusat.) */ .gp-jargon { display: inline-flex; align-items: center; gap: 9px; margin: 14px 0 0; font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green-ink); } .gp-jargon::before, .gp-jargon::after { content: ""; width: 22px; height: 1.5px; background: var(--green); } /* ---------- Kartu (resep surface landing: --line, radius 10, --shadow) ---- */ .gp-kartu { width: 100%; max-width: 34rem; margin-inline: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: clamp(24px, 5vw, 40px); text-align: left; } .gp-kartu h1 { margin: 0 0 .75rem; font-size: clamp(1.55rem, 4.6vw, 2.05rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; color: var(--ink); text-wrap: balance; } .gp-kartu .gp-antar { margin: 0 0 1.5rem; font-size: 1.02rem; line-height: 1.6; color: var(--ink-soft); } .gp-kartu form { margin: 0; } .gp-kartu a { color: var(--green-ink); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; } .gp-kartu a:hover { color: color-mix(in srgb, var(--green-ink) 78%, var(--ink)); } /* ---------- Kotak pemberitahuan & janji ---------- */ /* Pemberitahuan: pola aksen-kiri landing (.wa-line) dengan amber landing. */ .gp-pemberitahuan { margin: 0 0 1.5rem; padding: 14px 18px; background: color-mix(in srgb, var(--amber) 10%, var(--surface)); border-left: 3px solid var(--amber); border-radius: 0 8px 8px 0; color: var(--ink); font-size: .95rem; line-height: 1.6; } .gp-pemberitahuan strong { font-weight: 750; } /* Janji: tint hijau surface (padanan --mint landing yang tetap hidup di tema gelap), bingkai garis dicampur hijau seperti details[open] landing. */ .gp-janji { margin: 0 0 1.5rem; padding: 14px 18px; background: color-mix(in srgb, var(--green-bright) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--green) 32%, var(--line)); border-radius: 8px; color: var(--ink); font-size: .95rem; line-height: 1.6; } .gp-janji strong { font-weight: 750; color: var(--green-ink); } /* ---------- Field ---------- */ .gp-field { display: block; margin-bottom: 1.25rem; } /* Label kecil bergaya .spec-row .k / .plan .pname landing: mono uppercase. */ .gp-field > label { display: block; margin-bottom: .45rem; font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink); } .gp-field > label .gp-wajib { color: var(--danger-ink); margin-left: .15rem; } .gp-input { width: 100%; padding: 13px 15px; font: inherit; font-size: 1rem; line-height: 1.4; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 8px; appearance: none; transition: border-color .15s ease, box-shadow .15s ease; } .gp-input::placeholder { color: var(--ink-soft); } .gp-input:hover { border-color: var(--ink-soft); } .gp-input:focus { outline: none; border-color: var(--green-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 35%, transparent); } .gp-input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 1000px var(--surface) inset, 0 0 0 3px color-mix(in srgb, var(--green) 35%, transparent); } /* Select dibuat serupa input, dengan panah gambar-dalam-CSS (tanpa aset luar) */ select.gp-input { padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position: calc(100% - 22px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } .gp-bantuan { margin: .4rem 0 0; font-size: .82rem; color: var(--ink-soft); } .gp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Honeypot: DIPINDAH KE LUAR LAYAR, bukan display:none — bot mendeteksi display:none dan melewatinya, sehingga jebakannya jadi sia-sia. */ .gp-jebakan { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* ---------- Banner (kegagalan yang bukan salah pengunjung) ---------- */ /* Dirujuk index.html untuk 429/500: formulir tetap tampil lengkap dengan isiannya, banner menjelaskan kenapa belum tersimpan. Amber landing sengaja dibedakan dari merah galat validasi (itu salah isian, ini bukan), dengan bingkai penuh supaya tidak tertukar dengan kotak pemberitahuan tetap. */ .gp-banner { margin: 0 0 1.25rem; padding: 14px 18px; background: color-mix(in srgb, var(--amber) 10%, var(--surface)); border: 2px solid var(--amber); border-radius: 8px; color: var(--ink); font-size: .95rem; font-weight: 600; line-height: 1.6; } .gp-banner:focus { outline: 3px solid var(--amber); outline-offset: 2px; } /* ---------- Galat ---------- */ .gp-input[aria-invalid="true"] { border-color: var(--danger-ink); } .gp-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-ink) 30%, transparent); } .gp-galat { display: flex; align-items: flex-start; gap: .4rem; margin: .4rem 0 0; font-size: .875rem; font-weight: 600; line-height: 1.4; color: var(--danger-ink); } .gp-galat::before { content: "!"; flex: 0 0 auto; width: 1.05em; height: 1.05em; margin-top: .12em; border-radius: 50%; background: var(--danger-ink); color: var(--surface); font-size: .78em; font-weight: 800; line-height: 1.05em; text-align: center; } .gp-galat:empty { display: none; } .gp-galat-ringkas { margin: 0 0 1.25rem; padding: 12px 16px; background: color-mix(in srgb, var(--danger-ink) 8%, var(--surface)); border: 2px solid var(--danger-ink); border-radius: 8px; color: var(--danger-ink); font-size: .9rem; font-weight: 600; line-height: 1.5; } .gp-galat-ringkas p { margin: 0; } .gp-galat-ringkas ul { margin: .5rem 0 0; padding-left: 1.25rem; } .gp-galat-ringkas a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } /* ---------- Tombol (resep .btn-primary landing, dilebarkan penuh) ---------- */ .gp-tombol { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 28px; font: inherit; font-size: 1.05rem; font-weight: 700; line-height: 1.2; color: var(--on-green); background: var(--green-ink); border: 0; border-radius: 8px; box-shadow: 0 14px 26px -12px color-mix(in srgb, var(--green) 70%, transparent); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .16s ease, background .16s ease; } .gp-tombol svg { width: 18px; height: 18px; flex: none; } .gp-tombol:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--green-ink) 88%, #000); } .gp-tombol:active { transform: translateY(0); } .gp-tombol:disabled, .gp-tombol[aria-busy="true"] { opacity: .6; cursor: not-allowed; transform: none; box-shadow: var(--shadow-soft); } @media (prefers-reduced-motion: reduce) { .gp-tombol, .gp-tombol:hover, .gp-tombol:active { transform: none; transition: none; } } .gp-tautan { display: inline-block; margin-top: 1rem; color: var(--green-ink); font-weight: 700; font-size: .875rem; text-decoration: underline; text-underline-offset: 3px; } .gp-tautan:hover { color: color-mix(in srgb, var(--green-ink) 78%, var(--ink)); } /* ---------- Halaman terima kasih ---------- */ .gp-terimakasih { text-align: center; } .gp-terimakasih .gp-tanda { width: 72px; height: 72px; margin: 0 auto 1.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--green-ink); color: var(--on-green); font-size: 2.1rem; font-weight: 900; line-height: 1; box-shadow: 0 0 0 10px color-mix(in srgb, var(--green-bright) 16%, transparent); } .gp-terimakasih .gp-antar { margin-bottom: 1.25rem; } .gp-terimakasih .gp-janji { text-align: left; margin-bottom: 1rem; } .gp-terimakasih .gp-catatan-kecil { margin: 0 0 .75rem; font-size: .82rem; line-height: 1.6; color: var(--ink-soft); } /* Alamat email dalam mono tabular (bahasa .fig landing) di panel inset. */ .gp-terimakasih .gp-email { display: inline-block; margin-top: .25rem; padding: 4px 10px; background: var(--inset); border: 1px solid var(--line); border-radius: 6px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .875rem; font-weight: 600; color: var(--ink); word-break: break-all; } /* ---------- Footer (bahasa footer landing: garis atas + mono kecil) ------- */ .gp-footer { width: 100%; max-width: 34rem; text-align: center; border-top: 1px solid var(--line); padding-top: 20px; color: var(--ink-soft); font-size: .9rem; line-height: 1.7; } .gp-footer .gp-wordmark-kecil { display: block; font-family: var(--font-script); font-weight: 400; font-size: 1.7rem; line-height: 1.2; color: var(--green); } .gp-footer p { margin: .35rem 0 0; } .gp-footer .gp-tagline { color: var(--ink-soft); } .gp-footer .gp-hak { font-family: var(--font-mono); font-size: .74rem; } .gp-footer a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .gp-footer a:hover { color: var(--green-ink); } /* Utilitas kecil (menggantikan style inline agar CSP bisa tetap ketat) */ .gp-opsional { font-family: var(--font-sans); font-weight: 400; font-size: .72rem; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }