/* public/css/app.css */ /* ------------------------- Oller del Mas – inspired SaaS palette (aprox.) ------------------------- */ :root{ --bg: #F6F3EC; /* pedra/crema */ --surface: #FFFFFF; --text: #111827; /* charcoal */ --muted: #6B7280; /* gray */ --border: rgba(17,24,39,.10); --primary: #1F3D2B; /* verd bosc */ --primary-2: #2F5B3F; /* verd bosc clar */ --accent: #C46A2B; /* coure/terracota */ --accent-2: #E3A46E; /* accent suau */ --success: #16803C; --danger: #DC2626; --shadow: 0 10px 30px rgba(17,24,39,.08); --shadow-sm: 0 6px 18px rgba(17,24,39,.06); --radius: 16px; --radius-sm: 12px; --ring: 0 0 0 4px rgba(196,106,43,.18); } /* Dark mode (si algun dia vols activar amb class="dark" a ) */ html.dark{ --bg: #0B0F0D; --surface: #0F1512; --text: #E5E7EB; --muted: #9CA3AF; --border: rgba(229,231,235,.10); --shadow: 0 10px 30px rgba(0,0,0,.45); --shadow-sm: 0 6px 18px rgba(0,0,0,.35); --ring: 0 0 0 4px rgba(227,164,110,.18); } /* ------------------------- Base / Reset light ------------------------- */ * { box-sizing: border-box; } html, body { height: 100%; } body{ margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a{ color: inherit; text-decoration: none; } a:hover{ text-decoration: underline; text-underline-offset: 3px; } img{ max-width: 100%; height: auto; display:block; } .container{ width: min(1120px, calc(100% - 48px)); margin-inline: auto; } /* ------------------------- Components: cards, buttons, inputs ------------------------- */ .card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .card-pad{ padding: 24px; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding: 10px 14px; border-radius: 14px; border: 1px solid transparent; font-weight: 600; cursor: pointer; transition: transform .08s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease; user-select:none; } .btn:active{ transform: translateY(1px); } .btn-primary{ background: var(--primary); color: #fff; box-shadow: 0 10px 20px rgba(31,61,43,.18); } .btn-primary:hover{ background: var(--primary-2); } .btn-accent{ background: var(--accent); color:#fff; box-shadow: 0 10px 20px rgba(196,106,43,.18); } .btn-accent:hover{ filter: brightness(0.95); } .btn-ghost{ background: transparent; border-color: var(--border); } .btn-ghost:hover{ background: rgba(17,24,39,.04); } .badge{ display:inline-flex; align-items:center; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); font-size: 12px; font-weight: 600; } .input{ width: 100%; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); outline: none; transition: box-shadow .15s ease, border-color .15s ease; } .input:focus{ border-color: rgba(196,106,43,.45); box-shadow: var(--ring); } .label{ display:block; font-size: 13px; color: var(--muted); margin-bottom: 6px; font-weight: 600; } .helper{ font-size: 12px; color: var(--muted); margin-top: 6px; } /* ------------------------- Layout helpers (mini “tailwind-like”) (només el que sol sortir a Breeze) ------------------------- */ .min-h-screen{ min-height: 100vh; } .flex{ display:flex; } .items-center{ align-items:center; } .justify-center{ justify-content:center; } .justify-between{ justify-content: space-between; } .gap-3{ gap: 12px; } .gap-4{ gap: 16px; } .p-6{ padding: 24px; } .px-6{ padding-inline: 24px; } .py-6{ padding-block: 24px; } .mt-6{ margin-top: 24px; } .text-center{ text-align:center; } .text-muted{ color: var(--muted); } .text-sm{ font-size: 14px; } .text-lg{ font-size: 18px; } .text-xl{ font-size: 22px; } .h1{ font-size: 34px; line-height: 1.15; letter-spacing: -0.02em; } .h2{ font-size: 24px; line-height: 1.25; letter-spacing: -0.01em; } /* Auth layout helper */ .auth-shell{ width: min(420px, calc(100% - 48px)); margin-inline: auto; } .auth-logo{ width: 80px; height: 80px; margin: 0 auto 18px auto; display:grid; place-items:center; border-radius: 22px; background: linear-gradient(180deg, rgba(31,61,43,.10), rgba(196,106,43,.10)); border: 1px solid var(--border); } /* Topbar / navigation (si vols un look SaaS ràpid) */ .topbar{ position: sticky; top: 0; z-index: 20; backdrop-filter: blur(10px); background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom: 1px solid var(--border); } .topbar-inner{ display:flex; align-items:center; justify-content: space-between; padding: 14px 0; } .navlinks{ display:flex; gap: 10px; align-items:center; } .navlinks a{ padding: 8px 10px; border-radius: 12px; border: 1px solid transparent; color: var(--muted); font-weight: 600; font-size: 14px; } .navlinks a:hover{ background: rgba(17,24,39,.04); border-color: var(--border); text-decoration: none; color: var(--text); } /* Small responsive */ @media (max-width: 640px){ .container{ width: min(1120px, calc(100% - 28px)); } .h1{ font-size: 28px; } }