/* ============================================================================ Pain Journal site: base stylesheet (shared by every page) Tokens, reset, typography, header, footer, buttons, phone frame, utilities. Palette mirrors the app theme (lib/core/theme/app_palette.dart) 1:1. Page-specific sections live in their own file (e.g. home.css). STYLE + RULES: docs/growth/WEBSITE-DESIGN-SYSTEM.md (read before editing). ========================================================================== */ :root { /* Brand identity, mirrored from the app theme (do not drift) */ --pine: #0B4F4A; --pine-deep: #08423D; --pine-darker: #053733; --pine-soft: #6FB8AD; --pine-light: #A9C9C3; --paper: #F4EFE6; --paper-raised: #FBF7EE; --paper-deep: #E7E2D4; --paper-edge: #EEE8DC; --ink: #1A1F1D; --ink-muted: #515A55; --rule: #C9C0AE; --rule-soft: #DBD3C3; --terracotta: #B6442F; --terracotta-deep: #8A1F0B; --terracotta-soft: #EFC8BA; --terracotta-light: #D66B55; --ochre: #8B6914; /* Type matches the app: Newsreader display + Inter body */ --font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif; --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --maxw: 1200px; --header-h: 66px; --pad-x: clamp(20px, 5vw, 48px); /* Reading-column widths: --measure = article/legal column, --wide = landing + the CTA band. Landing pages flip --measure to --wide in-scope (content.css). */ --measure: 44rem; --wide: 60rem; --r-sm: 10px; --r: 16px; --r-lg: 26px; --r-phone: 44px; --shadow-sm: 0 1px 2px rgba(26, 31, 29, 0.05), 0 3px 10px rgba(26, 31, 29, 0.05); --shadow-md: 0 10px 30px -12px rgba(26, 31, 29, 0.18), 0 2px 8px rgba(26, 31, 29, 0.05); --shadow-lg: 0 30px 70px -24px rgba(11, 79, 74, 0.30), 0 10px 28px -14px rgba(26, 31, 29, 0.20); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Dark brand surface, shared by the doctor-report wedge and the CTA band. */ --grad-wedge: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--pine-soft) 18%, transparent), transparent 55%), linear-gradient(165deg, var(--pine) 0%, var(--pine-deep) 55%, var(--pine-darker) 100%); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* Offset in-page anchor targets so the sticky header never covers them. */ scroll-padding-top: calc(var(--header-h) + 18px); -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: var(--ink); /* Static gradient (scrolls with content), never background-attachment:fixed, which forces a full repaint every scroll frame and causes jank. */ background-color: var(--paper); background-image: radial-gradient(120% 70% at 88% -6%, color-mix(in srgb, var(--pine-soft) 16%, transparent), transparent 52%), radial-gradient(80% 45% at 0% 0%, color-mix(in srgb, var(--terracotta) 5%, transparent), transparent 46%); background-repeat: no-repeat; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* clip, not hidden: prevents horizontal scroll WITHOUT making a scroll container, which would break the sticky header on Chrome/Firefox (Safari tolerates hidden, hence the browser-specific "transparent header" bug). */ overflow-x: clip; } a { color: inherit; } img { display: block; max-width: 100%; } /* Line-wrapping hygiene: balance headings so no single word is stranded on the last line (widows); keep body copy from leaving orphan/runt last lines. */ h1, h2, h3, h4, blockquote { text-wrap: balance; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; } p { text-wrap: pretty; } ::selection { background: var(--terracotta); color: var(--paper-raised); } :focus-visible { outline: 2.5px solid var(--terracotta); outline-offset: 3px; border-radius: 4px; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); } .skip-link { position: absolute; left: 16px; top: -60px; background: var(--pine); color: var(--paper-raised); padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600; z-index: 100; transition: top 0.2s var(--ease-out); } .skip-link:focus { top: 16px; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid transparent; transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); } .site-header.scrolled { border-bottom-color: var(--rule-soft); box-shadow: 0 6px 24px -18px rgba(26, 31, 29, 0.5); } .nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--header-h); } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; letter-spacing: -0.01em; color: var(--pine); } .brand img { width: 30px; height: 30px; border-radius: 8px; box-shadow: var(--shadow-sm); } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-links a { text-decoration: none; color: var(--ink-muted); font-size: 0.94rem; font-weight: 500; transition: color 0.15s ease; } .nav-links a:hover { color: var(--pine); } /* Primary pill button, shared by the nav CTA, the printable download link, and the clinician print button. Each site adds only its size/spacing deltas. */ .nav-cta, .download, .print-btn { display: inline-flex; align-items: center; background: var(--pine); color: var(--paper-raised); text-decoration: none; border-radius: 999px; font-weight: 600; transition: transform 0.18s var(--ease-out), background 0.18s ease; } .nav-cta:hover, .download:hover, .print-btn:hover { background: var(--pine-deep); } .nav-cta { gap: 7px; padding: 9px 16px; font-size: 0.9rem; } .nav-cta:hover { transform: translateY(-1px); } /* Right-hand cluster: nav links + CTA + (mobile) hamburger toggle. */ .nav-cluster { display: flex; align-items: center; gap: 28px; } .nav-toggle { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--rule-soft); border-radius: var(--r-sm); background: var(--paper-raised); color: var(--pine); cursor: pointer; transition: background 0.15s ease; } .nav-toggle:hover, .nav-toggle[aria-expanded="true"] { background: var(--paper-deep); } /* ---------- Buttons / store badges ---------- */ .store-badges { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .badge-link { display: inline-flex; align-items: center; text-decoration: none; border-radius: 12px; transition: transform 0.18s var(--ease-out); } .badge-link:hover { transform: translateY(-2px); } .badge-gplay img { height: 56px; width: auto; } .badge-appstore img { height: 40px; width: auto; } .microtrust { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; color: var(--ink-muted); font-size: 0.86rem; font-weight: 500; } .microtrust .mt-item { display: inline-flex; align-items: center; white-space: nowrap; } /* Separator is a leading dot on every item after the first, so it wraps WITH its label to the next line instead of dangling at the end of a line. */ .microtrust .mt-item + .mt-item::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--pine-soft); margin-right: 14px; flex-shrink: 0; } /* ---------- Resource card grid (shared: homepage resources + hub) ---------- */ .res-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .res-card { display: flex; align-items: flex-start; gap: 16px; text-decoration: none; background: var(--paper-raised); border: 1px solid var(--rule-soft); border-radius: var(--r); padding: 22px 24px; transition: border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); } .res-card:hover { border-color: var(--pine-soft); transform: translateY(-3px); box-shadow: var(--shadow-md); } .res-card .r-ico { flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--pine) 9%, var(--paper)); color: var(--pine); margin-top: 2px; } .res-card .r-title { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; letter-spacing: -0.01em; color: var(--pine); line-height: 1.25; text-wrap: balance; } .res-card .r-sub { display: block; color: var(--ink-muted); font-size: 0.92rem; margin-top: 5px; text-wrap: pretty; } /* Odd card count: the lone last card fills the row instead of leaving a gap. */ .res-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } @media (max-width: 680px) { .res-grid { grid-template-columns: 1fr; } } /* ---------- Dark app CTA band (ONE component: homepage final + every interior page's closing CTA. Same dark surface as the doctor-report wedge). ---------- */ .cta-band { max-width: var(--wide); margin-inline: auto; text-align: center; color: var(--paper); border-radius: var(--r-lg); padding: clamp(40px, 5vw, 66px) clamp(24px, 4vw, 56px); background: var(--grad-wedge); } .cta-band h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--paper); max-width: 20ch; margin-inline: auto; } .cta-band h2 em { font-style: normal; color: var(--terracotta-soft); } .cta-band p { color: var(--pine-light); font-size: 1.02rem; line-height: 1.6; max-width: 48ch; margin: 14px auto 0; } .cta-band .store-badges { justify-content: center; margin-top: 28px; } .cta-band .microtrust { justify-content: center; margin-top: 18px; color: var(--pine-light); } /* ---------- Trait item: icon + heading + text over a top rule. ONE look for the homepage values and the for-clinicians reasons. ---------- */ .value, .reason { padding-top: 20px; border-top: 1px solid var(--rule); } .value .v-ico, .reason .r-ico { color: var(--pine); margin-bottom: 12px; } .value h3, .reason h3 { font-size: 1.14rem; letter-spacing: -0.01em; color: var(--pine); } .value p, .reason p { color: var(--ink-muted); font-size: 0.95rem; line-height: 1.6; margin-top: 8px; } /* ---------- Phone frame (ONE component for every app screenshot) ---------- img is width:100% height:auto so the shot is NEVER cropped. Every screenshot must share the same pixel resolution so frames stay uniform. No fake notch: the captured screens already include the real status bar. */ .phone { position: relative; width: clamp(230px, 30vw, 300px); background: linear-gradient(155deg, #211d19, #14100e); border-radius: var(--r-phone); padding: 9px; box-shadow: var(--shadow-lg); } .phone::after { content: ""; position: absolute; inset: 3px; border-radius: calc(var(--r-phone) - 3px); border: 1px solid rgba(255, 255, 255, 0.06); pointer-events: none; } .phone img { width: 100%; height: auto; border-radius: calc(var(--r-phone) - 9px); background: var(--paper); } .phone.tilt { transform: rotate(-2deg); } .phone.tilt-r { transform: rotate(2deg); } /* ---------- Section scaffolding ---------- */ section { position: relative; } .section-pad { padding-block: clamp(60px, 9vw, 116px); } .kicker { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--terracotta); } .section-title { font-size: clamp(1.95rem, 3.9vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--pine); margin-top: 14px; max-width: 22ch; } .section-title em { font-style: normal; color: var(--terracotta); } /* ---------- Reveal on scroll (subtle + smooth; transform+opacity only) ---------- */ [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); } [data-reveal].in { opacity: 1; transform: none; } [data-reveal][data-delay="1"] { transition-delay: 0.06s; } [data-reveal][data-delay="2"] { transition-delay: 0.12s; } [data-reveal][data-delay="3"] { transition-delay: 0.18s; } /* ---------- Footer ---------- */ .site-footer { background: var(--pine-deep); color: var(--pine-light); margin-top: clamp(60px, 9vw, 116px); padding-block: clamp(44px, 6vw, 68px); } .footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; } .footer-brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; color: var(--paper); text-decoration: none; } .footer-brand img { width: 34px; height: 34px; border-radius: 9px; } .footer-brand + p { margin-top: 12px; max-width: 34ch; font-size: 0.94rem; color: var(--pine-light); } .footer-nav { display: grid; grid-template-columns: repeat(2, auto); gap: 12px 56px; } .footer-nav a { color: var(--pine-light); text-decoration: none; font-size: 0.94rem; transition: color 0.15s ease; } .footer-nav a:hover { color: var(--paper); } .footer-bottom { margin-top: clamp(32px, 4vw, 48px); padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--pine-light) 18%, transparent); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.84rem; /* full pine-light (6.37:1 on pine-deep); the 75% tint failed WCAG AA. */ color: var(--pine-light); } .footer-bottom .disclaimer { max-width: 62ch; } /* ---------- Shared responsive ---------- */ @media (max-width: 680px) { body { font-size: 17px; } .nav-cluster { gap: 12px; } .nav-toggle { display: inline-flex; } /* Nav links collapse into a tap-to-open panel under the header. */ .nav-links { position: absolute; top: calc(100% + 8px); left: var(--pad-x); right: var(--pad-x); flex-direction: column; align-items: stretch; gap: 2px; background: var(--paper-raised); border: 1px solid var(--rule-soft); border-radius: var(--r); box-shadow: var(--shadow-md); padding: 10px; display: none; } .nav-links.open { display: flex; } .nav-links a { padding: 12px 14px; border-radius: var(--r-sm); font-size: 1rem; } .nav-links a:hover { background: color-mix(in srgb, var(--pine) 8%, transparent); } /* Keep the trust row on one line so a separator dot never starts a wrapped line. */ .microtrust { font-size: 0.74rem; gap: 5px 8px; } .microtrust .mt-item + .mt-item::before { margin-right: 8px; } .footer-top { flex-direction: column; gap: 28px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } [data-reveal] { opacity: 1; transform: none; } .phone.tilt, .phone.tilt-r { transform: none; } }