/* ========================================================================== TITO Guide — stylesheet Design tokens mirror Design_System/ds3-Att.html (black/orange, Inter + Playfair Display). Dark theme is the default; [data-theme="light"] on overrides the palette below. ========================================================================== */ :root { --bg: #0a0a0a; --bg-elevated: #121212; --surface: #1a1a1a; --surface-hover: #222222; --border: #2a2a2a; --border-strong: #3a3a3a; --text: #fafafa; --text-muted: #a3a3a3; --text-faint: #707070; --accent: #f97316; --accent-hover: #ea580c; --accent-light: #fb923c; --accent-soft: rgba(249, 115, 22, 0.14); --accent-contrast: #1a0d03; --success: #22c55e; --success-soft: rgba(34, 197, 94, 0.12); --warning: #eab308; --warning-soft: rgba(234, 179, 8, 0.12); --danger: #ef4444; --danger-soft: rgba(239, 68, 68, 0.12); --info: #38bdf8; --info-soft: rgba(56, 189, 248, 0.12); --shadow-color: rgba(0, 0, 0, 0.5); --header-h: 64px; --sidebar-w: 288px; --toc-w: 248px; --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; } :root[data-theme='light'] { --bg: #ffffff; --bg-elevated: #f7f7f7; --surface: #f1f1f1; --surface-hover: #e7e7e7; --border: #e2e2e2; --border-strong: #cfcfcf; --text: #171717; --text-muted: #545454; --text-faint: #8a8a8a; --accent: #ea580c; --accent-hover: #c2410c; --accent-light: #f97316; --accent-soft: rgba(234, 88, 12, 0.1); --accent-contrast: #fff7ed; --shadow-color: rgba(0, 0, 0, 0.08); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.6; min-height: 100vh; } img, svg { display: block; max-width: 100%; } a { color: var(--accent-light); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; } ::selection { background: var(--accent-soft); } .icon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm); z-index: 200; } .skip-link:focus { left: 12px; top: 12px; } /* ------------------------------ Header ---------------------------------- */ .guide-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--bg-elevated); border-bottom: 1px solid var(--border); z-index: 100; } .header-menu-btn { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; } .header-menu-btn:hover { background: var(--surface-hover); } .brand { display: flex; align-items: center; gap: 10px; color: var(--text); flex-shrink: 0; } .brand-logo { height: 24px; width: auto; display: block; } .brand-logo-light { display: none; } :root[data-theme='light'] .brand-logo-dark { display: none; } :root[data-theme='light'] .brand-logo-light { display: block; } .brand-title { font-size: 14px; color: var(--text-muted); font-weight: 500; display: none; } @media (min-width: 640px) { .brand-title { display: inline; } } .header-search-trigger { flex: 1; max-width: 420px; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); color: var(--text-faint); cursor: pointer; font-size: 13.5px; margin-left: auto; } .header-search-trigger:hover { border-color: var(--border-strong); color: var(--text-muted); } .header-search-trigger span.hint-text { flex: 1; text-align: left; } kbd.key { font-family: var(--font-body); font-size: 11px; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text-faint); } .header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .icon-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; } .icon-btn:hover { background: var(--surface-hover); color: var(--text); } .lang-select-wrap { position: relative; } .lang-btn { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; font-size: 13px; } .lang-btn:hover { background: var(--surface-hover); } .lang-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 190px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 12px 32px var(--shadow-color); padding: 6px; z-index: 120; display: none; } .lang-menu.open { display: block; } .lang-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--text); font-size: 13.5px; cursor: pointer; text-align: left; } .lang-menu-item:hover { background: var(--surface-hover); } .lang-menu-item.active { color: var(--accent-light); font-weight: 600; } .lang-menu-item .flag { font-size: 15px; } /* ------------------------------ Layout ----------------------------------- */ .guide-body { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w); padding-top: var(--header-h); min-height: 100vh; } @media (max-width: 1180px) { .guide-body { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); } .guide-toc { display: none; } } @media (max-width: 880px) { .guide-body { grid-template-columns: minmax(0, 1fr); } .header-menu-btn { display: flex; } } /* ------------------------------ Sidebar ---------------------------------- */ .guide-sidebar { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow-y: auto; border-right: 1px solid var(--border); padding: 20px 12px 40px; background: var(--bg); } /* Hidden (and out of grid flow) at all sizes except when opened on mobile — without this, the backdrop is an in-flow grid item at desktop widths and shifts sidebar/main/TOC over by one column. */ .sidebar-backdrop { display: none; } @media (max-width: 880px) { .guide-sidebar { position: fixed; top: var(--header-h); left: 0; height: calc(100vh - var(--header-h)); width: 300px; max-width: 84vw; background: var(--bg-elevated); border-right: 1px solid var(--border); transform: translateX(-100%); transition: transform 0.2s ease; z-index: 90; } .guide-sidebar.open { transform: translateX(0); box-shadow: 24px 0 48px var(--shadow-color); } .sidebar-backdrop { display: none; position: fixed; inset: var(--header-h) 0 0 0; background: rgba(0, 0, 0, 0.5); z-index: 85; } .sidebar-backdrop.open { display: block; } } .filter-block { margin-bottom: 16px; padding: 0 8px; } .filter-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin: 0 0 8px; display: flex; align-items: center; justify-content: space-between; } .filter-clear { background: none; border: none; color: var(--accent-light); font-size: 11px; cursor: pointer; text-transform: none; letter-spacing: 0; } .filter-chips { display: flex; flex-wrap: wrap; gap: 6px; } .filter-chip { font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; } .filter-chip:hover { border-color: var(--border-strong); } .filter-chip.active { background: var(--accent); border-color: var(--accent); color: #1a0d03; font-weight: 600; } .nav-section { margin-bottom: 4px; } .nav-section-btn { width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 8px; border: none; background: transparent; color: var(--text); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; border-radius: var(--radius-sm); } .nav-section-btn:hover { background: var(--surface-hover); } .nav-section-btn .icon { width: 16px; height: 16px; color: var(--accent-light); } .nav-section-chevron { margin-left: auto; transition: transform 0.15s ease; } .nav-section.collapsed .nav-section-chevron { transform: rotate(-90deg); } .nav-section.collapsed .nav-page-list { display: none; } .nav-page-list { list-style: none; margin: 2px 0 10px; padding: 0; } .nav-page-item { margin: 1px 0; } .nav-page-link { display: flex; align-items: center; gap: 9px; padding: 7px 10px 7px 30px; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 13.5px; position: relative; } .nav-page-link:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; } .nav-page-link.active { background: var(--accent-soft); color: var(--accent-light); font-weight: 600; } .nav-page-link.active::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--accent); } .nav-page-link .icon { width: 15px; height: 15px; opacity: 0.8; } .nav-page-link.dimmed { opacity: 0.4; } .nav-progress-dot { margin-left: auto; font-size: 10.5px; color: var(--text-faint); flex-shrink: 0; } .nav-progress-dot.done { color: var(--success); } /* ------------------------------ Content ---------------------------------- */ .guide-main { min-width: 0; padding: 32px 28px 80px; } .breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-faint); margin-bottom: 20px; flex-wrap: wrap; } .breadcrumb a { color: var(--text-faint); } .breadcrumb a:hover { color: var(--accent-light); } .breadcrumb .sep { opacity: 0.5; } .breadcrumb .current { color: var(--text-muted); } .page-content { max-width: 760px; } .page-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); background: var(--surface); } .badge.badge-module { color: var(--accent-light); border-color: rgba(249, 115, 22, 0.35); background: var(--accent-soft); } .badge.badge-profile { text-transform: none; } .badge.badge-fallback { color: var(--info); border-color: rgba(56, 189, 248, 0.3); background: var(--info-soft); cursor: help; } .page-title { font-family: var(--font-display); font-size: 34px; font-weight: 700; line-height: 1.2; margin: 0 0 8px; color: var(--text); } .page-subtitle { font-size: 16.5px; color: var(--text-muted); margin: 0 0 28px; max-width: 620px; } .page-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; } .toolbar-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 11px; cursor: pointer; } .toolbar-btn:hover { border-color: var(--border-strong); color: var(--text); } .toolbar-btn .icon { width: 14px; height: 14px; } .progress-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; } .progress-track { width: 60px; height: 5px; background: var(--border); border-radius: 4px; overflow: hidden; } .progress-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width 0.2s ease; } /* Content blocks */ .block { margin: 0 0 26px; } .block-heading { font-family: var(--font-display); font-size: 21px; font-weight: 700; margin: 34px 0 12px; color: var(--text); scroll-margin-top: calc(var(--header-h) + 16px); } .block-heading:first-child { margin-top: 0; } .block-paragraph { color: var(--text-muted); line-height: 1.75; margin: 0 0 16px; font-size: 15px; } .block-paragraph code, .inline-code { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; font-size: 13px; color: var(--accent-light); font-family: 'SFMono-Regular', Consolas, Menlo, monospace; } .block-list { margin: 0 0 16px; padding-left: 22px; color: var(--text-muted); line-height: 1.75; } .block-list li { margin-bottom: 6px; } .what-you-will-do { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 28px; } .what-you-will-do .wywd-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-light); font-weight: 700; margin: 0 0 10px; } .what-you-will-do ul { margin: 0; padding-left: 20px; color: var(--text-muted); } .what-you-will-do li { margin-bottom: 5px; } .steps-list { list-style: none; margin: 0 0 24px; padding: 0; counter-reset: step; } .step-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); } .step-item:last-child { border-bottom: none; } .step-check { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text-muted); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; margin-top: 1px; } .step-check:hover { border-color: var(--accent); } .step-item.done .step-check { background: var(--success); border-color: var(--success); color: #06210f; } .step-item.done .step-text { color: var(--text-faint); text-decoration: line-through; text-decoration-color: var(--border-strong); } .step-body { flex: 1; } .step-text { color: var(--text); font-size: 15px; line-height: 1.6; } .step-detail { color: var(--text-muted); font-size: 13.5px; margin-top: 5px; line-height: 1.6; } .callout { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--border); margin: 0 0 20px; font-size: 14px; line-height: 1.65; } .callout .icon { margin-top: 2px; } .callout-title { font-weight: 700; margin: 0 0 3px; font-size: 13.5px; } .callout-body { color: var(--text-muted); } .callout.tip { background: var(--success-soft); border-color: rgba(34, 197, 94, 0.3); } .callout.tip .callout-title, .callout.tip .icon { color: var(--success); } .callout.warning { background: var(--warning-soft); border-color: rgba(234, 179, 8, 0.3); } .callout.warning .callout-title, .callout.warning .icon { color: var(--warning); } .callout.note { background: var(--info-soft); border-color: rgba(56, 189, 248, 0.3); } .callout.note .callout-title, .callout.note .icon { color: var(--info); } .callout.danger { background: var(--danger-soft); border-color: rgba(239, 68, 68, 0.3); } .callout.danger .callout-title, .callout.danger .icon { color: var(--danger); } .table-wrap { overflow-x: auto; margin: 0 0 22px; border: 1px solid var(--border); border-radius: var(--radius-md); } .content-table { width: 100%; border-collapse: collapse; font-size: 13.75px; } .content-table th, .content-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); white-space: normal; } .content-table th { background: var(--surface); color: var(--text); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.03em; } .content-table td { color: var(--text-muted); } .content-table tr:last-child td { border-bottom: none; } .figure { margin: 0 0 24px; } .figure-frame { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); } .figure-frame img { width: 100%; display: block; } .figure-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 220px; color: var(--text-faint); font-size: 13px; padding: 24px; text-align: center; } .figure-placeholder .icon { width: 32px; height: 32px; } .figure-caption { font-size: 12.5px; color: var(--text-faint); text-align: center; margin-top: 8px; } .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 0 0 22px; } .content-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; background: var(--surface); } .content-card-title { font-weight: 700; font-size: 14.5px; margin: 0 0 6px; color: var(--text); } .content-card-text { font-size: 13.5px; color: var(--text-muted); margin: 0; line-height: 1.6; } .faq-list { margin: 0 0 22px; } .faq-item { border-bottom: 1px solid var(--border); padding: 4px 0; } .faq-item:first-child { border-top: 1px solid var(--border); } .faq-item summary { cursor: pointer; padding: 12px 4px; font-weight: 600; font-size: 14.5px; list-style: none; display: flex; align-items: center; gap: 10px; color: var(--text); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary .icon { color: var(--accent-light); transition: transform 0.15s ease; flex-shrink: 0; } .faq-item[open] summary .icon { transform: rotate(45deg); } .faq-answer { padding: 0 4px 14px 30px; color: var(--text-muted); font-size: 13.75px; line-height: 1.7; } .common-problems { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px 4px; margin: 32px 0; background: var(--bg-elevated); } .common-problems .section-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); font-weight: 700; margin: 0 0 6px; } .related-pages { margin: 32px 0; } .related-pages .section-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); font-weight: 700; margin: 0 0 10px; } .related-chip-list { display: flex; flex-wrap: wrap; gap: 8px; } .related-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); color: var(--text); font-size: 13px; } .related-chip:hover { border-color: var(--accent); color: var(--accent-light); text-decoration: none; } .page-nav-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); } .page-nav-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); } .page-nav-card:hover { border-color: var(--accent); text-decoration: none; } .page-nav-card.next { text-align: right; align-items: flex-end; grid-column: 2; } .page-nav-label { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; } .page-nav-title { font-size: 14.5px; font-weight: 600; } /* Coming soon / not found */ .state-block { text-align: center; padding: 60px 20px; color: var(--text-muted); } .state-block .icon-lg { width: 44px; height: 44px; color: var(--text-faint); margin: 0 auto 16px; } .state-block h2 { font-family: var(--font-display); color: var(--text); font-size: 24px; margin: 0 0 8px; } .state-block p { margin: 0 0 20px; } .state-block .toolbar-btn { display: inline-flex; } /* ------------------------------ TOC --------------------------------------- */ .guide-toc { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow-y: auto; padding: 32px 20px 40px; border-left: 1px solid var(--border); } .toc-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); font-weight: 700; margin: 0 0 12px; } .toc-list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); } .toc-list li { margin: 0; } .toc-link { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 2px solid transparent; font-size: 13px; color: var(--text-faint); } .toc-link:hover { color: var(--text); text-decoration: none; } .toc-link.active { color: var(--accent-light); border-left-color: var(--accent); font-weight: 600; } .toc-empty { font-size: 12.5px; color: var(--text-faint); } /* ------------------------------ Search modal ------------------------------ */ .search-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 200; display: none; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; } .search-overlay.open { display: flex; } .search-modal { width: 100%; max-width: 560px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 24px 60px var(--shadow-color); overflow: hidden; } .search-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); } .search-input-row .icon { color: var(--text-faint); } .search-input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-size: 15px; font-family: inherit; } .search-input::placeholder { color: var(--text-faint); } .search-close { border: none; background: transparent; color: var(--text-faint); cursor: pointer; font-size: 11px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 5px; } .search-results { max-height: 50vh; overflow-y: auto; padding: 6px; } .search-result-item { display: block; padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; } .search-result-item:hover, .search-result-item.selected { background: var(--surface-hover); text-decoration: none; } .search-result-title { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; } .search-result-section { font-size: 11px; color: var(--accent-light); font-weight: 600; } .search-result-snippet { font-size: 12.5px; color: var(--text-faint); margin-top: 3px; } .search-result-snippet mark { background: var(--accent-soft); color: var(--accent-light); border-radius: 3px; padding: 0 2px; } .search-empty { padding: 30px 16px; text-align: center; color: var(--text-faint); font-size: 13.5px; } /* ------------------------------ Footer ------------------------------------ */ .guide-footer { grid-column: 1 / -1; border-top: 1px solid var(--border); padding: 20px 28px; font-size: 12.5px; color: var(--text-faint); text-align: center; } /* ------------------------------ Utility ------------------------------------ */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } @media print { .guide-header, .guide-sidebar, .guide-toc, .sidebar-backdrop, .page-toolbar, .page-nav-footer, .search-overlay, .filter-block { display: none !important; } .guide-body { grid-template-columns: 1fr !important; padding-top: 0 !important; } body { background: #fff; color: #111; } .page-content { max-width: none; } }