/* ========================================================================== LoadLedger — "Graphite" design system Two modes built on one token set. Light is the default; `data-theme="dark"` on swaps in the deep-graphite values. Every class name the app's JS depends on is preserved; only the visuals change. ========================================================================== */ :root, html[data-theme="light"] { color-scheme: light; /* Surfaces */ --bg: #f0f0f0; --bg-2: #e7e8ec; --card: #f7f7f8; --card-hi: #ffffff; --elevated: #ffffff; --sidebar: #ffffff; --muted: #e9eaee; --input: #ffffff; /* Type */ --text: #2b2f36; --text-2: #4a5058; --text-muted: #6b7280; --text-faint: #9aa1ab; /* Signal colors */ --primary: #2563eb; --primary-light: #1d4ed8; --on-primary: #ffffff; --accent: #e3e5ea; --accent-hover: #d5d8e0; --on-accent: #2b2f36; --info: #0369a1; --success: #047857; --warn: #b45309; --danger: #dc2626; --danger-strong: #b91c1c; --violet: #7c3aed; --cyan: #0e7490; --amber: #c2410c; /* Lines */ --border: #d5d8de; --border-strong: #c2c7d0; --border-soft: #e4e6ea; --ring: #2563eb; /* Chrome */ --topbar-top: #ffffff; --topbar-bot: #f1f2f5; --shell: #dadde3; --primary-border: #1d4ed8; --primary-hover: linear-gradient(135deg, #3b82f6, #2563eb); /* Depth */ --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06), 0 1px 3px rgba(17, 24, 39, 0.05); --shadow: 0 2px 8px rgba(17, 24, 39, 0.08); --shadow-lg: 0 10px 28px rgba(17, 24, 39, 0.1); --shadow-pop: 0 20px 50px rgba(17, 24, 39, 0.18); /* Shape — 0.35rem */ --radius: 6px; --radius-sm: 5px; --spacing: 16px; --transition: 0.15s cubic-bezier(0.2, 0, 0.2, 1); --nav-height: 64px; --topbar-height: 56px; --font-ui: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-num: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } html[data-theme="dark"] { color-scheme: dark; /* Surfaces — cool graphite, never #000 */ --bg: #1a1a1a; --bg-2: #242424; --card: #202020; --card-hi: #262626; --elevated: #2a2a2a; --sidebar: #1f1f1f; --muted: #2a2a2a; --input: #242424; /* Type */ --text: #d9d9d9; --text-2: #a8a8a8; --text-muted: #808080; --text-faint: #5c5c5c; /* Signal colors — lifted so they read on dark */ --primary: #4d8dff; --primary-light: #7aaeff; --on-primary: #0b1220; --accent: #404040; --accent-hover: #4d4d4d; --on-accent: #d9d9d9; --info: #38bdf8; --success: #34d399; --warn: #fbbf24; --danger: #f06666; --danger-strong: #dc5252; --violet: #a78bfa; --cyan: #22d3ee; --amber: #fb923c; /* Lines */ --border: #353535; --border-strong: #3f3f3f; --border-soft: #2c2c2c; --ring: #4d8dff; /* Chrome */ --topbar-top: #23262b; --topbar-bot: var(--sidebar); --shell: #151515; --primary-border: #8fbcff; --primary-hover: linear-gradient(135deg, #96c2ff, #7aaeff); /* Depth — hard-edged, 0 blur, 2px drop */ --shadow-sm: 0 2px 0 0 rgba(0, 0, 0, 0.25); --shadow: 0 2px 0 0 rgba(0, 0, 0, 0.35); --shadow-lg: 0 2px 0 0 rgba(0, 0, 0, 0.45); --shadow-pop: 0 18px 48px rgba(0, 0, 0, 0.6); } /* ── Base ───────────────────────────────────────────────────────────────── */ html { font-size: 16px; -webkit-text-size-adjust: 100%; height: 100%; } body { font-family: var(--font-ui); font-feature-settings: "cv02", "cv03", "cv04", "ss01"; background: var(--bg); color: var(--text); line-height: 1.55; height: 100%; overflow: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Soft color wash + grain so flat surfaces never feel dead. */ body::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient( 110% 70% at 12% 0%, rgba(37, 99, 235, 0.07) 0%, transparent 55% ), radial-gradient( 100% 70% at 92% 8%, rgba(124, 58, 237, 0.06) 0%, transparent 55% ), radial-gradient( 120% 60% at 50% 100%, rgba(14, 116, 144, 0.05) 0%, transparent 60% ), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); } /* Dark mode gets a deeper, more saturated wash. */ html[data-theme="dark"] body::before { background: radial-gradient( 110% 70% at 12% 0%, rgba(77, 141, 255, 0.14) 0%, transparent 55% ), radial-gradient( 100% 70% at 92% 8%, rgba(167, 139, 250, 0.12) 0%, transparent 55% ), radial-gradient( 120% 60% at 50% 100%, rgba(34, 211, 238, 0.08) 0%, transparent 60% ), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); } a { color: var(--primary-light); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--primary-light); } h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.25; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; } ::selection { background: var(--primary); color: var(--on-primary); } /* The one place saturated color is allowed to bleed: the shell edges. */ .app::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; background: linear-gradient( 90deg, var(--primary) 0%, var(--info) 25%, var(--violet) 50%, var(--cyan) 75%, var(--success) 100% ); } /* Scrollbars, graphite */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border: 3px solid var(--bg); border-radius: 999px; } *::-webkit-scrollbar-thumb:hover { background: var(--text-faint); } /* ── Shell ──────────────────────────────────────────────────────────────── */ .app { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; max-width: 480px; margin: 0 auto; background: var(--bg); } /* On desktop the column reads as a panel docked in the graphite shell. */ @media (min-width: 900px) { .app, .bottom-nav { border-left: 1px solid var(--border-soft); border-right: 1px solid var(--border-soft); } body { background: var(--shell); } } .topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; height: var(--topbar-height); padding: env(safe-area-inset-top) var(--spacing) 0; color: var(--text); background: linear-gradient(180deg, var(--topbar-top) 0%, var(--topbar-bot) 100%); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); } .brand { display: flex; align-items: center; gap: 10px; } .brand-logo { border-radius: var(--radius-sm); background: var(--elevated); border: 1px solid var(--border-strong); padding: 3px; } .brand-name { font-size: 1.02rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text); } .topbar .icon-btn { color: var(--text-2); background: var(--elevated); border-color: var(--border); } .topbar .icon-btn:hover { color: var(--text); background: var(--accent-hover); border-color: var(--border-strong); } .view-container { flex: 1; overflow-y: auto; padding: var(--spacing); padding-bottom: calc( var(--nav-height) + var(--spacing) * 2 + env(safe-area-inset-bottom) ); -webkit-overflow-scrolling: touch; scroll-behavior: smooth; } .page-title { position: relative; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); margin-bottom: var(--spacing); padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); } .page-title::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 56px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--primary), var(--cyan)); } /* ── Bottom navigation ──────────────────────────────────────────────────── */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; display: flex; max-width: 480px; margin: 0 auto; background: color-mix(in oklab, var(--sidebar) 92%, transparent); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); } .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 9px 0 7px; color: var(--text-muted); font-size: 0.63rem; font-weight: 500; letter-spacing: 0.02em; -webkit-tap-highlight-color: transparent; transition: color var(--transition); } .nav-item:hover { color: var(--text-2); } .nav-item svg { width: 20px; height: 20px; flex-shrink: 0; stroke-width: 1.75; } .nav-item span { line-height: 1.2; } .nav-item.active { color: var(--primary-light); } .nav-item.active svg { transform: translateY(-1px); filter: drop-shadow(0 0 6px rgba(77, 141, 255, 0.55)); } .nav-new svg { width: 28px; height: 28px; padding: 5px; border-radius: 50%; margin-top: -16px; color: var(--on-primary); background: linear-gradient(160deg, var(--primary-light), var(--primary)); border: 1px solid var(--primary-border); box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.35), 0 0 18px rgba(37, 99, 235, 0.4); transition: transform var(--transition); } .nav-new:active svg { transform: scale(0.94); } .nav-new span { margin-top: -1px; color: var(--text-muted); } .nav-new.active span { color: var(--text); } /* ── Cards ──────────────────────────────────────────────────────────────── */ .card { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--spacing); margin-bottom: var(--spacing); } .card-title { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; } .card-title svg { width: 15px; height: 15px; color: var(--info); flex-shrink: 0; } /* ── Forms ──────────────────────────────────────────────────────────────── */ .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); } .required:after { content: " *"; color: var(--danger); } input, select, textarea { width: 100%; font-family: inherit; font-size: 0.95rem; color: var(--text); background: var(--input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 12px; min-height: 44px; transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); } input:hover, select:hover, textarea:hover { border-color: var(--border-strong); background: var(--elevated); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ring); background: var(--elevated); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 16%, transparent); } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; } textarea { resize: vertical; min-height: 70px; line-height: 1.5; } input::placeholder, textarea::placeholder { color: var(--text-faint); } /* Native date pickers follow the document's color-scheme automatically. */ input[type="date"] { min-height: 44px; } input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; } input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; } select { appearance: none; background-image: linear-gradient( 45deg, transparent 50%, var(--text-muted) 50% ), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; cursor: pointer; } .row { display: flex; gap: 10px; } .row > * { flex: 1; min-width: 0; } /* ── Type selector (freight / fuel / general) ───────────────────────────── */ .type-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: var(--spacing); } .type-option { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; color: var(--text-muted); background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: border-color var(--transition), background var(--transition), color var(--transition), transform var(--transition); } .type-option:hover { border-color: var(--border-strong); color: var(--text-2); background: var(--elevated); } .type-option svg { width: 19px; height: 19px; stroke-width: 1.75; } .type-option.selected { background: color-mix(in oklab, var(--primary) 14%, var(--elevated)); border-color: var(--primary); color: var(--text); box-shadow: 0 0 0 1px var(--primary) inset; } .type-option.selected svg { color: var(--primary-light); } /* Each invoice type keeps its own hue so the selector reads at a glance. */ .type-option:nth-child(1).selected { background: color-mix(in oklab, var(--primary) 14%, var(--elevated)); border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; } .type-option:nth-child(1).selected svg { color: var(--primary-light); } .type-option:nth-child(2).selected { background: color-mix(in oklab, var(--amber) 14%, var(--elevated)); border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber) inset; } .type-option:nth-child(2).selected svg { color: var(--amber); } .type-option:nth-child(3).selected { background: color-mix(in oklab, var(--violet) 14%, var(--elevated)); border-color: var(--violet); box-shadow: 0 0 0 1px var(--violet) inset; } .type-option:nth-child(3).selected svg { color: var(--violet); } /* ── Line items ─────────────────────────────────────────────────────────── */ .line-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .line-item { display: grid; grid-template-columns: 1fr 62px 84px auto; align-items: end; gap: 6px; padding: 10px; background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); transition: border-color var(--transition); } .line-item:focus-within { border-color: color-mix(in oklab, var(--primary) 55%, transparent); } .line-item > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .line-item label { font-size: 0.58rem; letter-spacing: 0.08em; color: var(--text-faint); } .line-item input { min-height: 40px; padding: 8px 10px; font-family: var(--font-num); font-size: 0.82rem; background: var(--card); } .line-item input:first-of-type { font-family: var(--font-ui); font-size: 0.9rem; } .line-item .remove-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--text-muted); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: color var(--transition), border-color var(--transition), background var(--transition); } .line-item .remove-btn:hover { color: var(--danger); border-color: var(--danger); background: color-mix(in oklab, var(--danger) 12%, var(--card)); } .line-item .remove-btn svg { width: 15px; height: 15px; } .add-line-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 40px; font-size: 0.78rem; font-weight: 600; color: var(--primary); background: transparent; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition); } .add-line-btn:hover { background: var(--elevated); border-color: var(--ring); color: var(--primary-light); } .add-line-btn svg { width: 14px; height: 14px; } /* ── Totals ─────────────────────────────────────────────────────────────── */ .totals { margin-top: 14px; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--border-soft); border-left: 2px solid var(--cyan); border-radius: var(--radius-sm); } .total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 0.85rem; color: var(--text-muted); } .total-row span:last-child { font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--text-2); } .total-row.balance-due { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 1rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text); } .total-row.balance-due span:last-child { font-size: 1.1rem; color: var(--cyan); } /* ── Buttons ────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 10px 16px; font-family: inherit; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.01em; color: var(--text); background: var(--elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition); } .btn:hover { background: var(--accent); border-color: var(--border-strong); } .btn:active { transform: translateY(1px); } .btn svg { width: 15px; height: 15px; flex-shrink: 0; stroke-width: 2; } /* Primary: the one saturated, high-contrast action on screen. */ .btn-primary { color: var(--on-primary); background: linear-gradient(135deg, var(--primary-light), var(--primary)); border-color: var(--primary-border); font-weight: 600; box-shadow: 0 2px 12px rgba(37, 99, 235, 0.25); } .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-border); color: var(--on-primary); } .btn-primary:active { background: var(--primary); } .btn-secondary { color: var(--text-2); background: var(--bg-2); border-color: var(--border); } .btn-secondary:hover { background: var(--elevated); border-color: var(--border-strong); color: var(--text); } .btn-accent { color: var(--violet); background: color-mix(in oklab, var(--violet) 16%, var(--elevated)); border-color: color-mix(in oklab, var(--violet) 42%, transparent); } .btn-accent:hover { color: #ffffff; background: var(--violet); border-color: var(--violet); } .btn-danger { color: var(--danger); background: transparent; border-color: color-mix(in oklab, var(--danger) 40%, transparent); } .btn-danger:hover { color: #ffffff; background: var(--danger-strong); border-color: var(--danger-strong); } .btn-group { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .btn-group .btn { flex: 1; min-width: 130px; } .btn-sm { min-height: 34px; padding: 6px 10px; font-size: 0.72rem; } .btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; } /* ── Customers & vehicles ───────────────────────────────────────────────── */ .customer-list { display: flex; flex-direction: column; gap: 8px; } .customer-item, .vehicle-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color var(--transition), background var(--transition); } .customer-item:hover, .vehicle-card:hover { border-color: var(--border-strong); background: var(--card-hi); } .customer-info { min-width: 0; } .customer-name, .vehicle-title { font-size: 0.9rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .customer-details, .vehicle-meta, .vehicle-label { font-family: var(--font-num); font-size: 0.72rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vehicle-card { flex-direction: column; align-items: stretch; gap: 8px; } .vehicle-actions, .customer-actions, .doc-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .edit-btn, .delete-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-2); color: var(--text-muted); cursor: pointer; transition: color var(--transition), background var(--transition), border-color var(--transition); } .edit-btn:hover { color: var(--text); background: var(--elevated); border-color: var(--border-strong); } .delete-btn:hover { color: #ffffff; background: var(--danger-strong); border-color: var(--danger-strong); } .edit-btn svg, .delete-btn svg { width: 14px; height: 14px; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: var(--text-2); background: var(--elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: color var(--transition), background var(--transition), border-color var(--transition); } .icon-btn:hover { color: var(--text); background: var(--accent-hover); border-color: var(--border-strong); } .icon-btn svg { width: 15px; height: 15px; } /* Theme toggle — shows the icon of the mode you'd switch to. */ .theme-toggle { overflow: hidden; } .theme-toggle svg { width: 16px; height: 16px; transition: transform 0.25s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.18s linear; } .theme-toggle .icon-sun { display: none; color: var(--warn); } .theme-toggle .icon-moon { display: block; color: var(--primary); } html[data-theme="dark"] .theme-toggle .icon-sun { display: block; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; } .theme-toggle:active svg { transform: rotate(-30deg) scale(0.85); } /* ── Empty state ────────────────────────────────────────────────────────── */ .empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 36px 20px; color: var(--text-muted); background: var(--card); border: 1px dashed var(--border-strong); border-radius: var(--radius); } .empty-state svg { width: 32px; height: 32px; stroke-width: 1.5; color: var(--info); opacity: 0.7; margin-bottom: 6px; } .empty-state h3 { font-size: 0.92rem; font-weight: 600; letter-spacing: 0.01em; color: var(--text-2); } .empty-state p { font-size: 0.8rem; color: var(--text-muted); } /* ── Invoice list ───────────────────────────────────────────────────────── */ .invoice-list { display: flex; flex-direction: column; gap: 8px; } .invoice-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); transition: transform var(--transition), background var(--transition), border-color var(--transition); } .invoice-card:hover { transform: translateY(-1px); background: var(--card-hi); border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); color: inherit; box-shadow: 0 2px 14px rgba(77, 141, 255, 0.14); } .invoice-card .left { min-width: 0; } .invoice-num { font-family: var(--font-num); font-size: 0.8rem; font-weight: 500; color: var(--text-2); letter-spacing: 0; } .invoice-client { font-size: 0.92rem; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .invoice-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 0.7rem; color: var(--text-muted); } .invoice-total { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 0.95rem; font-weight: 600; color: var(--text); white-space: nowrap; } /* ── Badges ─────────────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; padding: 2px 8px; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; border-radius: 3px; border: 1px solid transparent; white-space: nowrap; } .badge.draft { color: var(--text-muted); background: var(--muted); border-color: var(--border); } .badge.sent { color: var(--info); background: color-mix(in oklab, var(--info) 14%, transparent); border-color: color-mix(in oklab, var(--info) 38%, transparent); } .badge.paid { color: var(--success); background: color-mix(in oklab, var(--success) 14%, transparent); border-color: color-mix(in oklab, var(--success) 38%, transparent); } .badge.overdue { color: var(--danger); background: color-mix(in oklab, var(--danger) 14%, transparent); border-color: color-mix(in oklab, var(--danger) 42%, transparent); } .primary-badge { display: inline-block; padding: 2px 7px; font-size: 0.58rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--on-primary); background: linear-gradient(135deg, var(--primary-light), var(--primary)); border-radius: 3px; } /* ── Search + filters ───────────────────────────────────────────────────── */ .search-box { position: relative; margin-bottom: 12px; } .search-box input { min-height: 44px; padding-left: 40px; background: var(--card); } .search-box input:focus { background: var(--elevated); } .search-box svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-faint); pointer-events: none; } .filter-bar { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .filter-bar::-webkit-scrollbar { display: none; } .filter-pill { flex-shrink: 0; padding: 7px 13px; font-size: 0.75rem; font-weight: 500; color: var(--text-muted); background: var(--card); border: 1px solid var(--border); border-radius: 3px; cursor: pointer; white-space: nowrap; transition: color var(--transition), background var(--transition), border-color var(--transition); } .filter-pill:hover { border-color: var(--border-strong); color: var(--text-2); } .filter-pill.active { color: var(--on-primary); background: linear-gradient(135deg, var(--primary-light), var(--primary)); border-color: var(--primary-border); font-weight: 600; box-shadow: 0 2px 10px rgba(37, 99, 235, 0.25); } /* ── Dashboard stats ────────────────────────────────────────────────────── */ .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: var(--spacing); } .stat-card { position: relative; overflow: hidden; padding: 13px 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); transition: border-color var(--transition); } .stat-card:hover { border-color: var(--border-strong); } .stat-card .stat-value { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 1.18rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text); } .stat-card .stat-label { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; } /* Colored markers make the two headline numbers scannable at a glance. */ .stat-card.pending { border-left: 2px solid var(--warn); } .stat-card.pending .stat-value { color: var(--warn); } .stat-card.loaded { border-left: 2px solid var(--success); } .stat-card.loaded .stat-value { color: var(--success); } .stat-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0.55; } .stat-card.pending::after { background: radial-gradient( 120% 100% at 0% 0%, rgba(251, 191, 36, 0.12) 0%, transparent 60% ); } .stat-card.loaded::after { background: radial-gradient( 120% 100% at 0% 0%, rgba(52, 211, 153, 0.12) 0%, transparent 60% ); } /* ── Status picker ──────────────────────────────────────────────────────── */ .status-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 4px; } .status-option { padding: 12px; font-size: 0.85rem; font-weight: 500; color: var(--text-muted); background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: color var(--transition), background var(--transition), border-color var(--transition); } .status-option:hover { border-color: var(--border-strong); color: var(--text-2); } .status-option.selected { color: var(--text); background: color-mix(in oklab, var(--primary) 14%, var(--elevated)); border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; font-weight: 600; } /* ── Toast ──────────────────────────────────────────────────────────────── */ .toast { position: fixed; top: calc(env(safe-area-inset-top) + var(--topbar-height) + 10px); left: 50%; z-index: 300; display: flex; align-items: center; max-width: min(420px, calc(100vw - 32px)); padding: 11px 16px; font-size: 0.82rem; font-weight: 500; color: var(--text); background: var(--elevated); border: 1px solid var(--border-strong); border-left: 2px solid var(--primary); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); transform: translate(-50%, -14px); opacity: 0; pointer-events: none; transition: transform var(--transition), opacity var(--transition); } .toast.show { transform: translate(-50%, 0); opacity: 1; } .toast.success { border-left-color: var(--success); } .toast.error { border-left-color: var(--danger); color: var(--danger); } /* ── Modal ──────────────────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: var(--spacing); background: rgba(10, 10, 10, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition); } .modal-overlay.show { opacity: 1; visibility: visible; } .modal { width: 100%; max-width: 420px; max-height: 84vh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: var(--spacing); transform: translateY(10px) scale(0.99); transition: transform var(--transition); } .modal-overlay.show .modal { transform: translateY(0) scale(1); } .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); } .modal-title { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); } .modal-close { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 1.3rem; line-height: 1; color: var(--text-muted); background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: color var(--transition), background var(--transition); } .modal-close:hover { color: var(--text); background: var(--elevated); } /* ── Invoice detail ─────────────────────────────────────────────────────── */ .invoice-detail .detail-section { margin-bottom: 16px; } .invoice-detail h3 { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--info); opacity: 0.85; margin-bottom: 8px; } .invoice-detail .kv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 0.85rem; border-bottom: 1px solid var(--border-soft); } .invoice-detail .kv:last-child { border-bottom: none; } .invoice-detail .kv span:first-child { color: var(--text-muted); } .invoice-detail .kv span:last-child { font-family: var(--font-num); font-variant-numeric: tabular-nums; text-align: right; color: var(--text-2); } /* ── Documents ──────────────────────────────────────────────────────────── */ .docs-card { background: var(--bg-2); } .doc-list { display: flex; flex-direction: column; gap: 6px; } .doc-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); } .doc-item .doc-icon { font-size: 1.05rem; line-height: 1; opacity: 0.9; } .doc-item .doc-idx { font-family: var(--font-num); font-size: 0.66rem; color: var(--text-faint); } .doc-item .doc-meta { flex: 1; min-width: 0; } .doc-item .doc-name { font-size: 0.82rem; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .doc-item .doc-size { font-family: var(--font-num); font-size: 0.66rem; color: var(--text-muted); } .doc-item .doc-actions .btn-sm { min-height: 30px; padding: 4px 9px; font-size: 0.68rem; } .backup-warning { padding: 12px 14px; font-size: 0.8rem; line-height: 1.6; color: var(--text-2); background: color-mix(in oklab, var(--warn) 9%, var(--card)); border: 1px solid color-mix(in oklab, var(--warn) 28%, transparent); border-left: 2px solid var(--warn); border-radius: var(--radius-sm); } .backup-warning strong { color: var(--text); font-weight: 600; } /* ── PDF preview ────────────────────────────────────────────────────────── */ /* Kept light on purpose: this is a preview of the printed document. */ .pdf-preview { background: #f4f4f4; color: #1e1e1e; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 22px; font-size: 0.82rem; line-height: 1.45; box-shadow: var(--shadow-lg); } .pp-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid #4d8dff; } .pp-header-left { display: flex; gap: 10px; min-width: 0; } .pp-logo { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; font-size: 1.15rem; font-weight: 800; color: #f4f4f4; background: linear-gradient(140deg, #4d8dff, #22d3ee); border-radius: 4px; } .pp-company { font-size: 0.98rem; font-weight: 700; color: #1e1e1e; } .pp-contact { font-family: var(--font-num); font-size: 0.7rem; color: #6b6b6b; } .pp-header-right { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; text-align: right; } .pp-type { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.1em; text-align: right; color: #1e1e1e; } .pp-invnum { font-family: var(--font-num); font-size: 0.76rem; text-align: right; color: #6b6b6b; } .pp-parties { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid #d4d4d4; } .pp-billto { min-width: 0; } .pp-kicker { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: #8a8a8a; } .pp-party-name { font-size: 0.95rem; font-weight: 700; color: #1e1e1e; } .pp-meta { min-width: 46%; } .pp-meta-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 4px 6px; font-size: 0.74rem; } .pp-meta-row.alt { background: #e8e8e8; } .pp-meta-row span:first-child { color: #6b6b6b; } .pp-meta-row span:last-child { font-family: var(--font-num); color: #1e1e1e; } .pp-table { width: 100%; margin-top: 14px; border-collapse: collapse; } .pp-table thead th { padding: 8px 6px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #6b6b6b; background: #e8e8e8; border-bottom: 1px solid #d4d4d4; text-align: left; } .pp-table tbody td { padding: 9px 6px; font-size: 0.79rem; border-bottom: 1px solid #e4e4e4; } .pp-table td.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; text-align: right; } .pp-bottom { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-top: 16px; } .pp-notes { flex: 1; min-width: 0; } .pp-notes-body { font-size: 0.74rem; color: #555555; white-space: pre-wrap; } .pp-totals { min-width: 190px; } .pp-total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 5px 0; font-size: 0.78rem; color: #555555; } .pp-total-row span:last-child { font-family: var(--font-num); font-variant-numeric: tabular-nums; color: #1e1e1e; } .pp-total-row.pp-balance { margin-top: 4px; padding-top: 9px; border-top: 2px solid #1e1e1e; font-size: 0.95rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #2f6fd0; } .pp-total-row.pp-balance span:last-child { font-size: 1rem; } /* ── Settings extras ────────────────────────────────────────────────────── */ .hidden { display: none !important; } .device-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; } .device-grid div { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); } .device-grid div:last-child { grid-column: 1 / -1; } .device-grid strong { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); } .device-grid span { font-family: var(--font-num); font-size: 0.8rem; color: var(--text); } .howto-item { padding: 11px 0; font-size: 0.82rem; line-height: 1.6; color: var(--text-2); border-bottom: 1px solid var(--border-soft); } .howto-item:last-child { border-bottom: none; padding-bottom: 0; } .howto-item strong { color: var(--text); font-weight: 600; } /* ── Responsive ─────────────────────────────────────────────────────────── */ @media (max-width: 420px) { .line-item { grid-template-columns: 1fr 56px 74px auto; gap: 5px; padding: 8px; } .stat-card .stat-value { font-size: 1.05rem; } .pdf-preview { padding: 16px; font-size: 0.76rem; } .pp-parties { flex-direction: column; gap: 10px; } .pp-meta { min-width: 100%; } .pp-bottom { flex-direction: column; } .pp-totals { min-width: 100%; } } @media (min-width: 560px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } .status-picker { grid-template-columns: repeat(4, 1fr); } .line-item { grid-template-columns: 1fr 70px 92px auto; } .line-item > div:nth-child(1) { grid-column: 1; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ========================================================================== Licence gate v2 — split screen (graphite brand panel + form panel). Type: Space Grotesk (display) + Plus Jakarta Sans (UI). Theme-token aware. ========================================================================== */ :root { --ll-display: "Space Grotesk", var(--font-ui); --ll-body: "Plus Jakarta Sans", var(--font-ui); } html.ll-locked #viewContainer { visibility: hidden; } .ll-gate-boot #viewContainer, .ll-gate-boot .topbar, .ll-gate-boot .bottom-nav { visibility: hidden; } .ll-gate { min-height: 100dvh; display: flex; align-items: stretch; justify-content: center; font-family: var(--ll-body); background: var(--bg); } .ll-frame { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); width: min(1120px, 100%); min-height: 100dvh; } /* ── Brand panel — always graphite, both themes ────────────────────────── */ .ll-brand { position: relative; display: flex; flex-direction: column; gap: 26px; padding: 30px 34px; background: linear-gradient(160deg, #23262b 0%, #17181c 72%); color: #eef0f3; overflow: hidden; } .ll-brand::after { /* faint road-marking texture */ content: ""; position: absolute; left: -20%; right: -20%; bottom: -70px; height: 220px; background: repeating-linear-gradient( 90deg, transparent 0 26px, rgba(255, 255, 255, 0.045) 26px 44px ); transform: skewY(-6deg); pointer-events: none; } .ll-brand-top { display: flex; align-items: center; gap: 10px; } .ll-logo-badge { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); } .ll-logo-badge img { width: 20px; height: 20px; border-radius: 5px; } .ll-brand-name { font-family: var(--ll-display); font-weight: 700; letter-spacing: 0.01em; font-size: 1.02rem; } .ll-brand-theme { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: #c8cdd6; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50%; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .ll-brand-theme:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; } .ll-brand-theme svg { width: 16px; height: 16px; } .ll-brand-theme .icon-sun { display: none; } html[data-theme="dark"] .ll-brand-theme .icon-moon { display: none; } html[data-theme="dark"] .ll-brand-theme .icon-sun { display: block; } .ll-brand-body { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; flex: 1; } .ll-brand-head { font-family: var(--ll-display); font-size: clamp(1.7rem, 2.6vw, 2.25rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; margin: 0; max-width: 16ch; } .ll-brand-sub { color: #aab1bc; font-size: 0.95rem; line-height: 1.55; margin: 0; max-width: 42ch; } .ll-brand-feats { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 12px; } .ll-brand-feats li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.86rem; color: #c8cdd6; line-height: 1.45; } .ll-brand-feats strong { color: #eef0f3; font-weight: 600; } .ll-feat-ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; color: #7fb0ff; background: rgba(77, 141, 255, 0.12); border: 1px solid rgba(77, 141, 255, 0.25); } .ll-feat-ico svg { width: 15px; height: 15px; } /* Route strip with the idling truck */ .ll-route { position: relative; height: 46px; margin-top: auto; overflow: hidden; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); } .ll-route-line { position: absolute; left: 18px; right: 18px; top: 50%; height: 0; border-top: 2px dashed rgba(255, 255, 255, 0.22); } .ll-route-dot { position: absolute; left: 14px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #4d8dff; box-shadow: 0 0 0 4px rgba(77, 141, 255, 0.2); } .ll-route-truck { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #9db9e8; } .ll-route-truck svg { width: 20px; height: 20px; animation: llTruckIdle 2.4s ease-in-out infinite; } @keyframes llTruckIdle { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(calc(-50% - 3px)); } } .ll-brand-foot { font-size: 0.75rem; color: #79808c; } .ll-byline { color: #9aa1ab; } .ll-byline a { color: #c8cdd6; font-weight: 600; text-decoration: none; letter-spacing: 0.02em; } .ll-byline a:hover { color: #ffffff; text-decoration: underline; } .ll-tagline { margin-top: 3px; } /* Language dropdown (Google Website Translator does the translations) */ .ll-lang { margin-left: auto; font-family: inherit; font-size: 0.8rem; font-weight: 600; color: #eef0f3; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; padding: 7px 26px 7px 10px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23aab1bc' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 11px; max-width: 128px; } .ll-lang:hover { background-color: rgba(255, 255, 255, 0.12); } .ll-lang option { color: #1a1a1a; background: #ffffff; } html[data-theme="dark"] .ll-lang option { color: #e5e5e5; background: #262626; } /* Hide Google's own combo — ours in the brand panel is the visible control. The iframe is how Google rewrites the page, so it must stay in the layout. */ #\:1\.containerframe, .goog-te-banner-frame, .goog-te-combo { display: none !important; } body { top: 0 !important; } /* ── Form panel ─────────────────────────────────────────────────────────── */ .ll-panel { display: flex; align-items: center; justify-content: center; padding: 36px 24px; background: var(--bg); } .ll-card { width: 100%; max-width: 400px; animation: llCardIn 0.4s cubic-bezier(0.2, 0, 0.2, 1) both; } @keyframes llCardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .ll-eyebrow { display: inline-flex; align-items: center; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); background: color-mix(in oklab, var(--primary) 10%, transparent); border: 1px solid color-mix(in oklab, var(--primary) 25%, transparent); border-radius: 999px; padding: 4px 10px; margin-bottom: 14px; } .ll-gate-title { font-family: var(--ll-display); font-size: 1.55rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text); margin: 0 0 8px; } .ll-gate-sub { font-size: 0.88rem; color: var(--text-muted); line-height: 1.55; margin: 0 0 20px; } .ll-gate-form { text-align: left; } .ll-gate-form .form-group { margin-bottom: 14px; } .ll-gate-form label { display: block; } .ll-gate-form .input { min-height: 46px; } .ll-pass-wrap { position: relative; } .ll-pass-wrap .input { padding-right: 58px; } .ll-peek { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-family: inherit; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: var(--text-muted); background: transparent; border: 0; border-radius: 6px; padding: 6px 8px; cursor: pointer; } .ll-peek:hover { color: var(--text); background: var(--accent); } .ll-gate-error { background: color-mix(in oklab, var(--danger) 12%, transparent); border: 1px solid color-mix(in oklab, var(--danger) 35%, transparent); color: var(--danger); font-size: 0.82rem; line-height: 1.45; border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: 14px; text-align: left; } .ll-gate-submit { width: 100%; min-height: 48px; font-size: 0.95rem; margin-top: 4px; } .ll-gate-meta { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; margin: 16px 0 0; text-align: center; } .ll-gate-wa { margin-top: 12px; } .ll-wa-btn { width: 100%; min-height: 48px; background: linear-gradient(135deg, #25d366, #128c7e); border-color: #128c7e; color: #ffffff; box-shadow: 0 2px 12px rgba(18, 140, 126, 0.25); } .ll-wa-btn:hover { background: linear-gradient(135deg, #2ee06f, #15a184); border-color: #128c7e; color: #ffffff; } .ll-pending-note { background: color-mix(in oklab, var(--amber) 10%, transparent); border: 1px solid color-mix(in oklab, var(--amber) 32%, transparent); color: var(--text); font-size: 0.86rem; line-height: 1.55; border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 16px; text-align: left; } .ll-gate-back { width: 100%; margin-top: 10px; } /* ── Responsive: stack on small screens ─────────────────────────────────── */ @media (max-width: 880px) { .ll-frame { grid-template-columns: 1fr; } .ll-brand { padding: 22px 22px 24px; gap: 16px; } .ll-brand-head { font-size: 1.4rem; } .ll-brand-sub { font-size: 0.88rem; } .ll-brand-feats li:nth-child(3) { display: none; } .ll-route { display: none; } .ll-panel { padding: 26px 20px 44px; } }