/* ======================================================================== Markaroo Help Center — help-specific styles Shared tokens, reset, chrome (navbar/footer/buttons/faq/page-header) and the institutional theme all come from global.css (imported below). Help pages set . ======================================================================== */ @import url("../assets/css/global.css"); @import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&display=swap"); /* ---------- footer inner (help footer markup uses .footer-inner) ---------- */ .footer-inner { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; } /* ---------- page header gradient (help variant) ---------- */ .page-header { background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%); border-bottom: 1px solid var(--rule-color); } .breadcrumb { font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 1rem; } .breadcrumb a { color: var(--color-primary); } .breadcrumb a:hover { color: var(--color-primary-hover); } .breadcrumb-sep { color: var(--color-text-faint); margin: 0 0.5rem; } /* ---------- main two-column layout ---------- */ .help-shell { display: grid; grid-template-columns: 240px 1fr; gap: 3rem; max-width: var(--container); margin: 0 auto; padding: clamp(2rem, 4vw, 3.5rem) 1.5rem clamp(3rem, 6vw, 5rem); } .side-nav { position: sticky; top: 96px; align-self: start; font-size: 0.92rem; } .side-nav-title { font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 0.75rem; } .side-nav ul li { margin-bottom: 0.15rem; } .side-nav a { display: block; padding: 0.5rem 0.75rem; border-radius: var(--radius); color: var(--color-text-muted); font-weight: 500; transition: all var(--transition-fast); border-left: 2px solid transparent; } .side-nav a:hover { color: var(--color-heading); background: var(--color-surface-1); } .side-nav a.is-current { color: var(--color-heading); background: var(--color-primary-soft); border-left-color: var(--color-primary); font-weight: 600; } .side-nav-divider { height: 1px; background: var(--rule-color); margin: 1rem 0; } .help-content { min-width: 0; } .help-content h2 { font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: 600; color: var(--color-heading); line-height: 1.25; letter-spacing: -0.01em; margin: 2.5rem 0 1rem; } .help-content h2:first-child { margin-top: 0; } .help-content h3 { font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: 600; color: var(--color-heading); margin: 1.75rem 0 0.6rem; } .help-content p { margin-bottom: 1rem; color: var(--color-text); } .help-content p strong { color: var(--color-heading); font-weight: 600; } .help-content a { color: var(--color-heading); text-decoration: underline; text-decoration-color: var(--color-primary); text-underline-offset: 3px; } .help-content a:hover { color: var(--color-primary); } .help-content ul.bulleted, .help-content ol.numbered { list-style: revert; padding-left: 1.5rem; margin: 0 0 1rem 0; } .help-content ul.bulleted li, .help-content ol.numbered li { margin-bottom: 0.4rem; } .help-content code { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 0.88em; background: var(--color-primary-soft); padding: 0.1rem 0.4rem; border-radius: 4px; color: var(--color-primary); } @media (max-width: 900px) { .help-shell { grid-template-columns: 1fr; gap: 2rem; } .side-nav { position: static; } } /* ---------- step blocks (numbered) ---------- */ .step-list { display: flex; flex-direction: column; gap: 1.25rem; margin: 1.5rem 0 2rem; } .step-row { display: grid; grid-template-columns: 48px 1fr; gap: 1.25rem; align-items: start; background: var(--color-surface); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; box-shadow: var(--shadow-card); border-left: 3px solid var(--color-primary); } .step-circle { width: 40px; height: 40px; border-radius: 50%; background: var(--color-primary-soft); border: 2px solid var(--color-primary); display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 600; color: var(--color-primary); font-size: 1rem; } .step-row h4 { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 600; color: var(--color-heading); margin: 2px 0 0.4rem; } .step-row p { margin-bottom: 0; font-size: 0.95rem; line-height: 1.6; color: var(--color-text); } .step-row p + p { margin-top: 0.5rem; } /* ---------- callouts ---------- */ .callout { border-radius: var(--radius); padding: 1rem 1.25rem 1rem 1.1rem; margin: 1.25rem 0; font-size: 0.95rem; line-height: 1.6; border-left: 3px solid var(--color-primary); background: var(--color-primary-soft); } .callout-label { font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 0.35rem; color: var(--color-primary); } .callout p { margin: 0; color: var(--color-text); } .callout.tip { border-left-color: var(--color-primary); background: var(--color-primary-soft); } .callout.tip .callout-label { color: var(--color-primary); } .callout.success { border-left-color: var(--color-success); background: var(--color-success-soft); } .callout.success .callout-label { color: var(--color-success); } .callout.warning { border-left-color: var(--color-danger); background: var(--color-danger-soft); } .callout.warning .callout-label { color: var(--color-danger); } /* ---------- hub topic cards ---------- */ .topic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 2rem 0; } @media (max-width: 1024px) { .topic-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .topic-grid { grid-template-columns: 1fr; } } .topic-card { display: block; background: var(--color-surface); border-radius: var(--radius-lg); padding: 1.5rem 1.5rem 1.4rem; border: 1px solid var(--color-border); box-shadow: var(--shadow-card); transition: all var(--transition); color: inherit; } .topic-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-elevated); border-color: var(--color-primary); } .topic-card .topic-step { font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-primary); margin-bottom: 0.5rem; } .topic-card h3 { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; color: var(--color-heading); margin: 0 0 0.4rem; } .topic-card p { font-size: 0.9rem; color: var(--color-text-muted); margin: 0; line-height: 1.55; } .topic-card .topic-arrow { display: inline-flex; align-items: center; margin-top: 0.85rem; font-size: 0.82rem; font-weight: 600; color: var(--color-heading); } .topic-card .topic-arrow::after { content: '\2192'; margin-left: 0.35rem; transition: transform var(--transition); } .topic-card:hover .topic-arrow::after { transform: translateX(3px); } /* ---------- definition tables ---------- */ .def-table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: 0.92rem; background: var(--color-surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); } .def-table th, .def-table td { text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid var(--color-border); vertical-align: top; } .def-table thead th { background: var(--color-surface-2); font-weight: 600; color: var(--color-heading); font-size: 0.85rem; } .def-table tbody tr:last-child td { border-bottom: none; } .def-table td:first-child { font-weight: 600; color: var(--color-heading); white-space: nowrap; } @media (max-width: 480px) { .def-table td:first-child { white-space: normal; } } .def-check { color: var(--color-success); font-weight: 700; } .def-dash { color: var(--color-text-faint); } /* ---------- inline badges ---------- */ .ui-pill { display: inline-block; font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; color: var(--color-heading); background: var(--color-surface-2); padding: 0.15rem 0.6rem; border-radius: 4px; letter-spacing: 0.01em; } .ui-pill.gold { background: var(--color-primary-soft); color: var(--color-primary); } .ui-pill.sage { background: var(--color-success-soft); color: var(--color-success); } .ui-pill.coral { background: var(--color-danger-soft); color: var(--color-danger); } /* ---------- prev / next pager ---------- */ .pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--rule-color); } .pager a { display: block; background: var(--color-surface); border-radius: var(--radius-lg); padding: 1rem 1.25rem; box-shadow: var(--shadow-card); border: 1px solid var(--color-border); transition: all var(--transition); } .pager a:hover { border-color: var(--color-primary); transform: translateY(-1px); box-shadow: var(--shadow-elevated); } .pager .pager-label { font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-primary); margin-bottom: 0.25rem; } .pager .pager-title { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; color: var(--color-heading); } .pager .next { text-align: right; } .pager .prev::before { content: '\2190\00A0'; color: var(--color-primary); } .pager .next::after { content: '\00A0\2192'; color: var(--color-primary); } .pager .pager-spacer { background: transparent; box-shadow: none; border: none; pointer-events: none; } @media (max-width: 600px) { .pager { grid-template-columns: 1fr; } } /* ---------- footer-specific link colour for help (footer chrome from global) ---------- */ .footer-inner .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } /* ---------- diagram (simple role/flow chart) ---------- */ .flow-diagram { background: var(--color-surface); border-radius: var(--radius); padding: 1.5rem; margin: 1.5rem 0; box-shadow: var(--shadow-card); display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.5rem 1rem; align-items: center; } .flow-node { text-align: center; padding: 0.75rem 0.5rem; border: 1px solid var(--color-primary); border-radius: var(--radius); background: var(--color-primary-soft); font-size: 0.82rem; font-weight: 600; color: var(--color-heading); position: relative; } .flow-arrow { text-align: center; color: var(--color-primary); font-size: 1.5rem; line-height: 1; } @media (max-width: 700px) { .flow-diagram { grid-template-columns: 1fr; } .flow-arrow { transform: rotate(90deg); padding: 0.5rem 0; } } /* ---------- FAQ details (help variant, inside content column) ---------- */ .help-content .faq-list { max-width: 760px; margin: 0; } .help-content .faq-item summary { font-size: 0.98rem; } .help-content .faq-answer { font-size: 0.95rem; } .help-content .faq-answer p + p { margin-top: 0.6rem; }