![]()
). The Dynamic Island and the glass sheen, v8's
s, are
the screen group's pseudo-elements. The floating phone on the stage (Custom HTML, real s) gets copies of
these layers from assets/js/motion.js, so the layer rules below cover both. */
.phone__screen.wp-block-group::before {
content: "";
position: absolute; z-index: 3;
top: 1.6%; left: 0; right: 0; margin-inline: auto;
width: 30%; height: 4.1%;
border-radius: 999px;
background: #000;
}
.phone__screen.wp-block-group::after {
content: "";
position: absolute; inset: 0; z-index: 4; pointer-events: none;
background:
linear-gradient(118deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.08) 26%, rgba(255, 255, 255, 0) 40%),
linear-gradient(118deg, transparent 52%, rgba(255, 255, 255, 0.12) 60%, transparent 68%);
}
.phone__screen .phone__layer.wp-block-image {
--sx: 0;
--sy: 0;
--sw: 600;
position: absolute;
inset: 0;
margin: 0;
overflow: hidden;
}
/* v8's .shot: the picture is cropped to the app screen inside it. --sx / --sy: top-left of the crop, --sw: its
width, in pixels of a 600 px wide picture. A plain screenshot (no crop values) fills the screen from the top. */
.phone__screen .phone__layer.wp-block-image img {
position: absolute;
top: calc(var(--sy) / var(--sw) / 2.04 * -100%);
left: calc(var(--sx) / var(--sw) * -100%);
width: calc(600 / var(--sw) * 100%);
max-width: none;
height: auto;
}
/* The crops of the App Store posters the theme ships (v8 index.html). They follow the picture, not the block:
a different screenshot chosen in the editor drops the crop, and so does a synced App Store screenshot
(.is-store-poster, below), which is shown whole. Mikson Fit's poster ends above the bottom of the screen, so the
app's own colour carries on below it. */
.phone__layer:not(.is-store-poster) img[src$="/shot-miksonfit-3.webp"] { --sx: 70; --sw: 462; --sy: 430; }
.phone__layer:not(.is-store-poster) img[src$="/shot-fridgeapp-1.webp"] { --sx: 65; --sw: 470; --sy: 336; }
.phone__layer:not(.is-store-poster) img[src$="/shot-rheya-1.webp"] { --sx: 64; --sw: 472; --sy: 338; }
.phone__layer:not(.is-store-poster) img[src$="/shot-avevictra-1.webp"] { --sx: 64; --sw: 472; --sy: 338; }
.phone__layer.wp-block-image:not(.is-store-poster):has(img[src$="/shot-miksonfit-3.webp"]) { --fill: #30344B; background: var(--fill); }
.phone__layer.wp-block-image:not(.is-store-poster):has(img[src$="/shot-miksonfit-3.webp"])::after {
content: "";
position: absolute; left: 0; right: 0; bottom: 0;
height: 15%;
background: linear-gradient(180deg, transparent, var(--fill) 55%);
}
/* ---------------------------------------------------------------- App Store posters */
/* When the App Store sync is on (inc/appstore.php), a card's screenshot is the app's current App Store screenshot
and its figure carries .is-store-poster. A poster has its own headline and drawn phone, so it is never cropped:
the phone frame steps back and the poster becomes a floating glass card, as wide as the phone and with the
phone's tilt and motion (the card's flat tilt here; on the stage, js/motion.js puts the posters on a poster card
of their own, .stage__poster, that rises, swings and floats like the phone). */
.phone:has(> .phone__screen > .is-store-poster) {
padding: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
.phone__screen.wp-block-group:has(> .is-store-poster) {
aspect-ratio: auto;
overflow: visible;
border-radius: 0;
background: none;
box-shadow: none;
}
.phone__screen.wp-block-group:has(> .is-store-poster)::before,
.phone__screen.wp-block-group:has(> .is-store-poster)::after { content: none; }
.phone__screen .phone__layer.wp-block-image.is-store-poster,
.stage__poster .poster > .phone__layer {
position: relative;
inset: auto;
overflow: hidden;
padding: calc(var(--pw) * 0.034);
border-radius: calc(var(--pw) * 0.13);
background: linear-gradient(160deg, rgba(255, 255, 255, 0.92) 0%, rgba(234, 243, 255, 0.7) 50%, rgba(214, 231, 255, 0.78) 100%);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.95),
inset 0 -3px 8px rgba(24, 88, 214, 0.18),
0 0 0 1px rgba(47, 123, 255, 0.2),
0 50px 80px -40px rgba(24, 88, 214, 0.6),
0 0 60px -10px rgba(76, 155, 255, 0.5);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
.phone__screen .phone__layer.wp-block-image.is-store-poster img,
.stage__poster .poster > .phone__layer img {
position: static;
width: 100%;
max-width: 100%;
height: auto;
border-radius: calc(var(--pw) * 0.1);
box-shadow: 0 0 0 1px rgba(11, 42, 69, 0.08);
}
/* the poster card on the stage: in the same spot as the floating phone, posters stacked on one another */
.stage__poster .poster {
position: relative;
display: grid;
align-items: center;
width: var(--pw);
-webkit-box-reflect: below 18px linear-gradient(transparent 80%, rgba(255, 255, 255, 0.16));
}
.stage__poster .poster > .phone__layer { grid-area: 1 / 1; }