/* ============================================================ Tidiest — landing page "Mess → Order" Monochrome shadcn aesthetic. The page is built from cards that start cluttered and tidy as you scroll; the theme darkens light → dark across three stages. Motion lives in home.js + GSAP and is fully gated behind prefers-reduced-motion. Home page only — legal pages keep style.css. ============================================================ */ /* -------------------- Font -------------------- */ @font-face { font-family: "Archivo"; src: url("fonts/archivo-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* -------------------- Tokens (zinc, monochrome) -------------------- */ :root { --radius: 0.625rem; --radius-sm: 0.4rem; --radius-pill: 999px; --maxw: 1180px; --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Inter", sans-serif; --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; --ease: cubic-bezier(0.22, 0.61, 0.27, 1); --theme-t: 0.7s ease; /* light↔dark morph speed */ } /* Three readable stages toggled on by ScrollTrigger. Each is a stable, high-contrast theme; CSS transitions smooth the crossing between them. */ body.stage-1 { --bg: #fafafa; --fg: #09090b; --muted: #71717a; --border: #e4e4e7; --card: #ffffff; --card-fg: #09090b; --primary: #18181b; --primary-fg: #fafafa; --ring: #18181b; } body.stage-2 { --bg: #27272a; --fg: #fafafa; --muted: #a1a1aa; --border: #3f3f46; --card: #18181b; --card-fg: #fafafa; --primary: #fafafa; --primary-fg: #18181b; --ring: #d4d4d8; } body.stage-3 { --bg: #09090b; --fg: #fafafa; --muted: #a1a1aa; --border: #27272a; --card: #18181b; --card-fg: #fafafa; --primary: #fafafa; --primary-fg: #09090b; --ring: #d4d4d8; } /* -------------------- Reset / base -------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: clamp(1rem, 0.97rem + 0.18vw, 1.08rem); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; transition: background-color var(--theme-t), color var(--theme-t); } /* Theme morph: colour/border/bg ease between stages on every element. */ body *:not(svg):not(path):not(use) { transition: background-color var(--theme-t), border-color var(--theme-t), color var(--theme-t); } h1, h2, h3 { margin: 0; color: var(--fg); } p { margin: 0; } a { color: inherit; } img, svg { display: block; max-width: 100%; } em { font-style: normal; } /* -------------------- Utilities -------------------- */ .shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .display { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; color: var(--fg); } .display em { font-style: normal; text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.1em; } .lead { font-size: clamp(1.05rem, 1rem + 0.45vw, 1.28rem); line-height: 1.5; color: var(--fg); } .lead em, .muted em { font-style: normal; font-weight: 650; color: var(--fg); } .muted { color: var(--muted); } .money { font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .eyebrow { display: inline-block; font-family: var(--font); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--muted); padding-bottom: 0.9rem; margin-bottom: 0; } .skip { position: fixed; top: 0.6rem; left: 0.6rem; z-index: 200; transform: translateY(-180%); background: var(--primary); color: var(--primary-fg); padding: 0.7rem 1rem; border-radius: var(--radius-sm); font-weight: 700; text-decoration: none; } .skip:focus { transform: translateY(0); } :focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: var(--radius-sm); } /* -------------------- Card primitive (shadcn) -------------------- */ .card { background: var(--card); color: var(--card-fg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); will-change: transform; } /* -------------------- Chip / badge -------------------- */ .chip { display: inline-flex; align-items: center; gap: 0.34rem; font-family: var(--font); font-weight: 600; font-size: 0.72rem; line-height: 1; padding: 0.34rem 0.6rem; border-radius: var(--radius-sm); border: 1px solid var(--border); color: var(--muted); background: transparent; white-space: nowrap; } .chip__ico { width: 0.78rem; height: 0.78rem; fill: none; stroke: currentColor; } .chip--done { color: var(--card-fg); border-color: var(--card-fg); } .chip--grade { color: var(--primary-fg); background: var(--primary); border-color: var(--primary); padding-inline: 0.55rem; } /* -------------------- Buttons -------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font); font-weight: 600; font-size: 0.96rem; cursor: pointer; padding: 0.7rem 1.15rem; border-radius: var(--radius-sm); border: 1px solid var(--primary); background: var(--primary); color: var(--primary-fg); text-decoration: none; transition: transform 0.16s var(--ease), opacity 0.2s var(--ease), background-color var(--theme-t), border-color var(--theme-t), color var(--theme-t); } .btn:hover { transform: translateY(-1px); opacity: 0.92; } .btn:active { transform: translateY(0); } .btn--ghost { background: transparent; color: var(--fg); border-color: var(--border); } .btn--ghost:hover { border-color: var(--fg); opacity: 1; } /* -------------------- App Store badge (monochrome) -------------------- */ .store { display: inline-flex; align-items: center; gap: 0.55rem; background: var(--primary); color: var(--primary-fg); text-decoration: none; padding: 0.6rem 1.05rem; border-radius: var(--radius-sm); border: 1px solid var(--primary); transition: transform 0.16s var(--ease), background-color var(--theme-t), color var(--theme-t), border-color var(--theme-t); } .store:hover { transform: translateY(-1px); } .store__glyph { width: 21px; height: 21px; fill: currentColor; } .store__text { display: flex; flex-direction: column; line-height: 1.05; text-align: left; } .store__small { font-size: 0.6rem; letter-spacing: 0.02em; opacity: 0.85; } .store__large { font-family: var(--font-display); font-weight: 700; font-size: 1rem; } .store[data-placeholder] { cursor: default; } .store--sm { padding: 0.45rem 0.8rem; } .store--sm .store__glyph { width: 18px; height: 18px; } .store--sm .store__large { font-size: 0.88rem; } /* -------------------- Nav -------------------- */ .nav { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(150%) blur(12px); -webkit-backdrop-filter: saturate(150%) blur(12px); border-bottom: 1px solid transparent; transition: border-color var(--theme-t), background-color var(--theme-t); } .nav.is-condensed { border-bottom-color: var(--border); } .nav__inner { display: flex; align-items: center; gap: 1.5rem; padding-block: 0.85rem; } .wordmark { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 800; font-size: 1.22rem; letter-spacing: -0.03em; color: var(--fg); text-decoration: none; } .wordmark__mark img { height: 1.55em; width: auto; transition: filter var(--theme-t); } /* The brand glyph PNG is dark; invert it to read on the dark stages. */ body.stage-2 .wordmark__mark img, body.stage-3 .wordmark__mark img { filter: invert(1) brightness(1.8); } .nav__links { margin-left: auto; display: flex; gap: 1.5rem; } .nav__links a { text-decoration: none; color: var(--muted); font-weight: 500; font-size: 0.94rem; } .nav__links a:hover { color: var(--fg); } .nav__cta { margin-left: 0; } @media (max-width: 820px) { .nav__links { display: none; } .nav__cta { margin-left: auto; } } /* -------------------- Section rhythm + heads -------------------- */ /* Clip off-canvas scattered cards horizontally so the mess never creates a horizontal scrollbar (vertical stays natural). */ section { position: relative; overflow-x: clip; } .head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); } .head .display { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.3rem); } .head .lead { margin-top: 1rem; max-width: 42rem; } /* -------------------- Hero -------------------- */ .hero { overflow: hidden; padding-block: clamp(3rem, 7vh, 6rem) clamp(4rem, 9vh, 7rem); min-height: min(94vh, 880px); display: flex; flex-direction: column; justify-content: center; } .hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; } .hero__text { position: relative; z-index: 2; } .hero__h1 { font-size: clamp(2.6rem, 1.2rem + 5.2vw, 5rem); margin-block: 0.2rem 0; } .hero__sub { margin-top: 1.5rem; max-width: 34ch; color: var(--muted); } .hero__sub em { color: var(--fg); } .hero__cta { margin-top: 2rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } /* Above the text so the scattered mess can obscure the headline; never blocks clicks (decorative, aria-hidden). */ .hero__cards { position: relative; z-index: 5; pointer-events: none; display: flex; flex-direction: column; gap: 0.8rem; } .chore { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1rem; } .chore__emoji { font-size: 1.35rem; line-height: 1; flex: none; } .chore__name { font-weight: 600; color: var(--card-fg); font-size: 1rem; } .chore .chip { margin-left: auto; } .card--earned { justify-content: space-between; padding-block: 1.05rem; } .card--earned .chore__name { color: var(--muted); font-weight: 500; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; } .card--earned .money { font-size: 1.5rem; color: var(--card-fg); } .hero__hint { margin-top: clamp(2rem, 5vh, 3.5rem); text-align: center; font-size: 0.8rem; letter-spacing: 0.04em; color: var(--muted); } /* -------------------- How it works -------------------- */ .how { padding-block: clamp(4rem, 9vw, 8rem); } .how .display { font-size: clamp(2.4rem, 1.4rem + 4vw, 4.6rem); } .jumble { display: inline-block; } .jumble .jchar { display: inline-block; will-change: transform, opacity; } .how__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: clamp(2rem, 4vw, 3rem); } .step { padding: 1.6rem 1.5rem; } .step__num { font-family: var(--font-mono); font-weight: 600; font-size: 0.82rem; color: var(--muted); } .step__title { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; margin: 0.9rem 0 0.5rem; } /* -------------------- Why they want it -------------------- */ .want { padding-block: clamp(4rem, 9vw, 8rem); } .menu { max-width: 620px; margin-inline: auto; padding: clamp(1.4rem, 3vw, 2rem); } .menu__label { font-family: var(--font); font-weight: 600; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.4rem; } .menu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .menu__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.95rem 0.6rem; border-bottom: 1px solid var(--border); border-radius: var(--radius-sm); will-change: transform; } .menu__row:last-of-type { border-bottom: 0; } .menu__item { font-weight: 500; color: var(--card-fg); font-size: 1.02rem; } .menu__price { color: var(--card-fg); font-size: 1.04rem; flex: none; } .menu__note { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.9rem; text-align: center; } /* ============================================================ The Card — a holographic-foil card (pure CSS/JS, no deps, no WebGL). Ships as a clean, readable dark card; home.js adds a pointer-driven 3D tilt plus a moving foil sheen by setting --px/--py (glare), --bx/--by (foil position), --rx/--ry (tilt) and --o (hover energy). Foil intensity is fixed low (--foil: 0.10) for a tasteful, not-overwhelming shimmer. The card body is self-contained dark metal that reads on every theme stage, so it needs no per-stage restyle. ============================================================ */ .issue { padding-block: clamp(4rem, 9vw, 8rem); overflow: visible; } .issue__grid { display: grid; grid-template-columns: 1fr minmax(300px, 420px); gap: clamp(2rem, 6vw, 5rem); align-items: center; } .issue__head { margin-bottom: 0; } .issue__head .display { font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4rem); } .issue__head .lead { margin-top: 1rem; } /* Perspective lives on the stage; the card tilts/flips inside it. */ .issue__stage { position: relative; perspective: 1400px; perspective-origin: 50% 40%; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; } /* The card. JS sets the tilt/gloss vars; the defaults below give a clean, flat resting card (no-JS / reduced-motion). --foil is fixed low. */ .cardx { --px: 50%; --py: 50%; --bx: 50%; --by: 50%; --rx: 0deg; --ry: 0deg; --o: 0; --foil: 0.10; position: relative; width: 100%; max-width: 380px; aspect-ratio: 1.586 / 1; border-radius: 16px; overflow: hidden; isolation: isolate; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 0.3s var(--ease); padding: clamp(1rem, 4.5%, 1.5rem); color: #f4f4f5; font-family: var(--font); background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 38%), linear-gradient(150deg, #44474e 0%, #25272c 42%, #131418 100%); box-shadow: 0 26px 38px rgba(0,0,0,0.4), 0 6px 10px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -16px 30px rgba(0,0,0,0.45); } .cardx > * { position: absolute; } /* Card content (absolutely placed within the card box). */ .cardx__brand { top: clamp(1rem,4.5%,1.5rem); left: clamp(1rem,4.5%,1.5rem); font-family: var(--font-display); font-weight: 800; font-size: 1.18rem; letter-spacing: -0.02em; color: #fafafa; text-shadow: 0 1px 1px rgba(0,0,0,0.45); } .cardx__wave { top: clamp(1rem,4.5%,1.5rem); right: clamp(1rem,4.5%,1.5rem); width: 22px; height: 22px; color: rgba(244,244,245,0.85); fill: none; stroke: currentColor; } /* The EMV chip — gilt metal with milled contacts. */ .cardx__chip { top: 42%; left: clamp(1rem,4.5%,1.5rem); width: 13%; aspect-ratio: 1.32 / 1; min-width: 38px; border-radius: 6px; background: linear-gradient(135deg, #f4e4a8 0%, #d9bf6e 38%, #b9923c 70%, #e9d68f 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25), 0 1px 1px rgba(0,0,0,0.3); } .cardx__chip::before, .cardx__chip::after { content: ""; position: absolute; inset: 16% 8%; background-image: linear-gradient(rgba(0,0,0,0.45) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.45) 1px, transparent 1px); background-size: 50% 33%; border-radius: 3px; } .cardx__chip::after { inset: 38% 30%; background: rgba(0,0,0,0.28); background-size: auto; } .cardx__num { top: 63%; left: clamp(1rem,4.5%,1.5rem); right: clamp(1rem,4.5%,1.5rem); font-family: var(--font-mono); font-weight: 600; font-size: 1.04rem; letter-spacing: 0.02em; color: #ececee; white-space: nowrap; text-shadow: 0 1px 0 rgba(0,0,0,0.5), 0 -1px 0 rgba(255,255,255,0.12); } .cardx__fields { bottom: clamp(1rem,4.5%,1.5rem); left: clamp(1rem,4.5%,1.5rem); right: clamp(1rem,4.5%,1.5rem); display: flex; align-items: flex-end; justify-content: space-between; } .cardx__field { position: static; display: flex; flex-direction: column; gap: 0.18rem; font-family: var(--font-mono); font-size: clamp(0.62rem, 3%, 0.78rem); letter-spacing: 0.04em; color: #dcdce0; } .cardx__field--end { text-align: right; } .cardx__field small { position: static; font-family: var(--font); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(244,244,245,0.5); } /* Gloss — pointer glare + holographic foil (scaled by --foil) + sparkle. */ .cardx::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; background: radial-gradient(farthest-corner circle at var(--px) var(--py), rgba(255,255,255,0.6), rgba(255,255,255,0.12) 25%, rgba(0,0,0,0.28) 90%); mix-blend-mode: overlay; opacity: calc(0.3 + var(--o) * 0.4); } .cardx::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; background-image: repeating-linear-gradient(0deg, rgba(255,119,115,0.5) 5%, rgba(255,237,95,0.5) 10%, rgba(168,255,95,0.5) 15%, rgba(131,255,247,0.5) 20%, rgba(120,148,255,0.5) 25%, rgba(216,117,255,0.5) 30%, rgba(255,119,115,0.5) 35%), repeating-linear-gradient(133deg, #0e152e 0%, hsl(180,10%,60%) 3.8%, hsl(180,29%,66%) 4.5%, hsl(180,10%,60%) 5.2%, #0e152e 10%); background-blend-mode: screen; background-size: 100% 220%, 200% 200%; background-position: var(--bx) var(--by), var(--bx) var(--by); mix-blend-mode: color-dodge; filter: brightness(0.85) contrast(2.4); opacity: calc((0.1 + var(--o) * 0.5) * var(--foil)); } .cardx__sparkle { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); background-size: 180px 180px; background-position: var(--bx) var(--by); mix-blend-mode: color-dodge; opacity: calc(var(--o) * 0.4 * var(--foil)); } .issue__hint { font-size: 0.8rem; letter-spacing: 0.04em; text-align: center; } /* -------------------- Trust -------------------- */ .trust { padding-block: clamp(4rem, 9vw, 8rem); } .trust__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } .trust__card { padding: 1.7rem 1.5rem; } .trust__icon { width: 46px; height: 46px; border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--card-fg); border: 1px solid var(--border); margin-bottom: 1.1rem; } .trust__icon svg { width: 26px; height: 26px; } .trust__title { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; margin-bottom: 0.5rem; } /* -------------------- Closer -------------------- */ .closer { padding-block: clamp(5rem, 11vw, 9rem); text-align: center; } .closer__inner { display: flex; flex-direction: column; align-items: center; } .closer__h2 { font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); } .closer .lead { margin-top: 1rem; } .closer__cta { margin-top: 2rem; } /* -------------------- Footer -------------------- */ .footer { border-top: 1px solid var(--border); padding-block: 2rem; } .footer__inner { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .footer__links { display: flex; gap: 1.3rem; flex-wrap: wrap; margin-inline: auto; } .footer__links a { text-decoration: none; color: var(--muted); font-weight: 500; font-size: 0.92rem; } .footer__links a:hover { color: var(--fg); } .footer__copy { color: var(--muted); font-size: 0.84rem; width: 100%; text-align: center; margin-top: 0.5rem; } /* -------------------- Responsive -------------------- */ @media (max-width: 860px) { .hero__grid { grid-template-columns: 1fr; } .hero__cards { margin-top: 2.2rem; } .how__cards, .trust__cards { grid-template-columns: 1fr; } .issue__grid { grid-template-columns: 1fr; } .issue__stage { margin-top: 0.5rem; } .cardx { max-width: 340px; } } /* -------------------- Reduced motion: static, tidy, stage-1 -------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }