/* ========================================================================== ThinkNirvana — site.css · CANONICAL DESIGN SYSTEM · v2 (frozen) System of record. Do not fork per page. Import this; don't redefine tokens. Palette: forest-green "Nirvana" identity. Type: Playfair / Lato / Courier. Model: dark-forest brand BANDS + light cream reading SURFACES. Big type. Cache-bust by filename (site.v2.css), never ?v=. Frozen at the Block-A storefront handoff. v1→v2 fixes: --forest-lt in .tn-note (was undefined --forest-light); .tn-brand small bumped to .68rem (no sub-12px). ========================================================================== */ /* ---- Fonts (load in with preconnect + display=swap): https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400;1,700&family=Lato:wght@400;700;900&family=Courier+Prime&display=swap ---- */ :root{ /* Brand palette — sample --forest exactly from the logo source (≈#0D2B1E–#06231c) */ --cream:#faf7f2; /* page background (light surfaces) */ --paper:#fffdf9; /* cards / raised */ --forest:#0D2B1E; /* deep forest — nav, hero, bands, footer */ --forest-mid:#1D9E75; /* identity accent — links, CTAs, active */ --forest-deep:#0a3d29; /* accent hover */ --forest-lt:#9FE1CB; /* sage highlight / on-dark accent (the ensō) */ --forest-pale:#E1F5EE; /* soft feature background */ --ink:#1c1a17; /* headings */ --ink-soft:#3d3830; /* body */ --ink-muted:#6f675c; /* labels / captions */ --gold:#c9a227; /* rare rule only */ --border:#ddd5c8; /* hairlines (light) */ --border-dk:rgba(255,255,255,.12); /* hairlines (on forest) */ /* Type scale — LARGE (Robinhood-grade). Fluid clamps. */ --f-display:'Playfair Display',Georgia,serif; --f-body:'Lato',system-ui,-apple-system,sans-serif; --f-mono:'Courier Prime',ui-monospace,monospace; --h1:clamp(3rem,8vw,5.7rem); --h2:clamp(2.4rem,5.2vw,3.9rem); --h3:clamp(1.8rem,3vw,2.4rem); --deck:clamp(1.3rem,2.4vw,1.65rem); --body:1.14rem; /* ~21.6px at 19px root */ --small:.95rem; /* smallest UI text — NO sub-12px */ --r:12px; --r-lg:20px; --ease:180ms ease; --wrap:1200px; --pad:clamp(22px,5vw,44px); --sec:clamp(70px,10vw,124px); --shadow:0 22px 60px rgba(13,43,30,.12); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;font-size:19px;} /* big base */ body{font-family:var(--f-body);background:var(--cream);color:var(--ink-soft); line-height:1.6;font-size:1.06rem;-webkit-font-smoothing:antialiased;} img{max-width:100%;display:block;} a{color:var(--forest-mid);text-decoration:none;transition:color var(--ease);} a:hover{color:var(--forest-deep);} :focus-visible{outline:2px solid var(--forest-mid);outline-offset:3px;border-radius:6px;} /* ---- Layout primitives ---- */ .tn-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);} .tn-section{padding:var(--sec) 0;} .tn-band--pale{background:var(--forest-pale);border-top:1.5px solid var(--border);border-bottom:1.5px solid var(--border);} .tn-band--forest{background:var(--forest);color:#fff;} .tn-band--forest a{color:var(--forest-lt);} /* On-forest legibility (WCAG): lift muted/ink text to light on dark bands */ .tn-band--forest .tn-deck,.tn-band--forest .tn-sub{color:rgba(255,255,255,.82);} .tn-band--forest .tn-sub a{color:var(--forest-lt);} .tn-band--forest .tn-hero__tag{color:rgba(255,255,255,.62);} /* ---- Type ---- */ .tn-kicker{font-family:var(--f-mono);font-size:var(--small);letter-spacing:.12em; text-transform:uppercase;color:var(--forest-mid);display:block;margin-bottom:22px;} .tn-band--forest .tn-kicker{color:var(--forest-lt);} .tn-h1{font-family:var(--f-display);font-weight:800;color:var(--ink);font-size:var(--h1); line-height:1.01;letter-spacing:-.025em;} .tn-h2{font-family:var(--f-display);font-weight:700;color:var(--ink);font-size:var(--h2); line-height:1.08;letter-spacing:-.02em;} .tn-band--forest .tn-h1,.tn-band--forest .tn-h2{color:#fff;} .tn-h1 em,.tn-h2 em{font-style:italic;color:var(--forest-mid);} .tn-deck{font-size:var(--deck);color:var(--ink-soft);line-height:1.5;max-width:34ch;} .tn-sub{font-size:clamp(1.2rem,2vw,1.4rem);color:var(--ink-muted);max-width:46ch;line-height:1.5;} /* ---- Buttons (active-voice labels; keep the same word through a flow) ---- */ .tn-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-body);font-weight:700; font-size:1.15rem;padding:18px 34px;border-radius:var(--r);cursor:pointer;border:2px solid transparent; transition:all var(--ease);min-height:60px;} .tn-btn--forest{background:var(--forest-mid);color:#fff;border-color:var(--forest-mid);} .tn-btn--forest:hover{background:var(--forest-deep);border-color:var(--forest-deep);color:#fff;} .tn-btn--ghost{background:transparent;color:var(--ink);border-color:var(--border);} .tn-btn--ghost:hover{border-color:var(--forest-mid);color:var(--forest-mid);} .tn-btn--onDark{background:#fff;color:var(--forest);border-color:#fff;} .tn-btn--onDark:hover{background:var(--forest-lt);border-color:var(--forest-lt);color:var(--forest);} /* ---- Ensō signature mark (SVG uses currentColor; background-aware) ---- forest-mid on cream, forest-lt (sage) on forest. Drop in the real asset when available. */ .tn-enso{display:block;color:var(--forest-mid);} .tn-band--forest .tn-enso,.tn-nav .tn-enso{color:var(--forest-lt);} /* ---- Nav (forest band; lean; working burger) ---- */ .tn-nav{background:var(--forest);position:sticky;top:0;z-index:60;} .tn-nav__in{display:flex;align-items:center;justify-content:space-between;height:82px;} .tn-brand{display:flex;align-items:center;gap:14px;color:#fff;} .tn-brand .tn-enso{width:46px;height:46px;} .tn-brand b{font-family:var(--f-display);font-weight:700;font-size:1.5rem;line-height:1;} .tn-brand b i{font-style:normal;color:var(--forest-lt);} .tn-brand small{display:block;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.22em; color:rgba(255,255,255,.5);margin-top:3px;} .tn-nav__right{display:flex;align-items:center;gap:34px;} .tn-nav__links{display:flex;align-items:center;gap:32px;} .tn-nav__links a{color:rgba(255,255,255,.85);font-size:1.06rem;white-space:nowrap;} .tn-nav__links a:hover{color:#fff;} .tn-nav__cta{background:var(--forest-mid);color:#fff;font-weight:700;font-size:1rem; padding:12px 22px;border-radius:var(--r);white-space:nowrap;transition:background var(--ease);} .tn-nav__cta:hover{background:#22b385;color:#fff;} .tn-burger{display:none;flex-direction:column;gap:6px;padding:10px;background:none;border:0;cursor:pointer;} .tn-burger span{width:28px;height:2.5px;background:#fff;transition:var(--ease);} .tn-menu{display:none;background:var(--forest-deep);} .tn-menu.is-open{display:block;} .tn-menu a{display:block;color:rgba(255,255,255,.9);padding:20px var(--pad); border-top:1px solid var(--border-dk);font-size:1.2rem;} @media(max-width:880px){.tn-nav__links,.tn-nav__cta{display:none;}.tn-burger{display:flex;}} /* ---- Hero ---- */ .tn-hero{padding:clamp(64px,9vw,104px) 0 clamp(48px,7vw,76px);} .tn-hero .tn-h1{max-width:15ch;margin-bottom:26px;} .tn-hero .tn-deck{margin-bottom:22px;} .tn-hero__tag{font-family:var(--f-mono);font-size:var(--small);letter-spacing:.14em; text-transform:uppercase;color:var(--ink-muted);margin-bottom:34px;} .tn-hero__actions{display:flex;gap:16px;flex-wrap:wrap;} /* ---- Static proof strip (NEVER a scrolling ticker) ---- */ .tn-proof{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:40px 0;} .tn-proof__n{font-family:var(--f-display);font-weight:700;font-size:clamp(1.9rem,3.4vw,2.7rem); color:var(--forest);line-height:1;} .tn-proof__l{font-size:.98rem;color:var(--ink-muted);margin-top:8px;line-height:1.4;} @media(max-width:820px){.tn-proof{grid-template-columns:1fr 1fr;gap:26px;}} /* ---- Tool / product cards (the "tout all tools" grid) ---- */ .tn-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:clamp(46px,7vw,68px);} @media(max-width:900px){.tn-cards{grid-template-columns:1fr;}} .tn-card{background:var(--paper);border:1.5px solid var(--border);border-radius:var(--r-lg); padding:clamp(30px,4vw,40px);display:flex;flex-direction:column; transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease);} .tn-card:hover{transform:translateY(-6px);border-color:var(--forest-mid);box-shadow:var(--shadow);} .tn-card--soon{background:transparent;border-style:dashed;} .tn-card__badge{align-self:flex-start;font-family:var(--f-mono);font-size:.86rem;letter-spacing:.06em; text-transform:uppercase;color:var(--forest-mid);background:var(--forest-pale); padding:7px 14px;border-radius:30px;margin-bottom:24px;} .tn-card h3{font-family:var(--f-display);font-weight:700;font-size:var(--h3);color:var(--ink); line-height:1.1;margin-bottom:14px;} .tn-card p{font-size:var(--body);color:var(--ink-soft);line-height:1.55;margin-bottom:28px;flex:1;} .tn-card__go{font-size:1.1rem;font-weight:700;color:var(--forest-mid);display:inline-flex; align-items:center;gap:9px;transition:gap var(--ease);} .tn-card:hover .tn-card__go{gap:14px;} .tn-card__attr{margin-top:14px;font-family:var(--f-mono);font-size:.78rem;color:var(--ink-muted); letter-spacing:.04em;} /* e.g. "Operated by ThinkNirvana LLC" on Plan Vector */ /* ---- Pillars / values (dark band; 3 promises) ---- */ .tn-vals{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:52px;} @media(max-width:820px){.tn-vals{grid-template-columns:1fr;gap:38px;}} .tn-val__ic{width:56px;height:56px;color:var(--forest-lt);margin-bottom:22px;} .tn-val__pill{font-family:var(--f-mono);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase; color:var(--forest-lt);margin-bottom:14px;display:block;} .tn-val h4{font-family:var(--f-display);font-weight:600;font-size:1.6rem;color:#fff;margin-bottom:12px;} .tn-val p{font-size:1.12rem;color:rgba(255,255,255,.72);line-height:1.55;max-width:32ch;} /* ---- Learn list ---- */ .tn-guides{display:grid;grid-template-columns:repeat(2,1fr);gap:0 60px;margin-top:52px;} @media(max-width:760px){.tn-guides{grid-template-columns:1fr;}} .tn-guide{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 0; border-top:1px solid var(--border);color:var(--ink);} .tn-guide:hover{color:var(--forest-mid);} .tn-guide span{font-family:var(--f-display);font-size:clamp(1.3rem,2.2vw,1.65rem);font-weight:600;} .tn-guide em{font-style:normal;font-family:var(--f-mono);font-size:1.4rem;color:var(--forest-mid);} /* ---- Audience filter (Playbook / News grids) ---- */ .tn-filter{display:flex;flex-wrap:wrap;gap:10px;margin:32px 0;} .tn-filter button{font-family:var(--f-mono);font-size:.82rem;letter-spacing:.05em;text-transform:uppercase; padding:9px 16px;border-radius:30px;border:1.5px solid var(--border);background:transparent; color:var(--ink-muted);cursor:pointer;transition:all var(--ease);} .tn-filter button[aria-pressed="true"]{background:var(--forest);color:#fff;border-color:var(--forest);} /* ---- Content / video card (Playbook, News) ---- */ .tn-media{background:var(--paper);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden; transition:transform var(--ease),border-color var(--ease);} .tn-media:hover{transform:translateY(-4px);border-color:var(--forest-mid);} .tn-media__body{padding:24px 26px;} .tn-media__tag{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase; color:var(--forest-mid);} .tn-media h4{font-family:var(--f-display);font-size:1.28rem;color:var(--ink);margin:8px 0 10px;line-height:1.2;} .tn-media p{font-size:.98rem;color:var(--ink-muted);line-height:1.5;} .tn-media__meta{margin-top:14px;font-family:var(--f-mono);font-size:.74rem;color:var(--ink-muted);} /* ---- FAQ (details/summary) ---- */ .tn-faq{border-top:1px solid var(--border);} .tn-faq details{border-bottom:1px solid var(--border);padding:6px 0;} .tn-faq summary{list-style:none;cursor:pointer;padding:22px 0;font-family:var(--f-display); font-size:1.28rem;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px;} .tn-faq summary::-webkit-details-marker{display:none;} .tn-faq summary::after{content:'+';color:var(--forest-mid);font-size:1.5rem;} .tn-faq details[open] summary::after{content:'–';} .tn-faq p{padding:0 0 22px;font-size:1.05rem;color:var(--ink-soft);max-width:64ch;line-height:1.6;} /* ---- Editorial / anchored sentence (exactly one per page) ---- */ .tn-editorial{max-width:34ch;} .tn-editorial .tn-lead{font-family:var(--f-display);font-style:italic; font-size:clamp(1.6rem,3vw,2.2rem);color:var(--ink);line-height:1.4;} .tn-editorial .tn-lead b{font-style:normal;font-weight:700;color:var(--forest-mid);} /* ---- Article prose (learn / news bodies) ---- */ .tn-prose{font-size:var(--body);line-height:1.75;color:var(--ink-soft);} .tn-prose h2{font-family:var(--f-display);font-weight:700;color:var(--ink);font-size:var(--h3); line-height:1.15;letter-spacing:-.01em;margin:44px 0 14px;} .tn-prose h3{font-family:var(--f-display);font-weight:600;color:var(--ink);font-size:1.4rem;margin:30px 0 10px;} .tn-prose p{margin-bottom:18px;} .tn-prose ul,.tn-prose ol{margin:0 0 18px 1.2em;} .tn-prose li{margin-bottom:8px;} .tn-prose blockquote{font-family:var(--f-display);font-style:italic;font-size:clamp(1.4rem,2.4vw,1.9rem); color:var(--ink);line-height:1.4;border-left:3px solid var(--forest-mid);padding:6px 0 6px 24px;margin:34px 0;} .tn-prose a{color:var(--forest-mid);text-decoration:underline;text-decoration-color:var(--forest-lt);text-underline-offset:3px;} .tn-note{background:var(--forest-pale);border:1.5px solid var(--forest-lt);border-radius:var(--r); padding:22px 26px;margin:34px 0;font-size:1.05rem;line-height:1.65;color:var(--ink-soft);} .tn-note b{color:var(--forest-deep);} /* ---- CTA band (light, calm) ---- */ .tn-cta{background:var(--forest-pale);border-top:1.5px solid var(--border); border-bottom:1.5px solid var(--border);text-align:center;} .tn-cta .tn-h2{margin-bottom:16px;} .tn-cta p{font-size:1.28rem;color:var(--ink-muted);max-width:40ch;margin:0 auto 32px;} /* ---- Footer (forest; carries entity disclosure) ---- */ .tn-footer{background:var(--forest);color:rgba(255,255,255,.6);padding:clamp(54px,8vw,80px) 0 36px;} .tn-footer__top{display:grid;grid-template-columns:2.4fr 1fr 1fr;gap:48px;margin-bottom:44px;} @media(max-width:720px){.tn-footer__top{grid-template-columns:1fr;gap:32px;}} .tn-footer__brand b{font-family:var(--f-display);font-size:1.5rem;color:#fff;display:block;margin-bottom:10px;} .tn-footer__brand b i{font-style:normal;color:var(--forest-lt);} .tn-footer__brand p{font-size:1.02rem;max-width:38ch;line-height:1.55;} .tn-legal{margin-top:16px;font-family:var(--f-mono);font-size:.76rem;letter-spacing:.05em; color:rgba(255,255,255,.4);line-height:1.7;} .tn-footer h5{font-family:var(--f-mono);font-size:.82rem;text-transform:uppercase;letter-spacing:.12em; color:var(--forest-lt);margin-bottom:18px;} .tn-footer__col a{display:block;color:rgba(255,255,255,.62);font-size:1.04rem;margin-bottom:13px;} .tn-footer__col a:hover{color:#fff;} .tn-footer__hr{border:none;border-top:1px solid var(--border-dk);margin-bottom:24px;} .tn-footer__bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px; font-size:.92rem;color:rgba(255,255,255,.45);} /* ---- Motion (scroll reveal) + reduced-motion + quality floor ---- */ .tn-reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease;} .tn-reveal.is-in{opacity:1;transform:none;} @media(prefers-reduced-motion:reduce){ *{scroll-behavior:auto!important;} .tn-reveal{opacity:1!important;transform:none!important;transition:none!important;} .tn-card:hover,.tn-media:hover{transform:none;} } /* JS hook (storefront supplies): toggle .is-open on .tn-menu; IntersectionObserver adds .is-in to .tn-reveal */