/* 1. General */ body { background-color: #f7f7f7; } a[disabled] { cursor: default; } #firstHeading { display: none !important; } #mw-content-text h3 { padding: .24em 0 !important; color: #333; margin-top: 1.1em; margin-bottom: 0.9em; font-size: 17px; font-weight: bold; border: none; } .sections-wrapper h2 { font-size: 30px !important; text-align: center; border-bottom: none; margin-bottom: 30px !important; overflow: visible; } .sections-wrapper h2 a { font-size: inherit !important; } .sections-wrapper p, .sections-wrapper a { font-size: 17px !important; } .inner-wrapper { margin-left: auto; margin-right: auto; } .image-wrapper { display: block; width: 100%; position: relative; } .section-download .image-wrapper { padding-top: 100%; } .section-features .image-wrapper, .section-values .image-wrapper, .section-upcoming .image-wrapper { padding-top: 70%; } .section-features .image-wrapper, .section-values .image-wrapper { display: block; width: calc(100% + 36px); margin: -10px 0 0 -18px; } .col-container .image-wrapper img.image { height: 100%; position: absolute; top: 0; left: 0; } /* 1.1. Dark Section */ .dark-section { background: #554E83; color: white; text-align: center; padding: 1px 0 31px; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw + 8px); margin-top: 10px; margin-bottom: 0px; } .dark-section > .inner-wrapper { max-width: 960px; } .dark-section > .inner-wrapper > h2, .dark-section > .inner-wrapper > p { color: white !important; } .dark-section a:not(.mw-collapsible-text) { color: #c3ddff !important; } /* 1.2. Share Tooltip Modifications */ :not(#custom-footer .main-claim .headline) > .share-tooltip .button { width: 1em !important; height: 1em !important; padding-bottom: .2em !important; margin-bottom: -.3em !important; } .dark-section .share-tooltip .button, .dark-section a.share-tooltip:not(.fully-enriched) { filter: brightness( 2 ); margin-left: 8px; } .sections-wrapper > :not(.dark-section) .share-tooltip .button, .sections-wrapper > :not(.dark-section) a.share-tooltip:not(.fully-enriched) { filter: sepia(1) hue-rotate(169deg) saturate(4) brightness(0.85); margin-left: 8px; } /* 1.3. Col Container Modifications */ .col-container > * { transition: transform .3s; } .col-container.cc-3 > *:hover { transform: scale(1.05); } .col-container.justify > * p { text-align: justify; } .col-container > * h3 { text-align: center; font-weight: bold !important; } @media (max-width: 640px) { .col-container.cc-5 > * { flex: 0 0 23% !important; } } @media (max-width: 450px) { .col-container.cc-5 > * { flex: 0 0 31% !important; } } .section-download .col-container > div { width: 15%; margin: .7%; } .section-download .col-container > div a { background: rgb(0 0 0 / 20%); display: block; width: 100%; border-radius: 20px; vertical-align: top; text-decoration: none; transition: transform .3s; padding: 30px 10px 10px 10px; position: relative; overflow: hidden; } .section-download .col-container > div a:hover { transform: scale(1.1); } .section-download .col-container > div a .label { position: absolute; top: -10px; left: 0; width: 100%; } .section-download .col-container > div a span { display: block; margin-top: 10px; color: white; text-align: center; } @media (max-width: 900px) { .section-download .col-container > div { width: 23%; } .section-download .col-container > div i { height: 120px; } } @media (max-width: 700px) { .section-download .col-container > div { width: 31%; } .section-download .col-container > div i { height: 105px; } } @media (max-width: 420px) { .section-download .col-container > div { width: 48%; } .section-download .col-container > div i { height: 90px; } } .section-navi .col-container > div > a { width: 100%; background: #dad6f7; border-radius: 10px; text-align: center; display: inline-block; padding: 10px 0; font-size: 20px !important; color: #383838 !important; } .section-navi .col-container > div > a:hover { text-decoration: none; box-shadow: 0 0 2px 1px rgba(0,0,0,.15); } .section-features .col-container > div, .section-values .col-container > div { background: white; border-radius: 15px; padding: 10px 18px; box-shadow: 1px 1px 4px rgb(0 0 0 / 10%); transition: transform .3s; overflow: hidden; position: relative; } .section-features .col-container > div p:after, .section-values .col-container > div p:after, .section-upcoming .col-container > div span:not(.image-wrapper):after { content: ' '; background-image: url('/w/images/a/af/External-link.png'); display: inline-block; width: 12px; height: 12px; background-size: contain; margin-left: 5px; filter: brightness(.7); } .section-upcoming .col-container > div span:not(.image-wrapper):after { filter: brightness(2); } .section-features .col-container .card-wrapper:focus, .section-values .col-container .card-wrapper:focus { border: 1px solid black; } .section-features .col-container .card-wrapper.hash-target { background-color: #feffe9; } .section-features .col-container .card-wrapper > *, .section-values .col-container .card-wrapper > * { text-decoration: none; display: block; cursor: pointer; border: none; outline: none; } .section-features .col-container > div h3 , .section-values .col-container > div h3 { margin-top: .7em !important; } .section-press .col-container > div { margin-bottom: 25px; } .section-press .col-container > div:hover { transform: unset; } .section-press .col-container > div i { height: 100px !important; margin-bottom: 15px; background-size: contain !important; display: block; background-repeat: no-repeat; background-position: center; } .section-press .col-container > div span { position: relative; display: inline-block; } .section-press .col-container > div span:before { content: '"'; font-size: 48px; line-height: 34px; height: 22px; float: left; margin-right: 7px; } .section-press .col-container > div span a:not(.mw-collapsible-text) { background: #ddd; border-radius: 3px; padding: 0 2px; color: black; display: inline-block; text-decoration: none; } .section-press .col-container > div span a:not(.mw-collapsible-text):hover { transform: scale(1.5); } /* 1.4. mw-collapsible Modifications */ .mw-collapsible { padding: 0 !important; } .mw-collapsible .mw-collapsible-toggle { margin: 14px 0 0 7px !important; } .mw-collapsible .mw-collapsible-toggle.mw-collapsible-toggle-expanded, .mw-collapsible .mw-collapsible-toggle.mw-collapsible-toggle-expanded + h3 { display: none; } .mw-collapsible > h3 { background-color: #f7f7f7 !important; border: 1px solid #e0e0e0 !important; border-radius: 8px; position: relative; top: -6px; line-height: 32px; padding-top: 3px; text-align: center; } .dark-section .mw-collapsible > h3 { color: white !important; background-color: rgb( 0 0 0 / 20% ) !important; border-color: rgb( 0 0 0 / 20% ) !important; } /* 1.5. Section Modal */ .section-modal .content { background: white; padding: 30px 40px; border-radius: 10px; box-shadow: 3px 3px 7px rgb(0 0 0 / 30%) } .section-modal .content p { text-align: center; font-size: 17px !important; } .section-modal .content img { width: 100%; height: 400px; object-fit: contain; } .section-modal .content .code-select { margin: auto; display: block; width: 20px; height: 20px; } .section-modal .content .code-select:hover img { transform: scale(1.1); filter: brightness(0) !important; } /* 2. Section Banner */ .section-banner { width: 100%; padding-bottom: 10px; } .section-banner .logo { text-align: center; width: 100%; max-width: 400px; display: block; margin: auto; } .section-banner .logo img { width: 100%; } .section-banner h2 { margin: 33px 0 44px !important; font-size: 22px !important; } .section-banner h2 { font-size: 25px !important; } .section-banner h2.slogan { margin: 10px 0 12px !important; font-size: 34px !important; } .section-banner .sub-slogan { text-align: center; font-size: 19px !important; margin: 0 !important; } .section-banner .call-to-action { background: #0053a3; color: white !important; text-decoration: none; display: block; padding: 11px 28px; width: fit-content; font-weight: bold; margin: 20px auto 30px; border-radius: 100px; } .section-banner .call-to-action:hover { background-color: #1863ad; transform: scale(1.1); } .section-banner h2.learn { margin: 43px 0 33px !important; } .section-banner .overview-image { max-width: 100%; border-radius: 3vw; box-shadow: 3px 3px 6px 2px rgba(0,0,0,.1); border: 1px solid #ccc; width: 100%; padding-top: 56.25%; display: block; transition: opacity .5s, transform .5s; opacity: .9; position: relative; overflow: hidden; } .section-banner .overview-image:hover { opacity: 1; transform: scale(1.01); } .section-banner .overview-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .section-banner .overview-image img.overview-image-preview { filter: blur(2.5vmax); } /* 3. Section Download */ .section-download { padding: 1px 60px 40px; } .section-download h2 { margin-bottom: 20px !important; } .section-download p { margin-bottom: 26px !important; } @media (max-width: 550px) { .section-download .col-container-wrapper { display: flex; flex-wrap: wrap; } .section-download .col-container-wrapper > div { flex: 1 1 100%; } } /* 4. Section Navi */ .section-navi { padding: 40px 0; } /* 5. Section Apps */ .section-apps { padding: 10px 0 40px; } .section-apps a { text-align: center; } .section-apps span { color: white; width: 100%; display: inline-block; margin-top: 10px; } /* 6. Section Features */ .section-features { margin-top: 40px; } .section-features .item-row > div p { text-align: justify; } .section-features .live-mode a.image { background-color: black; } /* 6.1. Section values */ .section-values .item-row > div p { text-align: justify; } .section-values .research-project a.image { background-color: #b1dcfb; } /* 7. Section Upcoming */ .section-upcoming { padding: 1px 0 25px; margin-top: 40px; } .section-upcoming a { text-decoration: none; transition: color .3s; } .section-upcoming a:not(:hover) { color: white !important; } .section-upcoming i { margin-bottom: 15px; } .section-upcoming .lkrg i { background-color: black; } /* 8. Section Investor */ .section-investor { padding: 1px 0 40px; } .section-investor h2 { margin: 25px 0 30px !important; } .section-investor p { text-align: center; font-size: 19px !important; margin-top: 25px !important; } .section-investor img.image { width: 100%; height: auto; max-width: 800px; display: block; margin: auto; transition: transform 0.3s; /* Add this line for transition */ } .section-investor img.image:hover { transform: scale(1.05); /* Add this line for hover effect */ } /* 9. Section Help */ .section-help { padding: 1px 10px 40px; } .section-help a { display: block; max-width: 450px; text-align: center; margin: auto; transition: transform .3s; } .section-help a:hover { transform: scale(1.05); } .section-help img { width: 100%; margin-bottom: 20px; height: auto; }