/* Xterio project page (works/xterio.html). Figma file pYerAoMQJ0vxt2FurFNnXc,
frame "works-xterio" (6594:13514), drawn on a #171717 canvas: the page uses
the site's dark theme (.theme-dark in css/style.css) for the header, footer
and grid.
Width follows the iBnk rule: 145px sides and a 1149px column at 1440; from
1440 up the column stays 1149px and the sides grow (no scaling up on wide
screens). --u is one Figma px at the current column width (1px from 1440 up).
Below the intro come one full-width band (the Macbook hero) and five
1000-wide panels (x 220 in the frame = 75 into the column), each a coloured
plate with its screens 761.9 wide (119 in from the panel's edge). */
@font-face { font-family: "Geist"; src: url("../../assets/fonts/Geist-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../../assets/fonts/Geist-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../../assets/fonts/Geist-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../../assets/fonts/Geist-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* Same black canvas and grid as the Opinion page (css/works/opinion.css). */
.theme-dark {
--bg: #0f0f0f;
--shape-grid-line: #171717; /* +8 on the background */
--shape-grid-hover: #262626;
--shape-grid-hover-fill: #1c1c1c;
}
/* is the width reference (cqw), as on the iBnk page. */
main:has(> .work--xterio) { container-type: inline-size; }
.work--xterio {
--side: clamp(var(--gutter), 10.07cqw, 145px);
--u: calc((min(100cqw, 1440px) - 2 * var(--side)) / 1149);
--xt-indent: calc(173 * var(--u)); /* copy column: x 318 in the 1440 frame */
--project-color: #5a23c6;
--xt-violet: #6730d0; /* section titles and copy */
--xt-plum: #511db5; /* plain panels */
--xt-night: linear-gradient(180deg, #141430 0%, #3f3f96 100%);
width: min(100% - 2 * var(--side), 1149px);
margin-top: 0; /* the intro block above holds the top space */
font-family: "Geist", var(--font);
}
/* ---------- Intro ----------
Same as the Versa hero: a 1440 block in Figma px (Back x 318 / y 84, lockup 192, URL 288, ledes 359 / 446 / 560),
scaled with `zoom` by js/works/xterio.js — shrinks below 1440, never grows. Ends at Figma 863 (the hero band). */
.xt-intro {
position: relative;
width: 1440px;
height: 776px;
margin: 0 auto;
zoom: var(--intro-zoom, 1);
font-family: "Geist", var(--font);
}
.xt-intro :where(h1, p) { margin: 0; }
.xt-o { position: absolute; }
.xt-intro .work-back { font-family: var(--font); font-size: 16px; line-height: 20px; }
.xt-lockup { display: flex; align-items: center; gap: 24px; width: fit-content; }
.xt-lockup img { flex: none; width: 80px; height: auto; }
.xt-lockup__name {
font-family: var(--font); /* Plus Jakarta Sans ExtraBold in Figma */
font-size: 44px;
font-weight: 800;
line-height: normal;
color: #5a23c6;
}
.xt-url {
display: inline-block;
margin-top: 16px;
font-size: 18px;
font-weight: 500;
color: #5a23c6;
}
.xt-lede { width: 882px; font-size: 22px; line-height: normal; font-weight: 700; }
/* ---------- Bands and panels ---------- */
.xt-shots {
display: grid;
grid-template-columns: minmax(0, 1fr); /* the band's bleed must not widen the track */
margin-top: 0; /* the gap under the ledes is part of .xt-intro */
}
/* Panels sit 33.3 Figma px apart; the first one is 88 below the hero band.
They are centred on the page (a negative margin lets the 1200 plate run past the 1149 column). */
.xt-panel { margin: calc(33.33 * var(--pu)) 0 0 calc(50% - 500 * var(--pu)); }
.xt-hero + .xt-panel { margin-top: max(40px, calc(88 * var(--pu))); }
/* Hero band (6594:13540, 1440 × 872): full-bleed night gradient with the
wordmark, the tagline and the site on a Macbook, all centred. */
.xt-hero {
margin-inline: calc(50% - 50cqw);
padding: max(64px, calc(157 * var(--u))) var(--gutter) max(56px, calc(156.85 * var(--u)));
background: var(--xt-night);
text-align: center;
}
.xt-hero__mark {
width: max(180px, calc(312 * var(--u)));
height: auto;
margin-inline: auto;
}
.xt-hero__tagline {
margin-top: max(18px, calc(28 * var(--u)));
font-family: "Geist", var(--font);
font-size: max(15px, calc(21.2 * var(--u)));
font-weight: 600;
line-height: 1;
color: #fff;
}
.xt-hero__tagline em { font-style: normal; color: #7ed5f9; }
.xt-hero__device {
width: max(calc(583.24 * var(--u)), min(100%, 480px));
height: auto;
margin: max(40px, calc(88.4 * var(--u))) auto 0;
}
/* A panel: a 1000-wide Figma plate, its copy and screens in a 761.9 column
119 in from the left. --pt / --pb are the plate's top and bottom padding,
--gap the space between screens, all in Figma px.
--pu is one Figma px inside a panel. The panels are drawn 1.2x the Figma size (user, 2026-11-11):
1200px wide from a 1440 screen up and fixed there; below 1440 they keep 120px each side. */
.xt-panel {
--pu: min(1.2px, (100cqw - 240px) / 1000);
width: calc(1000 * var(--pu));
padding: calc(var(--pt, 83.33) * var(--pu)) calc(119.05 * var(--pu)) calc(var(--pb, 83.9) * var(--pu));
background: var(--xt-plum);
}
.xt-panel--night { background: var(--xt-night); }
.xt-panel--black { background: #000; }
.xt-panel__title {
font-family: "Geist", var(--font);
font-size: max(26px, calc(45.714 * var(--pu)));
font-weight: 700; /* was Poppins ExtraBold 800; Bold is the heaviest Geist shipped */
line-height: 1;
color: var(--xt-violet);
}
.xt-panel__text {
margin-top: max(16px, calc(var(--tt, 28.1) * var(--pu)));
font-family: "Geist", var(--font);
font-size: max(14px, calc(16.667 * var(--pu)));
font-weight: 400;
line-height: 1.5;
color: var(--xt-violet);
}
.xt-panel__text + .xt-panel__text { margin-top: max(12px, calc(25 * var(--pu))); }
.xt-panel__shot { margin: 0; }
.xt-panel__shot img { width: 100%; height: auto; }
.xt-panel__text + .xt-panel__shot { margin-top: max(24px, calc(var(--ts, 70.24) * var(--pu))); }
.xt-panel__shot + .xt-panel__shot { margin-top: max(16px, calc(var(--gap, 33.33) * var(--pu))); }
/* Tablets and phones: the panels take the full column with a slim plate edge, so the
screens stay readable instead of shrinking to two-thirds of the width. */
@media (max-width: 1023px) {
.xt-panel {
width: auto;
margin-left: 0;
padding: 48px 32px;
}
.xt-panel + .xt-panel { margin-top: 16px; }
.xt-panel__title { font-size: 32px; }
.xt-panel__text { font-size: 16px; max-width: 640px; }
}
@media (max-width: 767px) {
.xt-panel { padding: 32px 16px; }
.xt-panel__title { font-size: 26px; }
.xt-panel__text { font-size: 15px; }
}
/* ---------- Intro on tablets and phones (≤1023px) ----------
Above 1023 the intro is the 1440 Figma block zoomed down. Below that it drops the absolute Figma positions
and reflows, so the ledes wrap to the window at readable sizes instead of shrinking as one block. */
@media (max-width: 1023px) {
.xt-intro {
display: flex; flex-direction: column; align-items: flex-start;
width: auto; height: auto; zoom: 1;
padding: 40px var(--gutter) 72px;
}
.xt-intro > .xt-o { position: static; }
.xt-intro > .xt-o:not(.work-back):not(.xt-lede) { margin-top: 56px; }
.xt-lockup { gap: 18px; }
.xt-lockup img { width: 64px; }
.xt-lockup__name { font-size: 36px; line-height: 1.2; }
.xt-url { margin-top: 14px; font-size: 16px; overflow-wrap: anywhere; }
.xt-lede { width: auto; max-width: 640px; font-size: 20px; line-height: 1.4; }
.xt-lede { margin-top: 24px; }
.xt-o:not(.xt-lede) + .xt-lede { margin-top: 40px; }
}
@media (max-width: 767px) {
.xt-intro { padding: 32px var(--gutter) 56px; }
.xt-intro > .xt-o:not(.work-back):not(.xt-lede) { margin-top: 40px; }
.xt-lockup { gap: 14px; }
.xt-lockup img { width: 56px; }
.xt-lockup__name { font-size: 30px; }
.xt-url { font-size: 15px; }
.xt-lede { font-size: 17px; line-height: 1.45; margin-top: 20px; }
.xt-o:not(.xt-lede) + .xt-lede { margin-top: 32px; }
}