Phone frame explorer · v1

Marvel iPhone X — Royal Tonal adaptation

Three frames side by side. The current portfolio frame is the control. The two Marvel variants are adapted from marvel-devices.css's iPhone X with mirror/gradient effects stripped, colours overridden to Royal Tonal, and the camera dot + speaker pill removed (Light detail level). The only difference between the two Marvel frames is the inner darkening on the case body.

Frames · live the-weekly V3 in each

A · Current (control)

300 × 600 · 1.5px royal-7 border · top notch + home pill via chrome bars

B · Marvel iPhone X — flat

375 × 812 · royal-3 case + royal-7 inner stroke · no inner darkening

C · Marvel iPhone X — inner darkening

375 × 812 · same as B + inset royal-1 vignette at case edges

What was stripped from marvel-devices.css

.shadow.shadow--tl/tr/bl/br — four radial-gradient corner highlights (glass reflection)
.inner-shadow + .inner-shadow:before — inset white glow simulating glass
box-shadow: inset 0 0 11px 0 black on the case — replaced with royal-1 vignette in variant C; absent in variant B
.camera — small dot at the notch (lens). Removed for cleanness.
.speaker — speaker pill at the notch top. Removed for cleanness.
Top/bottom status-area separator bars (rgba(0,0,0,0.1)). Decorative only on a real device, removed.

Colour overrides

Case body #fdfdfd → var(--royal-3) (#181B36)
Inner stroke band black → var(--royal-7) (#364280)
Notch black → var(--royal-1) (#0E0F1C)
Side buttons #b5b5b5 → var(--royal-7)
Screen background white → var(--royal-1) (matches the iframe's loading bg)

What stayed (functional, not decorative)

Notch corner radial-gradients (.notch:before / :after) — these carve the curve transition between notch and case. Without them, the notch reads as a sharp rectangular cutout. Black recoloured to royal-1.
Border-radius hierarchy: 66px outer / 61px inner stroke / 40px screen. Preserved verbatim.
Notch dimensions (210 × 30, top: 26, left: 108). Preserved verbatim.
Side button positions and heights. Preserved verbatim.