/* ================================================================ LipeLight — public site. Purple to pink, same tokens as the app so the two read as one product. MOBILE FIRST. Every rule here is the phone rule; the three min-width blocks at the bottom are the only place a wider layout is described. Most of this audience is on a phone on a slow connection, so the phone stylesheet is not the fallback. BIDIRECTIONAL. Layout uses logical properties — padding-inline, inset-inline-start, border-inline-start, text-align:start — so the whole site mirrors from the single dir="rtl" on with no duplicate rule set. The handful of things that genuinely cannot mirror (gradient angles) are pinned and marked. Typography that is wrong for Arabic — letter-spacing severs cursive joins, there is no Arabic uppercase and no Arabic italic — lives in custom properties and is flipped once in :root:lang(ar), not in fourteen override rules. No framework, no CDN, no external font. Everything is same-origin. ================================================================ */ :root{ --plum:#3b0d4f; --grape:#7c3aed; --grape-d:#6d28d9; --orchid:#a855f7; --lilac:#c084fc; --pink:#db2777; --pink-d:#be185d; --rose:#f472b6; --blush:#fce7f3; --petal:#f5edff; --mist:#faf7ff; --white:#fff; --ink:#2e1038; --muted:#6b5576; --faint:#9a89a4; --line:#eee3f5; --line-2:#e2d3ee; --bg:#fdfaff; --good:#0f9d76; --warn:#c2740a; --bad:#d1345b; --grad:linear-gradient(120deg,#7c3aed 0%,#a855f7 45%,#db2777 100%); --grad-soft:linear-gradient(120deg,#f5edff 0%,#fce7f3 100%); --shadow:0 1px 2px rgba(88,28,135,.05),0 8px 24px rgba(147,51,234,.07); --shadow-md:0 4px 14px rgba(147,51,234,.10),0 14px 40px rgba(219,39,119,.08); --r:18px; --r-sm:11px; --font-body:"Urbanist",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-head:"Playfair Display",Georgia,"Times New Roman",serif; --track-tight:-.01em; --track-wide:.07em; --track-label:.16em; --caps:uppercase; --quote-style:italic; --measure:38rem; /* article line length */ } /* Arabic is cursive: letter-spacing pulls the joins apart and turns a word into loose glyphs. There is no Arabic uppercase, so text-transform is a no-op, and no Arabic italic — a synthesised oblique reads as a rendering fault. Tajawal covers Latin too, so "keto" inside an Arabic sentence does not fall back mid-word into a different face. */ :root:lang(ar){ --font-body:"Tajawal","Segoe UI","Geeza Pro","Noto Naskh Arabic",Tahoma,sans-serif; --font-head:"Tajawal","Segoe UI","Geeza Pro","Noto Naskh Arabic",Tahoma,sans-serif; --track-tight:0; --track-wide:0; --track-label:0; --caps:none; --quote-style:normal; --measure:36rem; /* Arabic sets denser; a shorter line reads better */ } *{box-sizing:border-box} html,body{margin:0;padding:0;width:100%;overflow-x:hidden} /* overflow-x:hidden computes overflow-y to `auto`, which makes a scroll container — and every position:sticky on this site then sticks to a box that never scrolls, because the document scrolls on . The site header, the blog sidebar, the article contents and the self-check rail were all declared sticky and none of them stuck; the header simply scrolled away like any other element and nothing anywhere said so. `clip` clips exactly the same overflow WITHOUT creating a scroll container, which is what was wanted in the first place. Behind @supports so the browsers that do not have it keep the old behaviour rather than losing the clip and scrolling sideways — which is the bug the hidden was added for (see the note about the RTL off-canvas .hp further down). */ @supports (overflow:clip){ html,body{overflow-x:clip} } html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation-duration:.01ms !important;transition-duration:.01ms !important} } body{ font-family:var(--font-body); color:var(--ink); line-height:1.7; font-size:17px; background:var(--bg); background-image: radial-gradient(900px 460px at 8% -6%,rgba(168,85,247,.13),transparent 62%), radial-gradient(700px 400px at 100% 2%,rgba(244,114,182,.12),transparent 60%); background-repeat:no-repeat; min-height:100vh; } :lang(ar) body{line-height:1.85} img,svg,video{max-width:100%;height:auto} a{color:var(--grape-d);text-underline-offset:3px} a:hover{color:var(--pink)} :focus-visible{outline:3px solid var(--orchid);outline-offset:2px;border-radius:4px} .skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:200;background:#fff; padding:12px 18px;border-radius:0 0 var(--r-sm) var(--r-sm);font-weight:700} .skip:focus{inset-inline-start:0} /* ---------- type ---------- */ h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;line-height:1.22; letter-spacing:var(--track-tight);color:var(--plum);margin:0 0 .45em} h1{font-size:2rem} h2{font-size:1.45rem} h3{font-size:1.12rem} p{margin:0 0 1.1em} .eyebrow{font-size:.72rem;letter-spacing:var(--track-label);text-transform:var(--caps); color:var(--orchid);font-weight:800;margin:0 0 .7em;display:block} .lead{font-size:1.1rem;color:var(--muted);line-height:1.65} .muted{color:var(--muted)} .small{font-size:.88rem} .center{text-align:center} .ico{flex:0 0 auto;vertical-align:-.18em} /* ---------- layout ---------- */ .wrap{width:100%;max-width:1060px;margin-inline:auto;padding-inline:18px} .wrap.narrow{max-width:var(--measure)} .pad-y{padding-block:36px} .sec{padding-block:38px} .sec-soft{background:var(--grad-soft);border-block:1px solid var(--line)} /* A section head sits over a full-width grid in every single place it is used, so it centres over that grid. Left-aligning it meant the heading and its 38rem lead hugged the start edge while the tiles under them ran the whole 1024px — the layout read as "the content is only on half the screen", which is exactly what it was. */ .sec-head{margin-bottom:22px;text-align:center} .sec-head .lead{margin-bottom:0} .sec-head:not(.sec-head-split)>*{margin-inline:auto} /* A section head that carries a lead paragraph is TWO blocks, and centring them one above the other gave the section two unrelated left edges: the heading and the tile grid under it started at the page edge, the lead started 250px further in. Nothing lined up with anything. Wide enough, they sit side by side and the pair spans exactly the width of the grid below — so the whole section has one start edge and one end edge. Section heads with no lead (a bare h2) stay centred; there is no second block to pair them with. */ @media (min-width:900px){ .sec-head-split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:44px;align-items:end;text-align:start;margin-bottom:30px} .sec-head-split>*{margin-inline:0;max-width:none} .sec-head-split .sh-l>*,.sec-head-split .sh-r>*{margin-inline:0;max-width:none} .sec-head-split h2{margin-bottom:0} .sec-head-split .lead{margin-bottom:0} .sec-head-split .eyebrow{margin-bottom:.6em} } .card{background:var(--white);border:1px solid var(--line);border-radius:var(--r); padding:20px;box-shadow:var(--shadow)} .grid{display:grid;gap:14px} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; background:var(--grad);color:#fff;border:1px solid transparent;border-radius:var(--r-sm); padding:13px 22px;font-size:.98rem;font-weight:700;font-family:var(--font-body); cursor:pointer;text-decoration:none;min-height:50px; box-shadow:0 4px 14px rgba(168,85,247,.26);transition:transform .08s ease,box-shadow .15s ease} .btn:hover{color:#fff;box-shadow:0 6px 20px rgba(219,39,119,.32)} .btn:active{transform:translateY(1px)} .btn-ghost{background:var(--white);color:var(--grape-d);border-color:var(--line-2);box-shadow:none} .btn-ghost:hover{background:var(--petal);color:var(--grape-d);border-color:var(--lilac);box-shadow:none} .btn-sm{padding:8px 15px;min-height:40px;font-size:.85rem;border-radius:9px} .btn-row{display:flex;flex-wrap:wrap;gap:11px;align-items:center} /* ---------- header ---------- */ .site-head{background:var(--grad);color:#fff;position:sticky;top:0;z-index:50; box-shadow:0 6px 22px rgba(124,58,237,.20)} .head-in{display:flex;align-items:center;justify-content:space-between;gap:12px; flex-wrap:wrap;padding-block:11px} .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit} .brand:hover{color:inherit} .brand-mark{width:36px;height:36px;border-radius:11px;background:rgba(255,255,255,.16); padding:3px;display:block} .brand-txt{display:flex;flex-direction:column;line-height:1.15} .brand-title{font-family:var(--font-head);font-weight:700;font-size:1.12rem} .brand-sub{font-size:.65rem;color:rgba(255,255,255,.8);font-weight:700; letter-spacing:var(--track-wide);text-transform:var(--caps)} /* Mobile nav: a checkbox and a sibling selector. No JS on this site at all — a menu that needs a script is a menu that is missing on a flaky connection. */ .navtoggle{position:absolute;opacity:0;pointer-events:none} .navbtn{width:44px;height:44px;border-radius:11px;display:grid;place-content:center;gap:5px; cursor:pointer;background:rgba(255,255,255,.14)} .navbtn span{display:block;width:20px;height:2px;background:#fff;border-radius:2px} .nav{display:none;width:100%;flex-direction:column;gap:2px;padding-bottom:10px} .navtoggle:checked ~ .nav{display:flex} .nav a{color:rgba(255,255,255,.9);text-decoration:none;padding:11px 12px;border-radius:9px; font-weight:700;font-size:.95rem} .nav a:hover,.nav a.on{background:rgba(255,255,255,.16);color:#fff} .nav a.lang{border:1px solid rgba(255,255,255,.35);margin-top:6px;text-align:center} .nav .nav-cta{background:#fff;color:var(--grape-d);text-align:center;box-shadow:none;margin-top:6px} .nav .nav-cta:hover{background:var(--blush);color:var(--pink-d)} /* ---------- hero ---------- */ .hero{padding-block:34px 30px} .hero-h1{font-size:2.15rem;margin-bottom:.35em} .hero .lead{max-width:34rem} .hero-media{margin-top:24px;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-md); position:relative;aspect-ratio:16/10} .hero-media img{width:100%;height:100%;object-fit:cover;display:block} .hero-note{font-size:.85rem;color:var(--muted);margin-top:14px} .hero-note .ico{color:var(--good)} /* ---------- feature / sign / step grids ---------- */ .tiles{display:grid;gap:13px} .tile{background:var(--white);border:1px solid var(--line);border-radius:var(--r); padding:18px;box-shadow:var(--shadow)} .tile .ring{width:42px;height:42px;border-radius:13px;display:grid;place-items:center; background:var(--grad-soft);color:var(--grape-d);margin-bottom:11px} .tile h3{margin-bottom:.3em;font-size:1.05rem} .tile p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.6} .steps{counter-reset:step;display:grid;gap:13px} .step{background:var(--white);border:1px solid var(--line);border-radius:var(--r); padding:18px 18px 18px 18px;box-shadow:var(--shadow);position:relative} .step::before{counter-increment:step;content:counter(step); display:grid;place-items:center;width:34px;height:34px;border-radius:50%; background:var(--grad);color:#fff;font-weight:800;font-size:.95rem;margin-bottom:10px} .step h3{margin-bottom:.25em;font-size:1.05rem} .step p{margin:0;color:var(--muted);font-size:.95rem} /* ---------- prose blocks on the landing page ---------- --measure caps the LINE LENGTH, which is right and stays. What was wrong is that a capped block also inherited the wrap's start edge, so every paragraph on the page sat in the first 60% of it. The cap belongs to the text; the block belongs in the middle of the space it was given. */ .prose-block{max-width:var(--measure);margin-inline:auto} .prose-block p:last-child{margin-bottom:0} /* ---------- FAQ ---------- */ .faq{display:grid;gap:10px;max-width:var(--measure);margin-inline:auto} .faq details{background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm); box-shadow:var(--shadow)} .faq summary{cursor:pointer;padding:15px 17px;font-weight:700;color:var(--plum); list-style:none;display:flex;gap:10px;align-items:flex-start} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";margin-inline-start:auto;color:var(--orchid);font-weight:800; font-size:1.2rem;line-height:1} .faq details[open] summary::after{content:"–"} .faq .a{padding:0 17px 16px;color:var(--muted);font-size:.96rem} .faq .a p:last-child{margin-bottom:0} /* ---------- medical disclaimer ---------- Rendered in the footer of every page and again at the top of every post. A reader who lands on one article from search must meet it before the article, not after it. */ .disclaimer{display:flex;gap:12px;align-items:flex-start; background:var(--mist);border:1px solid var(--line-2); border-inline-start:4px solid var(--orchid); border-radius:var(--r-sm);padding:14px 16px;margin-block:18px; font-size:.9rem;line-height:1.6;color:var(--muted)} .disclaimer strong{color:var(--plum)} .disclaimer-ico{color:var(--orchid);flex:0 0 auto;margin-top:2px} .disclaimer-foot{background:rgba(255,255,255,.7);margin-block:0 26px} /* ---------- breadcrumbs ---------- */ .crumbs{margin:0 0 14px} .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0; font-size:.82rem;color:var(--faint)} .crumbs li+li::before{content:"/";margin-inline-end:6px;color:var(--line-2)} .crumbs a{color:var(--muted);text-decoration:none} .crumbs a:hover{color:var(--pink);text-decoration:underline} /* ---------- post cards ---------- */ .post-list{display:grid;gap:16px} .post-card{padding:0;overflow:hidden;display:flex;flex-direction:column} .pc-media{display:block;aspect-ratio:16/9;background:var(--petal)} .pc-media img{width:100%;height:100%;object-fit:cover;display:block} .pc-body{padding:16px 17px 18px} .pc-cat{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:var(--track-wide); text-transform:var(--caps);color:var(--pink-d);background:var(--blush); padding:3px 10px;border-radius:999px;text-decoration:none;margin-bottom:9px} .pc-cat:hover{background:var(--petal);color:var(--grape-d)} .pc-title{font-size:1.15rem;margin:0 0 .4em;line-height:1.3} .pc-title a{color:var(--plum);text-decoration:none} .pc-title a:hover{color:var(--pink)} .pc-ex{color:var(--muted);font-size:.94rem;margin:0 0 .8em} .pc-meta{font-size:.78rem;color:var(--faint);margin:0;display:flex;gap:7px;flex-wrap:wrap} .dot{opacity:.6} /* ---------- category / tag chips ---------- */ .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px} .chip{display:inline-flex;align-items:center;gap:6px;background:var(--white); border:1px solid var(--line-2);border-radius:999px;padding:7px 14px; font-size:.85rem;font-weight:700;color:var(--grape-d);text-decoration:none} .chip:hover{background:var(--petal);border-color:var(--lilac);color:var(--grape-d)} .chip.on{background:var(--grad);border-color:transparent;color:#fff} .chip .n{font-size:.75rem;opacity:.7;font-weight:600} /* ---------- pager ---------- */ .pager{display:flex;align-items:center;justify-content:center;gap:12px; margin-top:26px;flex-wrap:wrap} .pager-at{font-size:.85rem;color:var(--muted)} /* ---------- article ---------- */ .article{padding-block:24px 40px} /* The measure now lives on .article-main (see "Article — the reading column" near the bottom of this file), not on each block inside it. Capping every child individually is what pinned a 608px article against the start edge of a 1024px page with 400px of nothing beside it. */ .art-h1{font-size:1.95rem;line-height:1.25} .art-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center; font-size:.85rem;color:var(--faint);margin-bottom:18px} .art-meta a{color:var(--muted)} .art-cover{margin:20px 0 8px;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-md)} .art-cover img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover} .credit{font-size:.75rem;color:var(--faint);margin:0 0 20px} .credit a{color:var(--faint);text-decoration:underline} /* The article body. dir="auto" is set on the element in the markup — CSS cannot detect the direction of stored content, only inherit a declared one. */ .art-body{font-size:1.06rem} .art-body h2{font-size:1.35rem;margin-top:1.7em} .art-body h3{font-size:1.1rem;margin-top:1.4em} .art-body ul,.art-body ol{padding-inline-start:1.3em;margin:0 0 1.15em} .art-body li{margin-bottom:.5em} .art-body strong{color:var(--plum)} .art-body a{color:var(--grape-d);text-decoration:underline} .art-body blockquote{margin:1.4em 0;padding:2px 0 2px 0;padding-inline-start:18px; border-inline-start:4px solid var(--lilac);color:var(--plum);font-style:var(--quote-style)} .art-body blockquote p:last-child{margin-bottom:0} .art-body figure{margin:1.6em 0} .art-body figure img{border-radius:var(--r-sm);display:block;width:100%} .art-body figcaption{font-size:.8rem;color:var(--faint);margin-top:7px} .art-body table{width:100%;border-collapse:collapse;margin:1.3em 0;font-size:.93rem} .art-body th,.art-body td{text-align:start;padding:10px 12px;border-bottom:1px solid var(--line); vertical-align:top} .art-body th{color:var(--muted);font-size:.75rem;font-weight:800; letter-spacing:var(--track-wide);text-transform:var(--caps)} .art-body .table-scroll{overflow-x:auto;margin-inline:-4px;padding-inline:4px} .art-body .keypoints{background:var(--grad-soft);border-radius:var(--r);padding:18px 20px; margin:1.5em 0} .art-body .keypoints h2,.art-body .keypoints h3{margin-top:0;font-size:1.05rem} .art-body .keypoints ul{margin-bottom:0} .art-body .callout{background:var(--white);border:1px solid var(--line-2); border-inline-start:4px solid var(--pink);border-radius:var(--r-sm); padding:14px 17px;margin:1.4em 0;font-size:.96rem} .art-body .callout p:last-child{margin-bottom:0} .art-body hr{border:0;border-top:1px solid var(--line);margin:2em 0} .art-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:26px 0 0} .art-tags .lbl{font-size:.75rem;font-weight:800;letter-spacing:var(--track-wide); text-transform:var(--caps);color:var(--faint)} .author-box{display:flex;gap:14px;align-items:flex-start;background:var(--white); border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-top:26px; box-shadow:var(--shadow)} .author-box .av{width:46px;height:46px;border-radius:50%;background:var(--grad); display:grid;place-items:center;color:#fff;flex:0 0 auto} .author-box h3{margin:0 0 .2em;font-size:1rem} .author-box p{margin:0;font-size:.9rem;color:var(--muted)} .cta-band{background:var(--grad);color:#fff;border-radius:var(--r);padding:30px 24px; margin-top:30px;box-shadow:var(--shadow-md);text-align:center} .cta-band h2{color:#fff;margin-bottom:.3em} .cta-band p{color:rgba(255,255,255,.9);margin-bottom:1.1em} .cta-band .btn{background:#fff;color:var(--grape-d);box-shadow:none} .cta-band .btn:hover{background:var(--blush);color:var(--pink-d)} /* ---------- forms ---------- */ label{display:block;font-weight:700;margin:14px 0 5px;font-size:.88rem;color:var(--plum)} input,select,textarea{width:100%;padding:12px 14px;border:1px solid var(--line-2); border-radius:var(--r-sm);font:inherit;font-family:var(--font-body); background:var(--white);color:var(--ink)} input:focus,select:focus,textarea:focus{outline:2px solid var(--orchid);outline-offset:1px; border-color:var(--orchid)} textarea{min-height:150px;resize:vertical} .field-err{color:var(--bad);font-size:.83rem;margin-top:5px} .note{background:var(--mist);border:1px solid var(--line); border-inline-start:4px solid var(--orchid);color:var(--muted); padding:13px 16px;border-radius:var(--r-sm);margin:14px 0;font-size:.93rem} .note.ok{border-inline-start-color:var(--good);background:#e6f7f1;color:#0a6b52} .note.err{border-inline-start-color:var(--bad);background:#fdecef;color:#8f1f3c} .hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---------- footer ---------- */ .site-foot{background:var(--white);border-top:1px solid var(--line); margin-top:40px;padding-block:26px 34px} .foot-cols{display:grid;gap:22px} .foot-col{display:flex;flex-direction:column;gap:7px} .foot-h{font-size:.72rem;letter-spacing:var(--track-label);text-transform:var(--caps); color:var(--faint);font-weight:800;margin:0 0 3px;font-family:var(--font-body)} .foot-col a{color:var(--muted);text-decoration:none;font-size:.92rem} .foot-col a:hover{color:var(--pink)} .foot-brand img{width:34px;height:34px;border-radius:11px} .foot-tag{font-size:.9rem;color:var(--muted);margin:0;max-width:24rem} .foot-legal{margin:24px 0 0;font-size:.8rem;color:var(--faint); border-top:1px solid var(--line);padding-top:16px} /* ---------- admin (deliberately plain) ---------- */ .admin-bar{background:var(--plum);color:#fff;padding:11px 0} .admin-bar .wrap{display:flex;gap:14px;align-items:center;flex-wrap:wrap} .admin-bar a{color:rgba(255,255,255,.85);text-decoration:none;font-size:.9rem;font-weight:700} .admin-bar a:hover{color:#fff} .admin-bar .sp{margin-inline-start:auto} .tbl{width:100%;border-collapse:collapse;background:var(--white); border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .tbl th,.tbl td{text-align:start;padding:11px 13px;border-bottom:1px solid var(--line); font-size:.9rem;vertical-align:middle} .tbl th{background:var(--petal);color:var(--muted);font-size:.72rem;font-weight:800; letter-spacing:var(--track-wide);text-transform:var(--caps)} .tbl tr:last-child td{border-bottom:0} .badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.72rem; font-weight:700;border:1px solid var(--line-2);background:var(--white);color:var(--muted)} .badge.live{background:#e6f7f1;color:var(--good);border-color:#bfe8db} .badge.draft{background:#fdf4e3;color:var(--warn);border-color:#f3ddb4} .two-col{display:grid;gap:16px} .field-pair{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px; background:var(--white)} .field-pair>h3{margin:0 0 2px;font-size:.95rem} /* ================================================================ Wider viewports. Everything above is the phone. ================================================================ */ @media (min-width:640px){ h1{font-size:2.4rem} .hero-h1{font-size:2.7rem} .art-h1{font-size:2.3rem} .tiles{grid-template-columns:repeat(2,1fr)} .steps{grid-template-columns:repeat(3,1fr)} .post-list{grid-template-columns:repeat(2,1fr)} .foot-cols{grid-template-columns:repeat(2,1fr)} .two-col{grid-template-columns:1fr 1fr} .sec{padding-block:46px} } @media (min-width:900px){ .navbtn{display:none} .nav{display:flex;flex-direction:row;width:auto;align-items:center;gap:3px;padding-bottom:0} .nav a{font-size:.85rem;padding:8px 11px} .nav a.lang{margin-top:0;margin-inline-start:6px;padding-inline:12px} .nav .nav-cta{margin-top:0;margin-inline-start:6px} .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:center; padding-block:52px} /* max-height caps the width too (the ratio is fixed), so the image is narrower than the column it sits in — centre it in that column rather than leaving all ~140px of the slack on one side. */ .hero-media{margin-top:0;aspect-ratio:4/5;max-height:460px;margin-inline:auto} .hero-h1{font-size:3rem} .tiles{grid-template-columns:repeat(3,1fr)} .post-list{grid-template-columns:repeat(3,1fr)} .post-list.two-up{grid-template-columns:repeat(2,1fr)} .foot-cols{grid-template-columns:1.6fr 1fr 1fr 1fr} .sec{padding-block:64px} /* Two columns of questions rather than one 608px column with 400px of empty page beside it. align-items:start so opening one answer grows that cell instead of stretching its neighbour. */ .faq{grid-template-columns:1fr 1fr;gap:12px;max-width:900px;align-items:start} /* Blog index: the article river beside a sticky sidebar. */ .blog-layout{display:grid;grid-template-columns:1fr 260px;gap:34px;align-items:start} .blog-layout .post-list{grid-template-columns:repeat(2,1fr)} .blog-side{position:sticky;top:88px} } /* On a large desktop the 1060px cap left a wide margin on both sides while the grids inside were still cramped. One step wider, once, rather than a full-bleed layout that would let the tile text run past a comfortable line. */ @media (min-width:1240px){ .wrap{max-width:1140px} } /* The article's two-column layout lives at the bottom of this file, next to the table of contents it exists to carry. */ /* Print: the disclaimer must survive onto paper. */ @media print{ .site-head,.site-foot .foot-cols,.cta-band,.pager,.nav{display:none} body{background:#fff} .disclaimer{border:1px solid #999} } /* A quieter aside inside a prose block — used for the "if it is genuinely heavy, see someone" line, which must read as care rather than as a disclaimer bolted on the end. */ /* Same reasoning as .pull — it sits centred, so it gets symmetric edges rather than a start bar hanging off a margin that is not there. */ .note-inline{margin:22px auto 0;max-width:42rem;padding:16px 20px; background:var(--mist);border:1px solid var(--line-2);border-radius:14px; color:var(--muted);font-size:.95rem} /* ==================================================================== Landing page — the three prose sections, rebuilt as visuals ==================================================================== */ /* ---- Scroll reveal --------------------------------------------------- THERE IS NO HIDDEN STATE. Nothing here ever sets opacity:0 as a resting style — the reveal is a keyframe that RUNS when .is-in is added, animating from transparent to solid and finishing there. That inversion is the whole point. The obvious way to build this (hide by default, un-hide on scroll) makes a blank page the failure mode the moment IntersectionObserver does not fire — an in-app browser, a scroll container the script cannot see, an iOS quirk — and nothing errors, so nobody finds out. This way the worst case is a missing animation on fully visible text. The observer fires ~220px BEFORE a block reaches the viewport (see the rootMargin in reveal.js), so the animation has already begun by the time she can see it and there is no flash of the finished state first. */ /* forwards, NOT both. 'both' also applies the FROM state before the animation starts, which means an environment where animations never tick (battery saver, some webviews, a rendering hiccup) holds every block at opacity 0 forever — reintroducing the blank-page failure this whole approach exists to prevent. Caught on the live site: five blocks sat at opacity 0 three seconds after load. With 'forwards' the resting style before the animation is the normal one, so no-animation means no-animation rather than no-content. The 220px pre-trigger in reveal.js keeps the cosmetic cost — a frame of the finished state — off screen. */ /* TRANSFORM ONLY — the keyframe never touches opacity. An opacity reveal has one failure mode that cannot be designed around: if the animation starts and then never advances, the element is stuck at opacity 0 and the section is blank, with nothing in any log. That is not hypothetical — it is what this page did when the browser driving it stopped compositing, and a phone in battery saver or a webview mid-scroll is the same class of environment. Sliding without fading is immune: the worst an interrupted animation can do is leave a block 14px low, which nobody will ever notice, and the text is readable the entire time. */ @keyframes revealIn{from{transform:translateY(14px)}to{transform:none}} .reveal-armed [data-reveal].is-in{animation:revealIn .55s cubic-bezier(.22,.61,.36,1) forwards} @media(prefers-reduced-motion:reduce){ .reveal-armed [data-reveal].is-in{animation:none} } /* ---- Fact tiles ---- */ .tiles-4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} .tiles-3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .tile-fact{text-align:start} .tile-fact h3{font-size:1.06rem;margin:10px 0 6px} .tile-fact p{font-size:.92rem;margin:0} /* Stagger: a grid of tiles assembles rather than arriving as one slab. The CONTAINER stops animating in that case and hands the job to its children, so a tile is never animated twice over (which compounds the fade and reads as a flicker). Same keyframe, so the two paths cannot drift apart. */ .reveal-armed .tiles[data-reveal].is-in{animation:none} .reveal-armed .tiles[data-reveal].is-in .tile{animation:revealIn .55s cubic-bezier(.22,.61,.36,1) forwards} .reveal-armed .tiles[data-reveal].is-in .tile:nth-child(2){animation-delay:.07s} .reveal-armed .tiles[data-reveal].is-in .tile:nth-child(3){animation-delay:.14s} .reveal-armed .tiles[data-reveal].is-in .tile:nth-child(4){animation-delay:.21s} @media(prefers-reduced-motion:reduce){ .reveal-armed .tiles[data-reveal].is-in .tile{animation:none} } /* ---- The sentence that carries the page ---- A hanging start bar says "this block is indented off a margin". This block is centred on the page, so there was no margin for it to hang off and the bar just floated in the middle of nowhere. Centred blocks get symmetric edges; the gradient rule on top does the emphasis the bar was doing. */ .pull{max-width:44rem;margin:34px auto;padding:26px 30px;position:relative; background:var(--mist);border:1px solid var(--line-2);border-radius:18px; text-align:center;font-size:1.12rem;line-height:1.7;color:var(--plum)} .pull::before{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%); width:64px;height:4px;border-radius:0 0 999px 999px;background:var(--grad)} /* ---- What helps ---- */ .helps{margin-top:26px;text-align:center} .helps h3{font-size:1.02rem;margin:0 0 12px;color:var(--muted);font-weight:600} .helps .chips{justify-content:center} .helps .small{max-width:var(--measure);margin-inline:auto} /* ---- "One number, four things inside it" ------------------------------- The four segments are the argument made visible: three of them drift, the fourth sits still. The drift is deliberately tiny — this is a diagram, not a toy, and the page is about a painful condition. */ .scale-viz{max-width:640px;margin:0 auto;text-align:center} .scale-viz h3{font-size:1.06rem;margin:0 0 14px} .segs{display:flex;gap:6px;height:52px;margin-bottom:10px} .seg{flex:1;border-radius:10px;background:linear-gradient(180deg,var(--lilac),var(--orchid)); transform-origin:bottom} .seg:nth-child(1){animation:segDrift 4.5s ease-in-out infinite} .seg:nth-child(2){animation:segDrift 5.2s ease-in-out infinite .4s} .seg:nth-child(3){animation:segDrift 4.8s ease-in-out infinite .9s} /* The lipedema segment does not move. That is the whole point of it. */ .seg-stuck{background:linear-gradient(180deg,var(--pink),var(--pink-d));animation:none} @keyframes segDrift{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.72)}} @media(prefers-reduced-motion:reduce){ .seg{animation:none!important} } .seg-keys{display:flex;gap:6px;margin-bottom:14px} .seg-key{flex:1;font-size:.72rem;font-weight:700;color:var(--muted);line-height:1.3} .seg-key.on{color:var(--pink-d)} /* ---- Scale vs tape measure ---- */ .vs{margin-top:34px} .vs h3{font-size:1.06rem;margin:0 0 14px} .vs-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px; max-width:560px;margin-inline:auto} .vs-card{background:var(--white);border:1px solid var(--line);border-radius:18px; padding:20px 18px;text-align:center;box-shadow:var(--shadow)} .vs-card .ring{width:42px;height:42px;border-radius:13px;display:grid;place-items:center; background:var(--grad-soft);color:var(--grape-d);margin:0 auto 10px} .vs-k{font-size:.74rem;font-weight:800;letter-spacing:var(--track-wide); text-transform:var(--caps);color:var(--muted)} .vs-v{font-family:var(--font-head);font-size:2.5rem;line-height:1.1;margin:6px 0 2px;color:var(--faint)} .vs-v small{font-size:.9rem;margin-inline-start:4px;font-family:var(--font-body)} .vs-s{font-size:.86rem;color:var(--muted)} .vs-win{border-color:var(--rose);box-shadow:var(--shadow-md)} .vs-win .vs-v{color:var(--pink-d)} .vs-win .vs-s{color:var(--pink-d);font-weight:700} /* ---- The three promises ---- */ .mind-cards{margin-top:30px} .mind-cards .eyebrow{display:block;text-align:center;margin-bottom:12px} .tile-mind{text-align:start} .tile-mind h3{font-size:1rem;margin:10px 0 6px;color:var(--plum)} .tile-mind p{font-size:.92rem;margin:0} @media(max-width:560px){ .segs{height:44px} .seg-key{font-size:.66rem} .pull{font-size:1.04rem;padding:16px 20px} .vs-v{font-size:2.1rem} } /* ==================================================================== Self-check — ported from the app so both trees render the same markup against the same classes. Keep the class names identical: the two pages share sc_field() line for line, and a renamed class here silently unstyles one of them. ==================================================================== */ .btn-block{width:100%} .linkish{background:none;border:0;color:var(--muted);font:inherit;font-family:var(--font-body); text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px;min-height:0; display:inline-flex;align-items:center;gap:5px;font-size:.84rem} .linkish:hover{color:var(--pink)} /* ---------- 0..10 scale strips ---------- */ .scale{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px} .scale-dot{font-size:.76rem} .scale-dot:hover{border-color:var(--lilac);background:var(--mist)} .scale input:checked + .scale-dot{background:var(--grad);color:#fff;border-color:transparent; box-shadow:0 4px 12px rgba(168,85,247,.3)} .scale-ends{display:flex;justify-content:space-between;color:var(--faint);font-size:.74rem;margin-top:4px} /* mood/energy: 5 wide buttons */ .scale-5 .scale-dot{height:48px;min-width:52px} /* Eleven dots (0..10) plus gaps overflow a phone at the old 32px minimum, and a wrapped flex item with flex:1 1 0 expands to a full-width row — so the "10" was landing on its own line looking like a separate control. Let the dots shrink instead; they stay comfortably above the 44px touch target on the cross axis. */ .scale{flex-wrap:nowrap;gap:4px} .scale-5 .scale-dot{min-width:46px} .scale{gap:3px} .ins-x .linkish{padding:2px 4px;color:var(--faint)} .chip-pick{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0} .chip-pick input{position:absolute;opacity:0;width:0;height:0} .chip-pick label{border:1.5px solid var(--line-2);background:var(--white);color:var(--muted); border-radius:999px;padding:9px 16px;font-weight:700;font-size:.88rem;cursor:pointer; transition:all .15s;display:inline-flex;align-items:center;gap:7px} .chip-pick input:checked+label{border-color:var(--grape);background:var(--petal);color:var(--grape-d)} .chip-pick input:focus-visible+label{outline:2px solid var(--grape);outline-offset:2px} .wc-dots{display:flex;gap:6px;justify-content:center;margin-bottom:22px} .wc-dots i{width:7px;height:7px;border-radius:50%;background:var(--line-2);transition:all .25s} .wc-dots i.on{background:var(--grape);width:22px;border-radius:999px} .wc-dots i.past{background:var(--lilac)} .wc-actions{display:flex;gap:10px;align-items:center;margin-top:22px} .wc-actions .btn{flex:1 1 auto;justify-content:center} .wc-skip{color:var(--faint);font-size:.85rem;text-decoration:none;flex:0 0 auto;padding:10px} .wc-skip:hover{color:var(--muted)} /* ================================================================ * The self-check * ================================================================ */ /* Figures share moves.php's four classes so they take the same colours in light and dark, but they are static — no p1/p2 cross-fade. `color` sits on the svg itself, not on .ar, because the arrowhead marker's currentColor resolves against the element, not against the path that references it. */ .scfig{display:block;max-width:100%;height:auto;overflow:visible;color:var(--pink)} .scfig .fg{stroke:var(--muted)} .scfig .ac{stroke:var(--grape);stroke-width:5} .scfig .ar{stroke:var(--pink);stroke-width:3.2} .scfig .gr{stroke:var(--line-2);stroke-width:3} /* NOT mirrored under RTL, unlike .mfig. A move figure is a stylised person and facing into the text reads as intentional; these are anatomical, and a mirrored body map would put the answer she ticked on the wrong side. */ /* Forward points leftwards under RTL. The class is applied by icon() to the three directional icons (see ICON_DIRECTIONAL in lib/icons.php), so this is the ONE rule and it covers every call site — including the next chevron somebody adds. It replaced two component-scoped rules that between them caught two of the eight chevrons on the site; the other six pointed the wrong way on every Arabic page. Do not add a per-component flip; tag the icon instead, or it will drift the same way again. */ [dir=rtl] .ico-dir{transform:scaleX(-1)} .sc-card{max-width:560px} .sc-fig{display:flex;justify-content:center;margin:2px 0 18px} .sc-item{margin-top:22px} .sc-item:first-of-type{margin-top:4px} .sc-q{font-weight:600;color:var(--ink);font-size:1.02rem;margin:0 0 2px;line-height:1.4} .sc-q-sm{display:block;font-weight:600;color:var(--ink);font-size:.95rem;margin-bottom:6px} .sc-help{margin:0 0 8px} .sc-note{margin-top:20px} .sc-skip-big{margin-top:10px} /* Answer options. Full-width rows rather than chips: the wording is behaviourally anchored and therefore long, and a woman reading this on a phone in pain should not be hunting for a tap target. */ .sc-opts{display:flex;flex-direction:column;gap:8px;margin-top:8px} .sc-opts input{position:absolute;opacity:0;width:0;height:0} .sc-opts label{border:1.5px solid var(--line-2);background:var(--white);color:var(--ink); border-radius:var(--r-sm);padding:12px 14px;font-size:.93rem;line-height:1.45;cursor:pointer; transition:all .15s;display:block} .sc-opts label:hover{border-color:var(--lilac);background:var(--mist)} .sc-opts input:checked+label{border-color:var(--grape);background:var(--petal);color:var(--grape-d); font-weight:600} .sc-opts input:focus-visible+label{outline:2px solid var(--grape);outline-offset:2px} /* The count. Typography and nothing else — no meter, no ring, no percentage, no colour that encodes a value. Zero of seven has to render exactly like seven of seven, because this page does not grade anybody. */ .sc-count-line{font-family:var(--font-head);font-size:1.3rem;line-height:1.45;color:var(--ink);margin:0} .sc-count-line strong{color:var(--grape-d)} .sc-count-caveat{margin:12px 0 0;font-size:.9rem} /* "Not answered" must not look like "no". If skipping a question renders the same as answering it in the negative, a woman who skipped half of this reads a page telling her she has none of the features. */ .sc-feat-unanswered .sc-feat-mark{background:var(--blush);color:var(--pink-d)} .sc-feat-unanswered .nm{color:#000} .sc-where{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap} .sc-ask{margin:10px 0 0;padding-inline-start:20px;color:var(--ink);line-height:1.6} .sc-ask li{margin-bottom:8px} .sc-disclaimer{margin-top:18px} /* PRINT ONLY — and it must stay inside the @media. This rule set was ported from the app so the finished self-check prints as a clean document, and at some point it lost its wrapper. Unwrapped it matches on screen too, so `.nav` and every `.btn` on the site were display:none — no navigation, no CTAs, and a self-check with no way to reach the next screen. Nothing errors when that happens; the page just quietly has no controls on it. If you add a class here, check it is a control and not content, and never let this block out of the @media. */ @media print{ .topbar,.nav,.tabbar,.lang-toggle,.flash,.quote-card,.week-banner,.week-banner-wrap, .today-strip,.btn,.btn-row,.wc-actions,.sc-actions,.sc-screen-only,.home-head, .insight-card,.ch-card,.wc-dots,.linkish,.art-toc,.sc-rail{display:none !important} .sc-card,.article-main{max-width:none;margin-inline:0} } /* Site-only: the hand-off card and the honesty sentence under it. */ .sc-result dl{margin:6px 0 0} .sc-result dt{font-weight:700;color:var(--plum);margin-top:12px;font-size:.95rem} .sc-result dd{margin:2px 0 0;color:var(--muted)} .sc-keep{margin-top:18px;background:var(--grad-soft);border-color:var(--lilac)} .sc-honesty{background:var(--white);border-radius:12px;padding:14px 16px;color:var(--muted);font-size:.92rem;margin:12px 0 16px} /* NOTE: the site already defines .hp as a clip-based visually-hidden at the top of this file. A second definition using left:-9999px was added here by mistake and, in an RTL document, extended the scrollable area by 10,000px — the whole page scrolled sideways. Off-canvas offsets are not safe in RTL; clip is. Do not reintroduce one. */ /* The self-check call to action on the home page. */ .sc-cta{text-align:center;background:var(--white);border:1px solid var(--lilac);border-radius:22px; padding:32px 26px;box-shadow:var(--shadow-md);max-width:720px;margin-inline:auto} .sc-cta .ring{width:52px;height:52px;border-radius:16px;display:grid;place-items:center; background:var(--grad);color:#fff;margin:0 auto 14px} .sc-cta h2{margin:0 0 10px} .sc-cta .prose-block{margin-inline:auto} /* ==================================================================== THE ARTICLE — reading column, contents, and the typographic breakdown of a 6,000-character post. THE MEASURE MOVED UP ONE LEVEL. It used to sit on .art-head, .art-body, .art-tags and .author-box individually, which capped each block at 38rem AND left it at the start edge of a 1024px page — 400px of empty page beside every article, on every post, at every width above a tablet. The cap now belongs to the column; the column centres itself when it is alone and gives the leftover width to a real sidebar when there is room for one. ==================================================================== */ /* Used on its own by about / privacy / terms, which have a body and no sidebar: there it is simply the centred reading column at every width. Only inside .article-layout does it hand its cap over to the grid — hence the child selector on the override in the media query below, and not a bare .article-main, which would uncap those three pages into a 1024px line. */ .article-main{max-width:var(--measure);margin-inline:auto;min-width:0} .article-side{margin-top:30px} /* The head and the cover span the whole layout — a 16:9 cover at the full width of the page is the one image the article already has, and shrinking it into the text column wasted it. */ .art-head .lead{max-width:var(--measure)} /* ---- contents ---- Rendered twice, deliberately: a

above the text on a phone, where a sidebar does not exist, and the sticky rail on a desktop. Only ever one of the two is displayed, so only one is in the accessibility tree. */ .art-toc-box{background:var(--white);border:1px solid var(--line);border-radius:var(--r); padding:16px 18px 14px;box-shadow:var(--shadow)} .art-toc-h{font-size:.72rem;letter-spacing:var(--track-label);text-transform:var(--caps); color:var(--faint);font-weight:800;margin:0 0 8px;font-family:var(--font-body)} .art-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc} .art-toc li{counter-increment:toc} .art-toc a{display:flex;gap:9px;align-items:baseline;text-decoration:none;color:var(--muted); font-size:.88rem;line-height:1.4;padding:7px 0 7px 11px;padding-inline:11px 0; border-inline-start:2px solid var(--line);margin-inline-start:-13px} .art-toc a::before{content:counter(toc,decimal-leading-zero);font-size:.68rem;font-weight:800; color:var(--lilac);flex:0 0 auto;letter-spacing:var(--track-wide)} .art-toc a:hover{color:var(--grape-d);border-inline-start-color:var(--lilac)} /* Set by reveal.js as the reader moves through the article. Everything above works with the class never arriving. */ .art-toc a.on{color:var(--grape-d);font-weight:700;border-inline-start-color:var(--grape)} .art-toc a.on::before{color:var(--grape)} .art-toc-inline{margin:0 0 24px;background:var(--white);border:1px solid var(--line); border-radius:var(--r-sm);box-shadow:var(--shadow)} .art-toc-inline>summary{cursor:pointer;padding:13px 16px;font-weight:700;color:var(--plum); font-size:.92rem;list-style:none;display:flex;align-items:center;gap:9px} .art-toc-inline>summary::-webkit-details-marker{display:none} .art-toc-inline>summary::after{content:"+";margin-inline-start:auto;color:var(--orchid); font-weight:800;font-size:1.15rem;line-height:1} .art-toc-inline[open]>summary::after{content:"–"} .art-toc-inline .art-toc{padding:0 18px 14px} /* A compact companion to the sidebar contents. The full-width .cta-band still closes the article for phones, where this column does not exist. */ .side-card{background:var(--grad);color:#fff;border-radius:var(--r);padding:20px; margin-top:18px;box-shadow:var(--shadow-md)} .side-card h3{color:#fff;font-size:1.02rem;margin:0 0 .35em} .side-card p{color:rgba(255,255,255,.9);font-size:.88rem;margin:0 0 14px;line-height:1.55} .side-card .btn{background:#fff;color:var(--grape-d);box-shadow:none;width:100%; min-height:44px;font-size:.9rem} .side-card .btn:hover{background:var(--blush);color:var(--pink-d)} /* ---- breaking up the text ---- These posts are 4,000–7,000 characters of continuous prose with an h2 every few paragraphs. Everything below gives the eye somewhere to land without touching a single stored body: the headings, lists, boxes and tables are already in the HTML, they just all looked the same. */ /* The opening paragraph carries the article; it gets to look like it. */ .art-body>p:first-child{font-size:1.14rem;line-height:1.6;color:var(--plum)} /* Each h2 opens a section with a gradient tick above it, so scrolling past reads as a set of sections rather than an unbroken wall. */ /* scroll-margin, because the header is sticky: without it a contents link drops the heading it just jumped to underneath the header. */ .art-body h2{position:relative;padding-top:19px;margin-top:2.1em;font-size:1.38rem; scroll-margin-top:96px} .art-body h2::before{content:"";position:absolute;top:0;inset-inline-start:0; width:44px;height:4px;border-radius:999px;background:var(--grad)} .art-body>h2:first-child{margin-top:.2em} .art-body h3{color:var(--grape-d)} /* Custom bullets: a rose dot instead of the browser's black disc, and the text hangs off it properly on a wrapped line. */ .art-body ul{list-style:none;padding-inline-start:0} .art-body ul>li{position:relative;padding-inline-start:1.5em} .art-body ul>li::before{content:"";position:absolute;inset-inline-start:.35em;top:.62em; width:7px;height:7px;border-radius:50%;background:var(--rose)} .art-body ol{padding-inline-start:1.4em} .art-body ol>li::marker{color:var(--grape);font-weight:800} /* The take-away box. The icon is a data URI rather than an inline