/* ============================================================================ Soft Studio — Wow-pass overrides Lim inn ETTER Soft Studio i base.html Accent: deep forest #1B4332 (matcher Jonas B.-merke) ========================================================================== */ :root { /* Soft Studio beholdes; disse løfter wow-laget */ --accent: #1B4332; /* farge-CTA (var Soft Studio kull) */ --accent-hover: #16382A; --ink-cta: #1C1C1C; /* når du vil ha kull-pill */ --accent-soft: #1B4332; /* samme — lenker/fokus */ --accent-ring: rgba(27, 67, 50, 0.28); --accent-tint: rgba(27, 67, 50, 0.06); --header-tint: #FBF9F5; --login-shadow: 0 8px 28px rgba(28, 28, 28, 0.06), 0 1px 2px rgba(28, 28, 28, 0.04); --brand-logo-h: 32px; /* header: 28–36 */ --brand-logo-login-h: 48px; } /* -------------------------------------------------------------------------- Dual brand — bytt klasse på eller .brand-jonasb | .brand-barneshow -------------------------------------------------------------------------- */ .brand-logo--jonas, .brand-logo--barneshow { display: none; height: var(--brand-logo-h); width: auto; object-fit: contain; } .brand-jonasb .brand-logo--jonas { display: block; } .brand-barneshow .brand-logo--barneshow { display: block; } /* Login bruker større invoice-lockup */ .login-card .brand-logo--jonas, .login-card .brand-logo--barneshow { height: var(--brand-logo-login-h); } /* -------------------------------------------------------------------------- Header — lys card + varm tint + forest hairline -------------------------------------------------------------------------- */ header, .app-header { background: var(--header-tint); color: var(--ink); /* Soft Studio border + 2px forest hairline (WOW-PASS §3) — outer so it reads clearly */ border-bottom: 1px solid var(--border); box-shadow: 0 2px 0 0 rgba(27, 67, 50, 0.22); padding: 0.85rem 1.25rem; display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; } header .brand, .app-header .brand { display: inline-flex; align-items: center; gap: 0.7rem; /* 10–12px */ margin-right: auto; text-decoration: none; color: var(--ink); font-weight: 650; letter-spacing: -0.02em; font-size: 1rem; } .brand-word { font-weight: 550; color: var(--muted); font-size: 0.95rem; letter-spacing: -0.01em; } header a, .app-header a:not(.brand) { color: var(--muted); text-decoration: none; font-size: 0.92rem; } header a:hover, .app-header a:not(.brand):hover { color: var(--ink); } /* -------------------------------------------------------------------------- Knapper — default = forest; .btn.ink = kull -------------------------------------------------------------------------- */ .btn { background: var(--accent); color: #fff; } .btn:hover { background: var(--accent-hover); filter: none; } .btn:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; } .btn.btn-accent { background: var(--accent); color: #fff; border-radius: var(--radius-pill); } .btn.btn-accent:hover { background: var(--accent-hover); } .btn.ink { background: var(--ink-cta); color: #fff; } .btn.ink:hover { filter: brightness(1.08); background: var(--ink-cta); } .btn.secondary { background: transparent; color: var(--ink); border: 1px solid var(--border-strong); } .btn.secondary:hover { background: #F0EDE7; filter: none; } /* -------------------------------------------------------------------------- Focus rings — Soft Studio kull → forest -------------------------------------------------------------------------- */ input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-ring); outline-offset: 1px; border-color: var(--accent); } a:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; border-radius: 4px; } /* -------------------------------------------------------------------------- Login card -------------------------------------------------------------------------- */ .login-wrap { min-height: calc(100vh - 2rem); display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; } .login-card { width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem 1.75rem 1.75rem; box-shadow: var(--login-shadow); text-align: center; } .login-card .brand { display: inline-flex; flex-direction: column; align-items: center; gap: 0.85rem; margin: 0 0 1.25rem; text-decoration: none; } .login-card h1 { font-size: 1.35rem; margin: 0 0 0.25rem; } .login-card .lead { margin-bottom: 1.5rem; } .login-card label { text-align: left; } .login-card input { max-width: none; text-align: left; } .login-card .btn { width: 100%; margin-top: 1.25rem; } /* -------------------------------------------------------------------------- Liste — toolbar + rad-hierarki -------------------------------------------------------------------------- */ .toolbar { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; margin: 0 0 1rem; } .toolbar .spacer { flex: 1; } .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; margin-bottom: 1.25rem; } .page-head .titles { flex: 1; min-width: 180px; } .page-head h1 { margin-bottom: 0.2rem; } .page-head .lead { margin-bottom: 0; } /* Fakturarad: kunde sterk, meta muted */ .inv-customer { display: block; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; } .inv-meta { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 0.15rem; } table.invoice-list td { padding: 0.9rem 0.65rem; } table.invoice-list tr:hover td { background: var(--accent-tint); } /* Status chips — Soft Studio (uendret semantikk, litt klarere) */ .badge { border: 1px solid transparent; } .badge.draft { background: var(--draft-bg); color: var(--muted); border-color: #E0DBD2; } .badge.paid, .badge.confirmed { background: var(--ok-bg); color: var(--ok); border-color: #C5D9CB; } .badge.sent, .badge.invoiced { background: var(--warn-bg); color: var(--warn); border-color: #E5D9B0; } .badge.overdue { background: var(--err-bg); color: var(--err); border-color: #E0C4C4; } /* Lenker i innhold */ main a:not(.btn):not(.btn-link) { color: var(--accent); } main a:not(.btn):not(.btn-link):hover { color: var(--accent-hover); } /* Seg / chip checked — lett forest hint (valgfritt, beholder Soft Studio look) */ .seg-item input:checked + .seg-face { border-color: rgba(27, 67, 50, 0.22); } .chip input:checked + span { border-color: var(--accent); color: var(--ink); background: #F0EDE7; } .seg-item input:focus-visible + .seg-face, .chip input:focus-visible + span { outline: 2px solid var(--accent-ring); }