/* ============================================================ Plasto Suite — Shared Visual Theme Matches the Cost Engine (Price_index.html) look: purple/indigo gradient backdrop, white glass cards, sky-blue accents, Inter typography. Loaded LAST in so it wins the cascade over each tool's own base styles, without touching their internal logic or structure. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); :root { --plasto-grad-1: #667eea; --plasto-grad-2: #764ba2; --plasto-accent: #0ea5e9; --plasto-accent-dark: #0369a1; } html, body { font-family: 'Inter', sans-serif !important; } /* Page backdrop — applied everywhere for visual consistency with the Cost Engine. Uses !important + is linked last so it wins regardless of each tool's own base body background. */ body { background: linear-gradient(135deg, var(--plasto-grad-1) 0%, var(--plasto-grad-2) 100%) !important; background-attachment: fixed !important; } /* Reusable glass-card look, available to every tool */ .plasto-shell { background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 1rem; box-shadow: 0 20px 50px rgba(30, 20, 70, 0.25); } /* Focus ring + accent, consistent everywhere */ input:focus, select:focus, textarea:focus { outline: none !important; border-color: var(--plasto-accent) !important; box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18) !important; } /* Generic primary-action button skin — opt in with class="plasto-btn-primary" */ .plasto-btn-primary { background: linear-gradient(135deg, var(--plasto-accent) 0%, var(--plasto-accent-dark) 100%) !important; color: #fff !important; border: none !important; font-weight: 700 !important; border-radius: 0.75rem !important; box-shadow: 0 4px 14px rgba(14,165,233,0.35) !important; transition: all 0.3s ease !important; } .plasto-btn-primary:hover { transform: translateY(-2px); } .plasto-badge-live { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #0369a1; background: #e0f2fe; padding: 3px 10px; border-radius: 999px; }