/* ===================================================================== THE WELL BEING OF WATER — ONE LOOK PER KIND OF ACTION 1 Main action ......... navy pill, one per screen .pill-navy 2 Listen .............. round play + sound wave + length .lsn (and every listen button) 3 Go somewhere ........ teal words + arrow, no underline .go (and .pill-line outside the hero) 4 Small tools ......... icon + short label in a row .tool (save, copy, print, email…) 5 Choose / filter ..... chips (unchanged) 6 Tiles ............... the whole card is the link, lifts .way .rail-card .hl-t .scard .next Links inside sentences: teal and a little bolder; the underline shows only on hover or keyboard focus. ===================================================================== */ :root{--go:#0f6d83;--go-h:#0b5566;--lift:0 2px 4px rgba(18,53,91,.06),0 14px 34px rgba(18,53,91,.14)} /* ---------- links inside sentences ---------- */ main p a:not([class]),main li a:not([class]),main dd a:not([class]),main .fine a:not([class]),main .crumbs a, .faq a:not([class]),.more-link,.hf-link,.bb-send a,.grief-door a,.thanks-more a,.j-status a,.p-jump a{ color:var(--go)!important;font-weight:600;text-decoration:none!important;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .25s,color .2s} main p a:not([class]):hover,main li a:not([class]):hover,main .fine a:not([class]):hover,main .crumbs a:hover,.faq a:not([class]):hover,.more-link:hover,.hf-link:hover, main p a:not([class]):focus-visible,.more-link:focus-visible,.hf-link:focus-visible{background-size:100% 1.5px;color:var(--go-h)!important} main .crumbs a{font-weight:500} /* ---------- 3 · go somewhere: teal words and an arrow that slides ---------- */ .go,main .pill-line:not(.buy-btn):not(.keep):not(.wy-badge){ display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:.35rem .2rem;border:0!important;background:none!important;box-shadow:none!important; color:var(--go)!important;font:600 1rem var(--ui);text-decoration:none!important;cursor:pointer;border-radius:8px} .go::after,main .pill-line:not(.buy-btn):not(.keep):not(.wy-badge):not(.has-arrow)::after{content:"→";display:inline-block;transition:transform .2s} .go:hover::after,main .pill-line:not(.buy-btn):not(.keep):not(.wy-badge):hover::after{transform:translateX(4px)} .go:hover,main .pill-line:not(.buy-btn):not(.keep):not(.wy-badge):hover{color:var(--go-h)!important} main .pill-line .arr{display:none} .go.back::after{content:none}.go.back::before{content:"←";transition:transform .2s}.go.back:hover::before{transform:translateX(-4px)} /* ---------- 2 · listen: always a round play button, a sound wave, and the length ---------- */ .lsn,.hl-play,.today-listen,.ls-link,.ls-today,.ls-wy,#env-listen,.tb-listen, button.pill[data-listen],.pill.ls-btn{ display:inline-flex!important;align-items:center;gap:.6rem;min-height:48px;padding:.3rem 1rem .3rem .3rem!important;border-radius:999px!important; border:1.5px solid var(--edge)!important;background:#fff!important;color:var(--navy)!important;font:600 .98rem var(--ui)!important;cursor:pointer; box-shadow:0 1px 3px rgba(18,53,91,.08)!important;text-decoration:none!important;white-space:nowrap;transition:border-color .2s,box-shadow .2s,transform .2s} .lsn:hover,.hl-play:hover,.today-listen:hover,.ls-link:hover,.ls-today:hover,.ls-wy:hover,#env-listen:hover,button.pill[data-listen]:hover{border-color:var(--navy)!important;box-shadow:var(--lift)!important} .lsn .ls-dot,.ls-btn .ls-dot,.hl-play .ls-dot,.today-listen .ls-dot,.ls-link .ls-dot,.ls-today .ls-dot,.ls-wy .ls-dot,button.pill[data-listen] .ls-dot,.lsn-dot{ width:40px!important;height:40px!important;flex:0 0 40px;border-radius:50%!important;background:var(--navy)!important;color:#fff!important;display:inline-grid!important;place-items:center} /* the sound wave: drawn bars, gently moving while her voice plays */ .lsn::after,.ls-btn::after,.hl-play::after,.today-listen::after,.ls-link::after,.ls-today::after,.ls-wy::after,#env-listen::after,button.pill[data-listen]::after,.ls-chip::after{ content:"";order:2;width:38px;height:18px;flex:0 0 38px;background:var(--teal);opacity:.75; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 18'%3E%3Cg fill='%23000'%3E%3Crect x='0' y='7' width='3' height='4' rx='1.5'/%3E%3Crect x='5' y='4' width='3' height='10' rx='1.5'/%3E%3Crect x='10' y='1' width='3' height='16' rx='1.5'/%3E%3Crect x='15' y='5' width='3' height='8' rx='1.5'/%3E%3Crect x='20' y='2' width='3' height='14' rx='1.5'/%3E%3Crect x='25' y='6' width='3' height='6' rx='1.5'/%3E%3Crect x='30' y='3' width='3' height='12' rx='1.5'/%3E%3Crect x='35' y='7' width='3' height='4' rx='1.5'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 18'%3E%3Cg fill='%23000'%3E%3Crect x='0' y='7' width='3' height='4' rx='1.5'/%3E%3Crect x='5' y='4' width='3' height='10' rx='1.5'/%3E%3Crect x='10' y='1' width='3' height='16' rx='1.5'/%3E%3Crect x='15' y='5' width='3' height='8' rx='1.5'/%3E%3Crect x='20' y='2' width='3' height='14' rx='1.5'/%3E%3Crect x='25' y='6' width='3' height='6' rx='1.5'/%3E%3Crect x='30' y='3' width='3' height='12' rx='1.5'/%3E%3Crect x='35' y='7' width='3' height='4' rx='1.5'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat} .lsn:hover::after,.hl-play:hover::after,.today-listen:hover::after,.ls-link:hover::after,button.pill[data-listen]:hover::after{animation:wave 1.2s ease-in-out infinite} @keyframes wave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.55)}} .lsn .ls-time,.hl-play .ls-time{order:3;font-weight:500;color:var(--ink-3,#5d6b7a)} /* the big one: "Play all thirteen" */ .lsn-big{min-height:58px;padding:.35rem 1.4rem .35rem .35rem!important;font-size:1.05rem!important} .lsn-big .lsn-dot{width:48px!important;height:48px!important;flex-basis:48px} @media(prefers-reduced-motion:reduce){.lsn:hover::after,.hl-play:hover::after{animation:none}} /* ---------- 4 · small tools: an icon and a short word ---------- */ .tools{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem} .tool,.j-acts .pill,.send-alt a,.send-alt button,.send-more summary,.bld-more button,.env-links button{ display:inline-flex!important;align-items:center;gap:.45rem;min-height:40px;padding:.35rem .8rem!important;border-radius:10px!important;border:1px solid transparent!important; background:rgba(18,53,91,.05)!important;color:var(--navy)!important;font:600 .9rem var(--ui)!important;text-decoration:none!important;cursor:pointer;box-shadow:none!important;transition:background .2s} .tool:hover,.j-acts .pill:hover,.send-alt a:hover,.send-alt button:hover,.send-more summary:hover,.bld-more button:hover,.env-links button:hover{background:rgba(18,53,91,.1)!important} .tool::before,.j-acts .pill::before,.send-alt a::before,.send-alt button::before,.bld-more button::before,.env-links button::before{ content:"";width:17px;height:17px;flex:0 0 17px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat} .send-alt,.bld-more,.j-acts{display:flex!important;flex-wrap:wrap;justify-content:center;gap:.4rem!important} .send-alt>span{display:none} /* icons */ [data-j=email],[data-act=email],#bld-email{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E")} [data-j=print],#bld-print{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6'/%3E%3Crect x='3' y='9' width='18' height='8' rx='2'/%3E%3Cpath d='M6 14h12v7H6z'/%3E%3C/svg%3E")} [data-act=copy],[data-act=insta],#bld-copy,#bld-copylink{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h8'/%3E%3C/svg%3E")} [data-act=save],#bld-save,#env-save{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0-5-5m5 5 5-5M4 19h16'/%3E%3C/svg%3E")} [data-act=story],#bld-story{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='3'/%3E%3Cpath d='M12 8v6m0 0-3-3m3 3 3-3'/%3E%3C/svg%3E")} [data-act=facebook]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8h3V4h-3a4 4 0 0 0-4 4v2H7v4h3v8h4v-8h3l1-4h-4V8a0 0 0 0 1 0 0z'/%3E%3C/svg%3E")} #bld-open,[data-act=build]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E")} .send-more summary::after{content:"⌄"!important;margin-left:.1rem} /* "Make it your own" is a go-link, not a tool */ .send-build button{color:var(--go)!important;text-decoration:none!important;font-weight:600} .send-build button span{display:inline-block;transition:transform .2s}.send-build button:hover span{transform:translateX(4px)} /* ---------- 6 · tiles: the whole thing is the link, and it lifts ---------- */ .way,.rail-card,.hl-list li,.scard,.next-tile,.tb-cover,.today-img,.bld-thumb{transition:transform .25s ease,box-shadow .25s ease} .way:hover,.rail-card:hover,.hl-list li:hover,.scard:hover,.next-tile:hover,.bld-thumb:hover{transform:translateY(-3px);box-shadow:var(--lift)} .today-img:hover,.tb-cover:hover{transform:translateY(-3px) rotate(-.5deg)} /* ---------- Keep going: three next steps at the end of a page ---------- */ .next{max-width:1000px;margin:0 auto} .next-h{font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--navy);text-align:center;margin:0 0 1.2rem} .next-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem} .next-tile{display:flex;flex-direction:column;gap:.35rem;padding:1.2rem 1.25rem 1.1rem;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);color:var(--navy);text-decoration:none;text-align:left;font:inherit;cursor:pointer} .next-ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--gold-bg);color:var(--gold-ink);margin-bottom:.25rem} .next-ic.n-listen{background:var(--navy);color:#fff} .next-k{font:600 .72rem var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)} .next-t{font:italic 500 1.2rem/1.25 var(--display);color:var(--navy)} .next-s{font:400 .92rem/1.45 var(--ui);color:var(--ink-3,#5d6b7a)} .next-go{margin-top:auto;padding-top:.4rem;font:600 .92rem var(--ui);color:var(--go)} .next-go::after{content:"→";margin-left:.35rem;display:inline-block;transition:transform .2s} .next-tile:hover .next-go::after{transform:translateX(4px)} .next-foot{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:1.4rem} @media(max-width:760px){.next-row{grid-template-columns:1fr}.next-tile{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:.9rem}.next-ic{margin:0}.next-tile>div{flex:1;min-width:0}.next-go{display:none}} /* ---------- the path through the thirteen passages ---------- */ .path{display:flex;justify-content:center;align-items:center;gap:.4rem;margin:1rem 0 0;flex-wrap:wrap} .path a{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--teal-l);background:#fff;padding:0;transition:transform .2s} .path a.read{background:var(--teal-l)} .path a.heard{background:var(--teal);border-color:var(--teal)} .path a[aria-current]{transform:scale(1.45);border-color:var(--navy);background:var(--navy)} .path a:hover{transform:scale(1.35)} .path-l{font:500 .82rem var(--ui);color:var(--ink-3,#5d6b7a);margin-left:.5rem} .resume{display:inline-flex;align-items:center;gap:.5rem;margin-top:.8rem;font:600 .95rem var(--ui);color:var(--go)} /* ---------- feedback: a soft check when something is done ---------- */ .share-toast::before{content:"✓";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--teal);color:#fff;font-size:.8rem;margin-right:.55rem;vertical-align:-.05em} .pill-navy:active,.lsn:active,.tool:active,.next-tile:active{transform:scale(.98)} .ls-btn small{order:3;font:500 .9rem var(--ui);color:#5d6b7a} /* ===================================================================== PRECISION: two widths, one button height, clean line breaks Widths: WIDE 1068px for grids and cards, READING 680px for text. Every section lines up to one or the other. Heights: every button 50px (main, outline, listen). Small tools, chips and icon buttons 40px. Text links 44px tap area. Lines: headings balanced; paragraphs never end on one lonely word; "~ a phrase" stays together. ===================================================================== */ :root{--wide:1068px;--read:680px} .home-listen .hl-list,.today,.rv-slider,#ways .ways,#book .world{max-width:var(--wide)!important;margin-left:auto!important;margin-right:auto!important} .rv-track{padding-left:0!important;padding-right:0!important} .today{padding:2.2rem!important} /* one height for every button */ main .pill-navy,main .pill.buy-btn,.lsn,.lsn-big,.ls-btn,.pill.ls-btn,.hl-play,.today-listen,button.pill[data-listen],.send-main,.bld-sec .send-main{min-height:50px!important;padding-top:.3rem!important;padding-bottom:.3rem!important;box-sizing:border-box} .lsn .lsn-dot,.lsn-big .lsn-dot,.ls-btn .ls-dot,.hl-play .ls-dot,button.pill[data-listen] .ls-dot{width:38px!important;height:38px!important;flex-basis:38px} .lsn-big{font-size:1rem!important} .tool,.j-acts .pill,.send-alt a,.send-alt button,.send-more summary,.bld-more button,.env-links button,.bld-chip,.deck .aff-send,.deck-arrows button{min-height:40px!important;box-sizing:border-box} .deck .aff-send,.deck-arrows button{width:40px} /* rows: everything on one centre line, nothing stretched */ .ctas,.hl-ctas,.send-alt,.next-foot,.j-acts,.hf-links,.hero-buy{align-items:center!important} .ctas>*{align-self:center} /* clean line breaks */ main h1,main h2,main h3,main .lede,main .next-t,main .way b,main .hl-tx,main .v-title,main .aff-line,main .wc-card>p,main .pc-line,main .lab,main .send-h,main .today blockquote,main .page-head .fine{text-wrap:balance} main p,main li,main blockquote,main .way span,main figcaption,main .q{text-wrap:pretty} .keep{white-space:nowrap} /* the send panel: one alignment per column */ .send-compact .send-alt,.send-compact .send-src{justify-content:flex-start!important;text-align:left!important} @media(max-width:760px){.send-compact .send-panel{text-align:center}.send-compact .send-alt,.send-compact .send-src{justify-content:center!important;text-align:center!important}.send-compact .send-build{text-align:center}.send-compact .add-note{margin-left:auto;margin-right:auto}} /* the trust line under the buy buttons: two clean lines */ .hero-trust .ht-a,.hero-trust .ht-b{white-space:nowrap} @media(max-width:900px){.hero-trust .ht-b{display:block}.hero-trust .ht-dot{display:none}} .rv-track{margin-left:0!important;margin-right:0!important} #book .world{width:100%} @media(max-width:700px){#book .wrap{padding-left:1.25rem!important;padding-right:1.25rem!important}#book .world{border-radius:18px}} .ls-link{white-space:normal!important;max-width:100%;text-align:left} @media(max-width:600px){#buybox{margin-left:0!important;margin-right:0!important}} /* words never break in the middle */ main h1,main h2,main h3,main p,main li,main span,main b,main blockquote{overflow-wrap:normal;word-break:normal;hyphens:manual} /* phones: the listen buttons in the list show only play + length, so titles have room */ @media(max-width:600px){ .hl-play::after{display:none!important} .hl-play{padding-right:.8rem!important;gap:.45rem} .hl-list li{gap:.5rem} .pc-line{width:84%;font-size:.8rem} } .pc-line{text-wrap:pretty} @media(max-width:600px){.pc-line{font-size:.74rem;width:88%;padding:.55rem .6rem}} .wc-card .lab{align-self:stretch;width:100%;box-sizing:border-box} .send-compact .send-more{text-align:left} @media(max-width:760px){.send-compact .send-more{text-align:center}} /* no underlines in the footer either */ footer a{text-decoration:none!important;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .25s} footer a:hover,footer a:focus-visible{background-size:100% 1px} .rail-btn,.rv-btn{width:40px!important;height:40px!important;min-height:40px!important} .wc-card .ls-btn{min-width:0!important;width:auto!important} main .j-acts .pill{background:rgba(18,53,91,.05)!important;color:var(--navy)!important;padding:.35rem .8rem!important} main .j-acts .pill::after{content:none!important}