*/ .page-about main { padding-top: 0; } /* ---------- 1. Intro: headline, hands, coral box ---------- */ .about-intro { position: relative; /* 475, per the updated Figma frame: the coral box sits 14 lower so the arm clears its first line, and the section grew by the same 14. */ height: calc(475 * var(--p)); overflow: hidden; } .about-intro__title { position: absolute; left: calc(49 * var(--p)); top: calc(29 * var(--p)); width: calc(246 * var(--p)); font-size: calc(24 * var(--p)); line-height: 1.3; } /* The four pieces keep their Figma arrangement: giving the group its own unit scales the whole illustration in one move. */ .about-art.frame-float { --u: calc(0.2687 * var(--p)); position: absolute; left: calc(-64 * var(--p)); top: calc(90 * var(--p)); right: auto; bottom: auto; width: calc(1920 * var(--u)); height: calc(1020 * var(--u)); } .about-intro__box { position: absolute; left: calc(89 * var(--p)); top: calc(352 * var(--p)); /* Figma 553, minus the 201 header */ width: calc(281 * var(--p)); height: calc(93.7 * var(--p)); padding: 0; } .about-intro__box p { position: absolute; left: calc(21.3 * var(--p)); top: calc(21.3 * var(--p)); width: calc(243.7 * var(--p)); margin: 0; font-size: calc(12 * var(--p)); line-height: 1.4; } /* ---------- 2. Founders ---------- */ .founders { position: relative; height: calc(833 * var(--p)); background: var(--bg-sand); overflow: hidden; /* the third photo bleeds past the right edge */ } .founders__head { position: absolute; left: calc(49 * var(--p)); top: calc(39 * var(--p)); width: calc(275 * var(--p)); } .founders__title { font-size: calc(24 * var(--p)); line-height: 1.3; } .founders__label { position: absolute; left: 0; top: calc(87 * var(--p)); font-size: calc(20 * var(--p)); line-height: 1.4; } /* Figma "Vector 3": a 123-long stroke of weight 4, centred on y 156 of Frame 21, so the band runs 154-158 (115 below the head's top at 39). */ .founders__underline { position: absolute; left: calc(2 * var(--p)); top: calc(115 * var(--p)); width: calc(123 * var(--p)); height: calc(4 * var(--p)); } /* photo stack: the chosen founder in front, the other two behind */ .founders__stack { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .founder-card { position: absolute; width: calc(225 * var(--p)); height: calc(322.3 * var(--p)); transform: none; transition: left 0.9s var(--ease-in-out), top 0.9s var(--ease-in-out), width 0.9s var(--ease-in-out), height 0.9s var(--ease-in-out), box-shadow 0.6s ease; } .founder-card[data-pos="main"] { transform: none; left: calc(49 * var(--p)); top: calc(201.8 * var(--p)); width: calc(225 * var(--p)); height: calc(322.3 * var(--p)); z-index: 3; box-shadow: calc(16.6 * var(--p)) calc(4.2 * var(--p)) calc(41.6 * var(--p)) calc(-16.6 * var(--p)) rgba(30, 58, 47, 0.8); } .founder-card[data-pos="peek1"] { transform: none; left: calc(152 * var(--p)); top: calc(232 * var(--p)); width: calc(185.6 * var(--p)); height: calc(266 * var(--p)); z-index: 2; box-shadow: calc(16 * var(--p)) calc(4 * var(--p)) calc(40 * var(--p)) calc(-16 * var(--p)) rgba(30, 58, 47, 0.8); } .founder-card[data-pos="peek2"] { transform: none; left: calc(250 * var(--p)); top: calc(251 * var(--p)); width: calc(159.1 * var(--p)); height: calc(228 * var(--p)); z-index: 1; box-shadow: calc(7.5 * var(--p)) calc(1.9 * var(--p)) calc(18.8 * var(--p)) calc(-7.5 * var(--p)) rgba(30, 58, 47, 0.8); } /* next founder: coral diamond on the main card's left edge. The diamond clip-path from about.css is kept, so the button collapses to a point and grows back out exactly as it does on desktop. */ .founders__next { position: absolute; left: calc(24 * var(--p)); top: calc(340 * var(--p)); width: calc(50 * var(--p)); height: calc(50 * var(--p)); z-index: 4; } /* the diamond and arrow come from phone.css, shared with the banner toggle so both buttons are exactly the same size */ /* No hover nudge on phone: a tap leaves :hover applied, which would park the arrow off-centre. Desktop keeps its nudge (about.css). */ .founders__next:hover svg, .founders__next:active svg { transform: none; } /* name, role and bio under the photos */ .founders__people { position: absolute; left: calc(51 * var(--p)); top: calc(580 * var(--p)); width: calc(298 * var(--p)); } .founder { gap: calc(24 * var(--p)); } .founder__name { margin-left: 0; font-size: calc(24 * var(--p)); line-height: 1.3; font-weight: 600; } .founder__role { margin-top: calc(-24 * var(--p)); width: 100%; font-size: calc(16 * var(--p)); line-height: 1.55; } .founder__bio { font-size: calc(14 * var(--p)); line-height: 1.5; } /* ---------- 3. Footer ---------- */ .about-footer { background: var(--bg-sand); padding-bottom: calc(31 * var(--p)); } .page-about .site-footer { margin-bottom: 0; } /* ---------- 4. Motion ---------- */ @media (prefers-reduced-motion: no-preference) { .js .about-art__piece { transform: none; } .js [data-reveal] { transform: translateY(calc(16 * var(--p))); } } }