.section-content-about-app .btn-primary{margin-bottom: 40px;} .item-background-shortlink, .item-background-statics-site, .item-background-qrcodes, .item-background-eventlink, .item-background-vcard-link, .item-background-filelink, .item-background-linkbio{ min-height: 328px; } .list-category-template .title{ color: var(--gray-900); font-size: 28px; font-weight: 600; letter-spacing: -0.5px; line-height: 36px; line-height: 24px; padding-bottom: 20px; } .item-category-template ul { display: flex; align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: wrap; } .item-category-template ul li{ border: 1px solid var(--gray-400); padding: 12px; border-radius: 30px; font-size: 16px; font-weight: 600; color: var(--gray-600); } .item-category-template ul li:hover{ background:var(--gray-900); } .item-category-template ul li:hover a{ color:var(--white); } .item-category-template ul li a{ color: var(--gray-600); padding: 8px; } .list-template-bisu-ldp { gap: 15px; grid-template-columns: repeat(2, 1fr); display: grid; } .list-template-bisu-ldp img{ width:100%; height:auto; } .item-teamplte-bisu .info-template{ position: relative; width: 100%; overflow: hidden; height: auto; display: block; border-radius: 12px; border: 1px solid var(--gray-300); } .item-teamplte-bisu .info-template img { transition: transform 0.3s ease, filter 0.3s ease; } .item-teamplte-bisu .info-template:hover img { transform: scale(1.1); filter: blur(8px); opacity: 0.5; } .item-teamplte-bisu .info-template .title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--gray-900); font-size: 18px; font-weight: bold; opacity: 0; transition: opacity 0.3s ease; font-size: 18px; letter-spacing: -0.5px; } .item-teamplte-bisu .info-template:hover .title { opacity: 1; } .item-teamplte-bisu .title-detail-template{ padding-top: 8px; font-size: 18px; font-weight: 600; color: var(--gray-900); } .popup-template-bisu { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.5); animation: fadeIn 0.3s; } .popup-content-template { margin: auto; padding: 0; width: 100%; height: 90%; background-color: #fff; border-radius: 8px; overflow: hidden; animation: slideUp 0.5s ease-out; position: absolute; bottom: 0; } .close-button { position: absolute; top: 10px; right: 20px; color: #aaa; font-size: 28px; font-weight: bold; cursor: pointer; z-index: 1001; } .close-button:hover, .close-button:focus { color: #000; text-decoration: none; } .popup-content-template iframe { width: 100%; height: 100%; border: none; } #closePopupTemplate{ position: absolute; border: 1px solid var(--gray-300); background: var(--white); border-radius: 50px; right: 40px; top: 20px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; } #closePopupTemplate svg{ width: 24px; height: 24px; } .list-category-template{ position: unset; margin-top:40px; } .loading-indicator { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; flex-direction: column; align-items: center; z-index: 1001; } .spinner { width: 40px; height: 40px; border: 4px solid #ccc; border-top-color: var(--gray-900); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 10px; } @keyframes spin { to { transform: rotate(360deg); } } #popupIframe { width: 100%; height: 100%; border: none; flex-grow: 1; display: none; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .detail-blog-content-template{ width: 100%; margin: 0 auto; margin-bottom: 32px; color: var(--gray-600); line-height: 150%; font-size: 16px; text-align: center; font-weight: 500; } .title-page-post-template{ color: var(--gray-900); width: 100%; max-width: 100%; letter-spacing: -.04em; font-size: 32px; font-weight: 600; line-height: 110%; text-align: center; margin-bottom: 0; } .list-item-info-detail-template-bisu{ grid-template-areas: "breadcrumb" "content" "iframe" "linkApps" "ctaButton" "tags"; display: grid; max-width: 1200px; margin: 0px auto; grid-template-columns: 3fr 1fr; } .list-item-info-detail-template-bisu .btn-primary{ margin-top: 40px; } .iframe-template-biostyle iframe{ width: 375px; height: 790px; border-radius: 32px; } .breadcrumb-menu-template ul, .breadcrumb-menu-template a{ color:var(--gray-900); } .list-item-info-detail-template-bisu h1{ font-size: 84px; line-height: 100%; letter-spacing: -2px; font-weight: 700; margin-bottom: 32px; color: var(--gray-900); margin-top: 20px; } .list-item-info-detail-template-bisu .content{ font-size: 16px; color: var(--gray-900); line-height: 24px; padding-bottom: 40px; font-weight: 500; } @media only screen and (min-width: 992px) { .list-template-bisu-ldp { grid-template-columns: repeat(3, 1fr); gap: 64px 32px; } .list-item-info-detail-template-bisu .btn-primary{ margin-top: 0px; } .list-item-info-detail-template-bisu{ grid-template-areas: "breadcrumb . ." "content . iframe" "ctaButton . iframe" "linkApps . iframe" "tags . iframe"; display: grid; max-width: 1200px; margin: 0px auto; grid-template-columns: 3fr 1fr; } .item-teamplte-bisu .info-template{ border-radius: 32px; } .list-category-template{ position: sticky; top: 100px; margin-top:0; } .detail-blog-content-template{ width: 70%; } .title-page-post-template{ font-size: 84px; line-height: 100%; margin-bottom: 1rem; letter-spacing: -2px; font-weight: 700; max-width:80%; margin:0 auto; } } @media only screen and (min-width: 1200px) { .item-background-shortlink, .item-background-statics-site, .item-background-qrcodes, .item-background-eventlink, .item-background-vcard-link, .item-background-filelink, .item-background-linkbio{ min-height: 642px; } }