/* ========================================================== LEDdy — Sunrise design tokens (consolidated) One shared stylesheet: replaces the five inline token sets across login, chat, history, adduser. Plain CSS, no runtime. ========================================================== */ /* ---------------------------------------------------------- Brand font — licensed Helvetica Neue LT Pro (UPDATE-3). Paths are relative to this file, i.e. /assets/fonts/. All three guideline weights (75 Bold / 55 Roman / 45 Light) plus 56 Italic are real files, so nothing is synthesized: no faux-bold double-stroking and no sheared pseudo-italic. ---------------------------------------------------------- */ @font-face { font-family: 'Helvetica Neue LT Pro'; src: url('fonts/HelveticaNeueLTPro-Bd.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Neue LT Pro'; src: url('fonts/HelveticaNeueLTPro-Roman.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Neue LT Pro'; src: url('fonts/HelveticaNeueLTPro-It.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Helvetica Neue LT Pro'; src: url('fonts/HelveticaNeueLTPro-Lt.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; } :root { /* Brand */ --ldv-orange: #f66300; /* LDV Orange, accessibility-adapted online value — replaces ALL #ff6600 */ --ldv-orange-light: #ff8555; /* gradient start */ --ldv-orange-link: #b3550f; /* links on white, 4.5:1 AA */ --ldv-orange-link-hover: #9a4a0d; --ldv-orange-tint: #ffe0d4; /* hover fills, hairlines in tables */ --ldv-orange-tint-strong: #ffc2a9; /* light borders, header divider */ --ldv-orange-wash: #fff8f4; /* tile backgrounds */ --ldv-orange-chip: #fff3ec; /* inline-code chip bg */ /* Signature gradient (user bubbles, primary buttons) */ --ldv-gradient: linear-gradient(135deg, #ff8555 0%, #f66300 100%); /* User-bubble types (history transcript): filled = internal, outlined = external */ --ldv-bubble-external-bg: #ffffff; /* external user bubble: outlined, not filled */ --ldv-bubble-external-border: var(--ldv-ink); /* Sunrise band background (page top) */ --ldv-band: linear-gradient(180deg, #fff5ef 0%, #fffbf8 45%, #ffffff 100%); --ldv-band-height: 340px; /* usage: background: var(--ldv-band) 0 0/100% var(--ldv-band-height) no-repeat, #ffffff; */ /* Ink & text */ --ldv-ink: #111827; /* headings, header labels, near-black */ --ldv-black: #000000; /* strong emphasis in replies */ --ldv-body: #666666; /* Gray 01 — body typography per CD guideline */ --ldv-muted: #767676; /* meta text, placeholders, section labels — darkened from the handoff's #999999 (2.85:1) to reach 4.54:1 AA on white */ --ldv-hairline: #cbcbcb; /* input borders */ --ldv-silver: #e6e7e8; /* silver highlight (code block text on ink) */ /* Semantic (from guideline secondary ramps — sparing use only) */ --ldv-error-bg: #fce3e6; /* Rose tint */ --ldv-error-border: #e21e49; --ldv-error-text: #871437; --ldv-success-bg: #e9f7f1; /* Emerald tint */ --ldv-success-border: #047857; --ldv-success-text: #064e3b; --ldv-info-bg: #e8f4fc; /* Sea tint */ --ldv-info-border: #0369a1; --ldv-info-text: #0c4a6e; /* Type */ --ldv-font: 'Helvetica Neue LT Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; --ldv-mono: ui-monospace, Consolas, 'Courier New', monospace; /* Shadows (warm, orange-cast — never gray) */ --ldv-shadow-composer: 0 6px 28px rgba(246, 99, 0, .20); --ldv-shadow-card: 0 6px 28px rgba(246, 99, 0, .12); --ldv-shadow-popover: 0 4px 20px rgba(246, 99, 0, .14); --ldv-shadow-drawer: 8px 0 32px rgba(179, 85, 15, .14); --ldv-shadow-modal: 0 12px 48px rgba(0, 0, 0, .3); --ldv-scrim: rgba(0, 0, 0, .5); /* Geometry */ --ldv-radius: 0; /* HARD RULE: no border-radius anywhere */ --ldv-touch: 44px; /* min touch target (48px used on enlarged mobile header) */ --ldv-header-h: 64px; /* desktop */ --ldv-header-h-mobile: 68px; --ldv-logo-size: 64px; /* LEDVANCE stacked logo, desktop (62px mobile) */ } /* Focus — visible on ALL interactive elements (fixes ACCESSIBILITY.md §7) */ :where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--ldv-ink); outline-offset: 2px; } /* Base */ body { margin: 0; font-family: var(--ldv-font); color: var(--ldv-body); -webkit-font-smoothing: antialiased; } a { color: var(--ldv-orange-link); } a:hover { color: var(--ldv-orange-link-hover); } button:disabled { opacity: .45; cursor: not-allowed; } ::placeholder { color: var(--ldv-muted); } /* ========================================================== Animations — apply ONLY to newly appended messages (add the class when inserting the node), never on page load / history render. The old typewriter effect is REMOVED — do not reimplement. ========================================================== */ @keyframes ldv-msg-out { /* user message send */ 0% { opacity: 0; transform: translateY(18px) scale(.97); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes ldv-msg-in { /* AI reply arrival */ 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes ldv-pulse { /* status dot / empty-state bulb */ 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.12); opacity: 1; } } @keyframes ldv-bulb-lit { /* one-shot avatar light-up */ 0% { transform: scale(1); opacity: .5; } 45% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes ldv-spin { to { transform: rotate(360deg); } } @keyframes ldv-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } } .ldv-anim-msg-out { animation: ldv-msg-out .32s cubic-bezier(.2,.8,.3,1) both; } .ldv-anim-msg-in { animation: ldv-msg-in .4s ease-out both; } @media (prefers-reduced-motion: reduce) { .ldv-anim-msg-out, .ldv-anim-msg-in { animation: none; } }