.appview-hero {
--block-rd: 12px;
position: relative;
z-index: 1;
padding-bottom: var(--wrp-p);
}
@media (min-width: 768px) {
.appview-hero {
--block-rd: 20px;
padding-bottom: var(--group-gap);
}
}
.appview-bg {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
background-color: hsl(var(--c-body-tone));
pointer-events: none;
user-select: none;
}
.appview-bg::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background-image: linear-gradient(0deg, hsla(var(--c-body),0) 30%, hsla(var(--c-body),1) 100%);
}
.appview-bg .cover::after {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(closest-side, hsla(var(--c-body-tone),.7) 30%, hsla(var(--c-body-tone),1) 100%);
}
.appview-bg .cover {
position: absolute;
left: calc(50% - 300px);
top: 0;
width: 1200px;
height: 1200px;
filter: blur(12px);
border-radius: 50%;
}
.appview-intro {
--title-fs: var(--fs-title-view);
--appicon-size: 200px;
}
.appview-intro-cont .title {
text-wrap: balance;
}
@media (min-width: 576px) {
.appview-intro {
--appicon-size: 220px;
}
}
@media (min-width: 992px) {
.appview-intro {
--title-lh: 60px;
}
.appview-intro-cont {
position: relative;
padding-right: 268px;
min-height: var(--appicon-size);
}
.appview-intro-cont .appicon {
position: absolute;
right: 0;
top: 0;
}
}
@media (max-width: 991px) {
.appview-intro {
--title-lh: 32px;
--title-mb: 20px;
}
.appview-breadcrumbs {
justify-content: center;
padding-top: 4px;
margin-bottom: 8px;
}
.appview-intro-cont .title {
text-align: center;
}
.appview-intro-cont .appicon {
margin-left: auto;
margin-right: auto;
}
}
.appicon-label {
position: absolute;
left: 50%;
top: 100%;
z-index: 1;
font-size: var(--fs-2);
font-weight: var(--fw-bold);
line-height: 16px;
height: 32px;
padding: 8px 12px;
border-radius: 16px;
transform: translate(-50%, -50%);
background-color: hsla(var(--c-body),0.5);
box-shadow: inset 0 0 0 1px hsla(var(--c-text),0.1);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.appview-intro-cont .appicon::after {
content: "";
border-radius: 50%;
position: absolute;
inset: -8%;
transform: translateY(15%);
z-index: -1;
background-image: radial-gradient(50% 50% at 50% 50%, hsla(0, 0%, 0%, .2) 0%, hsla(0, 0%, 0%, 0) 100%);
pointer-events: none;
}
.appview-spec {
display: flex;
font-size: var(--fs-2);
padding: 24px 0;
}
.specs-item {
padding: 0 12px;
}
.specs-item:first-child {
padding-left: 0;
}
.spec-label {
opacity: .7;
margin-bottom: 4px;
}
.spec-label, .spec-cont {
display: block;
}
.av-tool-list, .appview-likes {
display: grid;
grid-auto-flow: column;
}
.av-tool-list {
flex: 1 1 auto;
grid-auto-columns: minmax(78px, 1fr);
}
@media (min-width: 1200px) {
.specs-item {
position: relative;
padding: 0 20px;
}
.specs-item:not(:first-child)::before {
content: "";
width: 0;
position: absolute;
top: 4px;
bottom: 4px;
left: 0;
right: auto;
border-left: 1px solid;
opacity: .1;
}
}
@media (min-width: 992px) {
.appview-spec {
font-size: var(--fs-1);
padding: 0;
}
}
@media (max-width: 991px) {
.appview-spec {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin-left: calc(var(--wrp-p)/-1);
margin-right: calc(var(--wrp-p)/-1);
padding-left: var(--wrp-p);
padding-right: var(--wrp-p);
white-space: nowrap;
}
.appview-spec::-webkit-scrollbar {
display: none;
}
}
@media (min-width: 576px) and (max-width: 991px) {
.specs-item {
flex: 1;
text-align: center;
}
}
@media (max-width: 767px) {
.av-tool-list {
padding-top: var(--wrp-p);
padding-bottom: var(--wrp-p);
}
}
.av-tool {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
font-size: var(--fs-4);
white-space: nowrap;
}
.av-tool > a, .av-tool > button, .av-tool > a > *, .av-tool > button > * {
display: block;
}
.av-tool .im {
width: 24px;
height: 24px;
margin: 0 auto;
margin-bottom: 4px;
}
.av-tool > a, .av-tool > button {
opacity: .7;
width: 100%;
transition: opacity .2s ease;
}
.av-tool > a:hover, .av-tool > button:hover {
opacity: 1;
}
@media (max-width: 1199px) {
.appview-tools {
margin-top: 8px;
}
}
@media (max-width: 767px) {
.av-tool > a, .av-tool > button {
padding-top: 4px;
padding-bottom: 4px;
}
}
@media (min-width: 768px) {
.appview-tools {
order: -1;
display: flex;
box-shadow: inset 0 0 0 1px var(--c-border);
border-radius: var(--block-rd);
padding: 14px;
gap: 14px;
}
}
@media (min-width: 992px) {
.appview-foot {
margin-top: 32px;
}
}
@media (min-width: 1200px) {
.appview-foot {
display: flex;
}
.appview-likes {
margin-left: 16px;
}
}
.appview-likes {
grid-auto-columns: minmax(136px, 1fr);
gap: 8px;
font-size: var(--fs-2);
line-height: 20px;
}
.appview-likes a, .appview-likes button {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 12px;
box-shadow: inset 0 0 0 1px var(--c-border);
border-radius: var(--block-rd);
transition: background-color .2s ease, transform .2s ease;
}
.appview-likes a:hover, .appview-likes button:hover {
background-color: hsla(var(--c-text), 0.03);
transform: scale(1.02);
}
.appview-likes a:active, .appview-likes button:active {
background-color: hsla(var(--c-text), 0.05);
transform: scale(0.98);
}
.appview-likes a .im, .appview-likes button .im {
margin-bottom: 4px;
}
.screenshots {
--screens-w: 296px;
}
.screenshots.portrait {
--screens-w: 220px;
}
.screenshots .hcarousel {
overflow-x: auto;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
scroll-snap-type: x mandatory;
}
.screenshots .hcarousel::-webkit-scrollbar {
display: none;
}
.screenshots .hcarousel.glist {
grid-auto-columns: minmax(var(--screens-w), 1fr);
padding: 0;
margin: 0;
}
.screenshots .hcarousel.glist:has( > p), .screenshots .hcarousel.glist:has( > div) {
display: block !important;
}
.screenshots .hcarousel.glist > p, .screenshots .hcarousel.glist > div {
display: grid;
gap: var(--g-gap);
grid-auto-flow: column;
grid-auto-columns: minmax(var(--screens-w), 1fr);
margin: 0;
}
.screenshots .hcarousel.glist br {
display: none !important;
}
@media (min-width: 768px) {
.appview-screens {
margin-top: var(--group-gap);
}
.screenshots {
--screens-w: 526px;
}
.screenshots.portrait {
--screens-w: 260px;
}
.screenshots .hcarousel.glist {
border-radius: var(--block-rd);
}
.screenshots .glist a {
scroll-margin-left: 0;
scroll-margin-right: 0;
}
}
@media (max-width: 767px) {
.appview-screens {
border-top: 1px solid hsl(var(--c-body));
padding-top: var(--wrp-p);
padding-left: 0;
padding-right: 0;
}
.screenshots .hcarousel.glist {
padding-left: var(--wrp-p);
padding-right: var(--wrp-p);
}
.screenshots .hcarousel:has( > p), .screenshots .hcarousel:has( > div) {
overflow-x: hidden;
scroll-snap-type: none;
padding-left: 0 !important;
padding-right: 0 !important;
}
.screenshots .hcarousel > p, .screenshots .hcarousel > div {
overflow-x: auto;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
scroll-snap-type: x mandatory;
padding-left: var(--wrp-p);
padding-right: var(--wrp-p);
}
.screenshots .glist a {
scroll-margin-left: var(--wrp-p);
scroll-margin-right: var(--wrp-p);
}
}
.screenshots .glist a {
scroll-snap-align: start;
scroll-snap-stop: always;
position: relative;
z-index: 1;
display: flex;
overflow: hidden;
flex-direction: column;
flex-grow: 1;
margin: 0;
border-radius: var(--block-rd);
background-color: hsla(var(--c-text),0.1);
aspect-ratio: 16 / 9;
}
.screenshots.portrait .glist a {
aspect-ratio: 9 / 16;
}
.screenshots .glist a img {
position: absolute;
top: 0;
left: 50%;
display: block;
pointer-events: none;
user-select: none;
min-width: 100%;
width: auto;
height: 100%;
transform: translateX(-50%);
object-fit: cover;
object-position: center center;
-o-object-position: center center;
-o-object-fit: cover;
}
.video-highslide {
--im-img: url(//site-apk.site/wp-content/themes/zplay/assets/img/icons/play.svg);
}
.video-highslide::after, .video-highslide::before {
content: "";
position: absolute;
z-index: 1;
pointer-events: none;
user-select: none;
}
.video-highslide::before {
top: calc(50% - 28px);
left: calc(50% - 28px);
background-color: hsl(0,0%,0%);
opacity: .3;
border-radius: 50%;
width: 56px;
height: 56px;
transition: transform .2s ease, opacity .2s ease;
}
.video-highslide:hover::before {
transform: scale(1.04);
opacity: .5;
}
.video-highslide::after {
content: "";
top: calc(50% - 11px);
left: calc(50% - 11px);
background-color: hsl(var(--c-text-white));
display: block;
flex-shrink: 0;
width: 22px;
height: 22px;
mask-size: auto 100%;
-webkit-mask-size: auto 100%;
mask-position: center;
-webkit-mask-position: center;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-image: var(--im-img);
-webkit-mask-image: var(--im-img);
}
.appview-info {
padding-top: var(--group-gap);
padding-bottom: var(--group-gap);
}
.appview-info-rate {
margin-top: var(--sect-gap);
}
.rstatus-num {
display: flex;
align-items: center;
color: hsla(var(--c_like_dislike),1);
margin: 12px 0;
}
.rstatus-value {
font-size: 64px;
letter-spacing: -0.05em;
line-height: 1;
flex: 1 1 auto;
}
.rstatus-line {
--rateline: url(//site-apk.site/wp-content/themes/zplay/assets/img/popularity.svg);
--rateline-w: 100%;
--rateline-c: 50px;
--rateline-calc: calc((var(--rating-width) - var(--rateline-c)) * (var(--rating-value) / 100));
display: block;
width: var(--rateline-w);
height: 28px;
background-color: hsl(var(--c_like_dislike));
background-image: linear-gradient(90deg, hsl(var(--c-red)) 0%, var(--c-primary) 50%, hsl(var(--c_like_dislike)) 100%);
mask-size: auto 100%;
-webkit-mask-size: auto 100%;
mask-position: var(--rateline-calc) 0;
-webkit-mask-position: var(--rateline-calc) 0;
mask-repeat: repeat-x;
-webkit-mask-repeat: repeat-x;
mask-image: var(--rateline);
-webkit-mask-image: var(--rateline);
}
.rating-status-info {
display: flex;
justify-content: space-between;
font-size: var(--fs-2);
margin-top: 16px;
}
.rstatus-icon {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
position: relative;
}
.rstatus-icon svg {
width: 64px;
height: 64px;
color: hsl(var(--c_like_dislike));
fill: currentColor;
transition: transform .2s ease, color .2s ease;
}
.rstatus-num.negative {
color: hsl(var(--c-red));
}
.rstatus-num.negative .rstatus-icon svg {
color: hsl(var(--c-red));
transform: rotate(180deg);
}
.rstatus-num.negative .rstatus-icon .mask {
--mask-bg: hsla(var(--c-red),0.2);
}
@media (min-width: 576px) and (max-width: 991px) {
.appview-info-rate {
border-radius: var(--block-rd);
padding: var(--sect-gap);
box-shadow: inset 0 0 0 1px var(--c-border);
}
}
@media (min-width: 992px) {
.rstatus-value {
font-size: 92px;
}
.rstatus-icon {
width: 92px;
height: 92px;
}
.rstatus-icon .mask {
--mask-size: 92px;
--mask-bg: hsla(var(--c_like_dislike),0.2);
--mask-img: url(//site-apk.site/wp-content/themes/zplay/assets/img/icons/star-mask2.svg);
position: absolute;
inset: 0;
transition: background-color .2s ease;
}
}
.tab-toggle-head {
display: flex;
margin-bottom: var(--tabs-mb, 32px);
}
@media (max-width: 991px) {
.tab-toggle-head {
justify-content: center;
}
}
.tab-toggle {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(2, 1fr);
height: 48px;
background-color: hsla(var(--c-text), 0.05);
border: none;
border-radius: 24px;
padding: 4px;
cursor: pointer;
font-size: var(--fs-2);
line-height: 20px;
box-shadow: inset 0 1px 4px 0 hsla(0, 0%, 0%, 0.1);
}
.tab-toggle::after {
content: "";
position: absolute;
top: 4px;
left: 4px;
height: 40px;
width: calc(50% - 4px);
background-color: hsl(var(--c-body));
border-radius: inherit;
box-shadow: 0 1px 4px 0 hsla(0, 0%, 0%, 0.1);
transition: transform .2s ease;
}
.tab-toggle span {
position: relative;
z-index: 1;
display: flex;
padding: 10px 12px;
min-width: 128px;
align-items: center;
justify-content: center;
text-align: center;
transition: opacity .2s ease;
}
.tab-container.opentab .tab-toggle span:first-child, .tab-container:not(.opentab) .tab-toggle span:last-child {
opacity: .6;
}
.tab-container.opentab .tab-toggle::after {
transform: translateX(100%);
}
.download-box {
--dbox-p: var(--sect-gap);
--tabs-mb: var(--sect-gap);
position: relative;
z-index: 1;
padding: var(--dbox-p);
background-color: hsla(var(--c-primary),0.07);
transition: background-color .2s ease;
}
@media (min-width: 576px) {
.download-box {
border-radius: var(--block-rd);
padding: var(--dbox-p);
}
}
@media (min-width: 768px) {
.download-box {
--dbox-p: 40px;
--tabs-mb: 40px;
}
}
@media (max-width: 575px) {
.appview-download.wrp {
padding-left: 0;
padding-right: 0;
}
.download-box {
padding-left: var(--wrp-p);
padding-right: var(--wrp-p);
}
}
.download-box-files > .title {
--title-mb: 16px;
}
.opentab.download-box {
background-color: hsla(var(--c-yellow),0.1);
}
.download-box-foot {
--title-fs: var(--fs-2);
--title-lh: 20px;
--title-mb: 0;
--desc-fs: var(--fs-2);
--desc-lh: 20px;
margin-top: var(--dbox-p);
}
@media (min-width: 576px) {
.download-box-foot {
--title-fs: var(--fs);
--title-lh: var(--lh);
--desc-fs: var(--fs);
--desc-lh: var(--lh);
}
.download-box-foot .title, .download-box-foot .desc {
max-width: 990px;
}
}
.download-shield {
position: absolute;
z-index: -1;
inset: 0;
border-radius: var(--block-rd);
display: flex;
align-items: end;
justify-content: end;
pointer-events: none;
overflow: hidden;
}
.download-shield .mask {
--mask-bg: transparent;
--mask-w: 240px;
--mask-h: 240px;
--mask-size: auto 100%;
--mask-img: url(//site-apk.site/wp-content/themes/zplay/assets/img/icons/mask-shied.svg);
transform: translate(19%, 19%);
background-image: linear-gradient(207deg, var(--c-primary) 0%, var(--c-primary) 100%);
}
.download-line {
--btn-h: 48px;
--btn-fs: var(--fs-1);
margin-top: 8px;
}
.download-line > a::after {
content: "";
position: absolute;
inset: 0;
}
@media (max-width: 767px) {
.download-line-link {
margin-right: var(--btn-h);
}
.download-line .dropdown {
position: absolute;
right: 0;
top: 0;
z-index: 99;
}
.download-line .dropdown-box {
--dropdown-p: 8px 16px;
padding: var(--dropdown-p);
color: hsl(var(--c-text));
font-size: var(--fs-2);
line-height: 20px;
left: auto;
top: auto;
right: 12px;
bottom: calc(100% - 4px);
margin-top: 0;
border-bottom-right-radius: 2px;
width: 260px;
text-align: left;
word-break: break-all;
white-space: normal;
}
.download-line .dropdown-btn {
display: flex !important;
align-items: center;
justify-content: center;
height: var(--btn-h);
width: var(--btn-h);
}
.download-line .dropdown-btn::after {
content: "";
position: absolute;
inset: 0;
right: auto;
border-left: 1px solid var(--btn-fill-text);
opacity: .1;
}
}
@media (min-width: 768px) {
.download-line {
--btn-h: 56px;
--btn-fs: var(--fs);
}
.download-line .dropdown {
min-width: 0;
flex: 1 1 auto;
text-align: left;
pointer-events: none;
padding: 0 4px;
}
.download-line-title {
overflow: hidden;
text-overflow: ellipsis;
}
.download-line-link {
padding: 0 4px;
}
.download-line-title {
font-weight: var(--fw);
position: static;
display: block !important;
opacity: 1;
padding: 0;
margin: 0;
visibility: visible;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
transform: none;
}
}