/* ========================================================================== JustJi — Premium UI (Phase 2) Vanilla CSS3. No frameworks. Custom properties drive the whole system. ========================================================================== */ :root { /* ---- Color: restrained, professional ---- */ --color-bg: #ffffff; --color-bg-subtle: #f7f7f8; --color-bg-muted: #f0f1f3; --color-surface: #ffffff; --color-border: #e6e7ea; --color-border-strong: #d7d9de; --color-text: #16181d; --color-text-muted: #5b606b; --color-text-faint: #8a8f99; --color-primary: #0f6b52; --color-primary-dark: #0b543f; --color-primary-light: #e7f3ee; --color-primary-contrast: #ffffff; --color-accent: #c7801a; --color-accent-light: #fbf1e2; /* Exact colors sampled from the official JustJi logo — used specifically for brand/wordmark contexts (navbar, footer, auth pages), kept separate from --color-primary (the site's existing green button/accent scheme) since re-theming every button/badge site-wide to orange is a much bigger, separate design decision. */ --color-brand-navy: #001c48; --color-brand-orange: #fe8311; --color-danger: #b3261e; --color-danger-light: #fbeceb; --color-success: #0f6b52; --color-success-light: #e7f3ee; --color-focus-ring: rgba(15, 107, 82, 0.35); /* ---- Elevation ---- */ --shadow-xs: 0 1px 2px rgba(16, 20, 24, 0.04); --shadow-sm: 0 1px 3px rgba(16, 20, 24, 0.06), 0 1px 2px rgba(16, 20, 24, 0.04); --shadow-md: 0 6px 16px rgba(16, 20, 24, 0.08), 0 2px 4px rgba(16, 20, 24, 0.04); --shadow-lg: 0 16px 40px rgba(16, 20, 24, 0.12), 0 4px 10px rgba(16, 20, 24, 0.05); /* ---- Shape ---- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 999px; /* ---- Type ---- */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; /* ---- Layout ---- */ --max-width: 1160px; --max-width-narrow: 760px; --header-height: 78px; /* Separate from the public marketing site's header height above — the dashboard topbar (admin/freelancer/client) is a compact application header, not tied to the marketing logo's size. Used by .dashboard-sidebar's sticky/fixed positioning below, which needs to know the ACTUAL dashboard topbar height, not the marketing site's. */ --dashboard-header-height: 60px; /* ---- Motion ---- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: 140ms var(--ease-out); --transition-base: 220ms var(--ease-out); } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Defensive safety net, deliberately on and NOT — position: sticky (used by .site-header below) requires every ancestor up to the viewport to have overflow: visible, and setting overflow-x: hidden on (an ancestor of .site-header) would silently break the header's sticky behavior. The document root is the one place this constraint doesn't apply the same way, so this is the standard, safe location for it. Exists to catch admin-authored rich text (blog posts, static pages) containing an element this stylesheet doesn't specifically constrain — a wide table, a long unbroken code line — that would otherwise silently push the ENTIRE PAGE wider than the viewport, making the whole site horizontally scrollable on mobile rather than just that one element. */ overflow-x: hidden; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); color: var(--color-text); background: var(--color-bg); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--color-text); } h1 { font-size: 2.75rem; } h2 { font-size: 2rem; } h3 { font-size: 1.375rem; } h4 { font-size: 1.1rem; } p { margin: 0 0 1em; color: var(--color-text-muted); } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-primary-dark); } ul, ol { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; } /* A