/* * Portal Official Partner — Express Bahari * * Warna tier disuntik sebagai custom property dari App\Services\OfficialPartnerPortal * (--tier-accent-rgb, --tier-soft-rgb, --tier-deep-rgb, --tier-glow, --tier-plate). * Atribut [data-tier] pada berisi peringkat 1..6 dan dipakai untuk * menyalakan lapisan ornamen secara bertahap: makin tinggi tier, makin mewah. */ :root { /* Cadangan bila atribut tier belum tersetel di . */ --tier-ink-rgb: 6 13 22; --tier-raised-rgb: 13 24 38; --op-text: #e8edf3; --op-muted: #9aa5b2; --op-faint: #77828e; --op-line: rgb(255 255 255 / 0.07); --op-line-strong: rgb(255 255 255 / 0.13); --op-radius: 14px; --op-shell: 1120px; } * { box-sizing: border-box; } /* * Latar halaman dan permukaan panel diturunkan dari tier, jadi warna layar * sudah membedakan jenjang sebelum satu angka pun dibaca. */ body.op { --op-ink: rgb(var(--tier-ink-rgb)); --op-ink-raised: rgb(var(--tier-raised-rgb)); margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--op-ink); color: var(--op-text); font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } .op-display { font-family: 'Syne', 'DM Sans', sans-serif; letter-spacing: -0.01em; } .op-serif { font-family: 'Cormorant Garamond', Georgia, serif; } .op-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } /* Cahaya latar: intensitasnya mengikuti --tier-glow. */ .op-halo { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(1100px 520px at 50% -12%, rgb(var(--tier-accent-rgb) / calc(var(--tier-glow) * 0.22 + 0.03)), transparent 68%), radial-gradient(760px 460px at 92% 8%, rgb(var(--tier-soft-rgb) / calc(var(--tier-glow) * 0.14)), transparent 70%); } .op-shell { position: relative; z-index: 1; width: 100%; max-width: var(--op-shell); margin: 0 auto; padding: 0 24px; } /* ── Topbar ─────────────────────────────────────────────── */ .op-topbar { position: sticky; top: 0; z-index: 40; background: rgb(var(--tier-ink-rgb) / 0.86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--op-line); } .op-topbar::after { content: ''; display: block; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--tier-accent-rgb) / calc(var(--tier-glow) * 0.8 + 0.2)), transparent); } .op-topbar__inner { display: flex; align-items: center; gap: 20px; height: 66px; } .op-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; flex-shrink: 0; } .op-brand img { height: 30px; width: auto; } .op-brand__label { font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--tier-accent-rgb) / 0.85); font-weight: 700; border-left: 1px solid var(--op-line-strong); padding-left: 12px; line-height: 1.3; } .op-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; } .op-nav a { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--op-muted); text-decoration: none; transition: color 0.18s ease, background-color 0.18s ease; } .op-nav a:hover { color: var(--op-text); background: rgb(255 255 255 / 0.05); } .op-nav a.is-active { color: var(--op-text); background: rgb(var(--tier-accent-rgb) / 0.12); } .op-nav a.is-active::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 1px; height: 1.5px; border-radius: 2px; background: rgb(var(--tier-accent-rgb) / 0.9); } .op-nav svg { width: 16px; height: 16px; stroke-width: 1.7; } .op-account { display: flex; align-items: center; gap: 10px; padding-left: 16px; margin-left: 4px; border-left: 1px solid var(--op-line); flex-shrink: 0; } .op-monogram { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: 'Syne', sans-serif; font-weight: 700; font-size: 13px; color: var(--op-text); background: rgb(var(--tier-accent-rgb) / 0.16); border: 1px solid rgb(var(--tier-accent-rgb) / 0.4); } .op-account__meta { line-height: 1.25; min-width: 0; } .op-account__name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; } .op-account__tier { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--tier-accent-rgb) / 0.9); font-weight: 600; } .op-signout { background: none; border: 1px solid var(--op-line-strong); color: var(--op-muted); width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; cursor: pointer; transition: border-color 0.18s ease, color 0.18s ease; } .op-signout:hover { color: #fca5a5; border-color: rgb(248 113 113 / 0.45); } .op-signout svg { width: 16px; height: 16px; } .op-burger { display: none; background: none; border: 1px solid var(--op-line-strong); color: var(--op-text); width: 34px; height: 34px; border-radius: 9px; cursor: pointer; place-items: center; } .op-burger svg { width: 18px; height: 18px; } /* ── Halaman ────────────────────────────────────────────── */ .op-main { position: relative; z-index: 1; flex: 1; padding: 34px 0 56px; } .op-pagehead { margin-bottom: 26px; } .op-eyebrow { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--op-faint); font-weight: 700; margin: 0 0 8px; } .op-pagehead h1 { font-family: 'Syne', sans-serif; font-size: clamp(24px, 3.4vw, 32px); font-weight: 700; letter-spacing: -0.02em; margin: 0; } .op-pagehead p { margin: 6px 0 0; color: var(--op-muted); font-size: 14px; max-width: 62ch; } /* ── Kartu keanggotaan (elemen tanda tangan) ────────────── */ .op-plate { position: relative; overflow: hidden; border-radius: 20px; padding: 30px 32px; margin-bottom: 22px; background-color: var(--op-ink-raised); background-image: var(--tier-plate); border: 1px solid rgb(var(--tier-accent-rgb) / 0.22); box-shadow: 0 24px 60px -30px rgb(0 0 0 / 0.9), 0 0 0 1px rgb(255 255 255 / 0.03) inset; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: start; } /* Takik kartu boarding pass di tepi kiri. */ .op-plate::before { content: ''; position: absolute; left: -9px; top: 50%; width: 18px; height: 18px; border-radius: 50%; transform: translateY(-50%); background: var(--op-ink); border: 1px solid rgb(var(--tier-accent-rgb) / 0.18); } .op-plate__id { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: rgb(var(--tier-accent-rgb) / 0.8); font-weight: 700; margin: 0 0 18px; } .op-plate__name { font-family: 'Syne', sans-serif; font-size: clamp(26px, 4vw, 38px); font-weight: 700; letter-spacing: -0.025em; margin: 0; line-height: 1.08; } .op-plate__rule { width: 54px; height: 2px; margin: 16px 0 12px; border-radius: 2px; background: linear-gradient(90deg, rgb(var(--tier-accent-rgb)), rgb(var(--tier-accent-rgb) / 0)); } .op-plate__tier-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; } .op-plate__tier { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(22px, 3vw, 29px); font-weight: 600; font-style: italic; letter-spacing: 0.01em; color: rgb(var(--tier-accent-rgb)); margin: 0; line-height: 1.15; } .op-plate__tier-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; border: 1px solid rgb(var(--tier-accent-rgb) / 0.45); background: rgb(var(--tier-accent-rgb) / 0.12); color: var(--op-text); font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: all 0.2s ease; } .op-plate__tier-btn:hover { background: rgb(var(--tier-accent-rgb) / 0.28); border-color: rgb(var(--tier-accent-rgb) / 0.8); color: #ffffff; transform: translateY(-1px); box-shadow: 0 4px 12px rgb(var(--tier-accent-rgb) / 0.25); } .op-plate__tier-btn svg { width: 13px; height: 13px; color: rgb(var(--tier-accent-rgb)); } .op-plate__caption { font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--op-faint); margin: 7px 0 0; font-weight: 600; } .op-plate__meta { display: flex; flex-wrap: wrap; gap: 14px 30px; margin: 24px 0 0; padding: 0; } .op-plate__meta dt { font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--op-faint); font-weight: 700; margin: 0 0 4px; } .op-plate__meta dd { font-family: 'JetBrains Mono', monospace; font-size: 13.5px; color: #ccd8e6; margin: 0; } .op-rank { align-self: stretch; display: flex; flex-direction: column; justify-content: center; text-align: right; padding-left: 26px; border-left: 1px solid rgb(var(--tier-accent-rgb) / 0.18); } .op-rank__label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--op-faint); font-weight: 700; margin: 0; } .op-rank__value { font-family: 'JetBrains Mono', monospace; font-size: clamp(44px, 7vw, 64px); font-weight: 600; line-height: 1; letter-spacing: -0.05em; margin: 6px 0 0; color: rgb(var(--tier-accent-rgb)); text-shadow: 0 0 calc(var(--tier-glow) * 42px) rgb(var(--tier-accent-rgb) / var(--tier-glow)); } .op-rank__sub { font-size: 11.5px; color: var(--op-muted); margin: 6px 0 0; white-space: nowrap; } .op-rank__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; padding: 4px 12px; border-radius: 20px; border: 1px solid rgb(var(--tier-accent-rgb) / 0.45); background: rgb(var(--tier-accent-rgb) / 0.12); color: var(--op-text); font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: all 0.2s ease; white-space: nowrap; } .op-rank__btn:hover { background: rgb(var(--tier-accent-rgb) / 0.28); border-color: rgb(var(--tier-accent-rgb) / 0.8); color: #ffffff; transform: translateY(-1px); box-shadow: 0 4px 12px rgb(var(--tier-accent-rgb) / 0.25); } .op-rank__btn svg { width: 13px; height: 13px; color: rgb(var(--tier-accent-rgb)); } /* * Tangga kemewahan. * * Warna tier muncul lewat mutu permukaan — tepi, garis rambut, dan pantulan — * bukan lewat bidang warna lebar, supaya angka dan nama tetap kontras dan * kartu terbaca seperti logam, bukan gradien. * * 1 Bronze bidang matte, tanpa pantulan * 2 Silver + serat sikat halus * 3 Gold + bingkai rambut sepuh, tepi menyala * 4 Platinum + pantulan poles diam, cahaya tepi atas * 5 Diamond + faset prisma di sudut, kilau menyapu * 6 Titanium Elite+ obsidian, sapuan cahaya netral, bingkai ganda, guilloche */ /* 2 & 4 — serat logam yang disikat. */ body[data-tier='2'] .op-plate, body[data-tier='4'] .op-plate { background-image: repeating-linear-gradient(101deg, rgb(255 255 255 / 0.028) 0 1px, transparent 1px 5px), var(--tier-plate); } /* 3 ke atas — tepi kartu ikut menyala dan mendapat bingkai rambut di dalam. */ body[data-tier='3'] .op-plate, body[data-tier='4'] .op-plate, body[data-tier='5'] .op-plate, body[data-tier='6'] .op-plate { border-color: rgb(var(--tier-accent-rgb) / 0.42); } body[data-tier='3'] .op-plate::after, body[data-tier='4'] .op-plate::after, body[data-tier='5'] .op-plate::after, body[data-tier='6'] .op-plate::after { content: ''; position: absolute; inset: 7px; border-radius: 14px; border: 1px solid rgb(var(--tier-accent-rgb) / 0.15); pointer-events: none; } /* 4 ke atas — cahaya tepi atas seperti logam yang dipoles. */ body[data-tier='4'] .op-plate, body[data-tier='5'] .op-plate, body[data-tier='6'] .op-plate { box-shadow: 0 26px 70px -30px rgb(0 0 0 / 0.92), 0 0 52px -24px rgb(var(--tier-accent-rgb) / calc(var(--tier-glow) * 0.9)), 0 1px 0 rgb(255 255 255 / 0.07) inset; } /* 5 — Berlian: faset prisma yang pusatnya di luar kartu, jadi tepinya melandai. */ body[data-tier='5'] .op-plate { background-image: conic-gradient( from 200deg at 108% -14%, rgb(var(--tier-accent-rgb) / 0.12) 0deg, transparent 26deg, rgb(var(--tier-soft-rgb) / 0.1) 44deg, transparent 68deg ), var(--tier-plate); } /* * 6 — Titanium Elite: obsidian poles dan bingkai ganda. Sengaja tanpa rona: * yang menandai peringkat puncak adalah hitam pekat + ornamen, bukan warna. */ body[data-tier='6'] .op-plate { background-image: linear-gradient(124deg, rgb(255 255 255 / 0.075) 0%, rgb(255 255 255 / 0.025) 34%, transparent 78%), var(--tier-plate); box-shadow: 0 30px 84px -32px rgb(0 0 0 / 0.95), 0 0 0 1px rgb(var(--tier-accent-rgb) / 0.14), 0 0 0 5px rgb(var(--tier-accent-rgb) / 0.05), 0 0 78px -26px rgb(var(--tier-accent-rgb) / 0.16), 0 1px 0 rgb(255 255 255 / 0.07) inset; } /* Pantulan permukaan: diam di Platinum, menyapu di Diamond dan Titanium. */ .op-plate__finish { display: none; position: absolute; top: -60%; width: 24%; height: 220%; transform: rotate(15deg); pointer-events: none; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.07), transparent); } /* Platinum: pantulan dinaikkan supaya kartunya terbaca putih, bukan abu. */ body[data-tier='4'] .op-plate__finish { display: block; left: 62%; width: 30%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.15), transparent); } body[data-tier='5'] .op-plate__finish, body[data-tier='6'] .op-plate__finish { display: block; left: -40%; } @media (prefers-reduced-motion: no-preference) { body[data-tier='5'] .op-plate__finish, body[data-tier='6'] .op-plate__finish { animation: op-sheen 9s cubic-bezier(0.5, 0, 0.3, 1) infinite; } } @keyframes op-sheen { 0%, 68% { left: -40%; } 100% { left: 122%; } } body[data-tier='6'] .op-plate__tier { background: linear-gradient(96deg, #ffffff 0%, #a8afb9 34%, #f3f6fa 58%, #8d949e 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* * Guilloche halus di kartu Titanium Elite — pola cetak pengaman yang dipakai * pada sertifikat, jadi tanda peringkat teratas tanpa menambah elemen baru. */ body[data-tier='6'] .op-guilloche { display: block; } .op-guilloche { display: none; position: absolute; right: -70px; top: 50%; width: 320px; height: 320px; transform: translateY(-50%); border-radius: 50%; pointer-events: none; opacity: 0.5; background: repeating-radial-gradient(circle at center, transparent 0 5px, rgb(255 255 255 / 0.05) 5px 6px); mask-image: radial-gradient(circle at center, #000 42%, transparent 72%); -webkit-mask-image: radial-gradient(circle at center, #000 42%, transparent 72%); } /* * Catatan pemilik papan skor: muncul di dashboard anggota tim, menegaskan * bahwa angka di bawahnya milik ketua, bukan pencapaian pribadi anggota. */ .op-teamnote { margin: 0 0 18px; padding: 11px 15px; border-radius: 11px; border: 1px solid rgb(var(--tier-accent-rgb) / 0.2); background: rgb(var(--tier-accent-rgb) / 0.07); font-size: 12.5px; line-height: 1.5; color: var(--op-muted); } .op-teamnote strong { color: var(--op-text); font-weight: 600; } /* ── Metrik ─────────────────────────────────────────────── */ .op-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--op-line); border: 1px solid var(--op-line); border-radius: var(--op-radius); overflow: hidden; margin-bottom: 22px; } .op-metric { background: var(--op-ink-raised); padding: 18px 20px 20px; } .op-metric__label { font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--op-faint); font-weight: 700; margin: 0 0 10px; } .op-metric__value { font-family: 'JetBrains Mono', monospace; font-size: 25px; font-weight: 600; letter-spacing: -0.035em; margin: 0; color: #f2f6fb; } .op-metric__value small { font-size: 13px; font-weight: 500; color: var(--op-muted); margin-right: 3px; letter-spacing: 0; } .op-metric__note { font-size: 11.5px; color: var(--op-muted); margin: 6px 0 0; } /* Angka tunggal di dalam panel. */ .op-stat + .op-stat { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--op-line); } .op-stat__label { font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--op-faint); font-weight: 700; margin: 0 0 8px; } .op-stat__value { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 600; letter-spacing: -0.035em; margin: 0; color: #f2f6fb; } .op-stat--lead .op-stat__value { font-size: 30px; color: rgb(var(--tier-accent-rgb)); } .op-stat__note { font-size: 12px; color: var(--op-muted); margin: 7px 0 0; line-height: 1.5; } /* Imbalan yang baru terbuka di jenjang lebih tinggi. */ .op-stat--locked .op-stat__value { font-size: 15px; font-family: 'DM Sans', sans-serif; letter-spacing: 0; color: var(--op-faint); } .op-stat__lock { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--tier-accent-rgb) / 0.85); border: 1px solid rgb(var(--tier-accent-rgb) / 0.3); border-radius: 99px; padding: 3px 10px; margin-left: 8px; vertical-align: 2px; } .op-stat__lock svg { width: 11px; height: 11px; } .op-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .op-stats-grid .op-stat { padding: 20px 22px; border-radius: calc(var(--op-radius) - 2px); background: rgb(255 255 255 / 0.025); border: 1px solid var(--op-line); display: flex; flex-direction: column; justify-content: space-between; } .op-stats-grid .op-stat + .op-stat { margin-top: 0; padding-top: 20px; border-top: 1px solid var(--op-line); } .op-stats-grid .op-stat--lead { border-color: rgb(var(--tier-accent-rgb) / 0.35); background: radial-gradient(100% 100% at 0% 0%, rgb(var(--tier-accent-rgb) / 0.08), transparent 75%), rgb(255 255 255 / 0.03); } .op-stats-grid .op-stat--locked { opacity: 0.85; background: rgb(0 0 0 / 0.2); } /* ── Panel ──────────────────────────────────────────────── */ .op-grid { display: grid; gap: 18px; margin-bottom: 18px; } .op-grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .op-grid--aside { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } .op-panel { position: relative; background: var(--op-ink-raised); border: 1px solid var(--op-line); border-radius: var(--op-radius); padding: 22px 24px 24px; min-width: 0; } .op-panel--accent { border-color: rgb(var(--tier-accent-rgb) / 0.24); background: linear-gradient(160deg, rgb(var(--tier-accent-rgb) / 0.07), transparent 60%), var(--op-ink-raised); } .op-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 18px; } .op-panel__title { font-family: 'Syne', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: -0.005em; margin: 0; } .op-panel__hint { font-size: 11.5px; color: var(--op-faint); margin: 0; } .op-link { color: rgb(var(--tier-accent-rgb)); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; } .op-link:hover { text-decoration: underline; text-underline-offset: 3px; } /* ── Tangga tier ────────────────────────────────────────── */ .op-ladder { list-style: none; margin: 0; padding: 0; } .op-ladder li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid rgb(255 255 255 / 0.04); border-radius: 8px; transition: all 0.18s ease; } .op-ladder li:last-child { border-bottom: 0; } .op-ladder__pip { justify-self: center; width: 10px; height: 10px; border-radius: 50%; background: rgb(var(--level-rgb, 148 163 184) / 0.18); border: 1.5px solid var(--level-color, var(--op-faint)); box-shadow: 0 0 10px -2px rgb(var(--level-rgb, 148 163 184) / 0.6); transition: all 0.2s ease; } .op-ladder__name { font-size: 14px; color: var(--level-color, var(--op-muted)); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; transition: color 0.18s ease; } .op-ladder__badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; background: rgb(var(--level-rgb, var(--tier-accent-rgb)) / 0.2); color: var(--level-color, rgb(var(--tier-accent-rgb))); border: 1px solid rgb(var(--level-rgb, var(--tier-accent-rgb)) / 0.4); letter-spacing: 0.02em; } .op-ladder__pax { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--op-faint); } .op-ladder li:hover { background: rgb(var(--level-rgb, 255 255 255) / 0.06); } .op-ladder li.is-reached .op-ladder__name { color: var(--level-color, #cad6e4); } .op-ladder li.is-reached .op-ladder__pip { background: rgb(var(--level-rgb, 148 163 184) / 0.4); border-color: var(--level-color, rgb(var(--tier-accent-rgb) / 0.55)); box-shadow: 0 0 12px 0 rgb(var(--level-rgb, 148 163 184) / 0.55); } .op-ladder li.is-current { background: linear-gradient(90deg, rgb(var(--level-rgb, var(--tier-accent-rgb)) / 0.16) 0%, transparent 85%); border: 1px solid rgb(var(--level-rgb, var(--tier-accent-rgb)) / 0.35); border-radius: 8px; padding: 10px 10px; margin: 3px 0; box-shadow: inset 0 0 20px rgb(var(--level-rgb, var(--tier-accent-rgb)) / 0.08); } .op-ladder li.is-current .op-ladder__name { color: #ffffff; font-weight: 700; } .op-ladder li.is-current .op-ladder__pip { border-color: var(--level-color, rgb(var(--tier-accent-rgb))); background: var(--level-color, rgb(var(--tier-accent-rgb))); box-shadow: 0 0 0 4px rgb(var(--level-rgb, var(--tier-accent-rgb)) / 0.22), 0 0 16px 2px rgb(var(--level-rgb, var(--tier-accent-rgb)) / 0.7); } .op-ladder li.is-current .op-ladder__pax { color: var(--level-color, rgb(var(--tier-accent-rgb) / 0.9)); font-weight: 600; } /* ── Progres ────────────────────────────────────────────── */ .op-progress { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--op-line); } .op-progress__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--op-muted); margin-bottom: 9px; } .op-progress__row strong { font-family: 'JetBrains Mono', monospace; color: rgb(var(--tier-accent-rgb)); font-weight: 600; } .op-track { height: 7px; border-radius: 99px; background: rgb(255 255 255 / 0.06); overflow: hidden; } .op-track__fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, rgb(var(--tier-soft-rgb)), rgb(var(--tier-accent-rgb))); box-shadow: 0 0 calc(var(--tier-glow) * 20px) rgb(var(--tier-accent-rgb) / var(--tier-glow)); } /* ── Grafik kolom ───────────────────────────────────────── */ .op-chart { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 10px; height: 168px; padding-top: 8px; } .op-chart__col { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 8px; min-width: 0; } .op-chart__plot { flex: 1; min-height: 0; display: flex; align-items: flex-end; } .op-chart__bar { position: relative; width: 100%; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, rgb(var(--tier-accent-rgb) / 0.85), rgb(var(--tier-soft-rgb) / 0.32)); min-height: 3px; transition: filter 0.18s ease; } /* Nilai melayang tepat di atas ujung kolomnya. */ .op-chart__value { position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--op-muted); white-space: nowrap; } .op-chart__col:hover .op-chart__bar { filter: brightness(1.25); } .op-chart__bar--empty { background: rgb(255 255 255 / 0.05); } .op-chart__label { font-size: 10.5px; color: var(--op-faint); text-align: center; letter-spacing: 0.04em; padding-top: 8px; border-top: 1px solid var(--op-line); white-space: nowrap; } /* ── Tabel ──────────────────────────────────────────────── */ .op-table { width: 100%; border-collapse: collapse; } .op-table th { text-align: left; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--op-faint); font-weight: 700; padding: 0 10px 10px 0; border-bottom: 1px solid var(--op-line); } .op-table td { padding: 11px 10px 11px 0; font-size: 13.5px; border-bottom: 1px solid rgb(255 255 255 / 0.04); color: #cbd6e3; } .op-table tr:last-child td { border-bottom: 0; } .op-table .num { font-family: 'JetBrains Mono', monospace; font-size: 13px; text-align: right; padding-right: 0; } .op-table th.num { text-align: right; padding-right: 0; } .op-pos { color: #6ee7a8; } .op-neg { color: #fca5a5; } .op-chip { display: inline-block; padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; } .op-chip--ok { color: #6ee7a8; background: rgb(110 231 168 / 0.12); } .op-chip--wait { color: #f5c451; background: rgb(245 196 81 / 0.12); } .op-empty { color: var(--op-faint); font-size: 13px; padding: 18px 0; text-align: center; } /* ── Pengumuman ─────────────────────────────────────────── */ /* * Kartu pengumuman: dipakai di halaman arsip maupun ringkasan dashboard. * Yang masa tayangnya sudah lewat diredupkan, bukan disembunyikan, supaya * partner tetap bisa menelusuri kabar lama. */ .op-news { padding: 18px 0; border-bottom: 1px solid var(--op-line); } .op-news:last-child { border-bottom: 0; padding-bottom: 4px; } .op-news:first-child { padding-top: 4px; } .op-news.is-past { opacity: 0.62; } .op-news__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .op-news__title { font-family: 'Syne', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin: 0; color: var(--op-text); } .op-news__meta { margin: 5px 0 0; font-size: 11.5px; letter-spacing: 0.02em; color: var(--op-faint); } .op-news__body { margin-top: 10px; font-size: 13.5px; line-height: 1.65; color: var(--op-muted); } /* ── Ajakan memesan tiket ───────────────────────────────── */ .op-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 26px; border-radius: var(--op-radius); border: 1px solid rgb(var(--tier-accent-rgb) / 0.22); background: linear-gradient(110deg, rgb(var(--tier-accent-rgb) / 0.1), transparent 58%), var(--op-ink-raised); margin-bottom: 18px; } .op-cta__title { font-family: 'Syne', sans-serif; font-size: 17px; font-weight: 700; margin: 0 0 4px; } .op-cta__text { margin: 0; font-size: 13.5px; color: var(--op-muted); max-width: 58ch; } .op-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 10px; border: 1px solid rgb(var(--tier-accent-rgb) / 0.55); background: rgb(var(--tier-accent-rgb) / 0.14); color: var(--op-text); font-size: 13.5px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color 0.18s ease, border-color 0.18s ease; } .op-btn:hover { background: rgb(var(--tier-accent-rgb) / 0.24); border-color: rgb(var(--tier-accent-rgb) / 0.8); } .op-btn svg { width: 16px; height: 16px; } .op-btn--ghost { border-color: var(--op-line-strong); background: transparent; color: var(--op-muted); } .op-btn--ghost:hover { background: rgb(255 255 255 / 0.05); border-color: var(--op-line-strong); color: var(--op-text); } /* ── Formulir ───────────────────────────────────────────── */ .op-field { margin-bottom: 16px; } .op-field label { display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--op-muted); font-weight: 700; margin-bottom: 7px; } .op-field input { width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--op-line-strong); background: rgb(255 255 255 / 0.035); color: var(--op-text); font-family: inherit; font-size: 14px; } .op-field input::placeholder { color: var(--op-faint); } .op-field input:focus { outline: none; border-color: rgb(var(--tier-accent-rgb) / 0.65); box-shadow: 0 0 0 3px rgb(var(--tier-accent-rgb) / 0.12); } .op-field__error { color: #fca5a5; font-size: 12px; margin: 6px 0 0; } .op-alert { border-radius: 11px; padding: 12px 15px; font-size: 13px; margin-bottom: 18px; border: 1px solid; } .op-alert--error { color: #fca5a5; background: rgb(239 68 68 / 0.08); border-color: rgb(239 68 68 / 0.28); } .op-alert--ok { color: #86efac; background: rgb(34 197 94 / 0.08); border-color: rgb(34 197 94 / 0.28); } /* ── Footer ─────────────────────────────────────────────── */ .op-footer { position: relative; z-index: 1; border-top: 1px solid var(--op-line); padding: 22px 0 68px; margin-top: auto; } .op-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--op-faint); } .op-footer__inner a { color: var(--op-muted); text-decoration: none; } .op-footer__inner a:hover { color: var(--op-text); } /* ── Floating Action Button (Buat Pesanan Baru) ───────────── */ .op-fab { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 45; display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px 12px 16px; border-radius: 999px; background: radial-gradient(120% 120% at 50% 0%, rgb(var(--tier-accent-rgb) / 0.38) 0%, transparent 80%), linear-gradient(180deg, rgb(var(--tier-raised-rgb)) 0%, rgb(var(--tier-ink-rgb)) 100%); color: var(--op-text); font-family: 'Syne', sans-serif; font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; border: 1px solid rgb(var(--tier-accent-rgb) / 0.55); box-shadow: 0 14px 34px -4px rgb(0 0 0 / 0.75), 0 0 24px -2px rgb(var(--tier-accent-rgb) / calc(var(--tier-glow) * 0.4 + 0.25)), inset 0 1px 0 0 rgb(255 255 255 / 0.22); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease, background 0.22s ease, color 0.22s ease; cursor: pointer; white-space: nowrap; } .op-fab:hover { transform: translateX(-50%) translateY(-3px) scale(1.03); border-color: rgb(var(--tier-accent-rgb) / 0.9); background: radial-gradient(120% 120% at 50% 0%, rgb(var(--tier-accent-rgb) / 0.55) 0%, transparent 80%), linear-gradient(180deg, rgb(var(--tier-raised-rgb)) 0%, rgb(var(--tier-ink-rgb)) 100%); box-shadow: 0 20px 42px -4px rgb(0 0 0 / 0.85), 0 0 32px 2px rgb(var(--tier-accent-rgb) / calc(var(--tier-glow) * 0.5 + 0.45)), inset 0 1px 0 0 rgb(255 255 255 / 0.4); color: #ffffff; } .op-fab:active { transform: translateX(-50%) translateY(1px) scale(0.98); box-shadow: 0 8px 20px -2px rgb(0 0 0 / 0.6), 0 0 14px 0 rgb(var(--tier-accent-rgb) / 0.2); } .op-fab__icon-box { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgb(var(--tier-accent-rgb) / 0.2); color: rgb(var(--tier-accent-rgb)); border: 1px solid rgb(var(--tier-accent-rgb) / 0.4); box-shadow: 0 2px 6px rgb(0 0 0 / 0.2); transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease; } .op-fab:hover .op-fab__icon-box { transform: rotate(90deg) scale(1.08); background: rgb(var(--tier-accent-rgb)); color: rgb(var(--tier-ink-rgb)); } .op-fab svg { width: 15px; height: 15px; stroke-width: 2.6; } .op-fab__text { display: inline-block; line-height: 1; } @media (max-width: 640px) { .op-fab { bottom: 20px; padding: 11px 18px 11px 14px; font-size: 13.5px; gap: 8px; } .op-fab__icon-box { width: 24px; height: 24px; } .op-fab svg { width: 13px; height: 13px; } } /* ── Kerangka halaman pemesanan yang disematkan ─────────── */ /* * Halaman pemesanan memakai view dan controller yang sama dengan web * customer. Isinya bertema terang, jadi kerangka partner hanya membungkus * bagian atas dan bawah, plus pita konteks agar terasa menyatu. */ .op-embed { background: linear-gradient(180deg, rgb(var(--tier-accent-rgb) / 0.12), transparent); border-bottom: 1px solid var(--op-line); position: relative; z-index: 1; } .op-embed__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 13px 0 15px; } .op-embed__label { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--op-muted); } .op-embed__label strong { color: var(--op-text); font-weight: 600; } .op-embed__tag { font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: rgb(var(--tier-accent-rgb)); border: 1px solid rgb(var(--tier-accent-rgb) / 0.35); border-radius: 99px; padding: 3px 10px; } .op-embed__crumbs { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--op-faint); } .op-embed__crumbs a { color: var(--op-muted); text-decoration: none; } .op-embed__crumbs a:hover { color: var(--op-text); } /* * Kanvas terang tempat konten pemesanan customer dirender. Diberi rona tier * yang sangat tipis supaya menyatu dengan kerangka gelap di atasnya tanpa * mengubah keterbacaan komponen pemesanan. */ .op-canvas { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; background: linear-gradient(rgb(var(--tier-accent-rgb) / 0.05), rgb(var(--tier-accent-rgb) / 0.05)), #f7f9fc; color: #111827; border-top: 1px solid rgb(var(--tier-accent-rgb) / 0.28); } /* ── Halaman masuk ──────────────────────────────────────── */ /* * Pintu portal. Tier partner belum diketahui sebelum masuk, jadi halaman ini * memakai aksen emas mitra resmi di atas laut malam, sementara tangga jenjang * di sisi kiri memperlihatkan keenam material yang menanti di dalam. */ body.op-login { --tier-accent-rgb: 210 174 90; --tier-soft-rgb: 150 118 48; --tier-ink-rgb: 5 11 20; --tier-raised-rgb: 12 22 36; --tier-glow: 0.3; /* Kotak centang, caret, dan isian otomatis peramban ikut gelap. */ color-scheme: dark; display: flex; align-items: center; justify-content: center; padding: clamp(28px, 6vh, 64px) 20px; } /* * Latar batik parang. Motif lereng ini bermakna ombak yang tak pernah * berhenti memukul karang — motif laut untuk perusahaan pelayaran, sekaligus * lambang kesinambungan yang cocok untuk kemitraan berjenjang. * * Lapisannya dimiringkan 45° seperti kain yang dikenakan menyerong, lalu * dipudarkan ke arah kartu supaya area formulir tetap bersih. */ .op-batik { position: fixed; inset: -50%; z-index: 0; pointer-events: none; transform: rotate(-45deg); opacity: 0.2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='%23D2AE5A' fill-opacity='.6'%3E%3Cpath d='M2 28C2 15 15 2 28 2 20 11 11 20 2 28Z'/%3E%3Cpath d='M32 28C32 15 45 2 58 2 50 11 41 20 32 28Z'/%3E%3Cpath d='M17 58C17 45 30 32 43 32 35 41 26 50 17 58Z'/%3E%3Cpath d='M-13 58C-13 45 0 32 13 32 5 41-4 50-13 58Z'/%3E%3Cpath d='M47 58C47 45 60 32 73 32 65 41 56 50 47 58Z'/%3E%3C/g%3E%3Cg fill='%23D2AE5A' fill-opacity='.85'%3E%3Cpath d='M15 27l3 3-3 3-3-3z'/%3E%3Cpath d='M45 27l3 3-3 3-3-3z'/%3E%3Cpath d='M0 57l3 3-3 3-3-3z'/%3E%3Cpath d='M30 57l3 3-3 3-3-3z'/%3E%3Cpath d='M0-3l3 3-3 3-3-3z'/%3E%3Cpath d='M30-3l3 3-3 3-3-3z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 84px 84px; -webkit-mask-image: linear-gradient(135deg, #000 0%, rgb(0 0 0 / 0.5) 34%, transparent 66%); mask-image: linear-gradient(135deg, #000 0%, rgb(0 0 0 / 0.5) 34%, transparent 66%); } .op-gate { position: relative; z-index: 1; width: 100%; max-width: 980px; display: grid; grid-template-columns: minmax(0, 1fr) 372px; grid-template-areas: 'brand panel' 'ladder panel'; column-gap: clamp(32px, 6vw, 68px); row-gap: 36px; } /* ── Sisi undangan ──────────────────────────────────────── */ .op-gate__brand { grid-area: brand; align-self: end; } .op-gate__mark { height: 34px; width: auto; background: #fff; padding: 4px 8px; border-radius: 7px; } .op-gate__brand .op-eyebrow { margin: 26px 0 12px; } .op-gate__headline { font-family: 'Syne', sans-serif; font-size: clamp(31px, 4.4vw, 43px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; margin: 0; } /* Nama tier di dalam portal juga diset serif miring — pintu memakai suara yang sama. */ .op-gate__headline em { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 600; letter-spacing: 0; color: rgb(var(--tier-accent-rgb)); } .op-gate__lede { margin: 16px 0 0; max-width: 44ch; font-size: 14.5px; color: var(--op-muted); } .op-gate__route { display: flex; align-items: center; gap: 14px; margin: 20px 0 0; /* Garisnya berhenti di tepi yang sama dengan tangga jenjang di bawahnya. */ max-width: 340px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--op-faint); } .op-gate__route::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--op-line-strong), transparent); } /* ── Tangga jenjang ─────────────────────────────────────── */ .op-gate__ladder { grid-area: ladder; align-self: start; max-width: 340px; } .op-gate__ladder-label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--op-faint); font-weight: 700; margin: 0 0 6px; } .op-gate__tiers { list-style: none; position: relative; margin: 0; padding: 0; } /* Rel tangga: warnanya berpindah material dari tembaga di bawah ke titanium di atas. */ .op-gate__tiers::before { content: ''; position: absolute; left: 5px; top: 14px; bottom: 14px; width: 1px; background: linear-gradient(180deg, rgb(220 228 240 / 0.55), rgb(127 240 224 / 0.4) 34%, rgb(226 190 90 / 0.4) 68%, rgb(200 129 78 / 0.4)); } .op-gate__tiers li { position: relative; display: flex; align-items: baseline; gap: 14px; padding: 7px 0 7px 24px; } .op-gate__tiers li::before { content: ''; position: absolute; left: 0; top: 11px; width: 11px; height: 11px; border-radius: 50%; background: rgb(var(--pip) / 0.18); border: 1px solid rgb(var(--pip) / 0.75); box-shadow: 0 0 14px -3px rgb(var(--pip) / 0.75); } /* Puncak tangga sedikit lebih besar dan lebih terang. */ .op-gate__tiers li:first-child::before { left: -1px; top: 10px; width: 13px; height: 13px; background: rgb(var(--pip) / 0.3); } .op-gate__tier-name { font-size: 13.5px; font-weight: 600; color: #d7dfea; } .op-gate__tier-caption { margin-left: auto; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--op-faint); font-weight: 600; } /* ── Kartu masuk ────────────────────────────────────────── */ .op-gate__panel { grid-area: panel; align-self: center; position: relative; padding: 32px 30px 26px; border-radius: 18px; background: linear-gradient(158deg, rgb(var(--tier-accent-rgb) / 0.08), transparent 58%), var(--op-ink-raised); border: 1px solid rgb(var(--tier-accent-rgb) / 0.26); box-shadow: 0 34px 80px -38px rgb(0 0 0 / 0.95), 0 1px 0 rgb(255 255 255 / 0.05) inset; } /* Tumpal: barisan segitiga yang jadi pinggiran kain batik, di sini jadi tepi kartu. */ .op-gate__panel::before { content: ''; position: absolute; top: 0; left: 20px; right: 20px; height: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cg fill='none' stroke='%23D2AE5A' stroke-width='1'%3E%3Cpath d='M0 .5h16'/%3E%3Cpath d='M0 1l8 8 8-8'/%3E%3C/g%3E%3Ccircle cx='8' cy='3.6' r='.9' fill='%23D2AE5A'/%3E%3C/svg%3E"); background-size: 16px 10px; background-repeat: repeat-x; opacity: 0.55; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); } /* Takik sobek karcis, sama seperti tepi kartu keanggotaan di dashboard. */ .op-gate__panel::after { content: ''; position: absolute; left: -9px; top: 50%; width: 18px; height: 18px; border-radius: 50%; transform: translateY(-50%); background: var(--op-ink); border: 1px solid rgb(var(--tier-accent-rgb) / 0.2); } .op-gate__panel h1 { font-family: 'Syne', sans-serif; font-size: 23px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; } .op-gate__hint { margin: 0 0 22px; font-size: 13px; color: var(--op-muted); } .op-reveal { position: relative; display: flex; } .op-reveal input { padding-right: 46px; } .op-reveal__toggle { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; background: none; border: 0; border-radius: 8px; color: var(--op-faint); cursor: pointer; transition: color 0.18s ease, background-color 0.18s ease; } .op-reveal__toggle:hover { color: var(--op-text); background: rgb(255 255 255 / 0.06); } .op-reveal__toggle svg { width: 17px; height: 17px; } .op-reveal__toggle .op-reveal__hide, .op-reveal__toggle[aria-pressed='true'] .op-reveal__show { display: none; } .op-reveal__toggle[aria-pressed='true'] .op-reveal__hide { display: block; } .op-remember { display: flex; align-items: center; gap: 9px; margin: 2px 0 20px; font-size: 13px; color: var(--op-muted); cursor: pointer; } .op-remember input { width: 15px; height: 15px; accent-color: rgb(var(--tier-accent-rgb)); cursor: pointer; } .op-gate__submit { width: 100%; justify-content: center; padding: 12px 20px; font-size: 14px; font-weight: 700; color: #12161d; border-color: transparent; background: linear-gradient(135deg, #e6c473, #b58f31); } .op-gate__submit:hover { border-color: transparent; background: linear-gradient(135deg, #f0d283, #c69c37); } .op-gate__foot { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--op-line); font-size: 11.5px; line-height: 1.6; color: var(--op-faint); text-align: center; } /* Halaman naik sekali saat dibuka: undangan, kartu, lalu anak tangga. */ @media (prefers-reduced-motion: no-preference) { .op-gate > * { animation: op-gate-rise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; } .op-gate__panel { animation-delay: 0.08s; } .op-gate__ladder { animation-delay: 0.16s; } .op-gate__tiers li { animation: op-gate-rise 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; animation-delay: calc(0.22s + var(--i) * 0.06s); } } @keyframes op-gate-rise { from { opacity: 0; transform: translateY(10px); } } @media (max-width: 900px) { .op-gate { max-width: 440px; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'brand' 'panel' 'ladder'; row-gap: 28px; } .op-gate__brand { align-self: auto; } .op-gate__lede { font-size: 14px; } /* Tangga pindah ke bawah kartu dan merapat jadi dua kolom. */ .op-gate__tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; } .op-gate__tiers::before { display: none; } .op-gate__tier-caption { display: none; } } /* ── Responsif ──────────────────────────────────────────── */ @media (max-width: 1024px) { .op-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .op-grid--split, .op-grid--aside { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 860px) { .op-nav { position: absolute; top: 66px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px 24px 16px; background: var(--op-ink); border-bottom: 1px solid var(--op-line); box-shadow: 0 18px 40px -20px rgb(0 0 0 / 0.9); margin-left: 0; } .op-nav[hidden] { display: none; } .op-nav a.is-active::after { display: none; } .op-burger { display: grid; } .op-account { border-left: 0; padding-left: 0; margin-left: auto; } .op-account__meta { display: none; } } @media (max-width: 720px) { .op-shell { padding: 0 16px; } .op-plate { grid-template-columns: minmax(0, 1fr); padding: 24px 22px; gap: 20px; } .op-rank { text-align: left; padding-left: 0; padding-top: 18px; border-left: 0; border-top: 1px solid rgb(var(--tier-accent-rgb) / 0.18); } .op-guilloche { display: none !important; } .op-metrics { grid-template-columns: minmax(0, 1fr); } .op-chart { height: 130px; gap: 6px; } .op-chart__value { display: none; } .op-embed__inner { gap: 6px; } .op-embed__prefix { display: none; } .op-embed__tag { flex-shrink: 0; } } /* ── Aksesibilitas ──────────────────────────────────────── */ .op-nav a:focus-visible, .op-btn:focus-visible, .op-link:focus-visible, .op-signout:focus-visible, .op-burger:focus-visible, .op-brand:focus-visible, .op-reveal__toggle:focus-visible, .op-remember input:focus-visible { outline: 2px solid rgb(var(--tier-accent-rgb)); outline-offset: 2px; } .op-skip { position: absolute; left: -9999px; } .op-skip:focus { left: 24px; top: 12px; z-index: 60; background: var(--op-ink-raised); color: var(--op-text); padding: 10px 16px; border-radius: 8px; border: 1px solid rgb(var(--tier-accent-rgb) / 0.5); } /* ── Modal Dialog Jenjang Keanggotaan ───────────────────── */ .op-modal-dialog { position: fixed; inset: 0; width: 100%; height: 100%; max-width: 100vw; max-height: 100vh; padding: 0; margin: 0; border: none; background: transparent; z-index: 100; display: flex; align-items: center; justify-content: center; overflow-y: auto; } .op-modal-dialog:not([open]) { display: none; } .op-modal-backdrop { position: fixed; inset: 0; background: rgba(3, 7, 13, 0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: op-fade-in 0.2s ease forwards; z-index: 1; } .op-modal-container { position: relative; z-index: 2; width: 100%; max-width: 560px; padding: 20px; box-sizing: border-box; } .op-modal { position: relative; background: radial-gradient(100% 120% at 50% 0%, rgb(var(--tier-accent-rgb) / 0.14) 0%, transparent 60%), var(--op-ink-raised); border: 1px solid rgb(var(--tier-accent-rgb) / 0.35); border-radius: calc(var(--op-radius) + 4px); box-shadow: 0 24px 60px -12px rgb(0 0 0 / 0.85), 0 0 35px 0 rgb(var(--tier-accent-rgb) / calc(var(--tier-glow) * 0.3 + 0.15)), inset 0 1px 0 0 rgb(255 255 255 / 0.15); padding: 26px 28px; animation: op-modal-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .op-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--op-line); } .op-modal__title { font-family: 'Syne', sans-serif; font-size: 20px; font-weight: 700; margin: 0; color: #ffffff; } .op-modal__hint { font-size: 12.5px; color: var(--op-muted); margin: 4px 0 0; } .op-modal__close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: rgb(255 255 255 / 0.06); border: 1px solid var(--op-line-strong); color: var(--op-muted); cursor: pointer; transition: all 0.18s ease; flex-shrink: 0; } .op-modal__close:hover { background: rgb(255 255 255 / 0.15); color: #ffffff; border-color: rgb(var(--tier-accent-rgb) / 0.6); transform: scale(1.05); } .op-modal__close svg { width: 16px; height: 16px; } @keyframes op-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes op-modal-pop { from { opacity: 0; transform: scale(0.94) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* ── Filter Form Controls (Tren Penjualan & Riwayat Poin) ── */ .op-filter-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .op-filter-group { display: inline-flex; align-items: center; gap: 8px; } .op-filter-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--op-faint); margin: 0; white-space: nowrap; } .op-select { appearance: none; -webkit-appearance: none; padding: 7px 32px 7px 12px; border-radius: 8px; border: 1px solid var(--op-line-strong); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa5b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 12px, rgb(255 255 255 / 0.05); color: var(--op-text); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color 0.18s ease, background-color 0.18s ease; } .op-select:hover, .op-select:focus { border-color: rgb(var(--tier-accent-rgb) / 0.6); outline: none; background-color: rgb(255 255 255 / 0.08); } .op-select option { background: var(--op-ink-raised); color: var(--op-text); } .op-filter-dates { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .op-filter-field { display: inline-flex; align-items: center; gap: 6px; } .op-input-date { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--op-line-strong); background: rgb(255 255 255 / 0.05); color: var(--op-text); font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color-scheme: dark; transition: border-color 0.18s ease, background-color 0.18s ease; } .op-input-date:hover, .op-input-date:focus { border-color: rgb(var(--tier-accent-rgb) / 0.6); outline: none; background-color: rgb(255 255 255 / 0.08); } .op-filter-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 8px; border: 1px solid rgb(var(--tier-accent-rgb) / 0.5); background: rgb(var(--tier-accent-rgb) / 0.18); color: var(--op-text); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all 0.18s ease; } .op-filter-btn:hover { background: rgb(var(--tier-accent-rgb) / 0.32); border-color: rgb(var(--tier-accent-rgb) / 0.8); color: #ffffff; } .op-filter-reset { font-size: 12px; color: var(--op-muted); text-decoration: underline; text-underline-offset: 3px; padding: 4px 6px; transition: color 0.18s ease; } .op-filter-reset:hover { color: #f87171; } /* ── Pagination ─────────────────────────────────────────── */ .op-pagination { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--op-line); } .op-pagination nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--op-muted); } .op-pagination nav div:first-child p, .op-pagination nav p { font-size: 12px; color: var(--op-faint); margin: 0; } .op-pagination nav span.relative, .op-pagination nav div:last-child { display: inline-flex; align-items: center; gap: 4px; } .op-pagination a, .op-pagination span[aria-current="page"] span, .op-pagination span.relative > span { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; text-decoration: none; transition: all 0.18s ease; } .op-pagination a { background: rgb(255 255 255 / 0.04); border: 1px solid var(--op-line-strong); color: var(--op-text); } .op-pagination a:hover { background: rgb(var(--tier-accent-rgb) / 0.2); border-color: rgb(var(--tier-accent-rgb) / 0.6); color: #ffffff; } .op-pagination span[aria-current="page"] > span, .op-pagination span[aria-current="page"] span { background: rgb(var(--tier-accent-rgb) / 0.25); border: 1px solid rgb(var(--tier-accent-rgb) / 0.8); color: #ffffff; } .op-pagination span.relative > span:not([aria-current="page"]) { background: transparent; border: 1px solid transparent; color: var(--op-faint); cursor: default; } .op-pagination svg { width: 14px; height: 14px; } /* ── Leaderboard Table ──────────────────────────────────── */ .op-leaderboard-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .op-leaderboard-table th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--op-faint); padding: 10px 14px; border-bottom: 1px solid var(--op-line-strong); } .op-leaderboard-table th.num, .op-leaderboard-table td.num { text-align: right; } .op-leaderboard-table td { padding: 12px 14px; border-bottom: 1px solid var(--op-line); color: var(--op-text); } .op-leaderboard-table tr:last-child td { border-bottom: none; } .op-leaderboard-table tr.is-you { background: rgb(var(--tier-accent-rgb) / 0.12); } .op-leaderboard-table tr.is-you td { color: #ffffff; } .op-badge-you { display: inline-block; padding: 2px 7px; border-radius: 99px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: rgb(var(--tier-accent-rgb) / 0.25); color: rgb(var(--tier-accent-rgb)); border: 1px solid rgb(var(--tier-accent-rgb) / 0.5); margin-left: 6px; vertical-align: 1px; } .op-rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; background: rgb(255 255 255 / 0.06); color: var(--op-muted); } .op-rank-badge--1 { background: linear-gradient(135deg, #f59e0b, #d97706); color: #000000; box-shadow: 0 0 12px rgba(245, 158, 11, 0.4); } .op-rank-badge--2 { background: linear-gradient(135deg, #e2e8f0, #94a3b8); color: #0f172a; box-shadow: 0 0 12px rgba(226, 232, 240, 0.3); } .op-rank-badge--3 { background: linear-gradient(135deg, #d97706, #92400e); color: #ffffff; box-shadow: 0 0 12px rgba(217, 119, 6, 0.3); }