/* tamPrime — blue glass. Loaded last on every page, so it sets the look for the whole app. Deep navy ground lit from two corners; panels are a thin wash of white over it with a 1px bright edge, so the light behind shows through. Light mode is the same idea in daylight: set data-theme="light" on . */ html:root { --paper:#070D1F; --ink:#EAF0FF; --ink-dim:rgba(234,240,255,.70); --ink-mute:rgba(234,240,255,.56); --line:rgba(255,255,255,.13); --grid:rgba(255,255,255,.07); --card:rgba(255,255,255,.055); --card-solid:#0E1734; --accent:#5B9BFF; --accent-ink:#061027; --accent-2:#46E0E8; --in:#46E0E8; --out:#FFA35B; /* received vs shipped: two colours you can tell apart */ --warn:#FFC876; --warn-bg:rgba(255,200,118,.14); --danger:#FF8FA8; --danger-bg:rgba(255,143,168,.13); --success:#59E3AE; --success-bg:rgba(89,227,174,.13); --shadow: 0 24px 50px -30px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.12); --radius:20px; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --glow: 0 10px 24px -10px color-mix(in srgb, var(--accent) 80%, transparent); color-scheme: dark; } /* daylight: same blue glass, light ground */ html:root[data-theme="light"] { --paper:#EBF1FF; --ink:#0B1633; --ink-dim:#4A5878; --ink-mute:#6A779A; --line:rgba(11,22,51,.12); --grid:rgba(11,22,51,.07); --card:rgba(255,255,255,.72); --card-solid:#FFFFFF; --accent:#2563EB; --accent-ink:#FFFFFF; --accent-2:#0E9BB5; --in:#0E7C90; --out:#C2560A; /* received vs shipped, in daylight */ --warn:#B4610A; --warn-bg:rgba(245,178,84,.22); --danger:#C2334F; --danger-bg:rgba(230,120,146,.20); --success:#0A7F5B; --success-bg:rgba(78,198,154,.22); --shadow: 0 18px 40px -28px rgba(11,22,51,.45), inset 0 1px 0 rgba(255,255,255,.9); color-scheme: light; } html body { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; background: radial-gradient(1100px 620px at 82% -8%, rgba(27,58,143,.85) 0%, rgba(11,20,48,0) 62%), radial-gradient(900px 540px at 4% 6%, rgba(14,90,120,.75) 0%, rgba(11,20,48,0) 58%), linear-gradient(168deg, #070D1F 0%, #0A1330 48%, #060B1A 100%); background-attachment: fixed; letter-spacing:-0.005em; } html:root[data-theme="light"] body { background: radial-gradient(1100px 620px at 84% -10%, rgba(120,170,255,.55) 0%, rgba(235,241,255,0) 62%), radial-gradient(900px 520px at 2% 4%, rgba(120,224,236,.45) 0%, rgba(235,241,255,0) 58%), linear-gradient(168deg, #F2F6FF 0%, #E6EDFF 50%, #EFF4FF 100%); } h1, h2, h3, nav.tabs::before, body.login h1::before, .brand { font-family:'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif; } h1 { font-weight:700 !important; letter-spacing:-0.025em; } h2 { letter-spacing:-0.012em; } /* ---- full-screen width: the page uses the whole monitor, with a comfortable gutter ---- */ html body .wrap { max-width:none; width:100%; padding-left:clamp(14px, 1.8vw, 32px); padding-right:clamp(14px, 1.8vw, 32px); } html body.narrow .wrap { max-width:960px; margin-inline:auto; } /* ---- inside the one-page view: the shell already shows the tabs and who's signed in ---- */ html.embedded nav.tabs { display:none !important; } html.embedded form[action="/logout"], html.embedded .whoami { display:none !important; } html.embedded body .wrap { padding-top:14px; } html.embedded body { background:transparent; } /* ---- top navigation on a page opened by itself ---- */ nav.tabs { position:sticky; top:8px; z-index:40; display:flex; align-items:center; gap:4px; padding:6px; margin:0 0 20px; background:color-mix(in srgb, var(--card-solid) 78%, transparent); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow); } nav.tabs::before { content:"tamPrime"; flex:none; font-weight:700; font-size:15px; letter-spacing:-0.02em; padding:0 12px 0 10px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; } nav.tabs a { border:none !important; margin:0 !important; border-radius:999px; padding:8px 14px; font-size:13.5px; font-weight:600; color:var(--ink-dim); transition:background .15s, color .15s; } nav.tabs a:hover { color:var(--ink); background:color-mix(in srgb, var(--ink) 8%, transparent); } nav.tabs a.active { color:var(--accent-ink); background:linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow:var(--glow); } @media (max-width:640px) { nav.tabs { border-radius:14px; top:4px; } nav.tabs::before { display:none; } nav.tabs a { padding:7px 11px; font-size:13px; } } /* ---- the glass itself ---- */ .card, .panel, .stat, .kpi, .tablewrap, .linkbox, .preview, .selbar, .autoprint, .drop { border-radius:var(--radius) !important; border-color:var(--line) !important; box-shadow:var(--shadow); backdrop-filter:saturate(1.3) blur(14px); -webkit-backdrop-filter:saturate(1.3) blur(14px); } .card, .panel, .tablewrap, .stat, .kpi { background:var(--card) !important; } .stat, .kpi { padding:16px 18px !important; } .stat .v, .kpi .v { font-size:26px !important; letter-spacing:-.03em; } /* the first tile on a page carries the number that matters */ .stats .stat.hero, .kpis .kpi.hero { background:linear-gradient(150deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent-2) 10%, transparent)) !important; border-color:color-mix(in srgb, var(--accent) 45%, var(--line)) !important; } .modal { border-radius:var(--radius) !important; border:1px solid var(--line) !important; background:color-mix(in srgb, var(--card-solid) 92%, transparent) !important; backdrop-filter:saturate(1.4) blur(22px); -webkit-backdrop-filter:saturate(1.4) blur(22px); box-shadow:0 40px 90px -30px rgba(0,0,0,.8) !important; } #modalBackdrop, #pdBack { background:rgba(4,8,20,.58) !important; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); } #pdPanel { background:linear-gradient(190deg, color-mix(in srgb, var(--accent) 12%, var(--card-solid)), var(--card-solid) 42%) !important; border-left:1px solid var(--line) !important; backdrop-filter:saturate(1.4) blur(20px); -webkit-backdrop-filter:saturate(1.4) blur(20px); } /* ---- buttons ---- */ /* One size everywhere. Each page used to set its own padding and font size, so the same button was a different shape on every screen. */ .btn { padding:9px 14px !important; font-size:13.5px !important; } .btn.small { padding:6px 11px !important; font-size:12.5px !important; } .btn { border-radius:12px !important; font-weight:600; transition:transform .08s, box-shadow .15s, background .15s, filter .15s; } /* Anything that deletes or undoes looks like it, without waiting for a hover a phone never gives. */ .btn.danger, .rowbtn.danger, .linkbtn.danger { background:color-mix(in srgb, var(--danger) 13%, transparent) !important; border:1px solid color-mix(in srgb, var(--danger) 42%, var(--line)) !important; color:var(--danger) !important; } .btn.danger:hover:not(:disabled), .rowbtn.danger:hover { background:var(--danger) !important; color:var(--paper) !important; } .btn:active:not(:disabled) { transform:translateY(1px); } .btn.primary { background:linear-gradient(140deg, var(--accent), var(--accent-2)) !important; color:var(--accent-ink) !important; border:none !important; box-shadow:var(--glow); } .btn.primary:hover:not(:disabled) { filter:brightness(1.08); } .btn.ghost { background:color-mix(in srgb, var(--ink) 7%, transparent) !important; border:1px solid var(--line) !important; color:var(--ink) !important; } .btn.ghost:hover:not(:disabled) { border-color:color-mix(in srgb, var(--accent) 55%, var(--line)) !important; color:var(--accent) !important; } .chip { border-radius:999px; transition:background .15s, color .15s; background:color-mix(in srgb, var(--ink) 6%, transparent) !important; } .chip.active { background:linear-gradient(140deg, var(--accent), var(--accent-2)) !important; border-color:transparent !important; color:var(--accent-ink) !important; } .rowbtn, .linkbtn, .iconbtn { border-radius:10px !important; } /* ---- form fields ---- */ input[type=text], input[type=search], input[type=number], input[type=date], input[type=password], select, textarea { border-radius:12px !important; background:color-mix(in srgb, var(--card-solid) 60%, transparent) !important; border-color:var(--line) !important; color:var(--ink) !important; transition:border-color .15s, box-shadow .15s; } input::placeholder, textarea::placeholder { color:var(--ink-mute); } input:focus, select:focus, textarea:focus { outline:none !important; border-color:var(--accent) !important; box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent) !important; } input[type=checkbox] { accent-color:var(--accent); } /* ---- tables ---- */ th { color:var(--ink-mute) !important; font-weight:600 !important; letter-spacing:.07em !important; } thead th { background:color-mix(in srgb, var(--card-solid) 80%, transparent) !important; backdrop-filter:blur(8px); } tbody tr { transition:background .12s; } tbody tr:hover { background:color-mix(in srgb, var(--accent) 9%, transparent); } td, th { border-color:var(--grid) !important; } /* ---- one shape for the shared pieces, wherever they appear ---- */ .empty { padding:28px 16px !important; font-size:13.5px !important; color:var(--ink-mute) !important; } .modal { max-width:560px !important; } #modalBackdrop, #pdBack { align-items:center !important; } /* ---- on a phone or tablet: thumbs, not mouse pointers ---- */ @media (pointer: coarse) { /* Apple zooms into any box with text under 16px and never zooms back out. */ input, select, textarea { font-size:16px !important; } .btn, .btn.small, .editbtn, .rowbtn, .linkbtn, .chip, .badge, .stepbtn, .iconbtn { min-height:44px !important; min-width:44px !important; } .btn, .btn.small { padding-left:14px !important; padding-right:14px !important; } } /* ---- small things ---- */ .pill, .badge { border-radius:999px; } .toast { border-radius:14px !important; background:color-mix(in srgb, var(--card-solid) 94%, transparent) !important; color:var(--ink) !important; border:1px solid var(--line); box-shadow:0 20px 40px -14px rgba(0,0,0,.7); } ::selection { background:color-mix(in srgb, var(--accent) 35%, transparent); } a { color:var(--accent); } .mono, .sk, code, .num, .v, td.num, td.date, td.po, td.trk { font-family:var(--mono); } .progress > div { background:linear-gradient(90deg, var(--accent), var(--accent-2)) !important; } .thumb, .mini, .shot { border-color:var(--line) !important; } /* a column pinned while the table scrolls sideways needs something solid behind it — but only where one actually is pinned, or every table gets an opaque block down its right edge */ .tablewrap.sticky-last table tr > td:last-child, .tablewrap.sticky-last table tr > th:last-child { background:var(--card-solid) !important; } /* the file drop area reads as a well cut into the glass */ .drop { background:color-mix(in srgb, var(--ink) 5%, transparent) !important; border-style:dashed !important; } .drop.over { border-color:var(--accent) !important; background:color-mix(in srgb, var(--accent) 12%, transparent) !important; } /* On paper, ink is black. Without this the night theme's pale text prints almost invisibly. */ @media print { html, html body { background:#fff !important; color:#000 !important; } body * { color:#000 !important; text-shadow:none !important; box-shadow:none !important; } th, .sub, .cap, .num, .mono, .sk { color:#000 !important; } td, th, table, .card, .pill, .badge { border-color:#999 !important; background:transparent !important; } } /* keep anything that ends up on paper on white paper */ .labelprev, #printArea, #printArea * { color-scheme:light; } /* the clear Edit button used in tables */ .editbtn { display:inline-flex; align-items:center; gap:5px; border:1px solid color-mix(in srgb, var(--accent) 45%, var(--line)) !important; background:color-mix(in srgb, var(--accent) 16%, transparent) !important; color:var(--accent) !important; font-weight:700 !important; font-size:12.5px !important; padding:5px 11px !important; border-radius:9px !important; cursor:pointer; font-family:inherit; } .editbtn:hover { background:var(--accent) !important; color:var(--accent-ink) !important; border-color:var(--accent) !important; } /* login page */ body.login .card { max-width:360px; padding:28px; } body.login h1::before { content:"tamPrime"; display:block; font-size:24px; margin-bottom:6px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; } body.login button { border-radius:12px; background:linear-gradient(140deg, var(--accent), var(--accent-2)); color:var(--accent-ink); font-weight:700; }