/* ============================================================== Timebutler Guides — Main Stylesheet Design tokens from Figma (index: 4136:63375, article: 4137:65801). Layout: CSS Grid with fixed sidebar + fluid content. ============================================================== */ /* ---------------------------------------------------------- 1. CSS Custom Properties (design tokens) Extracted from Figma Timebutler Master file. ---------------------------------------------------------- */ :root { /* Primary text and background */ --color-text: #0f1115; --color-text-secondary: #62758e; --color-link: #406cc1; --color-bg: #ffffff; /* Borders and dividers */ --color-border-light: #eaecfa; /* Legacy brand colors — still used by primary/ghost buttons */ --color-navy: #1a2b6b; --color-blue: #3366cc; /* Neutral palette — used for subtle backgrounds, hover states */ --color-gray-50: #f8f9fb; --color-gray-100: #f0f2f5; --color-gray-200: #e5e7eb; --color-gray-300: #d1d5db; /* Layout dimensions */ --sidebar-width: 320px; --header-height: 72px; --content-max-width: 984px; /* Typography — Poppins loaded via Google Fonts in */ --font-family: "Poppins", system-ui, sans-serif; --font-size-base: 16px; --font-size-sm: 14px; --font-size-xs: 12px; --line-height: 1.6; /* Spacing scale (matches Figma dimensions/spacing tokens) */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-xxl: 40px; /* Border radius */ --radius-sm: 8px; --radius-lg: 16px; --radius-pill: 9999px; /* Elevation — soft double-layer card shadow from Figma */ --shadow-card: 0 8px 14px 1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.04); } /* ---------------------------------------------------------- 2. Reset and base styles ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: var(--font-size-base); -webkit-font-smoothing: antialiased; } body { font-family: var(--font-family); color: var(--color-text); line-height: var(--line-height); /* Page background is white — the blue backdrop lives on .content-area only, so it can carry its own border-radius. */ /* Minimum supported viewport — below this the layout would start to break, so the page becomes horizontally scrollable instead. Covers iPhone SE (375) and most Android phones; sub-360px devices get a tiny pan. */ min-width: 360px; } /* Inline SVG icons inherit text color */ .icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } /* ---------------------------------------------------------- 3. Page grid layout ---------------------------------------------------------- */ .page-grid { display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-height: calc(100vh - var(--header-height)); } /* ---------------------------------------------------------- 4. Header — 72px tall, sticky. Figma: logo+label left, search center (index only), language / ghost button / primary button right. ---------------------------------------------------------- */ .header { display: flex; align-items: center; gap: var(--space-md); height: var(--header-height); /* No left padding — the logo block fills the full sidebar width. The SVG itself has built-in left whitespace that provides visual indent. */ padding: 0 var(--space-xl) 0 0; background: var(--color-bg); position: sticky; top: 0; z-index: 100; } /* Mobile hamburger — hidden on desktop */ .header__menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: var(--space-xs); color: var(--color-text); } /* Logo block — same width as the sidebar so they align vertically. overflow:hidden keeps the SVG from spilling out. */ .header__logo { display: flex; align-items: center; flex-shrink: 0; justify-content: center; padding: 0 32px; width: var(--sidebar-width); text-decoration: none; overflow: hidden; } /* Fill the container width; height follows the SVG's aspect ratio */ .header__logo-img { display: block; width: 100%; height: auto; } /* Search bar — Figma: 562px max, rounded, gray bg. Visible on all pages, powered by Pagefind. */ .header__search { display: flex; flex: 1; max-width: 562px; position: relative; } .header__search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--color-text-secondary); pointer-events: none; } .header__search-input { width: 100%; height: 44px; padding: 0 14px 0 40px; border: 1px solid var(--color-border-light); border-radius: var(--radius-pill); font-family: var(--font-family); font-size: var(--font-size-sm); color: var(--color-text); background: var(--color-gray-50); outline: none; transition: border-color 0.15s; } .header__search-input:focus { border-color: var(--color-link); background: var(--color-bg); } /* Mobile search toggle — hidden on desktop */ .header__search-toggle { display: none; background: none; border: none; cursor: pointer; padding: var(--space-xs); color: var(--color-text-secondary); } /* ---------------------------------------------------------- 4b. Search results dropdown — anchored below the input. Appears when the user types, shows title + snippet. ---------------------------------------------------------- */ .search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: 420px; overflow-y: auto; background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); z-index: 200; } .search-results[hidden] { display: none; } /* Individual result item */ .search-results__item { display: block; padding: var(--space-md); text-decoration: none; color: var(--color-text); border-bottom: 1px solid var(--color-border-light); transition: background 0.1s; } .search-results__item:last-child { border-bottom: none; } .search-results__item:hover, .search-results__item--active { background: var(--color-gray-50); } /* Result title */ .search-results__title { display: block; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); margin-bottom: var(--space-xs); line-height: 1.3; } /* Result snippet with highlighted matches */ .search-results__snippet { display: block; font-size: var(--font-size-xs); color: var(--color-text-secondary); line-height: 1.5; } /* Highlighted match text within snippet */ .search-results__snippet mark { background: rgba(64, 108, 193, 0.12); color: var(--color-link); border-radius: 2px; padding: 0 2px; } /* "No results" and loading messages */ .search-results__empty { padding: var(--space-lg); text-align: center; color: var(--color-text-secondary); font-size: var(--font-size-sm); } /* Right-side actions — language, sign-in (ghost), support (primary) */ .header__actions { display: flex; align-items: center; gap: var(--space-lg); margin-left: auto; white-space: nowrap; } /* Language switcher — globe icon + other language code, direct link */ .header__lang { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-sm); color: var(--color-text); font-size: var(--font-size-sm); font-weight: 500; text-transform: uppercase; letter-spacing: -0.14px; text-decoration: none; border-radius: var(--radius-pill); transition: background 0.1s; } .header__lang:hover { background: var(--color-gray-50); } /* Sign-in — Figma ghost button: 108×40, pill shape, no border */ .header__sign-in { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); height: 40px; padding: 0 var(--space-md); color: var(--color-text); text-decoration: none; font-size: 15px; font-weight: 500; border-radius: var(--radius-pill); transition: background 0.1s; } .header__sign-in:hover { background: var(--color-gray-50); } /* Support — Figma primary button: navy fill, 155×40, pill shape */ .header__support-btn { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); height: 40px; padding: 0 var(--space-md) 0 var(--space-lg); background: var(--color-navy); color: var(--color-bg); border-radius: var(--radius-pill); text-decoration: none; font-size: 15px; font-weight: 500; transition: background 0.15s; } .header__support-btn:hover { background: var(--color-text); } /* ---------------------------------------------------------- 5. Sidebar — 320px, collapsible accordion. Figma: top-level items with icons + chevrons, expandable sub-navigation groups underneath. ---------------------------------------------------------- */ .sidebar { background: var(--color-bg); overflow-y: auto; position: sticky; top: var(--header-height); /* 100dvh accounts for iOS Safari's collapsing address bar — 100vh would overflow past the visible area when the address bar is showing */ height: calc(100vh - var(--header-height)); height: calc(100dvh - var(--header-height)); padding: var(--space-md) 0; } /* Sidebar mobile actions — hidden on desktop, shown inside the slide-in overlay on mobile via the @media (max-width: 768px) block. Mirrors the header right-side actions for narrow viewports. */ .sidebar__actions { display: none; } /* Backdrop scrim behind the sidebar/search overlays on mobile. Hidden on desktop; activated via .overlay-backdrop--open. */ .overlay-backdrop { display: none; } .sidebar__categories { list-style: none; } /* Divider between top-level categories */ .sidebar__category { border-bottom: 1px solid var(--color-border-light); margin: 0 var(--space-md); } .sidebar__category:last-child { border-bottom: none; } /* Category toggle button — Figma SideNavItem: 16px icon + 14px SemiBold + trailing chevron, 16px/12px padding, 16px radius, white bg (active = blue pill per Figma). */ .sidebar__cat-toggle { display: flex; align-items: center; gap: var(--space-sm); width: 100%; padding: 12px var(--space-md); border: none; background: none; cursor: pointer; font-family: var(--font-family); font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); text-align: left; border-radius: var(--radius-lg); transition: background 0.1s, color 0.1s; } .sidebar__cat-toggle:hover { background: rgba(64, 108, 193, 0.06); } /* Active (open) category — blue pill with white text, matching Figma */ .sidebar__category--open > .sidebar__cat-toggle { background: var(--color-link); color: #ffffff; } /* Category icon — 16px fill-based Iconsax icon, inherits text color */ .sidebar__cat-icon { color: inherit; flex-shrink: 0; width: 16px; height: 16px; } /* Category label takes remaining space */ .sidebar__cat-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Chevron (Figma arrow-right icon) rotates 90° when category is open. Inherits color from toggle button so it turns white in active state. */ .sidebar__chevron { transition: transform 0.2s; color: inherit; flex-shrink: 0; width: 12px; height: 12px; opacity: 0.6; } .sidebar__category--open .sidebar__chevron { transform: rotate(90deg); opacity: 1; } /* Expanded children container */ .sidebar__children { padding: var(--space-sm) 0 var(--space-sm) var(--space-lg); } .sidebar__children[hidden] { display: none; } /* Subcategory heading — Figma SideNavLabel: 12px SemiBold uppercase, secondary color */ .sidebar__sub-heading { font-size: var(--font-size-xs); font-weight: 600; color: var(--color-text-secondary); letter-spacing: -0.12px; padding: var(--space-md) 0 var(--space-xs) var(--space-lg); text-transform: uppercase; } /* First subcategory heading needs less top space */ .sidebar__sub-heading:first-child { padding-top: var(--space-sm); } /* Page list inside each subcategory. Figma Sub Navigation uses gap:8px between items — replicate with flex column. */ .sidebar__pages { list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); /* 8px between items, matches Figma gap */ } /* Page link — Figma sub-nav item: 14px Medium, 8px radius, icon + label, 24px left indent. ALL child items are #406cc1 (secondary blue) per Figma sub-navigation spec. */ .sidebar__link { display: block; padding: 2px var(--space-sm) 2px var(--space-lg); font-size: var(--font-size-sm); font-weight: 500; color: var(--color-link); text-decoration: none; border-radius: var(--radius-sm); line-height: 1.4; transition: color 0.1s, background 0.1s; } .sidebar__link:hover { color: var(--color-link); background: rgba(64, 108, 193, 0.06); } /* Active page — slightly bolder + subtle blue background */ .sidebar__link--active { color: var(--color-link); font-weight: 600; background: rgba(64, 108, 193, 0.08); } /* ---------------------------------------------------------- 6. Content area — fluid column next to sidebar. Figma: 24px left padding, 24px gutter to sidebar. ---------------------------------------------------------- */ .content-area { min-width: 0; padding: 0 var(--space-lg) var(--space-xl) var(--space-lg); background: #f0f4ff; border-radius: var(--radius-lg); margin: 0 24px 0 12px; } /* ---------------------------------------------------------- 7. Breadcrumb — top row on article pages. Figma: links separated by arrow-right icons, optional secondary button on the right (48px tall row). ---------------------------------------------------------- */ .breadcrumb { display: flex; align-items: center; justify-content: space-between; padding: var(--space-lg) 0 var(--space-md); font-size: var(--font-size-sm); color: var(--color-text-secondary); } .breadcrumb__trail { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; } .breadcrumb__link { color: var(--color-link); text-decoration: none; } .breadcrumb__link:hover { text-decoration: underline; } .breadcrumb__sep { color: var(--color-text-secondary); } .breadcrumb__current { color: var(--color-text); font-weight: 500; } /* "Next" link on the right side */ .breadcrumb__next { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-link); text-decoration: none; font-weight: 500; white-space: nowrap; } .breadcrumb__next:hover { text-decoration: underline; } /* ---------------------------------------------------------- 8. Article — hero block + elevated card body. Figma article page (4137:65801): - Article hero: left-aligned 36px title + 16px subtitle - Body wrapped in elevated white card ---------------------------------------------------------- */ /* Article hero — displayed above the card, left-aligned. max-width matches the card so long titles wrap instead of overflowing past the body on wide screens. */ .article-hero { padding: var(--space-xl) var(--space-xl) var(--space-md); max-width: var(--content-max-width); } .article-hero__title { font-size: 36px; font-weight: 500; color: var(--color-text); line-height: 1.1; letter-spacing: -0.36px; margin-bottom: var(--space-md); } .article-hero__subtitle { font-size: 16px; font-weight: 400; color: var(--color-text); line-height: 1.6; } /* Article card — elevated container for the rendered markdown. Figma: white bg, 16px radius, soft double-layer shadow. */ .article-card { background: var(--color-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-xl); max-width: var(--content-max-width); margin-bottom: var(--space-xl); } /* Legacy .article class — keeps old pages working until they adopt the new .article-card wrapper */ .article { max-width: var(--content-max-width); } /* Section headings inside card — Figma Standard Card Title: 20px SemiBold */ .article-card h1, .article h1 { font-size: 20px; font-weight: 600; color: var(--color-text); margin-bottom: var(--space-md); line-height: 1.4; } .article-card h2, .article h2 { font-size: 20px; font-weight: 600; color: var(--color-text); margin-top: var(--space-xl); margin-bottom: var(--space-sm); line-height: 1.4; } .article-card h3, .article h3 { font-size: 16px; font-weight: 600; color: var(--color-text); margin-top: var(--space-lg); margin-bottom: var(--space-sm); } /* Drop the top margin when a heading opens the article — the card's own padding already provides spacing, and otherwise it looks like the page starts with a blank line. */ .article-card > h2:first-child, .article-card > h3:first-child, .article > h2:first-child, .article > h3:first-child { margin-top: 0; } /* Paragraphs */ .article-card p, .article p { margin-bottom: var(--space-md); } /* Links */ .article-card a, .article a { color: var(--color-link); text-decoration: none; } .article-card a:hover, .article a:hover { text-decoration: underline; } /* Lists */ .article-card ul, .article-card ol, .article ul, .article ol { margin-bottom: var(--space-md); padding-left: var(--space-lg); } .article-card li, .article li { margin-bottom: var(--space-xs); } /* Images inside articles — default to 70% width, centered block. Overrides via Kramdown attribute list: ![](./pic.png){:.full} full article width ![](./pic.png){:.small} 40% — for narrow screenshots ![](./pic.png){:.inline} flows with text, no margin/border */ .article-card img, .article img { display: block; max-width: 70%; height: auto; margin: var(--space-md) auto; border-radius: var(--radius-sm); border: 1px solid var(--color-border-light); } .article-card img.full, .article img.full { max-width: 100%; } .article-card img.small, .article img.small { max-width: 40%; } .article-card img.inline, .article img.inline { display: inline-block; max-width: 100%; margin: 0 4px; vertical-align: middle; border: 0; border-radius: 0; } /* Bold text */ .article-card strong, .article strong { font-weight: 600; } /* Inline highlights — authored as `backticks` in Markdown. Used to draw attention to UI labels, field names, button text. font-family: inherit overrides the browser's default monospace so highlights read as named UI elements, not code snippets. */ .article-card code, .article code { background: #f0f4ff; color: var(--color-text); font-family: inherit; font-weight: 500; padding: 1px 6px; border-radius: 4px; font-size: 0.95em; } /* Code blocks — keep the technical monospace look for actual code samples */ .article-card pre, .article pre { background: var(--color-gray-100); padding: var(--space-md); border-radius: var(--radius-sm); overflow-x: auto; margin-bottom: var(--space-md); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } .article-card pre code, .article pre code { background: none; padding: 0; font-family: inherit; font-weight: 400; } /* Horizontal rules */ .article-card hr, .article hr { border: none; border-top: 1px solid var(--color-border-light); margin: var(--space-xl) 0; } /* Callouts — authored as Markdown blockquotes (> ...). Default style is "info" (blue). Authors opt into other types by adding {:.warning} or {:.tip} on the line after the quote. */ .article-card blockquote, .article blockquote { margin: var(--space-md) 0; padding: var(--space-md) var(--space-lg); background: #f0f4ff; border-left: 4px solid var(--color-link); border-radius: var(--radius-sm); color: var(--color-text); } /* Drop the trailing margin on the last paragraph inside a callout so the box doesn't look bottom-heavy */ .article-card blockquote p:last-child, .article blockquote p:last-child { margin-bottom: 0; } /* When the callout opens with bold text (e.g. **Note:**, **Important**), promote it to a coloured heading row */ .article-card blockquote p:first-child > strong:first-child, .article blockquote p:first-child > strong:first-child { display: block; margin-bottom: var(--space-xs); color: var(--color-link); } /* Warning callout — amber */ .article-card blockquote.warning, .article blockquote.warning { background: #fff5e6; border-left-color: #d97706; } .article-card blockquote.warning p:first-child > strong:first-child, .article blockquote.warning p:first-child > strong:first-child { color: #b45309; } /* Tip callout — green */ .article-card blockquote.tip, .article blockquote.tip { background: #ecfdf5; border-left-color: #059669; } .article-card blockquote.tip p:first-child > strong:first-child, .article blockquote.tip p:first-child > strong:first-child { color: #047857; } /* Tables */ .article-card table, .article table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-md); } .article-card th, .article-card td, .article th, .article td { border: 1px solid var(--color-border-light); padding: var(--space-sm) var(--space-md); text-align: left; } .article-card th, .article th { background: var(--color-gray-50); font-weight: 600; } /* ---------------------------------------------------------- 9. Footer — Figma 🧰Footer (node 4427:2866). Two rows centered: help links + legal/meta. 40px horizontal, 32px vertical padding. ---------------------------------------------------------- */ .footer { text-align: center; padding: var(--space-xl) var(--space-xxl); background: var(--color-bg); } /* Row 1 — help links, gap 32px */ .footer__links { display: flex; align-items: center; justify-content: center; gap: var(--space-xl); margin-bottom: var(--space-md); font-size: var(--font-size-sm); flex-wrap: wrap; } /* "Help and support" — SemiBold with headset icon, now a link */ .footer__help { display: flex; align-items: center; gap: var(--space-sm); font-weight: 600; color: var(--color-text); text-decoration: none; } /* Other footer links — Regular weight */ .footer__link { color: var(--color-text); text-decoration: none; font-weight: 400; } .footer__link:hover { color: var(--color-link); } /* ---------------------------------------------------------- 10. Index page — hero, Book cards, FAQ card. Figma index (4136:63375): - Centered hero: 36px Medium title + 16px subtitle - 2×3 grid of "Book" cards with illustration - Full-width FAQ card with divider list ---------------------------------------------------------- */ /* Hero — centered text block */ .index-hero { text-align: center; padding: var(--space-xl) 0 var(--space-lg); } .index-hero__title { font-size: 36px; font-weight: 500; color: var(--color-text); line-height: 1.1; letter-spacing: -0.36px; margin-bottom: var(--space-sm); } .index-hero__subtitle { font-size: 16px; font-weight: 400; color: var(--color-text-secondary); line-height: 1.6; } /* Book cards — 3-column grid, 2 rows for 6 featured categories */ .index-cards { display: grid; /* auto-fill: browser fits as many columns as possible at min 260px, then wraps — no hard breakpoints needed. */ grid-template-columns: repeat(auto-fill, minmax(345px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-xl); } /* Individual Book card — Figma: white, 16px radius, soft shadow, 32px top/bottom padding, content centered. Note: overflow is not set to hidden so illustrations don't get clipped. */ .index-card { display: flex; flex-direction: column; align-items: center; background: var(--color-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-xl) 0; text-decoration: none; color: var(--color-text); transition: box-shadow 0.15s, transform 0.15s; } .index-card:hover { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04); transform: translateY(-2px); } /* Card label — Figma: 14px Regular, secondary color */ .index-card__label { font-size: var(--font-size-sm); font-weight: 400; color: var(--color-text-secondary); letter-spacing: -0.14px; padding: 0 var(--space-lg); width: 100%; text-align: left; } /* Card title — Figma: 36px SemiBold, black, line-height 1.1 */ .index-card__title { font-size: 36px; font-weight: 600; color: var(--color-text); line-height: 1.2; letter-spacing: -0.36px; margin: var(--space-sm) 0 var(--space-xl); padding: 0 var(--space-lg); width: 100%; text-align: left; /* Always occupy exactly 2 lines: min-height reserves the slot for short titles; line-clamp caps long titles so they never exceed 2 lines. */ min-height: calc(2 * 1.2em + 0.15em); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; hyphens: auto; } /* Card illustration — Figma: 274×274, centered. width+max-width lets the image scale on narrow cards; height: auto preserves the illustration's own aspect ratio. */ .index-card__image { width: 100%; max-width: 274px; height: auto; flex-shrink: 0; display: block; } /* FAQ section — elevated white card (same shadow as Book cards). Figma "Digital Personnel File" card (4138:76828). */ /* Outer wrapper — lavender frame around the FAQ card */ .index-faq-wrapper { background: var(--color-border-light); border-radius: var(--radius-lg); padding: var(--space-md); margin-bottom: var(--space-xl); } .index-faq { background: var(--color-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-lg) var(--space-xl) var(--space-sm); } /* FAQ header — title left, "View All" link right */ .index-faq__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-lg); } /* FAQ title — Figma Standard Card Title: 20px SemiBold */ .index-faq__title { font-size: 20px; font-weight: 600; color: var(--color-text); margin: 0; line-height: 1.4; } /* "View All" link — Figma: 14px Regular, secondary blue */ .index-faq__view-all { font-size: var(--font-size-sm); font-weight: 400; color: var(--color-link); text-decoration: none; } .index-faq__view-all:hover { text-decoration: underline; } /* FAQ item row — Figma ListItem: text left, 32px circular ghost-button with arrow right, 1px eaecfa divider between items (no divider after last) */ .index-faq__item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--color-border-light); text-decoration: none; color: var(--color-text); border-radius: var(--radius-sm); transition: background 0.1s; } .index-faq__item:last-child { border-bottom: none; } .index-faq__item:hover { background: var(--color-gray-50); } .index-faq__question { font-size: var(--font-size-sm); font-weight: 400; } /* Circular ghost-button arrow on each FAQ row — Figma: 32px circle, 16px arrow-right icon inside */ .index-faq__arrow { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-pill); flex-shrink: 0; color: var(--color-text-secondary); transition: background 0.1s; } .index-faq__item:hover .index-faq__arrow { background: var(--color-gray-100); } /* Legacy icon style for FAQ items (backwards compat) */ .index-faq__item .icon { color: var(--color-text-secondary); flex-shrink: 0; } /* ---------------------------------------------------------- 11. FAQ listing page — reuses .index-faq__item styles. ---------------------------------------------------------- */ .faq-hero { padding: var(--space-xl) 0 var(--space-lg); } .faq-hero__title { font-size: 36px; font-weight: 500; color: var(--color-text); line-height: 1.1; letter-spacing: -0.36px; margin-bottom: var(--space-sm); } .faq-hero__subtitle { font-size: 16px; font-weight: 400; color: var(--color-text-secondary); } /* FAQ list container wraps all FAQ items */ .faq-list { background: var(--color-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-lg) var(--space-xl) var(--space-sm); margin-bottom: var(--space-xl); } /* ---------------------------------------------------------- 12. Category & Subcategory index pages — card grid for listing subcategories within a category or pages within a subcategory. ---------------------------------------------------------- */ /* Hero — left-aligned title + subtitle, mirrors article-hero */ .category-hero { padding: var(--space-xl) var(--space-xl) var(--space-md); } .category-hero__title { font-size: 36px; font-weight: 500; color: var(--color-text); line-height: 1.1; letter-spacing: -0.36px; margin-bottom: var(--space-sm); } .category-hero__subtitle { font-size: 16px; font-weight: 400; color: var(--color-text-secondary); line-height: 1.6; } /* Card grid — auto-fill columns, slightly narrower than index cards */ .category-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-md); padding: 0 var(--space-xl); margin-bottom: var(--space-xl); } /* Individual card — white elevated card, horizontal layout with title/meta on the left and arrow on the right. */ .category-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); background: var(--color-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-lg) var(--space-xl); text-decoration: none; color: var(--color-text); transition: box-shadow 0.15s, transform 0.15s; } .category-card:hover { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04); transform: translateY(-2px); } /* Card body — title and meta text */ .category-card__body { flex: 1; min-width: 0; } .category-card__title { font-size: 16px; font-weight: 600; color: var(--color-text); line-height: 1.4; margin: 0; } /* Article count or other meta info */ .category-card__meta { display: block; font-size: var(--font-size-sm); font-weight: 400; color: var(--color-text-secondary); margin-top: var(--space-xs); } /* Arrow icon — circular ghost button matching FAQ arrow style */ .category-card__arrow { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-pill); flex-shrink: 0; color: var(--color-text-secondary); transition: background 0.1s; } .category-card:hover .category-card__arrow { background: var(--color-gray-100); } /* ---------------------------------------------------------- 13. Responsive — tablet and mobile breakpoints. Figma is desktop-only (1440px); these preserve usability on smaller viewports. ---------------------------------------------------------- */ /* Tablet: narrower sidebar, 2-column cards. Breakpoint accounts for sidebar: 320px sidebar + 48px padding + 3×260px cards + 2×16px gaps = ~1180px minimum. Use 1280px for breathing room. */ @media (max-width: 1280px) { :root { --sidebar-width: 260px; } /* Scale down the large card titles at this width */ .index-card__title { font-size: 28px; } } /* Mobile: sidebar overlay, single-column layout */ @media (max-width: 768px) { /* Tighten header for narrow screens — logo shrinks, padding minimal */ .header { padding: 0 var(--space-sm); gap: var(--space-sm); } .header__logo { width: auto; padding: 0; flex: 0 1 auto; min-width: 0; } .header__logo-img { height: 32px; width: auto; } /* Right-side actions move into the sidebar overlay on mobile */ .header__actions { display: none; } /* Show hamburger toggle — bumped padding for a 44×44 touch target */ .header__menu-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; } /* With .header__actions hidden, the search toggle needs to flex right */ .header__search-toggle { margin-left: auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; } /* Search bar hidden by default on mobile, toggled via JS */ .header__search { display: none; position: fixed; top: 0; left: 0; right: 0; max-width: 100%; padding: var(--space-md); background: var(--color-bg); z-index: 200; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } /* When mobile search is open */ .header__search--mobile-open { display: flex; flex-direction: column; } .header__search--mobile-open .search-results { position: static; max-height: calc(100vh - 80px); border: none; border-top: 1px solid var(--color-border-light); border-radius: 0; box-shadow: none; margin-top: var(--space-sm); } /* Single-column layout */ .page-grid { grid-template-columns: 1fr; } /* Sidebar becomes a fixed overlay, hidden by default. 100dvh handles iOS Safari's collapsing address bar correctly. Kept in DOM at all times (translateX off-screen) so transforms can animate; visibility hidden keeps it out of the accessibility tree. */ .sidebar { display: flex; flex-direction: column; position: fixed; top: var(--header-height); left: 0; width: 300px; height: calc(100vh - var(--header-height)); height: calc(100dvh - var(--header-height)); z-index: 90; box-shadow: 4px 0 12px rgba(0, 0, 0, 0.1); background: var(--color-bg); transform: translateX(-100%); visibility: hidden; transition: transform 200ms ease-out, visibility 0s linear 200ms; } /* When toggled open by JS — slide in and become visible immediately */ .sidebar--open { transform: translateX(0); visibility: visible; transition: transform 200ms ease-out, visibility 0s linear 0s; } /* Backdrop scrim — fades in behind the sidebar/search overlay. Sits below sidebar (z 90) and header (z 100) but above content. */ .overlay-backdrop { display: block; position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transition: opacity 200ms ease-out; } .overlay-backdrop--open { opacity: 1; pointer-events: auto; } /* Body scroll-lock while an overlay is open. Prevents the page behind from scrolling when the user swipes inside the menu. */ body.has-overlay { overflow: hidden; } /* Sidebar nav scrolls; action footer stays pinned */ .sidebar__nav { flex: 1 1 auto; overflow-y: auto; } /* Mobile actions footer — sign-in, support, language switch. Sits at the bottom of the sidebar overlay. */ .sidebar__actions { display: flex; flex-direction: column; gap: var(--space-sm); flex-shrink: 0; padding: var(--space-md); border-top: 1px solid var(--color-border-light); background: var(--color-bg); } .sidebar__action { display: flex; align-items: center; gap: var(--space-sm); min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-pill); text-decoration: none; font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text); transition: background 0.1s; } .sidebar__action--lang, .sidebar__action--sign-in { background: var(--color-gray-50); } .sidebar__action--lang:hover, .sidebar__action--sign-in:hover { background: var(--color-gray-100); } /* Support — primary CTA, matches header__support-btn treatment */ .sidebar__action--support { background: var(--color-navy); color: var(--color-bg); justify-content: space-between; } .sidebar__action--support:hover { background: var(--color-text); } /* Full-width content with tighter padding for narrow screens */ .content-area { padding: 0 var(--space-md) var(--space-lg); margin: unset; } /* Article card — tighten padding so content gets more room */ .article-card { padding: var(--space-md); } /* Article hero — same tighten */ .article-hero { padding: var(--space-lg) var(--space-md) var(--space-md); } /* Tables — horizontal scroll on mobile so wide tables don't bust the card. Block display turns the table into its own scroll container. */ .article-card table, .article table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; /* Stop the cell text from collapsing to one-word-per-line */ white-space: nowrap; } /* Long URLs and unbreakable strings in body text don't push the layout */ .article-card, .article { overflow-wrap: anywhere; word-break: break-word; } /* Callouts — slightly tighter padding on mobile */ .article-card blockquote, .article blockquote { padding: var(--space-sm) var(--space-md); } /* Article hero scales down */ .article-hero__title, .index-hero__title, .category-hero__title { font-size: 28px; } /* On mobile, drop the 70% image cap — screenshots are already cramped */ .article-card img, .article img { max-width: 100%; } .article-card img.small, .article img.small { max-width: 70%; } /* Category cards go single column on mobile */ .category-cards { grid-template-columns: 1fr; padding: 0 var(--space-md); } /* Breadcrumb stacks vertically */ .breadcrumb { flex-direction: column; align-items: flex-start; gap: var(--space-sm); } /* Card titles scale down for narrow screens */ .index-card__title { font-size: 24px; } /* Card illustration shrinks on mobile */ .index-card__image { max-width: 200px; } } /* Small phones (≤ 480px) — tightest layout. Sidebar overlay covers the full viewport width, content padding minimised, headings and cards scaled down one more notch. */ @media (max-width: 480px) { /* Full-screen sidebar — when the user opens the menu, it takes over the entire viewport. Reads as "I'm in the menu now". */ .sidebar { width: 100%; } /* Content padding tightens once more */ .content-area { padding: 0 var(--space-sm) var(--space-md); } .article-card { padding: var(--space-sm) var(--space-md); } .article-hero { padding: var(--space-md) var(--space-sm) var(--space-sm); } /* Hero titles drop a notch */ .article-hero__title, .index-hero__title, .category-hero__title { font-size: 24px; } /* In-content headings — keep the hierarchy readable but compact */ .article-card h2, .article h2 { font-size: 18px; } /* Breadcrumb — smaller and tighter */ .breadcrumb { font-size: var(--font-size-xs); padding: var(--space-md) 0 var(--space-sm); } /* Index cards — title and illustration shrink */ .index-card__title { font-size: 20px; } .index-card__image { max-width: 160px; } /* Tighter cards and FAQ panel */ .index-card { padding: var(--space-lg) 0; } .index-faq { padding: var(--space-md) var(--space-md) 0; } .index-faq__title { font-size: 18px; } /* Footer breathes less */ .footer { padding: var(--space-lg) var(--space-md); } } /* ========================================================== Export page — full handbook on a single page. No sidebar, single-column, optimised for reading & print. ========================================================== */ /* Hide the search bar — Pagefind JS is not loaded on export pages */ .export-page .header__search, .export-page .header__search-toggle { display: none; } /* Full-width content area without the sidebar grid */ .export-content { max-width: 1200px; margin: 0 auto; padding: var(--space-lg) var(--space-xl); } /* Export page hero */ .export-hero { text-align: center; padding: var(--space-xl) 0 var(--space-lg); border-bottom: 2px solid var(--color-border-light); margin-bottom: var(--space-xl); } .export-hero__title { font-size: 36px; font-weight: 500; color: var(--color-text); line-height: 1.1; letter-spacing: -0.36px; } /* Table of contents card */ .export-toc { background: var(--color-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-xl); margin-bottom: var(--space-xxl); } .export-toc__title { font-size: 20px; font-weight: 600; margin-bottom: var(--space-md); } .export-toc ol { padding-left: var(--space-lg); margin-bottom: var(--space-xs); } .export-toc li { margin-bottom: var(--space-xs); line-height: 1.5; } .export-toc a { color: var(--color-link); text-decoration: none; } .export-toc a:hover { text-decoration: underline; } /* Category heading — top-level section divider */ .export-category { font-size: 28px; font-weight: 600; color: var(--color-text); padding: var(--space-xl) 0 var(--space-md); margin-top: var(--space-xxl); border-top: 3px solid var(--color-navy); } .export-category:first-of-type { margin-top: 0; } /* Subcategory heading */ .export-subcategory { font-size: 22px; font-weight: 600; color: var(--color-text); padding: var(--space-md) 0 var(--space-sm); margin-top: var(--space-xl); border-bottom: 1px solid var(--color-border-light); } /* Individual article within the export */ .export-article { margin-bottom: var(--space-xl); } /* Per-article meta header — sits above the title, holds the live URL and a copy-to-clipboard button so support staff can grab the link. */ .export-article__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); margin-top: var(--space-lg); background: var(--color-gray-50); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); font-size: var(--font-size-sm); } .export-article__url-label { color: var(--color-text-secondary); font-weight: 500; } .export-article__url { color: var(--color-link); text-decoration: none; font-family: ui-monospace, "SF Mono", Menlo, monospace; word-break: break-all; flex: 1 1 auto; min-width: 0; } .export-article__url:hover { text-decoration: underline; } .export-article__copy-btn { flex: 0 0 auto; padding: var(--space-xs) var(--space-md); font-family: var(--font-family); font-size: var(--font-size-sm); font-weight: 500; color: var(--color-navy); background: var(--color-bg); border: 1px solid var(--color-navy); border-radius: var(--radius-sm); cursor: pointer; transition: background-color 120ms ease, color 120ms ease; } .export-article__copy-btn:hover { background: var(--color-navy); color: var(--color-bg); } /* Temporary "Copied!" state — toggled by the inline script for ~1.5s. */ .export-article__copy-btn.is-success { background: var(--color-navy); color: var(--color-bg); border-color: var(--color-navy); } .export-article__title { font-size: 18px; font-weight: 600; color: var(--color-navy); margin: var(--space-md) 0 var(--space-sm); } /* Reuse article-card look but lighter (no elevation) */ .export-article__content { box-shadow: none; border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); } /* ---------------------------------------------------------- Print styles for export page ---------------------------------------------------------- */ @media print { /* Hide chrome that isn't useful on paper */ .header, .footer, .export-toc { display: none !important; } /* Remove margins/padding so content fills the page */ .export-content { max-width: 100%; padding: 0; } /* Page break before each category */ .export-category { page-break-before: always; border-top: none; margin-top: 0; } .export-category:first-of-type { page-break-before: avoid; } /* Try to keep articles together */ .export-article { page-break-inside: avoid; } /* Hide the per-article URL/copy header on print — clutter for paper. */ .export-article__meta { display: none !important; } .export-article__content { border: none; padding: 0; } /* Constrain images for print */ .export-article__content img { max-width: 80%; } body { font-size: 12px; } }