/* JPott Studios — shared app-site styles. Per-app colour comes from the --accent* / --wash* custom properties set on . Type: Fraunces for display, Inter for text. Both are loaded per page from Google Fonts. Responsive breakpoints (standard across every site — do not invent new values): 44rem ~= 704px tablet: 2-column grids, hero row splits, side-by-side cards 52rem ~= 832px laptop: 3-column grids (steps, dense grids) 56rem ~= 896px desktop: taller sections, wider heroes, full trim Custom properties can't drive @media queries, so use these numbers directly in @media (min-width: NNrem) and keep the intent consistent. */ /* ---------- tokens ---------- */ :root { color-scheme: light dark; --ink: #1d2823; --ink-soft: #46544d; --muted: #6b7a72; --paper: #faf8f4; --surface: #ffffff; --surface-2: #f4f1ea; --line: rgba(29, 40, 35, .10); --accent: #2d6c50; --accent-deep: #1d4c37; --accent-soft: #e8f2ec; --wash-a: #f3f8f4; --wash-b: #e7f0e9; --max: 72rem; --radius: 1.5rem; --radius-sm: .85rem; --shadow-sm: 0 1px 2px rgba(20, 30, 25, .04), 0 4px 14px rgba(20, 30, 25, .05); --shadow-md: 0 2px 6px rgba(20, 30, 25, .05), 0 14px 40px rgba(20, 30, 25, .09); --shadow-lg: 0 4px 12px rgba(20, 30, 25, .06), 0 30px 80px rgba(20, 30, 25, .14); --font-display: "Fraunces", "Iowan Old Style", Georgia, serif; --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } body[data-app="streaks-garden"] { --accent: #2f6b4f; --accent-deep: #1e4b36; --accent-soft: #e6f1ea; --wash-a: #f4f9f5; --wash-b: #dfeee4; } body[data-app="softly-noted"] { --accent: #574e91; --accent-deep: #3b3468; --accent-soft: #eceaf7; --wash-a: #f6f4fc; --wash-b: #e6e2f5; } body[data-app="moonease"] { --accent: #32507f; --accent-deep: #1f3559; --accent-soft: #e5ecf7; --wash-a: #f2f6fc; --wash-b: #dfe8f6; } body[data-app="gentle-range"] { --accent: #1d6b70; --accent-deep: #114a4e; --accent-soft: #e1f1f2; --wash-a: #f1f9f9; --wash-b: #d9eff0; } body[data-app="our-little-thing"] { --accent: #9f4459; --accent-deep: #6f2c3c; --accent-soft: #f8e8ed; --wash-a: #fdf4f6; --wash-b: #f7e2e8; } body[data-app="kind-to-me"] { --accent: #a0562a; --accent-deep: #6f381a; --accent-soft: #f9ebe0; --wash-a: #fdf6ef; --wash-b: #f8e6d5; } body[data-app="neatly-packed"] { --accent: #2c6c80; --accent-deep: #1a4757; --accent-soft: #e5f2f5; --wash-a: #f2f9fa; --wash-b: #dceff3; } body[data-app="linelet"] { --accent: #0d7871; --accent-deep: #05514c; --accent-soft: #e2f4f1; --wash-a: #f0faf8; --wash-b: #d7f0eb; } body[data-app="tidy-roll"] { --accent: #2a4a65; --accent-deep: #1b2738; --accent-soft: #e8edf1; --wash-a: #f5f6f8; --wash-b: #e6edf0; } /* ---------- base ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-text); font-size: 1.0625rem; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* A long link, email, or unbroken word must wrap instead of forcing the whole page to scroll sideways on a narrow phone. */ overflow-wrap: break-word; } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: .07em; } a:hover { text-decoration-thickness: .14em; } a:focus-visible, summary:focus-visible, button:focus-visible, input:focus-visible { border-radius: .35rem; outline: .18rem solid var(--accent); outline-offset: .22rem; } .skip-link { position: absolute; left: 1rem; top: -6rem; z-index: 60; padding: .7rem 1rem; background: var(--ink); color: #fff; border-radius: .5rem; text-decoration: none; } .skip-link:focus { top: 1rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------- type ---------- */ h1, h2, h3, .price { font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em; font-variation-settings: "SOFT" 40, "WONK" 1; } h1 { font-size: clamp(2.6rem, 6.2vw, 4.4rem); line-height: 1.02; letter-spacing: -.03em; margin: .5rem 0 1rem; font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 100; } h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1.12; letter-spacing: -.022em; margin: 0 0 .5rem; font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 60; } h3 { font-size: 1.2rem; line-height: 1.3; margin: 0 0 .4rem; } p { margin: 0 0 1rem; } .eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 700; font-family: var(--font-text); color: var(--accent-deep); background: var(--accent-soft); padding: .4rem .75rem; border-radius: 2rem; margin: 0; } .lede { font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.6; color: var(--ink-soft); max-width: 34ch; margin: 0 0 1.6rem; } .section-lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 54ch; margin: 0 0 2rem; } .meta { font-size: .9rem; color: var(--muted); line-height: 1.5; } /* ---------- layout ---------- */ main { display: block; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; } section { padding: 4.5rem 0; } @media (min-width: 56rem) { section { padding: 6rem 0; } } .section-head { margin-bottom: 2.5rem; max-width: 44rem; } /* The landing pages put a .wrap inside every section so that tinted sections can run full-bleed. The legal pages (privacy, terms, support, deletion) are plain documents whose sections hold their content directly. Constrain those instead, so both layouts read correctly from one stylesheet. - landing hero → has a > .hero-grid → skipped, stays full-bleed - landing section→ has a > .wrap → skipped, stays full-bleed - legal section → has neither → constrained here */ main > section:not(:has(> .wrap)):not(:has(> .hero-grid)) { max-width: var(--max); margin-inline: auto; /* a legal document reads better tight than airy — the landing-page rhythm is too loose here */ padding: 1.75rem 1.5rem; } /* The legal pages reuse .hero for their page title. Drop the landing-page hero treatment there — a constrained gradient would just band the top of the page. */ main > section.hero:not(:has(> .hero-grid)) { background: none; padding-top: clamp(2.5rem, 5vw, 3.5rem); padding-bottom: 0; } main > section.hero:not(:has(> .hero-grid)) h1 { font-size: clamp(2.2rem, 4.6vw, 3.2rem); } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s ease, background .3s ease; } .site-header.is-stuck { border-bottom-color: var(--line); } .header-inner { max-width: var(--max); margin: 0 auto; padding: .85rem 1.5rem; display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: .65rem; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; letter-spacing: -.02em; color: var(--ink); text-decoration: none; } .brand img { width: 2.1rem; height: 2.1rem; border-radius: .6rem; box-shadow: var(--shadow-sm); } .site-header nav ul { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; margin: 0; padding: 0; list-style: none; font-size: .93rem; font-weight: 500; } .site-header nav a { color: var(--ink-soft); text-decoration: none; } .site-header nav a:hover { color: var(--accent); } .site-header nav a[aria-current="page"] { font-weight: 700; color: var(--ink); } /* ---------- hero ---------- */ .hero { position: relative; padding: clamp(3rem, 7vw, 6rem) 0 clamp(3.5rem, 7vw, 6.5rem); background: radial-gradient(120% 90% at 78% 12%, var(--wash-b) 0%, transparent 62%), linear-gradient(180deg, var(--wash-a) 0%, var(--paper) 88%); overflow: hidden; } .hero-grid { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr; } @media (min-width: 56rem) { .hero-grid { grid-template-columns: 1.02fr .98fr; } } .app-mark { width: 4.75rem; height: 4.75rem; border-radius: 1.25rem; box-shadow: 0 .5rem 1.5rem rgba(20, 30, 25, .18), 0 0 0 1px rgba(255,255,255,.5) inset; margin-bottom: 1.25rem; } /* the artwork floats — no box, just light. isolate keeps the glow inside this element's stacking context, otherwise a negative z-index would paint it behind the .hero section background. */ .hero-art { position: relative; isolation: isolate; } .hero-art::after { content: ""; position: absolute; inset: 6% 2% -8%; background: radial-gradient(58% 52% at 50% 52%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 72%); filter: blur(48px); z-index: 0; } .hero-art img { position: relative; z-index: 1; width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-lg); } /* ---------- buttons & signup ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .95rem 1.5rem; border-radius: .85rem; font-family: var(--font-text); font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; background: var(--accent); color: #fff; border: 1px solid transparent; box-shadow: 0 1px 2px rgba(20,30,25,.12), 0 8px 22px color-mix(in srgb, var(--accent) 30%, transparent); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .btn:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(20,30,25,.14), 0 14px 32px color-mix(in srgb, var(--accent) 38%, transparent); } .btn:active { transform: translateY(0); } .btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); } .btn.secondary:hover { background: var(--surface); border-color: var(--accent); color: var(--accent); } /* email signup — replaces store buttons until the listings exist */ .signup { margin: 0 0 1rem; max-width: 27rem; } .signup-row { display: flex; flex-wrap: wrap; gap: .6rem; } .signup input[type="email"] { flex: 1 1 12rem; min-width: 0; padding: .95rem 1.1rem; border-radius: .85rem; font-family: var(--font-text); font-size: 1rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .signup input[type="email"]::placeholder { color: var(--muted); } .signup input[type="email"]:focus { border-color: var(--accent); } .signup-note { font-size: .88rem; color: var(--muted); margin: .85rem 0 0; } .signup-status { font-size: .93rem; font-weight: 600; color: var(--accent-deep); margin: .85rem 0 0; min-height: 1.4em; } /* ---------- cards ---------- */ .grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 44rem) { .grid.two { grid-template-columns: 1fr 1fr; } } @media (min-width: 56rem) { .grid.three { grid-template-columns: repeat(3, 1fr); } } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .card p:last-child { margin-bottom: 0; } .card .card-icon { width: 2.6rem; height: 2.6rem; border-radius: .8rem; display: grid; place-items: center; margin-bottom: 1.1rem; background: var(--accent-soft); color: var(--accent-deep); font-size: 1.2rem; } /* alternating art + copy rows */ .split { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; grid-template-columns: 1fr; margin-top: 2.5rem; } @media (min-width: 56rem) { .split { grid-template-columns: 1fr 1fr; } .split.flip .split-art { order: -1; } } .split-art { position: relative; } .split-art img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-md); } .split-copy h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.02em; margin-bottom: .75rem; } .callout { background: linear-gradient(140deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 45%, var(--surface))); border: 1px solid var(--line); border-left: .28rem solid var(--accent); border-radius: var(--radius-sm); padding: 1.5rem 1.75rem; margin: 0 0 1.5rem; box-shadow: var(--shadow-sm); } .callout p:last-child { margin-bottom: 0; } /* band — tinted full-width section */ .band { background: linear-gradient(180deg, var(--wash-a), var(--wash-b)); } /* ---------- pricing ---------- */ .price { font-size: 2.1rem; font-weight: 600; letter-spacing: -.02em; margin: .2rem 0 1rem; line-height: 1.1; } .price small { font-size: .9rem; font-weight: 500; color: var(--muted); font-family: var(--font-text); letter-spacing: 0; } .card.featured { border-color: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: var(--shadow-md); position: relative; } .card.featured::before { content: attr(data-badge); position: absolute; top: -.7rem; left: 1.75rem; background: var(--accent); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 2rem; } /* ---------- lists ---------- */ .feature-list { list-style: none; padding: 0; margin: 0; } .feature-list li { padding: .4rem 0 .4rem 1.75rem; position: relative; } .feature-list li::before { content: ""; position: absolute; left: .15rem; top: 1.05rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); } /* ---------- tables ---------- */ .table-wrap { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); } table { border-collapse: collapse; width: 100%; font-size: .95rem; } th, td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; } tr:last-child td { border-bottom: none; } th { font-weight: 700; background: var(--surface-2); } /* ---------- faq ---------- */ details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.1rem 1.4rem; margin: 0 0 .75rem; box-shadow: var(--shadow-sm); } summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; } summary::-webkit-details-marker { display: none; } summary::after { content: "+"; font-size: 1.35rem; color: var(--accent); font-weight: 400; line-height: 1; } details[open] summary::after { content: "–"; } details[open] summary { margin-bottom: .6rem; } details p:last-child { margin-bottom: 0; } /* ---------- legal pages ---------- */ .page-head { background: linear-gradient(180deg, var(--wash-a), var(--paper)); padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem); } .page-head h1 { font-size: clamp(2.2rem, 4.6vw, 3.2rem); } .prose { max-width: 42rem; } .prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 2.5rem 0 .6rem; } .prose h3 { margin-top: 1.75rem; } .prose ul { padding-left: 1.2rem; } .prose li { margin: .35rem 0; } /* ---------- scroll progress bar ---------- */ .scroll-progress { position: absolute; bottom: 0; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); z-index: 61; pointer-events: none; transition: width .1s linear; } /* ---------- card hover lift ---------- */ .card, .step, .stat, .callout { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1); } .card:hover, .step:hover, .callout:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .stat:hover { transform: translateY(-4px) scale(1.03); box-shadow: var(--shadow-md); } /* ---------- split section image parallax ---------- */ .split-art img { transition: transform .6s cubic-bezier(.22,1,.36,1); } .split-art:hover img { transform: scale(1.04); } /* ---------- marquee auto-scroll ---------- */ .marquee-track { display: flex; gap: 1rem; animation: marquee-scroll 40s linear infinite; width: max-content; } .marquee-track:hover { animation-play-state: paused; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- floating accents ---------- */ @keyframes float-slow { 0%,100% { translate: 0 0; } 50% { translate: 0 -14px; } } @keyframes float-drift { 0%,100% { translate: 0 0 rotate(0deg); } 50% { translate: 6px -10px rotate(2deg); } } .float-slow { animation: float-slow 8s ease-in-out infinite; } .float-drift { animation: float-drift 10s ease-in-out infinite; } /* ---------- reveal variants ---------- */ .reveal[data-anim="slide-left"] { transform: translateX(-30px); opacity: 0; } .reveal[data-anim="slide-right"] { transform: translateX(30px); opacity: 0; } .reveal[data-anim="slide-left"].is-in, .reveal[data-anim="slide-right"].is-in { transform: none; opacity: 1; } .reveal[data-anim="zoom"] { transform: scale(.92); opacity: 0; } .reveal[data-anim="zoom"].is-in { transform: none; opacity: 1; } /* ---------- interactive tilt (JS sets --rx/--ry) ---------- */ .tilt-card { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .15s ease-out; } .tilt-card:hover { box-shadow: var(--shadow-lg); } /* ---------- gradient divider between sections ---------- */ .section-divider { height: 2px; border: none; margin: 0; background: linear-gradient(90deg, transparent, var(--accent-soft), var(--accent), var(--accent-soft), transparent); opacity: .4; } /* ---------- store badge hover ---------- */ .store-badge { transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease; } .store-badge:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 6px 20px rgba(0,0,0,.2); } /* ---------- eyebrow pill shimmer ---------- */ @keyframes shimmer { from { background-position: -200% center; } to { background-position: 200% center; } } .eyebrow { background-size: 200% auto; animation: shimmer 6s linear infinite; } /* ---------- pricing card highlight ---------- */ .card--featured { border: 2px solid var(--accent); transform: scale(1.03); box-shadow: var(--shadow-lg); } .card--featured:hover { transform: scale(1.06) translateY(-6px); } /* ---------- button shimmer sweep ---------- */ .btn { position: relative; overflow: hidden; } .btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 45%, rgba(255,255,255,.5) 50%, rgba(255,255,255,.35) 55%, transparent 65%); transform: translateX(-110%); pointer-events: none; } .btn.shimmer-done::after { animation: btn-shimmer .7s ease-out forwards; } @keyframes btn-shimmer { to { transform: translateX(110%); } } /* ---------- hero headline stagger ---------- */ .hero-text-stagger > * { opacity: 0; transform: translateY(22px); animation: hero-fade-up .8s cubic-bezier(.22,1,.36,1) forwards; } .hero-text-stagger > *:nth-child(1) { animation-delay: .15s; } .hero-text-stagger > *:nth-child(2) { animation-delay: .3s; } .hero-text-stagger > *:nth-child(3) { animation-delay: .45s; } .hero-text-stagger > *:nth-child(4) { animation-delay: .6s; } .hero-text-stagger > *:nth-child(5) { animation-delay: .75s; } .hero-text-stagger > *:nth-child(6) { animation-delay: .9s; } .hero-text-stagger > *:nth-child(7) { animation-delay: 1.05s; } @keyframes hero-fade-up { to { opacity: 1; transform: translateY(0); } } /* ---------- gradient section connector ---------- */ .section-fade-in { position: relative; } .section-fade-in::before { content: ""; position: absolute; top: -3rem; left: 0; right: 0; height: 3rem; background: linear-gradient(180deg, transparent, var(--paper)); pointer-events: none; } /* ---------- glassmorphic card variant ---------- */ .card-glass { background: color-mix(in srgb, var(--surface) 72%, transparent); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); border: 1px solid color-mix(in srgb, var(--line) 50%, transparent); } /* ---------- accent glow behind hero icon ---------- */ .app-mark-glow { position: relative; } .app-mark-glow::after { content: ""; position: absolute; inset: -30% -30%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%); filter: blur(18px); z-index: -1; animation: glow-pulse 4s ease-in-out infinite; } @keyframes glow-pulse { 0%, 100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } } /* ---------- hero floating particles ---------- */ .hero-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .hero-particle { position: absolute; width: var(--size, 6px); height: var(--size, 6px); border-radius: 50%; background: color-mix(in srgb, var(--accent) 25%, transparent); animation: particle-float var(--dur, 12s) ease-in-out infinite; animation-delay: var(--delay, 0s); } @keyframes particle-float { 0%, 100% { transform: translate(0, 0) scale(1); opacity: .3; } 25% { transform: translate(var(--dx, 20px), var(--dy, -30px)) scale(1.2); opacity: .6; } 50% { transform: translate(calc(var(--dx, 20px) * -0.5), calc(var(--dy, -30px) * 1.5)) scale(.8); opacity: .4; } 75% { transform: translate(calc(var(--dx, 20px) * 0.8), calc(var(--dy, -30px) * -0.3)) scale(1.1); opacity: .55; } } /* ---------- number highlight pulse ---------- */ .stat-num.counted { animation: num-pop .4s cubic-bezier(.22,1,.36,1); } @keyframes num-pop { 0% { transform: scale(1.2); opacity: .6; } 100% { transform: scale(1); opacity: 1; } } /* ---------- smooth scroll offset for sticky header ---------- */ html { scroll-padding-top: 5rem; } /* ---------- mobile hamburger nav ---------- */ .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: .5rem; color: var(--ink); position: relative; z-index: 52; } .nav-toggle svg { display: block; width: 1.5rem; height: 1.5rem; } .nav-toggle .icon-close { display: none; } .nav-toggle[aria-expanded="true"] .icon-open { display: none; } .nav-toggle[aria-expanded="true"] .icon-close { display: block; } @media (max-width: 52rem) { .nav-toggle { display: block; } .site-header nav { position: fixed; top: 0; right: 0; bottom: 0; width: min(20rem, 80vw); background: color-mix(in srgb, var(--paper) 96%, transparent); backdrop-filter: saturate(1.6) blur(20px); -webkit-backdrop-filter: saturate(1.6) blur(20px); border-left: 1px solid var(--line); box-shadow: -8px 0 40px rgba(0,0,0,.12); padding: 5rem 1.5rem 2rem; transform: translateX(100%); transition: transform .32s cubic-bezier(.22,1,.36,1); z-index: 51; } .site-header nav.is-open { transform: translateX(0); } .site-header nav ul { flex-direction: column; gap: .3rem; font-size: 1.1rem; } .site-header nav a { display: block; padding: .75rem .5rem; border-radius: var(--radius-sm); transition: background .15s ease; } .site-header nav a:hover { background: var(--accent-soft); } .nav-scrim { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: opacity .32s ease; } .nav-scrim.is-visible { opacity: 1; pointer-events: auto; } } /* ---------- split section slide reveals ---------- */ .split.reveal { transform: translateX(-30px); opacity: 0; } .split.flip.reveal { transform: translateX(30px); } .split.reveal.is-in { transform: none; opacity: 1; } /* ---------- mobile responsive refinements ---------- */ @media (max-width: 52rem) { section { padding: 3rem 0; } .section-head { margin-bottom: 1.5rem; } h2 { font-size: clamp(1.6rem, 5vw, 2.2rem); } .eyebrow { font-size: .65rem; padding: .3rem .6rem; } .hero { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2rem, 4vw, 3rem); } .wrap { padding: 0 1.1rem; } .stats { gap: .9rem; } .stat { padding: 1.2rem 1rem; } .stat-num { font-size: clamp(2rem, 8vw, 2.8rem); } .footer-inner { flex-direction: column; text-align: center; gap: .8rem; } .footer-links { justify-content: center; } details { padding: .9rem 1.1rem; } .card { padding: 1.4rem; } .split { margin-top: 1.5rem; } .split-copy h3 { font-size: clamp(1.3rem, 4vw, 1.7rem); } } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid var(--line); background: var(--surface); } .footer-inner { max-width: var(--max); margin: 0 auto; padding: 2.5rem 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; font-size: .92rem; color: var(--muted); } .footer-inner a { color: var(--muted); text-decoration: none; } .footer-inner a:hover { color: var(--accent); text-decoration: underline; } .footer-links { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; } /* ---------- scroll reveal ---------- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); } .reveal.is-in { opacity: 1; transform: none; } /* Without JavaScript there is nothing to add .is-in, so the reveal content would stay invisible. When scripting is unavailable, show everything up front — the page must read fully with the script missing. */ @media (scripting: none) { .reveal { opacity: 1; transform: none; transition: none; } } /* Motion intensity is tuned per app via a data attribute on : data-motion="calm" (gentler, slower) | "lively" (a touch more travel + spring). Everything still resolves to the same finished state, so content never depends on it. */ .reveal { transition-duration: .7s; } body[data-motion="calm"] .reveal { transition-duration: .95s; transform: translateY(14px); } body[data-motion="lively"] .reveal { transition-duration: .6s; transform: translateY(24px); transition-timing-function: cubic-bezier(.2,.9,.25,1.2); } .reveal[data-anim="scale"] { transform: translateY(16px) scale(.965); } .reveal[data-anim="scale"].is-in { transform: none; } /* JS sets --i on grid children so a row of cards flows in one after another, not all at once. */ .reveal { transition-delay: calc(var(--i, 0) * 80ms); } /* ---------- floating hero art ---------- */ /* A slow idle float gives the render life; JS layers scroll-parallax on top by setting --py. Both fold into one transform. */ @keyframes floaty { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } } .hero-art img { animation: floaty 7s ease-in-out infinite; will-change: transform, translate; } body[data-motion="lively"] .hero-art img { animation-duration: 5.5s; } .hero-art { translate: 0 var(--py, 0px); } /* ---------- stat count-up ---------- */ .stats { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, 1fr); } @media (min-width: 44rem) { .stats { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); } } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.4rem; text-align: center; box-shadow: var(--shadow-sm); } .stat-num { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; letter-spacing: -.03em; color: var(--accent-deep); font-variant-numeric: tabular-nums; } .stat-label { display: block; margin-top: .55rem; font-size: .95rem; color: var(--ink-soft); } /* ---------- how it works ---------- */ .steps { display: grid; gap: 1.25rem; grid-template-columns: 1fr; counter-reset: step; } @media (min-width: 52rem) { .steps { grid-template-columns: repeat(3, 1fr); } } .step { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.9rem 1.5rem 1.6rem; box-shadow: var(--shadow-sm); } .step-num { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-bottom: .9rem; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; } @media (prefers-color-scheme: dark) { .step-num { color: #0e1512; } } /* ---------- status badge (replaces the big "read this" notices) ---------- */ .status-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .85rem; border-radius: 2rem; background: var(--accent-soft); color: var(--accent-deep); border: 1px solid var(--line); font-size: .82rem; font-weight: 600; letter-spacing: .01em; } .status-badge::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); flex: none; } /* a compact inline safety/info note — small, calm, never dominating the page */ .note-compact { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; color: var(--muted); line-height: 1.5; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .85rem 1.1rem; margin: 0; } .note-compact svg, .note-compact .note-icon { flex: none; margin-top: .1rem; } .note-compact a { color: var(--accent-deep); } /* full legal wording tucked into a details so it is available but never shouty */ details.note-more { background: transparent; border: none; box-shadow: none; padding: 0; margin: .6rem 0 0; } details.note-more > summary { font-size: .88rem; font-weight: 600; color: var(--accent-deep); } details.note-more > summary::after { content: ""; } details.note-more[open] { margin-bottom: .5rem; } details.note-more .note-body { font-size: .9rem; color: var(--muted); margin-top: .6rem; } /* ---------- account pages (reset, confirmed) ---------- */ /* A short single-task page. It is centred and narrow so there is nothing to read past, and the boxes are large enough to use one-handed on a phone. */ .account-panel { max-width: 30rem; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow-md); } .account-field { margin: 0 0 1.15rem; } .account-field label { display: block; font-weight: 600; font-size: .95rem; margin: 0 0 .4rem; } .account-input-row { display: flex; gap: .5rem; align-items: stretch; } .account-panel input[type="password"], .account-panel input[type="text"] { flex: 1 1 auto; min-width: 0; padding: .9rem 1rem; border-radius: .85rem; font-family: var(--font-text); font-size: 1rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); } .account-panel input:focus { border-color: var(--accent); } .pw-toggle { flex: none; min-width: 4.25rem; min-height: 2.75rem; border: 1px solid var(--line); border-radius: .85rem; background: var(--surface-2); color: var(--ink); font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; } .pw-toggle:hover { border-color: var(--accent); color: var(--accent); } .account-hint { font-size: .88rem; color: var(--muted); margin: .4rem 0 0; min-height: 1.3em; } .account-hint[data-level="short"] { color: var(--muted); } .account-hint[data-level="ok"], .account-hint[data-level="good"], .account-hint[data-level="strong"] { color: var(--accent-deep); font-weight: 600; } .account-status { font-size: 1rem; line-height: 1.55; margin: 1.1rem 0 0; min-height: 1.5em; font-weight: 600; color: var(--ink-soft); } .account-status[data-tone="error"] { color: #a13b2c; } .account-status[data-tone="success"] { color: var(--accent-deep); } @media (prefers-color-scheme: dark) { .account-status[data-tone="error"] { color: #f2a394; } } .account-panel .btn { width: 100%; } /* ---------- audio player ---------- */ .player { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.35rem; box-shadow: var(--shadow-md); max-width: 32rem; } .player-tracks { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; } .player-track { border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: 2rem; padding: .5rem .95rem; font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } .player-track:hover { border-color: var(--accent); } .player-track[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; } @media (prefers-color-scheme: dark) { .player-track[aria-pressed="true"] { color: #0e1512; } } .player-main { display: flex; align-items: center; gap: 1rem; } .player-play { flex: none; width: 3.25rem; height: 3.25rem; border-radius: 50%; border: none; background: var(--accent); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-sm); transition: transform .15s ease, background .15s ease; } .player-play:hover { transform: scale(1.05); background: var(--accent-deep); } @media (prefers-color-scheme: dark) { .player-play { color: #0e1512; } } .player-play svg { width: 1.4rem; height: 1.4rem; } .player-body { flex: 1 1 auto; min-width: 0; } .player-name { font-weight: 600; font-size: .98rem; margin: 0 0 .5rem; } .player-seek { -webkit-appearance: none; appearance: none; width: 100%; height: .4rem; border-radius: 1rem; background: var(--line); cursor: pointer; margin: 0; } .player-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 1rem; height: 1rem; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); } .player-seek::-moz-range-thumb { width: 1rem; height: 1rem; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); } .player-time { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); margin-top: .45rem; font-variant-numeric: tabular-nums; } .player-note { font-size: .82rem; color: var(--muted); margin: 1rem 0 0; } /* ---------- dark ---------- */ @media (prefers-color-scheme: dark) { :root { --ink: #eaf0ec; --ink-soft: #b6c3bc; --muted: #8b9a92; --paper: #101512; --surface: #19211d; --surface-2: #222b26; --line: rgba(255, 255, 255, .10); --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.3); --shadow-md: 0 2px 6px rgba(0,0,0,.35), 0 14px 40px rgba(0,0,0,.45); --shadow-lg: 0 4px 12px rgba(0,0,0,.4), 0 30px 80px rgba(0,0,0,.6); } body[data-app="streaks-garden"] { --accent: #74c298; --accent-deep: #a4dcbd; --accent-soft: #1c2d24; --wash-a: #131c17; --wash-b: #1a2b21; } body[data-app="softly-noted"] { --accent: #a89dde; --accent-deep: #c7bff0; --accent-soft: #232035; --wash-a: #171526; --wash-b: #221e38; } body[data-app="moonease"] { --accent: #8db0e4; --accent-deep: #b3cbf0; --accent-soft: #1b2434; --wash-a: #131923; --wash-b: #1a2537; } body[data-app="gentle-range"] { --accent: #64c3c9; --accent-deep: #9adde1; --accent-soft: #172c2e; --wash-a: #101f21; --wash-b: #163033; } body[data-app="our-little-thing"] { --accent: #e498aa; --accent-deep: #f0bcc8; --accent-soft: #301f24; --wash-a: #21151a; --wash-b: #331f27; } body[data-app="kind-to-me"] { --accent: #e0a072; --accent-deep: #efc19b; --accent-soft: #302319; --wash-a: #201811; --wash-b: #33251a; } body[data-app="neatly-packed"] { --accent: #7ccfdd; --accent-deep: #a8e3ec; --accent-soft: #172c32; --wash-a: #101f24; --wash-b: #163037; } body[data-app="linelet"] { --accent: #63d3c8; --accent-deep: #97e6de; --accent-soft: #143030; --wash-a: #0e2321; --wash-b: #133430; } .btn { color: #0e1512; } .btn:hover { color: #0e1512; } .app-mark { box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.6); } } /* ---------- motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } } /* ---------- print ---------- */ @media print { .site-header, .cta-row, .signup, .skip-link, .hero-art, .split-art { display: none; } body { background: #fff; color: #000; } .card, .callout, details { border: 1px solid #999; box-shadow: none; } .reveal { opacity: 1; transform: none; } }