/* ========================================================================= * Sloppy Suite — Design System * "Sloppy Glass + Paper" but with neutral charcoal + gold accent, * per-module accent color injected via [data-module] attribute on . * ========================================================================= */ :root { --suite-bg: #f5f1ea; --suite-surface: #ffffff; --suite-ink: #2c2c2c; --suite-muted: #8a7a68; --suite-border: #e8e0d0; --suite-gold: #b8984a; --suite-gold-hover: #a68637; --suite-danger: #a83220; --suite-success: #4a7a4a; --suite-warning: #b8824a; --suite-info: #4a6a8a; --module-accent: var(--suite-gold); } [data-module="sloppyfix"] { --module-accent: #4a5a3a; } [data-module="sloppyscan"] { --module-accent: #2a5a8a; } [data-module="sloppyplan"] { --module-accent: #8a4a2a; } [data-module="sloppyid"] { --module-accent: #b8984a; } /* Dark mode */ [data-theme="dark"] { --suite-bg: #1a1817; --suite-surface: #262320; --suite-ink: #f0e8d8; --suite-muted: #a89888; --suite-border: #3a342e; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--suite-bg); color: var(--suite-ink); font-size: 16px; line-height: 1.55; min-height: 100vh; } a { color: var(--suite-ink); } a:hover { color: var(--module-accent); } /* --------- Topbar --------- */ .topbar { background: var(--suite-surface); border-bottom: 3px solid var(--module-accent); padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .topbar .brand { font-weight: 700; font-size: 18px; letter-spacing: 1px; color: var(--suite-ink); text-decoration: none; } .topbar .brand em { font-style: normal; color: var(--module-accent); } .topbar .nav { display: flex; gap: 18px; align-items: center; font-size: 14px; } .topbar .nav a { text-decoration: none; } /* --------- Layout --------- */ .container { max-width: 960px; margin: 0 auto; padding: 28px; } .container-narrow { max-width: 480px; margin: 0 auto; padding: 28px; } /* --------- Cards (Glass) --------- */ .card { background: var(--suite-surface); border: 1px solid var(--suite-border); border-radius: 14px; padding: 28px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); margin-bottom: 20px; } .card h1, .card h2 { margin-top: 0; } .card-title { font-size: 20px; font-weight: 600; margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--suite-border); } /* --------- Form --------- */ .form-group { margin-bottom: 18px; } .form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--suite-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; } .form-group input[type=text], .form-group input[type=email], .form-group input[type=password], .form-group input[type=number], .form-group select, .form-group textarea { width: 100%; padding: 11px 14px; font-size: 15px; font-family: inherit; background: var(--suite-bg); color: var(--suite-ink); border: 1px solid var(--suite-border); border-radius: 8px; transition: border-color 0.15s, box-shadow 0.15s; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--module-accent); box-shadow: 0 0 0 3px rgba(184,152,74,0.15); } .form-check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: 14px; } /* --------- Buttons (plastic 3D) --------- */ .btn { display: inline-block; padding: 11px 24px; font-family: inherit; font-size: 14px; font-weight: 600; text-decoration: none; border: none; border-radius: 10px; cursor: pointer; transition: transform 0.1s, box-shadow 0.15s, background 0.15s; letter-spacing: 0.3px; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--suite-ink); color: var(--suite-bg); border-bottom: 3px solid var(--module-accent); box-shadow: 0 2px 6px rgba(0,0,0,0.15); } .btn-primary:hover { background: #1a1a1a; box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .btn-secondary { background: var(--suite-bg); color: var(--suite-ink); border: 1px solid var(--suite-border); } .btn-secondary:hover { background: var(--suite-border); } .btn-danger { background: var(--suite-danger); color: #ffffff; border-bottom: 3px solid #7a2217; } .btn-danger:hover { background: #961e12; } .btn-block { display: block; width: 100%; text-align: center; } .btn-sm { padding: 6px 14px; font-size: 13px; } /* --------- Alerts --------- */ .alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; border-left: 4px solid; } .alert-success { background: #f0f7ee; border-color: var(--suite-success); color: #2c4a2c; } .alert-danger { background: #fbefed; border-color: var(--suite-danger); color: #5a1a10; } .alert-warning { background: #faf2e6; border-color: var(--suite-warning); color: #5a3a10; } .alert-info { background: #eef2fb; border-color: var(--suite-info); color: #1a3555; } /* --------- Tables --------- */ table.data { width: 100%; border-collapse: collapse; font-size: 14px; } table.data th, table.data td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--suite-border); } table.data th { background: var(--suite-bg); font-weight: 600; color: var(--suite-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; } /* --------- Badges --------- */ .badge { display: inline-block; padding: 3px 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 12px; background: var(--suite-bg); color: var(--suite-muted); border: 1px solid var(--suite-border); } .badge-success { background: #f0f7ee; color: #2c4a2c; border-color: #c8dfbe; } .badge-danger { background: #fbefed; color: #7a2217; border-color: #e8bab2; } .badge-warning { background: #faf2e6; color: #6a4a20; border-color: #e0cfa8; } .badge-accent { background: var(--module-accent); color: #ffffff; border-color: transparent; } /* --------- Utility --------- */ .text-muted { color: var(--suite-muted); } .text-center { text-align: center; } .text-right { text-align: right; } .mt-0 { margin-top: 0; } .mt-2 { margin-top: 16px; } .mt-4 { margin-top: 32px; } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 16px; } .mb-4 { margin-bottom: 32px; } .d-flex { display: flex; } .gap-2 { gap: 12px; } .gap-3 { gap: 18px; } .justify-between { justify-content: space-between; } .align-center { align-items: center; } .w-100 { width: 100%; } hr { border: none; border-top: 1px solid var(--suite-border); margin: 20px 0; } .footer { text-align: center; padding: 32px 20px 20px; color: var(--suite-muted); font-size: 12px; } .footer a { color: var(--suite-muted); text-decoration: none; margin: 0 10px; } .footer a:hover { color: var(--module-accent); } /* Module cards on profile */ .module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 20px; } .module-card { padding: 20px; border-radius: 12px; border: 1px solid var(--suite-border); background: var(--suite-surface); position: relative; transition: transform 0.15s, box-shadow 0.15s; text-decoration: none; color: var(--suite-ink); display: block; } .module-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.08); color: var(--suite-ink); } .module-card .accent-bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 12px 12px 0 0; } .module-card h3 { margin: 8px 0 6px; font-size: 16px; } .module-card p { margin: 0; font-size: 13px; color: var(--suite-muted); } .module-card .badge { margin-top: 12px; } @media (max-width: 640px) { .topbar { padding: 12px 16px; flex-wrap: wrap; } .container, .container-narrow { padding: 16px; } .card { padding: 20px; } }