/* ============================================================== 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: 14px; --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. */ } /* 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 */ .header__search { display: none; 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); } /* 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); height: calc(100vh - var(--header-height)); padding: var(--space-md) 0; } .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 */ .article-hero { padding: var(--space-xl) var(--space-xl) var(--space-md); } .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); } /* 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 */ .article-card img, .article img { max-width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--color-border-light); margin: var(--space-md) 0; } /* Bold text */ .article-card strong, .article strong { font-weight: 600; } /* Inline code and code blocks */ .article-card code, .article code { background: var(--color-gray-100); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; } .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); } .article-card pre code, .article pre code { background: none; padding: 0; } /* Horizontal rules */ .article-card hr, .article hr { border: none; border-top: 1px solid var(--color-border-light); margin: var(--space-xl) 0; } /* 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. 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) { /* Show hamburger toggle */ .header__menu-toggle { display: block; } /* Hide search bar on mobile */ .header__search { display: none; } /* Single-column layout */ .page-grid { grid-template-columns: 1fr; } /* Sidebar becomes a fixed overlay, hidden by default */ .sidebar { display: none; position: fixed; top: var(--header-height); left: 0; width: 300px; height: calc(100vh - var(--header-height)); z-index: 90; box-shadow: 4px 0 12px rgba(0, 0, 0, 0.1); background: var(--color-bg); } /* When toggled open by JS */ .sidebar--open { display: block; } /* Full-width content */ .content-area { padding: 0 var(--space-md) var(--space-lg); margin: unset; } /* Article hero scales down */ .article-hero__title, .index-hero__title { font-size: 28px; } /* Breadcrumb stacks vertically */ .breadcrumb { flex-direction: column; align-items: flex-start; gap: var(--space-sm); } /* Cards go single column on mobile */ /* Card titles scale down for narrow screens */ .index-card__title { font-size: 24px; } /* Card illustration shrinks on mobile */ .index-card__image { max-width: 200px; } }