/* Картка каталогу, відтворена з поточного Framer-компонента на своїй розмітці. Винятки 18/20px лишені навмисно для піксельної відповідності. */ .uib-card-item { width: 100%; min-width: 0; padding: 1px 1px 12px; /* grid-ok: рамка оригінальної картки */ display: flex; flex-direction: column; gap: var(--s-2); overflow: hidden; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 20px; /* grid-ok: поточний радіус картки */ } .uib-card-item-bare { padding: 0; border: 0; border-radius: 20px; /* grid-ok: поточний радіус картки */ } .uib-card { position: relative; width: 100%; height: auto; aspect-ratio: 342 / 250; flex: none; overflow: hidden; cursor: pointer; background: #fff; border-radius: 20px 20px 0 0; /* grid-ok: поточний радіус картки */ } .uib-card-item-bare .uib-card { border-radius: 20px } /* grid-ok */ .uib-card-media { position: absolute; inset: 4px; overflow: hidden; border-radius: 18px 18px 0 0; /* grid-ok: поточний внутрішній радіус */ } .uib-card-item-bare .uib-card-media { border-radius: 18px } /* grid-ok */ .uib-card-image { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; } .uib-card-shade { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; background: rgba(0, 0, 0, 0.2); transition: opacity 0.25s ease; } .uib-card-actions { position: absolute; z-index: 2; left: 50%; top: 50%; display: flex; align-items: center; gap: var(--s-4); width: max-content; opacity: 0; pointer-events: none; transform: translate(-50%, -50%); transition: opacity 0.25s ease; } .uib-card:hover .uib-card-shade, .uib-card:focus-within .uib-card-shade, .uib-card:hover .uib-card-actions, .uib-card:focus-within .uib-card-actions { opacity: 1 } .uib-card:hover .uib-card-shade, .uib-card:focus-within .uib-card-shade { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .uib-card:hover .uib-card-actions, .uib-card:focus-within .uib-card-actions { pointer-events: auto } .uib-card-copy, .uib-card-preview { height: 40px; display: inline-flex; align-items: center; justify-content: center; flex: none; color: #000; background: #fff; border: 1px solid #000; cursor: pointer; font: 400 var(--t-sm)/var(--lh-sm) Inter, var(--font); transition: background-color 0.16s ease, transform 0.05s ease; } .uib-card-copy { position: relative; width: 160px; padding: var(--s-2) var(--s-4); border-radius: var(--r-3); } .uib-card-preview { width: 42px; /* grid-ok: поточний контейнер кнопки */ height: 42px; /* grid-ok: поточний контейнер кнопки */ padding: 0; border-color: transparent; border-radius: 10px; /* grid-ok: поточний радіус кнопки */ } .uib-card-copy:hover, .uib-card-preview:hover { background: #f0f0f0 } .uib-card-copy:active, .uib-card-preview:active { transform: translateY(1px) } .uib-card-copy:focus-visible, .uib-card-preview:focus-visible { outline: 2px solid #000; outline-offset: 2px } .uib-card-preview svg { width: 22px; height: 15px; fill: currentColor } .uib-card-copy-icon { width: var(--t-lg); height: var(--t-lg); margin-right: var(--s-2); display: block; flex: none; } .uib-card-figma { width: 100%; height: 100%; display: none } .uib-card[data-card-state="unlocked"] .uib-card-figma-color, .uib-card[data-card-state="locked"] .uib-card-figma-mono { display: block } .uib-card-copy-labels { display: inline-grid; flex: 1; justify-items: center; } .uib-card-copy-labels > span { display: none; grid-area: 1 / 1; white-space: nowrap } /* Стан «тариф ще невідомий» (html[data-uib-access]) навмисно лежить не тут, а вбудованим стилем у (app/server.mjs): цей файл приходить окремим запитом, і перший кадр встигав показати «Available on Pro» своєму ж PRO. Там же він написаний без згадки data-card-state — рядок «data-card-state= "locked"» у розмітці має означати справжню замкнену картку, а не правило стилю (по ньому рахують і тести, і перевірки гейта). */ .uib-card[data-card-state="unlocked"] [data-card-label="copy"], .uib-card[data-card-state="locked"] [data-card-label="pro"], .uib-card-copy[data-feedback="copied"] [data-card-label="copied"], .uib-card-copy[data-feedback="failed"] [data-card-label="failed"] { display: block } .uib-card-copy[data-feedback] [data-card-label="copy"], .uib-card-copy[data-feedback] [data-card-label="pro"] { display: none } .uib-card-pro { position: absolute; right: -8px; top: -8px; padding: 2px 6px; /* grid-ok: поточний PRO-чип */ color: #fff; background: #f24e1e; border-radius: var(--r-3); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* grid-ok: поточна тінь */ font-size: 10px; /* grid-ok: поточний PRO-чип */ font-weight: 600; line-height: 14px; /* grid-ok: поточний PRO-чип */ pointer-events: none; } .uib-card[data-card-state="unlocked"] .uib-card-pro { display: none } .uib-card-badge-slot { position: absolute; z-index: 3; top: var(--s-2); left: var(--s-2) } .uib-card-badge { min-width: 46px; height: 24px; padding: 0 6px; /* grid-ok: поточний чип */ display: inline-flex; align-items: center; gap: var(--s-1); overflow: hidden; color: #089cff; background: #e3f4ff; border: 1px solid #63c1ff; border-radius: var(--r-pill); font: 700 var(--t-xs)/var(--lh-xs) Inter, var(--font); letter-spacing: -0.3px; /* grid-ok: поточний трекінг */ white-space: nowrap; transition: width 0.22s cubic-bezier(0.22, 1, 0.36, 1); } .uib-card-badge[data-kind="ai"] { color: #6d4ceb; background: #eee9ff; border-color: #a78bfa } .uib-card-badge svg { width: 14px; height: 14px; flex: none } .uib-card-badge-long { display: none } .uib-card-badge:hover .uib-card-badge-short { display: none } .uib-card-badge:hover .uib-card-badge-long { display: inline } .uib-card-info { min-width: 0; padding-left: var(--s-4); display: flex; flex-direction: column; align-items: flex-start; } .uib-card-title { max-width: 100%; margin: 0; overflow: hidden; color: #525866; font: 400 13px/16px "Inter Display", Inter, var(--font); /* grid-ok: поточний кегль */ letter-spacing: -0.3px; /* grid-ok: поточний трекінг */ text-overflow: ellipsis; white-space: nowrap; } .uib-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { .uib-card-shade, .uib-card-actions, .uib-card-badge { transition-duration: 0.01ms } }