/* Threshold — shared site styles (nav, footer, journal, article) */ :root{ --splash-top:#e2704a; --splash-bot:#b03818; --paper:#ffe8d4; --paper2:#ffc8a4; --deep:#f0a07c; --cream:#fff6ec; --cream2:#fffaf4; --sel:#ffd8b8; --clay:#b03818; --clay-light:#d06848; --clay-ink:#7a2810; --brown:#4a1408; --brown2:#5c3a2a; --soft:#8a6a58; --soft2:#6b4a38; --line:rgba(176,56,24,0.16); --btn:linear-gradient(100deg,#d06848,#b03818); /* the ring is the CREAM and the glow is the CLAY — Underweather's recipe in this app's palette. Must match index.html, which carries its own copy. */ --btn-ring:inset 0 1px 0 rgba(255,255,255,0.4), 0 0 0 2.5px rgba(255,246,236,0.7); --btn-glow:rgba(176,56,24,0.5); --serif:'Fraunces',Georgia,serif; --sans:'DM Sans',system-ui,sans-serif; } *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;} /* The warm paper colour is on too, so the browser never paints a white frame before styles land — that white frame WAS the flash. */ html{scroll-behavior:smooth;background:var(--paper);} /* Smooth page opening — a cross-document view transition where supported, and a soft fade-in everywhere else. Only ONE of the two ever runs: with view transitions on, the browser crossfades AND the body used to fade up from 0, which read as a double-fade — the "flash" going to the journal. */ @view-transition{navigation:auto;} ::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:cubic-bezier(.4,0,.2,1);} @keyframes pageFade{from{opacity:0}to{opacity:1}} body{font-family:var(--sans);color:var(--brown2);background:var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased;} @supports not (view-transition-name:none){ body{animation:pageFade .5s ease both;} } @media(prefers-reduced-motion:reduce){body{animation:none;} ::view-transition-old(root),::view-transition-new(root){animation:none;}} img{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} em{font-style:italic;} .wrap{max-width:1140px;margin:0 auto;padding:0 24px;} .narrow{max-width:720px;margin:0 auto;padding:0 24px;} .eyebrow{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--clay-ink);} .btn{display:inline-block;font-family:var(--sans);font-weight:700;font-size:16px;color:#fff;background:var(--btn);padding:16px 34px;border-radius:999px;box-shadow:var(--btn-ring), 0 9px 20px -6px var(--btn-glow);transition:transform .15s ease, box-shadow .15s ease;} .btn:hover{transform:translateY(-2px);box-shadow:var(--btn-ring), 0 14px 26px -6px var(--btn-glow);} .btn:focus-visible{outline:3px solid var(--clay);outline-offset:3px;} /* Pressed — the pill sinks and dims for as long as your finger/click is down, so a tap is acknowledged before the next page has even started loading. */ .btn:active{transform:translateY(1px) scale(.985);color:#fff;transition-duration:.06s; box-shadow:var(--btn-ring), 0 5px 12px -6px var(--btn-glow);} .btn.ghost{background:#fff;color:var(--clay-ink);box-shadow:0 10px 24px -14px rgba(74,20,8,.5);border:1.5px solid rgba(176,56,24,.3);} .btn.ghost:hover,.btn.ghost:active{box-shadow:0 10px 24px -14px rgba(74,20,8,.5);} /* NAV */ .nav{position:sticky;top:0;z-index:50;background:rgba(255,232,212,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);} .nav .row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;} .brand{display:flex;align-items:center;gap:11px;} .brand svg{width:40px;height:40px;} .brand .wm{font-family:var(--serif);font-optical-sizing:none;font-variation-settings:'opsz' 72,'wght' 450;font-weight:450;font-size:24px;letter-spacing:.005em;color:var(--brown);} .nav .links{display:flex;align-items:center;gap:30px;} /* Nav links carry their own underline: it wipes in from the left on hover, snaps to full width and darkens while pressed, and stays put on the current page — so "I clicked that" and "I'm here" are the same visual language. */ .nav .links a{position:relative;font-size:15px;color:var(--soft2);font-weight:600;transition:color .15s ease;} .nav .links a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;border-radius:2px;background:var(--clay);transform:scaleX(0);transform-origin:left center;transition:transform .22s cubic-bezier(.4,0,.2,1),background-color .15s ease;} .nav .links a:hover{color:var(--clay-ink);} .nav .links a:not(.btn):hover::after{transform:scaleX(1);} .nav .links a:not(.btn):active{color:var(--clay-ink);} .nav .links a:not(.btn):active::after{transform:scaleX(1);background:var(--clay-ink);height:2.5px;transition-duration:.06s;} .nav .links a:focus-visible{outline:3px solid var(--clay);outline-offset:4px;border-radius:4px;} /* The nav link rule out-specifies .btn, which was rendering the CTA's text in muted brown on a clay pill — unreadable. Restore white. */ .nav .links a.btn{color:#fff;} .nav .links a.btn:hover{color:#fff;} .nav .links a.active{color:var(--clay-ink);} .nav .links a.active:not(.btn)::after{transform:scaleX(1);} .nav .btn{padding:11px 24px;font-size:15px;} /* JOURNAL INDEX */ .jhero{background:linear-gradient(180deg,#ffe8d4,#ffc8a4);padding:64px 0 56px;text-align:center;} .jhero .eyebrow{margin-bottom:16px;} .jhero h1{font-family:var(--serif);font-weight:500;font-size:52px;line-height:1.05;letter-spacing:-.025em;color:var(--brown);} .jhero h1 em{font-style:italic;color:var(--clay);} .jhero p{font-size:19px;line-height:1.6;color:var(--soft2);max-width:52ch;margin:20px auto 0;font-weight:500;} .jsec{padding:64px 0 90px;} .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} /* crisp near-white card so it lifts off the warm page, with a defined warm band up top */ .post{background:#fffdf9;border:1.5px solid rgba(176,56,24,0.22);border-radius:26px;overflow:hidden;box-shadow:0 16px 32px -22px rgba(74,20,8,.5);transition:transform .15s ease,box-shadow .15s ease;display:flex;flex-direction:column;} .post:hover{transform:translateY(-3px);box-shadow:0 24px 46px -24px rgba(74,20,8,.5);} .post:active{transform:translateY(-1px) scale(.992);box-shadow:0 10px 22px -18px rgba(74,20,8,.5);transition-duration:.06s;} .post:focus-visible{outline:3px solid var(--clay);outline-offset:4px;} .post .ptop{display:none;} .post .pbody{padding:28px 26px 28px;display:flex;flex-direction:column;flex:1;background:linear-gradient(180deg,#ffd7b5,rgba(255,253,249,0) 52%);} .post .pdate{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--soft);font-weight:700;} .post h3{font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.26;color:var(--brown);margin:12px 0;} .post p{font-size:15.5px;line-height:1.6;color:var(--soft2);font-weight:500;} .post .more{font-size:15px;font-weight:700;color:var(--clay-ink);margin-top:auto;padding-top:18px;display:inline-block;} .jgroup{font-family:var(--serif);font-weight:600;font-size:15px;letter-spacing:1px;text-transform:uppercase;color:var(--clay);margin:52px 0 22px;} /* ARTICLE */ .article-head{background:linear-gradient(180deg,#ffe8d4,#ffdcc0);padding:52px 0 44px;} .article-head .crumb{font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--clay);margin-bottom:22px;} .article-head .crumb a{color:var(--clay);} .article-head h1{font-family:var(--serif);font-weight:500;font-size:44px;line-height:1.12;letter-spacing:-.02em;color:var(--brown);max-width:20ch;} .article-head h1 em{font-style:italic;color:var(--clay);} .article-head .meta{font-size:14px;color:var(--soft);font-weight:600;margin-top:20px;} .article-head .meta span{color:var(--clay-ink);} .article-hero{max-width:820px;margin:0 auto;padding:0 24px;} .article-hero img{width:100%;height:380px;object-fit:cover;object-position:center 26%;border-radius:24px;box-shadow:0 24px 50px -28px rgba(74,20,8,.55);} @media(max-width:860px){.article-hero img{height:240px;}} .article{padding:40px 0 24px;} .article p{font-size:18px;line-height:1.78;color:var(--brown2);margin:0 0 24px;} .article p.lead{font-size:21px;line-height:1.7;color:var(--soft2);font-weight:500;} .article h2{font-family:var(--serif);font-weight:600;font-size:28px;line-height:1.2;color:var(--brown);letter-spacing:-.01em;margin:44px 0 16px;} .article h2 em{font-style:italic;color:var(--clay);} .article ul{margin:0 0 24px 4px;padding:0;list-style:none;} .article ul li{position:relative;font-size:18px;line-height:1.7;color:var(--brown2);padding:0 0 12px 30px;} .article ul li::before{content:"";position:absolute;left:4px;top:12px;width:8px;height:8px;border-radius:50%;background:var(--clay-light);} .article a.inline{color:var(--clay-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(176,56,24,.4);} .article strong{color:var(--brown);font-weight:700;} /* pull-quote — hairlines top & bottom + quotation marks (matches the app's reading quote) */ .callout{text-align:center;margin:40px 0;padding:0;background:none;border:none;} .callout::before,.callout::after{content:"";display:block;height:1px;margin:0 30px;background:linear-gradient(90deg,transparent,rgba(176,56,24,.3),transparent);} .callout p{font-family:var(--serif);font-style:italic;font-weight:500;font-size:25px;line-height:1.4;color:var(--brown);margin:20px 18px;} .callout p::before{content:"\201C";color:var(--clay-light);font-weight:600;font-size:32px;line-height:0;vertical-align:-7px;margin-right:1px;} .callout p::after{content:"\201D";color:var(--clay-light);font-weight:600;font-size:32px;line-height:0;vertical-align:-13px;margin-left:1px;} .disclaimer{background:linear-gradient(160deg,#fff4ea,#ffe1c9);border:1px solid var(--line);border-radius:20px;padding:24px 26px;margin:44px 0 8px;} .disclaimer p{font-family:var(--serif);font-style:italic;font-size:16.5px;line-height:1.6;color:var(--soft2);margin:0;} .sources{margin:34px 0 0;padding-top:24px;border-top:1px solid var(--line);} .sources h4{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--soft);font-weight:700;margin-bottom:14px;} .sources a{display:block;font-size:15px;color:var(--clay-ink);margin-bottom:8px;text-decoration:underline;text-underline-offset:2px;} /* article app CTA */ .appcta{background:linear-gradient(160deg,var(--splash-top),var(--splash-bot));border-radius:28px;padding:44px 42px;margin:56px 0 20px;text-align:center;color:#fff;box-shadow:0 30px 60px -30px rgba(122,40,16,.6);} .appcta h3{font-family:var(--serif);font-weight:500;font-size:30px;line-height:1.18;margin-bottom:14px;} .appcta h3 em{font-style:italic;} .appcta p{font-size:17px;line-height:1.6;color:rgba(255,247,238,.94);max-width:48ch;margin:0 auto 24px;} .appcta .btn{background:#fff;color:var(--clay);} /* related */ .related{padding:16px 0 90px;} .related .rt{font-family:var(--serif);font-weight:600;font-size:15px;letter-spacing:1px;text-transform:uppercase;color:var(--clay);margin-bottom:22px;} .related .rgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;} /* FOOTER */ .foot{background:var(--brown);color:#f6d9c4;padding:56px 0 30px;} .foot .top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;} .foot .brand svg{width:40px;height:40px;} .foot .brand .wm{color:#fff;} .foot .cols{display:flex;gap:60px;flex-wrap:wrap;} .foot .col h4{font-family:var(--sans);font-size:13px;letter-spacing:2px;text-transform:uppercase;color:#e6a888;margin-bottom:14px;font-weight:700;} .foot .col a{display:block;font-size:15px;color:#f6d9c4;margin-bottom:10px;font-weight:500;} .foot .col a{transition:color .15s ease;} .foot .col a:hover{color:#fff;} .foot .col a:active{color:#ffc8a4;transition-duration:.06s;} .foot .col a:focus-visible{outline:2px solid #ffc8a4;outline-offset:3px;border-radius:3px;} .foot .fine{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;color:#d6a98d;} @media(max-width:860px){ .nav .links a:not(.jn){display:none;} .jhero h1{font-size:38px;} .article-head h1{font-size:32px;} .posts,.related .rgrid{grid-template-columns:1fr;} .sec{padding:32px 0;} /* index.html's own mobile value, copied not chosen */ .jsec{padding:48px 0 64px;} } /* ---- Features: editorial list (Option B) ----------------------------------- No cards. Hairlines, air, large serif — reads as a considered magazine page rather than a product grid. Icons now MATCH THE APP: heart (This week), sun (Reading), clock (Story), document (GP summary). The old set contradicted it — a sun for check-ins when the app uses the sun for readings. */ .flist{max-width:780px;margin:0 auto;} .frow{display:flex;gap:26px;align-items:flex-start;padding:30px 0; border-top:1px solid rgba(176,56,24,.18);} .frow:last-child{border-bottom:1px solid rgba(176,56,24,.18);} .fnum{font-family:var(--serif);font-size:15px;color:#c9a68c;flex:0 0 auto;width:26px;margin-top:11px;} .fic{flex:0 0 auto;width:36px;height:36px;margin-top:4px;} .fic svg{width:36px;height:36px;stroke:var(--clay);fill:none;stroke-width:1.4; stroke-linecap:round;stroke-linejoin:round;} .ftx h3{font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.2;color:var(--brown);} .ftx h3 em{font-style:italic;color:var(--clay);} .ftx p{font-size:16px;line-height:1.62;color:var(--soft2);margin-top:7px;max-width:58ch;} @media(max-width:720px){ .frow{gap:16px;padding:24px 0;} .fnum{display:none;} .fic,.fic svg{width:30px;height:30px;} .ftx h3{font-size:22px;} .ftx p{font-size:15px;} } /* Journal cards now lead with the article's own hero photo. */ .post .pimg{aspect-ratio:16/10;overflow:hidden;background:#f6dcc4;} .post .pimg img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .5s cubic-bezier(.22,1,.36,1);} .post:hover .pimg img{transform:scale(1.04);} .post .pbody{background:none !important;} /* ══════════════════════════════════════════════════════════════════════════ SHAPED LIGHT — arch forms behind glass. Added 12 August 2026. Mock: Threshold/mocks/website-design-v2-2026-08-12.html · Dan approved "yes arch is great". THE IDEA, IN ONE LINE: the translucent cards were already right, they just had nothing behind them worth seeing through. Every band now carries soft ARCH forms — Threshold's own mark, scaled past recognition and blurred to atmosphere — and the cards sit over them. 🔴 ARCHES, NOT BLOBS, AND THAT IS THE WHOLE POINT. A blurred blob is the default move and says nothing. The arch is already the mark, the app icon and what the name means. Blurred this far it still reads as THIS product rather than as generic gradient wallpaper. If anyone ever "simplifies" these to circles, the reason they exist is gone. 🔴 THE FORMS ARE PSEUDO-ELEMENTS ON PURPOSE — no markup was touched. Twelve pages share this sheet; adding divs would have meant twelve edits and twelve chances to leave one behind. It also means a page added later inherits the language for free. The cost is a two-form ceiling per band, which is enough. ⚠️ COLOURS COME FROM THE APP, NOT FROM THIS SITE. Terracotta, amber and plum are the app's own Today · This week · A moment tiles, so the site and the app finally share a palette. Do not introduce a fourth. ⚠️ THE AMBER IS DELIBERATELY WEAK. It shipped at ~.5 opacity on a mustard #c9a227 and Dan called it, exactly right: *"looks maybe a bit like spilled yellow curry."* It is now a lighter #dcb36a at roughly half strength — it warms the ground instead of pooling on it. If it ever looks timid, raise the TERRACOTTA, not this. ⚠️ EVERY BAND NEEDS `overflow:hidden` OR THE FORMS ESCAPE and paint over the section below. That is why the containment rule comes first and lists every band by name. ══════════════════════════════════════════════════════════════════════════ */ /* 1 · Containment + stacking. Children lift above the forms; without this the arches paint OVER the copy rather than behind it. */ .hero,.sec.tinted,.final,.jhero,.article-head,.appcta{ position:relative;overflow:hidden;isolation:isolate;} .hero>*,.sec.tinted>*,.final>*,.jhero>*,.article-head>*,.appcta>*{ position:relative;z-index:2;} /* 2 · The form itself — one shape, reused. Flat foot, shouldered top: an arch. */ .hero::before,.hero::after, .sec.tinted::before,.sec.tinted::after, .final::before,.final::after, .jhero::before,.jhero::after, .article-head::before,.article-head::after{ content:"";position:absolute;z-index:0;pointer-events:none; border-radius:50% 50% 10% 10% / 62% 62% 6% 6%; filter:blur(54px);} /* 3 · Placement, per band. Terracotta leads; amber and plum support. */ .hero::before{width:min(48vw,600px);height:min(52vw,660px);left:-10vw;top:-16%; background:linear-gradient(160deg,#ffd9b8,#e88a58);opacity:.5;} .hero::after{width:min(32vw,400px);height:min(36vw,470px);right:-7vw;bottom:-30%; background:linear-gradient(160deg,#f7e2b8,#dcb36a);opacity:.22;} /* ── 🔴🔴 `.sec` HAD NO PADDING AT ALL ON EVERY PAGE BUT THE HOMEPAGE ────────── 21 August 2026. Dan, reading About on an iPad: *"founder photo is too tight on header"* and *"private descriptive etc cards are too tight on next section.. soem mess on this about page.. please tidy."* 🔴 ONE MISSING RULE, AND IT IS THIS ONE. `index.html` carries its own inline stylesheet and defines `.sec{padding:80px 0}` there — **so the shared sheet never needed it and never got it.** Every `.sec` on about, contact and partners has been rendering with ZERO vertical padding, measured: the founder photo's top sat at **exactly** the header band's bottom edge (gap 0px), and the values section had 0 top and 0 bottom, so its heading started at the section's first pixel and its cards ended on its last. Nothing was "too tight" in the sense of a value being small — there was no value. ⚠️ THE NUMBERS ARE index.html's OWN, COPIED RATHER THAN CHOSEN — 80 and 60 — so the pages match the homepage instead of matching a fresh guess. 🔴 IT GOES IN THE SHARED SHEET, NOT IN about.html's `