/* ── Spacing ratios ──────────────────────────────────────────────────────── */ /* Fluid, not stepped. These four values replaced hardcoded triples that were re-declared inside the 900px and 640px media queries — which is how the site accumulated sixteen distinct breakpoint values with no scale behind them, and why layout kept needing re-tuning one viewport at a time. Each clamp is calibrated to land on the OLD stepped values at the widths they were originally tuned for, so this is a refactor and not a redesign: viewport gutter (was) section (was) 375px 18px (18) 54px (54) 640px 20px (18) 54px (54) 900px 29px (24) 67px (68) 1240px 40px (40) 92px (92) 1920px 40px (40) 92px (92) Between those widths they now interpolate instead of jumping. Change the ratio here and every section on every page follows — that is the whole point, so resist re-declaring these inside a media query. */ :root { --pq-gutter: clamp(18px, 3.2vw, 40px); --pq-section-y: clamp(54px, 7.4vw, 92px); --pq-section-tight-y: clamp(40px, 5.2vw, 64px); --pq-sechead-gap: clamp(38px, 4.2vw, 52px); /* The page-section rhythm. Distinct from --pq-gutter above because the two genuinely have different floors: .pq-wrap tightens to 18px on a phone, page sections stop at 24px. These replaced five near-identical copies — .hm-sec, .in-sec, .hb-sec, .cp-sec, .ab-sec — each declaring "88px 40px" with a "60px 24px" override inside its own max-width:900px query. Five files, one rhythm, and a hard 28px jump at exactly 900px. Now one definition that interpolates: 375px → 60 / 24 900px → 64 / 29 1240px+ → 88 / 40 /about previously sat at 92px rather than 88px. That 4px was drift, not intent, and it is normalised here. */ --pq-sec-y: clamp(60px, 7.1vw, 88px); --pq-sec-x: clamp(24px, 3.2vw, 40px); /* Trailing pad on the sections that carry one (.in-sec, .cp-sec). */ --pq-sec-y-end: clamp(16px, 1.6vw, 20px); /* A deliberately tighter tier — /internship uses it to pull two related bands closer than the standard rhythm. Kept as its own token because 76/56 is a design decision, unlike the 92px drift normalised above. */ --pq-sec-y-mid: clamp(56px, 6.1vw, 76px); } .pq-root { font-family: var(--font-dm-sans), 'DM Sans', system-ui, sans-serif; color: #111014; background: #FFFFFF; -webkit-font-smoothing: antialiased; } .pq-root ::selection { background: #FBD24E; color: #111014; } .pq-wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--pq-gutter); } .pq-section { padding: var(--pq-section-y) 0; } .pq-section-cream { background: #FDF8E3; } .pq-section-tight { padding: var(--pq-section-tight-y) 0; } /* Rules between full-bleed bands. The system has no soft dividers — a section change is announced by a 2.5px line or a ground change, never a gradient. */ .pq-rule-t { border-top: 2.5px solid #111014; } .pq-rule-b { border-bottom: 2.5px solid #111014; } /* ── Type ────────────────────────────────────────────────────────────────── */ .pq-h1 { font-family: var(--font-outfit), 'Outfit', system-ui, sans-serif; font-weight: 700; font-size: clamp(34px, 6.2vw, 66px); line-height: 1.14; letter-spacing: -0.032em; margin: 26px 0 0; text-wrap: pretty; } .pq-h2 { font-family: var(--font-outfit), 'Outfit', system-ui, sans-serif; font-weight: 700; font-size: clamp(26px, 4.4vw, 42px); line-height: 1.18; letter-spacing: -0.028em; margin: 14px 0 0; text-wrap: pretty; } .pq-h3 { font-family: var(--font-outfit), 'Outfit', system-ui, sans-serif; font-weight: 700; font-size: 20px; line-height: 1.3; letter-spacing: -0.02em; margin: 0; } .pq-lead { font-size: clamp(16px, 2.2vw, 19px); line-height: 1.6; color: #55525E; margin: 22px 0 0; text-wrap: pretty; } .pq-lead strong { color: #26242E; font-weight: 600; } .pq-body { font-size: 16px; line-height: 1.68; color: #55525E; margin: 0; } .pq-body strong { color: #26242E; font-weight: 600; } /* The rotated sticker run inside a headline. Inline-block so the rotation does not drag the line box, and the tilt is deliberately under 2deg — past that it starts colliding with the line above at mobile line-heights. */ .pq-mark { display: inline-block; background: #FBD24E; border: 2px solid #111014; border-radius: 4px; padding: 0 10px 3px; transform: rotate(-1.4deg); box-shadow: 4px 4px 0 0 #111014; } .pq-mark-mint { background: #86E6B0; } .pq-mark-pink { background: #F9A8D4; } .pq-accent { color: #7C3AED; } /* ── Eyebrows and labels ─────────────────────────────────────────────────── */ /* Black pill, yellow text. The section-opener label. */ .pq-eyebrow { display: inline-flex; align-items: center; gap: 7px; background: #111014; color: #FBD24E; border-radius: 5px; padding: 5px 11px; font-family: var(--font-outfit), 'Outfit', system-ui, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; margin: 0; } /* Outlined pill with a live dot. Used once per page, above the h1. */ .pq-badge { display: inline-flex; align-items: center; gap: 10px; background: #FFFFFF; border: 2px solid #111014; border-radius: 999px; padding: 8px 18px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #111014; } .pq-dot { width: 8px; height: 8px; border-radius: 50%; background: #F0459B; display: inline-block; flex-shrink: 0; } .pq-mono { font-family: var(--font-mono-code), 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; } /* Centred section opener. */ .pq-sechead { max-width: 720px; margin: 0 auto var(--pq-sechead-gap); text-align: center; } .pq-sechead .pq-lead { margin-top: 16px; } /* Left-aligned variant for sections whose content is a wide grid — a centred head over a 4-column grid reads as belonging to the middle two columns. */ .pq-sechead-left { max-width: 760px; margin: 0 0 var(--pq-sechead-gap); text-align: left; } /* ── Buttons ─────────────────────────────────────────────────────────────── */ .pq-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 56px; padding: 0 28px; border: 2.5px solid #111014; border-radius: 11px; font-family: var(--font-outfit), 'Outfit', system-ui, sans-serif; font-size: 17px; font-weight: 600; color: #111014; background: #FFFFFF; box-shadow: 5px 5px 0 0 #111014; cursor: pointer; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease; } .pq-btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 0 #111014; } .pq-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 #111014; } .pq-btn-primary { background: #7C3AED; color: #FFFFFF; } .pq-btn-primary:hover { background: #5B21B6; color: #FFFFFF; } .pq-btn-white:hover { background: #FBD24E; } .pq-btn-yellow { background: #FBD24E; } .pq-btn-yellow:hover { background: #FFFFFF; } .pq-btn-dark { background: #111014; color: #FFFFFF; } .pq-btn-dark:hover { background: #1E1236; color: #FFFFFF; } /* On dark grounds the ink shadow disappears, so the whole depth cue inverts. */ .pq-on-dark .pq-btn { border-color: #FFFFFF; box-shadow: 5px 5px 0 0 #FFFFFF; } .pq-on-dark .pq-btn:hover { box-shadow: 7px 7px 0 0 #FFFFFF; } .pq-on-dark .pq-btn:active { box-shadow: 1px 1px 0 0 #FFFFFF; } .pq-btn-sm { height: 46px; padding: 0 20px; font-size: 15px; box-shadow: 4px 4px 0 0 #111014; } .pq-btn-sm:hover { box-shadow: 6px 6px 0 0 #111014; } .pq-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } /* Text link with an arrow. Padded to a real tap target — unpadded it measures about 20px tall, well under the 44px minimum. */ .pq-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-outfit), 'Outfit', system-ui, sans-serif; font-size: 15px; font-weight: 600; color: #7C3AED; background: none; border: 0; cursor: pointer; padding: 12px 0; min-height: 44px; text-decoration: none; transition: gap .16s ease; } .pq-link:hover { gap: 11px; color: #5B21B6; } /* ── Cards ───────────────────────────────────────────────────────────────── */ .pq-card { background: #FFFFFF; border: 2.5px solid #111014; border-radius: 16px; padding: 26px; box-shadow: 5px 5px 0 0 #111014; } .pq-card-sm { border-width: 2px; border-radius: 11px; padding: 16px; box-shadow: 3px 3px 0 0 #111014; } /* Lift on hover is opt-in: it belongs on cards that are themselves links, and reads as a broken affordance on cards that are not clickable. */ .pq-card-hover { transition: transform .16s ease, box-shadow .16s ease; } .pq-card-hover:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 0 #111014; } /* ── Stacking deck ───────────────────────────────────────────────────────── */ /* A sequence of cards that fan into a pile as the page scrolls: each one sticks a little lower than the last, so the top edge of every previous card stays visible behind the current one. Used to walk a reader through an ordered process without a wall of text. Adapted from wscubetech.com's course-page deck (teardown: design/wscube-teardown/report.html). Two things make it worth copying — 1. It is pure CSS. No scroll listener, no IntersectionObserver, no JS at all. The whole effect is position:sticky with an increasing top offset. 2. It degrades to a plain document flow if sticky is unsupported. Mechanics, and the three things that will break it: · The container must NOT have overflow:hidden/auto on it or ANY ancestor. A scroll container in the chain re-parents sticky and the pile silently collapses into a normal stack. This is the classic failure. · The runway is just the container's natural height — cards tall enough to overflow the viewport give the effect room. No spacer element needed. · Every card needs --pq-deck-i set to its index at the call site. The step offset is multiplied by it; without it every card sticks at the same place and they overlap exactly. Mobile inverts the whole thing into a horizontal swipe rail, because a deck of 400px cards stacking inside an 812px phone leaves nothing readable — the same call WsCube makes at their own breakpoint. */ .pq-deck { --pq-deck-top: 88px; /* clearance above the first card */ --pq-deck-step: 14px; /* how much of each previous card stays visible */ display: flex; flex-direction: column; gap: 20px; margin-top: 42px; } /* Trailing runway. Without it the last card never pins at all: the pile builds to n-1 and the whole stack then releases together, so the final card — the mentor-review one, which is what the section is actually arguing for — gets the least attention. WsCube's own deck has this flaw; ours should not. It has to be a SIBLING. Two other shapes were tried and measured first, and both fail for instructive reasons: · padding-bottom on .pq-deck — sticky is constrained by the container's CONTENT box, so padding adds space but no stick range. Cards clamped to deckBottom − 300 exactly. · margin-bottom on the last card — a sticky element is held by its MARGIN box, so the margin travels with the card and it still has zero slack of its own. Measured: card 4 slid through its 130px offset without pinning. A ::after flex item is a real sibling that grows the container's content box while belonging to no card, which is what sticky needs. Value ≈ dwell distance: 300px of runway holds the full pile for ~300px of scroll. */ .pq-deck::after { content: ''; display: block; flex: 0 0 auto; height: min(38vh, 300px); } .pq-deck-card { position: sticky; top: calc(var(--pq-deck-top) + (var(--pq-deck-i, 0) * var(--pq-deck-step))); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); min-height: 388px; background: #FFFFFF; border: 2.5px solid #111014; border-radius: 20px; box-shadow: 8px 8px 0 0 #111014; overflow: hidden; /* clips the panel's own corners to the card radius. Safe: it is on the CARD, never on an ancestor of it. */ } .pq-deck-body { padding: 34px 34px 30px; display: flex; flex-direction: column; } .pq-deck-num { font-family: var(--font-mono-code), 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: #6B6875; margin: 0 0 14px; } .pq-deck-title { font-family: var(--font-outfit), 'Outfit', system-ui, sans-serif; font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.16; letter-spacing: -.022em; margin: 0; text-wrap: balance; } .pq-deck-text { font-size: 16px; line-height: 1.62; color: #55525E; margin: 14px 0 0; } /* The chip-coloured half. Deliberately typographic rather than a product screenshot — see the placeholder policy in src/content/home.ts. */ .pq-deck-panel { position: relative; border-left: 2.5px solid #111014; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; padding: 26px; } .pq-deck-glyph { font-family: var(--font-poppins), 'Poppins', system-ui, sans-serif; font-weight: 900; font-size: clamp(74px, 9vw, 116px); line-height: .84; color: #111014; margin: 0; letter-spacing: -.05em; } .pq-deck-caption { font-family: var(--font-mono-code), 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #111014; opacity: .72; margin: 0; text-align: center; } @media (max-width: 900px) { /* Horizontal rail. "position: static" is load-bearing: a top-sticky child of a horizontal scroller does nothing useful and only confuses the layout. */ .pq-deck { flex-direction: row; gap: 14px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 12px; /* overrides the desktop runway; a horizontal rail needs none */ /* bleed to the viewport edges so the rail reads as swipeable */ margin-inline: calc(var(--pq-sec-x) * -1); padding-inline: var(--pq-sec-x); scrollbar-width: none; } .pq-deck::-webkit-scrollbar { display: none; } .pq-deck-card { position: static; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; flex: 0 0 min(300px, 82vw); min-height: 0; scroll-snap-align: center; } .pq-deck::after { display: none; } /* a horizontal rail needs no runway */ .pq-deck-body { padding: 24px 22px 22px; } .pq-deck-panel { border-left: 0; border-top: 2.5px solid #111014; flex-direction: row; justify-content: flex-start; gap: 14px; padding: 16px 22px; } .pq-deck-glyph { font-size: 44px; } .pq-deck-caption { text-align: left; } } .pq-card-cream { background: #FDF8E3; } .pq-card-lilac { background: #DDD2F5; } .pq-card-dark { background: #1E1236; color: #FFFFFF; border-color: #111014; } /* Number/letter tile in a card corner. */ .pq-tile { width: 46px; height: 46px; flex-shrink: 0; border: 2px solid #111014; border-radius: 10px; display: grid; place-items: center; font-family: var(--font-outfit), 'Outfit', system-ui, sans-serif; font-size: 17px; font-weight: 700; box-shadow: 3px 3px 0 0 #111014; } .pq-chip { display: inline-flex; align-items: center; gap: 6px; border: 2px solid #111014; border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; background: #FFFFFF; } .pq-chips { display: flex; flex-wrap: wrap; gap: 9px; } /* Stat block — the small white card with a big number. */ .pq-stat { background: #FFFFFF; border: 2px solid #111014; border-radius: 11px; padding: 14px 18px; box-shadow: 3px 3px 0 0 #111014; } .pq-stat b { display: block; font-family: var(--font-outfit), 'Outfit', system-ui, sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; } .pq-stat span { display: block; font-size: 13px; font-weight: 600; color: #55525E; margin-top: 5px; } /* ── Grids ───────────────────────────────────────────────────────────────── */ .pq-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .pq-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .pq-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } /* ── Accordion ───────────────────────────────────────────────────────────── */ /* Built on

so the answers are in the server HTML. An earlier version gated them behind useState, which meant 32 authored answers existed and 3 reached the markup — the single largest AEO loss on the site. Do not convert these back to conditional rendering. */ .pq-acc { display: flex; flex-direction: column; gap: 12px; } .pq-accitem { background: #FFFFFF; border: 2.5px solid #111014; border-radius: 12px; overflow: hidden; box-shadow: 4px 4px 0 0 #111014; } .pq-accsummary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 20px 22px; font-family: var(--font-outfit), 'Outfit', system-ui, sans-serif; font-size: 17px; font-weight: 600; text-align: left; } .pq-accsummary::-webkit-details-marker { display: none; } .pq-accsummary::marker { content: ''; } .pq-accswatch { width: 14px; height: 14px; border: 2px solid #111014; border-radius: 4px; flex-shrink: 0; } .pq-accicon { margin-left: auto; flex-shrink: 0; width: 30px; height: 30px; border: 2px solid #111014; border-radius: 8px; background: #FFFFFF; display: grid; place-items: center; font-family: var(--font-outfit), 'Outfit', system-ui, sans-serif; font-size: 18px; font-weight: 700; line-height: 1; transition: transform .2s ease, background-color .2s ease; } .pq-accitem[open] .pq-accicon { transform: rotate(45deg); background: #FBD24E; } .pq-accbody { padding: 0 22px 22px; font-size: 16px; line-height: 1.68; color: #55525E; } .pq-accbody > :first-child { margin-top: 0; } /* ── Do / don't columns ──────────────────────────────────────────────────── */ .pq-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; } .pq-list li { display: flex; gap: 11px; font-size: 15.5px; line-height: 1.55; color: #55525E; } .pq-listmark { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; border: 2px solid #111014; border-radius: 6px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #111014; } /* ── Dateline ────────────────────────────────────────────────────────────── */ /* Published / updated / author line under an answer block. Present for readers and for answer engines that weight freshness and attribution. */ .pq-dateline { font-family: var(--font-mono-code), 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; line-height: 1.6; color: #6B6875; margin: 26px 0 0; padding-top: 18px; border-top: 2px dashed #DDD2F5; } /* ── Marquee ─────────────────────────────────────────────────────────────── */ /* The track holds two identical copies of the logo list and translates exactly -50%, so the seam lands on a duplicate and the loop is invisible. If you edit the list, edit both copies or the seam will jump. */ .pq-marquee { overflow: hidden; } .pq-marquee-track { display: flex; width: max-content; animation: pq-drift 34s linear infinite; } .pq-marquee:hover .pq-marquee-track { animation-play-state: paused; } @keyframes pq-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ── Floating decorations ────────────────────────────────────────────────── */ /* Absolutely positioned inside a `position: relative; overflow: hidden` band. Every one is aria-hidden at the call site — they carry no meaning. */ .pq-float { position: absolute; border: 2px solid #111014; pointer-events: none; z-index: 0; } @keyframes pq-float1 { 0%,100% { transform: translate(0,0) rotate(14deg); } 50% { transform: translate(0,-18px) rotate(24deg); } } @keyframes pq-float2 { 0%,100% { transform: translate(0,0) rotate(-8deg); } 50% { transform: translate(0,16px) rotate(-16deg); } } @keyframes pq-float3 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(0,-14px); } } @keyframes pq-float4 { 0%,100% { transform: translate(0,0) rotate(38deg); } 50% { transform: translate(-10px,12px) rotate(48deg); } } @keyframes pq-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } } @keyframes pq-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } @media (prefers-reduced-motion: no-preference) { .pq-f1 { animation: pq-float1 7s ease-in-out infinite; } .pq-f2 { animation: pq-float2 8.5s ease-in-out infinite; } .pq-f3 { animation: pq-float3 6.4s ease-in-out infinite; } .pq-f4 { animation: pq-float4 9s ease-in-out infinite; } .pq-blink { animation: pq-blink 1.05s steps(1) infinite; } .pq-pulse { animation: pq-pulse 2s ease-in-out infinite; } } /* ── Responsive ──────────────────────────────────────────────────────────── */ /* Target floor is 320px. The decorations are the first thing to go: they are the only elements positioned off the content grid, so they are also the only ones that can reach the copy once the column narrows. */ @media (max-width: 1080px) { .pq-grid4 { grid-template-columns: repeat(2, 1fr); } } /* Only STRUCTURAL changes below this line — column counts, what disappears, what goes full-width. Spacing is handled by the fluid ratios at the top of this file and must not be re-declared here; that split is what stops the breakpoint list growing again. */ @media (max-width: 900px) { .pq-grid2, .pq-grid3 { grid-template-columns: 1fr; } } @media (max-width: 640px) { .pq-grid4 { grid-template-columns: 1fr; } .pq-card { padding: 20px; border-radius: 14px; } .pq-float { display: none; } .pq-btn { height: 52px; padding: 0 22px; font-size: 16px; width: 100%; } .pq-btn-sm { width: auto; } .pq-ctas { gap: 12px; } .pq-accsummary { padding: 16px 16px; font-size: 15.5px; gap: 11px; } .pq-accbody { padding: 0 16px 18px; font-size: 15px; } } @media (prefers-reduced-motion: reduce) { .pq-btn, .pq-card-hover, .pq-accicon, .pq-link { transition: none; } .pq-btn:hover, .pq-card-hover:hover { transform: none; } .pq-marquee-track { animation: none; } } /* ── Motion tokens ───────────────────────────────────────────────────────── */ /* On :root, not .pq-root, so page-level styles outside the wrapper can read them too. Every duration and distance in the site should come from here. */ :root { /* Distances. The whole budget, smallest to largest. */ --pq-nudge: 10px; /* headline / subline converge — the smallest real move */ --pq-shift: 20px; /* lateral entrance */ --pq-rise: 28px; /* the default. ~90% of reveals use this. */ --pq-rise-lg: 44px; /* reserved for the one element per page that pops */ /* Durations. Deliberately short — a reveal you notice is a reveal too slow. */ --pq-t-fast: 0.18s; --pq-t-base: 0.34s; --pq-t-slow: 0.52s; /* Easing. One decelerating curve for everything, one spring used sparingly. */ --pq-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --pq-spring: cubic-bezier(0.34, 1.42, 0.64, 1); /* Stagger step, and the ceiling it may never cross. Without the cap, a 12-item grid would take 840ms to finish and the last card would feel broken rather than choreographed. */ --pq-stagger: 62ms; --pq-stagger-max: 380ms; } /* ── The reveal primitive ────────────────────────────────────────────────── */ /* Usage, from a server component — no 'use client' required:

…

default rise

…

enters from the left

…

the spring; once per page

Variants: up (default) · down · left · right · scale · pop · fade The hidden state is scoped to html[data-pq-motion="on"|"live"], which the layout's inline bootstrap sets before first paint. Never move these declarations out of that scope — unscoped, they hide content for anyone whose JS never arrives. */ html[data-pq-motion="on"] [data-reveal], html[data-pq-motion="live"] [data-reveal] { opacity: 0.001; transform: translate3d(0, var(--pq-rise), 0); transition: opacity var(--pq-t-base) var(--pq-ease), transform var(--pq-t-base) var(--pq-ease); transition-delay: min( calc(var(--pq-i, 0) * var(--pq-stagger)), var(--pq-stagger-max) ); will-change: opacity, transform; } /* Variants. Each only overrides the axis it changes. */ html[data-pq-motion="on"] [data-reveal="down"], html[data-pq-motion="live"] [data-reveal="down"] { transform: translate3d(0, calc(var(--pq-nudge) * -1), 0); } html[data-pq-motion="on"] [data-reveal="left"], html[data-pq-motion="live"] [data-reveal="left"] { transform: translate3d(calc(var(--pq-shift) * -1), 0, 0); } html[data-pq-motion="on"] [data-reveal="right"], html[data-pq-motion="live"] [data-reveal="right"] { transform: translate3d(var(--pq-shift), 0, 0); } html[data-pq-motion="on"] [data-reveal="fade"], html[data-pq-motion="live"] [data-reveal="fade"] { transform: none; } html[data-pq-motion="on"] [data-reveal="scale"], html[data-pq-motion="live"] [data-reveal="scale"] { transform: scale(0.96); } /* The spring. Travels furthest and is the only thing on the page that overshoots — spend it on the element you most want clicked, once per page. */ html[data-pq-motion="on"] [data-reveal="pop"], html[data-pq-motion="live"] [data-reveal="pop"] { transform: translate3d(0, var(--pq-rise-lg), 0) scale(0.985); transition: opacity var(--pq-t-base) var(--pq-ease), transform var(--pq-t-slow) var(--pq-spring); } /* Revealed. One selector wins for every variant, and "once" semantics mean the observer unobserves after this fires — nothing replays on scroll-back. On a 9,000px page, replay is what makes a site feel restless. */ html[data-pq-motion] [data-reveal].pq-in { opacity: 1; transform: none; will-change: auto; } /* ── Reduced motion ──────────────────────────────────────────────────────── */ /* Not "animate less" — do not animate. The content is simply present. This block must stay last so it outranks every rule above at equal specificity; the html[...] prefix keeps the weights matched. */ @media (prefers-reduced-motion: reduce) { html[data-pq-motion] [data-reveal], html[data-pq-motion] [data-reveal].pq-in { opacity: 1 !important; transform: none !important; transition: none !important; } }

Free Resources