/* ============================================================
Tally marketing site — fresh start
Goal: each device mockup actually looks like the iOS app the
user uses. Single indigo accent, gold MIT, white surfaces, clean
underlined tab strip. Section pacing leans on Apple/Things 3
convention: big display copy, breath around hero device.
============================================================ */
:root {
--bg: #ffffff;
--bg-soft: #f7f7f8;
--bg-deep: #0b0b0f;
--text: #1d1d1f;
--text-soft: #6e6e73;
--text-mute: #86868b;
--accent: #6366f1;
--accent-tint: #eceaff;
--accent-deep: #5856ec;
--gold: #eab308;
--gold-tint: #fef3c7;
--green: #22c55e;
--red: #ef4444;
--stroke: rgba(0, 0, 0, 0.08);
--stroke-strong: rgba(0, 0, 0, 0.14);
--card: #ffffff;
--kbd: #ffffff;
--shadow-sm: 0 8px 22px -10px rgba(15, 23, 42, 0.18);
--shadow-md: 0 24px 60px -22px rgba(15, 23, 42, 0.30);
--shadow-device: 0 50px 110px -36px rgba(15, 23, 42, 0.42),
0 18px 40px -16px rgba(15, 23, 42, 0.18);
--max: 1180px;
--pad: 100px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; color-scheme: light; } /* site is light-only: the page hard-codes cream/light inline styles, so the old dark var-swap turned it into a broken mix at night */
body {
/* Match the App Store assets, which are set in SF Pro Display. Was
ui-rounded + Nunito; the rounded face didn't match the store spreads
sitting right next to this page. Note -apple-system only resolves to
SF on Apple platforms — elsewhere this falls back to system-ui. */
font-family: -apple-system, "SF Pro Display", system-ui, sans-serif;
color: var(--text);
background: var(--bg);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
.container {
width: 100%;
max-width: var(--max);
margin: 0 auto;
padding: 0 32px;
}
/* ============================================================
Brand mark
============================================================ */
/* Real Tally app icon (dark rounded square + periwinkle "T"), so the
brandmark matches the app instead of the old bright-blue gradient swoosh. */
.brandmark {
width: 24px;
height: 24px;
background: url("app-icon.png") center / contain no-repeat;
display: inline-block;
}
/* ============================================================
Nav
============================================================ */
.nav {
position: sticky;
top: 0;
z-index: 50;
background: color-mix(in srgb, var(--bg) 72%, transparent);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--stroke);
}
.nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
padding-top: 14px;
padding-bottom: 14px;
}
/* Brand = the app's "TALLY" lettermark: rounded font, accent indigo,
regular-ish weight, wide tracking — matches the iOS home/sidebar logo. */
.nav__brand {
font-weight: 700;
font-size: 40px;
letter-spacing: 0.12em;
color: var(--accent);
text-transform: uppercase;
}
.nav__links {
display: flex;
gap: 24px;
font-size: 14px;
color: var(--text-soft);
}
.nav__links a:hover { color: var(--text); }
.nav__cta {
background: var(--accent);
color: white;
padding: 9px 18px;
border-radius: 999px;
font-size: 14px;
font-weight: 600;
box-shadow: 0 4px 10px rgba(99, 102, 241, 0.32);
}
/* ============================================================
Buttons
============================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 28px;
border-radius: 999px;
font-weight: 600;
font-size: 16px;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn--primary {
background: var(--accent);
color: white;
box-shadow: 0 8px 22px rgba(99, 102, 241, 0.32);
}
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(99, 102, 241, 0.42); }
.btn--ghost {
background: transparent;
color: var(--text);
border: 1px solid var(--stroke-strong);
}
.btn--large { padding: 18px 38px; font-size: 17px; }
/* ============================================================
Display copy
============================================================ */
.kicker {
color: var(--text-mute);
font-weight: 700;
font-size: 22px;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 22px;
}
.display {
/* Sized + nowrap so each of the three beats ("More productive." /
"More organised." / "Less procrastination.") stays on ONE line, from
small phones up to desktop. The long beat ("LESS PROCRASTINATION.") is
~13.5px wide per 1px of font-size, so 54px ≈ 730px — comfortably inside
the 880px hero width — while the vw term shrinks it to fit narrow phones. */
font-size: clamp(18px, 5.5vw, 54px);
line-height: 1.2;
letter-spacing: 0.07em;
text-transform: uppercase;
font-weight: 700;
color: var(--text-soft);
margin-bottom: 28px;
white-space: nowrap;
}
/* Indigo underline accent, like the app's active "Today" tab / sidebar marker. */
.display::after {
content: '';
display: block;
width: 110px;
height: 6px;
border-radius: 3px;
background: var(--accent);
margin-top: 26px;
}
.display--accent {
/* Dark like the app's titles — keep the hero calm, not half-blue. */
color: var(--text);
}
.lede {
font-size: clamp(18px, 1.7vw, 21px);
color: var(--text-soft);
max-width: 640px;
line-height: 1.55;
}
.lede--center { margin-left: auto; margin-right: auto; text-align: center; }
/* ============================================================
Animated hero checklist — three goals that tick off in turn,
using the app's checkmark (accent circle + white tick) sized up.
============================================================ */
.hero__lead {
font-family: -apple-system, "SF Pro Display", system-ui, sans-serif;
/* must read BIGGER than the bullet labels (which reach 56px) */
font-size: clamp(30px, 5.2vw, 66px);
font-weight: 900;
letter-spacing: -.01em;
line-height: 1.08;
text-transform: uppercase;
text-align: center;
color: var(--text);
margin: 0 0 36px;
}
.hero__lead em { font-style: normal; color: var(--accent); }
.hero__checklist {
display: flex;
flex-direction: column;
align-items: flex-start; /* checkmarks on the LEFT, aligned at the left edge */
gap: clamp(12px, 1.6vw, 20px);
width: fit-content;
max-width: 100%;
margin: 0 auto 44px;
padding: 0;
text-align: left;
}
/* Checkmark on the LEFT (DOM order: box, then label). */
.hcheck { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 24px); }
.hcheck__box {
flex: 0 0 auto;
width: clamp(26px, 3.2vw, 38px);
height: clamp(26px, 3.2vw, 38px);
border-radius: 50%;
border: 3px solid var(--accent);
background: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
/* The checked state is toggled by JS for a continuous loop; CSS just
transitions between unchecked and checked. */
transition: background 0.35s ease;
}
.hcheck__box svg { width: 74%; height: 74%; }
.hcheck__box svg path {
stroke-dasharray: 22;
stroke-dashoffset: 22;
transition: stroke-dashoffset 0.4s ease;
}
.hcheck.on .hcheck__box { background: var(--accent); }
.hcheck.on .hcheck__box svg path { stroke-dashoffset: 0; }
.hcheck__label {
font-family: -apple-system, "SF Pro Display", system-ui, sans-serif;
font-size: clamp(20px, 2.9vw, 36px);
font-weight: 700;
line-height: 1.1;
color: var(--text);
white-space: nowrap;
}
/* Reduced-motion: no transitions (JS shows them already checked). */
@media (prefers-reduced-motion: reduce) {
.hcheck__box, .hcheck__box svg path { transition: none; }
}
.title {
font-size: clamp(40px, 6vw, 68px);
line-height: 1.08;
letter-spacing: -0.01em;
font-weight: 700;
margin-bottom: 24px;
/* Split multi-line headings evenly — prevents a lone word ("Up.")
dangling on the last line at phone widths. */
text-wrap: balance;
}
/* Same balancing for the smaller feature headings. */
.cadence__label, .method__name, .mfeat__title { text-wrap: balance; }
/* Centered titles span the full page width on one line, so at the shared
.title size (max 68px) they visually dominate far more than the same-size
titles tucked into narrow split columns. Drop them a notch so a centered
heading ("Little touches that add up.") reads at the same weight as a
split-column one ("Your whole day, pulled together for you."). */
.title--center { text-align: center; font-size: clamp(32px, 4.4vw, 54px); }
/* ============================================================
Hero
============================================================ */
.hero {
padding: 64px 0 0;
text-align: center;
overflow: hidden;
}
.hero__inner { max-width: 880px; }
.hero .lede { margin: 0 auto 84px; }
.hero__cta { display: flex; gap: 14px; justify-content: center; margin-bottom: 80px; flex-wrap: wrap; }
.hero__stage {
display: flex;
justify-content: center;
margin-top: 20px;
}
/* ============================================================
Sections
============================================================ */
.section { padding: var(--pad) 0; }
.section--alt { background: var(--bg-soft); }
.section--pencil {
background: linear-gradient(180deg, var(--bg) 0%, var(--accent-tint) 100%);
}
.section--devices { padding-bottom: calc(var(--pad) - 20px); }
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
/* Pencil + Markdown Notes sections lean the visual side wider so the
iPad + iPhone (and live editor) have enough room to be readable.
`order` on grid items doesn't reliably reorder them across columns,
so we explicitly pin the visual to col 1 (wide) and the copy to col 2
(narrow). */
@media (min-width: 981px) {
#pencil .split,
#notes .split {
grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.5fr);
gap: 56px;
}
#pencil .split__visual,
#notes .split__visual {
grid-column: 1;
}
#pencil .split__copy,
#notes .split__copy {
grid-column: 2;
}
}
/* iPad/Pencil section: give the device visual more room so the iPad can be
large (copy stays on the left, narrower). */
@media (min-width: 981px) {
#ipad .split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 50px; align-items: center; }
}
.split--reverse .split__copy { order: 2; }
.split--reverse .split__visual { order: 1; }
.split__visual { display: flex; justify-content: center; align-items: center; }
.bullets {
display: flex;
flex-direction: column;
gap: 12px;
color: var(--text-soft);
font-size: 16px;
margin-top: 28px;
}
.bullets li {
padding-left: 32px;
position: relative;
}
/* Tally-style checkmark — filled accent circle + white tick (the app's
completed-task check). Reused anywhere .bullets appears. */
.bullets li::before {
content: '✓';
position: absolute;
left: 0;
top: 1px;
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--accent);
color: #fff;
font-size: 12px;
font-weight: 800;
line-height: 21px;
text-align: center;
}
.bullets li::after {
content: '';
position: absolute;
left: 4px;
top: 12px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
}
kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
background: var(--kbd);
border: 1px solid var(--stroke-strong);
border-bottom-width: 2px;
border-radius: 6px;
padding: 0 6px;
font-family: -apple-system, sans-serif;
font-size: 13px;
font-weight: 600;
color: var(--text);
margin: 0 2px;
}
/* ============================================================
iPhone (used in hero, lineup, cadence cells)
============================================================ */
.iphone {
background: #0b0b0f;
border-radius: 56px;
padding: 14px;
position: relative;
box-shadow: var(--shadow-device);
}
.iphone__notch {
position: absolute;
top: 14px;
left: 50%;
transform: translateX(-50%);
width: 110px;
height: 28px;
background: #0b0b0f;
border-radius: 14px;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.iphone__screen {
width: 100%;
height: 100%;
background: var(--card);
border-radius: 44px;
overflow: hidden;
position: relative;
}
.iphone--hero { width: 360px; height: 770px; }
/* ============================================================
Hero phone — Today view rendered live in HTML so the
check-marks actually work. Pixel-tuned against the
`iphone-today.png` reference (no longer used as the hero).
============================================================ */
.todayhero {
width: 100%;
height: 100%;
background: #f4f2ef;
border-radius: inherit;
display: flex;
flex-direction: column;
position: relative;
font-size: 13px;
color: #1a1a1a;
overflow: hidden;
}
.todayhero__statusbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 22px 4px;
font-size: 12px;
font-weight: 600;
color: #1a1a1a;
}
.todayhero__statusbar-right {
display: inline-flex;
align-items: center;
gap: 5px;
color: #1a1a1a;
}
.todayhero__sig { width: 16px; height: 10px; }
.todayhero__wifi { width: 14px; height: 11px; }
.todayhero__battery {
width: 22px;
height: 11px;
border: 1.2px solid #1a1a1a;
border-radius: 3px;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1px;
}
.todayhero__battery::after {
content: '';
position: absolute;
right: -3px;
top: 3px;
width: 1.5px;
height: 4px;
background: #1a1a1a;
border-radius: 0 1px 1px 0;
}
.todayhero__battery-pct {
font-size: 7.5px;
font-weight: 700;
color: white;
background: #1a1a1a;
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 1px;
}
.todayhero__header {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 16px 6px;
}
.todayhero__brand {
font-size: 24px;
font-weight: 800;
color: #6366f1;
letter-spacing: -0.03em;
}
.todayhero__brand-dot {
width: 18px;
height: 18px;
border-radius: 50%;
background: #6366f1;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
}
.todayhero__brand-dot svg { width: 11px; height: 11px; }
.todayhero__date {
margin-left: auto;
width: 36px;
height: 36px;
border: 1.5px solid #6366f1;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #6366f1;
line-height: 1;
}
.todayhero__date-day { font-size: 8px; font-weight: 700; }
.todayhero__date-num { font-size: 14px; font-weight: 800; margin-top: 1px; color: #1a1a1a; }
.todayhero__tabs {
display: flex;
gap: 22px;
padding: 4px 16px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.todayhero__tab {
font-size: 14px;
font-weight: 600;
color: #999;
padding-bottom: 6px;
}
.todayhero__tab--active {
color: #1a1a1a;
font-weight: 700;
border-bottom: 2.5px solid #6366f1;
margin-bottom: -1px;
}
.todayhero__input {
margin: 10px 16px 6px;
display: flex;
align-items: center;
background: white;
border: 1px solid #e5e1da;
border-radius: 10px;
padding: 8px 12px;
color: #999;
font-size: 13px;
}
.todayhero__input-text { flex: 1; }
.todayhero__plus { color: #c8c4ba; display: inline-flex; }
.todayhero__plus svg { width: 18px; height: 18px; }
.todayhero__list {
list-style: none;
margin: 0;
padding: 0 16px;
flex: 1;
overflow: hidden;
min-height: 0;
}
.todayhero__row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
font-size: 13px;
color: #1a1a1a;
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
transition: opacity 250ms ease;
}
.todayhero__row:last-child { border-bottom: 0; }
.todayhero__row:has(+ .todayhero__row--mit) { border-bottom: 0; }
.todayhero__name {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.todayhero__check {
width: 16px;
height: 16px;
border-radius: 50%;
border: 1.4px solid rgba(0, 0, 0, 0.3);
background: transparent;
padding: 0;
flex-shrink: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 180ms ease, border-color 180ms ease;
}
.todayhero__check:hover { border-color: #6366f1; }
.todayhero__check::after {
content: '';
width: 6px;
height: 3px;
border-left: 1.6px solid white;
border-bottom: 1.6px solid white;
transform: rotate(-45deg) translate(0.5px, -0.5px) scale(0);
transform-origin: center;
transition: transform 180ms cubic-bezier(0.18, 1.3, 0.4, 1.05);
}
.todayhero__row--done .todayhero__check {
background: #6366f1;
border-color: #6366f1;
}
.todayhero__row--done .todayhero__check::after { transform: rotate(-45deg) translate(0.5px, -0.5px) scale(1); }
.todayhero__row--done .todayhero__name {
text-decoration: line-through;
color: #aaa;
}
.todayhero__crown { display: inline-flex; flex-shrink: 0; }
.todayhero__crown svg { width: 13px; height: 13px; }
.todayhero__pen { display: inline-flex; flex-shrink: 0; color: #6366f1; }
.todayhero__pen svg { width: 12px; height: 12px; }
.todayhero__row--mit {
border: 1.4px solid #f59e0b;
border-radius: 8px;
padding: 7px 8px;
margin: 2px 0;
}
.todayhero__completed {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 16px 4px;
margin-top: 4px;
border-top: 1px solid rgba(0, 0, 0, 0.06);
font-size: 12px;
color: #888;
font-weight: 600;
flex-shrink: 0;
}
.todayhero__completed[hidden] { display: none; }
.todayhero__completed-count {
color: #1a1a1a;
margin-left: 4px;
}
.todayhero__completed-clear { color: #6366f1; font-weight: 600; }
.todayhero__completed-list {
list-style: none;
margin: 0;
padding: 0 16px;
max-height: 56px;
overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
flex-shrink: 0;
}
.todayhero__completed-list .todayhero__row { border-bottom: 0; }
.todayhero__bottomnav {
display: flex;
align-items: center;
justify-content: space-around;
padding: 8px 6px 14px;
background: white;
border-top: 1px solid rgba(0, 0, 0, 0.06);
flex-shrink: 0;
}
.todayhero__nav-item {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 2px;
font-size: 8.5px;
font-weight: 600;
color: #888;
}
.todayhero__nav-item svg { width: 18px; height: 18px; }
.todayhero__nav-item--active {
color: #6366f1;
background: rgba(99, 102, 241, 0.1);
padding: 4px 10px;
border-radius: 12px;
}
/* 2026-06-19: user explicitly wants the schedule shown as a full-size VIDEO
(not shrunk, not a PNG still) — "go back to the videos in full size that
seemed to work." Restored to the original 320px. */
.iphone--medium { width: 320px; height: 660px; }
.iphone--small { width: 240px; height: 510px; padding: 9px; border-radius: 38px; }
.iphone--small .iphone__notch { width: 75px; height: 18px; top: 9px; border-radius: 9px; }
.iphone--small .iphone__screen { border-radius: 32px; }
.iphone--lineup { width: 260px; height: 540px; padding: 10px; border-radius: 42px; }
.iphone--lineup .iphone__notch { width: 86px; height: 22px; top: 10px; border-radius: 11px; }
.iphone--lineup .iphone__screen { border-radius: 34px; }
/* Real iPhone screenshot inside any iPhone frame.
The image is captured at the device's full screen aspect ratio, so cover
fills the rounded screen rect edge-to-edge with no letterboxing. */
.iphone__shot {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
/* 2026-06-19: was `-webkit-optimize-contrast`, which makes Safari
downscale high-res shots with a sharpening/nearest algorithm that
reads as pixelated/aliased at 100% (but fine at other zooms). Use
smooth high-quality scaling instead. */
image-rendering: auto;
image-rendering: high-quality;
}
/* Invisible tap target laid over the gold MIT row in the hero
screenshot. Positioned relative to the screen rect — measured
from `iphone-today.png`, the Running row sits at ~32.5%-37.5%
from the screen top once the iPhone notch overlays the image.
Gives the visitor one delight moment — confetti — without
re-rendering the list in HTML (which throws the proportions
off vs the real device). */
.iphone__mitTap {
position: absolute;
top: 32.5%;
left: 4%;
right: 4%;
height: 5%;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
z-index: 4;
border-radius: 10px;
transition: background 160ms ease;
}
.iphone__mitTap:hover {
background: rgba(245, 158, 11, 0.16);
}
/* Live Activity in the notch */
.iphone__notch--live {
width: 240px;
border-radius: 18px;
padding: 0 12px;
color: white;
font-size: 11px;
font-weight: 600;
justify-content: space-between;
}
.liveact__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 8px var(--gold);
flex-shrink: 0;
}
.liveact__title { flex: 1; text-align: left; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liveact__time { color: var(--gold); font-variant-numeric: tabular-nums; flex-shrink: 0; }
/* ============================================================
Today layout (the actual Tally Today screen)
============================================================ */
.today {
height: 100%;
padding: 56px 18px 0;
display: flex;
flex-direction: column;
background: #f5f5f7;
color: var(--text);
text-align: left;
}
.today--mini { padding: 32px 12px 0; }
.today__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 12px;
}
.today__brand {
display: flex;
align-items: center;
gap: 8px;
}
.today__title {
font-size: 32px;
font-weight: 800;
color: var(--accent);
letter-spacing: -0.02em;
line-height: 1;
}
.today__filter {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--accent);
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
}
.today__filter svg { width: 12px; height: 12px; stroke: white; }
.today__date {
display: flex;
flex-direction: column;
align-items: center;
border: 1.5px solid var(--accent);
border-radius: 8px;
padding: 2px 8px 4px;
line-height: 1;
min-width: 34px;
}
.today__date-dow {
font-size: 9px;
color: var(--red);
font-weight: 700;
letter-spacing: 0.06em;
}
.today__date-num {
font-size: 18px;
color: var(--text);
font-weight: 700;
margin-top: 2px;
}
.today--mini .today__title { font-size: 22px; }
.today--mini .today__date-num { font-size: 14px; }
.today--mini .today__date-dow { font-size: 8px; }
.today__tabs {
display: flex;
justify-content: space-between;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
padding: 0 4px 8px;
margin-bottom: 10px;
font-size: 15px;
color: var(--text-mute);
font-weight: 500;
}
.today--mini .today__tabs { font-size: 11px; padding-bottom: 8px; margin-bottom: 10px; }
.today__tab--active {
color: var(--text);
font-weight: 800;
border-bottom: 3px solid var(--accent);
padding-bottom: 10px;
margin-bottom: -11px;
}
.today--mini .today__tab--active { padding-bottom: 8px; margin-bottom: -9px; }
.today__tabs--mac { padding-bottom: 8px; margin-bottom: 10px; }
.today__add {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 6px 4px 16px;
border: 1px solid rgba(0, 0, 0, 0.10);
border-radius: 16px;
color: var(--text-mute);
font-size: 15px;
margin-bottom: 8px;
background: white;
}
.today__add-text {
flex: 1;
padding: 7px 0;
}
.today__add-input {
flex: 1;
border: 0;
background: transparent;
font: inherit;
color: var(--text);
outline: none;
padding: 7px 0;
min-width: 0;
}
.today__add-input::placeholder { color: var(--text-mute); }
.today__add-plus {
color: var(--text-mute);
background: transparent;
border: 0;
padding: 6px;
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 140ms ease, background 140ms ease;
}
.today__add-plus:hover { color: var(--accent); background: rgba(99, 102, 241, 0.08); }
.today__add-plus svg { width: 22px; height: 22px; }
.today__rows {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
overflow: hidden;
}
/* ============================================================
Task row — name on the left, check on the right (matches the
in-app Today layout). Dividers are intentionally invisible
between regular rows; the MIT row is a gold-bordered white
pill that visually separates itself.
============================================================ */
.row {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 4px;
font-size: 15px;
color: var(--text);
font-weight: 400;
}
.today--mini .row { padding: 8px 4px; font-size: 12px; gap: 8px; }
.row__name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.row__crown { display: inline-flex; flex-shrink: 0; margin-right: 2px; }
.row__crown svg { width: 16px; height: 16px; }
.row__check {
width: 24px;
height: 24px;
border-radius: 50%;
border: 1.5px solid rgba(0, 0, 0, 0.22);
flex-shrink: 0;
background: transparent;
padding: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 160ms ease, border-color 160ms ease, transform 120ms ease;
}
button.row__check:hover { border-color: var(--accent); transform: scale(1.06); }
button.row__check:active { transform: scale(0.94); }
.row--mit button.row__check:hover { border-color: var(--gold); background: rgba(245, 158, 11, 0.12); }
.row--mit button.row__check.row__check--done { background: var(--gold); border-color: var(--gold); }
.today--mini .row__check { width: 14px; height: 14px; }
.row__check--done {
background: var(--accent);
border-color: var(--accent);
position: relative;
}
.row__check--done::after {
content: '';
position: absolute;
top: 7px;
left: 7px;
width: 9px;
height: 5px;
border-left: 2.2px solid white;
border-bottom: 2.2px solid white;
transform: rotate(-45deg);
}
.today--mini .row__check--done::after {
top: 3px;
left: 3px;
width: 6px;
height: 3px;
border-left-width: 1.8px;
border-bottom-width: 1.8px;
}
.row__name--done {
color: var(--text-mute);
text-decoration: line-through;
}
.row--new {
animation: demoRowIn 360ms cubic-bezier(0.18, 1.2, 0.4, 1.05);
}
.row__pen {
width: 14px;
height: 14px;
background: var(--accent);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
flex-shrink: 0;
margin-right: 2px;
}
/* MIT row: white pill with a gold border, slim padding, no
visible separator with the rows above/below */
.row--mit {
background: white;
border: 1.5px solid var(--gold);
border-radius: 12px;
padding: 8px 12px;
margin: 1px -8px;
}
.row--mit + .row,
.row + .row--mit { /* no extra gap between MIT and its neighbours */ }
/* Completed / Clear footer row */
.today__completed {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 4px 12px;
margin-top: 6px;
font-size: 14px;
color: var(--text-soft);
border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.today__completed-num {
color: var(--text);
font-weight: 700;
margin-left: 4px;
}
.today__clear {
background: transparent;
border: 0;
color: var(--accent);
font-size: 14px;
font-weight: 600;
cursor: pointer;
padding: 0;
font-family: inherit;
}
.today__clear:hover { text-decoration: underline; }
/* Completed-task list under the footer — checked rows physically
move here, matching the in-app behaviour (struck-through, with
the indigo-filled check on the right). The MIT pill keeps its
gold border even after it's been ticked off. */
.today__completed-list {
display: flex;
flex-direction: column;
flex-shrink: 0;
max-height: 30%;
overflow: hidden;
}
.today__completed-list .row { opacity: 0.85; }
.today__completed-list .row__name {
text-decoration: line-through;
color: var(--text-mute);
}
.row__pen {
width: 14px;
height: 14px;
background: var(--accent);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.today--mini .row__pen { width: 10px; height: 10px; }
.row__flag {
width: 4px;
height: 18px;
border-radius: 2px;
background: var(--gold);
}
.today--mini .row__flag { height: 12px; }
.row__freq {
font-size: 11px;
font-weight: 700;
color: var(--accent);
background: var(--accent-tint);
border-radius: 7px;
padding: 2px 7px;
line-height: 1.4;
}
.today--mini .row__freq { font-size: 9px; padding: 1px 5px; }
.row--mit {
border: 2px solid var(--gold);
border-radius: 12px;
padding: 13px 14px;
margin-bottom: 8px;
background: var(--gold-tint);
color: var(--text);
}
.today--mini .row--mit { padding: 8px 10px; border-radius: 8px; border-width: 1.5px; }
.row--ipad-bg { font-size: 14px; padding: 11px 6px; }
.row--ipad-bg.row--mit { padding: 11px 12px; }
/* ============================================================
Bottom tab bar (iPhone)
============================================================ */
.today__tabbar {
margin: 12px -18px 0;
padding: 8px 6px max(20px, env(safe-area-inset-bottom));
background: color-mix(in srgb, var(--card) 88%, transparent);
backdrop-filter: blur(20px);
border-top: 1px solid var(--stroke);
display: flex;
justify-content: space-around;
}
.tabbar__item {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
color: var(--text-mute);
font-size: 9px;
font-weight: 600;
flex: 1;
}
.tabbar__item svg { width: 22px; height: 22px; }
.tabbar__item--active { color: var(--accent); }
/* ============================================================
Cadence (3 iPhones side-by-side under Today section)
============================================================ */
.cadence {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 60px;
margin-top: 64px;
}
.cadence__cell {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 24px;
}
.cadence__label {
font-size: 22px;
font-weight: 800;
margin-top: 12px;
}
.cadence__desc {
font-size: 15px;
color: var(--text-soft);
max-width: 280px;
line-height: 1.5;
}
/* ============================================================
Week grid (in cadence Week tile)
============================================================ */
.weekgrid {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 6px;
}
.weekgrid__habit {
display: flex;
flex-direction: column;
gap: 5px;
border-bottom: 1px solid var(--stroke);
padding-bottom: 9px;
position: relative;
}
.weekgrid__name { font-size: 12px; font-weight: 600; color: var(--text); }
.weekgrid__days { display: flex; gap: 4px; }
.weekgrid__day {
flex: 1;
aspect-ratio: 1;
border-radius: 4px;
background: var(--bg-soft);
color: var(--text-mute);
font-size: 8px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.weekgrid__day--done {
background: var(--accent);
color: white;
}
.weekgrid__target {
position: absolute;
right: 0;
top: 0;
font-size: 10px;
font-weight: 700;
color: var(--accent);
}
/* ============================================================
Year view (in cadence Year tile, mini)
============================================================ */
.yearview__label {
font-size: 11px;
font-weight: 700;
color: var(--text-soft);
margin-bottom: 6px;
}
.yearview {
display: grid;
grid-template-rows: repeat(7, 1fr);
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: 1.5px;
margin-bottom: 12px;
}
.yearview .streak-cell {
aspect-ratio: 1;
border-radius: 1px;
background: rgba(99, 102, 241, calc(var(--i, 0) * 0.95));
background-color: var(--bg-soft);
background-color: rgba(99, 102, 241, calc(var(--i, 0) * 0.95));
}
.yearview .streak-cell[style*="--i:0.0"]:not([style*="--i:0.0"]) { background: var(--bg-soft); }
.yearview__stats {
display: flex;
justify-content: space-around;
border-top: 1px solid var(--stroke);
padding-top: 8px;
}
.ys {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
}
.ys__num { font-size: 14px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ys__label { font-size: 8px; font-weight: 600; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.05em; }
/* Big streak card (Streaks section) */
.streakshow { margin-top: 64px; display: flex; justify-content: center; }
.streakcard {
width: 100%;
max-width: 920px;
background: var(--card);
border: 1px solid var(--stroke);
border-radius: 28px;
padding: 40px 48px;
box-shadow: var(--shadow-md);
}
.streakcard__head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 16px;
}
.streakcard__habit { font-size: 20px; font-weight: 700; }
.streakcard__year { font-size: 14px; color: var(--text-mute); font-weight: 600; letter-spacing: 0.04em; }
.streakcard__months {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 4px;
color: var(--text-mute);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
padding: 0 0 6px;
}
.streakcard__grid {
display: grid;
grid-template-rows: repeat(7, 1fr);
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: 3px;
margin-bottom: 24px;
}
.streakcard__grid .streak-cell {
aspect-ratio: 1;
border-radius: 3px;
background: var(--bg-soft);
background-color: rgba(99, 102, 241, calc(var(--i, 0) * 0.95));
}
.streakcard__grid .streak-cell[style*="--i:0.00"] { background-color: var(--bg-soft); }
.streakcard__grid .streak-cell[style*='--i:0"'] { background-color: var(--bg-soft); }
.streakcard__legend {
display: flex;
align-items: center;
gap: 6px;
justify-content: flex-end;
margin: -12px 0 24px;
color: var(--text-mute);
font-size: 11px;
}
.streakcard__legendcell {
width: 11px;
height: 11px;
border-radius: 3px;
background: rgba(99, 102, 241, calc(var(--i, 0) * 0.95));
}
.streakcard__legendcell[style*="--i:0"] { background: var(--bg-soft); }
.streakcard__legendlabel { padding: 0 4px; }
.streakcard__foot {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
border-top: 1px solid var(--stroke);
padding-top: 24px;
}
.ys--lg { align-items: flex-start; gap: 4px; }
.ys--lg .ys__num { font-size: 36px; }
.ys--lg .ys__label { font-size: 11px; }
/* ============================================================
iPad (Pencil section)
============================================================ */
.ipad {
background: #0b0b0f;
border-radius: 32px;
padding: 14px;
box-shadow: var(--shadow-device);
}
.ipad--landscape {
width: 100%;
max-width: 720px;
aspect-ratio: 1.4 / 1;
}
.ipad--portrait {
width: 100%;
max-width: 460px;
aspect-ratio: 1488 / 2266; /* matches real iPad portrait screenshot */
margin: 0 auto;
}
/* Apple Pencil section — iPad canvas + iPhone preview side by side at all
widths. Devices use clamp() so they stay readable on big screens and
only shrink slightly on narrow ones. */
.pencil__pair {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 22px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.ipad--pencilPair {
flex: 0 1 auto;
width: 62%;
max-width: 460px;
padding: 14px;
border-radius: 32px;
aspect-ratio: 1488 / 2266;
}
.ipad--pencilPair .ipad__screen { padding: 0; }
.iphone--pencilPair {
flex: 0 1 auto;
width: 34%;
max-width: 250px;
aspect-ratio: 360 / 770;
height: auto;
padding: 11px;
border-radius: 40px;
}
/* Narrow viewports — stack the two devices vertically. */
@media (max-width: 860px) {
.pencil__pair {
flex-direction: column;
align-items: center;
gap: 28px;
max-width: none;
}
.ipad--pencilPair { width: 92%; max-width: 520px; }
.iphone--pencilPair { width: 60%; max-width: 300px; }
}
/* The pencil-pair screenshot already has its own iOS status bar and
Dynamic Island, so we hide the overlay notch — otherwise a black
rectangle shows up half-way down the upper screen area. */
.iphone--pencilPair .iphone__notch { display: none; }
/* Global: any phone whose screen holds a REAL screenshot or video already
has the device's own status bar + Dynamic Island baked in — the CSS
notch overlay doubles it and looks broken. HTML-mockup phones (no
.iphone__shot/.shotvid) keep their drawn notch. */
.iphone:has(.iphone__shot) .iphone__notch,
.iphone:has(.shotvid) .iphone__notch { display: none; }
.iphone--pencilPair .iphone__screen { border-radius: 30px; }
/* Markdown notes section — iPad alongside the live editor, side-by-side
at all widths */
/* Markdown Notes — four items laid out as a 2-row, 2-column grid:
Row 1: BIG typed iPad (left) + ORIGINAL static editor (right)
Row 2: BIG handwritten iPad (left) + LIVE interactive editor (right)
The iPad column gets ~1.4× the editor column so the screens are
readable on desktop. */
.noteseditor__pair {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr);
grid-template-areas:
"ipadTyped editorStatic"
"ipadHand editorLive";
column-gap: 36px;
row-gap: 40px;
align-items: center;
justify-items: center;
width: 100%;
flex: 1 1 100%; /* override .split__visual flex shrink */
max-width: 1200px;
margin: 0 auto;
}
#notes .split__visual { width: 100%; }
.noteseditor__compare {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
width: 100%;
}
.noteseditor__compare--typed { grid-area: ipadTyped; }
.noteseditor__compare--hand { grid-area: ipadHand; }
.noteseditor__compare--static { grid-area: editorStatic; }
.noteseditor__compare--live { grid-area: editorLive; }
.noteseditor__compareLabel {
font-size: 13px;
font-weight: 600;
color: var(--text-soft);
text-align: center;
max-width: 520px;
line-height: 1.4;
}
.ipad--noteseditorAside {
width: 100%;
max-width: 620px;
margin: 0;
padding: 13px;
border-radius: 30px;
aspect-ratio: 1488 / 2266;
}
.ipad--noteseditorAside .ipad__screen { padding: 0; }
.noteseditor__compare .noteseditor {
width: 100%;
max-width: 520px;
min-width: 320px;
}
@media (max-width: 860px) {
.noteseditor__pair {
grid-template-columns: 1fr;
grid-template-areas:
"ipadTyped"
"editorStatic"
"ipadHand"
"editorLive";
row-gap: 32px;
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
padding: 0 6px;
box-sizing: border-box;
}
.ipad--noteseditorAside { max-width: 100%; }
.noteseditor__compare .noteseditor { max-width: 100%; }
}
.ipad--noteseditorAside .ipad__screen { padding: 0; }
.noteseditor__pair .noteseditor { flex: 0 0 auto; min-width: 0; }
/* Compact the inner padding so the static + live editors don't blow
out the section vertically next to the iPads. */
.noteseditor__compare .noteseditor__title { padding: 16px 18px 8px; font-size: 18px; margin: 0; }
.noteseditor__compare .noteseditor__title[contenteditable="true"] { padding: 16px 18px 8px; margin: 0; }
.noteseditor__compare .noteseditor__body {
padding: 14px 18px 12px;
/* Fixed height so typing into the live editor doesn't reflow the
whole page below it. Content scrolls inside the editor instead. */
height: 240px;
min-height: 240px;
max-height: 240px;
overflow-y: auto;
}
/* Widgets section — two iPhones with widget screenshots side by side */
.widgets__pair {
display: flex;
gap: 28px;
justify-content: center;
align-items: flex-start;
margin-top: 56px;
flex-wrap: wrap;
}
.widgets__grid {
display: grid;
grid-template-columns: repeat(2, max-content);
gap: 48px 56px;
justify-content: center;
margin-top: 56px;
}
@media (max-width: 620px) {
.widgets__grid { grid-template-columns: 1fr; justify-items: center; gap: 40px; }
}
.widgets__row {
display: flex;
gap: 24px;
overflow-x: auto;
justify-content: safe center;
margin-top: 52px;
padding: 8px 12px 26px;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
.widgets__row .widgets__device { flex: 0 0 auto; scroll-snap-align: center; }
.widgets__device {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
max-width: 322px;
}
.iphone--widget {
width: 288px;
height: 601px;
padding: 10px;
border-radius: 44px;
}
/* Widget screenshots already include their own status bar + Dynamic Island,
so the CSS notch overlay doubles up and looks broken — hide it. */
.iphone--widget .iphone__notch { display: none; }
.iphone--widget .iphone__screen { border-radius: 35px; }
.widgets__caption {
text-align: center;
font-size: 14px;
color: var(--text-soft);
line-height: 1.4;
max-width: 276px;
}
/* Hero phone — tap target over the MIT row in the PNG. Invisible
button fires confetti and a quick highlight ripple so the static
screenshot feels alive. */
.hero__tapTarget {
position: absolute;
top: 25.5%;
left: 7%;
right: 8%;
height: 3.5%;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
z-index: 5;
}
.hero__tapTarget:hover ~ .hero__tapPulse,
.hero__tapTarget:focus-visible ~ .hero__tapPulse { animation-play-state: paused; }
.hero__tapPulse {
position: absolute;
top: 25%;
left: 6%;
right: 7%;
height: 4.5%;
border-radius: 8px;
pointer-events: none;
z-index: 4;
}
.hero__tapPulse::before,
.hero__tapPulse::after {
content: '';
position: absolute;
inset: 0;
border-radius: 8px;
border: 2.5px solid var(--accent);
opacity: 0;
}
.hero__tapPulse::before { animation: heroPulse 2.4s ease-out infinite; }
.hero__tapPulse::after { animation: heroPulse 2.4s ease-out infinite 1.2s; }
@keyframes heroPulse {
0% { transform: scale(0.8); opacity: 0; }
25% { transform: scale(1); opacity: 1; }
100% { transform: scale(1.4); opacity: 0; }
}
.hero__tapTarget--hit ~ .hero__tapPulse { display: none; }
.hero__bigArrow {
position: absolute;
top: 12%;
right: -200px;
width: 200px;
color: var(--accent);
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
animation: arrowBob 1.6s ease-in-out infinite;
z-index: 4;
}
.hero__bigArrow svg { width: 150px; height: 100px; transform: scaleX(-1); }
.hero__bigArrow-label {
background: var(--accent);
color: white;
font-size: 15px;
font-weight: 700;
padding: 8px 16px;
border-radius: 999px;
white-space: nowrap;
box-shadow: 0 8px 24px -6px rgba(99, 102, 241, 0.6);
}
.demo-stage { position: relative; }
@media (max-width: 980px) {
.hero__bigArrow { right: auto; left: 50%; top: -70px; transform: translateX(-50%); }
.hero__bigArrow svg { width: 70px; height: 50px; transform: rotate(-35deg) scaleY(-1); }
.hero__bigArrow { flex-direction: row; gap: 8px; width: auto; }
}
/* Animated tap indicator over the widget area — pulsing ring +
hovering tap dot to communicate "this is interactive in iOS". */
.widgets__tap {
position: absolute;
width: 16%;
height: 7.5%;
border-radius: 999px;
pointer-events: none;
background: rgba(99, 102, 241, 0);
z-index: 2;
}
.widgets__tap::before,
.widgets__tap::after {
content: '';
position: absolute;
inset: 0;
border-radius: 999px;
border: 2.5px solid var(--accent);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
opacity: 0;
}
.widgets__tap::before { animation: widgetPulse 2.4s ease-out infinite; }
.widgets__tap::after { animation: widgetPulse 2.4s ease-out infinite 1.2s; }
@keyframes widgetPulse {
0% { transform: scale(0.4); opacity: 0; }
20% { transform: scale(1); opacity: 1; }
100% { transform: scale(2.2); opacity: 0; }
}
/* Lock-screen badge cluster sits just below the centred clock.
Home-screen widget's + button is top-right of the Daily Goals card. */
.widgets__tap--lock { top: 22%; left: 41%; width: 18%; height: 6%; }
.widgets__tap--home { top: 11.5%; right: 7%; width: 9%; height: 3.5%; }
/* Hero PNG overlay — invisible tap targets over each task row. On click
the row gets an animated strike + check on top of the screenshot,
so visitors can "tick off" tasks without rebuilding the screen in HTML. */
.hero__taps {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 5;
}
.hero__taskTap {
position: absolute;
left: 4%;
right: 4%;
height: 4.5%;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
pointer-events: auto;
border-radius: 6px;
transition: background 180ms ease;
}
.hero__taskTap:hover {
background: rgba(99, 102, 241, 0.07);
}
.hero__taskTap--done {
cursor: default;
}
.hero__taskTap--done::before {
/* Strike line across the row */
content: '';
position: absolute;
top: 50%;
left: 0;
right: 17%;
height: 1.5px;
background: rgba(0, 0, 0, 0.55);
transform-origin: left center;
animation: heroTaskStrike 280ms ease-out both;
}
.hero__taskTap--done::after {
/* Filled check that lands where the empty circle was (right edge of
the PNG, vertically centred on the row). */
content: '';
position: absolute;
top: 50%;
right: -1%;
width: 5.5%;
aspect-ratio: 1;
transform: translateY(-50%) scale(1);
background: var(--accent);
border-radius: 50%;
background-image: url("data:image/svg+xml;utf8,");
background-size: 65% 65%;
background-position: center;
background-repeat: no-repeat;
box-shadow: 0 0 0 2px rgba(255,255,255,0.95);
animation: heroTaskCheck 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.hero__taskTap--mit.hero__taskTap--done::after {
background-color: var(--gold);
}
@keyframes heroTaskStrike {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@keyframes heroTaskCheck {
from { transform: translateY(-50%) scale(0); opacity: 0; }
to { transform: translateY(-50%) scale(1); opacity: 1; }
}
/* Cadence Today iPhone — animated swipe-to-complete hint. A green
"Done" action slides in from the right behind a task row, a finger
glyph drags across to reveal it, then it slides back out. The PNG
underneath is untouched (no proportion risk). */
.cadence__cell .iphone__screen { position: relative; overflow: hidden; }
.cadence__slide {
position: absolute;
/* "Ask Matt about crime in London" sits roughly 32%-37% from the
top of the Today screenshot. Position the swipe hint over it. */
top: 31.5%;
bottom: 62%;
left: 6%;
right: 5%;
pointer-events: none;
z-index: 4;
overflow: hidden;
border-radius: 4px;
}
.cadence__slideAction {
position: absolute;
inset: 0;
background: linear-gradient(to left, #16a34a 70%, rgba(22, 163, 74, 0.85));
color: white;
font-size: 9px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
padding: 0 8px;
transform: translateX(100%);
animation: cadenceSlideReveal 4.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
box-shadow: -4px 0 8px -2px rgba(0, 0, 0, 0.15) inset;
}
.cadence__slideAction svg { width: 10px; height: 10px; flex-shrink: 0; }
.cadence__slideHand {
position: absolute;
top: 50%;
margin-top: -10px;
left: 88%;
font-size: 18px;
line-height: 1;
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
opacity: 0;
animation: cadenceSlideHand 4.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes cadenceSlideReveal {
0%, 14% { transform: translateX(100%); }
34%, 70% { transform: translateX(0); }
88%, 100% { transform: translateX(100%); }
}
@keyframes cadenceSlideHand {
0%, 10% { left: 88%; opacity: 0; }
18% { opacity: 1; }
34%, 64% { left: 6%; opacity: 1; }
76% { opacity: 0; }
100% { left: 88%; opacity: 0; }
}
/* In-phone zoom animation — the screenshot itself camera-zooms onto
the widget target, holds there with a tap pulse + hand, then zooms
back out. No separate callout, the action plays inside the device. */
.widgets__animImg {
transform-origin: 50% 25%; /* default; per-widget overrides below */
animation: widgetZoomCycle 6s ease-in-out infinite;
will-change: transform;
}
.iphone--widget-anim--lock .widgets__animImg { transform-origin: 50% 24%; }
.iphone--widget-anim--home .widgets__animImg { transform-origin: 90% 13%; }
@keyframes widgetZoomCycle {
0%, 10% { transform: scale(1); }
28%, 72% { transform: scale(2.6); }
90%, 100% { transform: scale(1); }
}
/* Ken Burns — subtle continuous zoom on the four Home-Screen widget shots
so the static screenshots feel alive (a slow zoom-in reveal, like the
reference clip). Clipped by .iphone__screen's overflow:hidden. Staggered
with negative delays so the four are at different phases, not in unison.
Gentle 1.16x — NOT the 2.6x tap-demo above. Disabled under reduced-motion. */
.iphone__shot--kb {
transform-origin: 50% 32%;
animation: widgetKenBurns 11s ease-in-out infinite alternate;
will-change: transform;
}
.widgets__row .widgets__device:nth-of-type(2) .iphone__shot--kb { animation-delay: -2.75s; }
.widgets__row .widgets__device:nth-of-type(3) .iphone__shot--kb { animation-delay: -5.5s; }
.widgets__row .widgets__device:nth-of-type(4) .iphone__shot--kb { animation-delay: -8.25s; }
@keyframes widgetKenBurns {
from { transform: scale(1); }
to { transform: scale(1.16); }
}
@media (prefers-reduced-motion: reduce) {
.iphone__shot--kb { animation: none; transform: none; }
}
/* Pulse + hand fade in only while the zoom is held, so the tap moment
reads clearly. Position them on the target so they sit centred in
the visible zoomed area. */
.widgets__animPulse {
position: absolute;
width: 22%;
height: 9%;
border-radius: 999px;
pointer-events: none;
opacity: 0;
animation: widgetAnimPulse 6s ease-in-out infinite;
z-index: 3;
}
.widgets__animPulse::before,
.widgets__animPulse::after {
content: '';
position: absolute;
inset: 0;
border-radius: 999px;
border: 2.5px solid var(--accent);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
opacity: 0;
}
.widgets__animPulse::before { animation: widgetZoomTap 2.2s ease-out infinite 1.6s; }
.widgets__animPulse::after { animation: widgetZoomTap 2.2s ease-out infinite 2.7s; }
.widgets__animPulse--lock { top: 22%; left: 41%; width: 18%; height: 6%; }
.widgets__animPulse--home { top: 11.5%; right: 7%; left: auto; width: 9%; height: 3.5%; }
.widgets__animHand {
position: absolute;
font-size: 32px;
line-height: 1;
pointer-events: none;
opacity: 0;
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
z-index: 4;
transform-origin: 20% 0;
animation: widgetAnimHand 6s ease-in-out infinite;
}
.widgets__animHand--lock { top: 21%; left: 56%; }
.widgets__animHand--home { top: 11%; right: 1%; }
@keyframes widgetAnimPulse {
0%, 28% { opacity: 0; }
36%, 64% { opacity: 1; }
72%, 100% { opacity: 0; }
}
@keyframes widgetAnimHand {
0%, 28% { opacity: 0; transform: translate(0, 16px) rotate(-10deg); }
40%, 58% { opacity: 1; transform: translate(0, 0) rotate(-10deg); }
46% { transform: translate(0, 8px) rotate(-10deg) scale(0.94); }
72%, 100% { opacity: 0; transform: translate(0, 16px) rotate(-10deg); }
}
/* Old static zoom callout (kept selectors for safety if any markup
still references them — no effect when not rendered). */
.widgets__zoom {
margin: 12px 0 6px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.widgets__zoomFrame {
width: 240px;
height: 240px;
border-radius: 28px;
overflow: hidden;
position: relative;
background-repeat: no-repeat;
background-size: 2070px 4500px; /* 3x of 690x1500 source */
box-shadow: 0 14px 32px -10px rgba(0, 0, 0, 0.35);
border: 1px solid rgba(0, 0, 0, 0.08);
}
/* Lock-screen badge cluster sits roughly at (345, 375) in the 690x1500
PNG. At 3x that's (1035, 1125); centring a 240x240 frame on that
means offsetting -915,-1005. */
.widgets__zoomFrame--lock {
background-image: url('screenshots/iphone-widget-lockscreen.png');
background-position: -915px -1005px;
}
/* Home-screen "+" button on the Daily Goals widget header sits near
(615, 200) in the source PNG. At 3x = (1845, 600); centred → -1725,-480. */
.widgets__zoomFrame--home {
background-image: url('screenshots/iphone-widget-homescreen.png');
background-position: -1725px -480px;
}
.widgets__zoomCaption {
font-size: 13px;
font-weight: 700;
color: var(--accent);
text-align: center;
letter-spacing: 0.01em;
}
/* Pulsing ring centred on the tap target — same idiom as the in-phone
pulse but bigger and slower so it reads as a deliberate demonstration. */
.widgets__zoomPulse {
position: absolute;
top: 50%;
left: 50%;
width: 64px;
height: 64px;
margin: -32px 0 0 -32px;
border-radius: 50%;
pointer-events: none;
}
.widgets__zoomPulse::before,
.widgets__zoomPulse::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
border: 3px solid var(--accent);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.65);
opacity: 0;
}
.widgets__zoomPulse::before { animation: widgetZoomTap 2.6s ease-out infinite; }
.widgets__zoomPulse::after { animation: widgetZoomTap 2.6s ease-out infinite 1.3s; }
@keyframes widgetZoomTap {
0% { transform: scale(0.4); opacity: 0; }
20% { transform: scale(1); opacity: 1; }
100% { transform: scale(2.4); opacity: 0; }
}
/* Tapping hand that drops onto the target every cycle, then lifts off. */
.widgets__zoomTapHand {
position: absolute;
top: 50%;
left: 50%;
margin: 6px 0 0 14px;
font-size: 36px;
line-height: 1;
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
pointer-events: none;
transform-origin: 20% 0%;
animation: widgetZoomHand 2.6s ease-in-out infinite;
}
@keyframes widgetZoomHand {
0%, 100% { transform: translate(0, 12px) rotate(-8deg); opacity: 0.85; }
35% { transform: translate(0, -6px) rotate(-8deg); opacity: 1; }
50% { transform: translate(0, 6px) rotate(-8deg) scale(0.95); opacity: 1; }
65% { transform: translate(0, -2px) rotate(-8deg) scale(1.02); opacity: 1; }
}
/* Big external arrow + label — sits outside the iPhone frame and
curves into the pulse on the target widget. */
.widgets__device { position: relative; }
.widgets__bigArrow {
position: absolute;
top: 4%;
width: 160px;
color: var(--accent);
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
animation: arrowBob 1.6s ease-in-out infinite;
z-index: 4;
}
.widgets__bigArrow--lock { left: -130px; }
.widgets__bigArrow--home { right: -130px; }
.widgets__bigArrow svg {
width: 120px;
height: 80px;
}
.widgets__bigArrow-label {
background: var(--accent);
color: white;
font-size: 13px;
font-weight: 700;
padding: 6px 12px;
border-radius: 999px;
white-space: nowrap;
box-shadow: 0 6px 18px -4px rgba(99, 102, 241, 0.55);
margin-top: -4px;
}
@keyframes arrowBob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* At narrow viewports, the big arrows wouldn't fit beside the
device — flip them to sit ABOVE the device instead. */
@media (max-width: 760px) {
.widgets__bigArrow {
position: static;
margin: 0 auto 8px;
width: auto;
flex-direction: row;
gap: 10px;
}
.widgets__bigArrow svg {
width: 70px;
height: 50px;
transform: rotate(35deg);
}
.widgets__bigArrow--home svg { transform: rotate(-35deg); }
.widgets__device { display: flex; flex-direction: column; align-items: center; }
}
/* Apple Watch — animated shopping list (Sardines + Meat tick off then
reset on an infinite loop, mirroring the in-watch behaviour). */
.watch.watch--shop {
width: 200px;
height: 240px;
flex-shrink: 0;
}
.watch--shop .watch__screen {
background: #0b0b0f;
border-radius: 42px;
padding: 18px 10px 10px;
overflow: hidden;
color: white;
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
}
.watch__shopHead {
display: flex;
align-items: center;
gap: 6px;
padding: 0 4px;
flex-shrink: 0;
}
.watch__shopHead-menu,
.watch__shopHead-add {
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
flex-shrink: 0;
}
.watch__shopHead-menu svg { width: 11px; height: 11px; }
.watch__shopHead-titleCol {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
line-height: 1.1;
}
.watch__shopHead-time {
font-size: 10px;
font-weight: 600;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 2px;
}
.watch__shopHead-title {
font-size: 13px;
font-weight: 700;
line-height: 1.1;
}
.watch__shopList {
list-style: none;
margin: 4px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.watch__shopRow {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.04);
font-size: 13px;
font-weight: 600;
color: white;
}
.watch__shopCheck {
width: 14px;
height: 14px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.5);
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
}
.watch__shopCheck::after {
content: '';
width: 5px;
height: 3px;
border-left: 1.4px solid #0b0b0f;
border-bottom: 1.4px solid #0b0b0f;
transform: rotate(-45deg) translate(0.5px, -0.5px) scale(0);
transition: transform 180ms ease;
}
.watch__shopUndo {
margin-top: auto;
background: rgba(255, 255, 255, 0.16);
color: white;
text-align: center;
padding: 6px 0;
border-radius: 14px;
font-size: 11px;
font-weight: 600;
opacity: 0;
transition: opacity 320ms ease;
}
/* Animation loop (9s): watch face → tap the Tally complication →
app zooms in → tick Sardines → tick Meat → show Undo → back to face.
Face phase 0–22%, app content runs 29–91%. Meat gets its own
keyframes (not a delay) so every element shares one 9s timeline. */
@keyframes watchShopTick {
0%, 36% { background: rgba(255, 255, 255, 0); }
40%, 100% { background: var(--accent); border-color: var(--accent); }
}
@keyframes watchShopTickInner {
0%, 36% { transform: rotate(-45deg) translate(0.5px, -0.5px) scale(0); }
40%, 100% { transform: rotate(-45deg) translate(0.5px, -0.5px) scale(1); }
}
@keyframes watchShopStrike {
0%, 40% { text-decoration: none; color: white; opacity: 1; }
44%, 100% { text-decoration: line-through; color: rgba(255,255,255,0.55); opacity: 0.7; }
}
@keyframes watchShopTickMeat {
0%, 54% { background: rgba(255, 255, 255, 0); }
58%, 100% { background: var(--accent); border-color: var(--accent); }
}
@keyframes watchShopTickInnerMeat {
0%, 54% { transform: rotate(-45deg) translate(0.5px, -0.5px) scale(0); }
58%, 100% { transform: rotate(-45deg) translate(0.5px, -0.5px) scale(1); }
}
@keyframes watchShopStrikeMeat {
0%, 58% { text-decoration: none; color: white; opacity: 1; }
62%, 100% { text-decoration: line-through; color: rgba(255,255,255,0.55); opacity: 0.7; }
}
@keyframes watchShopUndo {
0%, 42% { opacity: 0; transform: translateY(8px); }
48%, 86% { opacity: 1; transform: translateY(0); }
92%, 100% { opacity: 0; transform: translateY(8px); }
}
.watch--shop .watch__shopRow[data-row="sardines"] .watch__shopCheck { animation: watchShopTick 9s ease-in-out infinite; }
.watch--shop .watch__shopRow[data-row="sardines"] .watch__shopCheck::after { animation: watchShopTickInner 9s ease-in-out infinite; }
.watch--shop .watch__shopRow[data-row="sardines"] .watch__shopName { animation: watchShopStrike 9s ease-in-out infinite; }
.watch--shop .watch__shopRow[data-row="meat"] .watch__shopCheck { animation: watchShopTickMeat 9s ease-in-out infinite; }
.watch--shop .watch__shopRow[data-row="meat"] .watch__shopCheck::after { animation: watchShopTickInnerMeat 9s ease-in-out infinite; }
.watch--shop .watch__shopRow[data-row="meat"] .watch__shopName { animation: watchShopStrikeMeat 9s ease-in-out infinite; }
.watch--shop .watch__shopUndo { animation: watchShopUndo 9s ease-in-out infinite; }
.watch--shop .watch__app { animation: watchAppCycleShop 9s ease-in-out infinite; }
.watch--shop .watch__face { animation: watchFaceCycleShop 9s ease-in-out infinite; }
.watch--shop .watch__faceTap { animation: watchCompRippleShop 9s ease-out infinite; }
/* Loop ends on a plain crossfade back to the face (scale stays 1 while
hidden) — a reverse zoom there reads as the clip playing backwards. */
@keyframes watchFaceCycleShop {
0%, 22% { opacity: 1; transform: scale(1); }
28% { opacity: 0; transform: scale(1.6); }
30%, 92% { opacity: 0; transform: scale(1); }
98%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes watchAppCycleShop {
0%, 22% { opacity: 0; transform: scale(0.82); }
29%, 91% { opacity: 1; transform: scale(1); }
97% { opacity: 0; transform: scale(1); }
100% { opacity: 0; transform: scale(0.82); }
}
@keyframes watchCompRippleShop {
0%, 15% { opacity: 0; transform: scale(0.7); }
18% { opacity: 0.9; transform: scale(1); }
24%, 100% { opacity: 0; transform: scale(1.8); }
}
/* Apple Watch — schedule mock: face → tap the bottom-right Tally
complication → the day timeline opens → slow crown-scroll through it.
13s loop, deliberately desynced from the 9s shop cycle so the two
face intros don't tap in unison. */
.watch.watch--sched { width: 200px; height: 240px; flex-shrink: 0; }
.lineup .watch.watch--sched { width: 162px; height: 196px; }
.watch--sched .watch__screen {
background: #0b0b0f;
border-radius: 42px;
padding: 14px 12px 10px;
overflow: hidden;
color: white;
position: relative;
}
.watch--sched .watch__app {
display: flex;
flex-direction: column;
height: 100%;
position: relative;
}
.watch__schedHead { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px 6px; }
.watch__schedTitle { font-size: 11.5px; font-weight: 700; color: #a5b4fc; }
.watch__schedTime { font-size: 10px; font-weight: 600; color: rgba(255,255,255,.6); }
.watch__schedMask { flex: 1; overflow: hidden; position: relative; }
.watch__schedList { animation: watchSchedScroll 13s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.watch__schedRow { display: flex; align-items: center; gap: 6px; padding: 2.5px 0; }
.watch__schedHour { width: 30px; font-size: 8.5px; font-weight: 600; color: rgba(255,255,255,.45); text-align: right; flex-shrink: 0; }
.watch__schedGap { flex: 1; height: 1px; background: rgba(255,255,255,.08); }
.watch__schedTask {
flex: 1;
background: rgba(255,255,255,.1);
border-radius: 8px;
padding: 4px 7px;
font-size: 9.5px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.watch__schedRow--now .watch__schedTask {
background: rgba(99,102,241,.3);
box-shadow: inset 2px 0 0 #818cf8;
}
.watch__schedBar {
position: absolute;
top: 22px;
bottom: 2px;
right: -8px;
width: 3px;
background: rgba(255,255,255,.08);
border-radius: 2px;
}
.watch__schedDot {
position: absolute;
left: 0;
width: 100%;
height: 30px;
background: var(--accent);
border-radius: 2px;
animation: watchSchedScrollbar 13s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* Continuous crown-scroll: down through the day, pause, back up. */
@keyframes watchSchedScroll {
0%, 10% { transform: translateY(0); }
52%, 62% { transform: translateY(-118px); }
94%, 100% { transform: translateY(0); }
}
@keyframes watchSchedScrollbar {
0%, 10% { top: 0; }
52%, 62% { top: calc(100% - 30px); }
94%, 100% { top: 0; }
}
/* Apple Watch — auto-scrolling note preview ("notes on your wrist") */
.watch.watch--note {
width: 200px;
height: 240px;
flex-shrink: 0;
align-self: center;
}
.watch.watch--note .watch__screen {
background: #0b0b0f;
border-radius: 42px;
padding: 26px 18px 16px;
overflow: hidden;
color: white;
display: flex;
flex-direction: column;
position: relative;
}
.watch__noteHeader {
font-size: 13px;
font-weight: 700;
color: var(--accent);
text-align: center;
padding-bottom: 6px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 6px;
flex-shrink: 0;
}
.watch__noteScrollMask {
flex: 1;
overflow: hidden;
position: relative;
}
.watch__noteScrollMask::before,
.watch__noteScrollMask::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 16px;
z-index: 2;
pointer-events: none;
}
.watch__noteScrollMask::before { top: 0; background: linear-gradient(to bottom, #0b0b0f, transparent); }
.watch__noteScrollMask::after { bottom: 0; background: linear-gradient(to top, #0b0b0f, transparent); }
.watch__noteScrollInner {
font-size: 13px;
line-height: 1.45;
color: rgba(255, 255, 255, 0.96);
animation: watchNoteScroll 11s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.watch__noteScrollInner p { margin: 0 0 6px; }
@keyframes watchNoteScroll {
0%, 8% { transform: translateY(0); }
50%, 58% { transform: translateY(-130px); }
92%, 100% { transform: translateY(0); }
}
.watch__noteScrollBar {
position: absolute;
/* Offsets compensate for the .watch__app wrapper sitting inside the
screen's 26/18/16px padding — visual position is unchanged. */
top: 6px;
bottom: 2px;
right: -12px;
width: 3px;
background: rgba(255, 255, 255, 0.08);
border-radius: 2px;
}
.watch__noteScrollDot {
position: absolute;
left: 0;
width: 100%;
height: 32px;
background: var(--accent);
border-radius: 2px;
animation: watchNoteScrollbar 11s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes watchNoteScrollbar {
0%, 8% { top: 0; }
50%, 58% { top: calc(100% - 22px); }
92%, 100% { top: 0; }
}
/* ---- Watch face intro (shared by both watch mocks) ----
An opaque face layer (a real screenshot of the user's watch face,
Tally complications showing) sits over the app UI; the loop shows
the face, taps the Tally complication, then "opens" the app
watchOS-style. Zoom origin dives into the tapped complication. */
.watch__face {
position: absolute;
inset: 0;
z-index: 5;
background: #000;
pointer-events: none;
transform-origin: 77% 15%;
}
.watch__faceShot {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.watch__faceTap {
/* tap ripple ring over the top-right Tally complication
(~77%/15% of the face screenshot) */
position: absolute;
left: 66.5%;
top: 6.5%;
width: 21%;
height: 17%;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.9);
opacity: 0;
transform: scale(0.7);
}
.watch--shop .watch__app {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
min-height: 0;
}
.watch--note .watch__app {
display: flex;
flex-direction: column;
height: 100%;
position: relative;
}
/* Hold every watch-mock animation at 0s (the watch face) until the
section scrolls into view — otherwise visitors arrive mid-loop.
JS adds .watches-live to #watch via IntersectionObserver. */
#watch:not(.watches-live) .watch *,
#watch:not(.watches-live) .watch *::before,
#watch:not(.watches-live) .watch *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
.watch__face, .watch__faceTap { animation: none !important; opacity: 0 !important; }
.watch__app { animation: none !important; }
}
/* Editable notes title — small dotted underline shows it's clickable */
.noteseditor__title[contenteditable="true"] {
cursor: text;
border-radius: 4px;
padding: 2px 4px;
margin: -2px -4px 0;
outline: none;
transition: background 160ms ease;
}
.noteseditor__title[contenteditable="true"]:hover {
background: rgba(99, 102, 241, 0.06);
}
.noteseditor__title[contenteditable="true"]:focus {
background: rgba(99, 102, 241, 0.1);
}
.noteseditor { position: relative; }
/* Pencil cue next to the editable title — only shown until first focus */
.noteseditor__title[contenteditable="true"]::after {
content: ' ✎';
color: var(--accent);
font-size: 0.7em;
font-weight: 600;
opacity: 0.7;
margin-left: 6px;
animation: arrowBob 1.6s ease-in-out infinite;
display: inline-block;
}
.noteseditor__title[contenteditable="true"]:focus::after,
.noteseditor:has(.noteseditor__title:focus) .noteseditor__title::after { display: none; }
/* Bouncing arrow on existing demo-hint labels (Focus Mode) */
.demo-hint--bouncy { font-weight: 700; color: var(--accent); }
.demo-hint--bouncy .demo-hint-arrow {
display: inline-block;
margin-right: 6px;
animation: arrowBob 1.2s ease-in-out infinite;
}
/* iPad landscape used in the device-lineup section. Sized big enough
that the task list text on the screen actually reads. */
.ipad--lineup-landscape {
width: min(640px, 100%);
aspect-ratio: 1500 / 985; /* matches real iPad landscape screenshot */
flex-shrink: 0;
}
.ipad--lineup-portrait {
width: min(300px, 90vw);
aspect-ratio: 1488 / 2266; /* matches real iPad portrait screenshot */
flex-shrink: 0;
}
.ipad--lineup-portrait .ipad__screen { padding: 0; }
.macvid--lineup {
width: min(360px, 92vw);
aspect-ratio: 820 / 1080;
flex-shrink: 0;
border-radius: 14px;
overflow: hidden;
box-shadow: var(--shadow-device);
background: #d9dde6;
}
.macvid__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lineup__break { flex-basis: 100%; height: 0; }
.lineup__col {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 30px 34px;
align-items: center;
justify-items: center;
transform: scale(0.62);
transform-origin: center;
margin: -197px -158px;
}
.ipad__screen {
width: 100%;
height: 100%;
background: var(--card);
border-radius: 22px;
overflow: hidden;
position: relative;
padding: 18px;
display: flex;
flex-direction: column;
}
.ipad--portrait .ipad__screen { padding: 0; }
.ipad__shot {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
.ipad__pageBg {
flex: 1;
overflow: hidden;
opacity: 0.45;
}
.floatingcard {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -56%);
width: 78%;
background: var(--card);
border-radius: 18px;
box-shadow: 0 30px 60px -20px rgba(15, 23, 42, 0.45),
0 0 0 1px var(--stroke);
overflow: hidden;
}
.floatingcard__bar {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
border-bottom: 1px solid var(--stroke);
}
.fc__close { color: var(--accent); font-weight: 600; font-size: 14px; }
.fc__title { flex: 1; text-align: center; font-weight: 700; font-size: 15px; color: var(--text); }
.fc__pencilbtn {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--accent);
-webkit-mask: url("data:image/svg+xml;utf8,");
mask: url("data:image/svg+xml;utf8,");
}
.fc__pencilbtn--active {
background: var(--accent);
box-shadow: 0 0 0 4px var(--accent-tint);
}
.floatingcard__canvas {
background-image:
repeating-linear-gradient(180deg, transparent 0 27px, rgba(99, 102, 241, 0.12) 27px 28px);
padding: 14px;
}
.floatingcard__canvas svg { width: 100%; height: auto; display: block; }
.toolpicker {
position: absolute;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.35);
border: 1px solid var(--stroke);
}
.tool {
width: 26px;
height: 38px;
border-radius: 4px;
background: linear-gradient(180deg, #555 0%, #2c2c2c 100%);
flex-shrink: 0;
position: relative;
}
.tool::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 8px;
border-radius: 4px 4px 0 0;
background: var(--text);
}
.tool--pen::before { background: linear-gradient(180deg, var(--accent) 50%, var(--text) 50%); }
.tool--pencil::before { background: #c4a47c; clip-path: polygon(50% 0, 100% 100%, 0 100%); height: 12px; }
.tool--marker::before { background: var(--gold); height: 12px; border-radius: 2px 2px 0 0; }
.tool--eraser {
background: linear-gradient(180deg, #f5d6c0 0%, #f0c4a8 100%);
border: 1px solid rgba(0,0,0,0.1);
}
.tool--eraser::before { display: none; }
.tool--lasso {
background: var(--card);
border: 2px dashed var(--text-soft);
height: 32px;
border-radius: 50%;
width: 32px;
}
.tool--lasso::before { display: none; }
.tool--ruler {
background: linear-gradient(180deg, #f7e0a3 0%, #e9c976 100%);
height: 16px;
width: 50px;
border-radius: 3px;
background-image: repeating-linear-gradient(90deg, rgba(0,0,0,0.4) 0 1px, transparent 1px 6px);
}
.tool--ruler::before { display: none; }
.tool--active {
transform: translateY(-6px);
}
.tool-divider {
width: 1px;
height: 28px;
background: var(--stroke-strong);
margin: 0 4px;
}
.tool--swatch {
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid white;
box-shadow: 0 0 0 1px var(--stroke-strong);
}
.tool--swatch::before { display: none; }
.tool--swatch--ink { background: #1d1d1f; }
.tool--swatch--accent { background: var(--accent); }
.tool--swatch--green { background: var(--green); }
.tool--swatch--gold { background: var(--gold); }
.tool--swatch--red { background: var(--red); }
/* ============================================================
Focus Mode (iPhone medium) — rebuilt to match the in-app UI:
small date + "Focus Mode" title + thin progress bar at the top,
a task list with the MIT highlighted in gold, and a gold-
bordered Pomodoro card overlaying the bottom of the screen.
============================================================ */
.fm {
height: 100%;
background: #f5f5f7;
color: var(--text);
padding: 56px 18px 0;
display: flex;
flex-direction: column;
text-align: left;
overflow: hidden;
position: relative;
}
.fm__header { padding: 0 4px 12px; flex-shrink: 0; }
/* Date now sits BELOW the title, uppercase + tracked + grey — matching the
app's redesigned Focus header ("FOCUS" / "WED, JUN 17"). */
.fm__date {
font-size: 11px;
color: var(--text-soft);
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 600;
margin: 3px 0 0;
}
.fm__titleRow {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0;
}
/* "FOCUS" — sharp SF Pro, light + tracked + uppercase, like the app's TODAY
lettermark (the app titles are SF Pro .light, not rounded). */
.fm__title {
font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-size: 17px;
font-weight: 300;
letter-spacing: 0.16em;
text-transform: uppercase;
margin: 0;
color: var(--text);
}
.fm__close {
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.06);
color: var(--text-soft);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.fm__close svg { width: 14px; height: 14px; }
.fm__progressLabel {
font-size: 12px;
color: var(--text-soft);
margin: 0 0 6px;
font-weight: 500;
}
.fm__progress {
width: 100%;
height: 4px;
background: rgba(0, 0, 0, 0.08);
border-radius: 2px;
overflow: hidden;
}
.fm__progressFill {
width: 8%;
height: 100%;
background: var(--accent);
border-radius: 2px;
}
/* Task list */
.fm__tasks {
list-style: none;
margin: 0;
padding: 0;
flex: 1;
overflow: hidden;
min-height: 0;
}
/* When the Completed section is visible, the active list keeps its
natural height; rows that would overlap the Completed section are
masked from underneath by Completed's solid background + a fade
above its top edge (see .fm__completed::before). */
.fm__task {
display: flex;
align-items: center;
gap: 12px;
padding: 7px 6px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
font-size: 14px;
color: var(--text);
font-weight: 500;
transition: opacity 350ms ease, transform 350ms ease, max-height 350ms ease, padding 350ms ease;
max-height: 80px;
}
.fm__task:last-child { border-bottom: 0; }
.fm__task:has(+ .fm__task--mit) { border-bottom: 0; }
.fm__check {
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid rgba(0, 0, 0, 0.3);
flex-shrink: 0;
cursor: pointer;
transition: background 200ms ease, border-color 200ms ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
.fm__check::after {
content: '';
width: 8px;
height: 4px;
border-left: 1.8px solid white;
border-bottom: 1.8px solid white;
transform: rotate(-45deg) translate(1px, -1px);
opacity: 0;
transition: opacity 200ms ease;
}
.fm__task--done .fm__check { background: var(--accent); border-color: var(--accent); }
.fm__task--done .fm__check::after { opacity: 1; }
.fm__task--done .fm__name {
text-decoration: line-through;
color: var(--text-mute, var(--text-soft));
}
/* MIT row in Focus Mode — gold border + crown, no fill. Matches the
iPhone Today reference. The row stays the same width as its
neighbours so the active list reads as a uniform column. */
.fm__task--mit {
border: 1.5px solid var(--gold);
border-radius: 10px;
padding: 8px 6px;
margin: 2px 0;
background: transparent;
}
/* Once the MIT is ticked off it moves to the Completed list — drop the gold
"active MIT" box there (the crown stays, the highlight shouldn't). */
.fm__completedList .fm__task--mit {
border: 0;
border-radius: 0;
margin: 0;
padding: 6px 6px;
}
.fm__task:has(+ .fm__task--mit) { border-bottom: 0; }
.fm__crown {
display: inline-flex;
flex-shrink: 0;
}
.fm__crown svg { width: 16px; height: 16px; }
.fm__name {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Completed section — pinned above the Pomodoro card so it stays
visible no matter how full the active list is. Mirrors the Today
view in the iOS app: "Completed N" divider with struck-through
tasks underneath. */
.fm__completed {
position: absolute;
left: 18px;
right: 18px;
/* Sits clear ABOVE the Pomodoro card (which is ~150px tall from bottom:40),
so completed rows aren't hidden behind the timer (user-reported overlap). */
bottom: 210px;
background: var(--card, white);
max-height: 96px;
overflow: hidden;
z-index: 1;
}
/* Solid white fade above the Completed section — covers any active
row that peeks above the section's top edge so we get a clean
visual handoff between active and completed. */
.fm__completed::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: 28px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--card, white));
pointer-events: none;
}
.fm__completed[hidden] { display: none; }
.fm__completedHeader {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 6px 6px;
border-top: 1px solid rgba(0, 0, 0, 0.08);
font-size: 12px;
font-weight: 600;
color: var(--text-soft);
}
.fm__completedCount {
color: var(--text);
margin-left: 4px;
}
.fm__completedClear {
color: var(--accent);
font-weight: 600;
}
.fm__completedList {
list-style: none;
margin: 0;
padding: 0;
-webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}
.fm__completedList .fm__task {
border-bottom: 0;
padding: 6px 6px;
}
/* Bottom Pomodoro card */
.fm__pomo {
position: absolute;
/* Lifted up off the screen's rounded bottom corners (~44px radius) so the
timer card sits clear of the curve instead of crowding it (user: "doesn't
fit well within the corners — move it up a little"). */
bottom: 40px;
left: 12px;
right: 12px;
background: white;
border: 1.6px solid var(--gold);
border-radius: 14px;
padding: 12px 14px 10px;
box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.18), 0 0 0 4px rgba(255, 255, 255, 0.6);
}
.fm__pomoHead {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.fm__pomoCrown { display: inline-flex; flex-shrink: 0; }
.fm__pomoCrown svg { width: 16px; height: 16px; }
.fm__pomoTask {
flex: 1;
font-size: 14px;
font-weight: 600;
color: var(--text);
}
.fm__pomoClose {
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.06);
color: var(--text-soft);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.fm__pomoClose svg { width: 12px; height: 12px; }
.fm__pomoTime {
text-align: center;
font-size: 42px;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
color: var(--text);
line-height: 1.05;
padding: 4px 0 2px;
cursor: pointer;
user-select: none;
}
.fm__pomoSep { margin: 0 1px; }
.fm__pomoBar {
height: 4px;
background: rgba(0, 0, 0, 0.08);
border-radius: 2px;
overflow: hidden;
margin: 4px 0 10px;
}
.fm__pomoBarFill {
width: 0;
height: 100%;
background: var(--gold);
transition: width 240ms linear;
}
.fm__pomoControls {
display: flex;
align-items: center;
gap: 8px;
}
.fm__pomoIconBtn {
width: 32px;
height: 32px;
border-radius: 50%;
border: 0;
background: transparent;
padding: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--accent);
flex-shrink: 0;
transition: background 140ms ease;
}
.fm__pomoIconBtn:hover { background: rgba(99, 102, 241, 0.08); }
.fm__pomoIconBtn--reset { color: rgba(0, 0, 0, 0.4); }
.fm__pomoIconBtn--reset:hover { background: rgba(0, 0, 0, 0.04); }
.fm__pomoIconBtn svg { width: 18px; height: 18px; }
/* Swap play / pause icons based on running state */
.fm__pomoIconBtn .fm__pauseIcon { display: none; }
.fm__pomoIconBtn--running .fm__playIcon { display: none; }
.fm__pomoIconBtn--running .fm__pauseIcon { display: inline-block; }
/* Six session crowns — gray until each Pomodoro is complete */
.fm__pomoSessions {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.fm__pomoSession {
display: inline-flex;
color: rgba(0, 0, 0, 0.18);
transition: color 240ms ease;
}
.fm__pomoSession svg { width: 16px; height: 16px; }
.fm__pomoSession--done { color: var(--gold); }
/* Wrapper that stacks an interactive device + its "Live demo" label */
.demo-stage {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
/* Small "Live demo" label under interactive widgets */
.demo-hint {
margin-top: 18px;
text-align: center;
font-size: 14px;
font-weight: 700;
color: var(--accent);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.demo-hint::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
margin-right: 8px;
animation: demoPulse 1.6s ease-in-out infinite;
transform: translateY(1px);
}
@keyframes demoPulse {
0%, 100% { opacity: 1; transform: translateY(1px) scale(1); }
50% { opacity: 0.4; transform: translateY(1px) scale(0.85); }
}
/* ============================================================
Interactive macOS menu-bar dropdown (Quick Capture demo)
The whole widget shows a fake macOS bar with the Tally icon
highlighted, a pointer wedge underneath it, and a popover the
user can actually use (add tasks, check rows off, MIT confetti).
============================================================ */
/* Interactive menu-bar demo, kept alongside the real recording */
.macInteractive {
margin-top: 0;
padding: 0;
text-align: center;
}
.macInteractive__stage {
min-width: 0;
}
/* Instruction caption sits centred above the window. */
.macInteractive__label {
font-size: 15px;
line-height: 1.5;
color: var(--accent);
font-weight: 700;
text-align: center;
margin: 0 0 20px;
}
/* Real macOS menu-bar quick-capture recording */
.macDemo {
width: 100%;
max-width: 420px;
margin: 0 auto;
border-radius: 20px;
overflow: hidden;
box-shadow: var(--shadow-md);
background: #0b0b0f;
}
.macDemo__video {
display: block;
width: 100%;
height: auto;
}
.demoMenubar {
width: 100%;
max-width: 640px;
margin: 0 auto;
border-radius: 12px;
overflow: visible;
position: relative;
background: linear-gradient(180deg, #d9dde6 0%, #c8ccd6 100%);
padding: 0 0 26px;
box-shadow: var(--shadow-md);
}
/* Fake macOS menu bar */
.demoMenubar__bar {
display: flex;
align-items: center;
/* real macOS puts ~18px between menu titles */
gap: 17px;
height: 26px;
padding: 0 14px;
background: rgba(20, 20, 24, 0.92);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 12px 12px 0 0;
color: rgba(255, 255, 255, 0.85);
font-size: 12.5px;
font-weight: 500;
position: relative;
z-index: 2;
}
.demoMenubar__apple { display: inline-flex; color: white; }
.demoMenubar__apple svg { width: 14px; height: 14px; }
.demoMenubar__menu { color: rgba(255, 255, 255, 0.88); }
.demoMenubar__menu--app { font-weight: 700; }
.demoMenubar__spacer { flex: 1; }
.demoMenubar__icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.7);
}
.demoMenubar__icon svg { width: 16px; height: 16px; }
.demoMenubar__icon--active {
position: relative;
}
.demoMenubar__icon--active::after {
content: '';
position: absolute;
inset: -3px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.12);
z-index: -1;
}
.demoMenubar__time { color: rgba(255, 255, 255, 0.9); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Pointer wedge under the Tally bar icon */
.demoMenubar__pointer {
width: 14px;
height: 14px;
background: var(--card);
border-left: 1px solid var(--stroke);
border-top: 1px solid var(--stroke);
transform: rotate(45deg);
position: absolute;
top: 19px;
right: 159px;
z-index: 3;
}
/* The popover the user actually interacts with */
/* Two even lines instead of a lone "tick" on the last line. */
.demoMenubar__hint span { text-wrap: balance; }
@media (max-width: 640px) {
/* The menu bar's intrinsic width (~440px) was the widest thing on the
page on phones, forcing iOS Safari to zoom out after load. Hide the
deeper menu titles so the bar fits a 375px screen. */
span.demoMenubar__menu:nth-of-type(n+5) { display: none; }
}
@media (max-width: 820px) {
/* Any stray horizontal overflow makes iOS Safari zoom the page out
after load. clip (not hidden) so body doesn't become a scroll
container; the widgets carousel scrolls via its own overflow-x. */
body { overflow-x: clip; }
}
.demoMenubar__popover {
width: calc(100% - 56px);
max-width: 500px;
margin: 18px auto 0;
background: var(--card);
border: 1px solid var(--stroke);
border-radius: 16px;
box-shadow: var(--shadow-md);
overflow: hidden;
position: relative;
z-index: 1;
}
.demoMenubar__head {
display: flex;
align-items: center;
gap: 10px;
padding: 18px 22px 12px;
}
.demoMenubar__h-title { flex: 1; text-align: left; font-weight: 300; font-size: 22px; color: var(--text); letter-spacing: 0.18em; text-transform: uppercase; }
.demoMenubar__h-count {
background: var(--bg-soft);
color: var(--text-soft);
border-radius: 12px;
padding: 3px 11px;
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.demoMenubar__h-list { color: var(--text-soft); display: inline-flex; width: 22px; justify-content: center; }
.demoMenubar__h-list svg { width: 18px; height: 18px; }
/* Rows */
.demoMenubar__rows {
list-style: none;
margin: 0;
padding: 0 22px;
max-height: 320px;
overflow-y: auto;
}
.demoMenubar__row {
display: flex;
align-items: center;
gap: 12px;
/* zero side padding: task names align with the "Today" title and the
checks share a centerline with the + button and hamburger (all 22px
boxes flush to the card's 22px padding) */
padding: 11px 0;
border-bottom: 1px solid var(--stroke);
font-size: 15px;
color: var(--text);
font-weight: 500;
text-align: left;
transition: opacity 220ms ease, transform 220ms ease;
}
.demoMenubar__row:last-child { border-bottom: 0; }
.demoMenubar__check {
width: 22px;
height: 22px;
border-radius: 50%;
border: 1.6px solid var(--text-mute);
background: transparent;
padding: 0;
flex-shrink: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 160ms ease, border-color 160ms ease;
position: relative;
order: 3;
}
.demoMenubar__check:hover { border-color: var(--accent); }
.demoMenubar__check::after {
content: '';
width: 9px;
height: 5px;
border-left: 2px solid white;
border-bottom: 2px solid white;
transform: rotate(-45deg) translate(1px, -1px) scale(0);
transform-origin: center;
transition: transform 180ms cubic-bezier(0.18, 1.3, 0.4, 1.05);
}
.demoMenubar__name { flex: 1; }
.demoMenubar__crown {
display: inline-flex;
align-items: center;
flex-shrink: 0;
order: 2;
}
.demoMenubar__crown svg { width: 16px; height: 16px; }
/* MIT row — gold border + crown only, no fill. Matches the iOS
"MIT showing" look without the highlighted background. */
.demoMenubar__row--mit {
background: transparent;
/* the gold border bleeds 10px past the text column; padding (minus the
1.5px border, border-box) puts the check/name back on the same
vertical lines as the plain rows */
margin: 4px -10px;
padding: 11px 8.5px;
border-radius: 10px;
border-bottom-color: transparent;
border: 1.5px solid rgba(245, 158, 11, 0.7);
}
.demoMenubar__row--mit .demoMenubar__check {
border-color: var(--gold);
}
.demoMenubar__row--mit .demoMenubar__check:hover {
background: rgba(245, 158, 11, 0.12);
}
/* Keyboard focus — visible cue when navigating with arrow keys.
Bleeds 10px past the text column exactly like the MIT row's gold border,
so the indigo outline isn't jammed against the first letter / the check. */
.demoMenubar__row--focused {
background: rgba(99, 102, 241, 0.16);
box-shadow: inset 0 0 0 1.5px var(--accent);
border-radius: 8px;
margin-left: -10px;
margin-right: -10px;
padding-left: 10px;
padding-right: 10px;
}
/* the MIT row already bleeds via its own margin/padding — don't double it */
.demoMenubar__row--mit.demoMenubar__row--focused {
margin-left: -10px;
margin-right: -10px;
padding-left: 8.5px;
padding-right: 8.5px;
}
.demoMenubar__row--mit.demoMenubar__row--focused {
background: rgba(99, 102, 241, 0.12);
}
/* Done state */
.demoMenubar__row--done {
opacity: 0.45;
}
.demoMenubar__row--done .demoMenubar__name {
text-decoration: line-through;
text-decoration-thickness: 1.5px;
}
.demoMenubar__row--done .demoMenubar__check {
background: var(--accent);
border-color: var(--accent);
}
.demoMenubar__row--done .demoMenubar__check::after {
transform: rotate(-45deg) translate(1px, -1px) scale(1);
}
.demoMenubar__row--mit.demoMenubar__row--done .demoMenubar__check {
background: var(--gold);
border-color: var(--gold);
}
/* New-row fade-in highlight */
.demoMenubar__row--new {
animation: demoRowIn 360ms cubic-bezier(0.18, 1.2, 0.4, 1.05);
}
@keyframes demoRowIn {
from { transform: translateY(-6px); opacity: 0; background: rgba(99, 102, 241, 0.12); }
to { transform: translateY(0); opacity: 1; background: transparent; }
}
/* Add-a-task input + plus button */
.demoMenubar__add {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 22px 16px;
margin: 0;
border-top: 1px solid var(--stroke);
}
.demoMenubar__input {
flex: 1;
min-width: 0; /* let it shrink at phone widths instead of pushing the + out of the popover */
background: var(--bg-soft);
border: 1px solid transparent;
border-radius: 10px;
padding: 11px 14px;
font-size: 14px;
font-family: inherit;
color: var(--text);
outline: none;
transition: border-color 140ms ease, background 140ms ease;
}
.demoMenubar__input::placeholder { color: var(--text-soft); }
.demoMenubar__input:focus {
border-color: var(--accent);
background: var(--card);
}
.demoMenubar__plus {
flex-shrink: 0;
/* match the 20px task circles above (filled disc reads slightly bigger) */
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--accent);
color: white;
border: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform 120ms ease;
}
.demoMenubar__plus svg { width: 12px; height: 12px; }
.demoMenubar__plus:hover { transform: scale(1.05); }
.demoMenubar__plus:active { transform: scale(0.97); }
/* Keyboard-shortcut hint under the popover */
.demoMenubar__hint {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 16px;
padding: 0 18px;
font-size: 12.5px;
color: var(--text-soft);
flex-wrap: wrap;
text-align: center;
}
.demoMenubar__hint kbd {
background: var(--card);
border: 1px solid var(--stroke-strong);
border-bottom-width: 2px;
border-radius: 6px;
padding: 2px 7px;
font-family: inherit;
font-size: 11.5px;
font-weight: 700;
color: var(--text);
min-width: 22px;
text-align: center;
}
/* ============================================================
Devices lineup (Mac, iPhone, Watch)
============================================================ */
.lineup {
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
margin-top: 80px;
flex-wrap: wrap;
}
/* Tidy single-row device family — sized to fit one line, proportions kept */
.lineup .ipad--lineup-portrait { width: 280px; }
.lineup .iphone--lineup { width: 212px; height: 440px; }
.lineup .iphone--lineup .iphone__notch { width: 70px; }
.lineup .macframe--lineup { width: 330px; height: 352px; }
.lineup .watch.watch--shop { width: 162px; height: 196px; }
/* ===== Mac on a macOS desktop (device lineup) ===== */
.macframe--lineup {
width: min(440px, 92vw);
flex-shrink: 0;
height: 470px;
border-radius: 14px;
overflow: hidden;
position: relative;
background: linear-gradient(180deg, #d9dde6 0%, #c8ccd6 100%);
box-shadow: var(--shadow-device);
}
.macframe__bar {
display: flex;
align-items: center;
gap: 14px;
height: 26px;
padding: 0 14px;
background: rgba(20, 20, 24, 0.92);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
color: rgba(255, 255, 255, 0.85);
font-size: 12.5px;
font-weight: 500;
position: relative;
z-index: 2;
}
.macframe__apple { width: 14px; height: 14px; color: #fff; display: block; flex: 0 0 auto; }
.macframe__menu { color: rgba(255,255,255,0.88); }
.macframe__menu--app { font-weight: 700; }
.macframe__spacer { flex: 1; }
.macframe__time { color: rgba(255,255,255,0.9); font-variant-numeric: tabular-nums; }
.macframe__desktop {
position: absolute;
top: 26px;
left: 0; right: 0; bottom: 0;
display: flex;
justify-content: center;
padding-top: 30px;
}
.macframe__app {
width: 66%;
height: auto;
align-self: flex-start;
border-radius: 11px 11px 0 0;
box-shadow: 0 16px 44px rgba(20,20,45,0.26);
display: block;
}
/* Mac (unused legacy mockup) */
.mac {
width: 480px;
position: relative;
}
.mac__screen {
background: #0b0b0f;
border-radius: 14px;
padding: 12px;
box-shadow: var(--shadow-device);
display: flex;
overflow: hidden;
height: 320px;
}
.mac__sidebar {
width: 130px;
background: var(--bg-soft);
border-right: 1px solid var(--stroke);
border-radius: 4px 0 0 4px;
padding: 14px 10px;
display: flex;
flex-direction: column;
gap: 4px;
}
.mac__brand { font-size: 14px; font-weight: 800; color: var(--accent); margin-bottom: 8px; }
.mac__nav {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 8px;
border-radius: 6px;
color: var(--text-soft);
font-size: 11px;
font-weight: 500;
}
.mac__nav-icon {
width: 12px;
height: 12px;
border-radius: 3px;
background: var(--text-mute);
opacity: 0.4;
flex-shrink: 0;
}
.mac__nav--active {
background: var(--accent-tint);
color: var(--accent);
font-weight: 700;
}
.mac__nav--active .mac__nav-icon { background: var(--accent); opacity: 1; }
.mac__nav-section {
font-size: 9px;
color: var(--text-mute);
font-weight: 700;
letter-spacing: 0.06em;
margin: 8px 0 2px 8px;
text-transform: uppercase;
}
.mac__detail {
flex: 1;
background: var(--card);
border-radius: 0 4px 4px 0;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 0;
overflow: hidden;
}
.mac__detailhead {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.mac__detailtitle {
font-size: 18px;
font-weight: 800;
color: var(--accent);
}
.mac__detaildate {
font-size: 9px;
border: 1.5px solid var(--accent);
border-radius: 5px;
padding: 1px 5px;
color: var(--accent);
font-weight: 700;
}
.mac__detail .row {
padding: 7px 4px;
font-size: 11px;
gap: 8px;
border-bottom: 1px solid var(--stroke);
}
.mac__detail .row__check { width: 13px; height: 13px; }
.mac__detail .row__check--done::after { top: 2px; left: 3px; width: 6px; height: 3px; border-left-width: 1.6px; border-bottom-width: 1.6px; }
.mac__detail .row__pen { width: 10px; height: 10px; }
.mac__detail .row__flag { height: 12px; }
.mac__detail .row__freq { font-size: 9px; padding: 1px 5px; }
.mac__detail .row--mit { padding: 7px 9px; border-radius: 6px; border-width: 1.5px; margin-bottom: 4px; }
.mac__detail .today__tabs--mac { font-size: 11px; gap: 16px; justify-content: flex-start; padding-bottom: 6px; margin-bottom: 8px; }
.mac__detail .today__tab--active { padding-bottom: 6px; margin-bottom: -7px; }
.mac__base {
width: 50%;
height: 12px;
background: linear-gradient(180deg, #1e1e22 0%, #0d0d10 100%);
border-radius: 0 0 4px 4px;
margin: 0 auto;
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.mac__stand {
width: 20%;
height: 6px;
background: #1a1a1f;
border-radius: 0 0 8px 8px;
margin: 0 auto;
opacity: 0.7;
}
/* Watch */
.watch {
width: 170px;
height: 210px;
background: #1a1a1f;
border-radius: 38px;
padding: 8px;
box-shadow: var(--shadow-device);
position: relative;
}
.watch__crown {
position: absolute;
right: -3px;
top: 30%;
width: 6px;
height: 24px;
background: linear-gradient(90deg, #2a2a32 0%, #444 100%);
border-radius: 2px;
}
.watch__sidebtn {
position: absolute;
right: -2px;
bottom: 28%;
width: 4px;
height: 30px;
background: linear-gradient(90deg, #2a2a32 0%, #3a3a42 100%);
border-radius: 1px;
}
.watch__screen {
width: 100%;
height: 100%;
background: #000;
border-radius: 32px;
overflow: hidden;
color: white;
padding: 14px 12px 12px;
position: relative;
}
.watch__screen:has(.watch__shot) { padding: 0; }
.watch__shot {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.watchapp {
height: 100%;
display: flex;
flex-direction: column;
}
.watchapp__title {
font-size: 13px;
color: var(--accent);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 8px;
}
.watchapp__rows {
flex: 1;
display: flex;
flex-direction: column;
gap: 5px;
font-size: 12px;
font-weight: 600;
}
.watchapp__rows li {
display: flex;
align-items: center;
gap: 7px;
padding: 3px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.watch-check {
width: 12px;
height: 12px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.4);
flex-shrink: 0;
}
.watch-check--done {
background: var(--accent);
border-color: var(--accent);
position: relative;
}
.watch-check--done::after {
content: '';
position: absolute;
top: 2.5px;
left: 2.5px;
width: 5px;
height: 2.5px;
border-left: 1.5px solid white;
border-bottom: 1.5px solid white;
transform: rotate(-45deg);
}
.watchapp__done { color: rgba(255, 255, 255, 0.45); text-decoration: line-through; }
.watchapp__add {
position: absolute;
bottom: 8px;
right: 8px;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--accent);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 16px;
}
/* ============================================================
macOS menu-bar Quick Capture
============================================================ */
.menubarshot {
width: 100%;
max-width: 560px;
margin: 0;
padding: 0;
border-radius: 14px;
overflow: hidden;
box-shadow: var(--shadow-md);
border: 1px solid var(--stroke);
}
.menubarshot__img {
display: block;
width: 100%;
height: auto;
}
.menubarshot__hint {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 18px;
font-size: 13px;
color: var(--text-soft);
background: var(--bg-soft);
border-top: 1px solid var(--stroke);
}
.menubarshot__hint kbd {
background: white;
border: 1px solid var(--stroke);
border-bottom-width: 2px;
border-radius: 5px;
padding: 2px 6px;
font-family: inherit;
font-size: 11px;
font-weight: 700;
color: var(--text);
}
.menubarstack {
width: 100%;
max-width: 480px;
}
.menubarstack__bar {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 14px;
padding: 0 16px;
height: 28px;
background: rgba(20, 20, 24, 0.92);
backdrop-filter: blur(20px);
border-radius: 6px 6px 0 0;
color: rgba(255, 255, 255, 0.8);
font-size: 12px;
font-weight: 500;
}
.mb-icon { color: rgba(255, 255, 255, 0.55); font-size: 13px; }
.mb-icon--active {
color: white;
background: rgba(99, 102, 241, 0.85);
width: 20px;
height: 20px;
border-radius: 5px;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 12px;
}
.menubarstack__pointer {
width: 16px;
height: 16px;
background: var(--card);
border-left: 1px solid var(--stroke);
border-top: 1px solid var(--stroke);
transform: rotate(45deg) translateY(8px);
margin: -1px 30px -8px auto;
position: relative;
z-index: 2;
}
.menubarstack__popover {
background: var(--card);
border-radius: 14px;
border: 1px solid var(--stroke);
overflow: hidden;
box-shadow: var(--shadow-md);
margin-top: 4px;
}
.mb-pop__head {
display: flex;
align-items: center;
gap: 10px;
padding: 18px 20px 14px;
}
.mb-pop__title { flex: 1; font-weight: 800; font-size: 20px; }
.mb-pop__count {
background: var(--bg-soft);
color: var(--text-soft);
border-radius: 12px;
padding: 2px 10px;
font-size: 11px;
font-weight: 700;
}
.mb-pop__listicon { color: var(--text-soft); font-size: 16px; }
.mb-pop__rows {
display: flex;
flex-direction: column;
padding: 0 16px;
}
.mb-pop__rows li {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 4px;
font-size: 14px;
border-bottom: 1px solid var(--stroke);
color: var(--text);
font-weight: 500;
}
.mb-pop__rows li:last-child { border-bottom: 0; }
.mb-name { flex: 1; }
.mb-check {
width: 16px;
height: 16px;
border-radius: 50%;
border: 1.5px solid var(--text-mute);
flex-shrink: 0;
}
.mb-pop__add {
display: flex;
align-items: center;
justify-content: space-between;
margin: 12px 16px 0;
padding: 12px 14px;
border: 1.5px solid var(--accent);
border-radius: 11px;
color: var(--accent);
font-size: 14px;
font-weight: 600;
background: var(--accent-tint);
}
.mb-pop__addtext { display: inline-flex; align-items: center; gap: 4px; }
.mb-pop__cursor {
width: 1.5px;
height: 16px;
background: var(--accent);
animation: blink 1s steps(2, end) infinite;
margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }
.mb-pop__plus {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--accent);
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
}
.mb-pop__hint {
display: flex;
align-items: center;
gap: 8px;
padding: 16px 20px;
color: var(--text-mute);
font-size: 13px;
border-top: 1px solid var(--stroke);
margin-top: 12px;
}
/* ============================================================
Notes editor (Markdown section)
============================================================ */
.noteseditor {
width: 100%;
max-width: 460px;
background: var(--card);
border-radius: 24px;
box-shadow: var(--shadow-device);
overflow: hidden;
border: 1px solid var(--stroke);
}
.noteseditor__title {
font-size: 22px;
font-weight: 800;
padding: 22px 22px 12px;
}
.noteseditor__bar {
display: flex;
align-items: center;
gap: 4px;
padding: 8px 16px;
border-top: 1px solid var(--stroke);
border-bottom: 1px solid var(--stroke);
background: var(--bg-soft);
}
.nb {
width: 30px;
height: 30px;
border-radius: 7px;
color: var(--text-soft);
font-size: 14px;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
padding: 0;
font-family: inherit;
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
-webkit-tap-highlight-color: transparent;
}
.nb:hover { background: var(--stroke); color: var(--text); }
.nb:active { background: var(--accent-tint); color: var(--accent); }
.nb svg { width: 16px; height: 16px; }
.nb-divider { width: 1px; height: 18px; background: var(--stroke-strong); margin: 0 6px; }
.noteseditor__body {
padding: 22px 22px 18px;
font-size: 15px;
color: var(--text);
min-height: 280px;
outline: none;
line-height: 1.5;
text-align: left;
}
.noteseditor__body:focus { outline: none; }
.noteseditor__body > * + * { margin-top: 12px; }
.noteseditor__body h1, .ne-h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.noteseditor__body h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.noteseditor__body p { margin: 0; }
.noteseditor__body b, .noteseditor__body strong { font-weight: 700; }
.noteseditor__body i, .noteseditor__body em { font-style: italic; }
.noteseditor__body s, .noteseditor__body strike { text-decoration: line-through; }
.noteseditor__body ul, .noteseditor__body ol, .ne-list {
display: flex;
flex-direction: column;
gap: 6px;
padding-left: 18px;
margin: 0;
}
.noteseditor__body ul li, .ne-list li {
position: relative;
padding-left: 4px;
list-style: none;
}
.noteseditor__body ul li::before, .ne-list li::before {
content: '';
position: absolute;
left: -14px;
top: 9px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--text);
}
.noteseditor__body ol li {
list-style: decimal;
padding-left: 4px;
}
.noteseditor__body ol li::before { content: none; }
.ne-hashtag {
color: var(--accent);
font-weight: 700;
background: var(--accent-tint);
border-radius: 5px;
padding: 1px 6px;
}
.ne-cursor {
width: 2px;
height: 18px;
background: var(--accent);
animation: blink 1s steps(2, end) infinite;
margin-top: 4px;
}
.noteseditor__bottom {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px 18px;
border-top: 1px solid var(--stroke);
}
.ne-bottom-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 10px 6px 8px;
background: var(--bg-soft);
border-radius: 999px;
font-size: 13px;
font-weight: 600;
color: var(--text-soft);
}
.ne-bottom-pill svg { width: 13px; height: 13px; }
.ne-bottom-pill svg:first-child { color: var(--text-soft); }
.ne-bottom-icons { flex: 1; display: flex; align-items: center; gap: 12px; color: var(--text-soft); }
.ne-bottom-icons svg { width: 16px; height: 16px; }
.ne-pen-active svg { color: var(--accent); }
.ne-bottom-send {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--accent);
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 14px rgba(99, 102, 241, 0.4);
}
.ne-bottom-send svg { width: 18px; height: 18px; }
/* ============================================================
CTA + footer
============================================================ */
.cta {
padding: var(--pad) 0;
text-align: center;
background: linear-gradient(180deg, var(--bg) 0%, var(--accent-tint) 100%);
}
.cta__inner { max-width: 760px; }
.cta__title {
font-size: clamp(56px, 9vw, 100px);
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.02;
margin-bottom: 18px;
}
/* App-matching titles. The app's big headers (TODAY, WEEK, list names) use
Apple's standard SF font — SHARP and LIGHT (.system, weight .light/.regular),
NOT the rounded face. Only the body text and the TALLY wordmark are rounded.
So: big headings → sharp + lighter; body + logo stay rounded (set elsewhere). */
/* Section titles stay sharp (like the app's "TODAY"/view titles). The hero
.display uses the rounded app font (like the sidebar "TALLY" lettermark). */
/* Titles use the rounded app font (the iOS "TALLY" sidebar lettermark);
body text already uses the same rounded face as the app's task rows. */
.title, .cta__title {
font-family: -apple-system, "SF Pro Display", system-ui, sans-serif;
font-weight: 600;
letter-spacing: -0.01em;
}
/* "Get Tally." styled as the TALLY lettermark — uppercase, indigo, wide tracking */
.cta__title { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.cta__sub { font-size: 22px; color: var(--text-soft); margin-bottom: 40px; }
.cta__btns { display: flex; gap: 14px; justify-content: center; margin-bottom: 32px; flex-wrap: wrap; }
.cta__small { color: var(--text-mute); font-size: 13px; line-height: 1.6; max-width: 540px; margin: 0 auto; }
.footer {
background: var(--bg-soft);
padding: 48px 0;
border-top: 1px solid var(--stroke);
}
.footer__inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 24px;
}
.footer__brand { font-weight: 600; letter-spacing: 0.2em; color: var(--accent); text-transform: uppercase; }
.footer__copy { color: var(--text-mute); font-size: 14px; }
.footer__links { display: flex; gap: 24px; color: var(--text-soft); font-size: 14px; }
/* ============================================================
Responsive
============================================================ */
@media (max-width: 980px) {
:root { --pad: 70px; }
.nav__links { display: none; }
.split { grid-template-columns: 1fr; gap: 56px; text-align: center; }
.split--reverse .split__copy { order: 1; }
.split--reverse .split__visual { order: 2; }
.split__copy .bullets { text-align: left; max-width: 360px; margin: 28px auto 0; }
.split__copy .lede { margin-left: auto; margin-right: auto; }
.cadence { grid-template-columns: 1fr; gap: 80px; }
.cadence__cell { gap: 18px; }
.lineup { gap: 24px; }
.mac { width: 360px; }
.ipad--lineup-landscape { width: min(640px, 96vw); padding: 12px; border-radius: 28px; }
.mac__screen { height: 240px; }
.iphone--lineup { width: 200px; height: 420px; }
.watch { width: 130px; height: 160px; }
.streakcard__foot { grid-template-columns: repeat(2, 1fr); }
.iphone--hero { width: 300px; height: 645px; }
.iphone--medium { width: 280px; height: 580px; }
}
@media (max-width: 520px) {
.container { padding: 0 20px; }
.hero { padding-top: 80px; }
.iphone--hero { width: 280px; height: 600px; padding: 11px; }
.lineup { flex-direction: column; }
.lineup__break { display: none; }
.lineup__col { grid-template-columns: 1fr; gap: 36px; transform: none; margin: 0; }
.streakcard { padding: 28px 20px; }
.streakcard__foot { grid-template-columns: repeat(2, 1fr); }
.nav__cta { display: none; }
}
/* ============================================================
Sync flow + Privacy (inside #schedule)
"The apps you already use → Tally, automatically", then the
no-account / your-iCloud-not-ours privacy promise. The whole
diagram is one inline SVG so the wires always connect to the
icons no matter how it scales.
============================================================ */
.syncflow {
margin-top: 104px;
text-align: center;
}
/* Syncflow promoted into the hero — constrain it like a container */
.hero .syncflow {
margin: 28px auto 0;
max-width: 960px;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
.syncflow__kicker {
color: var(--accent);
font-weight: 700;
font-size: 15px;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 14px;
}
.syncflow__title {
font-size: clamp(26px, 3.4vw, 40px);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.01em;
margin-bottom: 6px;
}
.syncflow__diagram {
display: grid;
/* Right column holds the destination phone, sized to match the
schedule-demo phone above (~300px). The column is wide enough that
the phone's own min(300px,95%) doesn't clamp it below 300. SVG
column (1fr) stays 584px (940-340-16) like every prior step. */
grid-template-columns: minmax(0, 1fr) 340px;
align-items: center;
gap: 16px;
width: 100%;
max-width: 940px;
margin: 28px auto 24px;
}
.syncflow__svg {
width: 100%;
min-width: 0;
height: auto;
aspect-ratio: 585 / 510;
display: block;
overflow: visible;
}
.syncflow__dest {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.syncflow__destlabel {
font-family: -apple-system, "SF Pro Display", system-ui, sans-serif;
font-weight: 700;
font-size: clamp(18px, 2.6vw, 22px);
color: var(--text);
}
/* No size override here: the destination phone inherits the shared
`#schedule .iphone { width: min(300px,95%) }` rule, so it matches the
schedule-demo phone directly above it (same width, bezel and notch).
The grid column (above) is wide enough that the 95% term doesn't clamp
the phone below 300px. */
@media (max-width: 720px) {
.syncflow__diagram { grid-template-columns: 1fr; gap: 30px; }
.syncflow__svg { max-width: 460px; margin-inline: auto; }
.syncflow__dest { justify-self: center; }
}
.syncflow__note {
color: var(--text-soft);
font-size: 16px;
line-height: 1.6;
max-width: 640px;
margin: 0 auto;
}
.syncflow__note strong { color: var(--text); }
/* SVG diagram internals */
.syncflow svg text {
font-family: -apple-system, "SF Pro Display", system-ui, sans-serif;
}
.sf-wire {
fill: none;
stroke: var(--accent);
stroke-width: 3;
opacity: 0.32;
stroke-linecap: round;
stroke-dasharray: 2 13;
}
.sf-arrow { fill: var(--accent); }
.sf-dot {
fill: var(--accent);
filter: drop-shadow(0 1px 3px color-mix(in srgb, var(--accent) 55%, transparent));
}
.sf-label { fill: var(--text-soft); font-size: 32px; font-weight: 600; }
.sf-hublabel { fill: var(--text); font-size: 29px; font-weight: 700; }
/* No motion → no travelling dots, just the static funnel. */
@media (prefers-reduced-motion: reduce) {
.sf-dot { display: none; }
}
/* Privacy promise card */
.privacy {
margin: 72px auto 0;
max-width: 940px;
display: flex;
gap: 26px;
align-items: flex-start;
background: var(--accent-tint);
border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
border-radius: 26px;
padding: 34px 36px;
}
.privacy__lock {
flex: 0 0 auto;
width: 54px;
height: 54px;
border-radius: 15px;
background: var(--accent);
display: grid;
place-items: center;
box-shadow: var(--shadow-sm);
}
.privacy__lock svg { width: 30px; height: 30px; fill: #fff; }
.privacy__title {
font-size: clamp(21px, 2.4vw, 27px);
font-weight: 700;
line-height: 1.15;
margin-bottom: 10px;
}
.privacy__text {
color: var(--text-soft);
font-size: 16.5px;
line-height: 1.62;
margin-bottom: 18px;
}
.privacy__text strong { color: var(--text); font-weight: 700; }
.privacy__tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.ptag {
font-size: 13.5px;
font-weight: 600;
color: var(--accent-deep);
background: var(--bg);
border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
padding: 7px 14px;
border-radius: 999px;
}
@media (max-width: 640px) {
.syncflow { margin-top: 72px; }
.sf-label { font-size: 32px; }
.sf-hublabel { font-size: 32px; }
.privacy {
flex-direction: column;
gap: 18px;
padding: 26px 22px;
margin-top: 56px;
}
.privacy__lock { width: 48px; height: 48px; }
}
/* Pre-launch email signup forms (replacing App Store download buttons) */
.signup{display:flex;gap:10px;max-width:440px;flex-wrap:wrap;align-items:stretch}
.hero__cta .signup{justify-content:center}
.cta__btns{display:flex;flex-direction:column;align-items:center;gap:6px;flex-wrap:nowrap;width:100%}
.signup__email{flex:1;min-width:180px;padding:14px 18px;border-radius:13px;border:1.5px solid #d3d6de;background:#fff;color:#1a1a1a;font-size:16px;font-family:inherit}
.signup__email::placeholder{color:#9a9aa4}
.signup__email:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.22)}
.signup__btn{padding:14px 24px;border-radius:13px;border:none;background:var(--accent);color:#fff;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;transition:transform .15s ease}
.signup__btn:hover{transform:translateY(-2px)}
.signup__done{color:var(--accent);font-weight:700;margin:12px 0 0}
.navcta{display:inline-flex;align-items:center;background:var(--accent);color:#fff;border-radius:13px;padding:11px 20px;text-decoration:none;font-weight:700;font-size:16px;white-space:nowrap;transition:transform .15s ease}
.navcta:hover{transform:translateY(-2px)}
@media(max-width:640px){.navcta{padding:8px 14px;font-size:13.5px;border-radius:11px}}
/* Header CTA as an App Store badge (drawn inline; no external assets). */
.navcta--appstore{background:transparent;padding:0;border-radius:10px}
.navcta--appstore svg{display:block;height:44px;width:auto}
/* Apple's minimum badge height is 40px - 37/30px rendered the small line at ~6px */
@media(max-width:640px){.navcta--appstore svg{height:40px}}
.hero__cta{flex-direction:column;align-items:center;gap:18px}
.hero__cta .signup{width:100%;max-width:440px}
/* Launch countdown pill (replaces "How it works") */
.countdown{display:inline-flex;align-items:center;gap:10px;background:rgba(99,102,241,.10);border:1.5px solid rgba(99,102,241,.38);color:var(--accent);border-radius:13px;padding:13px 24px;font-weight:700;font-size:16px}
.countdown__time{font-variant-numeric:tabular-nums;letter-spacing:.02em;min-width:150px;text-align:left}
/* Bigger hero signup input */
.hero__cta .signup{max-width:520px}
.hero__cta .signup__email{padding:17px 22px;font-size:18px}
.hero__cta .signup__btn{padding:17px 26px;font-size:17px}
/* Static zoomed-in widget cards (replacing the Ken-Burns phone mockups) */
.widgets__row{align-items:flex-start}
.widgetcard{width:250px;border-radius:22px;overflow:hidden;box-shadow:0 14px 44px -16px rgba(15,23,42,.30);line-height:0}
.widgetcard img{width:100%;height:auto;display:block}
/* Bigger email input in the "Get Tally" download section */
.cta__btns .signup{max-width:700px;width:100%}
.cta__btns .signup__email{padding:19px 24px;font-size:19px}
.cta__btns .signup__btn{padding:19px 28px;font-size:18px}
/* Static phones; first widget zoomed into the card */
.iphone--widget .iphone__shot{animation:none}
.wzoom-frame{overflow:hidden;display:flex;justify-content:center;height:405px;width:352px;-webkit-mask-image:linear-gradient(to bottom,#000 84%,transparent 100%);mask-image:linear-gradient(to bottom,#000 84%,transparent 100%)}
.iphone--wzoom{transform:scale(1.4);transform-origin:top center;flex:0 0 auto}
.widgets__device:has(.wzoom-frame){max-width:360px}
#method .container{max-width:1320px}
.offer__btn--sm{padding:13px 22px;font-size:15px}
/* The full-desktop Mac menu-bar scene is illegible at phone width —
drop it there; the cropped quick-capture video above tells the story. */
@media (max-width: 700px) {
.macscene { display: none; }
}
/* Year heatmap on phones: 53 week-columns crush into unreadable ~3px
dots. Let the heatmap swipe horizontally at a readable size instead
(months header scrolls with it); desktop is wide enough already. */
@media (max-width: 700px) {
.streakcard__scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: 4px;
/* fade hints that there's more to swipe */
mask-image: linear-gradient(to right, #000 92%, transparent);
-webkit-mask-image: linear-gradient(to right, #000 92%, transparent);
}
.streakcard__scroll .streakcard__months,
.streakcard__scroll .streakcard__grid { min-width: 700px; }
}
/* Phone-width polish for the "Little Touches" cells: more air between
label / description / bullets / phone, and bigger bullet rows that
read comfortably across one or two lines. */
@media (max-width: 640px) {
/* #more-iphone .cadence sets gap:64px with an ID selector — match it */
#more-iphone .cadence, .cadence { gap: 96px; }
.cadence__cell { gap: 26px; }
/* Consistent phone type scale: 24 section labels / 20 featured
method descs (inline) / 19 body copy / 16 captions. */
.cadence__label { font-size: 24px; }
.cadence__desc { font-size: 19px; max-width: 380px; line-height: 1.55; }
.lede { font-size: 19px; line-height: 1.6; }
.privacy__text { font-size: 19px; line-height: 1.6; }
.tcard .tcard__quote { font-size: 17px; } /* outranks the inline 15.5px rule */
.widgets__caption { font-size: 16px; max-width: 300px; }
.bullets { font-size: 19px; gap: 16px; }
/* Hero bullets: same type/spacing as every other list; balance
splits two-line items evenly instead of leaving one-word tails. */
.hero-copy .bullets li { text-wrap: balance; }
/* Tighten the dead band between capture and this section. */
#capture { padding-bottom: 24px; }
#more-iphone { padding-top: 36px; }
.bullets li { padding-left: 38px; line-height: 1.45; }
.bullets li::before { width: 25px; height: 25px; line-height: 25px; font-size: 13.5px; top: 0; }
.bullets li::after { left: 5px; top: 13px; width: 7px; height: 7px; }
/* let two-line bullets use the full column instead of a 360px box */
.split__copy .bullets { max-width: 100%; }
/* demo popover: 56px of stage gutter read too thin on phones */
.demoMenubar__popover { width: calc(100% - 28px); }
}
/* ============================================================
Mobile header — reclaim the viewport
============================================================ */
@media (max-width: 820px) {
/* The header was eating ~240px of an 812px viewport (30%). Two causes:
.nav__brand is 40px, which can't share a 375px row with the App Store
badge, so the bar wrapped to two lines; and .nav is sticky, so that
wrapped bar followed you down the whole page. Compact it to a single
row and let it scroll away — the App Store badge stays visible on
first paint, and the download CTA is repeated at the foot of the page. */
.nav {
position: static;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.nav__inner {
gap: 12px;
padding-top: 9px;
padding-bottom: 9px;
flex-wrap: nowrap;
}
.nav__brand {
font-size: 22px;
letter-spacing: 0.1em;
white-space: nowrap;
}
.navcta--appstore svg { height: 40px; } /* was 30px; this 820px block outranks the 640px one on phones */
}
/* ============================================================
Mobile readability
Bigger + darker, never bolder — bolding was the wrong fix last time.
Secondary text was 13.5–14px in #64748b/#94a3b8, roughly 4.3:1 and 2.4:1
against the cream sections. Both are under the ~7:1 these need.
============================================================ */
@media (max-width: 820px) {
body { font-size: 17px; }
.lede {
font-size: 20px;
line-height: 1.62;
color: #4a4a52; /* was #6e6e73 */
}
.kicker { color: #5c5c64; } /* was #86868b */
.method__desc { font-size: 19px; line-height: 1.66; color: #3f4855; }
.footer__copy, .footer__links { font-size: 15.5px; color: #5c5c64; }
}