/* ==========================================================================
Device frames for real app screens: an iPhone and a browser window.
Every phone or browser on the site uses these (Bassel: "make it look like
an iPhone"). Size a phone with --w; everything inside scales from it.
Modifiers
.iphone--natural .iphone--black .iphone--white titanium finishes
.iphone--pink .iphone--yellow .iphone--green .iphone--blue colours
.iphone--bare no status bar (full-bleed games, photos, video)
.iphone--dark-status white status text, for dark app headers
The status band takes --status-bg (default white): set it to the app's
top colour so the screen reads as one surface.
basseltutor.com
Set --ratio on .browser (default 16 / 10) to match the capture.
========================================================================== */
/* ---------- iPhone (15/16 Pro proportions: 393 x 852 pt screen) ---------- */
.iphone {
--w: 280px;
--edge: #3b3a40;
--edge-hi: color-mix(in srgb, var(--edge) 55%, #ffffff);
--edge-lo: color-mix(in srgb, var(--edge) 70%, #000000);
position: relative; flex: none; margin: 0;
width: var(--w);
padding: calc(var(--w) * .0125);
border-radius: calc(var(--w) * .172);
background: linear-gradient(145deg, var(--edge-hi), var(--edge) 32%, var(--edge-lo) 62%, var(--edge) 100%);
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--edge-hi) 60%, transparent),
0 2px 6px rgba(28, 24, 48, .12),
0 calc(var(--w) * .12) calc(var(--w) * .2) calc(var(--w) * -.06) rgba(28, 24, 48, .32);
}
/* Side buttons: action + volume on the left, power on the right */
.iphone::before, .iphone::after {
content: ""; position: absolute; width: calc(var(--w) * .011); border-radius: 2px;
background: var(--edge-lo);
}
.iphone::before {
left: calc(var(--w) * -.009); top: 17%; height: 23%;
background: linear-gradient(180deg,
var(--edge-lo) 0 15%, transparent 15% 29%,
var(--edge-lo) 29% 61%, transparent 61% 68%,
var(--edge-lo) 68% 100%);
}
.iphone::after { right: calc(var(--w) * -.009); top: 26%; height: 13%; }
.iphone__screen {
--status-bg: #ffffff;
position: relative; overflow: hidden;
aspect-ratio: 975 / 2062; /* a 393 x 852 screen inside the bezel */
border: calc(var(--w) * .022) solid #050507; /* the black glass bezel */
border-radius: calc(var(--w) * .16);
padding-top: 13.1%; /* the 54 pt status band */
background: var(--status-bg);
isolation: isolate;
}
.iphone__screen > img, .iphone__screen > video, .iphone__screen > picture, .iphone__screen > .iphone__content {
display: block; width: 100%; height: 100%; object-fit: cover; object-position: top;
}
.iphone__screen > picture > img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* Dynamic Island */
.iphone__screen::before {
content: ""; position: absolute; z-index: 3; left: 50%; top: 1.3%;
width: 32%; height: 4.4%; transform: translateX(-50%);
border-radius: 999px; background: #000000;
}
/* Status bar: time on the left, signal, wifi and battery on the right */
.iphone__screen::after {
content: "9:41"; position: absolute; z-index: 2; inset: 0 0 auto 0; aspect-ratio: 393 / 54;
display: flex; align-items: center; justify-content: flex-start;
padding: 0 0 0 11%;
font: 600 calc(var(--w) * .043)/1 -apple-system, "SF Pro Text", "Hanken Grotesk", system-ui, sans-serif;
letter-spacing: -.01em; color: #000000;
background: no-repeat right 7.5% center / 19% auto
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 14'%3E%3Cg fill='%23000'%3E%3Crect x='0' y='9' width='3.2' height='4' rx='1'/%3E%3Crect x='4.6' y='6.6' width='3.2' height='6.4' rx='1'/%3E%3Crect x='9.2' y='4' width='3.2' height='9' rx='1'/%3E%3Crect x='13.8' y='1.4' width='3.2' height='11.6' rx='1'/%3E%3Cpath d='M31 3.2c2.6 0 5 1 6.8 2.7l1.3-1.4C36.9 2.4 34 1.2 31 1.2s-5.9 1.2-8.1 3.3l1.3 1.4C26 4.2 28.4 3.2 31 3.2zm0 3.6c1.6 0 3.1.6 4.2 1.7l1.3-1.4c-1.5-1.4-3.4-2.3-5.5-2.3s-4 .9-5.5 2.3l1.3 1.4c1.1-1.1 2.6-1.7 4.2-1.7zm0 3.6c.6 0 1.2.2 1.6.7L31 12.8l-1.6-1.7c.4-.5 1-.7 1.6-.7z'/%3E%3Crect x='46' y='1.5' width='25' height='11' rx='3.2' fill='none' stroke='%23000' stroke-opacity='.4'/%3E%3Crect x='48' y='3.5' width='19' height='7' rx='1.8'/%3E%3Cpath d='M72.6 5v4c.8-.3 1.4-1.1 1.4-2s-.6-1.7-1.4-2z' fill-opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
}
.iphone--dark-status .iphone__screen::after { color: #ffffff; background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 14'%3E%3Cg fill='%23fff'%3E%3Crect x='0' y='9' width='3.2' height='4' rx='1'/%3E%3Crect x='4.6' y='6.6' width='3.2' height='6.4' rx='1'/%3E%3Crect x='9.2' y='4' width='3.2' height='9' rx='1'/%3E%3Crect x='13.8' y='1.4' width='3.2' height='11.6' rx='1'/%3E%3Cpath d='M31 3.2c2.6 0 5 1 6.8 2.7l1.3-1.4C36.9 2.4 34 1.2 31 1.2s-5.9 1.2-8.1 3.3l1.3 1.4C26 4.2 28.4 3.2 31 3.2zm0 3.6c1.6 0 3.1.6 4.2 1.7l1.3-1.4c-1.5-1.4-3.4-2.3-5.5-2.3s-4 .9-5.5 2.3l1.3 1.4c1.1-1.1 2.6-1.7 4.2-1.7zm0 3.6c.6 0 1.2.2 1.6.7L31 12.8l-1.6-1.7c.4-.5 1-.7 1.6-.7z'/%3E%3Crect x='46' y='1.5' width='25' height='11' rx='3.2' fill='none' stroke='%23fff' stroke-opacity='.45'/%3E%3Crect x='48' y='3.5' width='19' height='7' rx='1.8'/%3E%3Cpath d='M72.6 5v4c.8-.3 1.4-1.1 1.4-2s-.6-1.7-1.4-2z' fill-opacity='.5'/%3E%3C/g%3E%3C/svg%3E"); }
/* Full-bleed screens: no status band (the island still floats over the top) */
.iphone--bare .iphone__screen { padding-top: 0; }
.iphone--bare .iphone__screen::after { display: none; }
/* Finishes */
.iphone--natural { --edge: #a8a397; }
.iphone--black { --edge: #3b3a40; }
.iphone--white { --edge: #dcd9d3; }
.iphone--pink { --edge: #f2b8c8; }
.iphone--yellow { --edge: #f1dd8f; }
.iphone--green { --edge: #b9dcc1; }
.iphone--blue { --edge: #a9c3e4; }
/* ---------- Browser window (light, Safari-like) ---------- */
.browser {
--ratio: 16 / 10;
--bar: 40px;
position: relative; margin: 0;
border-radius: 14px; overflow: hidden;
background: #ffffff;
box-shadow: 0 0 0 1px rgba(28, 24, 48, .09), 0 2px 6px rgba(28, 24, 48, .06), 0 34px 70px -28px rgba(28, 24, 48, .36);
}
.browser__bar {
position: relative; display: flex; align-items: center; height: var(--bar); padding: 0 16px;
background: #f4f2f7; border-bottom: 1px solid #e6e2ec;
}
.browser__dots { display: flex; gap: 8px; flex: none; }
.browser__dots i { display: block; width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12); }
.browser__dots i:nth-child(2) { background: #febc2e; }
.browser__dots i:nth-child(3) { background: #28c840; }
.browser__url {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
display: inline-flex; align-items: center; gap: 6px; max-width: 58%; height: 26px; padding: 0 14px;
border-radius: 8px; background: #ffffff; box-shadow: 0 0 0 1px rgba(28, 24, 48, .06);
font: 500 12.5px/1 var(--font-body, system-ui); color: #55506a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser__url::before {
content: ""; width: 9px; height: 11px; flex: none;
background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11'%3E%3Cpath fill='%2355506a' d='M4.5 0A2.8 2.8 0 0 0 1.7 2.8V4.4H1A1 1 0 0 0 0 5.4v4.6a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V5.4a1 1 0 0 0-1-1h-.7V2.8A2.8 2.8 0 0 0 4.5 0zm0 1.2c.9 0 1.6.7 1.6 1.6V4.4H2.9V2.8c0-.9.7-1.6 1.6-1.6z'/%3E%3C/svg%3E");
}
.browser__view { position: relative; overflow: hidden; aspect-ratio: var(--ratio); background: #ffffff; }
.browser__view > img, .browser__view > video, .browser__view > picture > img {
display: block; width: 100%; height: 100%; object-fit: cover; object-position: top;
}
.browser--dark { background: #1d1a2a; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 34px 70px -28px rgba(0, 0, 0, .6); }
.browser--dark .browser__bar { background: #2a2639; border-bottom-color: #39344b; }
.browser--dark .browser__url { background: #3a3550; color: #d7d2e6; box-shadow: none; }