/* ============================================================================ BigPandaPixel — shop stylesheet ---------------------------------------------------------------------------- ONE SYSTEM, TWO PRODUCTS. The shop chrome (nav, footer, buttons, the browser frame) is constant and indigo. Each product page sets --brand / --brand-deep / --brand-soft on , and every product-specific surface inherits from those three. That is what lets the olive ADHD planner and the forest-green debt tracker sit in the same shop without either one looking like a reskin of the other. Colour rule: anything carrying text is held to WCAG AA 4.5:1 against the ground it actually sits on. ============================================================================ */ /* ------------------------------------------------------------------ tokens */ :root { /* The ground is a soft grey-lilac, not cream. Cream is what every other digital-planner shop uses, and both products already own a cream of their own — the shop needs to not compete with them. */ --paper: #F1EFF3; --paper-deep: #E7E4EC; --surface: #FFFFFF; --surface-alt: #FAF9FB; --ink: #191622; --ink-soft: #55505F; --ink-faint: #635D6E; /* 4.9:1 on --paper, 5.9:1 on --surface */ --line: #E2DEE8; --line-strong: #CFC9DA; /* Shop accent. Indigo reads as software rather than stationery, which is the whole positioning, and it stays neutral between olive and forest. */ --accent: #5B3DF5; /* white on it: 6.10:1 */ --accent-deep: #4A2FD6; --accent-soft: #EDE9FE; /* Product brand — overridden per page. Defaults to the shop accent. */ --brand: #5B3DF5; --brand-deep: #4A2FD6; --brand-soft: #EDE9FE; --ok: #2F6B45; --warn-bg: #FBF3DF; --warn-ink: #7A5A16; --warn-line: #EBDCB4; --shadow-sm: 0 1px 2px rgba(25,22,34,.06), 0 2px 6px rgba(25,22,34,.04); --shadow-md: 0 2px 6px rgba(25,22,34,.06), 0 12px 28px rgba(25,22,34,.08); --shadow-lg: 0 4px 12px rgba(25,22,34,.08), 0 28px 64px rgba(25,22,34,.14); --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, -apple-system, sans-serif; --body: 'Instrument Sans', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif; --mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, ui-monospace, monospace; --wrap: 1120px; --r-sm: 8px; --r: 14px; --r-lg: 22px; } /* Per-product brand maps. Values come straight from each product.config.js so the site and the app it sells are never a shade apart. */ body.brand-adhd { --brand:#5F6B45; --brand-deep:#4A5436; --brand-soft:#EDF0E4; } body.brand-payoff { --brand:#3E7C55; --brand-deep:#326444; --brand-soft:#E6F0E9; } /* -------------------------------------------------------------------- base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* The masthead is sticky, so an anchor jump would otherwise park the heading underneath it. Clears the bar plus a little breathing room. */ [id] { scroll-margin-top: 88px; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; height: auto; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--accent-deep); } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 3px; } ::selection { background: var(--accent); color: #fff; } /* -------------------------------------------------------------- typography */ h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.08; letter-spacing: -0.022em; margin: 0 0 .5em; text-wrap: balance; } h1 { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 800; letter-spacing: -0.032em; } h2 { font-size: clamp(1.85rem, 4vw, 2.7rem); } h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); letter-spacing: -0.014em; } h4 { font-size: 1.02rem; letter-spacing: -0.006em; } p { margin: 0 0 1.1em; text-wrap: pretty; } p:last-child { margin-bottom: 0; } strong, b { font-weight: 600; color: var(--ink); } /* The eyebrow is a spec line, not decoration: it always states a hard fact about the file being sold. Mono, because these are file facts. */ .eyebrow { font-family: var(--mono); font-size: .715rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 1.1rem; display: flex; flex-wrap: wrap; gap: .4rem .85rem; align-items: center; } .eyebrow.center { justify-content: center; } .eyebrow .dot { color: var(--line-strong); } .lead { font-size: clamp(1.06rem, 1.9vw, 1.22rem); color: var(--ink-soft); line-height: 1.62; max-width: 62ch; } .lead.center { margin-inline: auto; } .center { text-align: center; } /* ------------------------------------------------------------------ layout */ .wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; } .wrap-narrow { width: min(100% - 2.5rem, 760px); margin-inline: auto; } .section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; } .section-tight { padding: clamp(2.5rem, 5vw, 4rem) 0; } .section-band { background: var(--surface); border-block: 1px solid var(--line); } .section-deep { background: var(--paper-deep); border-block: 1px solid var(--line); } .section-head { max-width: 66ch; margin: 0 0 clamp(2rem, 4vw, 3.2rem); } .section-head.center { margin-inline: auto; text-align: center; } .stack > * + * { margin-top: 1.1rem; } /* ------------------------------------------------------------------ header */ .masthead { position: sticky; top: 0; z-index: 60; background: rgba(241,239,243,.82); backdrop-filter: saturate(150%) blur(12px); -webkit-backdrop-filter: saturate(150%) blur(12px); border-bottom: 1px solid var(--line); } .masthead-in { display: flex; align-items: center; gap: 1.5rem; min-height: 66px; } .brandmark { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--display); font-weight: 800; font-size: 1.06rem; letter-spacing: -.02em; color: var(--ink); text-decoration: none; margin-right: auto; white-space: nowrap; } .brandmark:hover { color: var(--ink); } .brandmark .panda { font-size: 1.3rem; line-height: 1; filter: saturate(0); } .nav { display: flex; align-items: center; gap: 1.6rem; } .nav a { color: var(--ink-soft); text-decoration: none; font-size: .945rem; font-weight: 500; } .nav a:hover, .nav a[aria-current="page"] { color: var(--ink); } .nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; } @media (max-width: 720px) { .nav { gap: 1.05rem; } .nav .nav-hide { display: none; } .masthead-in { min-height: 58px; } } /* Small phones: the wordmark plus two nav links no longer fit on one line at full size, so both step down rather than pushing the header wide. */ @media (max-width: 430px) { .masthead-in { gap: .8rem; } .brandmark { font-size: .95rem; gap: .4rem; } .brandmark .panda { font-size: 1.1rem; } .nav { gap: .85rem; } .nav a { font-size: .88rem; } .switch-tabs label { font-size: .82rem; padding: .5rem .85rem; } } /* ----------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-family: var(--body); font-size: 1rem; font-weight: 600; line-height: 1; padding: .95rem 1.5rem; border-radius: 999px; border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--brand-deep); color: #fff; box-shadow: var(--shadow-md); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); } .btn-ghost:hover { background: var(--surface); color: var(--ink); border-color: var(--ink-faint); } .btn-lg { font-size: 1.06rem; padding: 1.1rem 1.9rem; } .btn-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: 1.8rem; } .btn-row.center { justify-content: center; } .btn-note { font-family: var(--mono); font-size: .74rem; color: var(--ink-faint); letter-spacing: .02em; margin-top: 1rem; } /* ========================================================================== THE SIGNATURE: the browser frame. Every screenshot on this site is shown inside a browser window whose address bar reads file:///… — because that is precisely what the buyer receives. A spreadsheet shop shows a grid; this shop shows a window with no server behind it. The offline pill is part of the argument, not chrome. ========================================================================== */ .frame { background: linear-gradient(180deg, #FFFFFF 0%, #FAF9FB 100%); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .frame-bar { display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; background: var(--surface-alt); border-bottom: 1px solid var(--line); } .frame-dots { display: flex; gap: .38rem; flex: none; } .frame-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-strong); display: block; } .frame-dots i:nth-child(1) { background: #E5A0A0; } .frame-dots i:nth-child(2) { background: #E8CFA0; } .frame-dots i:nth-child(3) { background: #AFCFA8; } /* Deliberately NOT a flex container. As flex, the nowrap URL became an unshrinkable flex item, pushed the frame past the viewport and gave the whole page a horizontal scrollbar on phones. As a block it ellipsises. */ .frame-url { flex: 1 1 auto; min-width: 0; display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .34rem .8rem; font-family: var(--mono); font-size: .73rem; color: var(--ink-faint); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .frame-url b { color: var(--ink-soft); font-weight: 500; } .frame-pill { flex: none; font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ok); background: #E9F2EC; border: 1px solid #CFE3D6; border-radius: 999px; padding: .3rem .6rem; line-height: 1; } @media (max-width: 560px) { .frame-pill { display: none; } .frame-url { font-size: .66rem; } } .frame-body { background: var(--surface); } .frame-body img { width: 100%; } /* ========================================================================== THE HERO DECK The frame carries a deck of screens per product rather than one still. Tabs pick the product, the deck advances itself, and the dots let you take it over. Without JavaScript the first slide is already in the markup and simply stays put — the hero never depends on the script to be legible. ========================================================================== */ /* minmax(0,1fr), not the implicit auto track. An auto-minimum track floors at the min-content of its contents, and a 1200px-wide screenshot with width:100% contributes its INTRINSIC width to that — which pushed the frame past the viewport on phones. */ .switcher { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; } /* Hidden until the script wires them up. Both the tabs and the dots only do anything through JavaScript, and a dead control is worse than no control — without it the hero is simply a still of the ADHD planner, and both products are presented in full two sections down. */ .switch-tabs { display: none; gap: .4rem; justify-content: center; flex-wrap: wrap; } .switch-tabs.is-live { display: flex; } .switch-tabs button { font-family: var(--body); font-size: .9rem; font-weight: 600; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .55rem 1.1rem; cursor: pointer; transition: background-color .14s ease, border-color .14s ease, color .14s ease; } .switch-tabs button:hover { border-color: var(--line-strong); color: var(--ink); } .switch-tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; } /* The stage. Slides stack and cross-fade; the box holds a 1:1 ratio so the page never reflows as they swap. */ .deck-stage { position: relative; aspect-ratio: 1 / 1; background: var(--surface); } .deck-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; } /* The incoming slide fades in ON TOP of the outgoing one, which simply holds until it is covered. Cross-fading both at once puts two opaque screenshots at 50% each in the middle of every transition, and the result is a washed-out ghost of the two. */ .deck-stage img.is-prev { opacity: 1; z-index: 1; transition: none; } .deck-stage img.is-on { opacity: 1; z-index: 2; } /* Pre-script, and with JS off entirely, the first slide shows on its own. */ .deck-stage:not(.is-live) img:first-child { opacity: 1; } .deck-foot { display: flex; align-items: center; gap: 1rem; padding: .85rem 1rem; border-top: 1px solid var(--line); background: var(--surface); } .deck-foot p { margin: 0; font-size: .9rem; color: var(--ink-soft); flex: 1 1 auto; min-width: 0; } .deck-dots { display: none; gap: .4rem; flex: none; } .deck-dots.is-live { display: flex; } .deck-dots button { width: 26px; height: 5px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; background: var(--line-strong); transition: background-color .3s ease; } .deck-dots button[aria-current="true"] { background: var(--ink); } .deck-dots button:hover { background: var(--ink-faint); } /* Side by side there is room for both; on a phone the caption was being squeezed into a four-line column beside the dots, so they stack instead. */ @media (max-width: 560px) { .deck-foot { flex-direction: column; align-items: flex-start; gap: .75rem; } .deck-foot p { font-size: .86rem; } } /* -------------------------------------------------------------------- hero */ .hero { padding: clamp(2.75rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 4.5rem); } .hero h1 { margin-bottom: .55rem; } .hero .lead { margin-bottom: 0; } .hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; } @media (max-width: 940px) { /* minmax(0,1fr) rather than 1fr — see the note on .switcher. */ .hero-split { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } } /* Wide enough that "A planner that actually runs." sets on one line at the top of the type scale instead of orphaning its last word. */ .hero-center { max-width: 880px; margin-inline: auto; text-align: center; } .hero-center .lead { max-width: 66ch; } .hero-center .lead { margin-inline: auto; } .hero-center .eyebrow { justify-content: center; } .hero-stage { margin-top: clamp(2.5rem, 5vw, 3.5rem); } /* ========================================================================== WATCH IT WORK Two demos, side by side. The left one is the argument the copy cannot make on its own — that there is nothing between the download and the working planner — so it is shown rather than claimed. The right one runs the real payoff arithmetic on a worked example. The left demo is pure CSS: three stages on one 7.92s loop, no script. Only the right demo needs JavaScript, because it has numbers to compute. ========================================================================== */ .demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: clamp(1.5rem, 3vw, 2.2rem); align-items: start; } .demo { background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } .demo-head { display: flex; align-items: center; gap: .6rem; padding: .9rem 1.15rem; border-bottom: 1px solid var(--line); background: var(--surface); } .demo-head i { width: 9px; height: 9px; border-radius: 50%; background: #E5A0A0; display: block; flex: none; } .demo-head span { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); } /* A fixed height keeps the two demos aligned and stops the download loop from resizing as its stages swap. The slider demo's text wraps more on a narrow screen, so below that the height becomes a floor rather than a ceiling. */ .demo-stage { position: relative; height: 330px; overflow: hidden; } @media (max-width: 560px) { .demo-stage.sim { height: auto; min-height: 330px; overflow: visible; } } .demo-foot { padding: 1.25rem 1.35rem 1.4rem; border-top: 1px solid var(--line); background: var(--surface); } .demo-foot h3 { font-size: 1.2rem; margin-bottom: .35rem; } .demo-foot p { color: var(--ink-soft); font-size: .94rem; margin: 0; } /* ------------------------------------------------- demo 1: download to open */ .dl { background: var(--paper); } .dl-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-md); } .dl-step { position: absolute; left: 50%; top: 50%; width: min(88%, 340px); transform: translate(-50%, -50%); opacity: 0; } .dl-step-1 { animation: dlStep1 7.92s linear infinite; } .dl-step-2 { animation: dlStep2 7.92s linear infinite; } .dl-step-3 { width: min(92%, 380px); animation: dlStep3 7.92s linear infinite; } .dl-step-1 .dl-card { padding: 1.1rem 1.2rem; } .dl-kicker { margin: 0 0 .6rem; font-family: var(--mono); font-size: .72rem; color: var(--ink-faint); letter-spacing: .06em; } .dl-file { margin: 0 0 .7rem; font-weight: 600; font-size: .95rem; } .dl-track { height: 6px; border-radius: 999px; background: var(--paper-deep); overflow: hidden; } .dl-bar { height: 100%; background: var(--accent); border-radius: 999px; width: 0; animation: dlFill 7.92s linear infinite; } .dl-labels { position: relative; height: 1.1rem; margin-top: .6rem; } .dl-labels span { position: absolute; inset: 0; font-family: var(--mono); font-size: .7rem; color: var(--ink-faint); } .dl-labels .a { animation: dlLabelA 7.92s linear infinite; } .dl-labels .b { opacity: 0; animation: dlLabelB 7.92s linear infinite; } .dl-step-2 .dl-card { padding: 1.6rem 1.2rem; text-align: center; position: relative; } .dl-icon { font-size: 2.4rem; line-height: 1; animation: dlPress 7.92s linear infinite; } .dl-step-2 p { margin: .7rem 0 0; font-family: var(--mono); font-size: .78rem; color: var(--ink-soft); } .dl-step-2 p + p { margin-top: .35rem; font-family: var(--body); font-size: .85rem; color: var(--ink-faint); } .dl-cursor { position: absolute; left: calc(50% + 14px); top: calc(50% - 6px); width: 16px; height: 16px; pointer-events: none; animation: dlNudge 7.92s linear infinite; } .dl-ring { position: absolute; left: -8px; top: -8px; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); opacity: 0; animation: dlRing 7.92s linear infinite; } .dl-win { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-lg); } .dl-win-bar { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; background: var(--surface-alt); border-bottom: 1px solid var(--line); } .dl-win-bar .frame-dots i { width: 8px; height: 8px; } .dl-win-url { flex: 1 1 auto; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .25rem .6rem; font-family: var(--mono); font-size: .62rem; color: var(--ink-faint); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dl-win-pill { flex: none; font-family: var(--mono); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ok); background: #E9F2EC; border: 1px solid #CFE3D6; border-radius: 999px; padding: .2rem .45rem; line-height: 1; } .dl-win img { width: 100%; height: 150px; object-fit: cover; object-position: top; } /* One 7.92s loop, three 2.64s stages: the file arrives, you double-click it, it opens. Percentages below are stage boundaries at 33.33% and 66.67%. */ @keyframes dlStep1 { 0%, 30% { opacity: 1; transform: translate(-50%, -50%); } 33.33%, 100% { opacity: 0; transform: translate(-50%, -58%); } } @keyframes dlFill { 0% { width: 0; } 28.8%, 33.33% { width: 100%; } 33.34%, 100% { width: 0; } } @keyframes dlLabelA { 0%, 26% { opacity: 1; } 29%, 100% { opacity: 0; } } @keyframes dlLabelB { 0%, 26% { opacity: 0; } 29%, 100% { opacity: 1; } } @keyframes dlStep2 { 0%, 32.5% { opacity: 0; } 33.33%, 65.8% { opacity: 1; } 66.67%, 100% { opacity: 0; } } @keyframes dlPress { 0%, 45.4% { transform: scale(1); } 45.5%, 50% { transform: scale(.9); } 50.1%, 100% { transform: scale(1); } } @keyframes dlNudge { 0%, 45.4% { transform: translate(0, 0); } 45.5%, 50% { transform: translate(-2px, -2px); } 50.1%, 100% { transform: translate(0, 0); } } @keyframes dlRing { 0%, 45.4% { opacity: 0; transform: scale(1); } 45.5% { opacity: .5; transform: scale(1); } 53%, 100% { opacity: 0; transform: scale(2.2); } } @keyframes dlStep3 { 0%, 66% { opacity: 0; transform: translate(-50%, -50%) scale(.9); } 70%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } } /* --------------------------------------------- demo 2: the payment slider */ .sim { background: var(--surface); padding: 1.35rem 1.4rem; height: 330px; } .sim-kicker { margin: 0; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); } .sim-date { margin: .2rem 0 0; font-family: var(--display); font-size: clamp(2rem, 4.6vw, 2.8rem); font-weight: 800; letter-spacing: -.035em; line-height: 1; color: #3E7C55; } .sim-sub { margin: .35rem 0 0; font-size: .9rem; color: var(--ink-soft); } .sim-row { display: flex; justify-content: space-between; align-items: baseline; } .sim-row span:first-child { font-size: .88rem; color: var(--ink-soft); } .sim-extra { font-family: var(--mono); font-weight: 600; font-size: 1rem; color: var(--ink); } .sim-track { position: relative; margin-top: .7rem; height: 8px; border-radius: 999px; background: var(--paper-deep); } .sim-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 999px; background: #3E7C55; } .sim-knob { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 2px solid #3E7C55; box-shadow: var(--shadow-sm); } .sim-cursor { position: absolute; top: calc(50% + 6px); left: 0; width: 16px; height: 16px; pointer-events: none; } .sim-scale { display: flex; justify-content: space-between; margin-top: 1.1rem; font-family: var(--mono); font-size: .68rem; color: var(--ink-faint); } .sim-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1.1rem; } .sim-card { background: #E6F0E9; border-radius: var(--r); padding: .85rem 1rem; } .sim-card p:first-child { margin: 0; font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: #326444; } .sim-card p + p { margin: .25rem 0 0; font-family: var(--display); font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: #326444; } /* Motion here is the whole point of the section, so rather than freezing it into something meaningless we park each demo on its most informative frame: the planner open, and the slider at the full $400. */ @media (prefers-reduced-motion: reduce) { .dl-step-1, .dl-step-2, .dl-bar, .dl-icon, .dl-cursor, .dl-ring, .dl-labels .a, .dl-labels .b { animation: none; } .dl-step-1, .dl-step-2 { opacity: 0; } .dl-labels .a { opacity: 0; } .dl-labels .b { opacity: 1; } .dl-step-3 { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); } } /* ------------------------------------------------------- price + buy block */ .pricebox { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2rem); box-shadow: var(--shadow-md); } .pricebox .price { font-family: var(--display); font-size: clamp(2.6rem, 6vw, 3.4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1; color: var(--ink); } .pricebox .price small { display: block; font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-top: .7rem; } .pricebox .btn { width: 100%; margin-top: 1.35rem; } .tickset { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .6rem; } .tickset li { display: grid; grid-template-columns: 1.15rem 1fr; gap: .6rem; align-items: start; font-size: .945rem; color: var(--ink-soft); line-height: 1.5; } .tickset li::before { content: ""; width: 1.15rem; height: 1.15rem; margin-top: .18rem; border-radius: 50%; background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px var(--brand); } /* ------------------------------------------------------------ product card */ .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: clamp(1.5rem, 3vw, 2.2rem); } .product-card { --brand: var(--accent); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); } .product-card.card-adhd { --brand:#5F6B45; --brand-deep:#4A5436; --brand-soft:#EDF0E4; } .product-card.card-payoff { --brand:#3E7C55; --brand-deep:#326444; --brand-soft:#E6F0E9; } .product-card .shot { background: var(--brand-soft); border-bottom: 1px solid var(--line); aspect-ratio: 1 / 1; overflow: hidden; } .product-card .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .product-card:hover .shot img { transform: scale(1.025); } .product-card .body { padding: clamp(1.35rem, 2.5vw, 1.8rem); display: flex; flex-direction: column; flex: 1; } .product-card .kicker { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); font-weight: 500; margin-bottom: .7rem; } .product-card h3 { margin-bottom: .45rem; } .product-card p { color: var(--ink-soft); font-size: .96rem; } .product-card .card-foot { margin-top: auto; padding-top: 1.3rem; display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; } .product-card .card-price { font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: -.03em; } /* ------------------------------------------------------------- feature row */ .feature { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(1.8rem, 4vw, 3.5rem); align-items: center; } .feature + .feature { margin-top: clamp(3rem, 6vw, 5rem); } /* Alternating sides. The .section-head is the first child of the container, so the features themselves are children 2, 3, 4… — which is why this reads `odd` to put the FIRST feature's text on the left. Text leads, then the two swap down the page. */ .feature:nth-child(odd) .feature-text { order: 2; } @media (max-width: 880px) { .feature { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; } .feature:nth-child(odd) .feature-text { order: 0; } } .feature-text h3 { margin-bottom: .6rem; } .feature-text p { color: var(--ink-soft); } .feature-tag { display: inline-block; font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); background: var(--brand-soft); border-radius: 999px; padding: .32rem .7rem; margin-bottom: .9rem; } .feature-shot { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-md); background: var(--surface); } /* --------------------------------------------------------------- card grid */ .cardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(258px, 100%), 1fr)); gap: 1.1rem; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.5rem; box-shadow: var(--shadow-sm); } .card h4 { margin-bottom: .45rem; } .card p { color: var(--ink-soft); font-size: .93rem; margin: 0; } .card .glyph { font-size: 1.5rem; line-height: 1; display: block; margin-bottom: .85rem; } /* ------------------------------------------------------- screens / contents The list of screens inside a planner. Mono index, because these are parts of one file, not chapters. */ .screens { display: grid; gap: .55rem; } .screen-row { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: baseline; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.05rem 1.25rem; } .screen-row .idx { font-family: var(--mono); font-size: .74rem; font-weight: 500; color: var(--brand); letter-spacing: .06em; } .screen-row b { font-weight: 600; display: block; margin-bottom: .15rem; } .screen-row span { color: var(--ink-soft); font-size: .93rem; line-height: 1.55; } /* ------------------------------------------------------------------- steps A real sequence — you cannot open the file before you download it — so the numbering carries information rather than decorating the section. */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 1.1rem; counter-reset: step; } .step { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.6rem 1.35rem 1.35rem; counter-increment: step; } .step::before { content: counter(step, decimal-leading-zero); font-family: var(--mono); font-size: .74rem; font-weight: 600; letter-spacing: .1em; color: var(--brand); display: block; margin-bottom: .8rem; } .step h4 { margin-bottom: .35rem; } .step p { color: var(--ink-soft); font-size: .92rem; margin: 0; } /* --------------------------------------------------------------- spec table The honest specification. Mono throughout: it is a datasheet, and the "no" rows are as much of the pitch as the "yes" rows. */ .spec { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; font-size: .94rem; } .spec caption { caption-side: top; text-align: left; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); padding-bottom: .75rem; } .spec th, .spec td { text-align: left; padding: .85rem 1.15rem; border-bottom: 1px solid var(--line); vertical-align: top; } .spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; } .spec th { font-weight: 500; color: var(--ink-soft); width: 42%; font-family: var(--mono); font-size: .8rem; letter-spacing: .01em; } .spec td { color: var(--ink); font-weight: 500; } .spec td.no { color: var(--ink-faint); font-weight: 400; } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* On a phone, three columns squeezed into 320px wrap into unreadable slivers. Give the table a floor and let .table-scroll scroll it instead — the page itself still never scrolls sideways. */ @media (max-width: 620px) { .spec { min-width: 540px; } .spec th, .spec td { padding: .75rem .9rem; } } /* ----------------------------------------------------------------- gallery */ .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 1rem; } .gallery a { display: block; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; } .gallery a:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } /* --------------------------------------------------------------------- FAQ */ .faq { display: grid; gap: .6rem; } .faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .faq details[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm); } .faq summary { cursor: pointer; list-style: none; padding: 1.15rem 3rem 1.15rem 1.35rem; font-weight: 600; font-size: 1.01rem; position: relative; color: var(--ink); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 1.25rem; font-weight: 400; color: var(--brand); line-height: 1; } .faq details[open] summary::after { content: "–"; } .faq summary:hover { background: var(--surface-alt); } .faq .answer { padding: 0 1.35rem 1.3rem; color: var(--ink-soft); font-size: .97rem; } .faq .answer > *:first-child { margin-top: 0; } /* ------------------------------------------------------------------- quote */ .quote { border-left: 3px solid var(--brand); padding: .2rem 0 .2rem 1.4rem; margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.45rem); font-family: var(--display); font-weight: 500; letter-spacing: -.015em; line-height: 1.38; color: var(--ink); } /* ------------------------------------------------------------------ callout */ .callout { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--r); padding: 1.25rem 1.45rem; color: var(--warn-ink); font-size: .95rem; } .callout strong { color: var(--warn-ink); } .callout p:last-child { margin-bottom: 0; } .note { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--r-sm); padding: 1.15rem 1.35rem; font-size: .93rem; color: var(--ink-soft); } .note p:last-child { margin-bottom: 0; } /* ---------------------------------------------------------------- final CTA */ .finale { background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 3rem); text-align: center; } .finale h2 { color: #fff; } .finale p { color: #C9C3D6; max-width: 54ch; margin-inline: auto; } .finale .eyebrow { color: #9B94AD; justify-content: center; } .finale .btn-ghost { color: #fff; border-color: rgba(255,255,255,.32); } .finale .btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.6); } .finale .btn-note { color: #9B94AD; } /* ------------------------------------------------------------------ footer */ .footer { background: var(--surface); border-top: 1px solid var(--line); padding: clamp(2.5rem, 5vw, 3.5rem) 0 2rem; margin-top: clamp(3rem, 7vw, 5rem); } .footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 2rem; padding-bottom: 2.2rem; border-bottom: 1px solid var(--line); } .footer h5 { font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .9rem; } .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; } .footer ul a { color: var(--ink-soft); text-decoration: none; font-size: .93rem; } .footer ul a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .footer .blurb { color: var(--ink-soft); font-size: .93rem; max-width: 38ch; margin: .9rem 0 0; } .colophon { padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between; align-items: center; font-size: .84rem; color: var(--ink-faint); } .colophon p { margin: 0; } /* -------------------------------------------------------------- legal pages Long-form reading: narrower measure, quieter headings, numbered clauses. */ .legal { background: var(--surface); } .legal-head { padding: clamp(2.5rem, 5vw, 3.75rem) 0 clamp(1.5rem, 3vw, 2rem); border-bottom: 1px solid var(--line); } .legal-head h1 { font-size: clamp(2rem, 4.5vw, 2.9rem); margin-bottom: .4rem; } .legal-head .updated { font-family: var(--mono); font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); } .legal-body { padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 4rem); font-size: 1rem; } .legal-body h2 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); margin: 2.6rem 0 .8rem; padding-top: 1.6rem; border-top: 1px solid var(--line); } .legal-body h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; } .legal-body h3 { font-size: 1.05rem; margin: 1.7rem 0 .5rem; } .legal-body p, .legal-body li { color: var(--ink-soft); } .legal-body ul, .legal-body ol { padding-left: 1.25rem; margin: 0 0 1.1em; } .legal-body li { margin-bottom: .5rem; } .legal-body li::marker { color: var(--ink-faint); } .toc { background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--r); padding: 1.35rem 1.5rem; margin-bottom: 2.5rem; } .toc h5 { font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .8rem; } .toc ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; } .toc li { margin-bottom: .4rem; break-inside: avoid; } .toc a { color: var(--ink-soft); text-decoration: none; font-size: .92rem; } .toc a:hover { color: var(--accent); text-decoration: underline; } @media (max-width: 620px) { .toc ol { columns: 1; } } /* ------------------------------------------------------------------ contact */ .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1.2rem; } .contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.6rem; } .contact-card h3 { font-size: 1.12rem; margin-bottom: .5rem; } .contact-card p { color: var(--ink-soft); font-size: .94rem; } .contact-card .addr { font-family: var(--mono); font-size: .95rem; color: var(--accent); word-break: break-all; display: inline-block; margin-top: .3rem; } /* -------------------------------------------------------------- utilities */ .mono { font-family: var(--mono); font-size: .92em; } .muted { color: var(--ink-faint); } .mt-0 { margin-top: 0; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; } .skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 var(--r-sm) 0; z-index: 100; text-decoration: none; } .skip:focus { left: 0; color: #fff; } /* ------------------------------------------------------------ motion, print */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .btn:hover, .product-card:hover, .gallery a:hover { transform: none; } .product-card:hover .shot img { transform: none; } } @media print { .masthead, .finale, .btn, .gallery, .switch-tabs { display: none !important; } body { background: #fff; font-size: 11pt; } .frame { box-shadow: none; border: 1px solid #ccc; } a { color: inherit; text-decoration: none; } } /* ---------------------------------------------------- planner catalogue */ /* One brand colour per category, so the grouping is visible before the kicker is read. .product-card already falls back to the shop indigo, so these only need to override; every value clears 4.5:1 against the white card surface the kicker is printed on (checked, not guessed — the lowest is money at 4.98:1). The first two match the accents the ADHD and Payoff pages already use, so a card and its landing page agree. */ .product-card.cat-focus { --brand:#5F6B45; --brand-deep:#4A5436; --brand-soft:#EDF0E4; } .product-card.cat-money { --brand:#3E7C55; --brand-deep:#326444; --brand-soft:#E6F0E9; } .product-card.cat-health { --brand:#A8433C; --brand-deep:#8C3830; --brand-soft:#F7E9E7; } .product-card.cat-business { --brand:#45558C; --brand-deep:#384775; --brand-soft:#E9ECF6; } .product-card.cat-home { --brand:#6B4E8C; --brand-deep:#594075; --brand-soft:#F0EAF7; } /* Category jump links under the catalogue hero. */ .catnav { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 2rem; } .catnav a { font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .5rem .9rem; text-decoration: none; transition: border-color .18s ease, color .18s ease, transform .18s ease; } .catnav a:hover { color: var(--accent); border-color: var(--line-strong); transform: translateY(-1px); } /* The catalogue's section headings sit left, unlike the homepage's centred ones, so the eye can run straight down the five groups. */ .catnav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .catnav a:hover { transform: none; } } /* Spacing for the homepage link through to the full catalogue. Lives here rather than in a style attribute because the site ships a CSP without unsafe-inline, which drops inline style attributes on the floor. */ .btn-row.catalogue-cta { margin-top: 2.4rem; } /* Two rules recovered from inline style attributes. The site ships a CSP without unsafe-inline, so style="..." is dropped by the browser and these were silently having no effect. */ .sim-controls { margin-top: 1.35rem; } .spec .spec-col { width: 29%; }