/* Recipe page styles. * * Standalone rather than layered on home.css: these pages are documents, not * a landing page, and pulling in ~900 lines of hero and gradient CSS to style * a table would slow down 190 pages for nothing. * * Logical properties throughout (margin-inline, padding-inline, text-align: * start) so the Arabic pages need no RTL override file at all. dir="rtl" on * is the only thing that flips them. */ :root { --primary-green: #1E8449; --green-text: #1C7A43; --dark: #122016; --accent-gold: #F4C542; --surface: #FBF6EF; --muted: #6B6558; --hair: #E2D8C8; } * { box-sizing: border-box; } body.recipe { margin: 0; background: var(--surface); color: var(--dark); font-family: 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; } .rnav { display: flex; justify-content: space-between; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--hair); background: #fff; } .rnav a { color: var(--green-text); text-decoration: none; font-weight: 600; font-size: 0.95rem; } .rnav a:hover { text-decoration: underline; } .rwrap { max-width: 720px; margin: 0 auto; padding: 34px 22px 60px; text-align: start; } .reyebrow { margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.76rem; font-weight: 700; color: var(--green-text); } .rwrap h1 { margin: 0 0 2px; font-size: 2.1rem; line-height: 1.2; font-weight: 700; } .ralt { margin: 0 0 14px; color: var(--muted); font-size: 1.05rem; } .rdesc { margin: 0 0 26px; color: #4a4a42; } .rlede { margin: 0 0 30px; color: #4a4a42; font-size: 1.08rem; max-width: 60ch; } /* The cost is the reason these pages exist, so it is the biggest thing on them. Gold carries the surface and dark carries the type, never the reverse: gold as text on this background is about 1.7:1. */ .rcost { display: inline-flex; align-items: baseline; gap: 10px; background: var(--accent-gold); color: var(--dark); padding: 12px 22px; border-radius: 16px; margin: 0 0 26px; } .rcost-n { font-size: 2.4rem; font-weight: 700; line-height: 1; } .rcost-u { font-size: 1rem; font-weight: 600; } .rfacts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 34px; padding: 0; } .rfacts li { background: #fff; border: 1px solid var(--hair); border-radius: 14px; padding: 10px 16px; display: flex; flex-direction: column; } .rfacts span { font-size: 0.78rem; color: var(--muted); } .rfacts strong { font-size: 1.15rem; } .rwrap h2 { margin: 34px 0 12px; font-size: 1.25rem; font-weight: 700; padding-bottom: 8px; border-bottom: 2px solid var(--hair); } .rnut { width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; } .rnut th, .rnut td { padding: 11px 16px; border-bottom: 1px solid var(--hair); text-align: start; } .rnut th { font-weight: 500; color: var(--muted); } .rnut td { font-weight: 700; text-align: end; } .rnut tr:last-child th, .rnut tr:last-child td { border-bottom: none; } .rings { list-style: none; margin: 0; padding: 0; } .rings li { padding: 9px 0; border-bottom: 1px solid var(--hair); } .rings li:last-child { border-bottom: none; } .rq { font-weight: 700; color: var(--green-text); margin-inline-end: 8px; } .rchips { margin: 18px 0 0; } .rchips span { display: inline-block; background: #E8F2EA; color: var(--green-text); border-radius: 999px; padding: 5px 14px; font-size: 0.85rem; font-weight: 600; margin-inline-end: 8px; } .rmethod { margin: 42px 0 0; background: #fff; border: 1px solid var(--hair); border-radius: 18px; padding: 26px 24px; } .rmethod h2 { margin-top: 0; border: none; padding: 0; } .rmethod p { margin: 0 0 18px; color: #4a4a42; } .btn { display: inline-block; padding: 12px 26px; border-radius: 14px; font-weight: 700; text-decoration: none; font-size: 1rem; } .btn-primary { background: var(--primary-green); color: #FFF8EE; } .btn-primary:hover { background: #196f3d; } .rlist { list-style: none; margin: 0 0 8px; padding: 0; } .rlist li { border-bottom: 1px solid var(--hair); } .rlist li:last-child { border-bottom: none; } .rlist a { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 13px 0; text-decoration: none; color: inherit; } .rlist a:hover .rl-name { color: var(--green-text); text-decoration: underline; } .rl-name { font-weight: 600; } .rl-meta { color: var(--muted); font-size: 0.88rem; white-space: nowrap; } .rfoot { border-top: 1px solid var(--hair); padding: 22px; text-align: center; color: var(--muted); font-size: 0.85rem; } @media (max-width: 480px) { .rwrap h1 { font-size: 1.7rem; } .rcost-n { font-size: 2rem; } }