/* ============================================================================ ECLIPSE CANON — MOBILE LAYER (iOS app screens, 375×812) Turunan DNA dari "Brainwave AI iOS UI Kit" (Figma) → di-remap ke token Canon. Nempel DI ATAS eclipse.css. Warna 100% dari --brand + palette canon; satu-satunya warna hardcode = bezel device + chrome nav (netral, bukan aksen). Dark per-frame: kasih data-theme="dark" di elemen .m-screen (bukan cuma ). ========================================================================== */ /* ── DEVICE FRAME ────────────────────────────────────────────────────────── .mfr = bodi HP (bezel). .m-screen = layar (scope token, bisa light/dark sendiri). */ .mfr { --bezel: #0b0f14; width: 375px; height: 812px; flex-shrink: 0; position: relative; border-radius: 46px; background: var(--bezel); box-shadow: 0 0 0 2px #232d3a, var(--shadow-pop); } .m-screen { /* chrome nav = selalu gelap netral di light & dark (ciri kit) */ --m-chrome: #111c2d; --m-chrome-ink: #eaeff4; position: absolute; inset: 6px; border-radius: 40px; overflow: hidden; background: var(--canvas); color: var(--ink); display: flex; flex-direction: column; font-family: var(--font); font-size: var(--fs-body); line-height: 1.4; } .m-screen[data-theme="dark"] { --m-chrome: #0c1522; } /* ── STATUS BAR + NOTCH (Dynamic Island) + HOME INDICATOR ─────────────────── */ .m-status { height: 50px; flex-shrink: 0; padding: 0 26px 0 30px; position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); } .m-status .sig { display: inline-flex; align-items: center; gap: 7px; } .m-status svg { display: block; } .m-status::after { /* dynamic island */ content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 116px; height: 32px; background: var(--bezel, #0b0f14); border-radius: 20px; } .m-home-ind { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 7; width: 128px; height: 5px; border-radius: 3px; background: var(--ink); opacity: .85; } /* ── BODY (area scroll) ──────────────────────────────────────────────────── .pad-nav = sisain ruang buat floating nav. .flush = tanpa padding samping. */ .m-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 20px 22px; } .m-body.flush { padding: 0; } .m-body.pad-nav { padding-bottom: 96px; } .m-body::-webkit-scrollbar { width: 0; display: none; } .m-body { scrollbar-width: none; } /* ── SCREEN HEADER (back / judul / aksi) ──────────────────────────────────── */ .m-head { display: flex; align-items: center; gap: 12px; padding: 6px 20px 10px; flex-shrink: 0; } .m-head .ttl { flex: 1; min-width: 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; } .m-head .ttl.sm { font-size: 1.15rem; } .m-head .ttl.center { text-align: center; } .m-iconbtn { width: 44px; height: 44px; border-radius: 50%; border: none; flex-shrink: 0; cursor: pointer; /* ≥44 tap (GPT) */ background: var(--hover); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; } .m-iconbtn.plain { background: none; } .m-iconbtn svg { width: 20px; height: 20px; } /* ── HEADLINE gede (home/onboarding) ──────────────────────────────────────── */ .m-h1 { font-size: 2rem; line-height: 1.12; font-weight: 800; letter-spacing: -.03em; color: var(--ink); } .m-h2 { font-size: 1.5rem; line-height: 1.18; font-weight: 800; letter-spacing: -.025em; color: var(--ink); } .m-lead { color: var(--ink-soft); font-size: .95rem; line-height: 1.5; } /* ── SECTION HEADER (judul + See all) ─────────────────────────────────────── */ .m-sec { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 13px; } .m-sec .h { font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 6px; } .m-sec a, .m-see { color: var(--brand); font-weight: 600; font-size: .875rem; cursor: pointer; } /* ── FILTER PILLS (scroll horizontal; aktif = ink netral, sesuai kit) ─────── */ .m-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0; scrollbar-width: none; } .m-tabs::-webkit-scrollbar { display: none; } .m-tab { flex-shrink: 0; white-space: nowrap; cursor: pointer; border: none; min-height: 38px; display: inline-flex; align-items: center; padding: 8px 18px; border-radius: var(--r-pill); font-family: var(--font); font-weight: 600; font-size: .875rem; background: var(--hover); color: var(--ink-soft); } .m-tab.is-active { background: var(--ink); color: var(--canvas); } /* ── AI TOOL CARD (gradient header + hexagon badge + judul) ────────────────── */ .m-tools { display: flex; gap: 14px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; margin: 0 -20px; padding-inline: 20px; } .m-tools::-webkit-scrollbar { display: none; } .m-tool { width: 188px; flex-shrink: 0; border-radius: var(--r-card); overflow: hidden; background: var(--paper); box-shadow: var(--shadow-card); } .m-tool .g { height: 106px; position: relative; } .m-tool .badge { position: absolute; left: 14px; bottom: -16px; width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: var(--shadow-card); } .m-tool .badge svg { width: 22px; height: 22px; } .m-tool .cap { padding: 24px 14px 15px; font-weight: 700; font-size: .95rem; line-height: 1.25; letter-spacing: -.01em; } /* Gradient terkoordinasi dari palette canon (chart-1..6). Bukan warna liar. */ .grad-a { background: linear-gradient(135deg, var(--chart-3), var(--chart-5)); } /* amber→rose */ .grad-b { background: linear-gradient(135deg, var(--chart-4), var(--chart-6)); } /* violet→sky */ .grad-c { background: linear-gradient(135deg, var(--brand), var(--chart-4)); } /* brand→violet*/ .grad-d { background: linear-gradient(135deg, var(--chart-2), var(--chart-6)); } /* teal→sky */ .grad-e { background: linear-gradient(135deg, var(--chart-5), var(--chart-4)); } /* rose→violet */ .grad-brand { background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 60%, #7c5cff)); } /* ── ICON TILE warna (baris tool: Photo/Video/Code…) — tint palette ───────── */ .m-tile { width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .m-tile svg { width: 22px; height: 22px; } .tile-1 { background: var(--brand-tint); color: var(--brand); } .tile-2 { background: color-mix(in srgb, var(--chart-4) 15%, var(--paper)); color: var(--chart-4); } .tile-3 { background: color-mix(in srgb, var(--chart-3) 18%, var(--paper)); color: #d99733; } .tile-4 { background: color-mix(in srgb, var(--chart-2) 15%, var(--paper)); color: #109c8d; } .tile-5 { background: color-mix(in srgb, var(--chart-5) 15%, var(--paper)); color: var(--chart-5); } .tile-6 { background: color-mix(in srgb, var(--chart-6) 16%, var(--paper)); color: #1c9fe0; } /* ── LIST ROW versi mobile (kartu bordered) — buat voice/settings/notif ───── */ .m-row { display: flex; align-items: center; gap: 14px; padding: 13px 15px; background: var(--paper); border: 1px solid var(--divider); border-radius: 16px; margin-bottom: 11px; } .m-row .t { flex: 1; min-width: 0; font-weight: 700; letter-spacing: -.01em; } .m-row .t .s { font-weight: 500; font-size: .8rem; color: var(--ink-soft); margin-top: 2px; } .m-row .chev { color: var(--muted); flex-shrink: 0; } .m-row.tap { cursor: pointer; transition: border-color .12s; } .m-row.tap:hover { border-color: var(--brand); } /* ── FAVORIT / CHAT-LIST ROW (avatar + judul + meta) ──────────────────────── */ .m-frow { display: flex; align-items: center; gap: 13px; padding: 11px 4px; cursor: pointer; } .m-frow .thumb { width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; } .m-frow .thumb img { width: 100%; height: 100%; object-fit: cover; } .m-frow .grow { flex: 1; min-width: 0; } .m-frow .grow .t { font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .m-frow .grow .s { font-size: .8rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; } .m-frow .meta { font-size: .75rem; color: var(--muted); flex-shrink: 0; text-align: right; } /* ── FLOATING BOTTOM NAV (pill chrome gelap; aktif = putih, ikut kit) ─────── */ .m-nav { position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 3px; padding: 8px 9px; background: var(--m-chrome); border-radius: var(--r-pill); box-shadow: var(--shadow-pop); } .m-nav a { width: 46px; height: 46px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: color-mix(in srgb, var(--m-chrome-ink) 58%, transparent); } .m-nav a svg { width: 22px; height: 22px; } .m-nav a.is-active { background: var(--m-chrome-ink); color: var(--m-chrome); } /* ── CHAT: bubble mobile (lebar lebih besar dari desktop) ──────────────────── */ .m-screen .bubble { max-width: 82%; box-shadow: none; font-size: .95rem; } .m-screen .bubble.in { background: var(--paper); box-shadow: var(--shadow-card); } .m-ubub { align-self: flex-end; max-width: 84%; background: var(--paper); border: 1px solid var(--divider); border-radius: 18px; border-bottom-right-radius: 6px; padding: 13px 15px; font-size: .95rem; line-height: 1.5; } .m-thread { flex: 1; overflow-y: auto; padding: 8px 18px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: none; } .m-thread::-webkit-scrollbar { display: none; } .m-aimark { width: 42px; height: 42px; border-radius: 13px; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .m-aimark svg { width: 24px; height: 24px; } /* ── CODE BLOCK (hasil code-gen) ──────────────────────────────────────────── */ .m-code { background: #0d1522; border-radius: 16px; overflow: hidden; font-family: 'SFMono-Regular', ui-monospace, Menlo, monospace; } .m-code .tabs { display: flex; gap: 4px; padding: 8px 8px 0; } .m-code .tabs b { padding: 7px 14px; border-radius: 9px 9px 0 0; font-size: .72rem; font-weight: 600; color: #7c8fac; font-family: var(--font); } .m-code .tabs b.on { background: #1b2738; color: #eaeff4; } .m-code pre { margin: 0; padding: 14px 16px; font-size: .72rem; line-height: 1.7; color: #aeb9d0; overflow-x: auto; } .m-code .k { color: #6ab7ff; } .m-code .s { color: #7fdd9a; } .m-code .f { color: #f7b955; } /* ── COMPOSER (input chat: + / ask / send-waveform) ───────────────────────── */ .m-composer { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 10px 16px max(16px, env(safe-area-inset-bottom)); } .m-composer .box { flex: 1; display: flex; align-items: center; gap: 10px; background: var(--paper); border: 1px solid var(--divider); border-radius: var(--r-pill); padding: 7px 8px; } .m-composer .plus { width: 34px; height: 34px; border-radius: 50%; background: var(--hover); color: var(--ink); border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .m-composer input { flex: 1; min-width: 0; border: none; background: none; font-family: var(--font); font-size: .95rem; color: var(--ink); } .m-composer input::placeholder { color: var(--muted); } .m-composer input:focus { outline: none; } .m-composer .send { width: 38px; height: 38px; border-radius: 50%; background: var(--brand); color: #fff; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ── WAVEFORM (voice) ─────────────────────────────────────────────────────── */ .m-wave { display: inline-flex; align-items: center; gap: 3px; height: 30px; } .m-wave i { width: 3px; border-radius: 2px; background: var(--brand); opacity: .85; } /* ── ONBOARDING ───────────────────────────────────────────────────────────── */ .m-onb-art { position: relative; overflow: hidden; border-radius: 34px; margin: 6px 0 26px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 120% at 50% 30%, var(--brand-tint), color-mix(in srgb, var(--brand-tint) 40%, var(--canvas))); } .m-dots { display: flex; gap: 8px; justify-content: center; align-items: center; } .m-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--divider); transition: width .2s; } .m-dots i.on { width: 22px; border-radius: 4px; background: var(--brand); } .m-cta-lg { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 16px; border: none; border-radius: var(--r-pill); cursor: pointer; background: var(--brand); color: #fff; font-family: var(--font); font-weight: 700; font-size: 1rem; } .m-cta-lg.ink { background: var(--ink); color: var(--canvas); } .m-cta-lg.soft { background: var(--paper); color: var(--ink); border: 1px solid var(--divider); } /* ── BOTTOM SHEET (signin) ────────────────────────────────────────────────── */ .m-sheet { margin-top: auto; background: var(--paper); border-radius: 34px 34px 40px 40px; padding: 34px 24px 30px; box-shadow: 0 -10px 30px rgba(0,0,0,.06); } /* ── PLAN CARD (pricing) ──────────────────────────────────────────────────── */ .m-plans { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 6px 20px 8px; } .m-plans::-webkit-scrollbar { display: none; } .m-plan { width: 270px; flex-shrink: 0; background: var(--paper); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 26px 24px; } .m-plan.pro { background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 10%, var(--paper)), var(--paper)); box-shadow: 0 0 0 1.5px var(--brand), var(--shadow-card); } .m-plan .pt { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; } .m-plan .pt.brand { color: var(--brand); } .m-plan .price { font-size: 2.5rem; font-weight: 800; letter-spacing: -.03em; margin: 14px 0 2px; } .m-plan .price small { font-size: 1rem; font-weight: 600; color: var(--muted); } .m-feat { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: .9rem; } .m-feat .ck { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .m-feat .ck svg { width: 15px; height: 15px; } /* ══════════════════════════════════════════════════════════════════════════ BARE MODE — 1 screen full-bleed tanpa chrome (buat ?bare=1 / preview device) (shell.js kasih saat ?bare). ════════════════════════ */ html.m-bare, html.m-bare body { margin: 0; padding: 0; height: 100%; background: var(--canvas); } html.m-bare body { display: block; } html.m-bare .ec-shell { display: block; min-height: 0; } html.m-bare #ec-top, html.m-bare #ec-side { display: none; } html.m-bare .ec-content { padding: 0; display: block; } html.m-bare .mfr ~ .mfr { display: none; } /* cuma frame pertama */ html.m-bare .mfr { width: 100%; height: 100vh; border-radius: 0; box-shadow: none; } html.m-bare .m-screen { position: static; inset: auto; width: 100%; height: 100vh; border-radius: 0; } /* ══════════════════════════════════════════════════════════════════════════ POLISH v2 — kolaborasi review GPT-5 (2026-07-17). Semua hormat DNA: 1 aksen brand, token doang, no emoji. Yang diambil = valid + high-ROI. ════════════════════════════════════════════════════════════════════════ */ /* Scrim halus di gradient thumb kartu tool → badge & sudut lebih kebaca (GPT: gradient overpower) */ .m-tool .g::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 46%, rgba(0,0,0,.16)); } /* Kontras teks sekunder di DARK (GPT: timestamp/placeholder terlalu redup di navy) */ .m-screen[data-theme="dark"] .m-frow .meta, .m-screen[data-theme="dark"] .bubble .time { color: var(--ink-soft); } .m-screen[data-theme="dark"] .m-composer input::placeholder { color: var(--ink-soft); } /* Brand pulse (signature GPT): ring denyut dari --brand buat state aktif/rekam/generate. Cuma pakai --brand — nol warna tambahan. Tempel .m-pulse di tombol yang lagi "kerja". */ @keyframes m-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 42%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .m-pulse { animation: m-pulse 1.8s ease-out infinite; } /* Slash-command sheet (signature GPT): muncul pas ketik '/' di composer chat. Palette perintah token-styled, match brand-tint. */ .m-cmd { margin: 0 14px 8px; background: var(--paper); border: 1px solid var(--divider); border-radius: 18px; box-shadow: var(--shadow-pop); overflow: hidden; } .m-cmd .ch { padding: 9px 14px 7px; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .m-cmd .it { display: flex; align-items: center; gap: 12px; padding: 9px 14px; cursor: pointer; } .m-cmd .it.on, .m-cmd .it:hover { background: var(--brand-tint); } .m-cmd .it .m-tile { width: 32px; height: 32px; border-radius: 10px; } .m-cmd .it .m-tile svg { width: 17px; height: 17px; } .m-cmd .it .k { min-width: 0; font-weight: 700; letter-spacing: -.01em; } .m-cmd .it .k em { color: var(--brand); font-style: normal; } .m-cmd .it .k .d { font-weight: 500; font-size: .78rem; color: var(--ink-soft); margin-top: 1px; } /* ══════════════════════════════════════════════════════════════════════════ STATES — loading / AI-thinking / empty / error (GPT: gap paling 'template-y') ════════════════════════════════════════════════════════════════════════ */ /* Skeleton shimmer (token-driven, jalan di light & dark) */ .m-skel { position: relative; overflow: hidden; background: var(--grey-100); border-radius: 12px; } .m-skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--paper) 55%, transparent), transparent); animation: m-shimmer 1.4s infinite; } @keyframes m-shimmer { 100% { transform: translateX(100%); } } .m-skel-line { height: 12px; border-radius: 6px; } .m-skel-card { height: 106px; border-radius: var(--r-card); } .st-label { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 20px 0 11px; } /* AI lagi mikir (bubble shimmer + typing dot) */ .m-think { display: flex; gap: 10px; align-items: flex-start; } .m-think .bub { flex: 1; background: var(--paper); box-shadow: var(--shadow-card); border-radius: 16px; border-bottom-left-radius: 5px; padding: 14px 16px; } .m-think .bub .dots { display: inline-flex; gap: 5px; align-items: center; } /* Empty state */ .m-empty { text-align: center; padding: 30px 22px; } .m-empty .ic { width: 74px; height: 74px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; } .m-empty .ic svg { width: 34px; height: 34px; } .m-empty h4 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; } .m-empty p { color: var(--ink-soft); font-size: .9rem; margin: 6px auto 18px; line-height: 1.5; max-width: 250px; } /* Error / offline banner (pakai state token error, 1 aksen tetep brand) */ .m-errbar { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--error-tint); border: 1px solid color-mix(in srgb, var(--error) 40%, transparent); } .m-errbar .ic { color: var(--error); flex-shrink: 0; } .m-errbar .ic svg { width: 22px; height: 22px; display: block; } .m-errbar .tx { flex: 1; min-width: 0; } .m-errbar .tx b { font-weight: 700; letter-spacing: -.01em; } .m-errbar .tx p { margin: 2px 0 0; font-size: .82rem; color: var(--ink-soft); } .m-errbar .retry { flex-shrink: 0; align-self: center; background: var(--paper); border: 1px solid var(--divider); color: var(--ink); font-family: var(--font); font-weight: 600; font-size: .8rem; padding: 7px 13px; border-radius: var(--r-pill); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .m-errbar .retry svg { width: 14px; height: 14px; } /* ══════════════════════════════════════════════════════════════════════════ MOBILE POLISH — nyamain kualitas app Emergent (mockup = REFERENSI AI, wajib top-grade) Subtitle kartu tool + sparkle + chevron favorit + notif-bell. Semua token, 1-aksen. ════════════════════════════════════════════════════════════════════════ */ .m-tool .cap .sub { display: block; font-weight: 500; font-size: .78rem; color: var(--ink-soft); margin-top: 3px; letter-spacing: 0; } .m-tool .g .spark { position: absolute; top: 12px; right: 13px; color: rgba(255,255,255,.78); pointer-events: none; } .m-tool .g .spark svg { width: 16px; height: 16px; display: block; } .m-frow .chev { color: var(--muted); flex-shrink: 0; align-self: center; } .m-frow .chev svg { width: 18px; height: 18px; display: block; } .m-bell { position: relative; } .m-bell .bdot { position: absolute; top: 9px; right: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px var(--paper); } [data-theme="dark"] .m-bell .bdot { box-shadow: 0 0 0 2px var(--canvas); }