/* Italify documentation – design system per formkunft.com-design.md Monochrome editorial: black on white, restrained blue links, narrow centered column, hierarchy through scale and whitespace. */ :root { --color-primary: #000000; --color-secondary: #4b5563; --color-lede: #1f2937; --color-link: #1d4ed8; --color-surface: #ffffff; --color-border: #e5e7eb; --color-muted: #f9fafb; --color-error: #dc2626; --rounded-sm: 4px; --rounded-md: 8px; --rounded-full: 9999px; --space-xs: 6px; --space-sm: 10px; --space-md: 16px; --space-lg: 35px; --space-xl: 106px; --measure: 52rem; } /* Dark theme: same tokens, inverted. Set by the anti-FOUC script in each page's (data-theme on ), toggled by the header switch. */ :root[data-theme="dark"] { --color-primary: #f2f2f0; --color-secondary: #9aa1ab; --color-link: #8ab0ff; --color-surface: #14161a; --color-border: #2b2f37; --color-muted: #1c1f26; --color-error: #f87171; --color-lede: #dfe2e7; } /* Fizz (variable, wght 200–1000) is the site's voice. */ @font-face { font-family: "Fizz"; src: url("fonts/FizzVF-Regular.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; } @font-face { font-family: "Fizz"; src: url("fonts/FizzVF-Italic.woff2") format("woff2"); font-weight: 200 1000; font-style: italic; font-display: swap; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--color-surface); color: var(--color-primary); font-family: "Fizz", "Avenir Next", "Segoe UI", system-ui, sans-serif; font-weight: 400; font-size: 20px; line-height: 30px; transition: background-color 0.3s ease, color 0.3s ease; } /* Surfaces that carry the palette ease between themes with the body. */ header.site, footer, .card, pre, code, kbd, .chip, .button-primary, .button-secondary, .theme-toggle { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.15s ease; } /* ---- Layout ------------------------------------------------------ */ .column { max-width: var(--measure); margin: 0 auto; padding: 0 24px; } main section { margin-top: var(--space-xl); } main section:first-child { margin-top: calc(var(--space-xl) * 0.66); } footer { margin-top: var(--space-xl); padding: var(--space-lg) 0 var(--space-xl); border-top: 1px solid var(--color-border); color: var(--color-secondary); font-size: 17px; line-height: 26px; } footer a { color: var(--color-secondary); } /* ---- Header / navigation ----------------------------------------- */ header.site { position: relative; border-bottom: 1px solid var(--color-border); } header.site .column { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-md); padding-bottom: var(--space-md); } /* Theme switch: sits just past the reading column's right edge – a 16px gap from the last nav item, matching the nav's own inter-item spacing (the column's 24px padding less the button's 8px inset). Below 961px the gutter closes, so it falls back to the page edge (see media query). */ .theme-toggle { position: absolute; top: 50%; left: calc(50% + var(--measure) / 2 - 8px); transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: transparent; border: none; color: var(--color-secondary); cursor: pointer; } .theme-toggle:hover { color: var(--color-primary); } .theme-toggle:focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; } .theme-icon { display: block; width: 20px; height: 20px; /* Fizz's link transition easing, reused so the mode flip feels of a piece with the rest of the site. */ transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } :root[data-theme="dark"] .theme-icon { transform: rotate(180deg); } @media (max-width: 960px) { header.site .column { padding-right: 52px; } .theme-toggle { left: auto; right: 12px; } } .wordmark { display: flex; align-items: center; color: var(--color-primary); text-decoration: none; } .wordmark-logo { display: block; height: 26px; width: auto; } /* The wordmark SVG has a fixed near-black fill; force it to white on the dark surface (brightness(0) flattens it, invert(1) lifts it to white). */ :root[data-theme="dark"] .wordmark-logo { filter: brightness(0) invert(1); } nav.site-nav a { margin-left: var(--space-md); color: var(--color-primary); text-decoration: none; font-size: 19px; } nav.site-nav a:hover, nav.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; } /* Way back to the main site (Projects panel) – quieter than the section links, separated by a hairline. Hidden on narrow screens, where the nav row is already crowded. */ nav.site-nav a.site-home { color: var(--color-secondary); border-left: 1px solid var(--color-border); padding-left: var(--space-md); } nav.site-nav a.site-home:hover { color: var(--color-primary); } @media (max-width: 700px) { nav.site-nav a.site-home { display: none; } } /* ---- Typography --------------------------------------------------- */ h1 { font-size: 38px; font-weight: 400; line-height: 1.214; letter-spacing: 0; margin: 0 0 var(--space-md); } h2 { font-size: 28px; font-weight: 600; line-height: 32px; letter-spacing: 0.1px; margin: 0 0 var(--space-md); } h3 { font-size: 24px; font-weight: 500; line-height: 26px; margin: var(--space-lg) 0 var(--space-sm); } h4 { font-size: 23px; font-weight: 400; line-height: 28px; margin: var(--space-md) 0 var(--space-sm); } p { margin: 0 0 var(--space-md); } p.lede { font-size: 22px; line-height: 36px; color: var(--color-lede); } .overline { display: block; font-size: 17px; line-height: 21px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-secondary); margin-bottom: var(--space-sm); } a { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; /* Fizz is variable (wght 200–1000), so font-weight rides the wght axis and interpolates smoothly during the transition. */ transition: font-weight 0.3s cubic-bezier(0.22, 1, 0.36, 1); } a:not(.button-primary):not(.button-secondary):hover { font-weight: 620; } ul, ol { margin: 0 0 var(--space-md); padding-left: 1.4em; } li { margin-bottom: var(--space-xs); } hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-lg) 0; } /* ---- Buttons ------------------------------------------------------ */ .actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin: var(--space-md) 0; } .button-primary, .button-secondary { display: inline-flex; align-items: center; justify-content: center; height: 46px; min-width: 140px; padding: 8px 18px; border-radius: var(--rounded-sm); font-size: 19px; text-decoration: none; } .button-primary { background: var(--color-primary); color: var(--color-surface); border: 1px solid var(--color-primary); } .button-primary:hover { opacity: 0.85; } .button-secondary { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); } .button-secondary:hover { background: var(--color-muted); } /* ---- Cards -------------------------------------------------------- */ .card-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin: var(--space-md) 0; } @media (max-width: 640px) { .card-row { grid-template-columns: 1fr; } } .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--rounded-md); padding: 16px; } .card h4 { margin-top: 0; } .card p:last-child { margin-bottom: 0; font-size: 17px; line-height: 26px; color: var(--color-secondary); } /* ---- Chips & keys -------------------------------------------------- */ .chip { display: inline-block; background: var(--color-muted); border: 1px solid var(--color-border); border-radius: var(--rounded-full); padding: 3px 12px; font-size: 16px; line-height: 19px; letter-spacing: 1.4px; color: var(--color-primary); white-space: nowrap; } kbd { display: inline-block; min-width: 1.6em; text-align: center; padding: 1px 6px; border: 1px solid var(--color-border); border-bottom-width: 2px; border-radius: var(--rounded-sm); background: var(--color-muted); font-family: inherit; font-size: 17px; line-height: 24px; } /* ---- Code ---------------------------------------------------------- */ code { /* Fizz with ss05 ("Monaux alternates") as the code voice. */ font-family: "Fizz", ui-monospace, "SF Mono", Menlo, monospace; font-feature-settings: "ss05"; font-size: 18px; letter-spacing: 0.8px; background: var(--color-muted); border: 1px solid var(--color-border); border-radius: var(--rounded-sm); padding: 1px 5px; } pre { background: var(--color-muted); border: 1px solid var(--color-border); border-radius: var(--rounded-md); padding: 16px; overflow-x: auto; margin: 0 0 var(--space-md); } pre code { background: none; border: none; padding: 0; font-size: 16px; line-height: 26px; } /* Code sample with a copy-to-clipboard button pinned to its top-right. The wrapper carries the block's bottom spacing so the button can sit in the pre's padding without being clipped by its horizontal scroll. */ .code-block { position: relative; margin: 0 0 var(--space-md); } .code-block > pre { margin-bottom: 0; } .copy-btn { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--rounded-sm); background: var(--color-surface); color: var(--color-secondary); cursor: pointer; opacity: 0.6; transition: opacity 0.15s, color 0.15s, border-color 0.15s; } .code-block:hover .copy-btn, .copy-btn:focus-visible { opacity: 1; } .copy-btn:hover { color: var(--color-primary); border-color: var(--color-secondary); opacity: 1; } .copy-btn.copied { color: #15803d; border-color: #15803d; opacity: 1; } .copy-btn svg { width: 16px; height: 16px; } /* Prism syntax highlighting (python only). No vendored Prism theme — these restrained token colours match the site palette: strings green, keywords blue, comments and punctuation grey, names/numbers default. */ .token.comment { color: #6b7280; font-style: italic; } .token.string, .token.triple-quoted-string, .token.string-interpolation, .token.char { color: #15803d; } .token.keyword, .token.boolean, .token.decorator { color: var(--color-link); font-weight: 600; } .token.operator, .token.punctuation { color: var(--color-secondary); } /* ---- Tables -------------------------------------------------------- */ table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-md); font-size: 17px; line-height: 26px; } th { text-align: left; font-weight: 400; font-size: 14px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--color-secondary); padding: 8px 12px 8px 0; border-bottom: 1px solid var(--color-primary); } td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--color-border); vertical-align: top; } /* Code tokens in label columns never break mid-word; the auto table layout then gives the column the full width of the token. */ td code { white-space: nowrap; } /* ---- Screenshot placeholders -------------------------------------- Each .shot marks a screenshot still to be produced. Replace the .shot-frame with an of the same aspect; keep the figcaption. */ figure.shot { margin: var(--space-lg) 0; } figure.shot img { display: block; width: 100%; border-radius: var(--rounded-md); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.12); } /* Annotated figure: the image sits right (with its own baked-in shadow), notes sit left at percentage heights of the image. */ .annotated-row { display: flex; align-items: flex-start; gap: var(--space-md); } figure.shot.annotated img { width: 46%; /* The standard figure shadow, but as drop-shadow so it follows the window's rounded corners (the asset's alpha) instead of a box. drop-shadow blur is a Gaussian deviation – half the box-shadow radii renders visually identical. */ box-shadow: none; border-radius: 0; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.06)) drop-shadow(0 12px 16px rgba(0, 0, 0, 0.12)); /* Optical nudge: drops the image slightly so the dialogue's controls line up with the note column. Tweak here if the asset changes. */ transform: translateY(8px); } .annotated-notes { position: relative; flex: 1; align-self: stretch; } .annotated-note { position: absolute; left: 0; right: 0; transform: translateY(-50%); margin: 0; font-size: 17px; line-height: 25px; color: var(--color-secondary); } .annotated-note strong { color: var(--color-primary); font-weight: 500; } @media (max-width: 640px) { .annotated-row { flex-direction: column-reverse; } figure.shot.annotated img { width: 100%; transform: none; } .annotated-notes { position: static; align-self: auto; } .annotated-note { position: static; transform: none; margin-bottom: var(--space-sm); } } .shot-frame { border: 1px dashed var(--color-secondary); border-radius: var(--rounded-md); background: var(--color-muted); padding: var(--space-md); display: flex; flex-direction: column; justify-content: center; min-height: 220px; } figure.shot[data-aspect="wide"] .shot-frame { min-height: 280px; } figure.shot[data-aspect="tall"] .shot-frame { min-height: 380px; } .shot-tag { font-size: 13px; line-height: 17px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-secondary); margin-bottom: var(--space-sm); } .shot-desc { font-size: 17px; line-height: 26px; color: var(--color-secondary); margin: 0; } figure.shot figcaption { font-size: 17px; letter-spacing: 0.2px; line-height: 26px; color: var(--color-secondary); margin-top: var(--space-sm); } /* ---- Handbook table of contents ------------------------------------ */ .toc { border: 1px solid var(--color-border); border-radius: var(--rounded-md); padding: 16px; margin: var(--space-md) 0; font-size: 17px; line-height: 28px; } .toc ol { margin: 0; padding-left: 1.4em; } .toc ul { list-style: none; margin: 2px 0 8px; padding-left: 1em; } .toc li { margin-bottom: 2px; } .toc a { color: var(--color-primary); text-decoration: none; } .toc a:hover { text-decoration: underline; } /* On wide viewports the TOC leaves the reading column and sits in the left margin. Not sticky by design: it scrolls away with the intro. */ @media (min-width: 1400px) { main.column { position: relative; } .toc { position: absolute; top: calc(var(--space-xl) * 0.66); left: -32px; transform: translateX(-100%); width: 240px; margin: 0; padding: 0; border: none; border-radius: 0; } } /* ---- Steps ---------------------------------------------------------- */ ol.steps { list-style: none; counter-reset: step; padding: 0; } ol.steps > li { counter-increment: step; position: relative; padding-left: 64px; margin-bottom: var(--space-md); } ol.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 42px; height: 42px; border: 1px solid var(--color-primary); border-radius: var(--rounded-full); display: flex; align-items: center; justify-content: center; font-size: 19px; } /* ---- Parameter entries ---------------------------------------------- */ .param { padding: var(--space-md) 0; border-top: 1px solid var(--color-border); } .param:last-of-type { border-bottom: 1px solid var(--color-border); } .param h4 { margin: 0 0 var(--space-xs); display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; } .param p:last-child { margin-bottom: 0; } /* ---- Python API reference entries ---------------------------------- Each "**`func(...)`**" becomes a div.api-entry: the name is the header, its description and Parameters/Returns blocks are grouped and indented beneath it (wrapApiEntries in main.js builds the markup). */ .api-entry { margin-top: var(--space-lg); } .api-entry .api-name { margin: 0 0 var(--space-xs); } .api-body { padding-left: var(--space-md); } .api-body p { margin-bottom: var(--space-sm); } .api-body ul { margin-bottom: var(--space-sm); } .api-body li { margin-bottom: 2px; } /* Parameters / Returns: small-caps labels hugging their list, matching the site's other section labels (.overline, th, .shot-tag). */ .api-body .api-label { margin: var(--space-sm) 0 2px; } .api-body .api-label em { font-style: normal; font-size: 14px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--color-secondary); } .api-body > :last-child { margin-bottom: 0; } /* ---- Interactive outline demos (index page) ------------------------- The hero widget and the capabilities carousel, drawn by italify-demos.js. All colour comes from the tokens, so the theme toggle restyles the outlines for free. */ .demo-outline { fill: none; stroke: var(--color-primary); stroke-width: 2; } .demo-outline-filled { fill: var(--color-primary); stroke: none; } .demo-handles line { stroke: var(--color-link); stroke-width: 1.2; opacity: 0.65; } .demo-nodes circle { fill: var(--color-surface); stroke: var(--color-primary); stroke-width: 1.4; } .demo-nodes .demo-cross { stroke: var(--color-link); stroke-width: 1.6; } /* Shared checkbox + label control (hero and demo cards). */ .demo-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; line-height: 26px; cursor: pointer; user-select: none; } /* Round checkboxes, carried over from the original standalone Italify page: a circle with a checkmark that fades/scales in, tinted with the site's link blue. */ .demo-toggle input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border: 1px solid var(--color-secondary); border-radius: var(--rounded-full); background: var(--color-muted); cursor: pointer; display: inline-grid; place-content: center; flex: 0 0 auto; transition: border-color 0.15s; } .demo-toggle input:hover { border-color: var(--color-primary); } .demo-toggle input::before { content: ""; width: 11px; height: 11px; transform: scale(0); opacity: 0; transition: transform 0.15s ease-in-out, opacity 0.15s ease-in-out; background: var(--color-link); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); } .demo-toggle input:checked::before { transform: scale(1); opacity: 1; } .demo-toggle input:focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; } /* ---- Hero ---- */ .italify-hero { margin: var(--space-lg) 0; } .hero-controls { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; padding: var(--space-sm) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .hero-correction { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; line-height: 26px; flex: 1 1 220px; max-width: 340px; transition: opacity 0.2s; } .italify-hero:not(.hero-slant-on) .hero-correction { opacity: 0.45; } .hero-slider { appearance: none; -webkit-appearance: none; flex: 1; height: 2px; border-radius: var(--rounded-full); background: var(--color-border); outline-offset: 4px; cursor: pointer; } .hero-slider:disabled { cursor: default; } .hero-slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border-radius: var(--rounded-full); border: 1px solid var(--color-primary); background: var(--color-surface); } .hero-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: var(--rounded-full); border: 1px solid var(--color-primary); background: var(--color-surface); } .hero-stage { margin-top: var(--space-md); overflow-x: auto; } .hero-stage svg { display: block; width: 100%; min-width: 720px; height: auto; overflow: visible; } .hero-caption { margin-top: var(--space-sm); font-size: 17px; line-height: 26px; color: var(--color-secondary); } /* ---- Capabilities carousel ---- */ .demo-carousel-wrap { margin: var(--space-md) 0; } .demo-nav { display: flex; justify-content: flex-end; gap: var(--space-xs); margin-bottom: var(--space-sm); } .demo-nav button { width: 38px; height: 38px; border: 1px solid var(--color-border); border-radius: var(--rounded-full); background: var(--color-surface); color: var(--color-primary); font: inherit; font-size: 17px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.15s, opacity 0.15s; } .demo-nav button:hover:not(:disabled) { border-color: var(--color-secondary); } .demo-nav button:disabled { opacity: 0.35; cursor: default; } .demo-carousel { display: flex; gap: var(--space-md); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; /* Let node halos overdraw the card padding without clipping ugly. */ padding: 4px; margin: -4px; } .demo-carousel::-webkit-scrollbar { display: none; } .demo-card { flex: 0 0 min(440px, 86%); scroll-snap-align: start; border: 1px solid var(--color-border); border-radius: var(--rounded-md); padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); } .demo-figure { margin-bottom: var(--space-sm); } .demo-figure svg { display: block; width: 100%; height: 300px; overflow: visible; } .demo-card h4 { margin: 0; } .demo-card p { margin: 0; font-size: 17px; line-height: 26px; color: var(--color-secondary); flex: 1; } .demo-card .demo-toggle { margin-top: var(--space-xs); } .demo-dots { display: flex; justify-content: center; gap: 8px; margin-top: var(--space-sm); } .demo-dot { width: 8px; height: 8px; padding: 0; border: 1px solid var(--color-secondary); border-radius: var(--rounded-full); background: transparent; cursor: pointer; transition: background 0.15s; } .demo-dot.active { background: var(--color-primary); border-color: var(--color-primary); } /* ---- Testimonials ---- */ .quote-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin: var(--space-md) 0; } @media (max-width: 640px) { .quote-row { grid-template-columns: 1fr; } } .quote { margin: 0; border: 1px solid var(--color-border); border-radius: var(--rounded-md); padding: var(--space-md); } .quote blockquote { margin: 0; font-size: 17px; line-height: 26px; } .quote figcaption { margin-top: var(--space-sm); font-size: 17px; line-height: 26px; color: var(--color-secondary); } .quote figcaption a { color: var(--color-secondary); } /* Obfuscated email: the domain is supplied by CSS, matching the main site's convention. */ .email-protected::after { content: "@gmail.com"; } /* ---- Dark-theme fine-tuning ---------------------------------------- The palette swap above covers most of the site; a few colours are hard-coded (Prism tokens, the copied-state green) and want lifting so they read on the dark surface. */ :root[data-theme="dark"] .token.comment { color: #8b93a1; } :root[data-theme="dark"] .token.string, :root[data-theme="dark"] .token.triple-quoted-string, :root[data-theme="dark"] .token.string-interpolation, :root[data-theme="dark"] .token.char { color: #6ee7a0; } :root[data-theme="dark"] .copy-btn.copied { color: #4ade80; border-color: #4ade80; }