.phone-graphic {
position: relative;
justify-items: center; margin: auto;
margin-top: 0;
margin-bottom: 30px;
perspective: 800px;
}
.phone-case {
box-shadow: inset 3px 3px 8px #82dcff, inset 0 0 3px #082049, inset -3px -3px 8px 0px #002094, 10px 10px 15px #b8b8b8;
border-radius: 50px;
background: #138ac9;
width: 334px;
padding: 10px;
transform-style: preserve-3d;
transform: rotateX(25deg) scale(0.7);
transform-origin: center top;
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (max-width: 1280px) {
.phone-case {
transform: rotateX(25deg) scale(0.6);
}
.phone-graphic:not(.phone-zoomed) .phone-case:hover {
transform: rotateX(0deg) scale(0.7) !important;
}
}
@media (max-width: 980px) {
.phone-case {
transform: rotateX(25deg) scale(0.5);
}
.phone-graphic:not(.phone-zoomed) .phone-case:hover {
transform: rotateX(0deg) scale(0.6) !important;
}
#post-1642 .has-medium-font-size {
font-size: 99% !important;
}
}
@media (max-width: 782px) {
.phone-case {
transform: rotateX(25deg) scale(0.7);
}
}
.phone-case:hover {
transform: rotateX(0deg) scale(0.8);
}
.phone-case:before {
content: '';
position: absolute;
background: #138ac9;
width: 5px;
height: 30px;
left: -5px;
top: 140px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
box-shadow: inset 4px 0px 2px #45b1ea;
}
.phone-case:after {
content: '';
position: absolute;
background: #138ac9;
width: 5px;
height: 70px;
left: 332px;
top: 150px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: inset 1px 0 4px #052152, inset -2px 3px 5px #2c9fdc, 10px 10px 15px #b8b8b8;
}
.phone-container-outer {
position:relative;
font-family:helvetica;
font-size:.8rem;
border:1px solid #8f8f8f;
border-radius:40px;
box-shadow: inset 1px 1px 10px #ddd, inset 1px 1px 3px #8f8f8f, 0 0 6px #1059a5;
background-color:#000;
}
.phone-container-inner {
position:relative;
background:#fff;
margin:13px;
border-radius:30px;
overflow:hidden;
}
.phone-container-outer:after {
content:'';
position:absolute;
top:0;
left:0;
width:304px;
height:659px;
background:linear-gradient(130deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.2) 25%, rgba(255,255,255,0) 25%);
z-index:5;
border-radius:40px;
}
.phone-container-inner:before {
content:'';
position:fixed;
top:22px;
background-color:#212121;
width:49px;
height:10px;
left: calc(50% - 22px);
border-radius:0 0 20px 20px;
z-index:2;
}
.phone-header {
position:relative;
width:100%;
height:100%;
top:0;
background-color:#f4f4f4;
}
.phone-header img {
width:100%;
height:100%;
object-fit:cover;
position:absolute;
top:0;
left:0;
}  .phone-graphic.phone-zoomed {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
margin: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.9);
perspective: none;
}
.phone-graphic.phone-zoomed .phone-case {
box-shadow: inset 1px 0 4px #052152, inset -2px 3px 5px #2c9fdc, 10px 10px 15px #b8b8b800;
transform: scale(var(--phone-zoom-scale, 1.3));
transform-origin: center center;
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transform-style: flat;
} .phone-graphic.phone-zoomed .phone-case:before {
box-shadow: none;
}   
.phone-graphic.phone-zoomed .phone-case:after {
box-shadow: inset 1px 0 4px #052152, inset -2px 3px 5px #2c9fdc, 10px 10px 15px #b8b8b800;
}
.phone-graphic.phone-zoomed .phone-header {
width: 101%;
} .phone-video {
position: absolute;
top: -20px;
left: 0;
width: 100%;
height: 108%;
object-fit: fill;
z-index: 3;
} .phone-volume {
display: none;
}
.phone-graphic.phone-zoomed .phone-volume {
--bar-thickness: 5px;
--bar-length: 120px;
--bar-hit: 26px;
--bar-thumb: 13px;
display: block;
position: absolute;
right: 12px; top: 75%;
transform: translateY(-50%);
width: var(--bar-hit);
height: var(--bar-length);
z-index: 6;
-webkit-tap-highlight-color: transparent;
}
.phone-graphic.phone-zoomed .phone-volume::before,
.phone-graphic.phone-zoomed .phone-volume::after {
content: '';
position: absolute;
left: 50%;
width: var(--bar-thickness);
transform: translateX(-50%);
border-radius: 3px;
pointer-events: none;
}
.phone-graphic.phone-zoomed .phone-volume::before {
top: calc(var(--bar-thumb) / 2);
bottom: calc(var(--bar-thumb) / 2);
background: rgba(255, 255, 255, 0.25);
}
.phone-graphic.phone-zoomed .phone-volume::after { bottom: calc(var(--bar-thumb) / 2);
height: calc(var(--phone-volume, 70) * (100% - var(--bar-thumb)) / 100);
background: rgba(255, 255, 255, 0.9);
} .phone-graphic.phone-zoomed .phone-volume,
.phone-graphic.phone-zoomed .phone-volume-input,
.phone-graphic.phone-zoomed .phone-volume-input:hover,
.phone-graphic.phone-zoomed .phone-volume-input:focus,
.phone-graphic.phone-zoomed .phone-volume-input:focus-visible,
.phone-graphic.phone-zoomed .phone-volume-input:active {
border: 0;
outline: 0;
outline-style: none;
box-shadow: none;
background: transparent;
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
appearance: none;
touch-action: none;
cursor: pointer;
}
.phone-graphic.phone-zoomed .phone-volume-input {
position: absolute;
top: 50%;
left: 50%;
width: var(--bar-length);
height: var(--bar-hit);
margin: 0;
padding: 0;
transform: translate(-50%, -50%) rotate(-90deg);
}
.phone-graphic.phone-zoomed .phone-volume-input::-webkit-slider-runnable-track {
height: var(--bar-thickness);
border: 0;
background: transparent;
}
.phone-graphic.phone-zoomed .phone-volume-input::-webkit-slider-thumb {
-webkit-appearance: none;
width: var(--bar-thumb);
height: var(--bar-thumb);
margin-top: calc((var(--bar-thickness) - var(--bar-thumb)) / 2);
border: 0;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
transition: transform 0.15s ease;
}
.phone-graphic.phone-zoomed .phone-volume-input::-moz-range-track {
height: var(--bar-thickness);
border: 0;
background: transparent;
}
.phone-graphic.phone-zoomed .phone-volume-input::-moz-range-thumb {
width: var(--bar-thumb);
height: var(--bar-thumb);
border: 0;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
transition: transform 0.15s ease;
} .phone-graphic.phone-zoomed .phone-volume-input:focus-visible::-webkit-slider-thumb {
transform: scale(1.3);
}
.phone-graphic.phone-zoomed .phone-volume-input:focus-visible::-moz-range-thumb {
transform: scale(1.3);
} .phone-graphic .phone-header {
height: 512px;
}
.phone-graphic .phone-header img {
width: 100%;
height: 108%;
object-fit: fill;
position: absolute;
top: -19px;
left: 0;
} @media (max-width: 440px) {
.phone-case:hover {
transform: none!important;
}
.phone-graphic {
transform: scale(0.7);
transform-origin: center center;  
}
.phone-graphic.phone-zoomed {
transform: scale(1);  
justify-content: unset;
}
.phone-graphic.phone-zoomed .phone-case,
.phone-graphic.phone-zoomed .phone-container-outer,
.phone-graphic.phone-zoomed .phone-container-inner {
margin: 0;
padding: 0;
border: none;
border-radius: 0;
box-shadow: none;
overflow: visible;
transform: none;
}
.phone-graphic.phone-zoomed .phone-case:before,
.phone-graphic.phone-zoomed .phone-case:after,
.phone-graphic.phone-zoomed .phone-container-outer:after,
.phone-graphic.phone-zoomed .phone-container-inner:before {
display: none;
}
.phone-graphic.phone-zoomed .phone-header {
width: 100vw;
height: calc(100vw * 512 / 288);
}
} .clickscreen {
animation: clickPulse 2s ease-in-out infinite;
cursor: pointer;
user-select: none;
}
@keyframes clickPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.3; transform: scale(1.05); }
}
.phone-graphic.phone-zoomed .clickscreen {
animation: none;
opacity: 0;
pointer-events: none;
}