/* ============================================================================ Wonder UI — shared modern design layer ---------------------------------------------------------------------------- Applied on top of each app's existing styles to give a consistent, modern, responsive feel WITHOUT rewriting per-app layout. Rules here are deliberately additive and low-specificity: * It NEVER redefines a brand color the apps already set — it only reads them with fallbacks: var(--gold, #F2BC3A). So linking it last is safe. * It NEVER touches maps, canvases, drawing tools, or layout roots (#map, canvas, .leaflet-*, body sizing/overflow) so field tools keep working. * It only enhances "feel" (type, depth, motion, focus, controls) and adds responsive guards (safe-area, orientation, fluid type, media that fits any phone or monitor). Link this LAST in : ========================================================================== */ :root { /* New tokens only — brand colors stay owned by each app. */ --wui-radius-sm: 8px; --wui-radius: 10px; --wui-radius-lg: 12px; --wui-ring: 0 0 0 3px color-mix(in srgb, var(--gold, #F2BC3A) 55%, transparent); --wui-shadow-1: 0 1px 2px rgba(3, 6, 12, .28), 0 2px 6px rgba(3, 6, 12, .22); --wui-shadow-2: 0 6px 18px rgba(3, 6, 12, .34), 0 2px 6px rgba(3, 6, 12, .24); --wui-shadow-3: 0 18px 48px rgba(3, 6, 12, .46), 0 4px 12px rgba(3, 6, 12, .30); --wui-ease: cubic-bezier(.2, .7, .2, 1); --wui-line: color-mix(in srgb, var(--muted, #8A91A3) 34%, transparent); } /* ---- Base rendering: crisper on retina, no blue tap flash, no rubber-band -- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* NOTE: no overscroll-behavior here — on Safari/iOS it can freeze page scroll when html/body also clip overflow-x (as Wonder Portal does). Apps that need bounce control set it on their own scroll containers instead. */ } img, svg, video, picture { max-width: 100%; } table { max-width: 100%; } ::selection { background: color-mix(in srgb, var(--gold, #F2BC3A) 40%, transparent); } /* ---- Fluid, refined typography (only type metrics — never layout) ---------- */ h1 { font-size: clamp(21px, 4.2vw, 30px); line-height: 1.12; letter-spacing: -.02em; } h2 { font-size: clamp(18px, 3vw, 23px); line-height: 1.16; letter-spacing: -.015em; } h3 { font-size: clamp(15px, 2.2vw, 18px); line-height: 1.2; letter-spacing: -.01em; } p, li { line-height: 1.6; } :where(h1,h2,h3,p,li,td,th,button,a,label,input,select,textarea) { overflow-wrap: anywhere; } /* ---- Controls: modern feel without changing declared size ------------------ */ button, .btn, [role="button"], input, select, textarea, a { -webkit-tap-highlight-color: transparent; } button, .btn, [role="button"] { transition: transform .12s var(--wui-ease), filter .15s var(--wui-ease), box-shadow .15s var(--wui-ease), background-color .15s var(--wui-ease); cursor: pointer; max-width: 100%; } button:not(:disabled):active, .btn:not(:disabled):active, [role="button"]:active { transform: translateY(1px) scale(.985); } @media (hover: hover) and (pointer: fine) { button:not(:disabled):hover, .btn:not(:disabled):hover { filter: brightness(1.06); } } button:disabled, .btn:disabled { opacity: .55; cursor: not-allowed; } input, select, textarea { transition: border-color .15s var(--wui-ease), box-shadow .15s var(--wui-ease), background-color .15s var(--wui-ease); max-width: 100%; } /* Keyboard + input focus: a clean brand ring instead of the default outline. */ :focus-visible { outline: none; box-shadow: var(--wui-ring); border-radius: var(--wui-radius-sm); } input:focus, select:focus, textarea:focus { outline: none; box-shadow: var(--wui-ring); } /* ---- Depth: give common card/panel patterns real elevation (shadow only) --- */ .card, .panel, .lesson-card, .terr-card, .stat, .weather-card, .drawer, .pane, .modern-card, .glass, .customer-card, .modal, .sheet { box-shadow: var(--wui-shadow-2); } @media (hover: hover) and (pointer: fine) { .card, .modern-card, .customer-card { transition: transform .16s var(--wui-ease), box-shadow .16s var(--wui-ease); } .card:hover, .modern-card:hover, .customer-card:hover { transform: translateY(-2px); box-shadow: var(--wui-shadow-3); } } /* ---- Shared layout polish -------------------------------------------------- */ :where(.toolbar,.action-row,.card-actions,.nav,.row,.top-actions,.filters,.tabs) { gap: clamp(8px, 1.4vw, 14px); } :where(.toolbar,.action-row,.card-actions,.nav,.row,.filters,.tabs) > * { min-width: 0; } :where(.grid,.cards2,.quick-grid,.stats) { align-items: stretch; } :where(.modal,.drawer,.sheet) { max-width: min(100vw, 980px); max-height: min(92vh, 920px); } :where(.modal,.drawer,.sheet) :where(.row,.toolbar,.action-row) { flex-wrap: wrap; } /* ---- Scrollbars: slim, on-brand, unobtrusive ------------------------------- */ * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted, #8A91A3) 45%, transparent) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted, #8A91A3) 42%, transparent); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted, #8A91A3) 62%, transparent); background-clip: padding-box; } *::-webkit-scrollbar-track { background: transparent; } /* ---- Responsive guards: any phone, any monitor, portrait or landscape ------ */ /* Phones in landscape are short — reclaim vertical space in headers. */ @media (orientation: landscape) and (max-height: 500px) { header { padding-top: 8px !important; padding-bottom: 8px !important; } } /* Small phones: make sure tap targets on primary/nav buttons stay reachable. */ @media (pointer: coarse) and (max-width: 480px) { button, .btn, [role="button"], input, select, textarea, .bottom-nav a, .bottom-nav button, .tabs button { min-height: 44px; } body { overflow-x: hidden; } header { gap: 10px !important; } main { min-width: 0; } :where(.toolbar,.action-row,.card-actions,.nav,.row,.filters,.tabs) { flex-wrap: wrap; } :where(.toolbar,.action-row,.card-actions,.nav,.row,.filters,.tabs) > button, :where(.toolbar,.action-row,.card-actions,.nav,.row,.filters,.tabs) > .btn { flex: 1 1 140px; } :where(.modal,.drawer,.sheet) { width: 100vw !important; max-width: 100vw; max-height: calc(92vh - env(safe-area-inset-bottom)); } :where(.card,.modern-card,.glass,.panel,.lesson-card,.customer-card) { padding: clamp(12px, 4vw, 16px); } :where(table,.table-wrap,.list-wrap) { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* Very large monitors: keep long text columns readable instead of edge-to-edge. Scoped to opt-in content wrappers only, and only when they aren't already constrained, so map/full-bleed apps are untouched. */ @media (min-width: 1600px) { .reading, .prose { max-width: 1100px; margin-inline: auto; } } /* Respect users who asked the OS to reduce motion. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }