/* Bo Nashi — shared styles. Palette from knowledge-base/25-design-system.md */ :root{ --primary:#0F4C5C; --primary-dark:#0A3A47; --accent:#C9A961; --bg:#FAF7F2; --surface:#FFFFFF; --surface-muted:#F1ECE3; --text:#1C1C1C; --text-2:#6B6B6B; --divider:#E8E2D6; --maxw:760px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--text); font-family:'Cairo',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif; font-size:16px; line-height:1.75; } .wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px} header.site{background:var(--primary); color:#fff; padding:20px 0} header.site .wrap{display:flex; align-items:center; gap:14px} header.site img{width:44px; height:44px; border-radius:10px; display:block} header.site .name{font-weight:800; font-size:19px; letter-spacing:.2px} header.site a{color:#fff; text-decoration:none} .overline{display:flex; align-items:center; gap:9px; margin:0 0 6px} .overline::before{content:""; width:22px; height:1.2px; background:var(--accent); flex:none} .overline span{color:var(--accent); font-size:11px; font-weight:900; letter-spacing:2px; text-transform:uppercase} h1{font-size:32px; line-height:1.3; margin:0 0 8px; font-weight:800} h2{font-size:20px; margin:34px 0 8px; font-weight:800; color:var(--primary)} h3{font-size:16px; margin:22px 0 6px; font-weight:800} p,li{color:var(--text); } a{color:var(--primary); text-underline-offset:3px} .lede{color:var(--text-2); font-size:17px} .updated{color:var(--text-2); font-size:14px; margin-top:4px} main{padding:38px 0 60px} .card{background:var(--surface); border:1px solid var(--divider); border-radius:14px; padding:22px 24px; margin:20px 0} .card.muted{background:var(--surface-muted)} hr{border:0; border-top:1px solid var(--divider); margin:34px 0} .btn{display:inline-block; background:var(--primary); color:#fff!important; text-decoration:none; padding:12px 22px; border-radius:10px; font-weight:700; margin:6px 8px 6px 0} .btn:hover{background:var(--primary-dark)} .btn.alt{background:transparent; color:var(--primary)!important; border:1.5px solid var(--primary)} footer.site{border-top:1px solid var(--divider); padding:26px 0 46px; color:var(--text-2); font-size:14px} footer.site a{color:var(--text-2); margin-inline-end:16px} /* language toggle: one document, both languages, switched with a class on */ [lang-en]{display:none} html.en [lang-ar]{display:none} html.en [lang-en]{display:revert} .langbtn{margin-inline-start:auto; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); color:#fff; border-radius:8px; padding:7px 14px; font:inherit; font-size:14px; font-weight:700; cursor:pointer} .langbtn:hover{background:rgba(255,255,255,.24)} @media (max-width:520px){ h1{font-size:26px} .wrap{padding:0 16px} }