/* ============================================================ CSS Custom Properties — Vintage Vibes Color Scheme ============================================================ */ :root { /* Colors */ --color-bg: #f9f5fb; --color-surface: #ede5f2; --color-surface-2: #e2d6ec; --color-primary: #1a1a3e; --color-primary-light: #2e2e6e; --color-accent: #7b4f8a; --color-accent-hover: #5e3a6b; --color-accent-2: #c9a0dc; --color-accent-3: #b07a55; --color-text: #1e1a24; --color-text-muted: #6b5f75; --color-border: #cbb8d9; --color-code-bg: #f0e9f7; --color-code-surface: #e8ddf2; --color-link: #5b3f7a; --color-link-hover: #3a2350; /* Heading ink is a separate token from --color-primary (which doubles as a brand SURFACE for the header bars, table heads, footer and hero) so the two can flip independently between themes. */ --color-heading: #1a1a3e; --color-on-accent: #1a1a3e; /* Diagram palette — every hand-authored inline SVG paints with the baked hexes below, and the attribute-selector remap further down swaps these variables so diagram interiors follow the theme. */ --svg-canvas: #f9f5fb; --svg-card: #ede5f2; --svg-card-alt: #e2d6ec; --svg-stroke: #cbb8d9; --svg-ink: #1e1a24; --svg-ink-muted: #6b5f75; --svg-accent: #7b4f8a; --svg-accent-2: #c9a0dc; --svg-accent-3: #b07a55; --svg-deep: #1a1a3e; --svg-good: #2d6342; --svg-bad: #a63d6f; /* Prism token ink — tuned for the light code surface (#e8ddf2) */ --tok-comment: #5a4a65; --tok-punct: #5e3a6b; --tok-number: #a63d6f; --tok-string: #2d6342; --tok-operator: #7a4a20; --tok-keyword: #5b3f7a; --tok-function: #1a5a8a; --tok-regex: #9b4f24; color-scheme: light; /* Typography */ --font-sans: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Courier New', monospace; --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --line-height-base: 1.7; /* Layout */ --header-height: 68px; --content-max: 1440px; --content-padding: clamp(1rem, 4vw, 3rem); --section-gap: clamp(2rem, 5vw, 4rem); --radius: 8px; --radius-lg: 14px; --shadow-sm: 0 1px 3px rgba(26, 26, 62, 0.08); --shadow-md: 0 4px 16px rgba(26, 26, 62, 0.12); --shadow-lg: 0 8px 32px rgba(26, 26, 62, 0.16); /* Transitions */ --transition: 200ms ease; } /* ============================================================ Dark theme — "Midnight Plum" The no-flash script stamps data-theme on from the stored choice, else the OS preference; the media query below is the no-JS fallback. Only token VALUES change, so every surface — page, header, cards, code, tables and the interiors of the inline-SVG diagrams — flips together. ============================================================ */ :root[data-theme="dark"] { --color-bg: #14101d; --color-surface: #1e1829; --color-surface-2: #2a2038; --color-primary: #241d3d; --color-primary-light: #372c5c; --color-accent: #c9a0dc; --color-accent-hover: #dbb8f0; --color-accent-2: #d4b3e6; --color-accent-3: #dfa878; --color-text: #e4dced; --color-text-muted: #b0a3bf; --color-border: #43354f; --color-code-bg: #1b1526; --color-code-surface: #221a30; --color-link: #d2aae4; --color-link-hover: #ecd6f8; --color-heading: #e9e2f4; --color-on-accent: #241d3d; --svg-canvas: #191322; --svg-card: #241c31; --svg-card-alt: #2e2440; --svg-stroke: #4d3f5e; --svg-ink: #ece5f4; --svg-ink-muted: #b6a9c4; --svg-accent: #d0a8e2; --svg-accent-2: #c9a0dc; --svg-accent-3: #dfa878; --svg-deep: #cfd6f7; --svg-good: #7fd0a0; --svg-bad: #f094bb; --tok-comment: #a99cb5; --tok-punct: #c3a8d6; --tok-number: #f090b8; --tok-string: #8fd6a8; --tok-operator: #e0a878; --tok-keyword: #d0a8e2; --tok-function: #86c7ef; --tok-regex: #f0a882; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.55); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6); color-scheme: dark; } /* No-JS fallback: honour the OS preference until a choice is stored. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --color-bg: #14101d; --color-surface: #1e1829; --color-surface-2: #2a2038; --color-primary: #241d3d; --color-primary-light: #372c5c; --color-accent: #c9a0dc; --color-accent-hover: #dbb8f0; --color-accent-2: #d4b3e6; --color-accent-3: #dfa878; --color-text: #e4dced; --color-text-muted: #b0a3bf; --color-border: #43354f; --color-code-bg: #1b1526; --color-code-surface: #221a30; --color-link: #d2aae4; --color-link-hover: #ecd6f8; --color-heading: #e9e2f4; --color-on-accent: #241d3d; --svg-canvas: #191322; --svg-card: #241c31; --svg-card-alt: #2e2440; --svg-stroke: #4d3f5e; --svg-ink: #ece5f4; --svg-ink-muted: #b6a9c4; --svg-accent: #d0a8e2; --svg-accent-2: #c9a0dc; --svg-accent-3: #dfa878; --svg-deep: #cfd6f7; --svg-good: #7fd0a0; --svg-bad: #f094bb; --tok-comment: #a99cb5; --tok-punct: #c3a8d6; --tok-number: #f090b8; --tok-string: #8fd6a8; --tok-operator: #e0a878; --tok-keyword: #d0a8e2; --tok-function: #86c7ef; --tok-regex: #f0a882; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.55); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6); color-scheme: dark; } } /* ------------------------------------------------------------ Diagram interiors follow the theme. Diagrams are authored with the LIGHT palette hexes baked into their fill/stroke attributes so the markup is readable on its own; these attribute selectors re-point those exact hexes at the themed tokens, which is why a diagram must never introduce an off-palette colour — an unmatched hex would stay light-on-dark. ------------------------------------------------------------ */ svg [fill="#f9f5fb"] { fill: var(--svg-canvas); } svg [fill="#ede5f2"] { fill: var(--svg-card); } svg [fill="#e2d6ec"] { fill: var(--svg-card-alt); } svg [fill="#cbb8d9"] { fill: var(--svg-stroke); } svg [fill="#1e1a24"] { fill: var(--svg-ink); } svg [fill="#6b5f75"] { fill: var(--svg-ink-muted); } svg [fill="#7b4f8a"] { fill: var(--svg-accent); } svg [fill="#c9a0dc"] { fill: var(--svg-accent-2); } svg [fill="#b07a55"] { fill: var(--svg-accent-3); } svg [fill="#1a1a3e"] { fill: var(--svg-deep); } svg [fill="#2d6342"] { fill: var(--svg-good); } svg [fill="#a63d6f"] { fill: var(--svg-bad); } svg [stroke="#cbb8d9"] { stroke: var(--svg-stroke); } svg [stroke="#7b4f8a"] { stroke: var(--svg-accent); } svg [stroke="#c9a0dc"] { stroke: var(--svg-accent-2); } svg [stroke="#b07a55"] { stroke: var(--svg-accent-3); } svg [stroke="#1a1a3e"] { stroke: var(--svg-deep); } svg [stroke="#6b5f75"] { stroke: var(--svg-ink-muted); } svg [stroke="#2d6342"] { stroke: var(--svg-good); } svg [stroke="#a63d6f"] { stroke: var(--svg-bad); } svg [stroke="#1e1a24"] { stroke: var(--svg-ink); } /* ============================================================ Reset & Base ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 100%; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--color-text); background: var(--color-bg); min-height: 100dvh; display: flex; flex-direction: column; } /* Anchor offset for sticky header */ :target, h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] { scroll-margin-top: calc(var(--header-height) + 1rem); } img, svg { max-width: 100%; height: auto; display: block; } a { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; } a:hover { color: var(--color-link-hover); } /* ============================================================ Typography ============================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); color: var(--color-heading); line-height: 1.25; margin-bottom: 0.6em; } h1 { font-size: clamp(1.8rem, 3vw + 0.5rem, 2.8rem); font-weight: 800; } h2 { font-size: clamp(1.3rem, 2vw + 0.3rem, 2rem); font-weight: 700; margin-top: 2.5rem; } h3 { font-size: clamp(1.1rem, 1.5vw + 0.2rem, 1.5rem); font-weight: 600; margin-top: 2rem; } h4 { font-size: 1.1rem; font-weight: 600; margin-top: 1.5rem; } p { margin-bottom: 1.25rem; } /* Styled unordered lists */ ul { margin-bottom: 1.25rem; padding-left: 0; list-style: none; } ul > li { position: relative; padding-left: 1.6rem; margin-bottom: 0.5rem; } ul > li::before { content: ''; position: absolute; left: 0.1rem; top: 0.6em; width: 7px; height: 7px; background: var(--color-accent-2); border-radius: 50%; flex-shrink: 0; } /* Nested ul — smaller dot */ ul ul > li::before { width: 5px; height: 5px; background: var(--color-border); top: 0.65em; } /* Styled ordered lists */ ol { margin-bottom: 1.25rem; padding-left: 0; list-style: none; counter-reset: ol-counter; } ol > li { position: relative; padding-left: 2rem; margin-bottom: 0.5rem; counter-increment: ol-counter; } ol > li::before { content: counter(ol-counter); position: absolute; left: 0; top: 0.05em; width: 1.45rem; height: 1.45rem; background: var(--color-accent); color: #fff; border-radius: 50%; font-size: 0.72em; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; } strong { color: var(--color-heading); } blockquote { border-left: 4px solid var(--color-accent-2); padding: 0.75rem 1.25rem; margin: 1.5rem 0; background: var(--color-surface); border-radius: 0 var(--radius) var(--radius) 0; color: var(--color-text-muted); font-style: italic; } hr { border: none; border-top: 1px solid var(--color-border); margin: 2.5rem 0; } /* Reset UA flex display so inline inside stays in text flow */ summary { display: block; } /* ============================================================ Inline Code — blends with prose (no box, no background) ============================================================ */ :not(pre) > code { font-family: var(--font-mono); font-size: 0.88em; color: var(--color-text); background: none; border: none; padding: 0; border-radius: 0; white-space: normal; overflow-wrap: break-word; word-break: break-word; } /* ============================================================ Code Blocks ============================================================ */ .code-block-wrapper { position: relative; margin: 1.5rem 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--color-border); } /* Language header bar */ .code-lang-label { display: flex; align-items: center; justify-content: space-between; background: var(--color-primary); padding: 0.35rem 0.85rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-2); user-select: none; min-height: 2rem; } .code-lang-label .lang-name { display: flex; align-items: center; gap: 0.4rem; } .code-lang-label .lang-dot { width: 8px; height: 8px; background: var(--color-accent-2); border-radius: 50%; opacity: 0.7; flex-shrink: 0; } /* Move copy button into the label bar */ .code-lang-label .copy-btn { position: static; margin-left: auto; padding: 0.2rem 0.55rem; font-size: 0.7rem; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.7); border-radius: 4px; cursor: pointer; font-family: var(--font-sans); transition: var(--transition); line-height: 1.3; white-space: nowrap; } .code-lang-label .copy-btn:hover { background: var(--color-accent-2); color: var(--color-on-accent); border-color: var(--color-accent-2); } .code-lang-label .copy-btn.copied { background: #4a7c59; color: #fff; border-color: #4a7c59; } pre[class*="language-"], pre.code-block-wrapper > pre { margin: 0 !important; padding: 1.35rem 1.5rem !important; background: var(--color-code-surface) !important; border-radius: 0 !important; overflow-x: auto; font-family: var(--font-mono); font-size: 0.9rem; line-height: 1.6; tab-size: 2; } /* Prism token ink — themed via --tok-* so both schemes clear WCAG AA on their code surface */ .token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--tok-comment); font-style: italic; } .token.punctuation { color: var(--tok-punct); } .token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol { color: var(--tok-number); } .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin { color: var(--tok-string); } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { color: var(--tok-operator); } .token.atrule, .token.attr-value, .token.keyword { color: var(--tok-keyword); font-weight: 600; } .token.function, .token.class-name { color: var(--tok-function); } .token.regex, .token.important, .token.variable { color: var(--tok-regex); } /* Fallback copy button (when no lang label — shouldn't occur normally) */ .copy-btn { position: absolute; top: 0.6rem; right: 0.6rem; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-muted); font-family: var(--font-sans); font-size: 0.75rem; padding: 0.3rem 0.65rem; border-radius: 5px; cursor: pointer; transition: var(--transition); z-index: 2; line-height: 1.3; } .copy-btn:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); } .copy-btn.copied { background: #4a7c59; color: #fff; border-color: #4a7c59; } /* ============================================================ Tables ============================================================ */ .table-scroll { overflow-x: auto; margin: 1.5rem 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 480px; } thead { background: var(--color-primary); color: #fff; } thead th { padding: 0.75rem 1rem; text-align: left; font-weight: 600; letter-spacing: 0.02em; } /* Inline code inside dark table headers must inherit white text, not body-text color */ thead th code { color: inherit; } tbody tr:nth-child(even) { background: var(--color-surface); } tbody tr:hover { background: var(--color-surface-2); } td { padding: 0.65rem 1rem; border-bottom: 1px solid var(--color-border); vertical-align: top; } /* ============================================================ Interactive Checkboxes (from Markdown [ ] / [x]) ============================================================ */ .task-list { list-style: none; padding-left: 0; } .task-list-item { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.5rem; } .task-list-item input[type="checkbox"] { margin-top: 0.3em; width: 1.1em; height: 1.1em; accent-color: var(--color-accent); cursor: pointer; flex-shrink: 0; } .task-list-item input[type="checkbox"]:checked + label, .task-list-item input[type="checkbox"]:checked ~ * { text-decoration: line-through; color: var(--color-text-muted); } /* ============================================================ FAQ Accordions ============================================================ */ .faq-section details { border-left: 4px solid var(--color-accent-2); border-radius: 0 var(--radius) var(--radius) 0; background: var(--color-surface); margin-bottom: 0.75rem; overflow: hidden; transition: var(--transition); } .faq-section details[open] { border-left-color: var(--color-accent); box-shadow: var(--shadow-sm); } .faq-section summary { padding: 1rem 1.2rem; cursor: pointer; font-weight: 600; color: var(--color-heading); display: flex; align-items: center; gap: 0.5rem; list-style: none; user-select: none; } .faq-section summary::-webkit-details-marker { display: none; } .faq-section summary::before { content: '▶'; font-size: 0.7em; color: var(--color-accent); transition: transform var(--transition); flex-shrink: 0; } .faq-section details[open] summary::before { transform: rotate(90deg); } .faq-section .faq-answer { padding: 0 1.2rem 1.1rem 1.2rem; color: var(--color-text); } .faq-section .faq-answer p:last-child { margin-bottom: 0; } /* ============================================================ Breadcrumbs ============================================================ */ .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 1.5rem; padding: 0.6rem 0; border-bottom: 1px solid var(--color-border); } .breadcrumb a { color: var(--color-text-muted); text-decoration: none; } .breadcrumb a:hover { color: var(--color-accent); text-decoration: underline; } .breadcrumb .sep { color: var(--color-border); font-size: 0.75em; } .breadcrumb .current { color: var(--color-heading); font-weight: 600; } /* ============================================================ Related Content Cards ============================================================ */ .related-content { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--color-border); } .related-content h2 { font-size: 1.2rem; margin-bottom: 1rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.8rem; margin-top: 0; } .related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; } .related-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1rem 1.25rem; text-decoration: none; color: var(--color-text); transition: var(--transition); display: flex; flex-direction: column; gap: 0.25rem; } .related-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-accent); color: var(--color-text); text-decoration: none; } .related-card .card-title { font-weight: 600; color: var(--color-heading); font-size: 0.95rem; } .related-card .card-desc { font-size: 0.82rem; color: var(--color-text-muted); } /* ============================================================ Sticky Header ============================================================ */ .site-header { position: sticky; top: 0; z-index: 100; height: var(--header-height); background: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-sm); display: flex; align-items: center; } .header-inner { max-width: var(--content-max); width: 100%; margin: 0 auto; padding: 0 var(--content-padding); display: flex; align-items: center; gap: 1.5rem; } .site-logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--color-heading); font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; white-space: nowrap; flex-shrink: 0; } .site-logo img { width: 36px; height: 36px; border-radius: 8px; } .site-logo:hover { color: var(--color-accent); text-decoration: none; } .site-nav { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; flex-wrap: wrap; } .nav-link { display: flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.85rem; border-radius: 6px; text-decoration: none; color: var(--color-text-muted); font-size: 0.875rem; font-weight: 500; transition: var(--transition); white-space: nowrap; } .nav-link:hover, .nav-link[aria-current="page"], .nav-link.active { background: var(--color-primary); color: #fff; text-decoration: none; } .nav-link .nav-icon { font-size: 1em; } /* Theme toggle */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; margin-left: 0.5rem; padding: 0; background: none; border: 1px solid var(--color-border); border-radius: 6px; color: var(--color-heading); cursor: pointer; transition: var(--transition); } .theme-toggle:hover { background: var(--color-surface-2); border-color: var(--color-accent); } .theme-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .theme-toggle svg { width: 19px; height: 19px; } /* Show the icon for the theme you would switch TO. */ .theme-toggle .theme-icon-sun { display: none; } .theme-toggle .theme-icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme-toggle .theme-icon-sun { display: block; } :root:not([data-theme]) .theme-toggle .theme-icon-moon { display: none; } } /* Hamburger */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 38px; height: 38px; background: none; border: 1px solid var(--color-border); border-radius: 6px; cursor: pointer; padding: 7px; margin-left: 0.5rem; } .nav-toggle span { display: block; height: 2px; background: var(--color-heading); border-radius: 2px; transition: var(--transition); } @media (max-width: 768px) { .nav-toggle { display: flex; } .theme-toggle { margin-left: auto; } .site-nav { display: none; position: absolute; top: var(--header-height); left: 0; right: 0; background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: 0.75rem var(--content-padding); flex-direction: column; align-items: stretch; gap: 0.25rem; box-shadow: var(--shadow-md); } .site-nav.open { display: flex; } .nav-link { justify-content: flex-start; padding: 0.65rem 0.85rem; } } /* ============================================================ Skip Link ============================================================ */ .skip-link { position: absolute; top: -100px; left: 1rem; z-index: 200; padding: 0.5rem 1rem; background: var(--color-primary); color: #fff; border-radius: 0 0 6px 6px; text-decoration: none; font-weight: 600; transition: top 0.2s; } .skip-link:focus { top: 0; } /* ============================================================ Main Content Wrapper ============================================================ */ .site-main { flex: 1; display: flex; flex-direction: column; } .content-wrapper { max-width: var(--content-max); width: 100%; margin: 0 auto; padding: 2.5rem var(--content-padding) 4rem; } /* ============================================================ Footer ============================================================ */ .site-footer { background: var(--color-primary); color: rgba(255,255,255,0.85); padding: 2.5rem var(--content-padding); margin-top: auto; } .footer-inner { max-width: var(--content-max); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; } .footer-col h3 { color: var(--color-accent-2); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.75rem; margin-top: 0; } /* Footer lists — plain, no custom bullets */ .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col li { margin-bottom: 0.4rem; } .footer-col li::before { display: none; } .footer-col a { color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.875rem; transition: var(--transition); } .footer-col a:hover { color: var(--color-accent-2); } .footer-brand p { font-size: 0.8rem; color: rgba(255,255,255,0.5); margin: 0.35rem 0 0; max-width: none; } /* Footer social / GitHub icon link */ .footer-social { margin-top: 0.75rem; } .footer-social-link { display: inline-flex; align-items: center; gap: 0.45rem; color: rgba(255,255,255,0.75); } .footer-social-link svg { display: block; flex: none; } .footer-social-link:hover { color: var(--color-accent-2); } .footer-bottom { max-width: var(--content-max); margin: 1.5rem auto 0; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.78rem; color: rgba(255,255,255,0.65); text-align: center; } /* ============================================================ Homepage — Hero ============================================================ */ .hero { background: linear-gradient(135deg, var(--color-primary) 0%, #3a1f5a 60%, #5b3f7a 100%); color: #fff; padding: clamp(3rem, 8vw, 6rem) var(--content-padding); text-align: center; } .hero-inner { max-width: var(--content-max); margin: 0 auto; } .hero h1 { color: #fff; font-size: clamp(2rem, 4vw + 0.5rem, 3.5rem); margin-bottom: 1rem; text-shadow: 0 2px 12px rgba(0,0,0,0.3); } .hero-tagline { font-size: clamp(1rem, 1.5vw + 0.25rem, 1.3rem); color: var(--color-accent-2); max-width: 90ch; margin: 0 auto 1.5rem; line-height: 1.6; } .hero-desc { max-width: 80ch; margin: 0 auto 2.5rem; color: rgba(255,255,255,0.8); font-size: 1rem; line-height: 1.7; } .cta-group { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } .cta-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.75rem; border-radius: 50px; font-weight: 700; font-size: 0.95rem; text-decoration: none; transition: transform 200ms, box-shadow 200ms, background 200ms; cursor: pointer; } .cta-btn:hover { transform: translateY(-3px); text-decoration: none; } .cta-btn-primary { background: var(--color-accent-2); color: var(--color-on-accent); box-shadow: 0 4px 18px rgba(201,160,220,0.4); } .cta-btn-primary:hover { background: var(--color-accent-hover); box-shadow: 0 6px 24px rgba(201,160,220,0.55); color: var(--color-on-accent); } .cta-btn-outline { background: rgba(255,255,255,0.1); color: #fff; border: 2px solid rgba(255,255,255,0.35); backdrop-filter: blur(4px); } .cta-btn-outline:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.6); color: #fff; } .cta-btn .btn-icon { font-size: 1.2em; } /* ============================================================ Homepage — Sections ============================================================ */ .home-section { padding: var(--section-gap) var(--content-padding); max-width: var(--content-max); margin: 0 auto; width: 100%; } .section-heading { font-size: clamp(1.3rem, 2vw, 1.8rem); margin-bottom: 0.4rem; } .section-sub { color: var(--color-text-muted); margin-bottom: 2rem; font-size: 1rem; max-width: 90ch; } /* Section cards */ .area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.5rem; } .area-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; transition: var(--transition); } .area-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--color-accent); } .area-card-icon { font-size: 2.2rem; line-height: 1; } .area-card h3 { margin: 0; font-size: 1.15rem; color: var(--color-heading); } .area-card p { color: var(--color-text-muted); font-size: 0.9rem; margin: 0; max-width: none; } .area-card ul { margin: 0; padding-left: 0; font-size: 0.875rem; } .area-card ul li { margin-bottom: 0.25rem; padding-left: 1.4rem; } .area-card ul li::before { width: 5px; height: 5px; top: 0.65em; } .area-card-link { margin-top: auto; display: inline-flex; align-items: center; gap: 0.35rem; color: var(--color-accent); font-weight: 600; font-size: 0.875rem; text-decoration: none; } .area-card-link:hover { color: var(--color-accent-hover); } /* ============================================================ Content article page ============================================================ */ .article-header { margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 2px solid var(--color-border); } .article-header h1 { background: linear-gradient(135deg, var(--color-heading) 0%, var(--color-accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.5rem; } .article-meta { font-size: 0.82rem; color: var(--color-text-muted); } .article-body h2::after { content: ''; display: block; width: 40px; height: 3px; background: var(--color-accent-2); border-radius: 2px; margin-top: 0.3rem; } /* Mermaid diagrams */ .mermaid { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.5rem; margin: 1.5rem 0; overflow-x: auto; text-align: center; } /* Section overview page columns */ .area-children { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; } .child-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; text-decoration: none; color: var(--color-text); transition: var(--transition); display: block; } .child-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--color-accent); text-decoration: none; color: var(--color-text); } .child-card h3 { color: var(--color-heading); font-size: 1rem; margin: 0 0 0.4rem; } .child-card p { font-size: 0.85rem; color: var(--color-text-muted); margin: 0; max-width: none; } /* ============================================================ Responsive utilities ============================================================ */ @media (max-width: 640px) { .area-grid { grid-template-columns: 1fr; } .related-grid { grid-template-columns: 1fr; } .footer-inner { grid-template-columns: 1fr; } .cta-group { flex-direction: column; align-items: center; } } /* In-article diagram SVGs: fill the text column (override inline max-width caps) */ .content-wrapper svg[role="img"] { width:100% !important; max-width:100% !important; height:auto; } /* ============================================================ Diagram figures — the JS-attached download / full-screen controls ============================================================ */ figure.diagram { margin: 1.75rem 0; position: relative; } .diagram-tools { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.35rem; } .diagram-btn { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 5px; color: var(--color-text-muted); font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.02em; padding: 0.25rem 0.6rem; cursor: pointer; transition: var(--transition); } .diagram-btn:hover { background: var(--color-surface-2); border-color: var(--color-accent); color: var(--color-heading); } .diagram-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } figure.diagram:fullscreen { background: var(--color-bg); padding: 2rem; display: flex; flex-direction: column; justify-content: center; } figure.diagram:fullscreen svg { max-height: 85vh; }