/* Corporate landing — page rhythm and the primitives every section shares. Mocks: 1920 = 5113:9522, 1440 = 5212:22289, 768 = 7043:8298, 375 = 7055:10646. The greys below are the mock's own (#7f7f7f / #8d8d8d). They sit near 3.8:1 on the #fafafa canvas, under the 4.5:1 AA floor, and are kept because the project pages built from the same Figma file already ship them. */ /* The video dialog carries the tokens too: its script moves it out to , past the page wrapper, and without them every var() inside it resolves to nothing. */ .gst-corppage, .corp-video-modal { --corp-ink: #171b1c; --corp-muted: #7f7f7f; --corp-muted-2: #8d8d8d; --corp-line: #acacac; --corp-canvas: #fafafa; --corp-orange: #ff6b00; --corp-panel-shadow: 4px 4px 14px 4px rgba(0, 0, 0, .04); /* smallest side padding a white panel keeps once its 1430 content column stops fitting; raised per section where the mock insets further */ --corp-panel-pad-min: 20px; --corp-panel-pad-y: 80px; } /* page canvas — the wrapper only. The dialog shares the tokens above but must take neither the canvas fill nor a clip: it is a fixed inset:0 layer, and the fill would paint over its own dim. */ .gst-corppage { font-family: "Montserrat", sans-serif; color: var(--corp-ink); background: var(--corp-canvas); overflow-x: clip; /* an unbroken product name or URL has to fold rather than escape its card */ overflow-wrap: anywhere; } /* ---------- column and gutter ---------- 1430 content column, 20px page gutter below it, 16 on phones — the widths the four mocks measure. main.css sizes .container-new off a viewport-relative gutter that would jump 50px at the width the page gutter takes over, so the container keeps only the cap here. */ .gst-corppage .container-new { max-width: 1430px; padding-inline: 0; margin-inline: auto; } .gst-corppage > .corp-section { padding-inline: 20px; } @media (max-width: 767px) { .gst-corppage > .corp-section { padding-inline: 16px; } } /* ---------- vertical rhythm ---------- */ .gst-corppage > .corp-section { margin-top: 140px; } .gst-corppage > .corp-section:last-child { margin-bottom: 140px; } /* the orange strip butts against the hero photo, the stat band hangs under it */ .gst-corppage > .corp-trust { margin-top: 0; } .gst-corppage > .corp-stats { margin-top: 50px; } @media (max-width: 1199px) { .gst-corppage > .corp-section { margin-top: 100px; } .gst-corppage > .corp-section:last-child { margin-bottom: 100px; } .gst-corppage > .corp-stats { margin-top: 40px; } } @media (max-width: 767px) { .gst-corppage > .corp-section { margin-top: 60px; } .gst-corppage > .corp-section:last-child { margin-bottom: 60px; } .gst-corppage > .corp-stats { margin-top: 20px; } } /* A break the tablet and phone frames draw and the wide ones do not. It ships in the copy so an editor keeps control of where the line falls. */ .corp-br-narrow { display: none; } @media (max-width: 1199px) { .corp-br-narrow { display: inline; } } /* the same, for a break only the phone frame draws */ .corp-br-phone { display: none; } @media (max-width: 767px) { .corp-br-phone { display: inline; } } /* ---------- section head ---------- */ .corp-head { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; } .corp-eyebrow { display: inline-flex; align-items: center; box-sizing: border-box; padding: 10px 30px; border: 1px solid var(--corp-line); border-radius: 36px; background: var(--corp-canvas); color: var(--corp-muted); font-size: 16px; font-weight: 400; /* the pill measures 40 in the frame and 37 on the phone one; the browser's own normal leaves it a pixel taller than either */ line-height: 18px; } .corp-h2 { margin: 0; font-family: "Unbounded", sans-serif; font-size: 32px; font-weight: 400; /* Figma's auto leading for Unbounded Regular is 1.25; the browser's normal for the Regular face is 1.2, which loses 2px a line against the frame */ line-height: 1.25; letter-spacing: normal; text-transform: uppercase; color: var(--corp-ink); } .corp-head-sub { margin: 0; font-size: 18px; font-weight: 400; line-height: normal; color: var(--corp-muted); } @media (max-width: 767px) { .corp-head { gap: 10px; } .corp-eyebrow { padding: 9px 24px; font-size: 14px; line-height: 17px; } .corp-h2 { font-size: 18px; } .corp-head-sub { font-size: 14px; line-height: 17px; } } /* head inside a white panel: left aligned, Unbounded Bold rather than the uppercase Regular the standalone sections use (fig 7033:3565) */ .corp-panel-head { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .corp-panel-title { margin: 0; font-family: "Unbounded", sans-serif; font-size: 32px; font-weight: 700; line-height: normal; color: var(--corp-ink); } .corp-panel-sub { margin: 0; font-size: 18px; font-weight: 400; line-height: normal; color: var(--corp-muted); } @media (max-width: 767px) { .corp-panel-head { gap: 16px; } .corp-panel-title { font-size: 18px; } .corp-panel-sub { font-size: 14px; } } /* ---------- white panel ---------- 1880 wide at 1920 (the page gutter is the only inset) and its content column is the same 1430 the rest of the page uses, so the side padding is whatever is left once 1430 no longer fits. */ .corp-panel { box-sizing: border-box; background: #fff; border-radius: 32px; padding-inline: max(var(--corp-panel-pad-min), (100% - 1430px) / 2); padding-block: var(--corp-panel-pad-y); } @media (max-width: 1199px) { .corp-panel { --corp-panel-pad-y: 40px; } } @media (max-width: 767px) { .corp-panel { --corp-panel-pad-min: 16px; --corp-panel-pad-y: 20px; border-radius: 20px; } } /* ---------- buttons ---------- */ .corp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; padding: 20px 70px; border-radius: 20px; border: 0; font-family: inherit; font-size: 18px; font-weight: 600; /* every button in the frames measures 62 tall on desktop and 46 on the phone, which is this line box either side of the padding */ line-height: 22px; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .corp-btn img { flex-shrink: 0; width: 20px; height: 20px; } .corp-btn--orange { background: var(--corp-orange); color: #fff; } .corp-btn--orange:hover, .corp-btn--orange:focus-visible { background: #e05f00; color: #fff; } .corp-btn--dark { background: var(--corp-ink); color: #fff; } .corp-btn--dark:hover, .corp-btn--dark:focus-visible { background: #000; color: #fff; } .corp-btn--outline-light { /* the border eats into the padding: the frame draws both hero buttons 62 tall, and a stretched row would otherwise take the bordered one's 65 */ padding-block: 18.5px; border: 1.5px solid #fff; color: #fff; background: transparent; } .corp-btn--outline-light:hover, .corp-btn--outline-light:focus-visible { background: rgba(255, 255, 255, .14); color: #fff; } @media (max-width: 767px) { .corp-btn { width: 100%; padding: 12px 24px; border-radius: 14px; font-size: 16px; } } /* ---------- feature card (advantages and process share one component) ---------- */ /* The mock groups the icon and the text block 10 apart and the title and text 5 (fig 7040:7321), so the icon carries the extra 5 rather than the column. */ .corp-card { box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 25px; border-radius: 30px; background: #fff; /* Two independent layers, not two chained drop-shadow() filters: a chained filter shadows the previous filter's output, shadow included. The blurs are the pair the exports measure at the card's straight edges; halved, as the filter had them, the shadow reaches a pixel short. */ box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .1); } .corp-card-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: 5px; width: 48px; height: 48px; border-radius: 14px; background: var(--corp-ink); } /* The icon frames are 28 wide but their 2-unit stroke is centred on the frame edge, so the drawing is 30 across. The assets carry that bleed inside a 30-unit box; sizing the slot 28 would shave the outer half of every edge stroke off. */ .corp-card-icon img { width: 30px; height: 30px; } .corp-card-title { margin: 0; font-size: 20px; font-weight: 600; line-height: normal; color: var(--corp-ink); } .corp-card-text { margin: 0; font-size: 16px; font-weight: 400; /* Figma lays 16px Montserrat on 20 and 14px on 17; the browser's own normal rounds both up by half a pixel, which drifts a line at a time */ line-height: 20px; color: var(--corp-muted-2); } @media (max-width: 767px) { .corp-card { border-radius: 16px; } }