/*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *, w3m-modal)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } @font-face { font-family: Pretendard; font-weight: 45 920; font-style: normal; font-display: swap; src: url("/fonts/pretendard.woff2") format("woff2-variations"); } @keyframes rotate-material-loading-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(270deg); } } @keyframes rotate-material-loading-spinner-dash { 0% { stroke-dashoffset: 187; } 50% { stroke-dashoffset: 46.75; transform: rotate(135deg); } 100% { stroke-dashoffset: 187; transform: rotate(450deg); } } .material-loading-spinner { display: flex; max-width: 24px; max-height: 24px; } .material-loading-spinner > svg { animation: rotate-material-loading-spinner 1.4s linear infinite; } .material-loading-spinner > svg > circle { stroke-dasharray: 187; stroke-dashoffset: 0; transform-origin: center; animation: rotate-material-loading-spinner-dash 1.4s ease-in-out infinite; stroke: var(--loading-spinner-color); } button.contained .material-loading-spinner > svg > circle { stroke: var(--loading-spinner-on-contained-button-color); } :root { --primary-color: #f7d602; --line-color: #eee; --page-bg-color: #fff; --paragraph-text-color: #333d4b; --secondary-text-color: rgba(0, 0, 0, 0.6); /* App Components */ --overlay-color: rgba(0, 0, 0, 0.2); --modal-bg-color: #fff; --contained-button-bg-color: var(--primary-color); --contained-button-text-color: #000; --contained-button-hover-bg-color: #eacb00; --contained-button-disabled-bg-color: rgba(0, 0, 0, 0.26); --outlined-button-border-color: var(--line-color); --outlined-button-bg-color: transparent; --outlined-button-text-color: #000; --outlined-button-hover-border-color: var(--line-color); --outlined-button-hover-bg-color: rgba(0, 0, 0, 0.08); --outlined-button-disabled-bg-color: rgba(0, 0, 0, 0.26); --icon-button-bg-color: var(--page-bg-color); --icon-button-text-color: #000; --icon-button-hover-bg-color: #e9e9e9; --icon-button-disabled-bg-color: rgba(0, 0, 0, 0.26); --loading-spinner-color: #000; --loading-spinner-on-contained-button-color: #fff; } [data-theme="dark"] { --line-color: #333; --page-bg-color: #060505; --paragraph-text-color: #fff; --secondary-text-color: rgba(255, 255, 255, 0.7); /* App Components */ --icon-button-bg-color: --page-bg-color; --icon-button-text-color: #fff; --icon-button-hover-bg-color: #222; --icon-button-disabled-bg-color: rgba(0, 0, 0, 0.26); } *, *::before, *::after { -webkit-tap-highlight-color: transparent; } :root { background-color: var(--page-bg-color); } html, body { min-height: 100dvh; min-height: -webkit-fill-available; } body { color: var(--paragraph-text-color); font-family: Pretendard, sans-serif; font-size: 16px; font-weight: 400; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; container-type: inline-size; } p { line-height: 1.6; } a { cursor: pointer; } button, a.button { background-color: var(--primary-color); color: #000; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; padding-left: 22px; padding-right: 22px; min-height: 50px; border-radius: 8px; transition: background-color 0.2s linear; } button > .icon-container, a.button > .icon-container { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; } button > .icon-container > .icon, a.button > .icon-container > .icon { width: 100%; height: 100%; border-radius: 50%; } button > .icon-container > .icon > svg, a.button > .icon-container > .icon > svg { width: 100%; height: 100%; border-radius: 50%; } button.contained, a.button.contained { background-color: var(--contained-button-bg-color); color: var(--contained-button-text-color); } @media (pointer: fine) { button.contained:hover, a.button.contained:hover { background-color: var(--contained-button-hover-bg-color); } } button.contained:active, a.button.contained:active { background-color: var(--contained-button-hover-bg-color); } button.contained.disabled, a.button.contained.disabled { background-color: var(--contained-button-disabled-bg-color); } button.outlined, a.button.outlined { border: 1px solid var(--outlined-button-border-color); background-color: var(--outlined-button-bg-color); color: var(--outlined-button-text-color); } @media (pointer: fine) { button.outlined:hover:not(.disabled), a.button.outlined:hover:not(.disabled) { border-color: var(--outlined-button-hover-border-color); background-color: var(--outlined-button-hover-bg-color); } } button.outlined:active:not(.disabled), a.button.outlined:active:not(.disabled) { border-color: var(--outlined-button-hover-border-color); background-color: var(--outlined-button-hover-bg-color); } button.outlined.disabled, a.button.outlined.disabled { background-color: var(--outlined-button-disabled-bg-color); } button.icon, a.button.icon { padding: 0; width: 32px; height: 32px; min-height: 32px; border-radius: 50%; background-color: var(--icon-button-bg-color); color: var(--icon-button-text-color); } @media (pointer: fine) { button.icon:hover, a.button.icon:hover { background-color: var(--icon-button-hover-bg-color); } } button.icon:active, a.button.icon:active { background-color: var(--icon-button-hover-bg-color); } button.icon.disabled, a.button.icon.disabled { background-color: var(--icon-button-disabled-bg-color); } .button-group { display: flex; flex-direction: column; } .button-group > button { margin-bottom: -1px; border-radius: 0; justify-content: start; } .button-group > button:first-child { border-top-left-radius: 16px; border-top-right-radius: 16px; } .button-group > button:last-child { margin-bottom: 0; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; } .non-modal-dialog-container:has(*) { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999; backdrop-filter: blur(50px); background-color: var(--overlay-color); animation: fade-in 0.3s ease-out; display: flex; align-items: center; justify-content: center; } .non-modal-dialog-container:has(*) > dialog { margin: 21px auto; max-height: calc(100% - 42px); } dialog.modal { width: 90%; max-width: 600px; border-radius: 8px; background-color: var(--modal-bg-color); color: var(--paragraph-text-color); animation: fade-in 0.3s ease-out; container-type: inline-size; } dialog.modal::backdrop { backdrop-filter: blur(50px); background-color: var(--overlay-color); animation: fade-in 0.3s ease-out; } dialog.modal:not([open]) { display: none !important; } dialog.modal.structured-modal { display: flex; flex-direction: column; } dialog.modal.structured-modal > header { flex-shrink: 0; padding: 34px; font-size: 20px; font-weight: bold; } @container (width <= 520px) { dialog.modal.structured-modal > header { font-size: 18px; padding: 34px 24px; } } dialog.modal.structured-modal > main { overflow-y: auto; flex-grow: 1; padding: 0 34px; } @container (width <= 520px) { dialog.modal.structured-modal > main { padding: 0 24px; } } dialog.modal.structured-modal > footer { flex-shrink: 0; padding: 24px 34px; display: flex; align-items: center; justify-content: flex-end; gap: 16px; } @container (width <= 520px) { dialog.modal.structured-modal > footer { padding: 24px; } } .non-modal-dialog-container:has(.kaia-wallet-connection-modal), .non-modal-dialog-container:has(.kaia-wallet-login-modal) { z-index: 99997; } .kaia-wallet-connection-modal, .kaia-wallet-login-modal { max-width: 480px !important; } .kaia-wallet-connection-modal > main > .button-group > button, .kaia-wallet-login-modal > main > .button-group > button { gap: 12px; } .kaia-wallet-connection-modal > main > .button-group > button > .icon-container, .kaia-wallet-login-modal > main > .button-group > button > .icon-container { width: 40px; height: 40px; } @font-face { font-family: neodgm; src: url("https://matedevdao.github.io/static-kaia-nft-assets/sigor-sparrows/fonts/neodgm.woff2") format("woff2"); } .kaia-nft-display > img { width: 100%; height: 100%; object-fit: cover; } .kaia-nft-display > img.pixel-art { image-rendering: pixelated; } .nft-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 13.5px; } .sigor-sparrow-preview { position: relative; } .sigor-sparrow-preview > .dialogue { position: absolute; left: 50%; top: 21%; transform: translate(-50%, -50%); font-family: neodgm; color: #000; font-size: 8px; } .login-required-view { display: flex; flex-direction: column; gap: 20px; justify-content: center; align-items: center; height: 100vh; } .login-required-view > h1 { font-size: 24px; } .layout > header { position: sticky; top: 0; z-index: 10; background-color: var(--page-bg-color); border-bottom: 1px solid var(--line-color); padding: 0 30px; height: 70px; display: flex; align-items: center; justify-content: space-between; } .layout > header > h1 { font-size: 24px; font-weight: 600; } @container (width < 520px) { .layout > header { padding: 20px; } } .layout > main { max-width: 1200px; margin: 0 auto; padding: 60px 30px; display: flex; flex-direction: column; gap: 60px; } @container (width < 520px) { .layout > main { padding: 40px 20px; gap: 40px; } } .layout > main section { display: flex; flex-direction: column; gap: 16px; } .layout > main section .asterisk { color: var(--secondary-text-color); font-size: 14px; } .layout > main .services > h2 { font-size: 24px; font-weight: 600; } .layout > main .services ul { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 24px; } @container (width < 800px) { .layout > main .services ul { grid-template-columns: 1fr; } } .layout > main .services ul > li { display: flex; align-items: center; gap: 24px; border-top: 1px solid var(--line-color); border-bottom: 1px solid var(--line-color); margin-bottom: -1px; padding: 16px 16px 16px 0; } @container (width < 520px) { .layout > main .services ul > li { padding: 16px 0; } } .layout > main .services ul > li > .info { flex-grow: 1; display: flex; flex-direction: column; gap: 8px; } .layout > main .services ul > li > .info > h3 { font-weight: 600; } @container (width < 520px) { .layout > main .services ul > li > .info > h3 { font-size: 14px; } } .layout > main .services ul > li > .info > p { color: var(--secondary-text-color); font-size: 14px; } @container (width < 520px) { .layout > main .services ul > li > .info > p { font-size: 12px; } } .layout > main .services img { width: 68px; height: 68px; border-radius: 16px; } .layout > footer { border-top: 1px solid var(--line-color); max-width: 1200px; margin: 0 auto; padding: 22px 30px; display: flex; justify-content: space-between; padding-bottom: 120px; } @container (width < 520px) { .layout > footer { padding: 20px; padding-bottom: 80px; } } .layout > footer > .social { display: flex; gap: 8px; } .home-view .nft-list-item { cursor: pointer; }