/* ============================================================ stw.css — "Show The Work" shared component + motion system Build round (BD-1). Consumed verbatim by index.html (b-004) and package.html (b-005). Pair file: js/stw.js. PRINCIPLES - Reuses the site tokens from colors_and_type.css (terra ramp, --ink*, --canvas*, --fg/bg, --border, --font-*, --radius-*, --shadow-warm-*, --space-*, --ease-*, --dur-*). No 4th font. - MOTION LAW (BD-1/BD-3): every animation is OFF by default and only runs inside @media (prefers-reduced-motion: no-preference) AND when js/stw.js has added `.stw-js` to . So with JS disabled OR reduced-motion, ALL content is fully visible and static (this fixes the old reveal-bug: blank below the hero). - Interactive controls (before/after, stepper) stay keyboard- operable with a visible focus ring even under reduced-motion; only their *transitions* are suppressed, never their function. ============================================================ */ /* Components inherit the site's focus ring from colors_and_type.css (:focus-visible { outline:2px solid var(--accent); offset:3px }). We re-assert it on our custom controls so it is never lost. */ .stw-baf__range:focus-visible, .stw-steps__step:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ============================================================ 1. MOCK FRAMES — browser + phone (VR-2 MOCKUP) Browser:
yourstore.com.my
Phone:
============================================================ */ .stw-mock { margin: 0; background: var(--canvas); border: 1px solid var(--border); box-shadow: var(--shadow-warm-md); overflow: hidden; position: relative; } .stw-mock--browser { border-radius: var(--radius-lg); } .stw-mock__bar { display: flex; align-items: center; gap: 7px; padding: 9px 12px; background: var(--canvas-soft); border-bottom: 1px solid var(--border); } .stw-mock__bar > i { width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--ink-faint); flex: none; } .stw-mock__url { margin-left: 8px; padding: 4px 12px; flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.01em; color: var(--ink-muted); background: rgba(255, 255, 255, 0.65); border-radius: var(--radius-pill); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The captured storefront frame */ .stw-mock__screen { display: block; width: 100%; height: auto; } /* Phone bezel */ .stw-mock--phone { width: 100%; max-width: 268px; margin-inline: auto; padding: 12px; border-radius: 34px; background: var(--canvas-deep); border-color: rgba(26, 20, 18, 0.18); box-shadow: var(--shadow-warm-lg); } .stw-mock--phone::before { /* notch / speaker */ content: ""; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 78px; height: 6px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.22); z-index: 2; } .stw-mock--phone .stw-mock__screen { border-radius: 22px; aspect-ratio: 9 / 19; object-fit: cover; object-position: top center; } /* Store-thumbnail modifier (pricing tiers): a browser frame that fills the card top at a fixed 16:10 so the 3 tiers line up. */ .stw-mock--thumb { width: 100%; } .stw-mock--thumb .stw-mock__screen { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; } /* Pricing tiles are standalone GRAPHICS (not website screenshots), so strip the browser chrome and show a clean rounded image. */ .stw-mock--thumb { border: 0; background: transparent; box-shadow: none; } .stw-mock--thumb .stw-mock__bar { display: none; } /* ============================================================ 2. ADD-ON GLYPHS (BD-1) — sizing only; sprite drawn by b-002 Sprite symbols are LINE style: fill="none", stroke="currentColor". ============================================================ */ .stw-glyph { width: 1.75rem; height: 1.75rem; display: inline-block; flex: none; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .stw-glyph--lg { width: 2.5rem; height: 2.5rem; } .stw-glyph--sm { width: 1.25rem; height: 1.25rem; } /* Optional add-on card helper (package). Description is ALWAYS visible — never display:none at any breakpoint (fixes the mobile-hidden-description bug). b-005 may use or restyle. */ .stw-addon { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5); background: var(--canvas); border: 1px solid var(--border); border-radius: var(--radius-lg); } .stw-addon__icon { width: 3rem; height: 3rem; display: grid; place-items: center; flex: none; background: var(--terra-50); border-radius: var(--radius-md); } .stw-addon__body { min-width: 0; flex: 1 1 auto; } .stw-addon__title { font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; margin: 0 0 2px; } .stw-addon__desc { display: block; /* visible on ALL breakpoints */ color: var(--fg2); font-size: 0.875rem; line-height: 1.5; } .stw-addon__price { margin-left: auto; flex: none; font-family: var(--font-display); font-weight: 500; white-space: nowrap; } /* Photo-banner variant — a real image on top instead of a glyph icon. */ .stw-addon--photo { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; } .stw-addon__photo { display: block; margin: 0; background: var(--terra-50); } .stw-addon__photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } .stw-addon--photo .stw-addon__body { display: flex; flex-direction: column; gap: 4px; padding: var(--space-4) var(--space-5) var(--space-5); } .stw-addon--photo .stw-addon__price { margin: 6px 0 0; color: var(--accent); } /* ============================================================ 3. SAVINGS LADDER (BD-1) — prepaid discount, visible at a glance
…
… 4 cols, real numbers as text inside …
Bar height ∝ rate. Works WITHOUT JS when --rate is set inline; js/stw.js mirrors data-rate→--rate and sets --max defensively. ============================================================ */ .stw-ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); align-items: end; --stw-ladder-h: 168px; --max: 129; } .stw-ladder__col { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); text-align: center; min-width: 0; } .stw-ladder__bar { width: 100%; height: calc((var(--rate, var(--max)) / var(--max)) * var(--stw-ladder-h)); min-height: 40px; border-radius: var(--radius-md) var(--radius-md) 0 0; background: linear-gradient(180deg, var(--terra-400), var(--terra-500)); box-shadow: var(--shadow-warm-sm); } .stw-ladder__col--lead .stw-ladder__bar { background: linear-gradient(180deg, var(--terra-500), var(--terra-600)); } .stw-ladder__rate { font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; line-height: 1.1; } .stw-ladder__note { font-size: 0.75rem; color: var(--fg3); } .stw-ladder__save { font-size: 0.75rem; font-weight: 600; color: var(--moss-600); } .stw-ladder__save--none { color: var(--fg4); } /* ============================================================ 4. WHAT-HAPPENS-NEXT (BD-1) — 3-step reassurance timeline
  1. … … …
    2. ×3
============================================================ */ .stw-next { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); counter-reset: stwnext; } .stw-next > li { position: relative; padding-top: calc(var(--space-12) + 6px); text-align: center; } /* numbered node */ .stw-next > li::before { counter-increment: stwnext; content: counter(stwnext); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 44px; height: 44px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--terra-50); color: var(--accent); border: 1px solid var(--terra-100); font-family: var(--font-display); font-weight: 600; z-index: 1; } /* connector line behind the nodes */ .stw-next > li:not(:last-child)::after { content: ""; position: absolute; top: 22px; left: 50%; width: 100%; height: 1px; background: var(--border); z-index: 0; } .stw-next__label { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; margin-bottom: 2px; } .stw-next__time { font-size: 0.8125rem; color: var(--fg3); } /* mobile: stack vertically with a left rail + vertical connector */ @media (max-width: 560px) { .stw-next { grid-template-columns: 1fr; gap: var(--space-6); } .stw-next > li { display: grid; grid-template-columns: 44px 1fr; column-gap: var(--space-4); align-items: center; padding-top: 0; text-align: left; } .stw-next > li::before { position: static; transform: none; grid-column: 1; grid-row: 1 / span 2; align-self: center; } .stw-next__label { grid-column: 2; } .stw-next__time { grid-column: 2; } .stw-next > li:not(:last-child)::after { top: 44px; left: 22px; width: 1px; height: calc(100% + var(--space-6)); } } /* ============================================================ 5. FORM STEPPER (BD-1) — progress through a long form js/stw.js highlights the step whose section is in view. Without JS: plain anchor links, all visible. ============================================================ */ .stw-steps { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2); background: var(--canvas); border: 1px solid var(--border); border-radius: var(--radius-pill); } .stw-steps__step { flex: 1 1 auto; text-align: center; padding: 8px 14px; border-radius: var(--radius-pill); font-size: 0.8125rem; font-weight: 500; color: var(--fg3); text-decoration: none; white-space: nowrap; } .stw-steps__step.is-done { color: var(--fg2); } .stw-steps__step.is-current { background: var(--accent); color: var(--canvas); } /* ============================================================ 6. REVEAL-ON-SCROLL (BD-1) — DEFAULT-VISIBLE Add class="stw-reveal" (+ optional style="--i:N" for stagger). Base = fully visible. Hidden→revealed ONLY when JS present and the user has NOT asked for reduced motion. js/stw.js adds .is-in. ============================================================ */ .stw-reveal { /* visible by default — intentionally no opacity here */ } /* ============================================================ 7. PINNED PROCESS (BD-1) — sticky media column + step list
…
… ×4 (one artifact per step) …
  1. 01

    …

    …

    2. … ×4 …
DEFAULT (no JS / mobile / reduced-motion): media is a film-strip (all artifacts visible) + the numbered step list — everything legible. ENHANCED (desktop + JS + no-preference): 2-col grid, media sticky, panels cross-fade to match the active step. ============================================================ */ .stw-process { position: relative; } .stw-process__media { display: grid; grid-template-columns: repeat(2, 1fr); /* film-strip fallback */ gap: var(--space-4); margin-bottom: var(--space-8); } .stw-process__panel { margin: 0; } .stw-process__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); } .stw-process__step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; } .stw-process__n { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; color: var(--accent); line-height: 1; } .stw-process__step h3 { margin: 0 0 4px; } .stw-process__step p { margin: 0; color: var(--fg2); } @media (max-width: 720px) { /* NO-JS fallback: if js/stw.js never pairs the steps (disabled/failed), the media still stacks cleanly so all content stays visible. */ .stw-process__media { grid-template-columns: 1fr; grid-auto-flow: row; gap: var(--space-4); overflow: visible; margin-bottom: var(--space-6); } .stw-process__panel { margin: 0; } .stw-process__media .stw-mock__screen { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; } .stw-process__media .stw-mock--phone .stw-mock__screen { aspect-ratio: 16 / 11; } .stw-process__steps { gap: var(--space-5); } /* PAIRED (js/stw.js moved each artifact into its step): 4 labelled cards — artifact on top with a number badge, then the heading + line. This reads as brief -> tune -> reveal -> launch instead of all mocks then all captions. */ .stw-process--mob .stw-process__media { display: none; } .stw-process--mob .stw-process__steps { gap: var(--space-8); } .stw-process--mob .stw-process__step { display: block; position: relative; opacity: 1; } .stw-process--mob .stw-process__panel { display: block; margin: 0 0 14px; } .stw-process--mob .stw-process__panel .stw-mock { border-radius: 16px; } .stw-process--mob .stw-process__panel .stw-mock__screen { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; } .stw-process--mob .stw-process__panel .stw-mock--phone { max-width: none; } .stw-process--mob .stw-process__panel .stw-mock--phone .stw-mock__screen { aspect-ratio: 16 / 10; } /* number badge overlaid on each artifact so the step is unmistakably labelled */ .stw-process--mob .stw-process__n { position: absolute; top: 12px; left: 12px; z-index: 3; display: inline-block; width: auto; height: auto; background: var(--accent); color: var(--canvas); font-family: var(--font-display); font-weight: 500; font-size: 0.95rem; line-height: 1; padding: 8px 13px; border-radius: 999px; box-shadow: 0 4px 14px rgba(28, 20, 16, 0.22); } } /* ============================================================ 8. BEFORE / AFTER SLIDER (BD-1) — interactive, keyboard-operable
Functions with or without motion. Without JS it shows a fixed 50/50 split (both images visible); JS makes the range live. ============================================================ */ .stw-baf { --pos: 50; position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-warm-md); background: var(--canvas-soft); isolation: isolate; line-height: 0; } .stw-baf__before, .stw-baf__after { display: block; width: 100%; height: auto; } .stw-baf__after { position: absolute; inset: 0; height: 100%; object-fit: cover; /* reveal from the left up to --pos% */ clip-path: inset(0 0 0 calc(var(--pos) * 1%)); } /* divider handle */ .stw-baf::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--pos) * 1%); width: 2px; margin-left: -1px; background: var(--canvas); box-shadow: 0 0 0 1px var(--border); z-index: 3; pointer-events: none; } .stw-baf__grip { position: absolute; top: 50%; left: calc(var(--pos) * 1%); transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--canvas); border: 1px solid var(--border); box-shadow: var(--shadow-warm-md); display: grid; place-items: center; color: var(--ink-soft); z-index: 4; pointer-events: none; } .stw-baf__grip::before { content: "⟷"; font-size: 18px; line-height: 1; } /* the range overlays the whole image; thumb is the draggable hit area */ .stw-baf__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: ew-resize; z-index: 5; } .stw-baf__range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; background: transparent; cursor: ew-resize; } .stw-baf__range::-moz-range-thumb { width: 44px; height: 240px; border: 0; background: transparent; cursor: ew-resize; } .stw-baf__range:focus-visible ~ .stw-baf__grip { outline: 2px solid var(--accent); outline-offset: 3px; } /* before/after corner labels (optional) */ .stw-baf__tag { position: absolute; bottom: var(--space-3); padding: 4px 10px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-radius: var(--radius-pill); background: rgba(20, 16, 16, 0.62); color: #fff; z-index: 4; } .stw-baf__tag--before { left: var(--space-3); } .stw-baf__tag--after { right: var(--space-3); } /* ============================================================ 9. MOTION LAYER — enabled ONLY for users who allow motion AND only once js/stw.js has tagged . Everything above renders fully without this block. ============================================================ */ @media (prefers-reduced-motion: no-preference) { /* 9a. Reveal-on-scroll: hide, then fade+rise into .is-in */ html.stw-js .stw-reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-slow) var(--ease-soft), transform var(--dur-slow) var(--ease-soft); transition-delay: calc(var(--i, 0) * 80ms); will-change: opacity, transform; } html.stw-js .stw-reveal.is-in { opacity: 1; transform: none; } /* 9b. Savings-ladder grow on reveal */ html.stw-js .stw-ladder__bar { transform-origin: bottom; transform: scaleY(0.001); transition: transform var(--dur-slow) var(--ease-soft); } html.stw-js .stw-ladder.is-in .stw-ladder__bar { transform: scaleY(1); } /* 9c. Pinned process: sticky media + cross-fading panels. Desktop only (mobile keeps the film-strip fallback). */ @media (min-width: 880px) { html.stw-js .stw-process[data-pinned] { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-12); align-items: start; } html.stw-js .stw-process[data-pinned] .stw-process__media { position: sticky; top: clamp(72px, 12vh, 120px); display: block; aspect-ratio: 4 / 3; margin-bottom: 0; } html.stw-js .stw-process[data-pinned] .stw-process__panel { position: absolute; inset: 0; opacity: 0; transform: scale(0.985); transition: opacity var(--dur-med) var(--ease-soft), transform var(--dur-med) var(--ease-soft); } html.stw-js .stw-process[data-pinned] .stw-process__panel.is-active { opacity: 1; transform: none; } html.stw-js .stw-process[data-pinned] .stw-process__panel .stw-mock, html.stw-js .stw-process[data-pinned] .stw-process__panel .stw-mock__screen { height: 100%; } html.stw-js .stw-process[data-pinned] .stw-process__panel .stw-mock__screen { object-fit: cover; } /* give each step scroll distance for the pin — but not so much it feels empty */ html.stw-js .stw-process[data-pinned] .stw-process__steps { gap: 38vh; padding: 6vh 0 10vh; } html.stw-js .stw-process[data-pinned] .stw-process__step { opacity: 0.4; transition: opacity var(--dur-med) var(--ease-soft); } html.stw-js .stw-process[data-pinned] .stw-process__step.is-active { opacity: 1; } } /* 9d. Stepper + before/after transitions (subtle) */ html.stw-js .stw-steps__step { transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } html.stw-js .stw-baf__after, html.stw-js .stw-baf::after, html.stw-js .stw-baf__grip { transition: none; } /* track the pointer 1:1 */ } /* ============================================================ 10. MOBILE: sticky CTA bar + nav menu (phone-only, <=720px) Both are injected by stw.js and styled here. Desktop: hidden. ============================================================ */ .stw-mcta { display: none; } .stw-burger { display: none; } @media (max-width: 720px) { /* sticky bottom "Start a brief" — primary action always in thumb reach */ .stw-mcta { position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 60; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 22px; background: var(--ink); color: var(--canvas); font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: 0.01em; border-radius: 9999px; box-shadow: 0 10px 28px rgba(28, 20, 16, 0.30); text-decoration: none; transform: translateY(150%); opacity: 0; transition: transform 0.38s var(--ease-soft), opacity 0.38s ease; } .stw-mcta.is-on { transform: none; opacity: 1; } .stw-mcta svg { width: 18px; height: 18px; } body { padding-bottom: 80px; } /* clear the sticky bar */ /* hamburger that reveals the existing nav links inline (no overlay) */ .stw-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 42px; height: 42px; padding: 11px; background: transparent; border: 1px solid var(--border); border-radius: 11px; cursor: pointer; flex: none; } .stw-burger span { display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px; transition: transform 0.22s ease, opacity 0.22s ease; } .stw-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .stw-burger.is-open span:nth-child(2) { opacity: 0; } .stw-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* the nav links (hidden by the site CSS) drop into a solid panel below the sticky nav when open — overlays the hero cleanly, no layout collision */ .top.is-menu-open .nav-links { display: flex !important; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--canvas); border-top: 1px solid var(--border); box-shadow: 0 16px 30px rgba(28, 20, 16, 0.16); padding: 2px 24px 14px; z-index: 80; gap: 0; } .top.is-menu-open .nav-links a { padding: 14px 2px; font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--border); } .top.is-menu-open .nav-links a:last-child { border-bottom: 0; } }