/* product-media.css — device frames + stages for / . * * Shared by every landing and the frontpage, so it carries its own colour * aliases. They are NOT new colours: each one is a value of the platform tokens * in public/css/platform.css (--shell #0c0d0d, --tile #161716, --line #222220, * --accent #e3a948). A page tints the stage glow with its own accent: * .pm-stage { --pm-accent: var(--ac); } * * Devices are generic on purpose — even bezels, a camera dot, a plain deck. No * notch, no logo, no proportions of a real product. Sizes scale with the frame * (container units), so one frame works from a 120 px card to a 900 px hero. * * Stages ( picks the layout from the devices, 1–3 frames): * .pm-stage--solo one device of any kind, centred (a window: the stage's * full width — a plugin GUI shown large, as itself) * .pm-stage--laptop-phone laptop + phone overlapping its bottom-right corner * .pm-stage--laptop-tablet laptop + tablet overlapping its bottom-right corner * .pm-stage--tablet-phone tablet + phone overlapping its bottom-right corner * .pm-stage--trio laptop + tablet (right, lower) + phone (right, front) — * the laptop's left half, where the tools put their main * readout, stays uncovered * On phones (≤ 600 px) a phone frame leads (in the flow, large, the others behind * it); a stage without a phone keeps its big device in the flow — never zero height. */ /* Frames keep their padding inside their width on pages without a border-box reset. */ .pm-device,.pm-device *,.pm-device ::before{box-sizing:border-box;} .pm-device{ --pm-shell:#0c0d0d; /* platform --shell */ --pm-body:#161716; /* platform --tile */ --pm-line:#222220; /* platform --line */ --pm-hi:color-mix(in oklab, var(--pm-line) 78%, #fff); container-type:inline-size; position:relative; width:100%; margin:0; } .pm-bezel{ position:relative; background:linear-gradient(180deg, color-mix(in oklab, var(--pm-body) 88%, #fff), var(--pm-body) 14%); border:1px solid var(--pm-hi); box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 40px 80px -36px rgba(0,0,0,.9); } .pm-screen{ position:relative; aspect-ratio:var(--pm-ratio, 16 / 10); overflow:hidden; background:var(--pm-shell); } .pm-screen picture{display:contents;} .pm-media{display:block;width:100%;height:100%;object-fit:cover;} /* a loop lies over its still (the first frame) and shows only once it plays */ .pm-loop{position:absolute;inset:0;opacity:0;transition:opacity .3s ease;} .pm-loop.is-playing{opacity:1;} /* camera dot, shared */ .pm-bezel::before{ content:"";position:absolute;left:50%;width:1.6cqw;height:1.6cqw;min-width:4px;min-height:4px; transform:translateX(-50%);border-radius:50%; background:radial-gradient(circle at 35% 35%, #34362f, #050505 70%); } /* ── laptop: lid with an even bezel, a slimmer deck below ─────────────────── */ .pm-device--laptop{padding:0 6.5%;} .pm-device--laptop .pm-bezel{padding:2.6cqw 2.2cqw 3cqw;border-radius:2cqw 2cqw .6cqw .6cqw;} .pm-device--laptop .pm-bezel::before{top:.9cqw;width:1cqw;height:1cqw;} .pm-device--laptop .pm-screen{border-radius:.5cqw;} .pm-deck{ position:relative;height:2.6cqw;margin:0 -7.2%; border-radius:0 0 3cqw 3cqw / 0 0 2.6cqw 2.6cqw; background:linear-gradient(180deg, var(--pm-hi) 0, var(--pm-body) 28%, var(--pm-shell) 100%); box-shadow:0 18px 30px -16px rgba(0,0,0,.9); } .pm-deck::before{ /* the opening groove */ content:"";position:absolute;left:50%;top:0;width:15%;height:45%;transform:translateX(-50%); border-radius:0 0 1.2cqw 1.2cqw;background:color-mix(in oklab, var(--pm-shell) 70%, var(--pm-body)); } /* ── tablet: even bezel all round ────────────────────────────────────────── */ .pm-device--tablet .pm-bezel{padding:3.4cqw;border-radius:4.6cqw;} .pm-device--tablet .pm-bezel::before{top:1.3cqw;width:1.1cqw;height:1.1cqw;} .pm-device--tablet .pm-screen{border-radius:1.4cqw;} /* ── phone: even bezel, generous radius, punch-hole above the screen ──────── */ .pm-device--phone .pm-bezel{padding:7.4cqw 3.6cqw 5.4cqw;border-radius:13cqw;} .pm-device--phone .pm-bezel::before{top:2.6cqw;width:2.4cqw;height:2.4cqw;} .pm-device--phone .pm-screen{border-radius:7cqw;} /* ── window: a plain app window — rounded corners, a slim title bar with three neutral dots (no OS imitation: same grey, no colours, no buttons), soft shadow and the page's accent glow. The content fills it edge to edge. ─────────────── */ .pm-device--window .pm-bezel{ padding:0;overflow:hidden;border-radius:clamp(8px, 1.2cqw, 14px); background:var(--pm-body); box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 34px 80px -34px rgba(0,0,0,.95), 0 0 90px -30px color-mix(in oklab, var(--pm-accent, #e3a948) 45%, transparent); } .pm-device--window .pm-bezel::before{content:none;} .pm-titlebar{ display:flex;align-items:center;gap:clamp(4px, .6cqw, 8px); height:clamp(18px, 2.6cqw, 30px);padding:0 clamp(8px, 1.3cqw, 16px); background:linear-gradient(180deg, color-mix(in oklab, var(--pm-body) 82%, #fff), var(--pm-body)); border-bottom:1px solid var(--pm-line); } .pm-titlebar i{display:block;width:clamp(6px, .8cqw, 10px);aspect-ratio:1;border-radius:50%;background:var(--pm-hi);} .pm-device--window .pm-screen{border-radius:0;} /* ── pause / play for loops ───────────────────────────────────────────────── */ .pm-toggle{ position:absolute;left:10px;bottom:10px;z-index:2; width:30px;height:30px;padding:0;border-radius:50%;cursor:pointer; display:grid;place-items:center; color:#f1ede4;background:rgba(12,13,13,.72);border:1px solid rgba(241,237,228,.28); backdrop-filter:blur(4px);opacity:.75;transition:opacity .15s; } .pm-toggle[hidden]{display:none;} .pm-toggle:hover,.pm-toggle:focus-visible{opacity:1;} .pm-toggle:focus-visible{outline:2px solid var(--pm-accent, #e3a948);outline-offset:2px;} .pm-toggle span{display:block;width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor;} .pm-toggle.is-paused span{ /* play triangle */ width:0;height:0;margin-left:3px;border-left:11px solid currentColor;border-right:0; border-top:7px solid transparent;border-bottom:7px solid transparent; } /* ── stages ───────────────────────────────────────────────────────────────── */ .pm-stage{ position:relative; isolation:isolate; } .pm-stage::before{ /* soft accent light behind the devices — inside the stage's width: a glow wider than the stage made the page scroll sideways where the stage fills its column */ content:"";position:absolute;z-index:-1;inset:-8% 0 0 0; background:radial-gradient(66% 55% at 45% 45%, color-mix(in oklab, var(--pm-accent, #e3a948) 16%, transparent), transparent 70%); pointer-events:none; } /* one device, centred */ .pm-stage--solo > .pm-device{margin-inline:auto;} .pm-stage--solo > .pm-device--tablet{width:84%;} .pm-stage--solo > .pm-device--phone{width:min(46%, 320px);} .pm-stage--solo > .pm-device--window{width:100%;} /* large: the page's stage width sets it */ /* a big device + a small one over its bottom-right corner */ .pm-stage--laptop-phone,.pm-stage--tablet-phone{padding-bottom:6%;} .pm-stage--laptop-phone > .pm-device--laptop{width:88%;} .pm-stage--tablet-phone > .pm-device--tablet{width:80%;} .pm-stage--laptop-phone > .pm-device--phone, .pm-stage--tablet-phone > .pm-device--phone{position:absolute;right:0;bottom:0;width:22%;} .pm-stage--laptop-tablet{padding-bottom:9%;} .pm-stage--laptop-tablet > .pm-device--laptop{width:84%;} .pm-stage--laptop-tablet > .pm-device--tablet{position:absolute;right:0;bottom:0;width:34%;} .pm-stage--trio{padding-bottom:13%;} .pm-stage--trio > .pm-device--laptop{width:80%;} .pm-stage--trio > .pm-device--tablet{position:absolute;right:9%;bottom:0;width:44%;} .pm-stage--trio > .pm-device--phone{position:absolute;right:0;bottom:-3%;width:16%;} @media (max-width: 700px){ .pm-stage--laptop-phone > .pm-device--laptop{width:92%;} .pm-stage--tablet-phone > .pm-device--tablet{width:84%;} .pm-stage--laptop-phone > .pm-device--phone, .pm-stage--tablet-phone > .pm-device--phone{width:27%;} .pm-stage--laptop-tablet > .pm-device--laptop{width:90%;} .pm-stage--laptop-tablet > .pm-device--tablet{width:40%;} .pm-stage--trio > .pm-device--laptop{width:86%;} .pm-stage--trio > .pm-device--tablet{width:48%;} .pm-stage--trio > .pm-device--phone{width:19%;} } /* ── phones (≤ 600 px): the phone frame leads ───────────────────────────────── On a phone screen the laptop's UI shrinks to ~25 %; the phone capture is the one that reads. So the phone moves into the flow, large, on the right, and the laptop (and tablet) step back behind it on the left. The stage's height is the phone's height. Without a phone the big device stays in the flow (the stage keeps its height) and the tablet sits over its corner, larger. */ @media (max-width: 600px){ .pm-stage--laptop-phone,.pm-stage--tablet-phone,.pm-stage--trio{display:flex;justify-content:flex-end;padding:4% 0 0;} .pm-stage--laptop-phone > .pm-device--phone, .pm-stage--tablet-phone > .pm-device--phone, .pm-stage--trio > .pm-device--phone{position:relative;right:auto;left:auto;bottom:auto;z-index:2;width:44%;margin-right:1%;} .pm-stage--laptop-phone > .pm-device--laptop{position:absolute;left:0;top:16%;z-index:1;width:72%;} .pm-stage--tablet-phone > .pm-device--tablet{position:absolute;left:0;top:12%;z-index:1;width:74%;} .pm-stage--trio > .pm-device--phone{width:40%;} .pm-stage--trio > .pm-device--laptop{position:absolute;left:0;top:4%;z-index:1;width:70%;} .pm-stage--trio > .pm-device--tablet{position:absolute;left:4%;right:auto;bottom:2%;z-index:1;width:52%;} .pm-stage--laptop-tablet{padding:2% 0 16%;} .pm-stage--laptop-tablet > .pm-device--laptop{width:92%;} .pm-stage--laptop-tablet > .pm-device--tablet{width:48%;} .pm-stage--solo > .pm-device--phone{width:min(64%, 300px);} .pm-toggle{width:28px;height:28px;left:6px;bottom:6px;} }