/* Fly GACA — long-form guide / cluster styling. Pairs with flygaca.css. * Used by /guides/*.html pages. Content is bilingual: an EN block and an AR * block live side by side in the source; CSS shows only the one matching * . AR snapshot build (scripts/build-ar-snapshots.mjs) sets * lang="ar" + dir="rtl" on the snapshot output. */ :root { --bg:#FBF8F2; --bg-card:#FFF; --bg-soft:#F5F2ED; --ink:#0A0E12; --ink-soft:#3F4A55; --ink-mute:#7A8590; --rule:#E5DFD3; --link:#2D6E8A; --link-hover:#4A9CB8; --accent-gold:#C8A04A; --accent-sage:#8FC9A8; --shadow-1:0 1px 2px rgba(15,26,36,.06),0 1px 3px rgba(15,26,36,.04); --shadow-3:0 12px 24px -8px rgba(15,26,36,.10),0 4px 8px -4px rgba(15,26,36,.06); } html, body { background: var(--bg); color: var(--ink); } body { font-family:'Inter',system-ui,sans-serif; line-height:1.6; margin:0; } body.rtl, html[lang="ar"] body { font-family:'IBM Plex Sans Arabic','Inter',sans-serif; } /* Show only the language block matching . Both blocks ship in * source; user can toggle without a page reload. */ .lang-en { display: block; } .lang-ar { display: none; } html[lang="ar"] .lang-en { display: none; } html[lang="ar"] .lang-ar { display: block; } .guide-wrap { max-width: 760px; margin: 0 auto; padding: 56px 24px 72px; } /* Breadcrumb */ .breadcrumb { font-size: 12.5px; color: var(--ink-mute); margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .breadcrumb a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px dotted var(--ink-mute); } .breadcrumb a:hover { color: var(--link); border-color: var(--link); } .breadcrumb-sep { opacity: 0.5; } /* Header */ .guide-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-gold); margin-bottom: 10px; } .guide-title { font-family:'Inter Tight','Inter',sans-serif; font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 14px; } .guide-deck { font-size: 17px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 28px; } .guide-meta { display: flex; flex-wrap: wrap; gap: 12px 18px; font-size: 12.5px; color: var(--ink-mute); padding-bottom: 22px; margin-bottom: 28px; border-bottom: 1px solid var(--rule); } .guide-meta strong { color: var(--ink); font-weight: 600; } /* TL;DR block — Position-Zero seed */ .tldr { background: var(--bg-card); border: 1px solid var(--rule); border-inline-start: 4px solid var(--accent-sage); border-radius: 12px; padding: 18px 22px; margin: 0 0 36px; box-shadow: var(--shadow-1); } .tldr-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-sage); margin-bottom: 6px; } .tldr p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink); } /* Body prose */ .guide-body h2 { font-family:'Inter Tight','Inter',sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 40px 0 14px; color: var(--ink); scroll-margin-top: 24px; } .guide-body h3 { font-family:'Inter Tight','Inter',sans-serif; font-size: 17px; font-weight: 700; margin: 28px 0 10px; color: var(--ink); } .guide-body p, .guide-body li { font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); } .guide-body strong { color: var(--ink); font-weight: 600; } .guide-body a { color: var(--link); text-decoration: none; border-bottom: 1px solid rgba(45,110,138,0.25); } .guide-body a:hover { color: var(--link-hover); border-color: var(--link-hover); } .guide-body ul, .guide-body ol { padding-inline-start: 22px; margin: 12px 0 16px; } .guide-body ul li, .guide-body ol li { margin-bottom: 6px; } .guide-body ol { padding-inline-start: 26px; } .guide-body cite { font-style: normal; font-size: 13px; color: var(--ink-mute); background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 6px; padding: 1px 6px; margin-inline-start: 4px; } /* Definition list (Position-Zero candidate) */ .guide-body dl { margin: 14px 0 18px; padding: 0; } .guide-body dt { font-weight: 700; color: var(--ink); margin-top: 10px; font-size: 15px; } .guide-body dd { margin: 4px 0 8px 0; padding-inline-start: 16px; font-size: 14.5px; color: var(--ink-soft); border-inline-start: 2px solid var(--rule); } /* Comparison table */ .guide-body table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px; background: var(--bg-card); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; } .guide-body th, .guide-body td { padding: 10px 14px; text-align: start; border-bottom: 1px solid var(--rule); } .guide-body thead th { background: var(--bg-soft); font-weight: 700; color: var(--ink); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; } .guide-body tbody tr:last-child td { border-bottom: 0; } /* Callout */ .callout { background: rgba(200,160,74,0.08); border: 1px solid rgba(200,160,74,0.30); border-inline-start: 4px solid var(--accent-gold); border-radius: 10px; padding: 16px 18px; margin: 22px 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); } .callout strong { color: var(--accent-gold); } .todo-marker { background: rgba(200,80,60,0.08); border: 1px dashed rgba(200,80,60,0.5); border-radius: 8px; padding: 10px 14px; margin: 14px 0; font-size: 13px; color: #B04A3A; } .todo-marker code { background: rgba(200,80,60,0.10); padding: 1px 5px; border-radius: 3px; font-family:'JetBrains Mono','Menlo',monospace; } /* FAQ */ .guide-faq { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--rule); } .guide-faq h2 { margin-top: 0; } .faq-q { font-family:'Inter Tight','Inter',sans-serif; font-weight: 700; font-size: 16px; color: var(--ink); margin: 22px 0 6px; } .faq-a { margin: 0 0 10px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.65; } /* Related guides */ .related { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--rule); } .related h2 { font-family:'Inter Tight','Inter',sans-serif; font-size: 18px; font-weight: 700; margin: 0 0 16px; } .related-grid { display: grid; gap: 12px; grid-template-columns: 1fr; } @media (min-width: 720px) { .related-grid { grid-template-columns: 1fr 1fr; } } .related-card { display: block; padding: 16px 18px; background: var(--bg-card); border: 1px solid var(--rule); border-radius: 10px; text-decoration: none; transition: border-color 180ms, box-shadow 180ms; } .related-card:hover { border-color: var(--link); box-shadow: var(--shadow-3); } .related-card-title { font-family:'Inter Tight','Inter',sans-serif; font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 4px; } .related-card-desc { font-size: 13px; color: var(--ink-mute); margin: 0; } /* Pillar landing — cluster grid */ .cluster-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 28px 0; } @media (min-width: 720px) { .cluster-grid { grid-template-columns: 1fr 1fr; } } .cluster-card { display: block; padding: 18px 20px; background: var(--bg-card); border: 1px solid var(--rule); border-radius: 12px; text-decoration: none; transition: border-color 180ms, box-shadow 180ms, transform 180ms; } .cluster-card:hover { border-color: var(--link); transform: translateY(-2px); box-shadow: var(--shadow-3); } .cluster-card-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-gold); margin-bottom: 8px; } .cluster-card-title { font-family:'Inter Tight','Inter',sans-serif; font-size: 17px; font-weight: 700; color: var(--ink); margin: 0 0 6px; line-height: 1.3; } .cluster-card-desc { font-size: 13.5px; color: var(--ink-soft); margin: 0; line-height: 1.5; } /* Footer harmony — site-footer is shared across pages, dark on light */ footer.site-footer { background: var(--ink); color: var(--bg); }