/* ============================================================================ Retails — static setup tutorial. Same tokens as the back office (css/app.css) so the tutorial reads as part of the product rather than a manual bolted to the side of it. Duplicated rather than imported on purpose: these pages are static and must render correctly if the app is down, mid-deploy, or being read from a printout in a stockroom. Every rule is direction-agnostic — logical properties only, never left/right. The Arabic pages are the same stylesheet with dir="rtl" on . ========================================================================== */ :root { --bg: #faf6f0; --ink: #33291f; --muted: #8c7a63; --secondary: #5c4d3c; --accent: #b4531f; --accent-soft: #b4531f14; --success: #4f7a5c; --success-soft: #4f7a5c14; --danger: #a03a2e; --warn: #a8722a; --warn-soft: #a8722a1a; --border: #e6dccd; --divider: #f0e9dd; --surface: #ffffff; --radius-card: 14px; --radius-button: 12px; --font: "Tajawal", -apple-system, "Segoe UI", Tahoma, Arial, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.65; -webkit-text-size-adjust: 100%; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.25; } img { max-inline-size: 100%; } .skip { position: absolute; inset-block-start: -100px; inset-inline-start: 0.5rem; background: var(--surface); padding: 0.5rem 0.9rem; border-radius: var(--radius-button); z-index: 20; } .skip:focus { inset-block-start: 0.5rem; } /* ---------- top bar ---------- */ .bar { position: sticky; inset-block-start: 0; z-index: 10; display: flex; align-items: center; gap: 0.85rem; padding: 0.6rem 1.25rem; background: var(--surface); border-block-end: 1px solid var(--border); flex-wrap: wrap; } .bar-brand { display: flex; align-items: center; gap: 0.55rem; font-weight: 800; color: var(--ink); font-size: 1.05rem; } .bar-brand:hover { text-decoration: none; } .mark { inline-size: 30px; block-size: 30px; border-radius: 9px; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 800; } .bar-kicker { color: var(--muted); font-size: 0.9rem; padding-inline-start: 0.85rem; border-inline-start: 1px solid var(--border); } .bar-spacer { flex: 1; } .bar-nav { display: flex; gap: 1rem; font-size: 0.92rem; } .bar-nav a { color: var(--secondary); } .bar-lang { border: 1px solid var(--border); border-radius: var(--radius-button); padding: 0.28rem 0.75rem; font-size: 0.88rem; color: var(--ink); } .bar-lang:hover { text-decoration: none; background: var(--accent-soft); } /* ---------- layout ---------- */ .layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 2.5rem; max-inline-size: 1180px; margin: 0 auto; padding: 2rem 1.25rem 4rem; } .toc { align-self: start; position: sticky; inset-block-start: 4.5rem; } .toc details { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); } .toc summary { cursor: pointer; padding: 0.7rem 1rem; font-weight: 700; font-size: 0.9rem; color: var(--secondary); } .toc-list { list-style: none; margin: 0; padding: 0 0.5rem 0.6rem; counter-reset: none; } .toc-list a { display: flex; gap: 0.6rem; align-items: baseline; padding: 0.4rem 0.55rem; border-radius: 9px; color: var(--secondary); font-size: 0.92rem; line-height: 1.35; } .toc-list a:hover { background: var(--divider); text-decoration: none; } .toc-list a.here { background: var(--accent-soft); color: var(--accent); font-weight: 700; } .toc-list .n { min-inline-size: 1.2em; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.82rem; } .toc-list a.here .n { color: var(--accent); } /* ---------- the document ---------- */ .doc { min-inline-size: 0; } .eyebrow { margin: 0 0 0.4rem; color: var(--muted); font-size: 0.85rem; letter-spacing: 0.02em; text-transform: uppercase; } .doc h1 { font-size: 2.1rem; } .lede { margin: 0.6rem 0 0; font-size: 1.12rem; color: var(--secondary); } .outcome { margin-block-start: 1.6rem; padding: 0.9rem 1.1rem; background: var(--success-soft); border-inline-start: 3px solid var(--success); border-radius: var(--radius-button); } .outcome-label { display: block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--success); } .outcome p { margin: 0.2rem 0 0; } .prose p { margin: 0.9rem 0; } .intro { margin-block-start: 1.4rem; font-size: 1.03rem; } .chapter-section { margin-block-start: 3rem; } .chapter-section h2 { font-size: 1.4rem; padding-block-end: 0.5rem; border-block-end: 1px solid var(--border); } .steps { margin-block-start: 1.2rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 1rem 1.2rem; } .steps h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-block-end: 0.5rem; } .steps ol { margin: 0; padding-inline-start: 1.3rem; } .steps li { margin: 0.45rem 0; } .steps code, .prose code, .note code { background: var(--divider); border-radius: 5px; padding: 0.08em 0.35em; font-size: 0.92em; font-family: ui-monospace, "SF Mono", Menlo, monospace; } .shot { margin: 1.5rem 0 0; } .shot img { display: block; inline-size: 100%; block-size: auto; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); } .shot figcaption { margin-block-start: 0.55rem; color: var(--muted); font-size: 0.9rem; } .note { margin-block-start: 1.3rem; padding: 0.85rem 1.05rem; border-radius: var(--radius-button); border-inline-start: 3px solid var(--warn); background: var(--warn-soft); } .note p { margin: 0.2rem 0 0; } .note-label { display: block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--warn); } .note-why { border-inline-start-color: var(--secondary); background: #5c4d3c10; } .note-why .note-label { color: var(--secondary); } .note-not-yet { border-inline-start-color: var(--danger); background: #a03a2e10; } .note-not-yet .note-label { color: var(--danger); } .checklist { margin-block-start: 3rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 1.2rem 1.4rem; } .checklist h2 { font-size: 1.1rem; margin-block-end: 0.7rem; } .checklist ul { margin: 0; padding: 0; list-style: none; } .checklist li { position: relative; padding-inline-start: 1.7rem; margin: 0.45rem 0; } .checklist li::before { content: "☐"; position: absolute; inset-inline-start: 0; color: var(--accent); font-size: 1.05rem; line-height: 1.5; } .pager { margin-block-start: 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .pager a { display: block; padding: 0.85rem 1.05rem; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); color: var(--ink); } .pager a:hover { text-decoration: none; border-color: var(--accent); } .pager span { display: block; font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; } .pager strong { font-weight: 700; } /* The "next" card sits at the end of the line in both directions. */ .pager-next { text-align: end; grid-column: 2; } .pager-prev { grid-column: 1; } .colophon { margin-block-start: 2.5rem; color: var(--muted); font-size: 0.85rem; border-block-start: 1px solid var(--border); padding-block-start: 1rem; } /* ---------- the language doorway ---------- */ body.doorway { display: grid; place-items: center; min-block-size: 100vh; text-align: center; } body.doorway main { padding: 2rem; } body.doorway .mark { inline-size: 54px; block-size: 54px; font-size: 1.5rem; margin: 0 auto 1rem; } body.doorway h1 { font-size: 1.5rem; } body.doorway p { color: var(--muted); } .doorway-links { display: flex; gap: 0.75rem; justify-content: center; margin-block-start: 1.2rem; } .doorway-links a { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-button); padding: 0.5rem 1.4rem; color: var(--ink); } /* ---------- narrow screens (the owner reads this on a phone half the time) ---------- */ @media (max-width: 900px) { .layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-block-start: 1.25rem; } .toc { position: static; } .toc details { } .doc h1 { font-size: 1.7rem; } .bar-kicker { display: none; } .bar-nav { order: 3; inline-size: 100%; border-block-start: 1px solid var(--divider); padding-block-start: 0.5rem; } .pager { grid-template-columns: minmax(0, 1fr); } .pager-next, .pager-prev { grid-column: 1; text-align: start; } } /* On a phone the chapter list is a closed drawer — a reader who came for chapter 6 should land on chapter 6, not on a screenful of links to the other ten. */ @media (max-width: 900px) { .toc details[open] summary { border-block-end: 1px solid var(--divider); } } /* ---------- print: the stockroom copy ---------- */ @media print { .bar, .toc, .pager, .skip { display: none; } .layout { display: block; max-inline-size: none; padding: 0; } body { font-size: 12pt; background: #fff; } .shot img { border: 1px solid #ccc; } .chapter-section { break-inside: avoid-page; } } /* A portrait picture — every register screen is one — shown near its own size rather than stretched across the reading column. Centred, because a tall image pinned to the start edge reads as a floated aside the text is supposed to wrap around, and it is not. */ .shot-tall img { inline-size: auto; max-inline-size: min(100%, 380px); margin-inline: auto; } .shot-tall figcaption { text-align: center; }