/* ============================================================================ Lab Carriers · LIQUID GLASS · client-portal design system ---------------------------------------------------------------------------- Cosmetic design tokens shared by the client-facing pages (client-portal, client-deliveries, client-onboarding, track). NO logic here — just CSS custom properties, glass tile recipes, animation keyframes, and a few utility classes. Pages opt in by adding: ... Existing class names in pages are not renamed; this stylesheet adds new utilities side-by-side so JS that toggles classes keeps working. ============================================================================ */ @import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800;900&display=swap"); :root { /* ── Accent · Aurora (default) ─────────────────────────────────────── */ --lc-v: #7C3AED; --lc-vg: linear-gradient(135deg, #7C3AED, #A855F7 55%, #EC4899); --lc-vg-hi: linear-gradient(135deg, #8B43FF, #B967FF 55%, #FF55A9); --lc-pink: #EC4899; --lc-soft: #F2EAFE; --lc-amber: #F59E0B; /* ── Warm ivory + radial wash background ──────────────────────────── */ --lc-bg: radial-gradient(120% 80% at 88% -8%, rgba(124, 58, 237, 0.12), transparent 52%), radial-gradient(110% 75% at -8% 108%, rgba(245, 158, 11, 0.10), transparent 55%), linear-gradient(160deg, #F7F1E6, #EFE7D6); /* ── Warm ink + muted scale ───────────────────────────────────────── */ --lc-ink: #16140f; --lc-ink-2: #3d3930; --lc-text: #16140f; --lc-muted: #6b665d; --lc-faint: #8a847a; --lc-fainter: #a39d92; --lc-placeholder: #b3a89c; --lc-rule: rgba(95, 80, 55, 0.08); --lc-rule-strong: rgba(95, 80, 55, 0.12); --lc-chip-bg: #F0EBDF; /* ── Success / warning / danger ───────────────────────────────────── */ --lc-green: #22C55E; --lc-green-2: #16A34A; --lc-green-text: #15803D; --lc-green-soft: #DCF7E6; --lc-warn: #F59E0B; --lc-danger: #DC2626; --lc-danger-soft: #FDECEC; /* ── Geometry ─────────────────────────────────────────────────────── */ --lc-rad: 24px; --lc-rad-pill: 9999px; --lc-rad-chip: 9px; --lc-rad-btn: 15px; } /* ============================================================================ Base: warm ivory background + Figtree typography ============================================================================ */ body.lc-glass-page { margin: 0; min-height: 100vh; font-family: "Figtree", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; font-feature-settings: "ss01", "cv11"; color: var(--lc-text); background: var(--lc-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.lc-glass-page * { box-sizing: border-box; } /* Top accent hairline — drop in at the very top of the page */ .lc-top-hairline { height: 4px; background: linear-gradient(90deg, #7C3AED, var(--lc-pink) 55%, #F59E0B); } /* ============================================================================ Glass tile recipes ============================================================================ */ .lc-glass { position: relative; background: linear-gradient(150deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.48)); -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%); border: 1px solid rgba(255, 255, 255, 0.70); border-radius: var(--lc-rad); box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.98), inset 0 -16px 30px rgba(255, 255, 255, 0.22), 0 16px 40px rgba(95, 80, 55, 0.14); } .lc-glass-strong { -webkit-backdrop-filter: blur(30px) saturate(195%); backdrop-filter: blur(30px) saturate(195%); border-radius: calc(var(--lc-rad) + 4px); box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.98), inset 0 -18px 36px rgba(255, 255, 255, 0.24), 0 20px 46px rgba(95, 80, 55, 0.15); } .lc-glass-translucent { background: linear-gradient(150deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.28)); } /* ============================================================================ Nav + tagline strip ============================================================================ */ .lc-nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 28px; padding: 14px 36px; background: rgba(250, 246, 238, 0.82); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border-bottom: 1px solid var(--lc-rule); } .lc-tagline-strip { display: flex; align-items: center; justify-content: space-between; padding: 11px 36px; border-bottom: 1px solid rgba(95, 80, 55, 0.06); font-size: 14px; font-weight: 600; color: var(--lc-faint); } .lc-tagline-strip b { font-weight: 800; background: var(--lc-vg); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Brand mark + wordmark */ .lc-brand-mark { width: 42px; height: 42px; border-radius: 13px; background: var(--lc-vg); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(124, 58, 237, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.45); flex-shrink: 0; } .lc-wordmark-line1 { font-size: 19px; font-weight: 900; letter-spacing: -0.02em; white-space: nowrap; line-height: 1; } .lc-wordmark-line1 .accent { background: var(--lc-vg); -webkit-background-clip: text; background-clip: text; color: transparent; } .lc-wordmark-line2 { font-size: 10px; font-weight: 800; letter-spacing: 0.18em; color: var(--lc-fainter); margin-top: 3px; line-height: 1; text-transform: uppercase; } /* ============================================================================ Buttons + pills ============================================================================ */ .lc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 22px; height: 44px; border-radius: var(--lc-rad-btn); font-family: inherit; font-size: 14.5px; font-weight: 800; letter-spacing: -0.01em; cursor: pointer; border: 0; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; text-decoration: none; white-space: nowrap; } .lc-btn-primary { color: #fff; background: var(--lc-vg); box-shadow: 0 14px 30px rgba(124, 58, 237, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.40); } .lc-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 18px 38px rgba(124, 58, 237, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.50); } .lc-btn-primary:active { transform: translateY(0); } .lc-btn-glass { color: var(--lc-ink); background: linear-gradient(150deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42)); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.70); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 6px 18px rgba(95, 80, 55, 0.10); } .lc-btn-glass:hover { background: linear-gradient(150deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.58)); } .lc-btn-ghost { color: var(--lc-ink-2); background: #fff; border: 1px solid var(--lc-rule-strong); box-shadow: 0 2px 6px rgba(95, 80, 55, 0.07); } .lc-btn-ghost:hover { background: #FDECEC; border-color: rgba(239, 68, 68, 0.3); color: var(--lc-danger); } .lc-pill { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; height: 32px; border-radius: var(--lc-rad-pill); font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; } .lc-pill-success { background: var(--lc-green-soft); border: 1px solid rgba(22, 163, 74, 0.20); color: var(--lc-green-text); } .lc-pill-accent { background: var(--lc-soft); color: var(--lc-v); } .lc-pill-live { background: var(--lc-soft); color: var(--lc-v); height: 28px; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 0 12px; } /* Ref chip — gray pill for tracking refs */ .lc-ref-chip { display: inline-block; padding: 3px 8px; border-radius: 6px; background: var(--lc-chip-bg); color: var(--lc-ink-2); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; } /* ============================================================================ Stat / KPI tiles ============================================================================ */ .lc-stat { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: var(--lc-rad); } .lc-stat-head { display: flex; align-items: center; gap: 10px; } .lc-stat-chip { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; } .lc-stat-label { font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--lc-fainter); } .lc-stat-row { display: flex; align-items: baseline; gap: 8px; } .lc-stat-value { font-size: 38px; font-weight: 900; letter-spacing: -0.02em; line-height: 1; } .lc-stat-unit { font-size: 13.5px; font-weight: 600; color: var(--lc-faint); } /* ============================================================================ Section heading row ============================================================================ */ .lc-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .lc-section-title { font-size: 18px; font-weight: 900; letter-spacing: -0.015em; color: var(--lc-ink); } .lc-section-link { font-size: 13px; font-weight: 700; color: var(--lc-v); text-decoration: none; } .lc-section-link:hover { text-decoration: underline; } /* ============================================================================ Pulse + tick animations ============================================================================ */ @keyframes lcPulse { 0% { transform: scale(0.7); opacity: 0.7; } 100% { transform: scale(2.6); opacity: 0; } } @keyframes lcDrift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-3%, 3%) scale(1.08); } } @keyframes lcTick { from { stroke-dashoffset: 26; } to { stroke-dashoffset: 0; } } @keyframes lcFlow { to { stroke-dashoffset: -220; } } .lc-tick-badge { position: relative; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; } .lc-tick-badge::before { content: ""; position: absolute; inset: 0; border-radius: 9999px; background: rgba(34, 197, 94, 0.30); animation: lcPulse 2.2s ease-out infinite; pointer-events: none; } .lc-tick-badge-inner { width: 28px; height: 28px; border-radius: 9999px; background: var(--lc-green); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(22, 163, 74, 0.36); z-index: 1; } .lc-tick-path { stroke-dasharray: 26; animation: lcTick 0.55s ease-out 0.15s both; } /* Live dot — small dot inside the LIVE pill, with expanding ring */ .lc-live-dot { position: relative; width: 8px; height: 8px; border-radius: 9999px; background: var(--lc-v); display: inline-block; } .lc-live-dot::before { content: ""; position: absolute; inset: -4px; border-radius: 9999px; background: rgba(124, 58, 237, 0.32); animation: lcPulse 2.2s ease-out infinite; } /* ============================================================================ Form inputs — warm cream styling ============================================================================ */ .lc-glass-page input[type="text"], .lc-glass-page input[type="email"], .lc-glass-page input[type="password"], .lc-glass-page input[type="number"], .lc-glass-page input[type="tel"], .lc-glass-page input[type="search"], .lc-glass-page input[type="date"], .lc-glass-page select, .lc-glass-page textarea { font-family: inherit; font-size: 14.5px; font-weight: 500; color: var(--lc-ink); background: #fff; border: 1px solid var(--lc-rule-strong); border-radius: 12px; padding: 11px 14px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; box-shadow: inset 0 1px 2px rgba(95, 80, 55, 0.04); } .lc-glass-page input:focus, .lc-glass-page select:focus, .lc-glass-page textarea:focus { border-color: var(--lc-v); box-shadow: inset 0 1px 2px rgba(95, 80, 55, 0.04), 0 0 0 4px rgba(124, 58, 237, 0.10); } .lc-glass-page input::placeholder, .lc-glass-page textarea::placeholder { color: var(--lc-placeholder); font-weight: 500; } /* ============================================================================ Reduced motion ============================================================================ */ @media (prefers-reduced-motion: reduce) { .lc-tick-badge::before, .lc-live-dot::before, .lc-tick-path { animation: none !important; } .lc-tick-path { stroke-dashoffset: 0; } }