/* ========================================================================== UniFluent homepage — lower sections, Flowty visual language -------------------------------------------------------------------------- Everything below the hero. Modelled closely on flowty.co: one geometric sans (Poppins) for display type, near-black stage, light grey cards mixed with dark ones, vivid violet accent, 28px radii, pill buttons, marquee ribbon, rolling counters, a giant cropped wordmark in the footer and a floating download dock. Scoping contract: every selector here is prefixed .flow- and no rule targets a bare element, so nothing can leak into the hero (Fraunces), the navbar (Inter) or any other page. Colour tokens are reused from brand.css where they exist; anything Flowty-specific is a --flow-* token. ========================================================================== */ :root { --flow-display: 'Poppins', 'Inter', -apple-system, sans-serif; --flow-radius: 28px; --flow-radius-sm: 16px; /* Flowty's light card grey — warm enough to read as paper on ink */ --flow-card-light: #d9d9de; --flow-card-dark: #131318; --flow-ink-on-light: #101014; --flow-dim-on-light: rgba(16, 16, 20, 0.6); /* Accent: our indigo pushed toward Flowty's vivid violet */ --flow-accent: #6c4cf1; --flow-accent-bright: #8b5cf6; --flow-text: #e6e6ea; --flow-dim: rgba(214, 214, 222, 0.55); --flow-faint: rgba(214, 214, 222, 0.32); --flow-hairline: rgba(214, 214, 222, 0.14); } /* -------------------------------------------------------------------------- Lenis reset brand.css sets `html { scroll-behavior: smooth }`. Lenis drives the scroll position imperatively every frame, and with native smooth behaviour still on, each of those writes starts its own easing animation - two systems fighting over one scroll position, which reads as constant jank. Lenis stamps `lenis` on whenever it is running, so this disables the native easing exactly when Lenis owns the scroll and leaves it in place for reduced-motion/no-CDN visitors, who still get the plain page. -------------------------------------------------------------------------- */ html.lenis { scroll-behavior: auto !important; } html.lenis, html.lenis body { height: auto; } /* -------------------------------------------------------------------------- Shared primitives -------------------------------------------------------------------------- */ .flow-section { position: relative; width: 100%; padding: clamp(6rem, 14vh, 11rem) clamp(1.5rem, 4vw, 4.5rem); background: var(--uf-ink, #0a0a0b); color: var(--flow-text); font-family: var(--uf-sans, 'Inter', sans-serif); overflow: hidden; } .flow-inner { max-width: 1360px; margin: 0 auto; } /* Display type: the Flowty look. Medium weight, tight leading, light grey. */ .flow-h1, .flow-h2 { margin: 0; font-family: var(--flow-display); font-weight: 500; line-height: 1.02; letter-spacing: -0.03em; color: #d9d9dd; } .flow-h1 { font-size: clamp(2.8rem, 7vw, 6.2rem); } .flow-h2 { font-size: clamp(2.2rem, 5vw, 4.4rem); } /* Circular arrow button — Flowty puts one on every row and card */ .flow-arrow { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: none; background: #202027; color: #e6e6ea; font-size: 1rem; cursor: pointer; transition: transform 0.35s var(--uf-ease, ease), background 0.35s; } .flow-arrow:hover { transform: translateX(4px); background: var(--flow-accent); } .flow-arrow--onlight { background: #17171c; color: #e6e6ea; } /* Pill buttons in the Flowty voice */ .flow-btn { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.9rem 1.9rem; border-radius: 999px; border: none; font-family: var(--flow-display); font-size: 0.95rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: transform 0.3s var(--uf-ease, ease), background 0.3s, color 0.3s; } .flow-btn--light { background: #e3e3e7; color: #101014; } .flow-btn--light:hover { background: #ffffff; transform: translateY(-2px); } .flow-btn--accent { background: var(--flow-accent); color: #f4f2ff; } .flow-btn--accent:hover { background: var(--flow-accent-bright); transform: translateY(-2px); } .flow-btn--ghost { background: rgba(255, 255, 255, 0.06); color: var(--flow-text); border: 1px solid var(--flow-hairline); } .flow-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); } /* -------------------------------------------------------------------------- 0. Preloader — counts 0→99 then gets out of the way -------------------------------------------------------------------------- */ .flow-preloader { position: fixed; inset: 0; z-index: 12000; background: #0a0a0b; color: #d9d9dd; opacity: 1; visibility: visible; transition: opacity 0.55s ease, visibility 0.55s; } .flow-preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; } /* Failsafe: if preloader.js never runs, the overlay still dies. The delay outlasts the JS-driven fade (max ~3.5s + 0.55s), so it only ever fires when something upstream has already gone wrong. */ @keyframes flow-preloader-kill { to { opacity: 0; visibility: hidden; } } .flow-preloader { animation: flow-preloader-kill 0.4s ease 5s forwards; } .flow-preloader__count { position: absolute; top: clamp(0.5rem, 3vh, 2rem); left: clamp(1.5rem, 4vw, 4rem); font-family: var(--flow-display); font-weight: 500; font-size: clamp(6rem, 16vw, 14rem); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .flow-preloader__tag { position: absolute; bottom: clamp(1.5rem, 5vh, 3rem); left: clamp(1.5rem, 4vw, 4rem); margin: 0; max-width: 14ch; /* wraps to two lines, Flowty-style */ font-family: var(--flow-display); font-weight: 400; font-size: clamp(1.2rem, 2.4vw, 1.8rem); line-height: 1.3; color: #b9b9c1; } /* -------------------------------------------------------------------------- 1. Rolling stat — "16 languages", real numbers only -------------------------------------------------------------------------- */ .flow-stat { text-align: center; } .flow-stat__figure { display: flex; align-items: baseline; justify-content: center; gap: clamp(1rem, 3vw, 2.5rem); flex-wrap: wrap; } .flow-stat__digits { display: inline-flex; overflow: hidden; font-family: var(--flow-display); font-weight: 500; font-size: clamp(7rem, 22vw, 19rem); line-height: 1; letter-spacing: -0.05em; color: #dedee2; font-variant-numeric: tabular-nums; } /* Each digit is a window one character tall; the strip inside carries 0-9 and is translated by GSAP for the slot-machine roll. */ .flow-digit { display: inline-block; height: 1em; overflow: hidden; } .flow-digit__strip { display: block; will-change: transform; } .flow-digit__strip span { display: block; height: 1em; } /* Static "+" beside the rolling digits; same face, no roll. */ .flow-stat__plus { display: inline-block; height: 1em; line-height: 1; } .flow-stat__word { font-family: var(--flow-display); font-weight: 500; font-size: clamp(2rem, 6vw, 5rem); letter-spacing: -0.03em; color: #dedee2; } .flow-stat__claim { max-width: 40rem; margin: clamp(2rem, 5vh, 3.5rem) auto 0; font-family: var(--flow-display); font-weight: 400; font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.5; color: #c9c9d1; } .flow-stat__join { max-width: 34rem; margin: 1.1rem auto 0; font-size: 1rem; line-height: 1.6; color: var(--flow-dim); } /* -------------------------------------------------------------------------- 1a. University trust — its own band A full-viewport band: the label and the crests are centred in their own screen so nothing else is in the frame while they are being read. -------------------------------------------------------------------------- */ .flow-unis { display: flex; align-items: center; justify-content: center; min-height: 100svh; padding-top: clamp(4rem, 10vh, 8rem); padding-bottom: clamp(4rem, 10vh, 8rem); text-align: center; } .flow-unis .flow-inner { width: 100%; } .flow-unis__label { margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.9rem); letter-spacing: 0.2em; text-transform: uppercase; color: var(--flow-dim); } .flow-unis__row { display: flex; align-items: center; justify-content: center; gap: clamp(3.25rem, 7.5vw, 7.5rem); margin-top: clamp(4rem, 8.5vh, 6.25rem); flex-wrap: wrap; } /* Crest-sized, not logo-strip-sized: at this scale the marks are the section rather than a footnote to it, so they also carry more ink than the old greyed-back row did. */ .flow-unis__row img { height: clamp(124px, 14.5vw, 212px); width: auto; filter: grayscale(1) brightness(1.9); opacity: 0.72; transition: opacity 0.3s, filter 0.3s; } .flow-unis__row img:hover { filter: none; opacity: 1; } /* -------------------------------------------------------------------------- 1b. Languages — the sentence is the section Flowty's two-tone paragraph ("Whether you're a developer, designer…"): the connective text drops back to a third of the ink and the words being claimed stay bright. Here the bright words are the languages, so the sentence answers the counter above it - sixteen, and this is what for. Centred and full-bleed across the inner column, matching the stat section it follows rather than the left-aligned rows further down. The named languages are buttons, not spans, because clicking one switches the site. Only their colour marks them - no underline, no pill - so the sentence still reads as a sentence. -------------------------------------------------------------------------- */ .flow-langs { text-align: center; } .flow-langs__title { /* No measure cap: the sentence is meant to run the full width of the inner column, so it breaks into two long lines rather than a narrow block. text-wrap: balance keeps the last line from being a runt. */ margin: 0; font-family: var(--flow-display); font-weight: 500; font-size: clamp(1.9rem, 4.2vw, 3.6rem); line-height: 1.2; letter-spacing: -0.025em; color: #e2e2e8; text-wrap: balance; } .flow-langs__dim { color: rgba(214, 214, 222, 0.34); } .flow-langs__lang { /* Inherit everything: the button must be invisible as a control. */ padding: 0; border: none; background: none; font: inherit; letter-spacing: inherit; color: #f1f1f5; cursor: pointer; transition: color 0.3s var(--uf-ease, ease); } .flow-langs__lang:hover, .flow-langs__lang:focus-visible { color: var(--flow-accent-bright); } /* Rotating slots. The word lifts and fades out, the next one drops in - short enough that the sentence still reads while it changes. The inline-block is what lets it transform at all. */ /* The fixed min-width comes from js/home-flow.js, measured per slot. The word is centred in it so the slack is split either side rather than dumped in front of the following comma. */ .flow-langs__lang[data-lang-rotate] { display: inline-block; text-align: center; transition: color 0.3s var(--uf-ease, ease), opacity 0.26s ease, transform 0.26s ease; } .flow-langs__lang[data-lang-rotate].is-swapping { opacity: 0; transform: translateY(-0.28em); } .flow-langs__toggle { display: inline-flex; align-items: center; gap: 1rem; margin-top: clamp(2.5rem, 6vh, 4rem); padding: 0; border: none; background: none; font-family: var(--flow-display); font-size: 0.95rem; color: var(--flow-dim); cursor: pointer; transition: color 0.3s; } .flow-langs__toggle:hover { color: var(--flow-text); } /* The arrow is a span inside the button, so it needs the hover cue driven from the button rather than its own :hover. */ .flow-langs__toggle:hover .flow-arrow { transform: translateX(4px); background: var(--flow-accent); } .flow-langs__toggle[aria-expanded="true"] .flow-arrow { transform: rotate(90deg); background: var(--flow-accent); } .flow-langs__all { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; max-width: 60rem; margin: clamp(1.75rem, 4vh, 2.5rem) auto 0; padding: 0; list-style: none; } .flow-langs__all[hidden] { display: none; } .flow-langs__pill { padding: 0.7rem 1.5rem; border-radius: 999px; border: 1px solid var(--flow-hairline); background: rgba(255, 255, 255, 0.04); font-family: var(--flow-display); font-weight: 400; font-size: 0.95rem; color: #cfcfd6; cursor: pointer; transition: background 0.3s, border-color 0.3s, color 0.3s; } .flow-langs__pill:hover, .flow-langs__pill:focus-visible { background: rgba(139, 92, 246, 0.14); border-color: rgba(139, 92, 246, 0.5); color: #efeaff; } /* The language currently in use - marked, not hidden, so the reader can see which one they are reading. */ .flow-langs__pill[aria-current="true"] { border-color: rgba(139, 92, 246, 0.6); color: #efeaff; } /* -------------------------------------------------------------------------- 2. Scroll zoom - the video chip in the headline expands to fullscreen -------------------------------------------------------------------------- Two layouts share this markup: Static (default, also the no-JS/reduced-motion/narrow fallback): a normal section - headline, then the video full-width below it. The inline slot is hidden, the card is in flow. Zoom (js/home-flow.js adds .is-zoom on desktop): the section grows a tall scrub runway, the pin goes sticky, the slot opens a gap in the headline, and the card turns absolute so GSAP can slide it from the slot's rect out to near-fullscreen while the title blurs away behind it. */ .flow-zoom { position: relative; background: var(--uf-ink, #0a0a0b); color: var(--flow-text); padding: clamp(6rem, 14vh, 11rem) clamp(1.5rem, 4vw, 4.5rem); } .flow-zoom__pin { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(2rem, 5vh, 3.5rem); } .flow-zoom__title { margin: 0; font-family: var(--flow-display); font-weight: 500; font-size: clamp(2.6rem, 7.5vw, 6.8rem); line-height: 1.06; letter-spacing: -0.03em; text-align: center; color: #d9d9dd; will-change: filter, opacity; } /* The inline gap the chip starts in. Hidden in the static layout. */ .flow-zoom__slot { display: none; } .flow-zoom__card { width: min(100%, 900px); border-radius: var(--flow-radius); overflow: hidden; background: #000; } .flow-zoom__card video { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; } /* Zoom mode */ .flow-zoom.is-zoom { /* The runway: everything past the first viewport is scrub distance. */ min-height: 320svh; padding: 0; } .flow-zoom.is-zoom .flow-zoom__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; } .flow-zoom.is-zoom .flow-zoom__slot { display: inline-block; width: clamp(120px, 13vw, 210px); height: clamp(64px, 7.4vw, 120px); margin: 0 0.18em; vertical-align: middle; } .flow-zoom.is-zoom .flow-zoom__card { position: absolute; top: 0; left: 0; width: 200px; /* GSAP owns geometry from the first refresh */ will-change: transform, width, height; } .flow-zoom.is-zoom .flow-zoom__card video { aspect-ratio: auto; } /* -------------------------------------------------------------------------- 3. Feature rows + big screenshot card -------------------------------------------------------------------------- */ .flow-features__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: stretch; margin-top: clamp(3rem, 7vh, 5rem); } .flow-features__rows { display: flex; flex-direction: column; justify-content: center; } .flow-frow { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; padding: clamp(1.4rem, 3vh, 2rem) 0.25rem; border: none; border-top: 1px solid var(--flow-hairline); background: none; text-align: left; cursor: pointer; font-family: inherit; color: inherit; transition: opacity 0.3s; } .flow-frow:last-of-type { border-bottom: 1px solid var(--flow-hairline); } .flow-frow h3 { margin: 0 0 0.35rem; font-family: var(--flow-display); font-weight: 500; font-size: clamp(1.3rem, 2.4vw, 1.9rem); letter-spacing: -0.02em; color: #d9d9dd; transition: color 0.3s; } .flow-frow p { margin: 0; font-size: 0.98rem; line-height: 1.5; color: var(--flow-dim); } .flow-frow.is-active h3 { color: #ffffff; } .flow-frow.is-active .flow-arrow { background: var(--flow-accent); } .flow-features__card { position: relative; min-height: clamp(420px, 60vh, 640px); border-radius: var(--flow-radius); background: radial-gradient(120% 120% at 20% 0%, rgba(139, 92, 246, 0.55), transparent 60%), linear-gradient(150deg, #6c4cf1 0%, #4d34c4 55%, #35208f 100%); overflow: hidden; } /* The feature clips: four stock loops stacked full-bleed, crossfading via the same .is-active contract the screenshots used. js/home-flow.js plays only the active one. The ::before tint above them pulls every clip toward the brand violet and darkens the base. */ .flow-fclip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity 0.5s ease, transform 0.7s var(--uf-ease, ease); } .flow-fclip.is-active { opacity: 1; transform: scale(1); } .flow-features__card::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 120% at 20% 0%, rgba(139, 92, 246, 0.30), transparent 60%), linear-gradient(180deg, rgba(24, 14, 58, 0.12) 0%, rgba(10, 8, 30, 0.5) 100%); pointer-events: none; } /* Per-feature glow: a colour wash over the clip that follows the active row. @property lets the colour itself tween; browsers without it just snap between hues, which reads fine. */ @property --feat-glow { syntax: ''; inherits: true; initial-value: rgba(139, 92, 246, 0.5); } .flow-features__card { --feat-glow: rgba(139, 92, 246, 0.4); } .flow-features__card[data-active="flashcards"] { --feat-glow: rgba(85, 87, 232, 0.4); } .flow-features__card[data-active="games"] { --feat-glow: rgba(200, 244, 93, 0.22); } .flow-features__card[data-active="upload"] { --feat-glow: rgba(139, 141, 255, 0.36); } .flow-features__glow { position: absolute; inset: 0; z-index: 1; background: radial-gradient(70% 62% at 50% 68%, var(--feat-glow), transparent 74%); transition: --feat-glow 0.7s ease; pointer-events: none; } /* -------------------------------------------------------------------------- 4. Bento — mixed light and dark cards -------------------------------------------------------------------------- */ .flow-bento__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: clamp(3rem, 7vh, 5rem); } .flow-card { position: relative; display: flex; flex-direction: column; padding: clamp(1.8rem, 3.5vw, 2.8rem); border-radius: var(--flow-radius); background: var(--flow-card-dark); border: 1px solid rgba(214, 214, 222, 0.07); min-height: 380px; overflow: hidden; } .flow-card h3 { margin: 0 0 0.8rem; font-family: var(--flow-display); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -0.02em; color: #d9d9dd; } .flow-card p { margin: 0; max-width: 26rem; font-size: 1rem; line-height: 1.55; color: var(--flow-dim); } .flow-card .flow-arrow { margin-top: auto; align-self: flex-start; } .flow-card--light { background: var(--flow-card-light); border-color: transparent; } .flow-card--light h3 { color: var(--flow-ink-on-light); } .flow-card--light p { color: var(--flow-dim-on-light); } /* Mini bar chart on the light analytics card — pure CSS, echoes the app's weekly bars. Decorative. */ .flow-chart { display: flex; align-items: flex-end; gap: 10px; height: 150px; margin: 2.2rem 0 2.5rem; } .flow-chart span { flex: 1; border-radius: 8px 8px 4px 4px; background: rgba(16, 16, 20, 0.16); } .flow-chart span:nth-child(1) { height: 34%; } .flow-chart span:nth-child(2) { height: 52%; } .flow-chart span:nth-child(3) { height: 41%; } .flow-chart span:nth-child(4) { height: 68%; } .flow-chart span:nth-child(5) { height: 57%; background: var(--flow-accent); } .flow-chart span:nth-child(6) { height: 86%; background: var(--flow-accent); } .flow-chart span:nth-child(7) { height: 74%; } .flow-card--shot { flex-direction: row; align-items: center; gap: 2rem; } .flow-card--shot .flow-card__copy { display: flex; flex-direction: column; align-self: stretch; } /* Ad-free scene on the dark card — the sibling of the light card's bar chart. A clean app window of skeleton lesson rows, and the advert caught mid-eject: tilted, half past the window's edge, stamped with a lime dismiss badge. Pure CSS, decorative. */ .flow-adfree { position: relative; width: min(46%, 270px); align-self: center; margin-right: clamp(0.5rem, 2vw, 1.8rem); } /* The window: a rounded panel of content rows, like the app's lesson list */ .flow-adfree__panel { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 22px; background: rgba(214, 214, 222, 0.07); border: 1px solid rgba(214, 214, 222, 0.12); } .flow-adfree__item { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 14px; border-radius: 14px; background: rgba(19, 19, 24, 0.85); border: 1px solid rgba(214, 214, 222, 0.08); } .flow-adfree__dot { flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(214, 214, 222, 0.2); } .flow-adfree__text { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; } .flow-adfree__text b { height: 7px; border-radius: 4px; background: rgba(214, 214, 222, 0.24); } /* One row carries the accent, like the chart's violet bars */ .flow-adfree__item--accent { background: var(--flow-accent); border-color: transparent; } .flow-adfree__item--accent .flow-adfree__dot { background: rgba(255, 255, 255, 0.4); } .flow-adfree__item--accent .flow-adfree__text b { background: rgba(255, 255, 255, 0.55); } /* The advert, caught mid-eject: tilted past the window's bottom-right corner, drifting slowly. The lime badge is the dismissal. */ .flow-adfree__ad { position: absolute; right: -13%; bottom: -34px; width: 62%; padding: 14px 16px 16px; border-radius: 14px; background: #26262e; border: 1px solid rgba(214, 214, 222, 0.14); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45); transform: rotate(9deg); animation: flow-adfree-drift 7s ease-in-out infinite; } .flow-adfree__ad b { display: block; height: 7px; margin-top: 8px; border-radius: 4px; background: rgba(214, 214, 222, 0.18); } .flow-adfree__adword { display: inline-block; padding: 3px 8px; border-radius: 6px; border: 1px solid rgba(214, 214, 222, 0.3); font-family: var(--flow-display); font-weight: 500; font-size: 0.62rem; letter-spacing: 0.14em; color: rgba(214, 214, 222, 0.45); } .flow-adfree__zap { position: absolute; top: -13px; right: -13px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--uf-lime, #c8f45d); color: #101014; font-size: 0.85rem; box-shadow: 0 0 0 4px var(--flow-card-dark); } @keyframes flow-adfree-drift { 0%, 100% { transform: rotate(9deg) translate(0, 0); } 50% { transform: rotate(11deg) translate(6px, 8px); } } /* -------------------------------------------------------------------------- 5. Reviews — two-tone headline, card grid -------------------------------------------------------------------------- */ .flow-reviews__title { max-width: 62rem; font-size: clamp(1.9rem, 4vw, 3.4rem); line-height: 1.15; } .flow-reviews__title .is-dim { color: #67676e; } .flow-reviews__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: clamp(3rem, 7vh, 5rem); } .flow-review { display: flex; flex-direction: column; padding: 1.8rem; border-radius: 24px; background: var(--flow-card-dark); border: 1px solid rgba(214, 214, 222, 0.07); } .flow-review__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; } .flow-review__stars { display: inline-flex; gap: 3px; color: #dedee2; font-size: 0.85rem; } .flow-review__date { font-size: 0.82rem; color: var(--flow-faint); } .flow-review__name { margin: 0 0 0.8rem; font-family: var(--flow-display); font-weight: 500; font-size: 1.05rem; color: #d9d9dd; } .flow-review__body { margin: 0; font-size: 0.95rem; line-height: 1.65; color: var(--flow-dim); } /* -------------------------------------------------------------------------- 6. Pricing — light + dark card pair in the same language -------------------------------------------------------------------------- */ .flow-pricing { text-align: center; } .flow-pricing__sub { max-width: 34rem; margin: 1.2rem auto 0; font-size: 1.05rem; line-height: 1.6; color: var(--flow-dim); } .flow-pricing__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: clamp(3rem, 6vh, 4.5rem); text-align: left; } .flow-price-card { position: relative; padding: 2.4rem 2.2rem; border-radius: var(--flow-radius); background: var(--flow-card-light); color: var(--flow-ink-on-light); } .flow-price-card h3 { margin: 0; font-family: var(--flow-display); font-weight: 500; font-size: 1.25rem; } .flow-price-card .flow-price { margin-top: 1rem; font-family: var(--flow-display); font-weight: 500; font-size: clamp(2.6rem, 5vw, 3.6rem); letter-spacing: -0.03em; line-height: 1; } .flow-price-card .flow-price-period { margin-top: 0.4rem; font-size: 0.92rem; color: var(--flow-dim-on-light); } .flow-price-card ul { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; font-size: 0.95rem; } .flow-price-card li { display: flex; align-items: center; gap: 0.6rem; color: rgba(16, 16, 20, 0.78); } .flow-price-card li i { font-size: 0.8rem; color: var(--flow-accent); } .flow-price-card--dark { background: radial-gradient(120% 100% at 80% 0%, rgba(139, 92, 246, 0.4), transparent 55%), var(--flow-card-dark); border: 1px solid rgba(139, 92, 246, 0.35); color: var(--flow-text); } .flow-price-card--dark h3 { color: #d9d9dd; } .flow-price-card--dark .flow-price { color: #efeaff; } .flow-price-card--dark .flow-price-period { color: var(--flow-dim); } .flow-price-card--dark li { color: rgba(214, 214, 222, 0.75); } .flow-price-card--dark li i { color: var(--flow-accent-bright); } .flow-badge { position: absolute; top: 1.6rem; right: 1.6rem; padding: 0.35rem 0.9rem; border-radius: 999px; background: var(--flow-accent); font-family: var(--flow-display); font-size: 0.75rem; font-weight: 500; color: #f4f2ff; } .flow-savings { margin-top: 0.5rem; font-size: 0.9rem; font-weight: 500; color: var(--flow-accent-bright); } .flow-pricing__actions { margin-top: clamp(2.5rem, 5vh, 3.5rem); } /* -------------------------------------------------------------------------- 7. FAQ — marquee ribbon, media collage, accordion -------------------------------------------------------------------------- */ .flow-faq { padding-left: 0; padding-right: 0; } .flow-faq > .flow-inner { padding: 0 clamp(1.5rem, 4vw, 4.5rem); } .flow-marquee { display: flex; overflow: hidden; width: 100%; margin-bottom: clamp(3rem, 8vh, 6rem); user-select: none; } .flow-marquee__track { display: flex; flex: 0 0 auto; gap: clamp(2rem, 5vw, 4rem); padding-right: clamp(2rem, 5vw, 4rem); animation: flow-marquee 26s linear infinite; font-family: var(--flow-display); font-weight: 500; font-size: clamp(3rem, 8vw, 7rem); letter-spacing: -0.03em; color: #d9d9dd; white-space: nowrap; } @keyframes flow-marquee { to { transform: translateX(-100%); } } /* Ambient media band behind the FAQ */ .flow-faq__media { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: clamp(1rem, 3vw, 2.5rem); min-height: clamp(300px, 48vh, 520px); margin-bottom: clamp(3.5rem, 8vh, 6rem); border-radius: var(--flow-radius); background: radial-gradient(100% 130% at 50% 0%, rgba(139, 92, 246, 0.6), transparent 65%), linear-gradient(160deg, #7452f5 0%, #4d34c4 60%, #2c1a78 100%); overflow: hidden; } /* Ambient stock loop behind the collage — students at a library table. The gradient above stays underneath as the loading/reduced-motion fallback; the ::before tint pulls the warm footage toward the brand violet and darkens the base. */ .flow-faq__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); } .flow-faq__media::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(100% 130% at 50% 0%, rgba(139, 92, 246, 0.35), transparent 65%), linear-gradient(160deg, rgba(116, 82, 245, 0.5) 0%, rgba(64, 43, 168, 0.45) 60%, rgba(18, 11, 52, 0.65) 100%); pointer-events: none; } .flow-faq__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; } .flow-faq__intro p { margin: 0 0 1.8rem; font-size: 1.05rem; line-height: 1.65; color: var(--flow-dim); max-width: 24rem; } .flow-qa { border-top: 1px solid var(--flow-hairline); } .flow-qa:last-child { border-bottom: 1px solid var(--flow-hairline); } .flow-qa__q { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; padding: 1.5rem 0.25rem; border: none; background: none; text-align: left; cursor: pointer; font-family: var(--flow-display); font-weight: 500; font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: -0.01em; color: #d9d9dd; } .flow-qa__q i { flex: 0 0 auto; font-size: 0.9rem; color: var(--flow-faint); transition: transform 0.35s var(--uf-ease, ease); } .flow-qa.is-open .flow-qa__q i { transform: rotate(45deg); } .flow-qa__a { height: 0; overflow: hidden; } .flow-qa__a p { margin: 0; padding: 0 0.25rem 1.6rem; max-width: 40rem; font-size: 1rem; line-height: 1.65; color: var(--flow-dim); } /* -------------------------------------------------------------------------- 8. CTA — Try UniFluent Today + QR -------------------------------------------------------------------------- */ .flow-cta { text-align: center; } .flow-cta__sub { margin: 1.4rem auto 0; max-width: 26rem; font-family: var(--flow-display); font-weight: 400; font-size: 1.15rem; line-height: 1.5; color: var(--flow-dim); } .flow-cta__card { display: flex; align-items: center; justify-content: center; gap: clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap; width: fit-content; margin: clamp(2.5rem, 6vh, 4rem) auto 0; padding: clamp(1.8rem, 3.5vw, 2.6rem); border-radius: var(--flow-radius); background: var(--flow-card-light); color: var(--flow-ink-on-light); } .flow-cta__qr { width: clamp(130px, 16vw, 180px); height: auto; display: block; } .flow-cta__card figcaption, .flow-cta__label { margin: 0 0 1.1rem; font-family: var(--flow-display); font-weight: 500; font-size: 1.05rem; line-height: 1.4; text-align: left; color: var(--flow-ink-on-light); } .flow-cta__stores { display: flex; flex-direction: column; gap: 0.7rem; align-items: stretch; } .flow-cta__stores .flow-btn { justify-content: center; background: #17171c; color: #e6e6ea; } .flow-cta__stores .flow-btn:hover { background: var(--flow-accent); } /* -------------------------------------------------------------------------- 9. Footer — columns, legal, giant cropped wordmark -------------------------------------------------------------------------- */ .flow-footer { position: relative; padding: clamp(5rem, 10vh, 8rem) clamp(1.5rem, 4vw, 4.5rem) 0; background: var(--uf-ink, #0a0a0b); color: var(--flow-text); font-family: var(--uf-sans, 'Inter', sans-serif); overflow: hidden; } .flow-footer__grid { display: grid; grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(140px, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); max-width: 1360px; margin: 0 auto; } .flow-footer__brand p { margin: 0.9rem 0 0; max-width: 20rem; font-size: 0.95rem; line-height: 1.6; color: var(--flow-dim); } .flow-footer__brand strong { font-family: var(--flow-display); font-weight: 500; font-size: 1.3rem; color: #d9d9dd; } .flow-footer__col h4 { margin: 0 0 1.1rem; font-family: var(--flow-display); font-weight: 500; font-size: 0.95rem; color: #d9d9dd; } .flow-footer__col a { display: block; margin-bottom: 0.7rem; font-size: 0.95rem; text-decoration: none; color: var(--flow-dim); transition: color 0.25s; } .flow-footer__col a:hover { color: #ffffff; } .flow-footer__legal { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; max-width: 1360px; margin: clamp(3rem, 7vh, 5rem) auto 0; padding-top: 1.6rem; border-top: 1px solid var(--flow-hairline); font-size: 0.85rem; color: var(--flow-faint); } .flow-footer__legal p { margin: 0; } /* The signature move: a wordmark far larger than the viewport, cropped by the page's bottom edge. aria-hidden — it is decoration, the brand is already in the column above. */ .flow-footer__wordmark { display: block; margin: clamp(1rem, 4vh, 3rem) auto -0.14em; font-family: var(--flow-display); font-weight: 600; font-size: clamp(6rem, 16.5vw, 19rem); line-height: 0.78; letter-spacing: -0.04em; text-align: center; white-space: nowrap; color: #d9d9dd; pointer-events: none; } /* -------------------------------------------------------------------------- 10. Floating dock — bottom centre, follows the whole scroll This is the page's only navigation; there is no bar at the top. At rest it is a small pill: hamburger, logo, language, Download. Hovering it (or focusing into it, or tapping the hamburger on a touch device) expands the rail of site links out of its middle. The expansion animates grid-template-columns from 0fr to 1fr, which is the one way to transition to a content-sized width without hard-coding it. -------------------------------------------------------------------------- */ :root { /* The dock's footprint, shared so fixed controls and page-end content can clear it (philosophy zoom buttons, footer). Height = 44px buttons + 2×0.45rem padding; gap tracks .flow-dock's bottom offset. */ --uf-dock-h: 58px; --uf-dock-gap: 1.4rem; --uf-dock-clearance: calc(var(--uf-dock-h) + var(--uf-dock-gap) + env(safe-area-inset-bottom, 0px) + 0.75rem); } .flow-dock { position: fixed; /* Centred by auto margins rather than left:50% + translateX: with left:50% the containing block is only half the viewport, which caps the pill's width and squeezes the expanded rail. */ left: 0; right: 0; bottom: calc(var(--uf-dock-gap) + env(safe-area-inset-bottom, 0px)); width: max-content; max-width: calc(100vw - 2rem); margin: 0 auto; z-index: 9000; /* below cookie banner (10500) and mobile nav overlay */ display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem; border-radius: 999px; background: rgba(232, 232, 236, 0.96); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); opacity: 0; translate: 0 20px; transition: opacity 0.6s ease 0.2s, translate 0.6s var(--uf-ease, ease) 0.2s; } .flow-dock.is-ready { opacity: 1; translate: 0 0; } /* Hamburger: the touch affordance for the same expansion. Hidden wherever a real pointer can hover, since hovering already does the job. */ .flow-dock__menu { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 12px; border: none; border-radius: 50%; background: transparent; cursor: pointer; } .flow-dock__menu span { display: block; height: 2px; border-radius: 2px; background: #17171c; transition: transform 0.3s var(--uf-ease, ease), opacity 0.2s; } .flow-dock.is-open .flow-dock__menu span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .flow-dock.is-open .flow-dock__menu span:nth-child(2) { opacity: 0; } .flow-dock.is-open .flow-dock__menu span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Back arrow — only the essay pages render it. Sits outside the rail so it is always visible, like the language switcher. */ .flow-dock__back { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(16, 16, 20, 0.06); color: #17171c; font-size: 0.9rem; text-decoration: none; transition: background 0.25s ease; } .flow-dock__back:hover { background: rgba(16, 16, 20, 0.12); } .flow-dock__logo { display: inline-flex; flex: none; margin: 0 0.35rem; } /* The logo file is white artwork on transparent, drawn for the dark navbar it used to sit in. brightness(0) maps every opaque pixel to black and leaves the alpha alone, so it reads on the dock's light pill. */ .flow-dock__logo img { width: 30px; height: 30px; object-fit: contain; filter: brightness(0); } /* The expanding rail ---------------------------------------------------- */ .flow-dock__rail { display: grid; grid-template-columns: 0fr; opacity: 0; transition: grid-template-columns 0.55s var(--uf-ease, ease), opacity 0.3s ease; } .flow-dock:hover .flow-dock__rail, .flow-dock:focus-within .flow-dock__rail, .flow-dock.is-open .flow-dock__rail { grid-template-columns: 1fr; opacity: 1; } .flow-dock__links { display: flex; align-items: center; gap: 0.15rem; min-width: 0; overflow: hidden; } /* flex:none - a shrinking link would lose letters off its right edge before the rail ever ran out of room. */ .flow-dock__links a { display: block; flex: none; padding: 0.55rem 0.85rem; border-radius: 999px; font-family: var(--flow-display); font-weight: 500; font-size: 0.9rem; line-height: 1; color: #17171c; text-decoration: none; white-space: nowrap; transition: background 0.25s ease; } .flow-dock__links a:hover { background: rgba(16, 16, 20, 0.08); } .flow-dock__links a[aria-current="page"] { background: rgba(16, 16, 20, 0.08); } /* Language — always visible, so the switcher never depends on the hover */ .flow-dock__lang { position: relative; flex: none; } .flow-dock__lang .lang-switcher-btn { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.8rem; border-radius: 999px; background: rgba(16, 16, 20, 0.06); font-family: var(--flow-display); font-size: 0.82rem; color: #17171c; white-space: nowrap; cursor: pointer; transition: background 0.25s ease; } .flow-dock__lang .lang-switcher-btn:hover { background: rgba(16, 16, 20, 0.12); } /* Opens upward: the dock sits on the bottom edge of the viewport. The top:auto undoes brand.css's unscoped .lang-dropdown, which drops it below its button. */ .flow-dock__lang .lang-dropdown { position: absolute; top: auto; right: 0; bottom: calc(100% + 0.8rem); min-width: 200px; max-height: min(60vh, 340px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0.5rem; border-radius: 20px; background: rgba(232, 232, 236, 0.98); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; translate: 0 8px; transition: opacity 0.3s, visibility 0.3s, translate 0.3s var(--uf-ease, ease); z-index: 2; } .flow-dock__lang .lang-dropdown.active { opacity: 1; visibility: visible; translate: 0 0; } /* A visible track: the list is twice its own height, and with the scrollbar hidden there was nothing saying so. */ .flow-dock__lang .lang-dropdown { scrollbar-width: thin; scrollbar-color: rgba(16, 16, 20, 0.28) transparent; } .flow-dock__lang .lang-dropdown::-webkit-scrollbar { width: 6px; } .flow-dock__lang .lang-dropdown::-webkit-scrollbar-thumb { background: rgba(16, 16, 20, 0.28); border-radius: 999px; } /* brand.css opens the list on hover, which in the dock fires the moment the cursor arrives to expand the rail. In here it takes a click (js/site.js). */ .flow-dock__lang:hover .lang-dropdown:not(.active) { opacity: 0; visibility: hidden; } .flow-dock__lang .lang-option { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border-radius: 12px; font-family: var(--flow-display); font-size: 0.9rem; color: #17171c; cursor: pointer; transition: background 0.2s ease; } .flow-dock__lang .lang-option:hover, .flow-dock__lang .lang-option.active { background: rgba(16, 16, 20, 0.08); } .flow-dock__cta { display: inline-flex; flex: none; align-items: center; padding: 0.7rem 1.5rem; border-radius: 999px; background: #17171c; font-family: var(--flow-display); font-weight: 500; font-size: 0.9rem; color: #eeeef2; text-decoration: none; transition: background 0.3s; } .flow-dock__cta:hover { background: var(--flow-accent); } /* Touch, or too narrow for five links in a row: the rail stops growing sideways and becomes a panel above the dock, opened by the hamburger. */ /* 900px is where the longest translation of the rail (German, ~860px) stops fitting between the viewport edges - and the site's usual breakpoint. */ @media (hover: none), (max-width: 900px) { .flow-dock__menu { display: inline-flex; } .flow-dock__rail { position: absolute; left: 0; bottom: calc(100% + 0.8rem); display: block; min-width: 210px; padding: 0.5rem; border-radius: 20px; background: rgba(232, 232, 236, 0.98); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; translate: 0 8px; transition: opacity 0.3s, visibility 0.3s, translate 0.3s var(--uf-ease, ease); } /* Hover must not open the panel here - only the hamburger does. */ .flow-dock:hover .flow-dock__rail { opacity: 0; visibility: hidden; } .flow-dock:focus-within .flow-dock__rail, .flow-dock.is-open .flow-dock__rail, .flow-dock.is-open:hover .flow-dock__rail { opacity: 1; visibility: visible; translate: 0 0; } .flow-dock__links { flex-direction: column; align-items: stretch; gap: 0.1rem; overflow: visible; } .flow-dock__links a { border-radius: 12px; font-size: 0.95rem; padding: 0.6rem 0.9rem; } } /* -------------------------------------------------------------------------- Responsive — single column under 900px (same boundary as the hero rig) -------------------------------------------------------------------------- */ @media (max-width: 900px) { .flow-section { padding: 4.5rem 1.25rem; } .flow-features__grid, .flow-faq__grid { grid-template-columns: 1fr; } .flow-features__card { min-height: 440px; } .flow-bento__grid { grid-template-columns: 1fr; } .flow-card--light { grid-row: auto; } .flow-reviews__grid { grid-template-columns: 1fr; } .flow-pricing__grid { grid-template-columns: minmax(0, 420px); } .flow-card--shot { flex-direction: column; align-items: flex-start; } .flow-adfree { width: min(88%, 320px); margin: 2rem auto 2.5rem; } .flow-adfree__ad { right: -4%; } .flow-faq__media { min-height: 240px; } .flow-unis__row { gap: 2.5rem 3.25rem; } .flow-unis__row img { height: 104px; } .flow-footer__grid { grid-template-columns: 1fr 1fr; } .flow-footer__wordmark { font-size: 21vw; } /* The wordmark shrinks here, so it no longer spaces the legal row clear of the dock on its own. The safe-area term matters: on iPhones the dock rides that much higher. */ .flow-footer__legal { margin-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); } :root { --uf-dock-gap: 1rem; } .flow-dock__cta { padding: 0.65rem 1.2rem; } } @media (max-width: 560px) { .flow-footer__grid { grid-template-columns: 1fr; gap: 1.8rem; } .flow-cta__card { flex-direction: column; text-align: center; } .flow-cta__card figcaption, .flow-cta__label { text-align: center; } } /* -------------------------------------------------------------------------- Reduced motion — everything lands in its final state, nothing loops -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .flow-preloader { display: none; animation: none; } .flow-marquee__track { animation: none; } /* Only the first copy of the ribbon; the aria-hidden duplicate is for the seamless loop, which no longer runs. */ .flow-marquee__track[aria-hidden="true"] { display: none; } .flow-arrow, .flow-btn, .flow-chip, .flow-dock, .flow-dock__rail, .flow-dock__menu span, .flow-fclip, .flow-features__glow, .flow-qa__q i { transition: none; } /* Static gradient instead of the ambient footage. */ .flow-fclip, .flow-faq__bg { display: none; } .flow-adfree__ad { animation: none; } .flow-dock { opacity: 1; translate: 0 0; } }