/* * Orbitarium Design for MevaSearch - depth layer (UI theme "Orbitarium Design", key "premium"). * The additions at the end of this file are adapted from Orbitarium Design v1.1.0 * (https://orbitariumdesign.eu). * * Active when has the "ui-premium" class (set in from meva_uiTheme). * It does not change colours or layout: every colour comes from the page's own tokens * (--primary follows the user's accent, --card/--border/--fg follow light/dark), and this * file only adds light and shadow - top sheen, hairline highlight, soft lift, inset wells * and an accent glow - so surfaces and controls read as raised "3D in 2D". * * rgb(var(--x)) is used everywhere because pages define the tokens both as "R G B" and * as "R, G, B"; color-mix() then derives tints without depending on either format. * * Covers both the app shell (settings/theme cards, buttons, toggles, inputs) and the * results page (results.css): mcard/magazine/modern web-result layouts, image and * video cards, news cards, related-search chips, the AI summary box, time filter * pills and the floating sticky search capsule. */ html.ui-premium { --pm-sheen: rgba(255, 255, 255, .55); --pm-hairline: inset 0 1px 0 rgba(255, 255, 255, .75); --pm-lift: 0 1px 2px rgba(20, 20, 30, .05), 0 6px 16px rgba(20, 20, 30, .06); --pm-lift-hover: 0 2px 4px rgba(20, 20, 30, .06), 0 12px 26px rgba(20, 20, 30, .09); --pm-small: 0 1px 2px rgba(20, 20, 30, .08); --pm-float: 0 2px 6px rgba(20, 20, 30, .06), 0 16px 36px rgba(20, 20, 30, .14); --pm-well: inset 0 1px 2px rgba(20, 20, 30, .14); --pm-accent-soft: color-mix(in srgb, rgb(var(--primary)) 22%, transparent); --pm-accent-glow: color-mix(in srgb, rgb(var(--primary)) 40%, transparent); --pm-accent-light: color-mix(in srgb, rgb(var(--primary)) 78%, #fff); --pm-bg-glow: color-mix(in srgb, rgb(var(--primary)) 9%, transparent); } html.ui-premium.dark { --pm-sheen: rgba(255, 255, 255, .045); --pm-hairline: inset 0 1px 0 rgba(255, 255, 255, .06); --pm-lift: 0 1px 2px rgba(0, 0, 0, .25), 0 6px 16px rgba(0, 0, 0, .28); --pm-lift-hover: 0 2px 4px rgba(0, 0, 0, .3), 0 14px 30px rgba(0, 0, 0, .38); --pm-small: 0 1px 2px rgba(0, 0, 0, .35); --pm-float: 0 2px 6px rgba(0, 0, 0, .3), 0 18px 40px rgba(0, 0, 0, .5); --pm-well: inset 0 1px 3px rgba(0, 0, 0, .45); --pm-bg-glow: color-mix(in srgb, rgb(var(--primary)) 12%, transparent); } /* ── Page: a soft glow in the user's accent at the top (replaces the old purple blobs) ── */ html.ui-premium body { background-image: radial-gradient(1100px 520px at 50% -110px, var(--pm-bg-glow), transparent 70%); background-repeat: no-repeat; background-attachment: fixed; } /* Kapsuła aktywna: .page-capsule (nie body) jest teraz prawdziwym scrollowanym kontenerem, więc glow przenosimy na nią z background-attachment:local, żeby przewijał się razem z treścią zamiast zostawać przypiętym do viewportu i tworzyć twarde ucięcie koloru w połowie karty przy scrollu. */ html.ui-premium body.capsule-active { background-image: none; } html.ui-premium body.capsule-active .page-capsule { background-image: radial-gradient(1100px 520px at 50% -110px, var(--pm-bg-glow), transparent 70%); background-repeat: no-repeat; background-attachment: local; } /* ── Surfaces: panels and cards ── */ html.ui-premium :is(.settings-section, .theme-card, .button-style-card, .ms-tool-box, .sidebar) { background-image: linear-gradient(180deg, var(--pm-sheen), transparent 55%); box-shadow: var(--pm-lift), var(--pm-hairline); } /* ── Floating menus keep a deeper drop shadow than in-page cards ── */ html.ui-premium :is(.dropdown, .notif-panel, .suggestions-list) { background-image: linear-gradient(180deg, var(--pm-sheen), transparent 40%); box-shadow: var(--pm-float), var(--pm-hairline); } html.ui-premium :is(.theme-card, .button-style-card):hover { box-shadow: var(--pm-lift-hover), var(--pm-hairline); } html.ui-premium #resultsMain.web-results-mcard .result-card { background-image: linear-gradient(180deg, var(--pm-sheen), transparent 55%); box-shadow: var(--pm-lift), var(--pm-hairline); } html.ui-premium #resultsMain.web-results-mcard .result-card:hover { box-shadow: var(--pm-lift-hover), var(--pm-hairline); } /* ── Magazine web layout: plain cards + the accent-tinted featured card ── */ html.ui-premium #resultsMain.web-results-magazine .result-card { background-image: linear-gradient(180deg, var(--pm-sheen), transparent 55%); box-shadow: var(--pm-lift), var(--pm-hairline); } html.ui-premium #resultsMain.web-results-magazine .result-card:hover { box-shadow: var(--pm-lift-hover), var(--pm-hairline); } html.ui-premium #resultsMain.web-results-magazine .result-card-featured { background-image: linear-gradient(180deg, var(--pm-sheen), transparent 45%), linear-gradient(135deg, rgba(var(--primary), 0.07) 0%, rgba(var(--primary), 0.02) 100%); box-shadow: var(--pm-lift), var(--pm-hairline); } html.ui-premium #resultsMain.web-results-magazine .result-card-featured:hover { box-shadow: var(--pm-lift-hover), var(--pm-hairline); } html.ui-premium.dark #resultsMain.web-results-magazine .result-card-featured { background-image: linear-gradient(180deg, var(--pm-sheen), transparent 45%), linear-gradient(135deg, rgba(var(--primary), 0.12) 0%, rgba(var(--primary), 0.04) 100%); } /* ── Modern web layout: card only appears on hover, so lift it there ── */ html.ui-premium #resultsMain.web-results-modern .result-card:hover { background-image: linear-gradient(180deg, var(--pm-sheen), transparent 55%); box-shadow: var(--pm-lift), var(--pm-hairline); } /* ── Image grid cards ── */ html.ui-premium .image-card { background-image: linear-gradient(180deg, var(--pm-sheen), transparent 55%); box-shadow: var(--pm-small), var(--pm-hairline); transition: transform 0.2s, box-shadow 0.2s; } html.ui-premium .image-card:hover { box-shadow: var(--pm-lift-hover), var(--pm-hairline); } /* ── Video thumbnails: small raised frame ── */ html.ui-premium .video-thumb-wrap { box-shadow: var(--pm-small); } /* ── News cards: no background of their own, so give the divider a touch of depth ── */ html.ui-premium .news-card { box-shadow: 0 1px 0 rgba(20, 20, 30, .04); } html.ui-premium.dark .news-card { box-shadow: 0 1px 0 rgba(0, 0, 0, .3); } /* ── Related-search chips: small raised pill, accent on hover ── */ html.ui-premium .related-chip { background-color: rgb(var(--card)); background-image: linear-gradient(180deg, var(--pm-sheen), transparent 60%); box-shadow: var(--pm-small), var(--pm-hairline); } html.ui-premium .related-chip:hover { box-shadow: var(--pm-lift), var(--pm-hairline), 0 0 10px var(--pm-accent-soft); } /* ── AI summary box ── */ html.ui-premium .ai-response-box-inner { background-image: linear-gradient(180deg, var(--pm-sheen), transparent 45%); box-shadow: var(--pm-lift), var(--pm-hairline); } /* ── Floating sticky search capsule ── Shared verbatim with the landing page (landing.css), which has its own frozen --fsearch-* palette (not the user's --primary accent) and its own background/backdrop-filter. Only layer shadow and a sheen overlay here — never set background-color/-image directly on these, or we'd either wipe out the landing page's own fill or paint over it with a token (--primary, --muted) that page doesn't define. */ html.ui-premium .fsearch-inner-box { position: relative; isolation: isolate; box-shadow: var(--pm-float), var(--pm-hairline); } html.ui-premium .fsearch-inner-box::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-image: linear-gradient(180deg, var(--pm-sheen), transparent 40%); } html.ui-premium .fsearch-submit-trigger { position: relative; isolation: isolate; box-shadow: 0 1px 2px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .25); } html.ui-premium .fsearch-submit-trigger::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-image: linear-gradient(180deg, rgba(255, 255, 255, .3), transparent 60%); } html.ui-premium .fsearch-nav-btn { position: relative; isolation: isolate; box-shadow: var(--pm-small); } html.ui-premium .fsearch-nav-btn::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-image: linear-gradient(180deg, var(--pm-sheen), transparent 60%); } html.ui-premium .fsearch-nav-btn.is-active { box-shadow: 0 1px 2px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .25); } html.ui-premium .fsearch-nav-btn.is-active::before { background-image: linear-gradient(180deg, rgba(255, 255, 255, .3), transparent 60%); } /* ── Wikipedia infobox panel (wiki.js): floating card + its inner cards ── */ html.ui-premium #wiki-infobox { background-image: linear-gradient(180deg, var(--pm-sheen), transparent 35%); box-shadow: var(--pm-float), var(--pm-hairline); } html.ui-premium .wi-header-card, html.ui-premium .wi-desc-card { background-image: linear-gradient(180deg, var(--pm-sheen), transparent 55%); box-shadow: var(--pm-small), var(--pm-hairline); } html.ui-premium .wi-facts { box-shadow: var(--pm-small), var(--pm-hairline); } html.ui-premium .wi-fact-row { background-image: linear-gradient(180deg, var(--pm-sheen), transparent 65%); } html.ui-premium .wi-thumb { box-shadow: var(--pm-small); } html.ui-premium .wi-close { box-shadow: var(--pm-small); } html.ui-premium #wiki-mobile-btn { background-image: linear-gradient(155deg, var(--pm-accent-light), rgb(var(--primary))); box-shadow: var(--pm-float), inset 0 1px 0 rgba(255, 255, 255, .25); } /* ── Customize FAB ── */ html.ui-premium .customize-fab { background-image: linear-gradient(180deg, var(--pm-sheen), transparent 55%); box-shadow: var(--pm-float), var(--pm-hairline); } /* ── "Show more results" button (Mojeek) ── */ html.ui-premium .mojeek-show-more-btn { background-image: linear-gradient(180deg, var(--pm-sheen), transparent 60%); box-shadow: var(--pm-small), var(--pm-hairline); } html.ui-premium .mojeek-show-more-btn:hover:not(:disabled) { box-shadow: var(--pm-lift), var(--pm-hairline); } /* ── Domain info tooltip (domain-info.js): floating card, deeper shadow ── */ html.ui-premium .domain-tooltip-inner { background-image: linear-gradient(180deg, var(--pm-sheen), transparent 40%); box-shadow: var(--pm-float), var(--pm-hairline); } /* ── Primary buttons: accent gradient, top highlight, accent glow on hover ── .btn-primary is also used, unscoped, by the landing/pricing page (landing.css) with its own gradient (var(--accent) → var(--accent-hover)). Overwriting background-image here would blow that away, so on .btn-primary specifically we only add shadow/motion and layer the sheen as a ::before overlay instead of touching the element's own background. .ms-tool-btn has no page outside the app shell, so it keeps the simpler background-image treatment. */ html.ui-premium .ms-tool-btn { background-image: linear-gradient(155deg, var(--pm-accent-light), rgb(var(--primary))); box-shadow: 0 1px 2px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .25); transition: opacity .2s, border-radius .2s, clip-path .2s, transform .15s, box-shadow .2s; } html.ui-premium .btn-primary { position: relative; isolation: isolate; transition: opacity .2s, border-radius .2s, clip-path .2s, transform .15s, box-shadow .2s; } html.ui-premium .btn-primary::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-image: linear-gradient(180deg, rgba(255, 255, 255, .2), transparent 60%); } html.ui-premium :is(.btn-primary, .ms-tool-btn):hover { opacity: 1; transform: translateY(-1px); box-shadow: 0 6px 18px var(--pm-accent-glow), inset 0 1px 0 rgba(255, 255, 255, .3); } html.ui-premium :is(.btn-primary, .ms-tool-btn):active { transform: translateY(0) scale(.98); box-shadow: 0 1px 2px rgba(0, 0, 0, .14), inset 0 1px 3px rgba(0, 0, 0, .2); } /* ── Secondary / outline buttons: raised card-coloured key ── Same story: .btn-secondary is shared with landing.css, which gives it its own background (var(--bg-elevated)) and a hover state that swaps to var(--accent-soft). Don't set background-color/-image on .btn-secondary itself — only add the raised shadow, so the landing page keeps its own fill and hover tint untouched. */ html.ui-premium :is(.action-btn, .theme-switch-btn, .ms-tool-select, .ms-calc-key) { background-color: rgb(var(--card)); background-image: linear-gradient(180deg, var(--pm-sheen), transparent 60%); box-shadow: var(--pm-small), var(--pm-hairline); transition: background-color .2s, border-color .2s, border-radius .2s, clip-path .2s, transform .15s, box-shadow .2s; } html.ui-premium .btn-secondary { box-shadow: var(--pm-small), var(--pm-hairline); transition: background-color .2s, border-color .2s, border-radius .2s, clip-path .2s, transform .15s, box-shadow .2s; } html.ui-premium :is(.btn-secondary, .action-btn, .theme-switch-btn, .ms-calc-key):hover { transform: translateY(-1px); box-shadow: var(--pm-lift), var(--pm-hairline); } html.ui-premium :is(.btn-secondary, .action-btn, .theme-switch-btn, .ms-calc-key):active { transform: translateY(0) scale(.98); box-shadow: var(--pm-well); } /* ── Icon buttons: flat at rest, a small raised key on hover ── */ html.ui-premium :is(.icon-btn, .search-btn):hover { box-shadow: var(--pm-small), var(--pm-hairline); } /* ── Time filter pills: raised outline at rest, accent-gradient fill when active ── */ html.ui-premium .time-btn { background-color: rgb(var(--card)); background-image: linear-gradient(180deg, var(--pm-sheen), transparent 60%); box-shadow: var(--pm-small), var(--pm-hairline); } html.ui-premium .time-btn::before { background-image: linear-gradient(155deg, var(--pm-accent-light), rgb(var(--primary))); } html.ui-premium .time-btn.active { box-shadow: 0 1px 2px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .25); } /* ── Toggles: inset track, raised thumb, accent glow when on ── */ html.ui-premium .toggle-input { box-shadow: inset 0 0 0 1px rgb(var(--border)), var(--pm-well); } html.ui-premium .toggle-input::before { background-image: linear-gradient(180deg, #fff, #e9e9f0); box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 0 0 .5px rgba(0, 0, 0, .06); } html.ui-premium .toggle-input:checked { background-image: linear-gradient(155deg, var(--pm-accent-light), rgb(var(--primary))); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 12px var(--pm-accent-glow); } /* ── Inputs: recessed field, accent focus ring ── */ html.ui-premium :is(.ssb-input, .ms-tool-input) { box-shadow: var(--pm-well); } html.ui-premium :is(.ssb-input, .ms-tool-input):focus { box-shadow: var(--pm-well), 0 0 0 3px var(--pm-accent-soft); } html.ui-premium .search-input { background-image: linear-gradient(180deg, var(--pm-sheen), transparent 55%); box-shadow: var(--pm-lift), var(--pm-hairline); } html.ui-premium .search-input:focus { box-shadow: 0 0 0 3px var(--pm-accent-soft), 0 10px 26px -8px var(--pm-accent-glow); } html.ui-premium .search-header-input { background-image: linear-gradient(180deg, var(--pm-sheen), transparent 55%); box-shadow: var(--pm-lift), var(--pm-hairline); } html.ui-premium .search-header-input:focus { box-shadow: 0 0 0 3px var(--pm-accent-soft), 0 10px 26px -8px var(--pm-accent-glow); } html.ui-premium .search-submit { background-image: linear-gradient(155deg, var(--pm-accent-light), rgb(var(--primary))); box-shadow: 0 1px 2px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .25); } html.ui-premium .search-submit:hover { box-shadow: 0 6px 18px var(--pm-accent-glow), inset 0 1px 0 rgba(255, 255, 255, .3); } @media (prefers-reduced-motion: reduce) { html.ui-premium :is(.btn-primary, .ms-tool-btn, .btn-secondary, .action-btn, .theme-switch-btn, .ms-calc-key):is(:hover, :active) { transform: none; } } /* ══════════════════════════════════════════════════════════════════════════ Orbitarium Design additions Raised keys, rims, wells and solid accent fills from Orbitarium Design, mapped onto MevaSearch classes. Everything here targets app-only classes (checked: none of them appear on the landing pages / landing.css), except .btn-primary, which - as above - only gets neutral shadows, never a fill. Borders are never added or widened: rims and key edges are inset shadows, so nothing changes size. ══════════════════════════════════════════════════════════════════════════ */ html.ui-premium { --pm-c: rgb(var(--primary)); --pm-raise-top: rgb(var(--card)); --pm-raise-bottom: color-mix(in srgb, rgb(var(--card)) 95%, rgb(var(--fg))); --pm-raise-hover: color-mix(in srgb, rgb(var(--card)) 91%, rgb(var(--fg))); --pm-rim: rgba(255, 255, 255, .95); --pm-rim-shade: rgba(15, 23, 42, .07); --pm-inset: inset 0 1px 2px rgba(15, 23, 42, .08); --pm-c-ring: color-mix(in srgb, var(--pm-c) 22%, transparent); --pm-c-glow: color-mix(in srgb, var(--pm-c) 65%, transparent); /* Solid fill: darker top-left -> accent -> lighter bottom-right. */ --pm-solid: linear-gradient(155deg, color-mix(in srgb, var(--pm-c) 86%, black) 0%, var(--pm-c) 58%, color-mix(in srgb, var(--pm-c) 88%, white) 100%); --pm-solid-hover: linear-gradient(155deg, color-mix(in srgb, var(--pm-c) 92%, black) 0%, color-mix(in srgb, var(--pm-c) 94%, white) 58%, color-mix(in srgb, var(--pm-c) 80%, white) 100%); --pm-solid-press: linear-gradient(155deg, color-mix(in srgb, var(--pm-c) 82%, black) 0%, color-mix(in srgb, var(--pm-c) 92%, black) 100%); --pm-solid-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pm-c) 80%, white), inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 6px 8px -6px rgba(255, 255, 255, .3), inset 0 -2px 0 rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .18), 0 6px 14px -8px color-mix(in srgb, var(--pm-c) 75%, black); /* Same key edges without any accent colour - safe on pages without --primary. */ --pm-key-neutral: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 6px 8px -6px rgba(255, 255, 255, .3), inset 0 -2px 0 rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .18), 0 6px 14px -8px rgba(0, 0, 0, .35); } html.ui-premium.dark { --pm-raise-top: color-mix(in srgb, rgb(var(--card)) 92%, white); --pm-raise-bottom: rgb(var(--card)); --pm-raise-hover: color-mix(in srgb, rgb(var(--card)) 86%, white); --pm-rim: rgba(255, 255, 255, .08); --pm-rim-shade: rgba(0, 0, 0, .45); --pm-inset: inset 0 1px 2px rgba(0, 0, 0, .4); } /* ── Solid accent buttons (app-only) ── */ html.ui-premium :is(.ms-tool-btn, .confirm-btn-ok, .ms-calc-key.eq) { background-image: var(--pm-solid); box-shadow: var(--pm-solid-shadow); } html.ui-premium :is(.ms-tool-btn, .confirm-btn-ok, .ms-calc-key.eq):hover { opacity: 1; background-image: var(--pm-solid-hover); box-shadow: var(--pm-solid-shadow), 0 0 24px -6px var(--pm-c-glow); } html.ui-premium :is(.ms-tool-btn, .confirm-btn-ok, .ms-calc-key.eq):active { transform: translateY(1px); background-image: var(--pm-solid-press); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .22), inset 0 -1px 0 rgba(255, 255, 255, .12); } /* .btn-primary: keycap edges only (neutral colours, no fill) - see the note above. */ html.ui-premium .btn-primary { box-shadow: var(--pm-key-neutral); } html.ui-premium .btn-primary:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .22), inset 0 -1px 0 rgba(255, 255, 255, .12); } /* ── Raised keys (app-only secondary buttons) ── */ html.ui-premium :is(.action-btn, .theme-switch-btn, .ms-calc-key:not(.eq), .confirm-btn-cancel) { background-color: rgb(var(--card)); background-image: linear-gradient(180deg, var(--pm-raise-top), var(--pm-raise-bottom)); box-shadow: inset 0 1px 0 var(--pm-rim), inset 0 -1px 0 var(--pm-rim-shade), var(--pm-small); } html.ui-premium :is(.action-btn, .theme-switch-btn, .ms-calc-key:not(.eq), .confirm-btn-cancel):hover { background-image: linear-gradient(180deg, var(--pm-raise-top), var(--pm-raise-hover)); box-shadow: inset 0 1px 0 var(--pm-rim), inset 0 -1px 0 var(--pm-rim-shade), var(--pm-lift); } html.ui-premium :is(.action-btn, .theme-switch-btn, .ms-calc-key:not(.eq), .confirm-btn-cancel):active { transform: translateY(1px); background-image: linear-gradient(180deg, var(--pm-raise-bottom), var(--pm-raise-bottom)); box-shadow: inset 0 2px 4px var(--pm-rim-shade); } /* Keyboard-shortcuts page: keycaps with a thicker bottom edge */ html.ui-premium .keyshort-input { background-image: linear-gradient(180deg, var(--pm-raise-top), var(--pm-raise-bottom)); box-shadow: inset 0 1px 0 var(--pm-rim), inset 0 -2px 0 var(--pm-rim-shade), 0 1px 1px var(--pm-rim-shade); } html.ui-premium .keyshort-clear-btn:hover { background-image: linear-gradient(180deg, var(--pm-raise-top), var(--pm-raise-bottom)); box-shadow: inset 0 1px 0 var(--pm-rim), inset 0 -1px 0 var(--pm-rim-shade), var(--pm-small); } /* ── Selected cards: accent ring + glow ── */ html.ui-premium :is(.theme-card, .button-style-card):has(input:checked) { box-shadow: 0 0 0 3px var(--pm-c-ring), 0 0 22px -6px var(--pm-c-glow), var(--pm-lift), var(--pm-hairline); } /* ── Navigation and row icons: accent rim ── */ html.ui-premium .sidebar-nav a.active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pm-c) 18%, transparent), inset 0 1px 0 color-mix(in srgb, white 10%, transparent); } html.ui-premium .setting-row-icon { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pm-c) 20%, transparent), inset 0 1px 0 color-mix(in srgb, white 12%, transparent); } /* ── Switches: Orbitarium track and glossy thumb ── */ html.ui-premium .toggle-input { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .18), inset 0 0 0 1px rgb(var(--border)); } html.ui-premium .toggle-input::before { background-image: linear-gradient(180deg, #fff, #eef1f5); box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .12); } html.ui-premium .toggle-input:checked { background-image: linear-gradient(155deg, color-mix(in srgb, var(--pm-c) 86%, black), var(--pm-c)); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .22), 0 0 14px -2px color-mix(in srgb, var(--pm-c) 45%, transparent); } /* ── Radio dots on the choice cards ── */ html.ui-premium .theme-card-radio-dot { background-image: linear-gradient(180deg, var(--pm-raise-top), var(--pm-raise-bottom)); box-shadow: inset 0 1px 0 var(--pm-rim), 0 1px 1px var(--pm-rim-shade); } html.ui-premium .theme-card:has(input:checked) .theme-card-radio-dot { background-image: var(--pm-solid); box-shadow: inset 0 0 0 3px rgb(var(--card)), 0 2px 6px -2px var(--pm-c-glow); } /* ── Colour swatches: glossy dots ── */ html.ui-premium .color-swatch { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 3px rgba(0, 0, 0, .18), 0 1px 2px rgba(0, 0, 0, .2); } html.ui-premium .color-swatch.is-selected { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 2px rgb(var(--bg)), 0 0 0 4px rgb(var(--fg)); } /* ── Range sliders: inset track, glossy accent thumb ── */ html.ui-premium .range-input { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18); } html.ui-premium .range-input::-webkit-slider-thumb { background-image: var(--pm-solid); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pm-c) 80%, black), inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 6px -1px color-mix(in srgb, var(--pm-c) 70%, black); } html.ui-premium .range-input::-moz-range-thumb { background-image: var(--pm-solid); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pm-c) 80%, black), inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 6px -1px color-mix(in srgb, var(--pm-c) 70%, black); } /* ── Settings fields: recessed wells, accent focus ring ── */ html.ui-premium :is(.settings-section select, .settings-section textarea, .settings-section input[type="text"], .settings-section input[type="url"]) { box-shadow: var(--pm-inset); } html.ui-premium :is(.settings-section select, .settings-section textarea, .settings-section input[type="text"], .settings-section input[type="url"]):focus { border-color: var(--pm-c); box-shadow: 0 0 0 3px var(--pm-c-ring), inset 0 1px 2px rgba(0, 0, 0, .12); } /* ── Dialogs and the "saved" toast: floating layer with a top rim ── */ html.ui-premium :is(.confirm-box, .kids-modal) { box-shadow: var(--pm-float), inset 0 1px 0 var(--pm-rim); } /* The toast is inverted (background = text colour), so no card-coloured fill here - only the floating shadow and a faint top rim. */ html.ui-premium .toast { box-shadow: var(--pm-float), inset 0 1px 0 rgba(255, 255, 255, .12); } @media (prefers-reduced-motion: reduce) { html.ui-premium :is(.ms-tool-btn, .confirm-btn-ok, .ms-calc-key, .btn-primary, .action-btn, .theme-switch-btn, .confirm-btn-cancel):active { transform: none; } } /* ══════════════════════════════════════════════════════════════════════════ Orbitarium Design Animations (optional, Settings -> Appearance) Only active with : spring presses and lifts, a stretching switch thumb, popping radio dots, spring-in menus and dialogs, and cards that rise into place. Motion only - no colour or layout. Turned off completely under prefers-reduced-motion. ══════════════════════════════════════════════════════════════════════════ */ html.ui-premium-anim { --pm-ease-spring: cubic-bezier(.34, 1.56, .64, 1); --pm-ease-bounce: cubic-bezier(.18, 1.8, .4, 1); --pm-ease-out: cubic-bezier(.22, 1, .36, 1); --pm-dur-fast: 120ms; --pm-dur-spring: 420ms; } /* ── Buttons: lift on hover, springy press ── */ html.ui-premium-anim :is(.btn-primary, .btn-secondary, .action-btn, .theme-switch-btn, .ms-tool-btn, .ms-calc-key, .confirm-btn-ok, .confirm-btn-cancel, .time-btn, .related-chip, .keyshort-input, .mojeek-show-more-btn, .icon-btn, .search-btn) { transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, opacity .2s, border-radius .2s, clip-path .2s, transform var(--pm-dur-spring) var(--pm-ease-spring); } html.ui-premium-anim :is(.btn-primary, .btn-secondary, .action-btn, .theme-switch-btn, .ms-tool-btn, .ms-calc-key, .confirm-btn-ok, .confirm-btn-cancel, .time-btn, .related-chip, .keyshort-input, .mojeek-show-more-btn):hover { transform: translateY(-1px); } html.ui-premium-anim :is(.btn-primary, .btn-secondary, .action-btn, .theme-switch-btn, .ms-tool-btn, .ms-calc-key, .confirm-btn-ok, .confirm-btn-cancel, .time-btn, .related-chip, .keyshort-input, .mojeek-show-more-btn, .icon-btn, .search-btn):active { transform: scale(.96); transition-duration: .2s, .2s, .2s, .2s, .2s, .2s, .2s, var(--pm-dur-fast); } /* ── Choice cards: lift on hover, press in, radio dot pops when picked ── */ html.ui-premium-anim :is(.theme-card, .button-style-card) { transition: border-color .2s, box-shadow .2s, transform var(--pm-dur-spring) var(--pm-ease-spring); } html.ui-premium-anim :is(.theme-card, .button-style-card):hover { transform: translateY(-2px); } html.ui-premium-anim :is(.theme-card, .button-style-card):active { transform: scale(.98); } html.ui-premium-anim .theme-card:has(input:checked) .theme-card-radio-dot { animation: pm-dot-pop var(--pm-dur-spring) var(--pm-ease-bounce); } /* ── Sidebar links: springy press ── */ html.ui-premium-anim .sidebar-nav a { transition: background-color .15s, color .15s, transform var(--pm-dur-spring) var(--pm-ease-spring); } html.ui-premium-anim .sidebar-nav a:active { transform: scale(.96); } /* ── Switches: springy slide, thumb stretches while pressed ── */ html.ui-premium-anim .toggle-input::before { transition: left var(--pm-dur-spring) var(--pm-ease-spring), width var(--pm-dur-spring) var(--pm-ease-spring); } html.ui-premium-anim .toggle-input:active::before { width: 1.55rem; } html.ui-premium-anim .toggle-input:checked:active::before { left: 1.3rem; } /* ── Range sliders: thumb grows while dragged ── */ html.ui-premium-anim .range-input::-webkit-slider-thumb { transition: transform var(--pm-dur-spring) var(--pm-ease-spring); } html.ui-premium-anim .range-input::-moz-range-thumb { transition: transform var(--pm-dur-spring) var(--pm-ease-spring); } html.ui-premium-anim .range-input:active::-webkit-slider-thumb { transform: scale(1.25); } html.ui-premium-anim .range-input:active::-moz-range-thumb { transform: scale(1.25); } /* ── Menus and dialogs spring open ── */ /* Only the desktop pop-up menu (index.php, role="menu"). In mobile-app.php .dropdown is a side drawer hidden with translateX(-100%) - overriding its transform would leave it on screen, so the drawer only gets a smoother (non-overshooting) slide. */ html.ui-premium-anim .dropdown[role="menu"] { transform-origin: top left; transform: translateY(-4px) scale(.9); transition: opacity .2s, transform var(--pm-dur-spring) var(--pm-ease-spring); } html.ui-premium-anim .dropdown[role="menu"].open { transform: none; } html.ui-premium-anim .dropdown[role="dialog"] { transition: transform var(--pm-dur-spring) var(--pm-ease-out); } html.ui-premium-anim .suggestions-list { transition: opacity .18s, transform var(--pm-dur-spring) var(--pm-ease-spring); } html.ui-premium-anim .confirm-box { transform: translateY(20px) scale(.92); transition: transform var(--pm-dur-spring) var(--pm-ease-spring); } /* (.confirm-overlay.show .confirm-box is more specific and resets it to identity) */ /* ── Content rises into place: settings sections and result cards ── */ /* Results: only the loading skeletons (results.js renderSkeleton - .result-card wrapping .skeleton bars) rise in, one after another; the real results then simply replace them, with no animation of their own. */ html.ui-premium-anim #resultsMain .result-card:has(> .skeleton) { animation: pm-rise 640ms var(--pm-ease-spring) backwards; } html.ui-premium-anim #resultsMain .result-card:has(> .skeleton):nth-child(2) { animation-delay: 50ms; } html.ui-premium-anim #resultsMain .result-card:has(> .skeleton):nth-child(3) { animation-delay: 100ms; } html.ui-premium-anim #resultsMain .result-card:has(> .skeleton):nth-child(4) { animation-delay: 150ms; } html.ui-premium-anim #resultsMain .result-card:has(> .skeleton):nth-child(5) { animation-delay: 200ms; } html.ui-premium-anim #resultsMain .result-card:has(> .skeleton):nth-child(6) { animation-delay: 250ms; } html.ui-premium-anim #resultsMain .result-card:has(> .skeleton):nth-child(n+7) { animation-delay: 300ms; } html.ui-premium-anim .settings-section { animation: pm-rise 640ms var(--pm-ease-spring) backwards; } html.ui-premium-anim .settings-section:nth-of-type(2) { animation-delay: 40ms; } html.ui-premium-anim .settings-section:nth-of-type(3) { animation-delay: 80ms; } html.ui-premium-anim .settings-section:nth-of-type(n+4) { animation-delay: 120ms; } @keyframes pm-rise { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes pm-dot-pop { from { transform: scale(.4); } to { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { html.ui-premium-anim *, html.ui-premium-anim *::before, html.ui-premium-anim *::after { animation: none !important; transition-duration: .01ms !important; } } /* AI summary: the box grows open (js/results.js animateAiSummaryIn) while the card springs up out of a soft blur, then its content settles in just behind it. */ html.ui-premium-anim .ai-response-box-inner { animation: pm-ai-in 720ms var(--pm-ease-spring) both; transform-origin: 50% 0; } html.ui-premium-anim .ai-response-box-inner > * { animation: pm-ai-content 520ms var(--pm-ease-out) 160ms both; } @keyframes pm-ai-in { 0% { opacity: 0; transform: translateY(14px) scale(.96); filter: blur(8px); } 55% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: none; filter: none; } } @keyframes pm-ai-content { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html.ui-premium-anim .ai-response-box-inner, html.ui-premium-anim .ai-response-box-inner > * { animation: none; } } /* Sticky search capsule (results page): springs up from below with a slight overshoot, drops away quickly and softly, and its pills pop in one after another. No filter/blur here: it would break the capsule's backdrop-filter. */ html.ui-premium-anim #stickySearch { transform: translateX(-50%) translateY(110px) scale(.92); transform-origin: 50% 100%; transition: transform 320ms cubic-bezier(.4, 0, 1, 1), opacity 240ms ease; } html.ui-premium-anim #stickySearch.is-active { transform: translateX(-50%) translateY(0) scale(1); transition: transform 640ms var(--pm-ease-spring), opacity 280ms ease; } /* Landing page: hidden while its mobile nav is open (landing.css). */ html.ui-premium-anim #stickySearch.is-active.nav-open { transform: translateX(-50%) translateY(110px) scale(.92); transition: transform 320ms cubic-bezier(.4, 0, 1, 1), opacity 240ms ease; } html.ui-premium-anim #stickySearch.is-active .fsearch-submit-trigger { animation: pm-sticky-pop 520ms var(--pm-ease-spring) 90ms backwards; } html.ui-premium-anim #stickySearch.is-active .fsearch-nav-btn { animation: pm-sticky-pop 480ms var(--pm-ease-spring) 120ms backwards; } html.ui-premium-anim #stickySearch.is-active .fsearch-nav-btn:nth-child(2) { animation-delay: 160ms; } html.ui-premium-anim #stickySearch.is-active .fsearch-nav-btn:nth-child(3) { animation-delay: 200ms; } html.ui-premium-anim #stickySearch.is-active .fsearch-nav-btn:nth-child(4) { animation-delay: 240ms; } @keyframes pm-sticky-pop { from { opacity: 0; transform: translateY(8px) scale(.8); } to { opacity: 1; transform: none; } } html.ui-premium-anim #stickySearch :is(.fsearch-submit-trigger, .fsearch-nav-btn) { transition: transform var(--pm-dur-spring) var(--pm-ease-spring), background-color 200ms ease; } html.ui-premium-anim #stickySearch .fsearch-submit-trigger:hover { transform: scale(1.07); } html.ui-premium-anim #stickySearch .fsearch-nav-btn:hover { transform: translateY(-2px); } html.ui-premium-anim #stickySearch :is(.fsearch-submit-trigger, .fsearch-nav-btn):active { transform: scale(.92); transition-duration: 90ms; } @media (prefers-reduced-motion: reduce) { html.ui-premium-anim #stickySearch, html.ui-premium-anim #stickySearch.is-active { transform: translateX(-50%); transition: opacity 200ms ease; } html.ui-premium-anim #stickySearch :is(.fsearch-submit-trigger, .fsearch-nav-btn) { animation: none; transform: none; transition: none; } } /* ══════════════════════════════════════════════════════════════════════════ Notifications overlay (css/notif.css, js/notif.js) - Orbitarium Design ══════════════════════════════════════════════════════════════════════════ */ html.ui-premium .notif-overlay { background: rgba(0, 0, 0, .42); backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); } html.ui-premium .notif-overlay-inner { background-image: linear-gradient(180deg, var(--pm-sheen), transparent 30%); box-shadow: var(--pm-float), 0 30px 80px -20px rgba(0, 0, 0, .35), inset 0 1px 0 var(--pm-rim); } html.ui-premium .notif-overlay-header { background-image: linear-gradient(180deg, color-mix(in srgb, var(--pm-c) 6%, transparent), transparent); } /* Close: a round raised key */ html.ui-premium .notif-overlay-close { background-color: rgb(var(--card)); background-image: linear-gradient(180deg, var(--pm-raise-top), var(--pm-raise-bottom)); box-shadow: inset 0 1px 0 var(--pm-rim), inset 0 -1px 0 var(--pm-rim-shade), var(--pm-small); } html.ui-premium .notif-overlay-close:hover { background-image: linear-gradient(180deg, var(--pm-raise-top), var(--pm-raise-hover)); box-shadow: inset 0 1px 0 var(--pm-rim), inset 0 -1px 0 var(--pm-rim-shade), var(--pm-lift); } html.ui-premium .notif-overlay-close:active { background-image: linear-gradient(180deg, var(--pm-raise-bottom), var(--pm-raise-bottom)); box-shadow: inset 0 2px 4px var(--pm-rim-shade); } /* "Mark as read": a soft accent pill */ html.ui-premium .notif-overlay-mark { padding: .4rem .8rem; margin: -.4rem 0; border-radius: 999px; transition: background-color .2s, color .2s, box-shadow .2s; } html.ui-premium .notif-overlay-mark:hover { background: color-mix(in srgb, var(--pm-c) 10%, transparent); box-shadow: inset 0 0 0 1px var(--pm-c-ring); } /* List: sunken column, items light up; the open one gets an accent bar */ html.ui-premium .notif-overlay-list { background-image: linear-gradient(90deg, transparent 70%, color-mix(in srgb, rgb(var(--fg)) 3%, transparent)); } html.ui-premium .notif-item { position: relative; } html.ui-premium .notif-item:hover, html.ui-premium .notif-item:focus-visible { background: color-mix(in srgb, rgb(var(--fg)) 5%, transparent); } html.ui-premium .notif-item.notif-unread { background: color-mix(in srgb, var(--pm-c) 6%, transparent); } html.ui-premium .notif-item.notif-item-active { background: linear-gradient(90deg, color-mix(in srgb, var(--pm-c) 16%, transparent), color-mix(in srgb, var(--pm-c) 5%, transparent)); box-shadow: inset 3px 0 0 var(--pm-c); } html.ui-premium .notif-item.notif-item-active .notif-item-icon-wrap { color: var(--pm-c); } html.ui-premium .notif-unread-dot { box-shadow: 0 0 0 3px var(--pm-c-ring), 0 0 8px var(--pm-c-glow); } /* Preview: the icon sits on a raised accent tile */ html.ui-premium .notif-preview-icon { width: 34px; height: 34px; padding: 7px; margin-right: .75rem; box-sizing: border-box; border-radius: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--pm-c) 18%, transparent), color-mix(in srgb, var(--pm-c) 8%, transparent)); box-shadow: inset 0 1px 0 var(--pm-rim), inset 0 0 0 1px var(--pm-c-ring), var(--pm-small); } html.ui-premium .notif-preview-icon:has(img) { padding: 0; background: none; } html.ui-premium .notif-preview-icon img { width: 34px; height: 34px; border-radius: 10px; } html.ui-premium .notif-preview-date { display: inline-block; padding: .2rem .6rem; border-radius: 999px; background: color-mix(in srgb, rgb(var(--fg)) 5%, transparent); box-shadow: var(--pm-inset); } html.ui-premium .notif-preview-link { padding: .55rem 1.1rem; border-radius: 999px; color: #fff; background-color: var(--pm-c); background-image: var(--pm-solid); box-shadow: var(--pm-solid-shadow); } html.ui-premium .notif-preview-link:hover { text-decoration: none; background-image: var(--pm-solid-hover); box-shadow: var(--pm-solid-shadow), 0 0 24px -6px var(--pm-c-glow); } html.ui-premium .notif-preview-action-btn { background-image: linear-gradient(180deg, var(--pm-raise-top), var(--pm-raise-bottom)); box-shadow: inset 0 1px 0 var(--pm-rim), inset 0 -1px 0 var(--pm-rim-shade), var(--pm-small); } html.ui-premium .notif-preview-action-btn:hover { background-image: linear-gradient(180deg, var(--pm-raise-top), var(--pm-raise-hover)); box-shadow: inset 0 1px 0 var(--pm-rim), inset 0 -1px 0 var(--pm-rim-shade), var(--pm-lift); } html.ui-premium .notif-preview-action-primary, html.ui-premium .notif-preview-action-primary:hover { color: #fff; border-color: transparent; background-image: var(--pm-solid); box-shadow: var(--pm-solid-shadow); } html.ui-premium .notif-preview-action-primary:hover { filter: none; background-image: var(--pm-solid-hover); box-shadow: var(--pm-solid-shadow), 0 0 24px -6px var(--pm-c-glow); } /* ── Notifications overlay: Orbitarium Design Animations ── */ /* Opening: the backdrop fades in, the window springs up out of a blur, the list items cascade in. Closing (.notif-overlay-closing, js/notif.js) plays it backwards, quickly. Picking a notification slides its preview in. */ html.ui-premium-anim .notif-overlay.notif-overlay-show { animation: pm-notif-fade 260ms ease both; } html.ui-premium-anim .notif-overlay-inner { animation: pm-notif-in 620ms var(--pm-ease-spring) both; } html.ui-premium-anim .notif-overlay.notif-overlay-closing { animation: pm-notif-fade 220ms ease reverse both; } html.ui-premium-anim .notif-overlay.notif-overlay-closing .notif-overlay-inner { animation: pm-notif-out 220ms cubic-bezier(.4, 0, 1, 1) both; } html.ui-premium-anim .notif-item-animate { animation: pm-notif-item 520ms var(--pm-ease-spring) backwards; } html.ui-premium-anim .notif-overlay-preview > * { animation: pm-notif-content 440ms var(--pm-ease-out) backwards; } html.ui-premium-anim .notif-overlay-preview > :nth-child(2) { animation-delay: 30ms; } html.ui-premium-anim .notif-overlay-preview > :nth-child(3) { animation-delay: 60ms; } html.ui-premium-anim .notif-overlay-preview > :nth-child(n+4) { animation-delay: 90ms; } html.ui-premium-anim .notif-item { transition: background-color .2s, box-shadow .25s var(--pm-ease-out); } html.ui-premium-anim .notif-item:active { transform: scale(.985); } html.ui-premium-anim :is(.notif-overlay-close, .notif-preview-link, .notif-preview-action-btn) { transition: background-color .2s, box-shadow .2s, transform var(--pm-dur-spring) var(--pm-ease-spring); } html.ui-premium-anim .notif-overlay-close:hover { transform: rotate(90deg); } html.ui-premium-anim :is(.notif-preview-link, .notif-preview-action-btn):hover { transform: translateY(-1px); } html.ui-premium-anim :is(.notif-overlay-close, .notif-preview-link, .notif-preview-action-btn):active { transform: scale(.92); transition-duration: .2s, .2s, var(--pm-dur-fast); } @keyframes pm-notif-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes pm-notif-in { 0% { opacity: 0; transform: translateY(28px) scale(.94); filter: blur(10px); } 50% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: none; filter: none; } } @keyframes pm-notif-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(16px) scale(.96); } } @keyframes pm-notif-item { from { opacity: 0; transform: translateX(-14px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes pm-notif-content { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (max-width: 680px) { /* Full-screen sheet on phones: slides up instead of popping */ @keyframes pm-notif-in { from { transform: translateY(100%); } to { transform: none; } } html.ui-premium-anim .notif-overlay-inner { animation: pm-notif-in 520ms var(--pm-ease-out) both; } html.ui-premium-anim .notif-overlay-preview { transition: transform 460ms var(--pm-ease-out); } } @media (prefers-reduced-motion: reduce) { html.ui-premium-anim :is(.notif-overlay, .notif-overlay-inner, .notif-item, .notif-overlay-preview > *) { animation: none !important; } } /* ── MevaSearch AI chat (ai-search.php): follow-up chips and "New chat" as raised keys ── */ html.ui-premium :is(.ai-followup-chip, .chat-new-btn) { background-color: rgb(var(--card)); background-image: linear-gradient(180deg, var(--pm-raise-top), var(--pm-raise-bottom)); box-shadow: inset 0 1px 0 var(--pm-rim), inset 0 -1px 0 var(--pm-rim-shade), var(--pm-small); } html.ui-premium :is(.ai-followup-chip, .chat-new-btn):hover { background-image: linear-gradient(180deg, var(--pm-raise-top), var(--pm-raise-hover)); box-shadow: inset 0 1px 0 var(--pm-rim), inset 0 -1px 0 var(--pm-rim-shade), var(--pm-lift), 0 0 0 3px var(--pm-c-ring); } html.ui-premium .ai-answer-text .ai-cite:hover { background-image: var(--pm-solid); box-shadow: var(--pm-solid-shadow); } html.ui-premium-anim :is(.ai-followup-chip, .chat-new-btn, .ai-answer-text .ai-cite) { transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform var(--pm-dur-spring) var(--pm-ease-spring); } html.ui-premium-anim :is(.ai-followup-chip, .chat-new-btn):hover { transform: translateY(-2px); } html.ui-premium-anim .ai-answer-text .ai-cite:hover { transform: scale(1.15); } html.ui-premium-anim :is(.ai-followup-chip, .chat-new-btn):active { transform: scale(.95); transition-duration: .2s, .2s, .2s, .2s, var(--pm-dur-fast); } html.ui-premium-anim .ai-followups.is-visible .ai-followup-chip { animation: pm-sticky-pop 480ms var(--pm-ease-spring) backwards; } html.ui-premium-anim .ai-followups.is-visible .ai-followup-chip:nth-child(3) { animation-delay: 60ms; } html.ui-premium-anim .ai-followups.is-visible .ai-followup-chip:nth-child(4) { animation-delay: 120ms; } @media (prefers-reduced-motion: reduce) { html.ui-premium-anim .ai-followups.is-visible .ai-followup-chip { animation: none; } } /* ══════════════════════════════════════════════════════════════════════════ Mobile app (mobile-app.php) - Orbitarium Design Its own light UI: the home search bar, the full-screen search sheet (#searchSheet) and the side drawer (.dropdown[role="dialog"]). ══════════════════════════════════════════════════════════════════════════ */ /* Header: a hairline of light under the frosted bar */ html.ui-premium body:has(#searchSheet) .header { box-shadow: inset 0 -1px 0 color-mix(in srgb, rgb(var(--border)) 70%, transparent); } /* ── Home search bar: a raised pill with a sheen ── */ html.ui-premium .search-trigger-bar { background-image: linear-gradient(180deg, var(--pm-sheen), transparent 60%); box-shadow: var(--pm-lift), var(--pm-hairline); } html.ui-premium .search-wrap:active .search-trigger-bar { box-shadow: var(--pm-lift), var(--pm-hairline), 0 0 0 3px var(--pm-c-ring); } /* Accent buttons: solid keys */ html.ui-premium :is(.search-btn-submit, .ss-submit-btn) { background-color: var(--pm-c); background-image: var(--pm-solid); box-shadow: var(--pm-solid-shadow); } html.ui-premium :is(.search-btn-submit, .ss-submit-btn):active { opacity: 1; background-image: var(--pm-solid-press); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .22), inset 0 -1px 0 rgba(255, 255, 255, .12); } /* Round secondary buttons: raised keys */ html.ui-premium :is(.ss-back-btn, .drawer-close) { background-color: rgb(var(--card)); background-image: linear-gradient(180deg, var(--pm-raise-top), var(--pm-raise-bottom)); box-shadow: inset 0 1px 0 var(--pm-rim), inset 0 -1px 0 var(--pm-rim-shade), var(--pm-small); } html.ui-premium :is(.ss-back-btn, .drawer-close):active { background-image: linear-gradient(180deg, var(--pm-raise-bottom), var(--pm-raise-bottom)); box-shadow: inset 0 2px 4px var(--pm-rim-shade); } /* ── Search sheet ── */ html.ui-premium #searchSheet.open { box-shadow: 0 -10px 40px rgba(0, 0, 0, .18), inset 0 1px 0 var(--pm-rim); } html.ui-premium .ss-topbar { background-image: linear-gradient(180deg, var(--pm-sheen), transparent 70%); box-shadow: var(--pm-small); } /* The input sits in a soft well */ html.ui-premium #searchInput { box-shadow: var(--pm-well); } html.ui-premium #searchInput:focus { box-shadow: var(--pm-well), 0 0 0 3px var(--pm-c-ring); } /* Suggestion icons on small raised tiles */ html.ui-premium #suggestionsList li .sg-icon { background-image: linear-gradient(180deg, var(--pm-raise-top), var(--pm-raise-bottom)); box-shadow: inset 0 1px 0 var(--pm-rim), inset 0 -1px 0 var(--pm-rim-shade), var(--pm-small); } html.ui-premium .ss-start-logo { text-shadow: 0 8px 30px var(--pm-accent-soft); } /* ── Side drawer ── */ /* The generic floating-menu shadow would peek out from behind the closed drawer (it is only moved off-screen), so it gets its shadow only while open. */ html.ui-premium .dropdown[role="dialog"] { box-shadow: none; } html.ui-premium .dropdown[role="dialog"].open { box-shadow: 12px 0 40px rgba(0, 0, 0, .22), var(--pm-hairline); } html.ui-premium .dropdown[role="dialog"] .drawer-head { background-image: linear-gradient(180deg, color-mix(in srgb, var(--pm-c) 7%, transparent), transparent); } html.ui-premium .dropdown[role="dialog"] .drawer-section-label { color: color-mix(in srgb, var(--pm-c) 70%, rgb(var(--muted-fg))); } /* :not(.logout-item) - the red "Log out" row keeps its own danger colours (mobile-app.php). Tiles are tinted with the user's accent and the icon takes the accent colour; on press the tile turns into a solid accent key with a white icon. */ html.ui-premium .dropdown[role="dialog"] .dropdown-item:not(.logout-item) .item-icon { background-color: rgb(var(--card)); background-image: linear-gradient(180deg, color-mix(in srgb, var(--pm-c) 16%, var(--pm-raise-top)), color-mix(in srgb, var(--pm-c) 8%, var(--pm-raise-bottom))); box-shadow: inset 0 1px 0 var(--pm-rim), inset 0 0 0 1px var(--pm-c-ring), var(--pm-small); } html.ui-premium .dropdown[role="dialog"] .dropdown-item:not(.logout-item) .item-icon svg { stroke: var(--pm-c); } html.ui-premium .dropdown[role="dialog"] .dropdown-item:not(.logout-item):active { background: color-mix(in srgb, var(--pm-c) 10%, transparent); } html.ui-premium .dropdown[role="dialog"] .dropdown-item:not(.logout-item):active .item-icon { background-image: var(--pm-solid); box-shadow: var(--pm-solid-shadow); } html.ui-premium .dropdown[role="dialog"] .dropdown-item:not(.logout-item):active .item-icon svg { stroke: #fff; } /* ── Mobile app: Orbitarium Design Animations ── */ html.ui-premium-anim :is(.search-trigger-bar, .search-btn, .ss-pill-btn, .ss-back-btn, .drawer-close, .icon-btn, .dropdown[role="dialog"] .dropdown-item, .dropdown[role="dialog"] .item-icon) { transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, opacity .2s, transform var(--pm-dur-spring) var(--pm-ease-spring); } /* Press in on touch, spring back on release */ html.ui-premium-anim .search-wrap:active .search-trigger-bar { transform: scale(.975); } html.ui-premium-anim :is(.search-btn, .ss-pill-btn, .ss-back-btn, .drawer-close, .icon-btn):active { transform: scale(.86); transition-duration: .2s, .2s, .2s, .2s, .2s, var(--pm-dur-fast); } html.ui-premium-anim .dropdown[role="dialog"] .dropdown-item:active { transform: scale(.97); } html.ui-premium-anim .dropdown[role="dialog"] .dropdown-item:active .item-icon { transform: scale(1.1) rotate(-4deg); } /* Drawer: slides in with a slight settle, its items cascade in */ html.ui-premium-anim .dropdown[role="dialog"].open .drawer-scroll > * { animation: pm-drawer-item 460ms var(--pm-ease-spring) backwards; } html.ui-premium-anim .dropdown[role="dialog"].open .drawer-scroll > :nth-child(2) { animation-delay: 30ms; } html.ui-premium-anim .dropdown[role="dialog"].open .drawer-scroll > :nth-child(3) { animation-delay: 60ms; } html.ui-premium-anim .dropdown[role="dialog"].open .drawer-scroll > :nth-child(4) { animation-delay: 90ms; } html.ui-premium-anim .dropdown[role="dialog"].open .drawer-scroll > :nth-child(5) { animation-delay: 120ms; } html.ui-premium-anim .dropdown[role="dialog"].open .drawer-scroll > :nth-child(6) { animation-delay: 150ms; } html.ui-premium-anim .dropdown[role="dialog"].open .drawer-scroll > :nth-child(7) { animation-delay: 180ms; } html.ui-premium-anim .dropdown[role="dialog"].open .drawer-scroll > :nth-child(n+8) { animation-delay: 210ms; } @keyframes pm-drawer-item { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } } /* Search sheet: the search pill and the start screen rise in as the sheet opens */ html.ui-premium-anim #searchSheet.open .ss-topbar-inner { animation: pm-sheet-in 520ms var(--pm-ease-spring) 60ms backwards; } html.ui-premium-anim #searchSheet.open .ss-start-screen { animation: pm-sheet-in 640ms var(--pm-ease-spring) 140ms backwards; } @keyframes pm-sheet-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } } /* Submit key pops when the sheet opens */ html.ui-premium-anim #searchSheet.open .ss-submit-btn { animation: pm-sticky-pop 480ms var(--pm-ease-spring) 220ms backwards; } @media (prefers-reduced-motion: reduce) { html.ui-premium-anim :is(.dropdown[role="dialog"].open .drawer-scroll > *, #searchSheet.open .ss-topbar-inner, #searchSheet.open .ss-start-screen, #searchSheet.open .ss-submit-btn) { animation: none; } } /* ══════════════════════════════════════════════════════════════════════════ MevaSearch AI chat (ai-search.php) - Orbitarium Design ══════════════════════════════════════════════════════════════════════════ */ /* User messages: a solid accent key */ html.ui-premium .chat-user-msg { background-image: var(--pm-solid); box-shadow: var(--pm-solid-shadow); } /* AI answers and the typing indicator: floating cards with a sheen */ html.ui-premium :is(.chat-ai-bubble .ai-response-box-inner, .chat-typing) { background-image: linear-gradient(180deg, var(--pm-sheen), transparent 40%); box-shadow: var(--pm-lift), var(--pm-hairline); } html.ui-premium .chat-ai-bubble .error-msg { box-shadow: var(--pm-small), var(--pm-hairline); } html.ui-premium .chat-typing span { background: var(--pm-c); } /* Source cards light up on hover */ html.ui-premium .ai-source-card:hover { background: color-mix(in srgb, var(--pm-c) 6%, transparent); box-shadow: inset 0 0 0 1px var(--pm-c-ring); } /* Composer: a raised capsule, the send button a solid key */ html.ui-premium .chat-input-wrap { background-image: linear-gradient(180deg, var(--pm-sheen), transparent 60%); box-shadow: var(--pm-float), var(--pm-hairline); } html.ui-premium .chat-input-wrap:focus-within { box-shadow: var(--pm-float), var(--pm-hairline), 0 0 0 3px var(--pm-c-ring); } html.ui-premium .chat-send-btn:not(:disabled) { background-image: var(--pm-solid); box-shadow: var(--pm-solid-shadow); } html.ui-premium .chat-send-btn:hover:not(:disabled) { opacity: 1; background-image: var(--pm-solid-hover); box-shadow: var(--pm-solid-shadow), 0 0 22px -6px var(--pm-c-glow); } html.ui-premium .chat-send-btn:active:not(:disabled) { background-image: var(--pm-solid-press); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .22); } html.ui-premium .chat-empty-icon { filter: drop-shadow(0 0 24px var(--pm-c-glow)); } /* ── AI chat: Orbitarium Design Animations ── */ /* Messages pop in: the user's from the right, the AI's from the left */ html.ui-premium-anim .chat-turn { animation: none; } html.ui-premium-anim .chat-user-msg { transform-origin: 100% 100%; animation: pm-msg-user 460ms var(--pm-ease-spring) backwards; } html.ui-premium-anim .chat-ai-bubble, html.ui-premium-anim .chat-typing { transform-origin: 0 0; animation: pm-msg-ai 560ms var(--pm-ease-spring) backwards; } html.ui-premium-anim .chat-ai-bubble .ai-response-box-inner { animation: none; } html.ui-premium-anim .ai-answer-after:not([style*="none"]) > * { animation: pm-sheet-in 480ms var(--pm-ease-spring) backwards; } html.ui-premium-anim .ai-answer-after > :nth-child(2) { animation-delay: 80ms; } html.ui-premium-anim .chat-empty-state { animation: pm-sheet-in 700ms var(--pm-ease-spring) backwards; } html.ui-premium-anim .chat-empty-icon { animation: pm-ai-float 4s ease-in-out infinite; } html.ui-premium-anim .chat-send-btn { transition: opacity .2s, background-color .2s, box-shadow .2s, transform var(--pm-dur-spring) var(--pm-ease-spring); } html.ui-premium-anim .chat-send-btn:hover:not(:disabled) { transform: translateY(-1px) rotate(-8deg); } html.ui-premium-anim .chat-send-btn:active:not(:disabled) { transform: scale(.86); transition-duration: .2s, .2s, .2s, var(--pm-dur-fast); } html.ui-premium-anim .chat-input-wrap { transition: border-color .25s, box-shadow .25s, transform var(--pm-dur-spring) var(--pm-ease-spring); } html.ui-premium-anim .chat-input-wrap:focus-within { transform: translateY(-2px); } html.ui-premium-anim .chat-memory-bar:not([hidden]) { animation: pm-sheet-in 420ms var(--pm-ease-spring) backwards; } @keyframes pm-msg-user { from { opacity: 0; transform: translateX(18px) scale(.9); } to { opacity: 1; transform: none; } } @keyframes pm-msg-ai { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } } @keyframes pm-ai-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* ══════════════════════════════════════════════════════════════════════════ Voice search (voice.php) - Orbitarium Design The page keeps its own orange voice colour (currentColor on the mic). ══════════════════════════════════════════════════════════════════════════ */ /* The microphone: a big raised key */ html.ui-premium .voice-mic-btn { background-image: radial-gradient(circle at 50% 30%, var(--pm-raise-top), var(--pm-raise-bottom) 75%); box-shadow: inset 0 1px 0 var(--pm-rim), inset 0 -3px 0 var(--pm-rim-shade), 0 2px 4px rgba(0, 0, 0, .08), 0 18px 40px -12px rgba(0, 0, 0, .3); } html.ui-premium .voice-mic-btn:active { box-shadow: inset 0 3px 8px var(--pm-rim-shade), 0 2px 4px rgba(0, 0, 0, .08); } /* Listening: the key glows in the voice colour */ html.ui-premium .voice-mic-btn.listening { box-shadow: inset 0 1px 0 var(--pm-rim), inset 0 -3px 0 var(--pm-rim-shade), 0 0 0 6px color-mix(in srgb, currentColor 14%, transparent), 0 0 44px -6px color-mix(in srgb, currentColor 70%, transparent); } /* Hint pill, back button and header icons */ html.ui-premium .voice-hint { background-image: linear-gradient(180deg, var(--pm-sheen), transparent 60%); box-shadow: var(--pm-lift), var(--pm-hairline); } html.ui-premium .btn-back { background-image: linear-gradient(180deg, var(--pm-raise-top), var(--pm-raise-bottom)); box-shadow: inset 0 1px 0 var(--pm-rim), inset 0 -1px 0 var(--pm-rim-shade), var(--pm-small); } html.ui-premium .btn-back:hover { background-image: linear-gradient(180deg, var(--pm-raise-top), var(--pm-raise-hover)); box-shadow: inset 0 1px 0 var(--pm-rim), inset 0 -1px 0 var(--pm-rim-shade), var(--pm-lift); } html.ui-premium .voice-status-text { text-shadow: 0 10px 40px var(--pm-accent-soft); } /* ── Voice search: Orbitarium Design Animations ── */ html.ui-premium-anim .voice-mic-btn { transition: border-color .3s, box-shadow .35s, transform 560ms var(--pm-ease-bounce); } html.ui-premium-anim .voice-mic-btn:hover:not(.listening) { transform: translateY(-3px) scale(1.04); } html.ui-premium-anim .voice-mic-btn:active { transform: scale(.9); transition-duration: .3s, .35s, var(--pm-dur-fast); } html.ui-premium-anim .voice-mic-btn.listening { transform: scale(1.14); } /* Idle: the key breathes gently */ html.ui-premium-anim .voice-mic-btn:not(.listening) .mic-icon { animation: pm-ai-float 3.2s ease-in-out infinite; } /* The status line and the hint rise in on load; every new transcript pops */ html.ui-premium-anim .voice-status-box, html.ui-premium-anim .voice-hint { animation: pm-sheet-in 700ms var(--pm-ease-spring) backwards; } html.ui-premium-anim .voice-hint { animation-delay: 160ms; } html.ui-premium-anim .voice-mic-container { animation: pm-voice-in 800ms var(--pm-ease-bounce) 60ms backwards; } html.ui-premium-anim .transcript-active { animation: pm-sticky-pop 420ms var(--pm-ease-spring); } html.ui-premium-anim .btn-back { transition: background-color .2s, box-shadow .2s, transform var(--pm-dur-spring) var(--pm-ease-spring); } html.ui-premium-anim .btn-back:hover { transform: translateX(-2px); } html.ui-premium-anim .btn-back:active { transform: scale(.94); } @keyframes pm-voice-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html.ui-premium-anim :is(.chat-user-msg, .chat-ai-bubble, .chat-typing, .ai-answer-after > *, .chat-empty-state, .chat-empty-icon, .chat-memory-bar, .mic-icon, .voice-status-box, .voice-hint, .voice-mic-container, .transcript-active) { animation: none; } } /* ══════════════════════════════════════════════════════════════════════════ Wikipedia panel (js/wiki.js) - Orbitarium Design Animations Desktop: the floating card springs in from the right. Up to 1570px it is a bottom sheet - that one glides up without overshoot (an overshoot would open a gap under it). Its content then cascades in, fact rows one by one. ══════════════════════════════════════════════════════════════════════════ */ html.ui-premium-anim #wiki-infobox { transition: opacity .3s ease, transform 640ms var(--pm-ease-spring); } html.ui-premium-anim #wiki-infobox.wi-closing { transition: opacity .26s ease, transform .32s cubic-bezier(.4, 0, 1, 1); } @media (max-width: 1570px) { html.ui-premium-anim #wiki-infobox { transition: opacity .3s ease, transform 520ms var(--pm-ease-out); } } html.ui-premium-anim #wiki-infobox.wi-visible #wikiContent > * { animation: pm-sheet-in 520ms var(--pm-ease-spring) backwards; } html.ui-premium-anim #wiki-infobox.wi-visible #wikiContent > :nth-child(1) { animation-delay: 90ms; } html.ui-premium-anim #wiki-infobox.wi-visible #wikiContent > :nth-child(2) { animation-delay: 150ms; } html.ui-premium-anim #wiki-infobox.wi-visible #wikiContent > :nth-child(3) { animation-delay: 210ms; } html.ui-premium-anim #wiki-infobox.wi-visible #wikiContent > :nth-child(n+4) { animation-delay: 270ms; } html.ui-premium-anim #wiki-infobox.wi-visible .wi-fact-row { animation: pm-drawer-item 460ms var(--pm-ease-spring) backwards; } html.ui-premium-anim #wiki-infobox.wi-visible .wi-fact-row:nth-child(1) { animation-delay: 260ms; } html.ui-premium-anim #wiki-infobox.wi-visible .wi-fact-row:nth-child(2) { animation-delay: 300ms; } html.ui-premium-anim #wiki-infobox.wi-visible .wi-fact-row:nth-child(3) { animation-delay: 340ms; } html.ui-premium-anim #wiki-infobox.wi-visible .wi-fact-row:nth-child(4) { animation-delay: 380ms; } html.ui-premium-anim #wiki-infobox.wi-visible .wi-fact-row:nth-child(n+5) { animation-delay: 420ms; } /* The photo pops in once it has loaded */ html.ui-premium-anim .wi-thumb { transform: scale(.85); transition: opacity .4s ease, transform 560ms var(--pm-ease-bounce); } html.ui-premium-anim .wi-thumb.loaded { transform: none; } /* Close, link and the mobile button */ html.ui-premium-anim :is(.wi-close, .wi-link) { transition: background-color .2s, color .2s, opacity .2s, transform var(--pm-dur-spring) var(--pm-ease-spring); } html.ui-premium-anim .wi-close:hover { transform: rotate(90deg); } html.ui-premium-anim .wi-close:active { transform: rotate(90deg) scale(.85); } html.ui-premium-anim .wi-link:hover { transform: translateX(3px); } html.ui-premium-anim #wiki-mobile-btn { transition: opacity .3s ease, box-shadow .2s, transform 560ms var(--pm-ease-bounce); } html.ui-premium-anim #wiki-mobile-btn.btn-visible:active { transform: scale(.88); transition-duration: .3s, .2s, var(--pm-dur-fast); }