/* ========================================================================== Round13 — Use-case landing pages (Figma "Landing page - 6 use cases") Shared stylesheet for all six pages. First consumer: Page Automate (ST-2841). Design system da chot, nen file nay KHONG khai bao custom property rieng nao. Mau / chu / spacing / radius deu dung THANG token cua assets/css/global.css (`:root`, khoi Round11): --color-* / --fs-* / --lh-* / --var-* / --radius-*. Nhung so chi la hinh hoc cua mot frame Figma cu the — khong phai token dung chung — thi viet thang tai cho dung, kem chu thich node/nguon: 800 / 600 / 488px cap chieu rong cua section-headings 0.5 opacity cua instance inactive 100px sticky top (bang homepage.css `.automate-sticky`) 250vh quang scroll cua rail (do tu homepage, xem .uc-flow) min(600px, calc(100vw - 90px)) chieu rong card rail (xem .uc-flow__item) Cach nay giong homepage.css dang lam, va tranh tao lop alias trung ten token. Breakpoints: exactly two, per project rule. > 1024px desktop (Figma automate/desktop 1920 + automate/laptop 1336) <= 1024px tablet + mobile shared (Figma automate/tablet 834 + 390) ========================================================================== */ /* ========================================================================== Legacy reset guard global.css still carries the pre-Round11 element styles (`h1 { font-size: var(--font-size-H1); letter-spacing: var(--font-spacing-H1) }` etc.) plus a `line-height: 1.15` on from reset.css. Every text layer on the Figma use-case frames has letter-spacing 0, so that inherited tracking has to be cleared — scoped to `.uc-page` so no earlier round is affected. ========================================================================== */ .uc-page :is(h1, h2, h3, h4, h5, h6), .uc-page :is(p, blockquote, figure, figcaption) { margin: 0; letter-spacing: normal; } /* ========================================================================== Section shell — Figma `section-wrapper` + `content-wrapper` ========================================================================== */ .uc-section { position: relative; padding-inline: var(--section-horizontal-padding); background: var(--color-2nd-bg); /* Both rails deliberately let the NEXT item peek past the 1400px container (Figma shows that peek). Between 1025px and ~1400px the 1300px testimonial slide is wider than the viewport, so without clipping it extends the DOCUMENT and the whole page scrolls sideways on a laptop. `clip` — not `hidden` — because `hidden` would create a scroll container and break the `position: sticky` rail inside .uc-section--flow. */ overflow-x: clip; } .uc-section__inner { width: 100%; max-width: var(--container-max); margin-inline: auto; } /* Hero keeps 140px top AND bottom at both breakpoints (Figma mobile frame also uses 140 here, unlike every other section). */ .uc-section--hero { padding-block: var(--var-140); } /* Body sections butt up against the previous one and only pad the bottom. */ .uc-section--stack, .uc-section--flow { padding-top: 0; padding-bottom: var(--section-vertical-padding); } /* Testimonials sits on the alternate background and pads only the top, so it runs straight into the footer CTA below it. */ .uc-section--testimonials { padding-top: var(--section-vertical-padding); padding-bottom: 0; background: var(--color-1st-bg); } /* Vertical rhythm inside a section (Figma `content-wrapper` gap 80 / 40). */ .uc-stack { display: flex; flex-direction: column; gap: var(--section-gap); } /* ========================================================================== section-headings (Figma `section-headings` + /subheading /heading /description) ========================================================================== */ /* Figma căn giữa component này ở mọi instance của 6 section, nên canh giữa nằm thẳng trong rule gốc — không có modifier căn lề. */ .uc-headings { display: flex; flex-direction: column; align-items: center; gap: var(--var-28); } .uc-headings__group { display: flex; flex-direction: column; align-items: center; gap: var(--var-12); width: 100%; } .uc-headings__text { display: flex; flex-direction: column; align-items: center; width: 100%; } .uc-headings__text--gap-16 { gap: var(--var-16); } /* Hero only — Figma puts 40px between the h1 and its description. */ .uc-headings__text--gap-40 { gap: var(--var-40); } .uc-headings__eyebrow { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: var(--fs-label-lg); line-height: var(--lh-label); text-transform: uppercase; /* Figma fills this text with the brand gradient. `-webkit-text-fill-color` is required alongside `color: transparent` — WebKit ignores the latter for text painting, so without it Safari renders solid black instead of the gradient. Same combination the repo already uses in `.text-gradient` (homepage.css) and the footer-CTA eyebrow. */ background: var(--color-gradient-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .uc-headings__title { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-heading); text-align: center; color: var(--color-1st-fg); } /* Size follows the heading level, exactly as Figma scales it: h1 — page title 58 / 32 (--fs-h1) h2 — section title 48 / 28 (--fs-h2, the default above) h3 — card title 25 / 20 (--fs-h5) */ h1.uc-headings__title { font-size: var(--fs-h1); } h3.uc-headings__title { font-size: var(--fs-h5); } .uc-headings__title--w800 { /* Figma cap `section-headings/heading` o 800. */ max-width: 800px; } .uc-headings__title--wfull { max-width: 100%; } .uc-headings__desc { margin: 0; /* Figma cap `section-headings/description` o 600. */ max-width: 600px; font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); text-align: center; color: var(--color-1st-fg); } .uc-headings__actions { display: flex; gap: var(--var-12); align-items: center; flex-wrap: wrap; } /* ========================================================================== Buttons — Figma `button/text` ========================================================================== */ /* Figma chỉ dùng một kiểu button trong 6 section này (bản secondary của component `button/text` ở Figma bị ẩn — visible: false), nên không có modifier. */ .uc-btn { display: inline-flex; background: var(--color-1st-btn-bg); color: var(--color-1st-btn-fg); align-items: center; justify-content: center; gap: var(--var-6); padding: var(--var-14) var(--var-28); border-radius: var(--radius-pill); font-family: var(--font-body); font-weight: 500; font-size: var(--fs-label-md); line-height: var(--lh-label); text-transform: uppercase; text-decoration: none; transition: opacity 0.15s ease; } .uc-btn:hover { opacity: 0.8; } /* Keyboard focus. Figma defines no focus state, so this follows the existing repo precedent `.automate-dot:focus-visible` (homepage.css): 2px outline, 4px offset. The ring colour is the brand red rather than the homepage's --color-1st-fg, because these controls include a #050505 button — a black ring on a black button is invisible. `:focus-visible` only, so a mouse click does not leave a ring behind. */ .uc-btn:focus-visible, .uc-progress__dot:focus-visible { outline: var(--var-2) solid var(--color-1st-brd); outline-offset: var(--var-4); } /* ========================================================================== Trust badges — Figma `section-headings/badges` + `/bfs-badge` ========================================================================== */ .uc-badges { display: flex; align-items: center; justify-content: center; gap: var(--var-6); } .uc-badge { display: inline-flex; align-items: center; justify-content: center; gap: var(--var-4); } .uc-badge--shopify { padding: var(--var-4); background: var(--color-semantic-shopify-bg); } .uc-badge--shopify .uc-badge__label { color: var(--color-semantic-shopify-fg); } .uc-badge--rating .uc-badge__label { color: var(--color-1st-fg); } .uc-badge--rating .uc-badge__icon { color: var(--color-1st-fg); } .uc-badge__icon { display: block; flex-shrink: 0; } .uc-badge__label { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-label-md); line-height: var(--lh-label); } .uc-badges__divider { display: block; align-self: stretch; width: var(--var-1); background: var(--color-stroke); } /* ========================================================================== Section 1 — Hero (4530:1409) ========================================================================== */ .uc-hero { display: flex; flex-direction: column; align-items: center; /* Figma desktop content-wrapper has no gap here; mobile uses 40. */ gap: 0; } .uc-hero__media { width: 100%; } .uc-hero__image { display: block; width: 100%; height: auto; aspect-ratio: 1400 / 600; object-fit: cover; } /* ========================================================================== Section 2 — Flow rail with pinned horizontal scroll (4530:1413) ========================================================================== */ .uc-flow { /* Chieu cao tao ra quang scroll ma engine scrub theo: cao hon = rail chay cham hon tren moi pixel cuon. 250vh lay tu chinh homepage, khong phai so tu dat: Jira ST-2841 §"Effect. Horizontal scroll" ghi "3. Tham khao: https://uppromote.com/", do `.automate-section` cua homepage = 2700px @1080 viewport = 250vh, cung 3 item, sticky top 100px / height 980px. */ height: 250vh; } .uc-flow__heading { /* Figma `content-wrapper` gap 140 between the heading and the rail. */ padding-bottom: var(--var-140); } .uc-flow__sticky { position: sticky; /* Ghim DUOI site-header (fixed, cao 66px) voi mot khoang tho. Cung con so homepage dung cho hieu ung nay: homepage.css `.automate-sticky`. Khong co token global nao mang 100px nen viet thang, giong homepage. */ top: 100px; height: calc(100vh - 100px); display: flex; flex-direction: column; /* `safe center` centres when the rail fits and falls back to flex-start when it does not, so nothing is clipped on short laptop viewports. */ justify-content: safe center; gap: var(--var-40); overflow: hidden; } .uc-flow__viewport { overflow: visible; } .uc-flow__track { display: flex; align-items: flex-start; /* Figma has no gap: the 80px connector occupies the space between cards. */ gap: 0; will-change: transform; } .uc-flow__item { /* Figma `automate > list > automate/item`: 600 o ca 1920 / 1336 / 834, va 300 o 390. `min(600px, calc(100vw - 90px))` tra ve dung ca hai moc (834 - 90 = 744 -> cap 600; 390 - 90 = 300), nen khong can breakpoint rieng: tu 690px tro len bieu thuc luon bang 600. */ flex: 0 0 min(600px, calc(100vw - 90px)); width: min(600px, calc(100vw - 90px)); display: flex; flex-direction: column; gap: var(--var-40); } /* The card's top rule and the connector form one continuous line across the whole rail (Figma `divider` layers: 1px stroke, dash pattern [8, 8]). `border-top: dashed` would let the browser pick its own dash length, so the 8/8 rhythm is drawn with a gradient instead. Figma uses a separate LINE per card and per connector, so restarting the pattern per element is faithful. */ .uc-flow__rule, .uc-flow__connector { flex-shrink: 0; margin: 0; border: 0; height: var(--var-1); color: var(--color-1st-fg); background-image: repeating-linear-gradient(to right, currentColor 0 var(--var-8), transparent var(--var-8) calc(var(--var-8) * 2)); } .uc-flow__rule { width: 100%; } .uc-flow__connector { align-self: flex-start; /* Figma `divider` giua 2 card: 80 o 1920/1336/834, 40 o 390. */ width: var(--var-80); } .uc-flow__number { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h4); line-height: var(--lh-heading); color: var(--color-1st-fg); } .uc-flow__copy { display: flex; flex-direction: column; gap: var(--var-16); } .uc-flow__title { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h5); line-height: var(--lh-heading); color: var(--color-1st-fg); } .uc-flow__text { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-1st-fg); } .uc-flow__media { width: 100%; } .uc-flow__image { display: block; width: 100%; height: auto; aspect-ratio: 600 / 300; object-fit: cover; } .uc-flow__controls { display: flex; justify-content: center; } /* ========================================================================== progress+button (Figma `progress+button`, `button/icon`, `progress`) ========================================================================== */ .uc-progress { display: flex; align-items: center; gap: var(--var-16); } .uc-progress__track { display: flex; align-items: center; gap: var(--var-8); padding-block: var(--var-8); } .uc-progress__dot { width: var(--var-12); height: var(--var-12); padding: 0; border: 0; /* These dots are real