/** * Shared styles for the static component-preview pages * (public/components/*.html). Self-contained copy of the core tokens * from src/index.css so these pages don't depend on the Vite-built app. * * Dark is the default look; [data-theme="light"] on (toggled by * theme-toggle.js) switches these to the light palette below. */ :root { color-scheme: dark; --text: #9ca3af; --text-h: #f3f4f6; --bg: #08060b; --border: rgba(100, 100, 100, 0.5); --code-bg: #1f2028; --color-white: #fff; --color-gray: #313131; --color-mantle-blue: #000561; --color-mantle-purple: #000099; --accent: #c084fc; --accent-bg: rgba(192, 132, 252, 0.15); --accent-border: rgba(192, 132, 252, 0.5); --social-bg: rgba(0, 3, 51, 1); --shadow: rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px; --sans: 'IBM Plex Mono', Roboto, sans-serif; --heading: 'IBM Plex Mono', Roboto, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace; } [data-theme='light'] { color-scheme: light; --text: #6b6375; --text-h: #08060d; --bg: #f6f5ef; --border: #e5e4e7; --code-bg: #f4f3ec; --color-gray: #e5e4e7; --accent: #3bff65; --accent-bg: rgba(119, 96, 136, 0.1); --accent-border: rgba(212, 212, 241, 0.5); --social-bg: rgba(255, 255, 255, 0.5); --shadow: rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font: 16px/145% var(--mono); letter-spacing: 0.18px; color: var(--text); background: var(--bg); font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; } .wrapper { width: 1126px; max-width: 100%; margin: 0 auto; padding: 32px 20px 64px; box-sizing: border-box; } .topbar { display: flex; align-items: center; gap: 16px; padding-bottom: 24px; margin-bottom: 32px; border-bottom: 1px solid var(--border); } .topbar .breadcrumb { margin-left: auto; } .topbar__home { text-decoration: none; font-weight: 700; color: var(--text); display: inline-flex; align-items: center; gap: 8px; transition: color 0.3s; } .topbar__home:hover { color: var(--text-h); text-decoration: none; } .breadcrumb { font-size: 14px; color: var(--text); } h1, h2 { font-family: var(--heading); color: var(--text-h); } h1 { font-size: 40px; font-weight: 800; letter-spacing: -1.2px; margin: 0 0 12px; } h2 { font-size: 20px; font-weight: 500; margin: 0 0 8px; } p { font-weight: 400; margin: 0 0 20px; max-width: 70ch; } .panel { margin-top: 20px; h2 { margin-bottom: 12px; border-top: 1px solid var(--border); padding-top: 20px; } } .settings { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 14px; } .settings label { color: var(--text); } .settings input { font: inherit; font-size: 14px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--code-bg); color: var(--text-h); min-width: 260px; } .settings button { font: inherit; font-size: 14px; padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text-h); cursor: pointer; } .settings button:hover { box-shadow: var(--shadow); } .settings__hint { color: var(--text); opacity: 0.8; } .preview-frame { width: 100%; height: 80vh; min-height: 560px; border: 1px solid var(--border); border-radius: 16px; background: var(--code-bg); margin-top: 12px; } .preview-actions { margin-top: 12px; font-size: 14px; } .preview-actions a { text-decoration: none; color: var(--text); transition: color 0.3s; } .preview-actions a:hover { border-bottom-color: currentColor; color: var(--text-h); } .component-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; } .component-nav a { display: inline-flex; border: 1px solid var(--color-gray); padding: 6px 14px; border-radius: 32px; background: transparent; text-decoration: none; font-size: 14px; color: var(--text-h); transition: box-shadow 0.2s, background 0.2s; } .component-nav a:hover { background: var(--color-gray); box-shadow: var(--shadow); } .component-nav a[aria-current='page'] { background: var(--color-gray); } /** * Landing page (index.html) * Dark is the default look, matching the component detail pages; * [data-theme="light"] on (toggled by theme-toggle.js) switches * these to the light palette declared further down. */ .landing { --landing-green: rgb(136, 182, 0); --landing-purple: rgba(204, 167, 255, 1); --landing-heading: rgba(245, 244, 252, 0.85); --landing-heading-soft: rgba(238, 237, 245, 1); --landing-border: rgba(255, 255, 255, 0.07); --landing-panel-bg: rgba(255, 255, 255, 0.03); --landing-text: rgba(183, 181, 196, 1); --landing-surface: #08060b; --landing-nav-height: 88px; position: relative; z-index: 0; font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; background: radial-gradient( 120% 90% at 50% -10%, rgba(89, 255, 140, 0.08) 0%, rgba(139, 92, 255, 0.05) 35%, var(--landing-surface) 70% ); color: var(--landing-text); min-height: 100vh; transition: background-color 0.2s ease-in-out; } .landing::after { content: ""; position: absolute; inset: 0; /* top:0; right:0; bottom:0; left:0; */ background-image: url('../assets/mantle-bg.jpg'); background-size: cover; background-position: center; filter: grayscale(100%) blur(4px); opacity: 0.25; z-index: -1; /* sit behind the content */ pointer-events: none; /* purely decorative — must never swallow clicks */ height: 100vh; width: 100vw; -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%); mask-image: linear-gradient(to bottom, black 0%, transparent 100%); } .landing-nav { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid transparent; width: 100%; margin: 0; padding: 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: transparent; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); transition: background-color 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out, border-color 0.3s ease-in-out; } .landing-nav.is-scrolled { background: rgba(8, 6, 11, 0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: rgba(255, 255, 255, 0.1); } .landing-nav__logo { width: 120px; } .landing-nav__brand { opacity: 0; transition: opacity 0.3s ease-in-out; } .landing-nav.is-scrolled .landing-nav__brand { opacity: 1; } @media (prefers-reduced-motion: reduce) { .landing-nav { transition: none; } .landing-nav__brand { transition: none; } } .landing-nav__links { display: flex; align-items: center; gap: 28px; } .landing-nav__link { color: var(--landing-text); text-decoration: none; font-size: 14px; } .landing-nav__link--github { color: var(--landing-heading); text-decoration: none; font-size: 14px; border: 1px solid rgba(255, 255, 255, 0.14); padding: 7px 14px; border-radius: 32px; } .landing-nav__toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: auto; border-radius: 10px; border: 1px solid var(--landing-border); background: transparent; color: var(--landing-heading); cursor: pointer; flex-shrink: 0; transition: background 0.2s ease-in-out; } .landing-nav__toggle:hover { background: rgba(127, 127, 127, 0.12); } .landing-nav__toggle-icon { width: 20px; height: 20px; display: none; } .landing-nav__toggle-icon--menu { display: block; } .landing-nav.is-open .landing-nav__toggle-icon--menu { display: none; } .landing-nav.is-open .landing-nav__toggle-icon--close { display: block; } .landing-hero { max-width: 860px; margin: 0 auto; padding: 88px 32px 64px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 24px; } .landing-hero__badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 32px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 13px; color: oklch(84% 0.2 150); } .landing-hero__badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--landing-green); } .landing-hero__title { font-family: 'IBM Plex Sans', sans-serif; font-size: 32px; line-height: 104%; font-weight: 500; letter-spacing: -1.8px; color: var(--landing-heading); max-width: 600px; margin: 0; } .landing-hero__subtitle { font-size: 16px; line-height: 155%; color: oklch(72% 0.02 290); max-width: 640px; margin: 20px 0; } .landing-hero__actions { display: flex; gap: 12px; margin-top: 8px; } .landing-btn { text-decoration: none; padding: 13px 26px; border-radius: 32px; font-size: 15px; } .landing-btn--primary { background: #007AFF; background: linear-gradient(119deg,rgba(0, 122, 255, 1) 0%, rgba(0, 75, 156, 1) 100%); color: #08060b; font-weight: 600; transition: color 0.3s ease-in-out; } .landing-btn--primary:hover { color: #fff; } .landing-btn--secondary { color: var(--landing-heading); border: 1px solid rgba(255, 255, 255, 0.16); } .landing-hero__install { margin-top: 24px; display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 12px 18px; font-size: 14px; color: oklch(72% 0.02 290); } .landing-hero__install-prompt { color: rgba(0, 122, 255, 1); } .landing-story { max-width: 1180px; margin: 64px auto 0; padding: 0 32px; } .landing-story__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .landing-story__card { background: var(--landing-panel-bg); border: 1px solid var(--landing-border); border-radius: 20px; padding: 28px; text-align: left; } .landing-story__icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; margin-bottom: 20px; border: 1px solid var(--landing-border); } .landing-story__icon svg { width: 26px; height: 26px; } .landing-story__icon--green { background: rgba(136, 182, 0, 0.14); color: var(--landing-green); } .landing-story__icon--purple { background: rgba(204, 167, 255, 0.14); color: var(--landing-purple); } .landing-story__icon--blue { background: oklch(84% 0.24 220 / 0.16); color: oklch(84% 0.24 220); } .landing-story__title { font-family: 'IBM Plex Sans', sans-serif; font-size: 17px; font-weight: 600; color: var(--landing-heading); margin: 0 0 8px; } .landing-story__text { font-size: 14px; line-height: 150%; color: oklch(68% 0.02 290); margin: 0; } .landing-components { max-width: 1180px; margin: 88px auto 0; padding: 0 32px; text-align: left; scroll-margin-top: var(--landing-nav-height); } .landing-components__header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; } .landing-components__title { font-family: 'IBM Plex Sans', sans-serif; font-size: 28px; font-weight: 600; color: var(--landing-heading); margin: 0; letter-spacing: -0.4px; } .landing-components__count { font-size: 13px; color: oklch(60% 0.02 290); } .landing-components__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .landing-card { display: block; padding: 20px; border-radius: 16px; background: var(--landing-panel-bg); border: 1px solid var(--landing-border); text-decoration: none; color: inherit; } a.landing-card { transition: box-shadow 0.3s; } a.landing-card:hover { box-shadow: 0 0 12px var(--color-gray); } .landing-card__icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; margin-bottom: 14px; border: 1px solid var(--landing-border); background: transparent; } .landing-card__icon svg { width: 20px; height: 20px; stroke: var(--landing-heading); opacity: 0.9; } .landing-card__title { font-family: 'IBM Plex Sans', sans-serif; margin: 0 0 6px; color: var(--landing-heading-soft); font-size: 15px; font-weight: 600; } .landing-card__text { margin: 0; font-size: 13px; line-height: 145%; color: oklch(62% 0.02 290); } /** * Component index — tinted category panels (index.html #components) * The whole section is one bordered panel (`.landing-panel--components`). * Each category is a tinted sub-panel whose color scale is derived from a * single `--group-accent` via color-mix() against the existing theme * tokens, so it adapts to light/dark automatically without a second * hand-authored palette. Tiles show the same generic line-icon used for * that component in the interior page sidebar nav, above the component * name, so height stays uniform at any card count and the grid reads * quietly without a hand-drawn mockup per component. */ .components-panel__header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; } .components-panel__meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .components-search { display: flex; align-items: center; gap: 10px; width: 230px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--landing-border); background: var(--landing-panel-bg); transition: border-color 0.2s; } .components-search:focus-within { border-color: var(--landing-purple); } .components-search__icon { width: 11px; height: 11px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--landing-text); } .components-search__input { flex: 1; min-width: 0; font: inherit; font-size: 13px; color: var(--landing-heading-soft); background: transparent; border: none; outline: none; } .components-search__input::placeholder { color: var(--landing-text); opacity: 0.8; } .components-search__kbd { flex-shrink: 0; font-size: 11px; color: var(--landing-text); border: 1px solid var(--landing-border); border-radius: 4px; padding: 1px 5px; } .components-panel__count { font-size: 13px; color: var(--landing-text); white-space: nowrap; } .components-panel__empty { margin: 0; font-size: 14px; color: var(--landing-text); } .components-group { --group-bg-1: color-mix(in srgb, var(--group-accent) 10%, var(--landing-surface)); --group-bg-2: color-mix(in srgb, var(--group-accent) 4%, var(--landing-surface)); --group-border: color-mix(in srgb, var(--group-accent) 22%, var(--landing-border)); --group-card-bg: color-mix(in srgb, var(--group-accent) 4%, var(--landing-panel-bg)); --group-card-border: color-mix(in srgb, var(--group-accent) 16%, var(--landing-border)); --group-card-border-hover: color-mix(in srgb, var(--group-accent) 55%, var(--landing-border)); --group-divider: color-mix(in srgb, var(--group-accent) 10%, var(--landing-border)); --group-label: color-mix(in srgb, var(--group-accent) 65%, var(--landing-heading-soft)); display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; border-radius: 12px; background: linear-gradient(180deg, var(--group-bg-1), var(--group-bg-2)); border: 1px solid var(--group-border); } .components-group.is-hidden { display: none; } .components-group--forms { --group-accent: #5fc9c0; --group-accent-ink: #08110f; } .components-group--layout { --group-accent: #d9a441; --group-accent-ink: #171208; } .components-group--navigation { --group-accent: #6ba3e0; --group-accent-ink: #0a1620; } .components-group--overlay { --group-accent: #a68cf0; --group-accent-ink: #15101f; } .components-group--feedback { --group-accent: #e0798f; --group-accent-ink: #1a0d11; } .components-group__header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .components-group__dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--group-accent); } .components-group__label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--group-label); } .components-group__count { font-size: 12px; color: var(--landing-text); } .components-group__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; } .components-tile { display: flex; flex-direction: column; background: var(--group-card-bg); border: 1px solid var(--group-card-border); border-radius: 9px; overflow: hidden; text-decoration: none; color: inherit; transition: border-color 0.2s; } .components-tile:hover { border-color: var(--group-card-border-hover); } .components-tile.is-hidden { display: none; } .components-tile__preview { height: 68px; display: flex; align-items: center; justify-content: center; color: var(--landing-heading-soft); transition: color 0.2s; } .components-tile__preview svg { width: 26px; height: 26px; } .components-tile:hover .components-tile__preview { color: var(--group-label); } .components-tile__title { padding: 9px 12px; border-top: 1px solid var(--group-divider); font-size: 12.5px; color: var(--landing-heading-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 680px) { .components-panel__header { flex-direction: column; align-items: flex-start; } .components-search { width: 100%; } } .landing-patterns, .landing-accessibility { max-width: 1180px; padding: 0 32px; scroll-margin-top: var(--landing-nav-height); } .landing-patterns { margin: 64px auto 0; } .landing-accessibility { margin: 20px auto 0; } .landing-panel { display: flex; background: var(--landing-panel-bg); border: 1px solid var(--landing-border); border-radius: 28px; padding: 40px; text-align: left; flex-wrap: wrap; } .landing-panel--patterns { gap: 16px; } .landing-panel--accessibility { gap: 32px; } .landing-panel--components { flex-direction: column; flex-wrap: nowrap; gap: 28px; } .landing-panel--foundations { flex-direction: column; flex-wrap: nowrap; gap: 24px; } .landing-heading { font-family: 'IBM Plex Sans', sans-serif; font-size: 24px; font-weight: 600; color: var(--landing-heading); margin: 0 0 12px; letter-spacing: -0.3px; } .landing-badge { display: inline-block; font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--landing-purple); background: color-mix(in srgb, var(--landing-purple) 14%, transparent); border: 1px solid color-mix(in srgb, var(--landing-purple) 30%, transparent); border-radius: 999px; padding: 3px 10px; margin-left: 10px; vertical-align: middle; } .landing-panel__intro { flex: 1 1 300px; } .landing-panel__intro--narrow { flex: 1 1 260px; } .landing-panel__text { font-size: 15px; line-height: 160%; color: oklch(70% 0.02 290); margin: 0; } .landing-panel__text--constrained { max-width: 420px; } .landing-panel__list { flex: 1 1 300px; display: flex; flex-direction: column; gap: 12px; } .landing-panel__list-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: oklch(82% 0.02 290); } .landing-panel__check { color: var(--landing-green); font-weight: 700; } .landing-panel__check--planned { color: var(--landing-text); opacity: 0.6; font-weight: 400; } .landing-panel__stats { flex: 2 1 400px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .landing-stat__value { font-size: 26px; font-weight: 700; color: var(--color-bg); font-family: 'IBM Plex Sans', sans-serif; } .landing-stat__label { font-size: 13px; color: oklch(64% 0.02 290); margin-top: 4px; } .landing-footer { max-width: 1180px; margin: 64px auto 0; padding: 32px; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .landing-footer__copy { font-size: 13px; color: oklch(55% 0.02 290); } .landing-footer__links { display: flex; gap: 20px; } .landing-footer__link { color: oklch(68% 0.02 290); text-decoration: none; font-size: 13px; } .landing-footer__spacer { height: 88px; } .landing-footer--interior { max-width: none; margin: 48px 0 0; padding: 24px 0 0; } .mantle-logo { height: auto; margin: 30px 0; width: 90%; } .landing-nav__logo svg path, .mantle-logo svg path { fill: var(--landing-heading-soft); transition: fill 0.2s ease-in-out; } /** * Landing page — light theme * Mirrors the component detail pages' light palette so the home page and * the interior pages read as one theme when toggled. */ [data-theme='light'] .landing { --landing-heading: rgba(12, 10, 18, 0.9); --landing-heading-soft: #0c0a12; --landing-border: rgba(20, 16, 30, 0.1); --landing-panel-bg: rgba(20, 16, 30, 0.035); --landing-text: rgba(70, 64, 80, 0.85); --landing-surface: #f6f5ef; } [data-theme='light'] .landing::after { opacity: 0.06; } [data-theme='light'] .landing-nav.is-scrolled { background: rgba(246, 245, 239, 0.82); border-bottom-color: rgba(20, 16, 30, 0.1); } [data-theme='light'] .landing-nav__link--github { border-color: rgba(20, 16, 30, 0.14); } [data-theme='light'] .landing-btn--secondary { border-color: rgba(20, 16, 30, 0.16); } [data-theme='light'] .landing-hero__subtitle { color: rgba(70, 64, 80, 0.8); } [data-theme='light'] .landing-hero__install { background: rgba(20, 16, 30, 0.04); border-color: rgba(20, 16, 30, 0.08); color: rgba(70, 64, 80, 0.8); } [data-theme='light'] .landing-story__text { color: rgba(70, 64, 80, 0.75); } [data-theme='light'] .landing-components__count { color: rgba(70, 64, 80, 0.6); } [data-theme='light'] .landing-card__text { color: rgba(70, 64, 80, 0.65); } [data-theme='light'] .landing-panel__text { color: rgba(70, 64, 80, 0.78); } [data-theme='light'] .landing-panel__list-item { color: rgba(70, 64, 80, 0.85); } [data-theme='light'] .landing-stat__label { color: rgba(70, 64, 80, 0.68); } [data-theme='light'] .landing-footer { border-top-color: rgba(20, 16, 30, 0.08); } [data-theme='light'] .landing-footer__copy { color: rgba(70, 64, 80, 0.55); } [data-theme='light'] .landing-footer__link { color: rgba(70, 64, 80, 0.75); } /** * Component detail pages (public/components/{name}.html) * Dark shell with a persistent sidebar nav, matching the landing page's * oklch/IBM Plex Sans look. The Storybook preview `.panel` block above * is untouched by this theme. */ .detail { --detail-heading: rgba(245, 244, 252, 0.85); --detail-heading-soft: rgba(238, 237, 245, 1); --detail-text: rgba(183, 181, 196, 1); --detail-border: rgba(255, 255, 255, 0.07); --detail-panel-bg: rgba(255, 255, 255, 0.03); --detail-hover-bg: rgba(255, 255, 255, 0.05); --detail-accent: #c084fc; --detail-accent-bg: rgba(192, 132, 252, 0.12); --detail-surface: #08060b; min-height: 100vh; background: radial-gradient( 120% 90% at 50% -10%, rgba(89, 255, 140, 0.06) 0%, rgba(139, 92, 255, 0.04) 35%, var(--detail-surface) 70% ); color: var(--detail-text); } [data-theme='light'] .detail { --detail-heading: rgba(12, 10, 18, 0.9); --detail-heading-soft: #0c0a12; --detail-text: rgba(70, 64, 80, 0.85); --detail-border: rgba(20, 16, 30, 0.1); --detail-panel-bg: rgba(20, 16, 30, 0.035); --detail-hover-bg: rgba(20, 16, 30, 0.05); --detail-accent: #8b5cf6; --detail-accent-bg: rgba(139, 92, 246, 0.12); --detail-surface: #f6f5ef; } .detail-topbar { display: flex; align-items: center; gap: 20px; padding: 24px 32px; border-bottom: 1px solid var(--detail-border); } .detail-topbar__logo { display: inline-flex; width: 110px; flex-shrink: 0; } .detail-topbar__logo svg { display: block; width: 100%; height: auto; } .detail-topbar__logo svg path { fill: var(--detail-heading-soft); } .detail-topbar .breadcrumb { font-size: 14px; color: var(--detail-text); opacity: 0.75; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: auto; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; flex-shrink: 0; transition: background 0.2s, color 0.2s; } .theme-toggle:hover { background: rgba(127, 127, 127, 0.12); color: var(--text-h); } .theme-toggle__icon { width: 18px; height: 18px; display: none; } .theme-toggle__icon--sun { display: block; } [data-theme='light'] .theme-toggle__icon--sun { display: none; } [data-theme='light'] .theme-toggle__icon--moon { display: block; } .detail-sidebar__toggle { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: auto; border-radius: 10px; border: 1px solid var(--detail-border); background: transparent; color: var(--detail-heading); cursor: pointer; flex-shrink: 0; transition: background 0.2s ease-in-out; } .detail-sidebar__toggle:hover { background: var(--detail-hover-bg); } .detail-sidebar__toggle-icon { width: 18px; height: 18px; display: none; } .detail-sidebar__toggle-icon--menu { display: block; } .detail.is-nav-open .detail-sidebar__toggle-icon--menu { display: none; } .detail.is-nav-open .detail-sidebar__toggle-icon--close { display: block; } .detail-shell { display: flex; align-items: flex-start; max-width: 1320px; margin: 0 auto; } .detail-sidebar { flex: 0 0 236px; width: 236px; padding: 20px 12px; position: sticky; top: 0; align-self: flex-start; max-height: 100vh; overflow-y: auto; } .detail-sidebar__category { margin-bottom: 4px; } .detail-sidebar__category-label { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; cursor: pointer; list-style: none; user-select: none; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--detail-heading-soft); opacity: 0.65; transition: background 0.2s, opacity 0.2s; } .detail-sidebar__category-label::-webkit-details-marker { display: none; } .detail-sidebar__category-label:hover { background: var(--detail-hover-bg); opacity: 0.9; } .detail-sidebar__chevron { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.15s ease; } .detail-sidebar__category[open] > .detail-sidebar__category-label .detail-sidebar__chevron { transform: rotate(90deg); } .detail-sidebar__placeholder { margin: 2px 12px 10px; padding: 8px 12px; font-size: 13px; color: var(--detail-text); opacity: 0.5; font-style: italic; } .detail-sidebar ul { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 2px; } .detail-sidebar a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; text-decoration: none; font-size: 14px; color: var(--detail-text); transition: background 0.2s, color 0.2s; } .detail-sidebar a svg { width: 18px; height: 18px; stroke: currentColor; flex-shrink: 0; opacity: 0.85; } .detail-sidebar a:hover { background: var(--color-gray); color: var(--detail-heading-soft); } .detail-sidebar a[aria-current='page'] { border: 1px solid var(--color-gray); color: var(--detail-heading-soft); } .detail-sidebar a[aria-current='page'] svg { opacity: 1; stroke: var(--detail-heading-soft); } .detail-main { flex: 1 1 auto; min-width: 0; padding: 32px 32px 64px; } .detail-title { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; } .detail-title__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--detail-border); background: var(--detail-panel-bg); flex-shrink: 0; } .detail-title__icon svg { width: 24px; height: 24px; stroke: var(--detail-heading); } .detail-main h1 { font-family: 'IBM Plex Sans', sans-serif; color: var(--detail-heading); font-size: 32px; font-weight: 600; letter-spacing: -0.6px; margin: 0; } .detail-main > p { color: oklch(70% 0.02 290); margin: 0 0 8px; } /** * Responsive breakpoints * Reflow the landing page (index.html) and component detail pages * (public/components/{name}.html) from the desktop layout above down * to a single stacked column on narrow viewports. */ @media (max-width: 1024px) { .landing-components__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 860px) { .landing-nav__toggle { display: inline-flex; } .landing-nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px 20px 20px; background: var(--landing-surface); border-bottom: 1px solid var(--landing-border); } .landing-nav.is-open .landing-nav__links { display: flex; } .landing-nav__link, .landing-nav__link--github { padding: 10px 4px; } .landing-nav__link--github { border: none; padding-left: 4px; } .theme-toggle { margin-left: 0; align-self: flex-start; } .detail-sidebar__toggle { display: inline-flex; } .detail-shell { flex-direction: column; } .detail-sidebar { display: none; position: static; width: 100%; max-height: none; overflow-y: visible; border-bottom: 1px solid var(--detail-border); padding-bottom: 12px; } .detail.is-nav-open .detail-sidebar { display: block; } .topbar { flex-wrap: wrap; row-gap: 12px; } .topbar .breadcrumb { margin-left: 0; } .landing-story__grid { grid-template-columns: repeat(2, 1fr); } .landing-components__grid { grid-template-columns: repeat(2, 1fr); } .landing-panel { padding: 28px; } } @media (max-width: 680px) { .landing-nav { padding: 20px; gap: 12px; } .landing-nav__logo { width: 90px; } .landing-hero { padding: 56px 20px 40px; } .landing-hero__title { font-size: 26px; } .landing-hero__actions { flex-direction: column; align-self: stretch; width: 100%; } .landing-btn { text-align: center; } .landing-story { margin-top: 48px; padding: 0 20px; } .landing-story__grid { grid-template-columns: 1fr; } .landing-components { margin-top: 56px; padding: 0 20px; } .landing-components__grid { grid-template-columns: 1fr; } .landing-components__header { flex-direction: column; align-items: flex-start; gap: 6px; } .landing-patterns, .landing-accessibility { padding: 0 20px; } .landing-panel { padding: 24px; } .landing-panel__stats { grid-template-columns: 1fr; gap: 16px; } .landing-footer { padding: 24px 20px; flex-direction: column; align-items: flex-start; } .landing-footer__spacer { height: 56px; } .detail-topbar { padding: 16px 20px; flex-wrap: wrap; row-gap: 10px; } .detail-main { padding: 24px 20px 48px; } .detail-title { gap: 12px; } .detail-main h1 { font-size: 26px; } .preview-frame { height: 60vh; min-height: 320px; } .wrapper { padding: 24px 16px 48px; } } @media (max-width: 420px) { .landing-hero__title { font-size: 22px; } .landing-hero__install { font-size: 12px; padding: 10px 14px; } .landing-nav__link { font-size: 13px; } }