/* Phasly blog. Generated by build_blog.py — edit the script, not this file. Tokens below are copied from index.html at build time. */ :root { /* Canvas + ink. same values the Home tab uses for P.bg / P.ink. */ --bg:#FCFAF9; --bg-card:#FCFAF9; --card:#EDE9E2; --card-dark:#DFD8CC; --text:#2C2218; --text-sec:#817769; --text-ter:#9A8F84; --border:#E6DED5; --line:#E6DED5; /* Brand pink. Adelina 2026-08: brand-d is the muted rose #C4909A the headlines have always used, not the app's deeper chip pink. */ --brand:#EBBFC7; --brand-d:#C4909A; --brand-press:#45372A; /* Phase tints, straight from theme.ts. */ --mens:#EBBFC7; --mens-bg:#FCEEF1; --mens-line:#F0C4D2; --foll:#AEBDE0; --foll-bg:#EBF0F9; --foll-d:#3E5C99; --ovul:#FFEDA8; --ovul-bg:#FFF6DC; --ovul-d:#8A6A15; --lute:#C4BBAE; --lute-bg:#F3F0EC; --preg:#9F8DC4; --preg-bg:#E7DFEE; --taupe:#C4BBAE; /* Radii. sharp is the default now. */ --r20:0px; --r12:0px; --r-photo:14px; --r-pill:999px; --gutter:5%; } *,*::before,*::after { box-sizing:border-box; } html { scroll-behavior:smooth; background:var(--bg); -webkit-text-size-adjust:100%; overflow-x:hidden; } body { /* isolate + transparent so the two wash layers below (z-index:-1) paint above the page base instead of being covered by body's own background box. html carries the base colour — same arrangement as index.html. */ position:relative; isolation:isolate; margin:0; /* Column layout so a short page (the index with one post) is still a full viewport tall. Without it the top and bottom washes overlap and tint the whole page instead of bracketing it. */ display:flex; flex-direction:column; min-height:100vh; font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif; background:transparent; color:var(--text); overflow-x:hidden; font-synthesis:none; -webkit-font-smoothing:antialiased; } main { flex:1 0 auto; min-width:0; } /* The same Phoebe-icon wash the landing page opens and closes with. Top layer is the hero band, fading out before the body copy starts; bottom layer is its mirror, so the footer sits on colour exactly as it does on the home page. */ body::before { content:''; position:absolute; left:0; right:0; top:0; height:560px; z-index:-1; pointer-events:none; background: linear-gradient(180deg, rgba(252,250,249,0) 52%, #FCFAF9 100%), radial-gradient(88% 150% at 0% 0%, #F9D8E2 0%, rgba(249,216,226,0) 72%), radial-gradient(88% 150% at 100% 2%, #DCE0F7 0%, rgba(220,224,247,0) 72%), radial-gradient(115% 125% at 50% 0%, #FDF1D6 0%, rgba(253,241,214,0) 70%), #FCFAF9; } body::after { content:''; position:absolute; left:0; right:0; bottom:0; height:420px; z-index:-1; pointer-events:none; background: linear-gradient(180deg, #FCFAF9 0%, rgba(252,250,249,0) 26%), radial-gradient(80% 80% at 4% 100%, #DCE0F7 0%, rgba(220,224,247,0) 64%), radial-gradient(80% 80% at 100% 96%, #F9D8E2 0%, rgba(249,216,226,0) 64%), radial-gradient(90% 90% at 50% 100%, #FDF1D6 0%, rgba(253,241,214,0) 62%), #FCFAF9; } a { color:var(--foll-d); } .answer a { color:var(--foll-d); text-decoration-color:var(--foll); text-underline-offset:3px; } ::selection { background:var(--mens-bg); color:var(--text); } img { max-width:100%; height:auto; } @keyframes fadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } } /* ── nav ──────────────────────────────────────────────────────────────── */ /* Invisible at the top so the wash runs edge to edge, filling in on scroll — the landing page's behaviour, not a second one. Scoped to .topbar: the breadcrumb and the table of contents are