/* ============================================= theme.css — Shared design tokens & component styles untuk semua generator PromptStudio. Gaya "riso paper" — konsisten dengan index.html root & poster/. Guna bersama Tailwind CDN (tailwind.config dalam setiap page perlu daftar warna/font/shadow yang sama — lihat blok tailwind.config di bawah, salin ke setiap generator). ============================================= */ /* tailwind.config = { theme: { extend: { colors: { paper: '#FBF7EF', ink: '#221C35', riso: { pink: '#FF4D8D', blue: '#3D6BFF', yellow: '#FFC53D', mint: '#2EC4A0' }, }, fontFamily: { display: ['"Bricolage Grotesque"', 'sans-serif'], body: ['"Schibsted Grotesk"', 'sans-serif'], mono: ['"IBM Plex Mono"', 'monospace'], }, boxShadow: { sticker: '3px 3px 0 0 #221C35', stickerSm: '2px 2px 0 0 #221C35', card: '0 1px 2px rgba(34,28,53,.06), 0 8px 24px rgba(34,28,53,.07)', }, } } } */ body { font-family: 'Schibsted Grotesk', sans-serif; background:#FBF7EF; color:#221C35; } .paper-dots { background-image: radial-gradient(rgba(34,28,53,.07) 1px, transparent 1px); background-size: 22px 22px; } [x-cloak] { display:none !important; } @media (prefers-reduced-motion: reduce) { .card-hover, .modal-pop, .chip, .accordion-body { transition: none !important; animation: none !important; } } @keyframes pop { 0%{transform:scale(.96);opacity:0} 100%{transform:scale(1);opacity:1} } .modal-pop { animation: pop .18s ease-out; } @keyframes toast-in { 0%{transform:translateY(12px);opacity:0} 100%{transform:translateY(0);opacity:1} } .toast-in { animation: toast-in .2s ease-out; } @keyframes spin { to { transform: rotate(360deg); } } .spin { animation: spin .8s linear infinite; } .card-hover { transition: transform .15s ease, box-shadow .15s ease; } .card-hover:hover { transform: translateY(-3px); } .powered-gradient { background: linear-gradient(90deg, #FF4D8D, #3D6BFF); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; } /* ── Chip / pill selector (guna untuk pilihan style, mood, dll) ── */ .chip { transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease; border: 1.5px solid rgba(34,28,53,.18); } .chip:hover { transform: translateY(-1px); border-color:#221C35; } .chip-on { border-color:#221C35 !important; box-shadow: 2px 2px 0 0 #221C35; transform: rotate(-1deg); font-weight: 600; } .chip:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid #3D6BFF; outline-offset: 2px; } /* ── Label & tooltip ── */ .lbl { font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:rgba(34,28,53,.8); } .lbl-note { text-transform:none; color:rgba(34,28,53,.4); font-weight:400; } .tipbtn { width:17px; height:17px; display:grid; place-items:center; border-radius:9999px; background:rgba(61,107,255,.15); color:#3D6BFF; font-size:10px; font-weight:700; transition:background .15s, color .15s; flex-shrink:0; } .tipbtn:hover { background:#3D6BFF; color:#FBF7EF; } /* Tooltip expand-inline (guna ganti popup float lama) */ .tip-box { font-size: 12px; line-height: 1.6; color: rgba(34,28,53,.75); background: rgba(61,107,255,.07); border: 1.5px dashed rgba(61,107,255,.35); border-radius: 0.65rem; padding: 0.65rem 0.85rem; margin-bottom: 0.6rem; } .tip-box b { color:#221C35; } /* ── Accordion (untuk seksyen borang yang boleh collapse) ── */ .accordion-body { transition: grid-template-rows .25s ease; display:grid; grid-template-rows: 0fr; } .accordion-body.open { grid-template-rows: 1fr; } .accordion-body > div { overflow: hidden; } /* ── Form input standard ── */ .ps-input, .ps-select, .ps-textarea { width: 100%; border: 1.5px solid rgba(34,28,53,.18); border-radius: 0.75rem; padding: 0.65rem 0.9rem; font-size: 0.9rem; background: #fff; color: #221C35; transition: border-color .15s ease; } .ps-input:focus, .ps-select:focus, .ps-textarea:focus { border-color:#221C35; outline: 3px solid #3D6BFF; outline-offset: 1px; } .ps-textarea { resize: vertical; min-height: 4.5rem; } /* ── Button standard ── */ .ps-btn { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; font-weight:700; border-radius: 1rem; border: 2px solid #221C35; padding: 0.75rem 1.25rem; transition: all .15s ease; font-family:'Bricolage Grotesque', sans-serif; } .ps-btn-primary { background:#221C35; color:#FBF7EF; box-shadow: 3px 3px 0 0 #221C35; } .ps-btn-primary:hover { transform: translateY(-2px); box-shadow: 4px 5px 0 0 #221C35; } .ps-btn-primary:active { transform: translateY(0); box-shadow: 2px 2px 0 0 #221C35; } .ps-btn-ghost { background:#FBF7EF; color:#221C35; border-color: rgba(34,28,53,.25); box-shadow:none; } .ps-btn-ghost:hover { border-color:#221C35; } .ps-btn:disabled { opacity:.6; cursor:not-allowed; transform:none !important; } /* Navigasi kembali yang konsisten pada semua halaman generator dan pusat akaun. */ .ps-hub-return { display:inline-flex !important; align-items:center; gap:.35rem; padding:.45rem .7rem; border:2px solid #221C35; border-radius:9999px; background:#fff; color:#221C35; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; box-shadow:2px 2px 0 #221C35; transition:transform .15s ease,box-shadow .15s ease; } .ps-hub-return:hover { transform:translateY(-1px); box-shadow:3px 3px 0 #221C35; } /* Perlindungan lebar skrin kecil untuk setiap generator. */ html, body { max-width:100%; overflow-x:hidden; } img, svg, video, canvas { max-width:100%; } /* Tailwind's `hidden` needs an explicit override kerana .ps-hub-return menggunakan !important. */ .ps-hub-return.hidden { display:none !important; } @media (min-width: 1024px) { .ps-hub-return.hidden.lg\:inline-flex { display:inline-flex !important; } } @media (max-width: 767px) { .ps-btn { max-width:100%; } .modal-pop { max-width:calc(100vw - 2rem); } }