body.ia-card-facts-open { overflow: hidden; } .ia-card-facts-overlay { position: fixed; z-index: var(--isl-layer-dialog, 300000); inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(2, 10, 23, .72); -webkit-backdrop-filter: blur(13px) saturate(.82); backdrop-filter: blur(13px) saturate(.82); } .ia-card-facts-overlay[hidden] { display: none; } .ia-card-facts-panel { width: min(520px, 100%); max-height: min(720px, calc(100dvh - 36px)); overflow: auto; border: 1px solid rgba(143, 174, 204, .52); border-radius: 22px; background: linear-gradient(145deg, rgba(25, 51, 82, .98), rgba(8, 24, 45, .98)); color: #f5f8fc; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 30px 72px rgba(0,0,0,.48); } .ia-card-facts-header { display: grid; grid-template-columns: minmax(0,1fr) 42px; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid rgba(161, 190, 218, .24); } .ia-card-facts-header span { color: #83b9ec; font-size: .66rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; } .ia-card-facts-header h2 { overflow: hidden; margin: 3px 0 0; font-size: 1.28rem; line-height: 1.13; text-overflow: ellipsis; white-space: nowrap; } .ia-card-facts-header button { width: 42px; height: 42px; border: 1px solid rgba(176,204,230,.42); border-radius: 13px; background: linear-gradient(145deg, #3b5875, #142d49); color: #fff; cursor: pointer; box-shadow: inset 0 1px rgba(255,255,255,.22), 0 8px 18px rgba(0,0,0,.28); } .ia-card-facts-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin: 0; padding: 18px 20px 12px; } .ia-card-facts-grid > div { min-width: 0; padding: 10px 12px; border: 1px solid rgba(150,184,214,.22); border-radius: 13px; background: rgba(255,255,255,.055); } .ia-card-facts-grid dt { color: #91a8c0; font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .ia-card-facts-grid dd { overflow: hidden; margin: 4px 0 0; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; } .ia-card-facts-grid .ia-card-facts-wide { grid-column: 1/-1; } .ia-card-facts-detail { display: block; width: max-content; margin: 2px auto 18px; color: #fff; font-weight: 900; text-decoration: none; } .ia-card-facts-detail:hover { text-decoration: underline; text-underline-offset: 4px; } [data-theme="light"] .ia-card-facts-panel { background: linear-gradient(145deg, rgba(250,252,255,.99), rgba(224,233,242,.99)); color: #0b2444; } [data-theme="light"] .ia-card-facts-detail { color: #0b2444; } .ia-card-facts-grid > [hidden] { display: none; } @media (max-width: 760px) { .ia-card-facts-overlay { align-items: center; padding: 10px; } .ia-card-facts-panel { width: 100%; max-height: calc(100dvh - 20px); border-radius: 22px; } .ia-card-facts-header { padding: 16px; } .ia-card-facts-grid { gap: 7px; padding: 14px 16px 10px; } .ia-card-facts-grid > div { padding: 9px 10px; } } .ia-card-facts-header { position: sticky; top: 0; z-index: 2; background: rgba(25, 51, 82, .99); } [data-theme="light"] .ia-card-facts-header { background: rgba(250, 252, 255, .99); } @media (max-height: 500px) { .ia-card-facts-overlay { align-items: center; padding: 8px; } .ia-card-facts-panel { max-height: calc(100dvh - 16px); } .ia-card-facts-header { padding: 11px 20px; } .ia-card-facts-header h2 { font-size: 1.12rem; } .ia-card-facts-grid { gap: 6px; padding: 10px 12px 8px; } .ia-card-facts-grid > div { padding: 7px 9px; } .ia-card-facts-detail { margin: 0 auto 10px; } } @media (max-height: 500px) and (min-width: 680px) { .ia-card-facts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .ia-card-facts-body { display: grid; } .ia-card-facts-figure { margin: 0; display: grid; place-items: center; min-height: 0; padding: 16px 4px 16px 18px; } .ia-card-facts-figure[hidden] { display: none; } .ia-card-facts-figure img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; box-shadow: 0 10px 26px rgba(0, 0, 0, .34); } @media (min-width: 700px) { .ia-card-facts-panel { width: min(880px, 100%); } .ia-card-facts-overlay.has-photo .ia-card-facts-body { grid-template-columns: minmax(190px, 32%) minmax(0, 1fr); align-items: stretch; } .ia-card-facts-overlay.has-photo .ia-card-facts-grid { padding-left: 14px; align-content: start; } } @media (min-width: 700px) and (max-height: 560px) { .ia-card-facts-overlay.has-photo .ia-card-facts-body { grid-template-columns: minmax(140px, 24%) minmax(0, 1fr); } .ia-card-facts-figure { padding: 12px 2px 12px 14px; } } @media (max-width: 699px) { .ia-card-facts-figure { display: none !important; } } .ia-card-facts-overlay { background: var(--isl-dialog-scrim, rgba(2,10,23,.72)); -webkit-backdrop-filter: var(--isl-dialog-blur, blur(13px) saturate(.82)); backdrop-filter: var(--isl-dialog-blur, blur(13px) saturate(.82)); padding-top: calc(18px + var(--isl-dialog-safe-t, 0px)); padding-bottom: calc(18px + var(--isl-dialog-safe-b, 0px)); } .ia-card-facts-panel { border: var(--isl-dialog-border, 1px solid rgba(143,174,204,.52)); border-radius: var(--isl-dialog-radius, 22px); background: var(--isl-dialog-surface, linear-gradient(145deg, rgba(25,51,82,.98), rgba(8,24,45,.98))); color: var(--isl-dialog-ink, #f5f8fc); box-shadow: var(--isl-dialog-shadow, inset 0 1px 0 rgba(255,255,255,.16), 0 30px 72px rgba(0,0,0,.48)); } .ia-card-facts-header button { border-radius: 14px; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; } .ia-card-facts-header button:active { transform: scale(.94); } .ia-card-facts-grid > div { transition: border-color .14s ease, background .14s ease; } .ia-card-facts-grid > div:hover { border-color: rgba(150, 184, 214, .38); background: rgba(255, 255, 255, .085); } [data-theme="light"] .ia-card-facts-grid > div:hover { border-color: rgba(90, 125, 165, .34); background: rgba(255, 255, 255, .8); } .ia-card-facts-grid dd { font-size: 1.02rem; letter-spacing: -.01em; } .ia-card-facts-detail { padding: 9px 18px; border: var(--isl-dialog-border, 1px solid rgba(143,174,204,.52)); border-radius: 999px; transition: transform .12s ease, background .12s ease; } .ia-card-facts-detail:hover { text-decoration: none; background: rgba(255,255,255,.08); } .ia-card-facts-detail:active { transform: scale(.97); } .ia-card-facts-actions { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 2px 16px 18px; } .ia-card-facts-actions .ia-card-facts-detail { margin: 0; } .ia-card-facts-actions form[hidden] { display: none; } .ia-card-facts-cart-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 18px; border: 1px solid rgba(112,220,158,.58); border-radius: 999px; background: linear-gradient(145deg,#55d48b,#268755); color: #061d13; font: inherit; font-weight: 950; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.3),0 7px 16px rgba(20,104,62,.28); } .ia-card-facts-cart-button.added { border-color: rgba(151,179,209,.5); background: linear-gradient(145deg,#48637e,#203a56); color: #f3f7fb; } .ia-card-facts-cart-button:active { transform: scale(.97); } @media (max-width: 420px) { .ia-card-facts-actions { align-items: stretch; flex-direction: column; } .ia-card-facts-actions .ia-card-facts-detail, .ia-card-facts-actions form, .ia-card-facts-cart-button { width: 100%; text-align: center; } } .ia-card-facts-grid dd.is-clipped { cursor: help; } .ia-card-facts-grid dd.is-clipped::after { content: ""; display: inline-block; width: 0; }