/* Haskell Inspector site — the "Signature" design. Night ground, hairline vocabulary (frames, rules, leaders, labeled notes), maison typography in Hanken Grotesk with letterspaced caps chrome, small mono numerals, and one ember accent through the numerals, links and marks. Distilled from the style-lab exploration (site/design-explorations, style vf8ds) with the user-tuned values: lockup 0.9×, wordmark tracking 0.6em, mark gap 0.6rem, nav gap 4rem, masthead→hero 3.5rem, hero title 3rem, text measure 620px. Dark is the default; the toggle swaps [data-theme] on . */ :root { /* The measure is the actual text width; the layout adds the rail, gap and padding (≤352px of chrome at desktop) on top of it. */ --measure: 620px; --maxw: calc(var(--measure) + 352px); --font-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* Night (default) — near-black ground, ember accent. */ html[data-theme="dark"] { --bg: #121212; --bg-elev: #1b1b1b; --bg-code: #181818; --text-code: #d8d8d4; --border: #2c2c2b; --text: #ececea; --text-dim: #b4b4b0; --text-faint: #7c7c78; --accent: #c89663; --link: #d3a876; --eyebrow-ink: #b98a58; --hl-string: #c2a279; --frame-ink: #d6d6d2; color-scheme: dark; } /* Day — white ground, sienna accent. */ html[data-theme="light"] { --bg: #ffffff; --bg-elev: #f6f6f5; --bg-code: #f7f7f6; --text-code: #2a2a28; --border: #e4e4e2; --text: #1a1a1a; --text-dim: #4c4c4a; --text-faint: #8c8c88; --accent: #96562a; --link: #96562a; --eyebrow-ink: #a06a3f; --hl-string: #8a6136; --frame-ink: #232322; color-scheme: light; } * { box-sizing: border-box; } /* [hidden] must beat class-level display rules (lightbox, tab panels). */ [hidden] { display: none !important; } html { scroll-behavior: smooth; scroll-padding-top: 70px; } body { margin: 0; font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.no-scroll { overflow: hidden; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } /* ---- Masthead: the centered maison lockup ------------------------------- */ /* Static (the minibar takes over on scroll): the mark above the tracked wordmark, tiny caps nav beneath, icons quietly top-right. */ .topbar { position: static; display: flex; flex-direction: column; align-items: center; gap: 1.4rem; padding: 3.4rem 1rem 2rem; background: var(--bg); } .brand { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; color: var(--text); } .brand:hover { text-decoration: none; } .brand-mark { width: 75.6px; height: 46.8px; flex: none; color: var(--text); } .brand-text { font-size: 1.01rem; font-weight: 450; letter-spacing: 0.6em; margin-right: -0.6em; /* recentre: tracking adds a trailing gap */ text-transform: uppercase; white-space: nowrap; } .topnav { display: flex; align-items: center; gap: 4rem; } :is(.topnav a, .topnav .nav-dd-trigger) { font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-dim); transition: color 0.15s; } :is(.topnav a, .topnav .nav-dd-trigger):hover { color: var(--text); text-decoration: none; } .top-actions { position: absolute; top: 2.4rem; right: 2rem; display: flex; align-items: center; gap: 1rem; } :is(.top-actions a, .top-actions .theme-toggle) { color: var(--text-dim); display: inline-flex; } :is(.top-actions a, .top-actions .theme-toggle):hover { color: var(--text); } .top-actions svg { width: 18px; height: 18px; } .theme-toggle { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; font-size: 1rem; line-height: 1; } /* Docs dropdown (topbar + minibar): opens on hover, focus, or tap. */ .nav-dd { position: relative; display: inline-flex; } .nav-dd-trigger { background: none; border: none; cursor: pointer; padding: 0; margin: 0; font: inherit; display: inline-flex; align-items: center; gap: 0.35rem; } .nav-dd-caret { font-size: 0.72em; transition: transform 0.15s; } .nav-dd-trigger[aria-expanded="true"] .nav-dd-caret { transform: rotate(180deg); } .nav-dd-menu { position: absolute; top: calc(100% + 0.7rem); left: 50%; transform: translate(-50%, -4px); min-width: 13.5rem; display: flex; flex-direction: column; padding: 0.45rem 0; background: var(--bg); border: 1px solid var(--border); box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: opacity 0.12s, transform 0.12s, visibility 0.12s; z-index: 60; } .nav-dd.open .nav-dd-menu, .nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); } /* A click while the menu is hover-open dismisses it; the class outranks the :hover/:focus-within rules above so the menu disappears even under the pointer. Cleared on mouse-leave so plain hover keeps working. See initDropdowns() in app.js. */ .nav-dd.dismissed .nav-dd-menu { opacity: 0; visibility: hidden; } .nav-dd-menu a { display: block; padding: 0.42rem 1rem; color: var(--text-dim); font-size: 0.82rem; letter-spacing: 0.02em; text-transform: none; white-space: nowrap; } .nav-dd-menu a:hover { color: var(--text); background: var(--bg-elev); text-decoration: none; } /* The minibar's menu drops from a left-aligned trigger. */ .mini-nav .nav-dd-menu { left: auto; right: 0; transform: translateY(-4px); } .mini-nav .nav-dd.open .nav-dd-menu, .mini-nav .nav-dd:hover .nav-dd-menu, .mini-nav .nav-dd:focus-within .nav-dd-menu { transform: translateY(0); } /* ---- Hero ---------------------------------------------------------------- */ /* Centered copy above the triptych of product prints. Quiet: no buttons, no terminal box — the nav and the document carry the way in. */ .hero { position: relative; overflow: hidden; background: var(--bg); } .doc-page .hero { display: none; } .hero-inner { display: grid; grid-template-areas: "copy" "shot"; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; max-width: none; margin: 0 auto; padding: 3.5rem 1rem clamp(3rem, 7vw, 5rem); } .hero-copy { grid-area: copy; min-width: 0; } .hero-eyebrow { margin: 0 0 1.3rem; font-size: 0.78rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 400; color: var(--eyebrow-ink); } .hero-title { margin: 0; font-size: 3rem; font-weight: 200; line-height: 1.16; letter-spacing: 0.01em; text-wrap: balance; color: var(--text); } .hero-sub { margin: 1.6rem auto 0; max-width: 34rem; color: var(--text-dim); font-size: 1rem; } /* The triptych: three works in hairline double frames that glow gently on the night ground; a work lifts and plays its clip while regarded. */ .hero-shot { grid-area: shot; width: 100%; max-width: 1140px; margin-top: clamp(3rem, 7vw, 5rem); min-width: 0; } .hero-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.2vw, 2rem); } .hero-gallery figure { margin: 0; position: relative; } .hero-gallery .work { position: relative; min-width: 0; transition: transform 0.3s var(--ease); } .hero-gallery figure:hover .work { transform: translateY(-4px); } .hero-gallery img { display: block; width: 100%; height: clamp(240px, 36vh, 420px); object-fit: cover; object-position: left top; background: var(--bg-elev); } .hero-gallery figure:nth-child(2) img { object-position: center top; } .hero-gallery figure:nth-child(3) img { object-position: right top; } .hero-gallery img, .hero-gallery video { border: 1px solid color-mix(in srgb, var(--text) 45%, transparent); } .hero-gallery img { outline: 1px solid var(--border); outline-offset: 5px; } .hero-gallery .work { box-shadow: 0 0 44px -16px color-mix(in srgb, var(--text) 35%, transparent); } /* The lazy clip sits over its still and crossfades in while playing. */ .hero-gallery video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease); } .hero-gallery figure:nth-child(2) video { object-position: center top; } .hero-gallery figure:nth-child(3) video { object-position: right top; } .hero-gallery figure.playing video { opacity: 1; } /* Ruled captions: the plate line in whisper caps, the description beneath. */ .hero-gallery figcaption { margin-top: 1.2rem; padding-top: 0.7rem; border-top: 1px solid var(--border); text-align: center; font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-faint); } .hero-gallery .cap-t { display: block; } .hero-gallery .cap-d { display: block; margin-top: 0.4rem; font-size: 0.72rem; letter-spacing: 0.02em; text-transform: none; } /* ---- Layout: index rail + document ---------------------------------------- */ .layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; max-width: var(--maxw); margin: 0 auto; padding: clamp(2.4rem, 5vw, 4rem) clamp(1rem, 4vw, 2.5rem) 4.5rem; } @media (min-width: 960px) { .layout { grid-template-columns: 200px minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); } } .toc { position: sticky; top: 4rem; align-self: start; max-height: calc(100vh - 6rem); overflow-y: auto; } .toc-title { margin: 0 0 0.9rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-faint); font-weight: 500; } #toc-list { display: flex; flex-direction: column; gap: 0; counter-reset: tocn; } #toc-list a { display: block; padding: 0.36rem 0; color: var(--text-faint); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.5; transition: color 0.15s, padding-left 0.25s var(--ease); } #toc-list a:hover { color: var(--text); text-decoration: none; padding-left: 0.4rem; } /* The ledger: top-level entries run a hairline leader to a right-set ember folio. Sub-entries sit beneath, quiet and unnumbered. */ #toc-list a.toc-top { display: flex; align-items: baseline; white-space: normal; counter-increment: tocn; } #toc-list a.toc-top::before { content: ""; order: 1; flex: 1; min-width: 0.9rem; height: 1px; margin: 0 0.45rem; background: var(--border); transform: translateY(-3px); } #toc-list a.toc-top::after { content: counter(tocn, decimal-leading-zero); order: 2; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0; color: var(--accent); } #toc-list a.toc-sub { font-size: 0.72rem; letter-spacing: 0.02em; text-transform: none; padding: 0.22rem 0; } #toc-list a.active { color: var(--accent); } #toc-list a.toc-top.active-parent { color: var(--text); } /* Hierarchical groups (nested h3s; the notes page's directory trie). */ .toc-group { display: flex; flex-direction: column; } .toc-grouphead { display: flex; align-items: baseline; gap: 0.15rem; } .toc-grouphead .toc-top { flex: 1; min-width: 0; } .toc-toggle { flex: none; width: 0.9rem; padding: 0; margin: 0; background: none; border: none; cursor: pointer; color: var(--text-faint); font-size: 0.6rem; line-height: 1.5; transition: color 0.15s; } .toc-toggle::before { content: "▾"; display: inline-block; transition: transform 0.12s; } .toc-group.collapsed .toc-toggle::before { transform: rotate(-90deg); } .toc-toggle:hover { color: var(--text); } .toc-dir { flex: 1; min-width: 0; cursor: pointer; color: var(--text-faint); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.6; padding: 0.3rem 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s; } .toc-dir:hover { color: var(--text); } .toc-children { display: flex; flex-direction: column; margin-left: 0.4rem; padding-left: 0.5rem; border-left: 1px solid color-mix(in srgb, var(--border) 65%, transparent); } .toc-group.collapsed .toc-children { display: none; } /* "toc: open" sections keep their children but drop the caret entirely so the head label sits flush left, and never collapse. */ .toc-group.nocaret > .toc-grouphead .toc-toggle { display: none; } .toc-group.nocaret > .toc-children { display: flex; } @media (max-width: 959px) { .toc { display: none; } } /* ---- Rendered Markdown content -------------------------------------------- */ .content { min-width: 0; max-width: var(--measure); font-size: 1.01rem; counter-reset: h2sec; } /* The document opens flush with the index rail. */ #content > :first-child { margin-top: 0; } .loading { display: flex; align-items: center; gap: 0.7rem; color: var(--text-dim); padding: 3rem 0; } .spinner { width: 16px; height: 16px; border: 1px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .error { padding: 1.2rem 1.4rem; border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, transparent); } .content h1 { display: none; } /* the hero / masthead already states the title */ /* Kicker eyebrow above a section (from an "eyebrow:" comment). */ .content .kicker { margin: 5.2rem 0 0; font-size: 0.64rem; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 500; color: var(--eyebrow-ink); } /* Section openers, "ticked": a small ember numeral right-set on its own line just above, then the caps title with the hairline rule filling out the rest of its line. */ .content h2 { position: relative; counter-increment: h2sec; display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem 1rem; margin: 5.2rem 0 1.6rem; font-size: 1.22rem; font-weight: 450; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3; color: var(--text); text-wrap: balance; } .content .kicker + h2 { margin-top: 0.8rem; } .content h2::before { content: counter(h2sec, decimal-leading-zero); flex-basis: 100%; text-align: right; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 400; letter-spacing: 0; color: var(--accent); } .content h2::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* The footnote section's visually-hidden heading must not wear the opener. */ .content [data-footnotes] h2::before, .content [data-footnotes] h2::after { content: none; } .content h3 { position: relative; margin: 3rem 0 0.7rem; font-size: 1.06rem; font-weight: 500; letter-spacing: 0.02em; color: var(--text); } .content h4 { position: relative; margin: 1.6rem 0 0.5rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); } .content p, .content li { color: var(--text-dim); } .content > p:first-of-type:not(.kicker) { color: var(--text); } .content ul, .content ol { padding-left: 1.4rem; } .content li { margin: 0.35rem 0; } .content li::marker { color: var(--accent); } /* Heading anchors hang in the left gutter. */ .anchor { position: absolute; left: -1.15rem; color: var(--text-faint); font-weight: 400; letter-spacing: 0; opacity: 0; transition: opacity 0.15s; } h2:hover .anchor, h3:hover .anchor, h4:hover .anchor { opacity: 1; } .anchor:hover { color: var(--accent); text-decoration: none; } /* Notes: a hairline box with a small ember label breaking its top rule. */ .content blockquote { position: relative; margin: 1.9rem 0 1.5rem; padding: 1.2rem 1.2rem 1rem; border: 1px solid var(--border); background: none; color: var(--text-dim); font-size: 0.88rem; } .content blockquote::before { content: "NOTE"; position: absolute; top: -0.55em; left: 1rem; background: var(--bg); padding: 0 0.5rem; font-size: 0.58rem; letter-spacing: 0.28em; color: var(--accent); } .content blockquote p { margin: 0.4rem 0; } .content hr { border: 0; height: 1px; width: 2.4rem; margin: 4rem auto; background: var(--border); } /* Footnotes (marked-footnote): quiet, below a hairline. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .content sup a[data-footnote-ref] { font-size: 0.7em; font-weight: 600; padding: 0 0.15em; text-decoration: none; } .content .footnotes { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: 0.88rem; } .content .footnotes ol { padding-left: 1.2rem; } .content .footnotes li { margin: 0.5rem 0; } .content .footnotes p { margin: 0; } .content .footnotes a[data-footnote-backref] { margin-left: 0.35rem; text-decoration: none; font-size: 0.95em; } /* Inline + block code: hairline panels, square. */ .content code { font-family: var(--font-mono); font-size: 0.88em; background: var(--bg-elev); padding: 0.15em 0.4em; border: 1px solid var(--border); color: var(--text); } .content pre { margin: 1.4rem 0; padding: 1.05rem 1.2rem; background: var(--bg-code); border: 1px solid var(--border); overflow-x: auto; } .content pre code { background: none; border: 0; padding: 0; font-size: 0.86rem; line-height: 1.6; color: var(--text-code); } /* Syntax tokens — muted, theme-matched; keywords/types carry the ember. */ .content pre code.hljs { color: var(--text-code); background: none; } .content pre .hljs-comment, .content pre .hljs-quote { color: var(--text-faint); font-style: italic; } .content pre .hljs-keyword, .content pre .hljs-built_in, .content pre .hljs-type, .content pre .hljs-literal, .content pre .hljs-meta, .content pre .hljs-doctag { color: var(--accent); } .content pre .hljs-string, .content pre .hljs-regexp, .content pre .hljs-symbol, .content pre .hljs-bullet, .content pre .hljs-addition { color: var(--hl-string); } .content pre .hljs-number { color: var(--text-dim); } .content pre .hljs-title, .content pre .hljs-title.function_, .content pre .hljs-title.class_, .content pre .hljs-section, .content pre .hljs-name, .content pre .hljs-attr, .content pre .hljs-attribute, .content pre .hljs-selector-tag, .content pre .hljs-selector-id, .content pre .hljs-selector-class { color: var(--text); } .content pre .hljs-variable, .content pre .hljs-template-variable, .content pre .hljs-params, .content pre .hljs-operator, .content pre .hljs-punctuation, .content pre .hljs-property { color: var(--text-code); } .content pre .hljs-emphasis { font-style: italic; } .content pre .hljs-strong { font-weight: 600; } /* HEQL instrumentation: typed identifiers hint with a dotted underline. */ .content pre .heql-id { cursor: help; border-bottom: 1px dotted color-mix(in srgb, currentColor 45%, transparent); } .content pre a.heql-ref { color: inherit; cursor: pointer; text-decoration: none; border-bottom-style: solid; } .content pre a.heql-ref:hover { text-decoration: none; border-bottom-color: currentColor; } /* HEQL tab widget: one hairline card, caps-mono tabs above the panels. */ .content .heql-tabs { margin: 1.4rem 0; border: 1px solid var(--border); background: var(--bg-code); overflow: hidden; } .heql-tabs__bar { display: flex; flex-wrap: wrap; gap: 0.15rem; padding: 0.35rem 0.5rem 0; border-bottom: 1px solid var(--border); background: var(--bg); } .heql-tabs__tab { appearance: none; border: 0; background: none; cursor: pointer; padding: 0.4rem 0.65rem; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); border-bottom: 1px solid transparent; margin-bottom: -1px; transition: color 0.12s, border-color 0.12s; } .heql-tabs__tab:hover { color: var(--text); } .heql-tabs__tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); } .heql-tabs__tab:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; } .content .heql-tabs pre.heql-tabs__panel { margin: 0; padding: 0.95rem 1.08rem; border: 0; background: none; } .content .heql-tabs pre.heql-tabs__panel code { font-size: 0.78rem; } /* The type tooltip: a hairline panel, the type set in ember. */ .heql-tip { position: fixed; z-index: 100; max-width: 34rem; padding: 0.5rem 0.7rem; background: var(--bg-elev); border: 1px solid var(--border); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.5); font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.5; color: var(--text); pointer-events: none; } .heql-tip-sig { color: var(--text); } .heql-tip-name { color: var(--text); } .heql-tip-type { color: var(--accent); } .heql-tip-punc { color: var(--text-faint); } .heql-tip-kind { color: var(--text-faint); font-size: 0.85em; } .heql-tip-desc { margin-top: 0.55rem; color: var(--text-dim); font-family: var(--font-body); font-size: 0.92em; } .heql-tip-def { margin: 0.55rem 0 0; padding-top: 0.5rem; border-top: 1px solid var(--border); color: var(--text-code); font-family: var(--font-mono); font-size: 0.92em; white-space: pre; overflow-x: auto; } .heql-tip-hint { margin-top: 0.5rem; color: var(--text-faint); font-family: var(--font-body); font-style: italic; } /* Tables: hairline, square. */ .table-wrap { overflow-x: auto; margin: 1.4rem 0; } .content table { border-collapse: collapse; width: 100%; font-size: 0.92rem; border: 1px solid var(--border); } .content th, .content td { padding: 0.65rem 1rem; text-align: left; border-bottom: 1px solid var(--border); } .content th { background: var(--bg-elev); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); } .content td { color: var(--text-dim); } .content tr:last-child td { border-bottom: 0; } /* Content media wear the same hairline double frame as the hero works. */ .shot { margin: 2.2rem 0; } .shot img, .shot video { display: block; width: 100%; height: auto; background: var(--bg-elev); border: 1px solid color-mix(in srgb, var(--frame-ink) 45%, transparent); outline: 1px solid var(--border); outline-offset: 5px; cursor: zoom-in; } .shot video { cursor: pointer; } .shot figcaption { margin-top: 0.9rem; text-align: center; font-size: 0.78rem; color: var(--text-faint); } .shot-missing { text-align: center; } .shot-placeholder { padding: 2.5rem 1rem; border: 1px dashed var(--border); color: var(--text-faint); background: var(--bg-elev); font-size: 0.92rem; } /* ---- Lightbox --------------------------------------------------------------- */ .lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 2.5rem; background: color-mix(in srgb, var(--bg) 30%, rgba(0, 0, 0, 0.8)); backdrop-filter: blur(6px); animation: fade 0.18s var(--ease); } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } .lightbox-figure { margin: 0; max-width: 1100px; } .lightbox-figure img { display: block; max-width: 100%; max-height: 80vh; border: 1px solid color-mix(in srgb, var(--frame-ink) 45%, transparent); outline: 1px solid var(--border); outline-offset: 5px; } .lightbox-figure figcaption { margin-top: 1rem; text-align: center; color: var(--text-dim); font-size: 0.85rem; } .lightbox-close { position: absolute; top: 1.2rem; right: 1.4rem; width: 44px; height: 44px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); font-size: 1.5rem; line-height: 1; cursor: pointer; } .lightbox-close:hover { border-color: var(--accent); } /* ---- Footer ------------------------------------------------------------------ */ .footer { border-top: 0; padding: 4rem 1rem 3rem; text-align: center; color: var(--text-faint); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; } .footer a { color: var(--text-dim); } .footer a:hover { color: var(--text); text-decoration: none; } /* ---- Minibar: compact title bar on scroll -------------------------------------- */ .minibar { position: fixed; top: 0; left: 0; right: 0; z-index: 80; display: flex; align-items: center; gap: 1.4rem; padding: 0.55rem clamp(1rem, 4vw, 2.5rem); background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--border); transform: translateY(-100%); transition: transform 0.3s var(--ease); } .minibar.show { transform: translateY(0); } .mini-brand { display: flex; align-items: center; gap: 0.55rem; color: var(--text); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.24em; /* the lockup's 0.6em, scaled to the compact bar */ text-transform: uppercase; white-space: nowrap; } .mini-brand:hover { text-decoration: none; } .mini-brand svg { width: 32px; height: 20px; color: var(--text); flex: none; } .mini-nav { display: flex; align-items: center; gap: 1.4rem; margin-left: auto; } :is(.mini-nav a, .mini-nav .nav-dd-trigger) { color: var(--text-dim); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; } :is(.mini-nav a, .mini-nav .nav-dd-trigger):hover { color: var(--text); text-decoration: none; } .mini-nav .nav-dd-menu a { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: none; } .mini-actions { display: flex; align-items: center; gap: 0.9rem; } .mini-actions a { color: var(--text-dim); display: inline-flex; } .mini-actions a:hover { color: var(--text); } .mini-actions svg { width: 16px; height: 16px; } .mini-actions .theme-toggle { color: var(--text-dim); font-size: 0.95rem; } .mini-actions .theme-toggle:hover { color: var(--text); } .mini-burger { display: none; place-items: center; width: 34px; height: 30px; padding: 0; background: none; border: 1px solid var(--border); color: var(--text); font-size: 0.95rem; line-height: 1; cursor: pointer; } .mini-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0.1rem; padding: 0.5rem 1rem 0.9rem; background: var(--bg); border-bottom: 1px solid var(--border); } .minibar.open .mini-menu { display: flex; } .mini-menu a { padding: 0.55rem 0.3rem; color: var(--text-dim); font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; } .mini-menu a:hover { color: var(--text); text-decoration: none; } .mini-menu .mini-sub { padding-left: 1rem; letter-spacing: 0.04em; text-transform: none; } .mini-menu-head { padding: 0.55rem 0.3rem 0.15rem; color: var(--text-faint); font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; } /* ---- Narrow screens ------------------------------------------------------------- */ /* The centered lockup keeps its nav on phones — it is the menu until the visitor scrolls (the minibar's burger takes over from there). */ @media (max-width: 760px) { .topnav { flex-wrap: wrap; justify-content: center; gap: 0.7rem 1.6rem; padding: 0 1rem; } .top-actions { top: 1.2rem; right: 1rem; } .topbar { padding-top: 4rem; position: relative; } /* The topbar Docs dropdown opens as a full-width panel under the masthead. A fixed-width menu anchored to the (centered, wrapping) trigger overhangs the viewport edge — and a hidden, absolutely positioned menu still expands the scrollable width, so the page scrolls sideways even while the menu is closed. Anchoring it to the topbar with symmetric insets keeps it inside both edges at every phone width. */ .topbar .nav-dd { position: static; } .topbar .nav-dd-menu { left: 1rem; right: 1rem; top: 100%; min-width: 0; transform: translateY(-4px); } .topbar .nav-dd.open .nav-dd-menu, .topbar .nav-dd:hover .nav-dd-menu, .topbar .nav-dd:focus-within .nav-dd-menu { transform: translateY(0); } .mini-nav { display: none; } .minibar .mini-burger { display: grid; } /* The hidden nav carried the margin-left:auto push; the actions take it over so GitHub / Discord / theme / burger stay right-aligned. */ .mini-actions { margin-left: auto; } } /* The triptych folds to a single column. */ @media (max-width: 940px) { .hero-gallery { grid-template-columns: 1fr; } .hero-shot { margin-top: 2.5rem; } } /* Very small screens: the letterspaced wordmark and the compact bar are, on their own, wider than a ~380px viewport; tighten the tracking, gaps and padding so both clear the edge instead of forcing a sideways scroll. */ @media (max-width: 420px) { .brand-text { letter-spacing: 0.28em; margin-right: -0.28em; } .minibar { gap: 0.5rem; padding-left: 0.8rem; padding-right: 0.8rem; } .mini-brand { letter-spacing: 0.1em; font-size: 0.72rem; } .mini-brand svg { width: 26px; height: 16px; } .mini-actions { gap: 0.6rem; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }