.lq-certificate-list { --lq-cert-card-bg: #ffffff; --lq-cert-border: #d7dde5; --lq-cert-title: #11151a; --lq-cert-subtitle: #4c5968; --lq-cert-text: #2a3340; --lq-cert-shadow: 0 10px 28px rgba(10, 20, 30, 0.08); --lq-cert-cols-desktop: 3; --lq-cert-cols-tablet: 2; --lq-cert-cols-mobile: 1; --lq-cert-gap: 24px; --lq-cert-justify: flex-start; --lq-cert-modal-max-width: 80vw; --lq-cert-modal-max-height: 82vh; --lq-cert-item-basis: calc( ( 100% - (var(--lq-cert-cols-desktop, 3) - 1) * var(--lq-cert-gap, 24px) ) / var(--lq-cert-cols-desktop, 3) ); margin: 0; max-width: 100%; } .lq-certificate-list__title { margin: 0 0 1.2rem; color: var(--lq-cert-title); font-size: clamp(1.35rem, 2.2vw, 1.9rem); line-height: 1.2; } .lq-certificate-list__grid { display: flex; flex-wrap: wrap; gap: var(--lq-cert-gap, 24px); justify-content: var(--lq-cert-justify, flex-start); align-items: stretch; width: 100%; max-width: 100%; box-sizing: border-box; } .lq-certificate-list__item, .lq-certificate-list__grid > .lq-certificate-card { display: flex; flex: 0 0 var(--lq-cert-item-basis); width: var(--lq-cert-item-basis); max-width: var(--lq-cert-item-basis); min-width: 0; box-sizing: border-box; } .lq-certificate-list__empty { margin: 0; padding: 0.95rem 1rem; border: 1px dashed var(--lq-cert-border); border-radius: 10px; background: #f8fafc; color: var(--lq-cert-subtitle); font-size: 0.98rem; } .lq-certificate-card { background: var(--lq-cert-card-bg); border: 1px solid var(--lq-cert-border); border-radius: 12px; overflow: hidden; min-width: 0; height: 100%; box-shadow: 0 2px 10px rgba(11, 22, 36, 0.04); transition: transform 0.18s ease, box-shadow 0.18s ease; } /* When the card wraps an inner link (EC), stretch the link to fill the item. */ .lq-certificate-list__item > .lq-certificate-card__link, .lq-certificate-list__item > .lq-certificate-card__link--static { width: 100%; } .lq-certificate-card:hover { transform: translateY(-2px); box-shadow: var(--lq-cert-shadow); } .lq-certificate-card__media { position: relative; background: #f1f4f8; width: 100%; max-width: 100%; overflow: hidden; box-sizing: border-box; } .lq-certificate-card__media.is-placeholder { display: flex; align-items: center; justify-content: center; min-height: 240px; } .lq-certificate-card__image-link { display: block; text-decoration: none; cursor: pointer; width: 100%; max-width: 100%; overflow: hidden; box-sizing: border-box; } .lq-certificate-card__image-link.is-disabled { cursor: default; } .lq-certificate-card__image-placeholder { width: 100%; min-height: 240px; display: flex; align-items: center; justify-content: center; padding: 1rem; color: var(--lq-cert-subtitle); font-size: 0.92rem; text-align: center; background: #eef2f6; } .lq-certificate-card__image { display: block; width: 100%; max-width: 100%; height: auto; box-sizing: border-box; } .lq-certificate-card__body { padding: 0.95rem 1rem 1.05rem; } .lq-certificate-card__title { margin: 0; color: var(--lq-cert-title); font-size: 1.05rem; line-height: 1.25; overflow-wrap: anywhere; word-break: break-word; } .lq-certificate-card__subtitle { margin: 0.35rem 0 0; color: var(--lq-cert-subtitle); font-size: 0.95rem; line-height: 1.35; overflow-wrap: anywhere; word-break: break-word; } .lq-certificate-card__excerpt { margin: 0.55rem 0 0; color: var(--lq-cert-text); font-size: 0.92rem; line-height: 1.45; overflow-wrap: anywhere; word-break: break-word; } .lq-certificate-card__notice { margin: 0.7rem 0 0; color: var(--lq-cert-subtitle); font-size: 0.88rem; line-height: 1.35; } /* PDF lightbox — always viewport-fixed (JS moves nodes under ). */ .lq-certificate-lightbox { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 999999; display: none; align-items: center; justify-content: center; width: 100vw; height: 100vh; height: 100dvh; max-width: 100vw; max-height: 100vh; max-height: 100dvh; margin: 0; padding: 3rem 1.5rem 1.5rem; box-sizing: border-box; transform: none; filter: none; perspective: none; overflow: hidden; } .lq-certificate-lightbox.is-open { display: flex; } .lq-certificate-lightbox__backdrop { position: absolute; inset: 0; background: rgba(5, 9, 14, 0.72); } .lq-certificate-lightbox__dialog { position: relative; z-index: 1; display: flex; flex-direction: column; width: min(1100px, var(--lq-cert-modal-max-width, 80vw), calc(100vw - 3rem)); height: min(800px, var(--lq-cert-modal-max-height, 82vh), calc(100vh - 4.5rem)); max-width: min(1100px, var(--lq-cert-modal-max-width, 80vw), calc(100vw - 3rem)); max-height: min(800px, var(--lq-cert-modal-max-height, 82vh), calc(100vh - 4.5rem)); margin: 0; padding: 0.5rem 0.5rem 0.75rem; border-radius: 12px; background: #ffffff; box-sizing: border-box; overflow: hidden; transform: none; } .lq-certificate-lightbox__pdf-wrap { flex: 1 1 auto; width: 100%; min-height: 0; height: auto; } .lq-certificate-lightbox__pdf, .lq-certificate-lightbox iframe, .lq-certificate-lightbox object, .lq-certificate-lightbox embed { display: block; width: 100%; height: 100%; border: 0; border-radius: 10px; background: #f4f6f9; } .lq-certificate-lightbox__actions { flex: 0 0 auto; margin: 0.55rem 0 0; text-align: right; font-size: 0.92rem; } .lq-certificate-lightbox__actions a { color: #0f5cbe; text-decoration: underline; } .lq-certificate-lightbox__close { position: absolute; right: 0; top: -2.35rem; z-index: 5; border: 0; background: transparent; color: #ffffff; font-size: 2rem; line-height: 1; cursor: pointer; } body.lq-certificate-lightbox-open { overflow: hidden; } @media (max-width: 991px) { .lq-certificate-list { --lq-cert-item-basis: calc( ( 100% - (var(--lq-cert-cols-tablet, 2) - 1) * var(--lq-cert-gap, 24px) ) / var(--lq-cert-cols-tablet, 2) ); } .lq-certificate-lightbox__dialog { width: min(1100px, 90vw, var(--lq-cert-modal-max-width, 90vw), calc(100vw - 3rem)); height: min(800px, 82vh, var(--lq-cert-modal-max-height, 82vh), calc(100vh - 4.5rem)); max-width: min(1100px, 90vw, var(--lq-cert-modal-max-width, 90vw), calc(100vw - 3rem)); max-height: min(800px, 82vh, var(--lq-cert-modal-max-height, 82vh), calc(100vh - 4.5rem)); } } @media (max-width: 767px) { .lq-certificate-list { --lq-cert-item-basis: calc( ( 100% - (var(--lq-cert-cols-mobile, 1) - 1) * var(--lq-cert-gap, 24px) ) / var(--lq-cert-cols-mobile, 1) ); } .lq-certificate-card__image-placeholder { min-height: 210px; } .lq-certificate-lightbox { padding: 2.75rem 0.75rem 0.75rem; } .lq-certificate-lightbox__dialog { width: min(1100px, 94vw, var(--lq-cert-modal-max-width, 94vw), calc(100vw - 1.5rem)); height: min(800px, 80vh, var(--lq-cert-modal-max-height, 80vh), calc(100vh - 3.75rem)); max-width: min(1100px, 94vw, var(--lq-cert-modal-max-width, 94vw), calc(100vw - 1.5rem)); max-height: min(800px, 80vh, var(--lq-cert-modal-max-height, 80vh), calc(100vh - 3.75rem)); border-radius: 8px; } .lq-certificate-lightbox__close { top: -2.1rem; right: 0; } } /* ------------------------------------------------------------------------- * EC template * Scoped under .lq-certificate-list--ec so Default visual styles remain. * Flex column counts come from shared layout vars above. * ------------------------------------------------------------------------- */ .lq-certificate-list--ec { --lq-cert-ec-navy: #10283d; --lq-cert-ec-lime: #c4d82e; --lq-cert-ec-lime-deep: #6f8f1f; --lq-cert-ec-gray: #687481; --lq-cert-ec-white: #ffffff; --lq-cert-ec-border: rgba(18, 42, 62, 0.14); --lq-cert-ec-shadow: 0 12px 32px rgba(18, 42, 62, 0.06); --lq-cert-ec-shadow-hover: 0 18px 42px rgba(18, 42, 62, 0.12); --lq-cert-ec-ease: cubic-bezier(0.4, 0, 0.2, 1); } .lq-certificate-list--ec .lq-certificate-list__grid { /* Inherit shared flex layout; keep EC gap default unless overridden by --lq-cert-gap. */ gap: var(--lq-cert-gap, 24px); } .lq-certificate-list--ec .lq-certificate-card, .lq-certificate-list--ec .lq-certificate-list__item { display: flex; flex-direction: column; align-self: stretch; min-width: 0; height: auto; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } .lq-certificate-list--ec .lq-certificate-card:hover { transform: none; box-shadow: none; } .lq-certificate-list--ec .lq-certificate-card__link { display: flex; flex-direction: column; flex: 1 1 auto; align-self: stretch; width: 100%; height: 100%; min-height: 100%; overflow: hidden; box-sizing: border-box; color: inherit; text-decoration: none; background: var(--lq-cert-ec-white); border: 1px solid var(--lq-cert-ec-border); border-radius: 8px; box-shadow: var(--lq-cert-ec-shadow); transition: transform 300ms var(--lq-cert-ec-ease), border-color 300ms var(--lq-cert-ec-ease), box-shadow 300ms var(--lq-cert-ec-ease); } .lq-certificate-list--ec .lq-certificate-card__link--static { cursor: default; } .lq-certificate-list--ec a.lq-certificate-card__link:hover, .lq-certificate-list--ec a.lq-certificate-card__link:focus-visible { transform: translateY(-4px); border-color: rgba(196, 216, 46, 0.8); box-shadow: var(--lq-cert-ec-shadow-hover); text-decoration: none; } .lq-certificate-list--ec a.lq-certificate-card__link:focus-visible { outline: 3px solid var(--lq-cert-ec-navy); outline-offset: 3px; } .lq-certificate-list--ec .lq-certificate-card__media { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; padding: 24px 24px 12px; background: linear-gradient(180deg, rgba(247, 249, 250, 1) 0%, rgba(255, 255, 255, 1) 100%); width: 100%; max-width: 100%; overflow: hidden; } .lq-certificate-list--ec .lq-certificate-card__media.is-placeholder { min-height: 0; } .lq-certificate-list--ec .lq-certificate-card__image-wrap { width: 100%; aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; overflow: hidden; } .lq-certificate-list--ec .lq-certificate-card__image { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; object-position: center; } .lq-certificate-list--ec .lq-certificate-card__image-placeholder { width: 100%; min-height: 220px; aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; padding: 1rem; color: var(--lq-cert-ec-gray); font-size: 0.92rem; text-align: center; background: transparent; } .lq-certificate-list--ec .lq-certificate-card__content, .lq-certificate-list--ec .lq-certificate-card__body { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 24px 48px 26px 26px; border-top: 1px solid rgba(18, 42, 62, 0.08); } .lq-certificate-list--ec .lq-certificate-card__body::before { content: ""; position: absolute; top: -2px; left: 26px; width: 44px; height: 3px; background: var(--lq-cert-ec-lime); } .lq-certificate-list--ec .lq-certificate-card__title { margin: 0; color: var(--lq-cert-ec-navy); font-size: clamp(20px, 1.5vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: break-word; word-break: normal; } .lq-certificate-list--ec .lq-certificate-card__subtitle { margin: 8px 0 0; color: var(--lq-cert-ec-gray); font-size: 15px; font-weight: 400; line-height: 1.45; overflow-wrap: break-word; word-break: normal; } .lq-certificate-list--ec .lq-certificate-card__excerpt { margin: 10px 0 0; color: var(--lq-cert-ec-gray); font-size: 14px; line-height: 1.45; } .lq-certificate-list--ec .lq-certificate-card__notice { margin: 12px 0 0; color: var(--lq-cert-ec-gray); font-size: 0.88rem; line-height: 1.35; } /* Keep arrow pinned to the bottom of the equal-height body. */ .lq-certificate-list--ec .lq-certificate-card__arrow { position: absolute; right: 24px; bottom: 24px; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-top: auto; color: var(--lq-cert-ec-lime-deep); transition: transform 300ms var(--lq-cert-ec-ease); } .lq-certificate-list--ec .lq-certificate-card__arrow svg { display: block; width: 100%; height: 100%; } .lq-certificate-list--ec a.lq-certificate-card__link:hover .lq-certificate-card__arrow, .lq-certificate-list--ec a.lq-certificate-card__link:focus-visible .lq-certificate-card__arrow { transform: translateX(4px); } .lq-certificate-list--ec .lq-certificate-list__item--no-link .lq-certificate-card__link:hover, .lq-certificate-list--ec .lq-certificate-list__item--no-link .lq-certificate-card__link:focus-visible { transform: none; border-color: var(--lq-cert-ec-border); box-shadow: var(--lq-cert-ec-shadow); } @media (max-width: 767px) { .lq-certificate-list--ec .lq-certificate-card__media { padding: 20px 20px 10px; } .lq-certificate-list--ec .lq-certificate-card__content, .lq-certificate-list--ec .lq-certificate-card__body { padding: 22px 44px 22px 22px; } .lq-certificate-list--ec .lq-certificate-card__body::before { left: 22px; } .lq-certificate-list--ec .lq-certificate-card__arrow { right: 22px; bottom: 22px; } } @media (prefers-reduced-motion: reduce) { .lq-certificate-list--ec .lq-certificate-card__link, .lq-certificate-list--ec .lq-certificate-card__arrow { transition-duration: 0ms; } .lq-certificate-list--ec a.lq-certificate-card__link:hover, .lq-certificate-list--ec a.lq-certificate-card__link:focus-visible { transform: none; } .lq-certificate-list--ec a.lq-certificate-card__link:hover .lq-certificate-card__arrow, .lq-certificate-list--ec a.lq-certificate-card__link:focus-visible .lq-certificate-card__arrow { transform: none; } }