/* Perecle design tokens + styles (spec §13, design/Perecle.html, StartScreen.html). Single stylesheet, CSS-variable themes. Theme is system-default (spec §13.1); the M3 switcher stamps [data-theme] on to override. Fonts are self-hosted (spec §13.6) — no external CDN. */ /* ---- Self-hosted brand font (spec §13.6). Falls back to Georgia if absent. Latin covers the "Perecle" wordmark; Cyrillic covers the "Перекл" footer mark (M3). Both subsets are same-origin — no external CDN. ---- */ @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/source-serif-4-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/source-serif-4-600-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* Weight 400 is the footer mini-wordmark "Perecle" (design/ResultsScreen.html); the browser cannot synthesize a lighter weight from the 600 face, so ship the 400 subsets too. Same-origin subsets — no external CDN. */ @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/source-serif-4-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/source-serif-4-400-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* ---- Layout tokens: desktop (spec §13 / Perecle.html) ---- */ :root { --brand-font: "Source Serif 4", Georgia, serif; --u-rinput: 16px; --u-rpill: 10px; --hero-logo: 72px; --hero-pad: 56px; --hero-gap: 24px; --searchbar-w: 560px; --content-col: 680px; --page-pad: 24px; --compact-logo: 26px; --result-title-size: 18px; --snippet-size: 15px; --list-gap: 26px; /* Services strip + result-favicon placement toggles (desktop defaults; the mobile block below flips them). */ --menu-header-display: none; --menu-below-display: flex; --fav-desktop: flex; --fav-mobile: none; /* ---- Light theme (default) ---- */ --bg-page: #edeae3; --surface: #ffffff; --surface-grad: radial-gradient(120% 90% at 50% -12%, #ffffff 0%, #f5f1e9 58%, #efe9dd 100%); --border: #e7e3da; --border-card: #e7e3da; --text-strong: #1f1e1b; --text-body: #24211c; --text-muted: #8a857a; --text-faint: #9a958b; --link-url: #54504a; --link-visited: #7c5c86; --spark: #c9694a; --deep: #26355e; --on-deep: #ffffff; --shadow-card: 0 1px 2px rgba(31, 30, 27, .05), 0 18px 40px rgba(31, 30, 27, .06); --shadow-input: 0 1px 2px rgba(31, 30, 27, .05), 0 10px 26px rgba(31, 30, 27, .06); --focus-ring: 0 0 0 3px rgba(38, 53, 94, .35); --hover-bg: rgba(31, 30, 27, .05); } /* ---- Dark theme tokens ---- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-page: #121317; --surface: #1c1d22; --surface-grad: radial-gradient(120% 90% at 50% -12%, #1e2740 0%, #15171d 58%, #0f1116 100%); --border: #2f313a; --border-card: #2b2d35; --text-strong: #f3f7ff; --text-body: #d7dbe4; --text-muted: #8f96a6; --text-faint: #7f8695; --link-url: #a7adba; --link-visited: #b9a2c4; --spark: #e0855f; --deep: #ece9e1; --on-deep: #15171d; --shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 42px rgba(0, 0, 0, .45); --shadow-input: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 26px rgba(0, 0, 0, .4); --focus-ring: 0 0 0 3px rgba(236, 233, 225, .30); --hover-bg: rgba(255, 255, 255, .05); } } /* Explicit switcher override (M3) — wins in both directions. */ :root[data-theme="dark"] { --bg-page: #121317; --surface: #1c1d22; --surface-grad: radial-gradient(120% 90% at 50% -12%, #1e2740 0%, #15171d 58%, #0f1116 100%); --border: #2f313a; --border-card: #2b2d35; --text-strong: #f3f7ff; --text-body: #d7dbe4; --text-muted: #8f96a6; --text-faint: #7f8695; --link-url: #a7adba; --link-visited: #b9a2c4; --spark: #e0855f; --deep: #ece9e1; --on-deep: #15171d; --shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 42px rgba(0, 0, 0, .45); --shadow-input: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 26px rgba(0, 0, 0, .4); --focus-ring: 0 0 0 3px rgba(236, 233, 225, .30); --hover-bg: rgba(255, 255, 255, .05); } /* ---- Mobile layout tokens ---- */ @media (max-width: 640px) { :root { --hero-logo: 48px; --hero-pad: 26px; --hero-gap: 18px; --searchbar-w: 100%; --content-col: 100%; --page-pad: 16px; --compact-logo: 22px; --result-title-size: 17px; --snippet-size: 14px; --list-gap: 22px; --menu-header-display: flex; --menu-below-display: none; --fav-desktop: none; --fav-mobile: flex; } } * { box-sizing: border-box; } body { margin: 0; font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text-body); background: var(--bg-page); } a { color: var(--link-url); text-decoration: none; } a:hover { opacity: .8; } /* ---- Brand logo + spark ---- */ .brand-logo { font-family: var(--brand-font); font-weight: 600; letter-spacing: -0.01em; line-height: 1; color: var(--text-strong); } .brand-logo--hero { font-size: var(--hero-logo); } .brand-l { position: relative; display: inline-block; } .spark path { fill: var(--spark); } /* Primary wordmark spark — over «л» of the Cyrillic «Перекл» (start hero + header logo-link). Terracotta, animated. */ .spark--logo { position: absolute; top: 0.06em; right: -0.22em; width: 0.3em; height: 0.3em; overflow: visible; } .spark--logo path { transform-box: fill-box; transform-origin: center; animation: sparkTwinkle 3.4s ease-in-out infinite; } /* Twinkle — glow + gentle scale, no rotation (design/Perecle.html). */ @keyframes sparkTwinkle { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } } @keyframes sparkPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .spark--logo path { animation: sparkPulse 3.4s ease-in-out infinite; } } /* ---- Start page ---- */ .start-hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--hero-gap); padding: 0 var(--hero-pad) var(--hero-pad); text-align: center; background: var(--surface-grad); } /* ---- Search bar ---- */ .searchbar { display: flex; align-items: center; gap: 10px; width: min(var(--searchbar-w), 100%); margin-top: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--u-rinput); padding: 15px 18px; box-shadow: var(--shadow-input); text-align: left; } .searchbar:focus-within { box-shadow: var(--shadow-input); } .searchbar__glass { flex: none; color: var(--text-muted); } .searchbar__input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: 16px; color: var(--text-body); } .searchbar__input::placeholder { color: var(--text-faint); } .searchbar__action { flex: none; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; padding: 0; cursor: pointer; } .searchbar__action .spark { width: 17px; height: 17px; opacity: .85; } .searchbar__action .spark path { fill: var(--deep); } .searchbar__action:hover .spark { opacity: 1; } /* ---- Suggest dropdown (speed-plan §1.2). Anchored to the search form; the form is the positioning context. Restrained, token-based (spec §13.4). ---- */ .searchbar { position: relative; } .suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--u-rinput); box-shadow: var(--shadow-card); } .suggest__item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--u-rpill); font-size: 15px; color: var(--text-body); cursor: pointer; } .suggest__item:hover, .suggest__item--active { background: var(--hover-bg); } .suggest__glass { flex: none; color: var(--text-faint); } .suggest__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- Compact search bar (results/info header) ---- */ .searchbar--compact { padding: 10px 14px; border-radius: var(--u-rinput); box-shadow: none; margin-top: 0; } .searchbar--compact:focus-within { box-shadow: none; } .searchbar--compact .searchbar__action .spark { width: 15px; height: 15px; } .brand-logo--compact { font-size: var(--compact-logo); } .brand-logo.brand-logo--compact { text-decoration: none; } /* ---- Results page ---- */ .results { min-height: 100vh; display: flex; flex-direction: column; } .results-header { border-bottom: 1px solid var(--border); padding: 12px var(--page-pad) 13px; } .results-header__inner { max-width: var(--content-col); margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } /* Top row: brand group (logo + mobile services strip) + search bar. */ .results-header__row { display: flex; flex-direction: var(--header-dir, row); align-items: var(--header-align, center); gap: 14px; } .results-header__brand { display: flex; align-items: center; gap: 16px; min-width: 0; } .results-header .brand-logo { flex: none; padding: 4px 0; } .results-header .searchbar--compact { flex: 1 1 auto; min-width: 0; } /* ---- Services strip (placeholder links: Почта · Диск · Картинки · Видео). Start page: always visible under the search bar. Results header: a wrapped row below the bar on desktop, a horizontal-scroll strip beside the logo on mobile. Visual only — links are inert until the services ship. ---- */ .service-link { font-weight: 500; color: var(--text-muted); cursor: pointer; white-space: nowrap; text-decoration: none; } .service-link:hover { color: var(--text-strong); opacity: 1; } /* Start: always visible under the search bar. */ .services--start { position: absolute; top: calc(100% + 14px); left: 0; right: 0; z-index: 5; display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; } .services--start .service-link { font-size: 15px; } /* Results header: desktop row below the search bar. */ .services--below { display: var(--menu-below-display, flex); align-items: center; gap: 24px; flex-wrap: wrap; padding-left: 2px; } /* Results header: mobile horizontal-scroll strip beside the logo, with a fade at the right edge and no visible scrollbar. */ .services--scroll { display: var(--menu-header-display, none); flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); } .services--scroll::-webkit-scrollbar { display: none; } .services__track { display: flex; align-items: center; gap: 22px; width: max-content; padding: 2px 22px 2px 0; } .services--below .service-link, .services--scroll .service-link { font-size: 14px; } .results-main { flex: 1; padding: 22px var(--page-pad) 36px; } .results-col { max-width: var(--content-col); margin: 0 auto; display: flex; flex-direction: column; } .layout-correction { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 20px; padding: 0 0 14px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 14px; line-height: 1.5; } .layout-correction strong { color: var(--text-body); font-weight: 600; } .layout-correction__restore { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 8px; color: var(--deep); font-size: 14px; font-weight: 600; letter-spacing: .02em; } .layout-correction__restore:hover { background: var(--hover-bg); color: var(--text-strong); opacity: 1; } .layout-correction__restore:focus-visible { outline: none; box-shadow: var(--focus-ring); background: var(--hover-bg); } @media (max-width: 640px) { :root { --header-dir: column; --header-align: stretch; } } /* ---- Result item ---- */ .result-list { display: flex; flex-direction: column; gap: var(--list-gap); } /* Row: favicon gutter (desktop) + text body. Title sits above the URL. */ .result { display: flex; gap: 14px; align-items: flex-start; } .result__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; } .result__meta { display: flex; align-items: center; gap: 9px; } .favicon { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--text-muted); line-height: 1; overflow: hidden; } /* Desktop: larger favicon in a left gutter beside the whole result block. */ .favicon--gutter { display: var(--fav-desktop, flex); width: 26px; height: 26px; font-size: 13px; margin-top: -1px; } /* Mobile: small favicon inline in the URL row. */ .favicon--inline { display: var(--fav-mobile, none); } /* Real site favicon (spec §13.4): swapped in by favicon.js once /icon loads. Drops the letter-placeholder chrome so the icon reads as itself. */ .favicon--img { background: transparent; border-color: transparent; } .favicon__img { width: 16px; height: 16px; display: block; object-fit: contain; } .result__url { min-width: 0; font-size: 13px; color: var(--link-url); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .result__title { font-size: var(--result-title-size); font-weight: 500; line-height: 1.32; color: var(--text-strong); /* CSS line-clamp: title up to 2 lines (spec §21.2) */ display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Visited results dim to a muted plum, like Yandex (native :visited — no tracking, browser-remembered only). Privacy-safe: :visited can style color family only. */ .result__title:visited { color: var(--link-visited); } .result__title:hover { opacity: .78; } .result__snippet { margin: 0; font-size: var(--snippet-size); line-height: 1.5; color: var(--text-body); /* snippet up to 3 lines (spec §21.2) */ display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 1px; } .result__sources { font-size: 13px; color: var(--text-faint); margin-top: 3px; } /* ---- Paginator (numbered, no arrows — spec §13.3) ---- */ .paginator { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 32px; flex-wrap: wrap; } .paginator__num { min-width: 40px; height: 40px; padding: 0 8px; display: flex; align-items: center; justify-content: center; border-radius: var(--u-rpill); font-size: 15px; color: var(--link-url); text-decoration: none; } .paginator__num:hover { color: var(--text-strong); opacity: 1; } .paginator__num--current { font-weight: 600; color: var(--deep); background: color-mix(in srgb, var(--deep) 16%, transparent); } /* ---- Empty / error states (spec §13.5) ---- */ .state-message { padding: 40px 0; text-align: center; } .state-message__title { margin: 0 0 8px; font-size: 20px; font-weight: 600; color: var(--text-strong); } .state-message__hint { margin: 0; font-size: 15px; color: var(--text-muted); } /* ---- Footer + theme switcher ---- */ .results-footer { border-top: 1px solid var(--border); padding: 12px var(--page-pad); display: flex; justify-content: space-between; align-items: center; } .results-footer--center { justify-content: center; } .wordmark-footer { font-family: var(--brand-font); font-weight: 400; font-size: 15px; letter-spacing: -0.01em; line-height: 1; color: var(--text-muted); } /* Footer mini-wordmark spark — on «l» of the Latin «Perecle»; muted, static. */ .spark--wordmark { position: absolute; top: -0.1em; left: 0.16em; width: 0.3em; height: 0.3em; overflow: visible; } .spark--wordmark path { fill: var(--text-muted); } .theme-switch { display: inline-flex; align-items: center; border: none; background: transparent; padding: 4px; cursor: pointer; color: var(--text-muted); } .theme-switch:hover { color: var(--text-strong); } .theme-icon { display: inline-flex; align-items: center; } /* Show only the active mode's icon (system=monitor / light=sun / dark=moon). theme.js toggles [hidden]; without this the class's `display` would override the UA `[hidden]{display:none}` and all three icons would show at once. */ .theme-icon[hidden] { display: none; } /* ---- 404 ---- */ .notfound-hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: var(--hero-pad); text-align: center; background: var(--surface-grad); } .notfound-code { font-family: var(--brand-font); font-weight: 600; font-size: var(--hero-logo); letter-spacing: -0.01em; line-height: 1; color: var(--text-strong); } .notfound-text { margin: 0; font-size: 16px; color: var(--text-muted); } .notfound-home { font-size: 14px; color: var(--link-url); margin-top: 2px; } .notfound-home:hover { color: var(--text-strong); } /* ---- Info ---- */ .info-main { flex: 1; padding: 32px var(--page-pad) 48px; } .info-col { gap: 26px; } .info-title { margin: 0; font-size: 26px; font-weight: 600; color: var(--text-strong); letter-spacing: -0.01em; } .info-block { display: flex; flex-direction: column; gap: 6px; } .info-block__head { margin: 0; font-size: 16px; font-weight: 600; color: var(--text-strong); } .info-block__body { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-body); } .info-home { font-size: 13px; color: var(--text-muted); } .info-home:hover { color: var(--text-strong); } .info { min-height: 100vh; display: flex; flex-direction: column; } .info-main { display: flex; flex-direction: column; } /* ---- "Make Perecle default" guide (/default, app/web/default_screen.py) ---- */ .default { min-height: 100vh; display: flex; flex-direction: column; } .default-main { flex: 1; padding: 34px var(--page-pad) 44px; display: flex; flex-direction: column; } .default-col { gap: 26px; width: 100%; } .default-hero { display: flex; flex-direction: column; gap: 12px; } .default-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); } .default-eyebrow .spark { width: 12px; height: 12px; flex: none; } .default-title { margin: 0; font-family: var(--brand-font); font-weight: 600; font-size: 30px; line-height: 1.15; letter-spacing: -0.01em; color: var(--text-strong); text-wrap: pretty; } .default-subhead { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-muted); max-width: 52ch; text-wrap: pretty; } .default-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-card); padding: 22px; display: flex; flex-direction: column; gap: 16px; } .default-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .default-card__ident { display: flex; align-items: center; gap: 13px; min-width: 0; } .default-badge { flex: none; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--deep) 10%, transparent); color: var(--deep); font-family: var(--brand-font); font-weight: 600; font-size: 15px; line-height: 1; } .default-name { font-size: 18px; font-weight: 600; color: var(--text-strong); line-height: 1.2; } .default-platform { font-size: 13px; color: var(--text-faint); margin-top: 2px; } .default-chip { flex: none; font-size: 12px; font-weight: 600; line-height: 1; padding: 6px 12px; border-radius: 999px; white-space: nowrap; } .default-chip--easy { background: color-mix(in srgb, var(--deep) 10%, transparent); color: var(--deep); } .default-chip--settings { background: var(--hover-bg); color: var(--text-muted); } .default-chip--blocked { background: transparent; border: 1px dashed var(--border); color: var(--text-faint); } .default-lead { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text-body); } .default-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .default-steps li { display: flex; gap: 12px; align-items: flex-start; } .default-step-n { flex: none; width: 24px; height: 24px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--deep); color: var(--on-deep); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; margin-top: 1px; } .default-step-text { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.5; color: var(--text-body); } .default-step-text strong, .default-can-text strong { font-weight: 650; color: var(--text-strong); } .default-can { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .default-can li { display: flex; gap: 10px; align-items: flex-start; } .default-can li::before { content: "—"; flex: none; color: var(--spark); font-weight: 700; line-height: 1.5; } .default-can-text { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.5; color: var(--text-body); } .default-url { display: flex; flex-direction: column; gap: 7px; } .default-url__row { display: flex; align-items: stretch; gap: 8px; } .default-url__code { flex: 1; min-width: 0; display: flex; align-items: center; background: var(--hover-bg); border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; height: 38px; overflow-x: auto; white-space: nowrap; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; color: var(--text-body); } .default-url__code::-webkit-scrollbar { display: none; } .default-copy { flex: none; height: 38px; background: var(--deep); color: var(--on-deep); border: none; border-radius: 7px; padding: 0 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; } .default-copy:hover { opacity: .9; } .default-copy:focus-visible { outline: none; box-shadow: var(--focus-ring); } .default-url__hint { font-size: 12px; color: var(--text-faint); } .default-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-muted); padding: 6px 2px; border-radius: 8px; width: max-content; } .default-more > summary::-webkit-details-marker { display: none; } .default-more > summary:hover { color: var(--text-body); } .default-more > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); } .default-chev { flex: none; transition: transform .2s ease; } .default-more[open] .default-chev { transform: rotate(90deg); } @media (prefers-reduced-motion: reduce) { .default-chev { transition: none; } } .default-others { display: flex; flex-direction: column; gap: 2px; padding: 8px 0 2px 22px; } .default-others a { font-size: 14px; color: var(--link-url); padding: 5px 0; width: max-content; } .default-others a:hover { color: var(--text-strong); opacity: 1; } .default-home { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-muted); } .default-home:hover { color: var(--text-strong); } /* ---- "Make default" entry points on the results page ---- */ .spark--inline { width: 11px; height: 11px; flex: none; } .promote-banner { background: color-mix(in srgb, var(--deep) 10%, transparent); border-bottom: 1px solid var(--border); padding: 9px var(--page-pad); } .promote-banner__inner { max-width: var(--content-col); margin: 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .promote-banner__msg { display: flex; align-items: center; gap: 9px; flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text-body); } .promote-banner__msg .spark { width: 14px; height: 14px; flex: none; } .promote-banner__actions { display: flex; align-items: center; gap: 9px; flex: none; } .promote-banner__cta { font-size: 13px; font-weight: 650; color: var(--deep); } .promote-banner__cta:hover { color: var(--deep); opacity: .8; } .promote-banner__close { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; cursor: pointer; color: var(--text-faint); font-size: 19px; line-height: 1; border: none; background: transparent; border-radius: 6px; } .promote-banner__close:hover { color: var(--text-strong); } .promote-banner__close:focus-visible { outline: none; box-shadow: var(--focus-ring); } .results-footer__right { display: flex; align-items: center; gap: 14px; } .footer-default-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); } .footer-default-link:hover { color: var(--text-strong); } /* Promo gating — [data-pd]=Perecle is the default, [data-ph]=banner dismissed. Set pre-paint by the base.html bootstrap, so nothing flashes. */ :root[data-pd="1"] .promote-banner, :root[data-pd="1"] .footer-default-link { display: none; } :root[data-ph="1"] .promote-banner { display: none; } /* ---- iskra-1 AI overview (ai-plan §9.15, ported from design/IskraResults.html). Sits above the result list in the same column; a single surface card with a hairline border, no heavy shadow, so it never outshouts the SERP. The spark is the only warm accent; [n] footnotes and sources use the deep/muted inks. ---- */ .iskra { display: block; margin-bottom: 28px; } .iskra[hidden] { display: none; } .iskra-spark { width: 15px; height: 15px; flex: none; } .iskra-spark path { fill: var(--spark); } .iskra-spark--anim path { transform-box: fill-box; transform-origin: center; animation: sparkTwinkle 1.5s ease-in-out infinite; } /* Overview card (streaming / ready) */ .iskra-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; } .iskra-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .iskra-brand { display: flex; align-items: center; gap: 8px; } .iskra-name { font-size: 14px; font-weight: 600; letter-spacing: .01em; color: var(--text-strong); white-space: nowrap; } .iskra-status { font-size: 13px; color: var(--text-muted); white-space: nowrap; } .iskra-toggle { display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent; cursor: pointer; font-family: inherit; font-size: 13px; color: var(--text-muted); padding: 4px 7px; border-radius: 8px; } .iskra-toggle:hover { color: var(--text-strong); background: var(--hover-bg); } .iskra-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); } .iskra-toggle svg { flex: none; } .iskra-answer { font-size: 15px; line-height: 1.6; color: var(--text-body); text-wrap: pretty; } .iskra-print { white-space: pre-wrap; } .iskra-caret { display: inline-block; width: 2px; height: 1.05em; background: var(--spark); margin-left: 3px; vertical-align: -3px; animation: caretBlink 1.05s step-end infinite; } .iskra-sources { display: flex; flex-direction: column; gap: 8px; } .iskra-sources-title { font-size: 12px; font-weight: 600; letter-spacing: .03em; color: var(--text-muted); } .iskra-source-list { display: flex; flex-wrap: wrap; gap: 9px 18px; } .iskra-source { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13.5px; color: var(--link-url); text-decoration: none; } .iskra-source:hover { color: var(--text-strong); } .iskra-source-n { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-muted); } .iskra-source-sep { color: var(--text-faint); } .iskra-disclaimer { font-size: 12.5px; color: var(--text-faint); } /* Follow-up dialog thread (M-AI-3) */ .iskra-divider { height: 1px; background: var(--border); margin: 2px 0; } .iskra-thread { display: flex; flex-direction: column; gap: 14px; } .iskra-turn-q { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .iskra-bubble { max-width: 86%; background: var(--hover-bg); border: 1px solid var(--border); border-radius: 14px; border-top-right-radius: 5px; padding: 9px 13px; font-size: 14.5px; line-height: 1.5; color: var(--text-body); } .iskra-corrected { font-size: 12.5px; color: var(--text-faint); } .iskra-turn-a { display: flex; gap: 9px; align-items: flex-start; } .iskra-turn-a .iskra-spark { margin-top: 3px; } .iskra-turn-a .iskra-answer { flex: 1; min-width: 0; } .iskra-refine-wrap { display: flex; align-items: center; gap: 10px; background: var(--bg-page); border: 1px solid var(--border); border-radius: 16px; padding: 11px 14px; } .iskra-refine-wrap:focus-within { box-shadow: var(--focus-ring); border-color: color-mix(in srgb, var(--deep) 40%, var(--border)); } .iskra-refine { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-family: inherit; font-size: 14.5px; color: var(--text-body); } .iskra-refine::placeholder { color: var(--text-faint); } .iskra-refine-send { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: transparent; border-radius: 8px; cursor: pointer; color: var(--text-muted); } .iskra-refine-send:hover { color: var(--text-strong); background: var(--hover-bg); } .iskra-refine-send .iskra-arrow { color: currentColor; } /* Invite (navigational / no auto-answer) */ .iskra-invite { display: flex; align-items: center; gap: 11px; width: 100%; box-sizing: border-box; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; cursor: pointer; font-family: inherit; } .iskra-invite:hover { background: var(--hover-bg); } .iskra-invite:focus-visible { outline: none; box-shadow: var(--focus-ring); } .iskra-invite .iskra-spark { width: 16px; height: 16px; } .iskra-invite-label { flex: 1; min-width: 0; font-size: 14.5px; color: var(--text-body); } .iskra-arrow { flex: none; color: var(--text-muted); } /* Collapsed bar */ .iskra-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px 16px; } .iskra-bar-left { display: flex; align-items: center; gap: 9px; min-width: 0; } .iskra-bar-hint { font-size: 13px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .iskra-bar .iskra-toggle { color: var(--deep); font-weight: 650; } .iskra-bar .iskra-toggle:hover { color: var(--deep); opacity: .8; background: transparent; } @keyframes caretBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .iskra-spark--anim path { animation: sparkPulse 3.4s ease-in-out infinite; } .iskra-caret { animation: none; opacity: 1; } } /* ============================================================================ Images vertical (images-plan §3, design/ImagesResults.dc.html). Reuses the shared theme tokens; image-specific layout tokens scoped to .images. ============================================================================ */ .images { --img-col: 1080px; --tile-gap: 14px; --masonry-cols: 4; --just-row-h: 200px; --land-search: 600px; --cat-cols: 4; --cat-h: 104px; } @media (max-width: 980px) { .images { --masonry-cols: 3; } } @media (max-width: 640px) { .images { --masonry-cols: 2; --tile-gap: 8px; --just-row-h: 120px; --cat-cols: 2; --cat-h: 92px; --land-search: 100%; } } /* ---- Image search bar ---- */ .isearch { position: relative; display: flex; align-items: center; gap: 11px; width: min(var(--land-search), 100%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--u-rinput); padding: 14px 17px; box-shadow: var(--shadow-input); } .isearch--compact { padding: 9px 13px; box-shadow: none; flex: 1 1 auto; max-width: 640px; } .isearch__glass { flex: none; color: var(--text-muted); } .isearch__input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-family: inherit; font-size: 15px; color: var(--text-body); } .isearch__input::placeholder { color: var(--text-faint); } .isearch:focus-within { box-shadow: var(--focus-ring); border-color: var(--border); } .isearch__camera, .isearch__submit { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; background: transparent; border-radius: 9px; cursor: pointer; color: var(--text-muted); } .isearch__camera:hover:not(:disabled), .isearch__submit:hover { background: var(--hover-bg); color: var(--text-strong); } .isearch__camera:disabled { opacity: .55; cursor: default; } .isearch__sep { flex: none; width: 1px; height: 22px; background: var(--border); } .isearch__submit .spark path { fill: var(--deep); } /* ---- Landing ---- */ .iland { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 46px var(--page-pad) 32px; background: var(--surface-grad); min-height: 60vh; } .brand-logo--images-hero { font-size: 54px; } .icategories { width: min(920px, 100%); margin-top: 8px; } .icategories__title { margin: 0 2px 12px; color: var(--text-muted); font-size: 13px; font-weight: 600; letter-spacing: .02em; } .icategories__grid { display: grid; grid-template-columns: repeat(var(--cat-cols), 1fr); gap: 14px; } .icatcard { position: relative; display: block; height: var(--cat-h); overflow: hidden; border: 1px solid var(--border-card); border-radius: 14px; color: #fff; isolation: isolate; } .icatcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,12,10,.55), rgba(14,12,10,0) 62%); z-index: -1; } .icatcard__lift { position: absolute; inset: 0; z-index: -3; transition: transform .18s ease; background: var(--cat-bg); } .icatcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: -2; } .icatcard--broken .icatcard__img, .icatcard--nophoto .icatcard__img { display: none; } .icatcard:hover { opacity: 1; } .icatcard:hover .icatcard__lift { transform: scale(1.04); } .icatcard__label { position: absolute; left: 12px; bottom: 10px; color: #fff; font-size: 14px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.45); } .icatcard--nature { --cat-bg: radial-gradient(120% 90% at 28% 22%, rgba(255,255,255,.24), transparent 55%), linear-gradient(158deg, #6a7f5c, #4c6142); } .icatcard--mountains { --cat-bg: radial-gradient(120% 90% at 28% 22%, rgba(255,255,255,.24), transparent 55%), linear-gradient(158deg, #aab0b8, #878d96); } .icatcard--cities { --cat-bg: radial-gradient(120% 90% at 28% 22%, rgba(255,255,255,.24), transparent 55%), linear-gradient(158deg, #9aa0bd, #7a80a0); } .icatcard--sea { --cat-bg: radial-gradient(120% 90% at 28% 22%, rgba(255,255,255,.24), transparent 55%), linear-gradient(158deg, #4f6f86, #375166); } .icatcard--forest { --cat-bg: radial-gradient(120% 90% at 28% 22%, rgba(255,255,255,.24), transparent 55%), linear-gradient(158deg, #8fa06f, #6f8151); } .icatcard--space { --cat-bg: radial-gradient(120% 90% at 28% 22%, rgba(255,255,255,.24), transparent 55%), linear-gradient(158deg, #434a59, #2d323e); } .icatcard--minimal { --cat-bg: radial-gradient(120% 90% at 28% 22%, rgba(255,255,255,.24), transparent 55%), linear-gradient(158deg, #ece2cd, #dccdae); } .icatcard--autumn { --cat-bg: radial-gradient(120% 90% at 28% 22%, rgba(255,255,255,.24), transparent 55%), linear-gradient(158deg, #cf9f88, #b87a5f); } /* ---- Compact header (non-landing) ---- */ .iheader { border-bottom: 1px solid var(--border); padding: 12px var(--page-pad) 13px; } .iheader__inner { max-width: var(--img-col); margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .iheader__row { display: flex; align-items: center; gap: 16px; } .iheader__brand { display: flex; align-items: center; gap: 16px; min-width: 0; } /* ---- Tab strip ---- */ .itabs { display: flex; gap: 6px; flex-wrap: wrap; } .itabs--land { justify-content: center; } .itab { padding: 8px 15px; border-radius: var(--u-rpill); font-size: 14.5px; color: var(--text-muted); white-space: nowrap; font-weight: 500; } .itab:hover { color: var(--text-strong); opacity: 1; background: var(--hover-bg); } .itab--active { color: var(--deep); font-weight: 600; background: color-mix(in srgb, var(--deep) 16%, transparent); } /* ---- Filter bar ---- */ .ifilterbar { border-bottom: 1px solid var(--border); padding: 5px var(--page-pad); } .ifilterbar__inner { max-width: var(--img-col); margin: 0 auto; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .ifilterbar__spacer { flex: 1 1 auto; min-width: 8px; } /* SafeSearch toggle */ .isafe { display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px 6px 9px; border-radius: 999px; font-size: 13px; color: var(--text-muted); white-space: nowrap; } .isafe:hover { opacity: 1; color: var(--text-body); } .isafe__track { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: color-mix(in srgb, var(--text-faint) 45%, transparent); transition: background .16s; } .isafe--on .isafe__track { background: var(--text-muted); } .isafe__knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left .16s; } .isafe--on .isafe__knob { left: 16px; } /* ---- Body ---- */ .ibody { flex: 1; padding: 16px var(--page-pad) 30px; } .ibody__col { max-width: var(--img-col); margin: 0 auto; } /* ---- Grids ---- */ .igrid--masonry { column-count: var(--masonry-cols); column-gap: var(--tile-gap); } .igrid--masonry .itile { width: 100%; margin: 0 0 var(--tile-gap); break-inside: avoid; } .igrid--justified { display: flex; flex-wrap: wrap; gap: var(--tile-gap); } .ijust { flex-shrink: 1; } .ijust .itile { width: 100%; } .ijust-spacer { flex-grow: 999999; flex-basis: 0; height: 0; } /* ---- Tile ---- */ .itile { position: relative; display: block; padding: 0; border: 1px solid var(--border-card); border-radius: var(--u-rpill); overflow: hidden; background: var(--surface); cursor: pointer; font: inherit; color: inherit; text-align: left; width: 100%; } .itile:focus-visible { outline: none; box-shadow: var(--focus-ring); } .itile__img { display: block; width: 100%; height: 100%; object-fit: cover; } .itile--broken .itile__img { display: none; } .itile__broken { display: none; position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 7px; background: var(--surface); color: var(--text-faint); } .itile--broken .itile__broken { display: flex; } .itile__broken-txt { font-size: 11.5px; } /* Hover overlay */ .itile__ov { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 9px; opacity: 0; transition: opacity .16s ease; background: linear-gradient(to bottom, rgba(14,12,10,.52), rgba(14,12,10,0) 36%), linear-gradient(to top, rgba(14,12,10,.55), rgba(14,12,10,0) 42%); pointer-events: none; } .itile:hover .itile__ov { opacity: 1; } .itile:hover .itile__img { filter: brightness(.93); } .itile__meta { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .itile__title { overflow: hidden; color: #fff; font-size: 12.5px; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-shadow: 0 1px 2px rgba(0,0,0,.4); } .itile__site { display: flex; align-items: center; gap: 6px; min-width: 0; } .itile__favicon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background-color: rgba(255,255,255,.92); background-position: center; background-size: cover; color: #3a3632; font-size: 9.5px; font-weight: 600; } .itile__domain { overflow: hidden; color: #fff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.5); } .itile__bottom { display: flex; align-items: end; justify-content: space-between; gap: 8px; } .itile__similar { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; background: rgba(245,241,233,.16); color: #fff; font: inherit; font-size: 11.5px; font-weight: 500; cursor: pointer; } .itile__similar svg { display: block; } .itile__similar:hover { background: rgba(14,12,10,.58); } .itile__attr { display: flex; align-items: center; gap: 6px; min-width: 0; } .itile__lic { flex: none; padding: 1px 6px; border: 1px solid rgba(255,255,255,.4); border-radius: 5px; font-size: 10px; font-weight: 600; color: #fff; white-space: nowrap; } .itile__author { min-width: 0; font-size: 12px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.5); } /* 236-ФЗ label strip (RU) — visible without hover, dims on hover (design). */ .itile__rkn { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 10px 8px; font-size: 10.5px; line-height: 1.3; color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.55); pointer-events: none; background: linear-gradient(to top, rgba(14,12,10,.78), rgba(14,12,10,0)); transition: opacity .16s ease; } .itile:hover .itile__rkn { opacity: 0; } /* ---- Show more ---- */ .imore { display: flex; justify-content: center; padding: 26px 0 4px; } .imore__btn { position: relative; overflow: hidden; z-index: 0; padding: 12px 28px 14px; border: 0; border-radius: 14px; background: var(--hover-bg); color: var(--text-strong); font-size: 15px; font-weight: 600; } .imore__btn:hover { background: var(--hover-bg); opacity: 1; } /* Loading state: a dim fill animates left→right in BOTH phases while a page is being fetched, looping until the response arrives: - grow: the right edge moves left→right (fill 0→100%, anchored at the left). - clear: the LEFT edge moves left→right (fill 100→0%, anchored at the right), i.e. the filled region is "eaten" from the left, never sweeping right→left. Both phases share one direction so motion stays consistent. The fill is a translucent wash of the SafeSearch "on" track color, painted between the button's own background and the label: z-index:-1 on ::before + z-index:0 on the button makes the button a stacking context, so the text node stays ABOVE the fill. left/right are animated as individual longhands — the `inset` shorthand does not interpolate reliably across engines (verified in Chromium). */ .imore__btn--loading { cursor: progress; } .imore__btn--loading::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0%; right: 100%; background: color-mix(in srgb, var(--text-muted) 38%, transparent); z-index: -1; animation: imore-fill 2.2s linear infinite; } @keyframes imore-fill { 0% { left: 0%; right: 100%; } /* width 0: right at the left edge */ 45% { left: 0%; right: 0%; } /* width 100%: fully filled */ 100% { left: 100%; right: 0%; } /* width 0: left at the right edge (eaten) */ } @media (prefers-reduced-motion: reduce) { /* Respect the OS setting: freeze the fill at a static ~60% instead of animating. */ .imore__btn--loading::before { animation: none; left: 0%; right: 40%; } } .state-message__retry { display: inline-flex; margin-top: 12px; padding: 8px 15px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-body); font: inherit; font-size: 13.5px; cursor: pointer; } .state-message__retry:hover { background: var(--hover-bg); opacity: 1; } .state-message__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 10px; border-radius: 50%; background: var(--hover-bg); color: var(--text-faint); font-size: 28px; } .state-message__hint { max-width: 480px; margin-left: auto; margin-right: auto; line-height: 1.5; } .istatus { margin: 0 0 12px; color: var(--text-muted); font-size: 13px; } .service-link--live { cursor: pointer; } .service-link--active { color: var(--text-strong); font-weight: 650; } /* ---- Lightbox (A-IMG1.6, design/ImagesResults.dc.html:191-216) ---- */ /* One continuous card (18px radius) wrapping stage + panel; backdrop 10/9/8/.74. */ body.ilb-open { overflow: hidden; } .ilb { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 26px; } .ilb[hidden] { display: none; } .ilb__backdrop { position: absolute; inset: 0; background: rgba(10,9,8,.74); } .ilb__card { position: relative; z-index: 1; display: flex; align-items: stretch; width: min(var(--lb-w, 1000px), 100%); max-height: calc(100vh - 52px); background: var(--surface); border: 1px solid var(--border-card); border-radius: 18px; box-shadow: var(--shadow-card); overflow: hidden; } .ilb__stage { flex: 1 1 auto; min-width: 0; min-height: var(--lb-img-min, 300px); display: flex; align-items: center; justify-content: center; background: var(--bg-page); } .ilb__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0; background: var(--surface); } .ilb__panel { flex: none; width: var(--lb-panel, 320px); max-width: 40vw; padding: 20px; display: flex; flex-direction: column; gap: 15px; overflow: auto; border-left: 1px solid var(--border); } /* Panel order (design): title → favicon+domain → dims → attribution → actions → RKN. */ .ilb__title { font-size: 16px; font-weight: 600; color: var(--text-strong); line-height: 1.35; } .ilb__site { display: flex; align-items: center; gap: 9px; min-width: 0; } .ilb__favicon { flex: none; width: 24px; height: 24px; border-radius: 50%; background-size: cover; background-position: center; background-color: var(--hover-bg); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; } .ilb__domain { min-width: 0; font-size: 14px; color: var(--link-url); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ilb__domain:hover { opacity: .8; } .ilb__dims { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-muted); } .ilb__dims svg { flex: none; } .ilb__attr { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-page); font-size: 13px; color: var(--text-body); } .ilb__attr-label { color: var(--text-muted); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; } .ilb__lic { font-size: 12.5px; color: var(--text-faint); } .ilb__author { min-width: 0; } .ilb__rkn { font-size: 12px; line-height: 1.35; color: var(--text-faint); padding-top: 2px; } .ilb__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .ilb__act { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--u-rpill, 10px); background: var(--surface); color: var(--text-body); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-align: center; } .ilb__act svg { flex: none; } .ilb__act:hover { background: var(--hover-bg); opacity: 1; } .ilb__act--primary { background: var(--deep); border-color: var(--deep); color: var(--on-deep); } .ilb__act--primary:hover { background: var(--deep); } .ilb__action-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .ilb__act--icon { flex-direction: column; gap: 5px; min-height: 58px; padding: 11px 4px; font-size: 11.5px; font-weight: 500; } .ilb__close, .ilb__nav { position: absolute; z-index: 2; display: inline-flex; align-items: center; justify-content: center; border: none; background: rgba(28,25,22,.5); color: #fff; cursor: pointer; border-radius: 50%; } .ilb__close:hover, .ilb__nav:hover { background: rgba(28,25,22,.78); } .ilb__close { top: 16px; right: 18px; width: 40px; height: 40px; } .ilb__nav { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; } .ilb__nav--prev { left: 14px; } .ilb__nav--next { right: 14px; } @media (max-width: 760px) { .ilb { flex-direction: column; padding: 12px; } .ilb__card { flex-direction: column; max-height: calc(100vh - 24px); } .ilb__stage { flex: 1 1 auto; width: 100%; min-height: 200px; } .ilb__panel { width: 100%; max-width: 100%; border-left: none; border-top: 1px solid var(--border); max-height: 42vh; } .ilb__img { max-height: 52vh; } .ilb__nav { display: none; } } /* ---- Filter dropdowns (images-plan §6) ---- */ .ifilterbar__sep { flex: none; width: 1px; height: 24px; background: var(--border); margin: 0 3px; } .ifilts { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .ifilt { position: relative; } .ifilt__chip, .ifilt--disabled { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: var(--u-rpill); font-size: 13.5px; color: var(--text-body); background: transparent; cursor: pointer; list-style: none; white-space: nowrap; } .ifilt__chip::-webkit-details-marker { display: none; } .ifilt[open] > .ifilt__chip, .ifilt__chip:hover { background: var(--hover-bg); color: var(--text-strong); } .ifilt--on > .ifilt__chip { color: var(--text-strong); font-weight: 600; } .ifilt__chev { opacity: .6; transition: transform .16s; } .ifilt[open] .ifilt__chev { transform: rotate(180deg); } .ifilt--disabled { opacity: .42; cursor: default; } .ifilt__menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 9; min-width: 170px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-card); padding: 12px; display: flex; flex-direction: column; gap: 4px; } .ifilt__menu-title { color: var(--text-muted); font-size: 12px; font-weight: 600; } .ifilt__size-options { display: flex; gap: 7px; } .ifilt--size .ifilt__opt { flex: 1; padding: 8px 6px; text-align: center; border: 1px solid var(--border); } .ifilt__menu--colors { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; min-width: 0; width: 236px; } .ifilt__menu--colors .ifilt__menu-title { grid-column: 1 / -1; } .ifilt__opt { padding: 8px 11px; border-radius: 9px; font-size: 13.5px; color: var(--text-body); white-space: nowrap; } .ifilt__opt:hover { background: var(--hover-bg); opacity: 1; } .ifilt__opt--on { color: var(--text-strong); font-weight: 600; background: var(--hover-bg); } .ifilt--size .ifilt__opt--on { border-color: color-mix(in srgb, var(--deep) 38%, var(--border)); background: color-mix(in srgb, var(--deep) 12%, transparent); color: var(--deep); } .ifilt__opt--disabled { opacity: .45; cursor: not-allowed; } .ifilt__color { display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 26px; height: 26px; border-radius: 50%; background: transparent; } .ifilt__swatch { display: block; width: 26px; height: 26px; border: 1px solid rgba(0,0,0,.18); border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 2px var(--surface); transition: transform .14s; } .ifilt__swatch--any { background: transparent; border: 2px solid var(--text-faint); } .ifilt__color:hover .ifilt__swatch { transform: scale(1.08); } .ifilt__color.ifilt__opt--on .ifilt__swatch { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--deep); } /* ---- Reverse image search — full page (design/ImagesReverse.dc.html) ---- */ /* Results header card: rounded card with source thumbnail + caption + "Заменить". */ .ireverse-head { display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin-bottom: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--u-rinput, 16px); } .ireverse-thumb { flex: none; width: 64px; height: 64px; object-fit: cover; border-radius: 12px; border: 1px solid var(--border-card); background: var(--bg-page); } .ireverse-caption { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .ireverse-title { font-size: 16px; font-weight: 600; color: var(--text-strong); } .ireverse-sub { font-size: 13px; color: var(--text-muted); } .ireverse-replace { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: none; background: transparent; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 500; color: var(--text-body); cursor: pointer; text-decoration: none; } .ireverse-replace:hover { background: var(--hover-bg); } /* Reverse-mode searchbar: "Поиск по изображению" chip instead of a query. */ .isearch--reverse { cursor: default; } .isearch--reverse .isearch__glass { color: var(--text-muted); } .isearch--reverse .isearch__input { background: transparent; cursor: pointer; } .isearch__reverse-chip { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 7px; background: var(--bg-page); border: 1px solid var(--border); border-radius: 999px; padding: 3px 5px 3px 4px; } .isearch__reverse-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--hover-bg); } .isearch__reverse-label { font-size: 13px; color: var(--text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Upload state page (design/ImagesReverse.dc.html:62-86). */ .irev-page { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 44px var(--page-pad, 24px) 36px; } .irev-page__hero { width: min(var(--up-w, 560px), 100%); display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 22px; text-align: center; } .irev-page__title { margin: 0; font-family: var(--brand-font); font-size: var(--up-title, 26px); font-weight: 600; letter-spacing: -0.01em; color: var(--text-strong); } .irev-page__lead { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text-muted); max-width: 420px; } .irev-card { width: min(var(--up-w, 560px), 100%); box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--u-rinput, 16px); box-shadow: var(--shadow-card); padding: 20px; margin: 0; } .irev-dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; border: 2px dashed var(--border); background: var(--bg-page); border-radius: 14px; padding: 34px 20px; transition: background .15s, border-color .15s; } .irev-dropzone__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; color: var(--text-muted); } .irev-dropzone__main { font-size: 15px; font-weight: 500; color: var(--text-body); } .irev-dropzone__hint { font-size: 13px; color: var(--text-faint); } .irev-dropzone__btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: none; border-radius: var(--u-rpill, 10px); background: var(--deep); color: var(--on-deep); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .irev-dropzone__btn:hover { opacity: .9; } .irev-card--dropping .irev-dropzone { border-color: transparent; background: transparent; } .irev-card--dropping .irev-dropzone__icon, .irev-card--dropping .irev-dropzone__main { color: var(--spark); } .irev-card--dropping .irev-dropzone__main { font-weight: 600; } .irev-divider { display: flex; align-items: center; gap: 12px; } .irev-divider span { flex: 1; height: 1px; background: var(--border); } .irev-divider__label { flex: none; font-size: 12.5px; color: var(--text-faint); } .irev-urlrow { display: flex; gap: 9px; } .irev-urlfield { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--u-rinput, 16px); padding: 11px 13px; color: var(--text-muted); } .irev-urlfield__input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font: inherit; font-size: 14px; color: var(--text-body); } .irev-urlfield__input:focus { outline: none; } .irev-urlfield:focus-within { box-shadow: var(--focus-ring); } .irev-urlrow__btn { flex: none; padding: 0 18px; border: 1px solid var(--border); border-radius: var(--u-rinput, 16px); background: var(--surface); font: inherit; font-size: 14px; font-weight: 500; color: var(--text-body); cursor: pointer; } .irev-urlrow__btn:hover { background: var(--hover-bg); } .irev-paste { margin: 0; font-size: 12.5px; color: var(--text-faint); text-align: center; } /* Full-screen drop overlay (design:135-139): dashed spark border + spark-tint fill. */ .irev-overlay { position: fixed; inset: 0; z-index: 200; pointer-events: none; padding: 10px; box-sizing: border-box; } .irev-overlay[hidden] { display: none; } .irev-overlay__inner { width: 100%; height: 100%; box-sizing: border-box; border: 2.5px dashed var(--spark); border-radius: 20px; background: color-mix(in srgb, var(--spark) 8%, transparent); animation: irev-dropglow 1.6s ease-in-out infinite; } @keyframes irev-dropglow { 0%,100% { opacity: .55; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .irev-overlay__inner { animation: none; } } @media (max-width: 640px) { .brand-logo--images-hero { font-size: 38px; } .iland { gap: 20px; padding: 30px 16px 32px; } .icategories__grid { gap: 10px; } .images .iheader { padding: 12px 16px 13px; } .images .iheader__row { flex-direction: column; align-items: stretch; gap: 12px; } .images .iheader__brand { width: 100%; } .images .isearch--compact { width: 100%; max-width: none; } .images .services--scroll { width: auto; } .ifilterbar__inner { align-items: flex-start; } .ifilterbar__spacer { display: none; } .isafe { order: 3; width: 100%; padding-left: 0; } .irev-page { padding: 30px 16px 28px; } .irev-page__title { font-size: 22px; } .irev-card { padding: 16px; } .ireverse-head { align-items: flex-start; flex-wrap: wrap; } .ireverse-thumb { width: 56px; height: 56px; } .ireverse-replace { padding: 7px 11px; } } /* ---- Collections (images-plan §7) ---- */ /* Save-on-hover control on a tile */ .itile__save { position: absolute; top: 8px; right: 8px; z-index: 2; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: rgba(22,19,16,.55); color: #fff; cursor: pointer; opacity: 0; transition: opacity .16s ease, background .16s ease; } .itile:hover .itile__save, .itile:focus-within .itile__save { opacity: 1; } .itile__save:hover { background: rgba(22,19,16,.82); } .itile__save--on { opacity: 1; background: var(--deep); color: var(--on-deep); } .itile__save--on svg { fill: currentColor; } .icoll-back { flex: none; font-size: 14px; color: var(--text-muted); white-space: nowrap; } .icoll-back:hover { color: var(--text-strong); opacity: 1; } .icoll-eyebrow { display: flex; align-items: center; gap: 7px; margin: 8px 0 4px; color: var(--text-strong); font-size: 15px; font-weight: 600; } .icoll-eyebrow .spark { width: 14px; height: 14px; } .icoll-eyebrow span { color: var(--text-faint); font-weight: 400; } .icoll-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 2px 0 14px; } .icoll-title { margin: 0; font-family: var(--font-serif); font-size: 24px; font-weight: 600; color: var(--text-strong); } .icoll-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; } .icoll-share, .icoll-menu { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-body); font: inherit; font-size: 13.5px; cursor: pointer; } .icoll-share svg { flex: none; } .icoll-menu { width: 35px; padding: 7px 0 9px; font-size: 18px; line-height: 1; } .icoll-share:hover, .icoll-menu:hover { background: var(--hover-bg); } .icoll-share:disabled { opacity: .45; cursor: default; } /* Collections empty state — bookmark SVG in a 58px circle (design/ImagesCollections). */ .icoll-empty__icon { width: 58px; height: 58px; margin-bottom: 14px; } .icoll-empty .state-message__title { font-size: 17px; } .icoll-empty .state-message__hint { max-width: 340px; } .icoll-switch { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; } .icoll-meta { margin: 4px 0 0; color: var(--text-muted); font-size: 13px; } .icoll-tab { padding: 7px 14px; border: none; border-radius: var(--u-rpill); background: transparent; color: var(--text-muted); font: inherit; font-size: 13.5px; cursor: pointer; font-variant-numeric: tabular-nums; } .icoll-tab:hover { color: var(--text-strong); background: var(--hover-bg); } .icoll-tab--active { color: var(--deep); font-weight: 600; background: color-mix(in srgb, var(--deep) 16%, transparent); } .icoll-tab--new { color: var(--text-faint); font-weight: 500; } .icoll-tile { position: relative; } .icoll-open { position: absolute; inset: 0; z-index: 1; } .icoll-del { position: absolute; top: 8px; right: 8px; z-index: 2; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: rgba(22,19,16,.55); color: #fff; cursor: pointer; line-height: 1; opacity: 0; transition: opacity .16s ease; } .icoll-del svg { display: block; } .icoll-tile:hover .icoll-del { opacity: 1; } .icoll-del:hover { background: rgba(150,40,30,.82); } .icoll-menu-pop { position: absolute; z-index: 5; margin-top: -10px; right: max(var(--page-pad), calc((100% - var(--img-col)) / 2)); display: flex; flex-direction: column; min-width: 180px; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-card); } .icoll-menu-pop button { border: 0; border-radius: 8px; padding: 9px 11px; background: transparent; color: var(--text-body); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; } .icoll-menu-pop button:hover { background: var(--hover-bg); } .icoll-dialog { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 20px; } .icoll-dialog[hidden] { display: none; } .icoll-dialog__backdrop { position: absolute; inset: 0; border: 0; background: rgba(10,9,8,.74); cursor: default; } .icoll-dialog__card { position: relative; z-index: 1; width: min(420px, 100%); padding: 24px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-card); } .icoll-dialog__card h2 { margin: 0 32px 8px 0; color: var(--text-strong); font-size: 20px; } .icoll-dialog__card p { margin: 0 0 16px; color: var(--text-muted); font-size: 13.5px; line-height: 1.45; } .icoll-dialog__card input { box-sizing: border-box; width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 11px; outline: none; background: var(--surface); color: var(--text-body); font: inherit; font-size: 14px; } .icoll-dialog__card input:focus { box-shadow: var(--focus-ring); } .icoll-dialog__close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); font-size: 22px; cursor: pointer; } .icoll-dialog__close:hover { background: var(--hover-bg); } .icoll-dialog__submit, .ishare-dialog__actions button { display: inline-flex; align-items: center; justify-content: center; margin-top: 12px; padding: 10px 16px; border: 0; border-radius: 10px; background: var(--deep); color: var(--on-deep); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .ishare-dialog__actions { display: flex; gap: 8px; } .ishare-dialog__actions button:last-child { background: var(--hover-bg); color: var(--text-body); } .ishare-dialog__notice { min-height: 19px; margin-top: 12px !important; } .ishare-head { margin: 8px 0 20px; } .ishare-head__eyebrow { margin: 0 0 5px; color: var(--text-muted); font-size: 13px; font-weight: 600; } .ishare-head h1 { margin: 0; color: var(--text-strong); font-family: var(--font-serif); font-size: 28px; } .ishare-head p { margin: 5px 0 0; color: var(--text-muted); font-size: 13.5px; } .ishare-tile { cursor: pointer; } @media (max-width: 640px) { .icoll-head { flex-direction: column; } .icoll-actions { justify-content: flex-start; } .icoll-title { font-size: 20px; } .icoll-menu-pop { right: 16px; } .icoll-dialog { padding: 16px; } .icoll-dialog__card { padding: 20px; } }