/* ============================================================ ORBIO · SKIN — §178.22 production skin layer ------------------------------------------------------------ Linked LAST in , AFTER orbio-tokens.css and orbio-components.css. At equal specificity it wins by source order → it adopts the ORBIO design language on the bare, un-namespaced surfaces the component layer never touched. SCOPE (deliberately narrow & safe): · native form controls (input / textarea / select) · ::placeholder · ::-webkit-scrollbar + thumb/track · ::selection / ::-moz-selection · the ~14 named shared structural surfaces · gentle global niceties (transitions, :focus-visible ring) RULES OF ENGAGEMENT: · Colors come from theme-aware var(--token)s (the bridge maps --bg/--glass/--text/--accent/--input-bg…), so ONE rule serves BOTH themes — dark 'ocean' (default) and light 'svetlo'. · No substring/[class*=…] selectors. No bespoke component classes. Layout (display/flex/grid/position/width/height of containers) is left untouched — cosmetic only. · Hardcoding only where no token exists (e.g. status-tinted :invalid border already has --danger, so we use the token). Signature treatments (from the design spec): · transition 0.15s cubic-bezier(0.4,0,0.2,1) → var(--dur-fast) var(--ease) · input focus border var(--accent) + glow var(--glow-soft) = 0 0 16px rgba(var(--accent-rgb), 0.2) · button focus-visible ring var(--glow-focus) = 0 0 0 3px rgba(var(--accent-rgb), 0.15) · scrollbar 6px, thumb rgba(var(--accent-rgb),0.15), radius 3px · ::selection teal tint ============================================================ */ /* ============================================================ 1 · GLOBAL NICETIES Smooth, functional motion on interactive elements + an accessible teal focus-visible ring. Kept to cosmetic props (color/border/box-shadow/transform) so no layout shifts. ============================================================ */ /* Fast, ease-out transitions on the things users actually touch. Only animates cosmetic properties — never width/height/layout. */ a, button, summary, label, [role="button"], [role="tab"], [role="menuitem"] { transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); } /* Keyboard focus ring — the brand teal halo. Mouse clicks stay clean thanks to :focus-visible. Inputs get their own (stronger) treatment below, so they're excluded here. */ :focus-visible { outline: none; box-shadow: var(--glow-focus); } /* Honour reduced-motion preferences — drop transitions, keep styles. */ @media (prefers-reduced-motion: reduce) { a, button, summary, label, [role="button"], [role="tab"], [role="menuitem"], input, textarea, select { transition: none !important; } } /* ============================================================ 2 · NATIVE FORM CONTROLS input / textarea / select — hairline border, app input-bg, ORBIO radius, teal focus glow. Colors via tokens so both themes resolve from one rule. Font inherits (Inter/system). ============================================================ */ input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], textarea, select { background: var(--input-bg); border: var(--border-width) solid var(--border); border-radius: var(--radius-md); /* 8px — inputs/list items */ color: var(--text); font-family: inherit; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); outline: none; } /* Single-line text controls share a comfortable 13–14px size + pad. */ input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], select { font-size: var(--text-lg); /* 14px */ } /* Textareas: keep them resizable, give them readable line-height. */ textarea { font-size: var(--text-lg); /* 14px */ line-height: var(--leading-snug); resize: vertical; } /* select gets the pointer affordance + a warm hover border. */ select { cursor: pointer; } select:hover:not(:disabled):not(:focus) { border-color: var(--border-accent); } /* Placeholder — the faint cool-grey token, both themes. */ input::placeholder, textarea::placeholder { color: var(--text-faint); opacity: 1; /* Firefox dims by default */ } /* FOCUS — accent border + the soft teal aura. var(--glow-soft) = 0 0 16px rgba(var(--accent-rgb), 0.2). */ input:not([type]):focus, input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="date"]:focus, input[type="time"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="week"]:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: var(--glow-soft); outline: none; } /* Invalid state borrows the danger token (no glow — just the border, so it never fights the focus aura). */ input:not(:placeholder-shown):invalid, textarea:not(:placeholder-shown):invalid { border-color: var(--danger); } /* Disabled controls dim consistently across themes. */ input:disabled, textarea:disabled, select:disabled { opacity: 0.45; cursor: not-allowed; } /* ---- Checkboxes & radios — tint the native control teal ---- */ input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); cursor: pointer; transition: box-shadow var(--dur-fast) var(--ease); } input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: none; box-shadow: var(--glow-focus); } /* ---- Range slider — teal track thumb ---- */ input[type="range"] { accent-color: var(--accent); } /* ============================================================ 3 · SCROLLBARS (WebKit/Blink — Chromium/Electron shell) 6px wide; teal thumb rgba(var(--accent-rgb),0.15), radius 3px. Token-driven → recolours automatically per theme. The app's theme-scoped scrollbar overrides (.kt-section, .oef-body, the svetlo thumb) keep their higher specificity and still win where defined — this is only the global default. ============================================================ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.15); border-radius: 3px; transition: background var(--dur-fast) var(--ease); } ::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), 0.30); } ::-webkit-scrollbar-corner { background: transparent; } /* Firefox — thin bar, teal thumb over a transparent track. */ * { scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb), 0.15) transparent; } /* ============================================================ 4 · TEXT SELECTION Teal tint behind selected text, in both themes. (Split rules — a browser drops the whole list if it can't parse ::-moz-selection.) ============================================================ */ ::selection { background: rgba(var(--accent-rgb), 0.22); color: var(--text); } ::-moz-selection { background: rgba(var(--accent-rgb), 0.22); color: var(--text); } /* ============================================================ 5 · NAMED SHARED SURFACES The ~14 explicitly-safe structural surfaces. COSMETIC ONLY: borders, radius, glass background, subtle accent edges — no display/flex/position/size changes, so existing layout holds. All values token-driven for dual-theme correctness. ============================================================ */ /* ---- App shell roots — establish the brand text colour context. No background here (body::before owns the canvas), so we don't create a competing full-bleed layer. ---- */ .orbio-app, .orbio-container, .wh-root { color: var(--text); } /* ---- Scroll regions — give long lists a calm, themed rhythm. Background stays transparent so the canvas gradient shows through. ---- */ .chat-messages { color: var(--text); scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb), 0.15) transparent; } /* ---- Header & input bar — keep them transparent (the app intends this; svetlo paints its own header). We only normalise the hairline so the seam reads as an ORBIO border, both themes. ---- */ .chat-header { border-bottom: var(--border-width) solid var(--border-soft); } .chat-input-area { border-top: var(--border-width) solid var(--border-soft); } /* ---- Toolbar — thin themed divider under the action row. ---- */ .wh-toolbar { border-bottom: var(--border-width) solid var(--border-soft); } /* ---- Modals & their scrims — glass dialog + a soft dark veil ---- */ .wh-modal-overlay, .menu-overlay, .health-overlay { background: rgba(var(--bg-rgb), 0.55); backdrop-filter: var(--blur-bar); -webkit-backdrop-filter: var(--blur-bar); } .wh-modal { background: var(--glass); border: var(--border-width) solid var(--border); border-radius: var(--radius-xl); /* 12px — dialogs */ box-shadow: var(--shadow-lg); backdrop-filter: var(--blur-panel); -webkit-backdrop-filter: var(--blur-panel); } /* ---- Chat message column & bubbles — cosmetic polish only. Bubble radius + hairline; the message column just inherits text. ---- */ .msg-col { color: var(--text); } .msg-bubble { border-radius: var(--radius-lg); /* 10px */ border: var(--border-width) solid var(--border-soft); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } /* ---- Bubble avatar — pill/round, teal edge + faint dot glow ---- */ .orbio-bubble-avatar { border-radius: var(--radius-pill); border: var(--border-width) solid var(--border-accent); box-shadow: var(--glow-dot); } /* ---- Quick-reply chip — the pill suggestion buttons. Matches the spec chip primitive: pill, hairline, surface-2, dim text → warms to accent on hover/active. ---- */ .qr-chip { border-radius: var(--radius-pill); border: var(--border-width) solid var(--border-soft); background: var(--surface-2); color: var(--text-dim); transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .qr-chip:hover { color: var(--accent); background: var(--accent-soft); border-color: var(--border-accent); } .qr-chip:active { transform: scale(0.97); } .qr-chip:focus-visible { outline: none; box-shadow: var(--glow-focus); } /* ============================================================ 6 · PRIMARY CTA — BRAND GRADIENT The design's signature: teal→blue 135° gradient, near-black text (--text-on-accent), teal glow; hover lifts 1px, press scales 0.97. Curated list of the app's primary action buttons (today: teal→green gradient + white text). Cosmetic only — padding/size of each button is left untouched. ============================================================ */ .ticket-list-new-btn, .ticket-approve-btn, .wh-btn-primary, .rtg-btn-primary, .cal-add-btn, .pdt-edit-btn, .sup-btn, .btn-save, .oef-submit-btn, .reload-now { background: var(--grad-accent-btn); color: var(--text-on-accent); border: none; box-shadow: var(--glow-strong); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease); } .ticket-list-new-btn:hover:not(:disabled), .ticket-approve-btn:hover:not(:disabled), .wh-btn-primary:hover:not(:disabled), .rtg-btn-primary:hover:not(:disabled), .cal-add-btn:hover:not(:disabled), .pdt-edit-btn:hover:not(:disabled), .sup-btn:hover:not(:disabled), .btn-save:hover:not(:disabled), .oef-submit-btn:hover:not(:disabled), .reload-now:hover:not(:disabled) { filter: none; transform: translateY(-1px); box-shadow: 0 0 22px rgba(var(--accent-rgb), 0.5); } .ticket-list-new-btn:active, .ticket-approve-btn:active, .wh-btn-primary:active, .rtg-btn-primary:active, .cal-add-btn:active, .pdt-edit-btn:active, .sup-btn:active, .btn-save:active, .oef-submit-btn:active, .reload-now:active { transform: scale(0.97); } /* Send button — the spec's round gradient send: dark arrow on the brand gradient with a teal aura; hover grows 1.06. Idle (empty input) stays quiet exactly as the app has it today. */ .send-btn.has-text, .send-btn-wa.has-text { background: var(--grad-accent-btn); color: var(--text-on-accent); box-shadow: var(--glow-strong); } .send-btn.has-text:hover, .send-btn-wa.has-text:hover { background: var(--grad-accent-btn); color: var(--text-on-accent); transform: scale(1.06); } /* ============================================================ 7 · GLASS PANELS / MODALS / DROPDOWNS Spec surface: glass rgba-panel + hairline border + soft shadow + panel blur. Replaces today's near-opaque navy slabs. Colors ride the theme tokens, and `color: var(--text)` re-anchors the inherited text so the svetlo theme stays readable. Radius is NOT touched (each panel keeps its own), so nothing shifts — pure paint. ============================================================ */ .ticket-list-modal, .ticket-reject-modal, .bug-report-modal, .sup-modal, .cal-modal, .calendar-modal, .drop-modal, .kt-reg-modal, .rtg-tpl-modal, .reminder-modal-panel, .upgrade-modal, .vision-qr-modal, .notif-panel, .oef-panel, .health-detail-panel, .settings-sub-panel, .fastcatch-panel { background: var(--glass); border: var(--border-width) solid var(--border); color: var(--text); box-shadow: var(--shadow-lg); backdrop-filter: var(--blur-panel); -webkit-backdrop-filter: var(--blur-panel); } /* Dropdown flavours — lighter shadow, same glass. */ .dev-menu-popup, .photo-menu-popup, .live-search-dropdown, .rtg-search-dropdown, .wr-search-dropdown, .orbio-pet-dropdown, .kt-tb-search-results-panel { background: var(--glass); border: var(--border-width) solid var(--border); color: var(--text); backdrop-filter: var(--blur-panel); -webkit-backdrop-filter: var(--blur-panel); } /* Slide-down menu sheet — full-width, keeps square corners; just adopt the glass + ORBIO hairline seam. */ .menu-tab-panel { background: var(--glass); border-bottom: var(--border-width) solid var(--accent-line); } /* ============================================================ 8 · SHELL CHROME (widget-mode topbar) Spec header: quiet surface, hairline bottom border; brand teal reserved for the active tab/dot. Keep the blur (the bar floats over content) — only the tint and seam change. ============================================================ */ .widget-mode-topbar { background: var(--surface-glass); border-bottom: var(--border-width) solid var(--border-soft); } /* ============================================================ 9 · COUNT BADGES — accent pill per spec (--accent-soft bg) ============================================================ */ .ticket-list-count { background: var(--accent-soft); color: var(--accent); }