/* ========================================================================== Heal EMDR — healemdr.com One stylesheet for every page. Every value below is the app's own token (lib/theme/app_colors.dart, app_typography.dart, app_spacing.dart) or a component recipe lifted from lib/design_system — the comments say which. The only web-only additions are the display sizes of the hero H1 and the section H2 (the app has no page-hero role), agreed 2026-09-23. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* AppColors */ --bg: #fef7e9; /* background — the page cream */ --surface: #ffffff; /* surface — cards, inputs, sheets */ --text: #000000; /* textPrimary */ --text-2: #66635d; /* textSecondary */ --text-3: rgba(0, 0, 0, 0.4); /* textTertiary */ --text-muted: #989898; /* textMuted */ --text-disabled: #b8b4ae; /* textDisabled */ --primary: #000000; /* primary */ --on-primary: #ffffff; /* primaryForeground */ --border: #000000; /* border — focused field */ --border-light: rgba(0, 0, 0, 0.1); /* borderLight — unfocused field */ --disabled-fill: #e5ded2; /* buttonDisabledFill */ --icon-bg: #fef7e9; /* iconBgCream — the emoji badge chip */ --card-beige: #f3ebd9; /* cardBeige */ --green-fill: #def1d2; /* backgroundGreen — tag pill */ --success: #567f3b; --error: #e05c3a; --black-60: rgba(0, 0, 0, 0.6); --scrim: rgba(121, 121, 121, 0.8); /* scrimGrey — modal barrier */ /* GlassContainer.onColor (the testimonial card) */ --glass-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.4)); --glass-rim: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5)); --glass-shadow: 0 8px 60px rgba(255, 255, 255, 0.1); /* GlassContainer.onCream (the story dialog) */ --cream-shadow: 0 8px 23px rgba(0, 0, 0, 0.04); /* AppTypography */ --font: "Satoshi", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* AppSpacing — 8 dp grid plus the standard 12 */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --gutter: 24px; /* screenPadding */ --content-max: 1200px; /* web: the brief's max content width */ --header-h: 80px; /* headerHeight (phone + tablet: a little more air; 72 on desktop) */ /* Radii */ --r-button: 12px; /* HealButton resolved radius */ --r-pill: 11px; /* 36 dp pills (story pill, watch button) */ --r-card: 12px; /* cardRadius */ --r-glass: 16px; /* GlassContainer */ --r-modal: 24px; /* modalRadius / HealDialogCard */ --r-badge: 9px; /* EmojiBadge */ /* Motion — the brief's curves */ --ease-rise: cubic-bezier(0.22, 1, 0.36, 1); --ease-fade: cubic-bezier(0.44, 0, 0.56, 1); --press-in: 100ms; /* CardPressEffect kPressInMs */ --press-out: 150ms; /* CardPressEffect kReleaseMs */ --press-scale: 0.97; /* CardPressEffect kPressScale */ } /* -------------------------------------------------------------------------- 2. Fonts — the app's Satoshi (pubspec.yaml), self-hosted as WOFF2. font-display: swap so text never waits on the download; the two weights used above the fold are preloaded from each page's . -------------------------------------------------------------------------- */ @font-face { font-family: "Satoshi"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/Satoshi-Regular.woff2") format("woff2"); } @font-face { font-family: "Satoshi"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/Satoshi-Medium.woff2") format("woff2"); } @font-face { font-family: "Satoshi"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/Satoshi-Bold.woff2") format("woff2"); } /* -------------------------------------------------------------------------- 3. Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; /* The hero blob bleeds past its section on purpose; clip stray horizontal overflow at the page level (clip, not hidden: it does not create a scroll container, so the sticky header keeps working, and it leaves the vertical axis alone so the bleed above and below the hero stays visible). On body the value propagates to the viewport, so main clips too, at its own box. */ overflow-x: clip; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased; } h1, h2, h3, p { margin: 0; } a { color: inherit; } img, svg { display: block; max-width: 100%; height: auto; } button { font: inherit; color: inherit; } /* No grey flash on tap (iOS/Android), and a focus ring only for keyboard focus: pointer/touch focus and the focus a dialog hands back after closing must not draw the double ring iOS shows. */ a, button, summary, [tabindex] { -webkit-tap-highlight-color: transparent; } :focus { outline: none; } :focus:not(:focus-visible) { outline: none; box-shadow: none; } :focus-visible { outline: 2px solid var(--border); outline-offset: 3px; } strong { font-weight: 700; } main { overflow-x: clip; } .container { width: 100%; max-width: calc(var(--content-max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Copy that differs between the phone and the wider layouts. */ .only-wide { display: none; } .only-phone { display: inline; } /* -------------------------------------------------------------------------- 4. Type roles — named after the app's tokens -------------------------------------------------------------------------- */ .screen-title { font-size: 24px; font-weight: 500; line-height: 1.2; } .section__title { /* web-only display size; Satoshi Medium like screenTitle */ font-size: 28px; font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; } .section__body { /* screenBody: Regular, secondary colour, 1.4 */ font-size: 18px; font-weight: 400; line-height: 1.4; color: var(--text-2); } .section__body strong { color: var(--text); } .eyebrow { font-size: 12px; font-weight: 500; text-transform: uppercase; color: var(--text-3); } /* -------------------------------------------------------------------------- 5. Buttons — HealButton primaryFilled: black fill, white 14/500 label on a 1.0 line box, min-height 44, radius 12, no border, no shadow. Hug buttons get the 12 px side padding; pills are the 36 dp variant. -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-button); background: var(--primary); color: var(--on-primary); font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--press-out) ease-out, background-color 150ms ease-out, opacity 150ms; } .btn:hover { background: #1c1c1f; } .btn:active { transform: scale(var(--press-scale)); transition-duration: var(--press-in); outline: none; box-shadow: none; } .btn:disabled { background: var(--disabled-fill); color: var(--text-3); cursor: default; transform: none; } .btn--hug { padding: 0 12px; } .btn--pill { min-height: 36px; padding: 0 12px; border-radius: var(--r-pill); } .btn--text { background: transparent; color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .btn--text:hover { background: transparent; color: var(--text-2); } .btn--block { width: 100%; } .link-arrow { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } /* -------------------------------------------------------------------------- 6. Header — logo left, Download App right, the app's header height. Sticky, page cream, with a FadeScrim-style soft edge instead of a rule so content scrolls under it the way the app's header works. -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; /* Transparent at the top of the page so the hero blob shows through; main.js adds .is-scrolled once the page moves and the cream comes back. */ background: transparent; transition: background-color 200ms ease-out; } .site-header.is-scrolled { background: var(--bg); } .site-header::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 20px; background: linear-gradient(var(--bg), rgba(254, 247, 233, 0)); pointer-events: none; opacity: 0; transition: opacity 200ms ease-out; } .site-header.is-scrolled::after { opacity: 1; } .site-header__inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); } .logo { display: inline-flex; align-items: center; text-decoration: none; } .logo svg { width: 74px; height: 27px; } /* -------------------------------------------------------------------------- 7. Footer -------------------------------------------------------------------------- */ .site-footer { padding: 40px 0 48px; } .site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6); font-size: 14px; font-weight: 500; } .site-footer__copy { color: var(--text-2); } .site-footer__nav { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); } .site-footer__nav a { text-decoration: none; } .site-footer__nav a:hover { text-decoration: underline; text-underline-offset: 3px; } /* -------------------------------------------------------------------------- 8. Blob — AnimatedBlobBackground. Two pre-blurred bitmaps (σ50, baked with a 4σ transparent margin, tools/blob/bake_blobs.js), opacity .57, each spinning about its own centre once every 10 s in opposite directions; blue dx −40, green dx +40, both dy −10 from the box centre. -------------------------------------------------------------------------- */ .blob { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .blob__shape { position: absolute; left: 50%; top: 50%; max-width: none; /* the global img rule would squeeze it to the viewport width */ opacity: 0.57; will-change: transform; animation: blob-spin 10s linear infinite; } .blob__shape--blue { width: 735px; height: 947px; /* centre (−367.5, −473.5) then dx −40, dy −10 */ margin: -483px 0 0 -408px; } .blob__shape--green { width: 703px; height: 947px; /* centre (−351.5, −473.5) then dx +40, dy −10 */ margin: -483px 0 0 -312px; animation-direction: reverse; } @keyframes blob-spin { from { transform: scale(var(--blob-scale, 1)) rotate(0deg); } to { transform: scale(var(--blob-scale, 1)) rotate(360deg); } } /* The hero's blob is allowed out of its box; the testimonial one stays clipped. */ .hero .blob { overflow: visible; } /* -------------------------------------------------------------------------- 9. Hero -------------------------------------------------------------------------- */ .hero { position: relative; /* No overflow clipping: the blob bleeds above and below the section (the page-level overflow-x: clip on body keeps it from widening the page). */ padding: 40px 0 56px; text-align: center; --blob-scale: 0.8; /* Phone and tablet: fill the first screen minus the header and the logo strip (~150px), and centre the hero content in that space so the headline sits mid-viewport with the logos still visible below. */ min-height: calc(100svh - var(--header-h) - 150px); display: flex; align-items: center; justify-content: center; } .hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--s-6); } .hero__title { font-size: 40px; font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; max-width: 14ch; } .hero__sub { font-size: 18px; font-weight: 400; line-height: 1.4; color: var(--text-2); } .hero__sub strong { color: var(--text); } /* The "Free trial · Cancel anytime" pill, above the H1 at every width. A white surface pill with the app's light border and 14/500 label. */ .pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 60px; background: var(--surface); border: 1px solid var(--border-light); font-size: 14px; font-weight: 500; color: var(--text-2); } .pill strong { font-weight: 500; color: var(--text); } .pill__sep { color: var(--text-3); } /* Store badges — each official artwork centred in a black container cut like the header's Download App button (44 px tall, the button's 12 px radius, 12 px side padding), so the pair reads as two primary buttons. The artwork is 36 px tall, a 4 px inset top and bottom. Same at every width; the two badges share an aspect, so the containers come out equal. */ .store-badges { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-3); } .store-badge { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 var(--s-3); border-radius: var(--r-button); background: var(--primary); transition: transform var(--press-out) ease-out, background-color 150ms ease-out; } .store-badge:hover { background: #1c1c1f; } .store-badge:active { transform: scale(var(--press-scale)); transition-duration: var(--press-in); } .store-badge img { height: 36px; width: auto; } /* -------------------------------------------------------------------------- 10. Logo strip — an infinite ticker inside the content column, faded 120 px at both edges like the previous site's. Measured there 2026-09-23: leftwards at 20 px/s, marks at 50 % opacity, no pause on hover; its 50 px gap read too tight, so ours is 96 px. Each copy of the set is one