/* * page.css - layout and demonstration styling for the Stellar * visual reference. Everything here is built ON Stellar variables so * the page itself is a demonstration of the system. Light/dark comes * from stellar's :root.dark overrides; we toggle `dark` on . */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: light; } html.dark { color-scheme: dark; } body { margin: 0; font-family: var(--font-sans); font-size: var(--font-size-0); line-height: var(--font-line-height-0); background: var(--neutral-1); color: var(--neutral-1-on); -webkit-text-size-adjust: 100%; } a { color: var(--primary-7); } /* inline code in prose (the glossary references tokens by name). The interactive copy chip is .token; this is just for reading. */ code { font-family: var(--font-mono); } /* definition lists: the glossary renders to these raw tags */ dl { max-width: 64ch; margin: var(--size-2) 0; } dt { font-weight: var(--font-weight-semi-bold); margin-top: var(--size-2); } dd { margin: var(--size--1) 0 0; padding-left: var(--size-2); } /* ---- shell: sticky sidebar + content ---------------------------- */ .shell { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--size-4); max-width: 90rem; margin: 0 auto; padding: var(--size-3) var(--size-4) var(--size-9); } .sidebar { position: sticky; top: var(--size-3); align-self: start; height: calc(100vh - var(--size-5)); overflow-y: auto; padding-right: var(--size-1); } .brand { margin: 0 0 var(--size-3); } .brand h1 { font-size: var(--font-size-3); font-weight: var(--font-weight-extra-bold); letter-spacing: var(--font-letter-spacing--1); line-height: 1.1; margin: 0; } .brand p { margin: var(--size--1) 0 0; font-size: var(--font-size--1); color: var(--neutral-1-dim); line-height: var(--font-line-height--1); } .sidebar nav ul { list-style: none; margin: 0; padding: 0; } .sidebar nav li { margin: 0; } .sidebar nav a { display: block; padding: var(--size--2) var(--size-0); border-radius: var(--border-radius-1); color: var(--neutral-1-dim); text-decoration: none; font-size: var(--font-size--1); line-height: var(--font-line-height--1); } .sidebar nav a:hover { background: var(--neutral-3); color: var(--neutral-1-on); } .theme-toggle { margin-top: var(--size-2); display: inline-flex; align-items: center; gap: var(--size--1); padding: var(--size--1) var(--size-1); border: var(--border-width-1) solid var(--neutral-5); border-radius: var(--border-radius-2); background: var(--neutral-2); color: var(--neutral-1-on); font: inherit; font-size: var(--font-size--1); cursor: pointer; } .theme-toggle:hover { background: var(--neutral-3); } /* quiet "view source" link, sits on its own line under the theme toggle */ .source-link { display: flex; width: fit-content; align-items: center; gap: var(--size--1); margin-top: var(--size-1); color: var(--neutral-1-dim); text-decoration: none; font-size: var(--font-size--1); } .source-link:hover { color: var(--neutral-1-on); text-decoration: underline; } .content { min-width: 0; } /* ---- page intro -------------------------------------------------- */ .intro h1 { font-size: var(--font-size-7); font-weight: var(--font-weight-extra-bold); letter-spacing: var(--font-letter-spacing--2); /* Stellar's line-height tokens are absolute rems tuned to body sizes (the scale tops out near 1.9rem), so none fit large display text; a unitless ratio scales the leading with the font and avoids overlap on wrap. 1.1 is the shared display ratio, used by every heading and the type specimens. */ line-height: 1.1; margin: var(--size-2) 0 var(--size-1); text-wrap: balance; } .intro .lede { font-size: var(--font-size-2); line-height: var(--font-line-height-2); color: var(--neutral-1-dim); max-width: 48ch; margin: 0 0 var(--size-2); } /* ---- sections ---------------------------------------------------- */ .section { margin-top: var(--size-7); scroll-margin-top: var(--size-2); } .section-head { scroll-margin-top: var(--size-2); } .section-head h2 { font-size: var(--font-size-4); line-height: 1.1; font-weight: var(--font-weight-bold); letter-spacing: var(--font-letter-spacing--1); margin: 0; padding-bottom: var(--size--1); border-bottom: var(--border-width-2) solid var(--neutral-4); } .section-head .lede { color: var(--neutral-1-dim); max-width: 64ch; margin: var(--size-0) 0 var(--size-2); } h3 { font-size: var(--font-size-1); line-height: 1.1; font-weight: var(--font-weight-semi-bold); color: var(--neutral-1-on); margin: var(--size-3) 0 var(--size-1); } /* ---- token chips ------------------------------------------------- */ .token { font-family: var(--font-mono); font-size: var(--font-size--1); background: var(--neutral-3); color: var(--neutral-1-on); padding: 0.1em 0.45em 0.2em; border-radius: var(--border-radius-1); border: var(--border-width-1) solid var(--neutral-5); cursor: pointer; white-space: nowrap; transition: background var(--anim-duration-fast) var(--anim-ease-standard); } .token:hover { background: var(--primary-4); border-color: var(--primary-6); } .token.copied { background: var(--primary-6); color: var(--primary-6-on); border-color: var(--primary-7); } .token-row { display: flex; flex-wrap: wrap; gap: var(--size--1); margin: var(--size-1) 0; } /* ---- color ramps ------------------------------------------------- */ .ramp-group { margin: var(--size-2) 0; } .ramp-label { display: flex; align-items: baseline; gap: var(--size-0); margin-bottom: var(--size--2); } .ramp-label strong { font-size: var(--font-size-1); font-weight: var(--font-weight-semi-bold); } .ramp-label .token { cursor: default; } /* a swatch: one cell that paints a shade and copies a token on click. The block; ramps arrange swatches into strips. */ .swatch { display: flex; min-width: 0; cursor: pointer; font-family: var(--font-mono); font-size: var(--font-size--2); line-height: 1; } .swatch b { font-weight: var(--font-weight-bold); } /* a strip of swatches, clipped into one rounded bar. minmax(0, 1fr) so no cell forces its track past the 12 columns. */ .ramp { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); border-radius: var(--border-radius-2); overflow: hidden; box-shadow: var(--shadow-1); } /* the tall color row: the shade with its step number in the corner */ .ramp .swatch { aspect-ratio: 4 / 5; align-items: flex-start; padding: var(--size--2); } /* the short -on and -dim rows: each a separated bar with a centered label in the foreground colour it copies */ .ramp.band { margin-top: 2px; } .ramp.band .swatch { aspect-ratio: auto; align-items: center; justify-content: center; min-height: var(--size-1); } /* compact strips for brands and chart palettes */ .ramp.mini .swatch { font-size: var(--font-size--3); } /* role surface demo */ .surfaces { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--size-2); margin: var(--size-2) 0; } .surface { border-radius: var(--border-radius-3); padding: var(--size-2); box-shadow: var(--shadow-2); } .surface h4 { margin: 0 0 var(--size-0); font-size: var(--font-size-1); font-weight: var(--font-weight-bold); } .surface p { margin: 0 0 var(--size-1); } .surface .dimtext { opacity: 1; } .surface .pill { display: inline-block; padding: 0.2em 0.8em; border-radius: var(--border-radius-5); font-size: var(--font-size--1); font-weight: var(--font-weight-semi-bold); } /* named brands */ .brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--size-1); } .brand-card { display: flex; flex-direction: column; } .brand-card .name { font-family: var(--font-mono); font-size: var(--font-size--2); color: var(--neutral-1-dim); margin-bottom: var(--size--3); } /* raw numeric amount stops: a simple wrap of token chips */ .raw-amounts { display: flex; flex-wrap: wrap; gap: var(--size--1); } /* diverging chart palettes stack with breathing room */ .chart-ramps { display: flex; flex-direction: column; gap: var(--size-1); } .gradients { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--size-2); } .gradient-card { cursor: pointer; } .gradient-card .swatch { height: var(--size-6); border-radius: var(--border-radius-3); box-shadow: var(--shadow-2); } .gradient-card .name { display: block; margin-top: var(--size--1); } /* ---- type --------------------------------------------------------- */ .type-scale { margin: var(--size-2) 0; } .type-row { display: flex; align-items: baseline; gap: var(--size-2); padding: var(--size--1) 0; border-bottom: var(--border-width-1) solid var(--neutral-3); cursor: pointer; } .type-row:hover { background: var(--neutral-2); } .type-row .specimen { flex: 1; min-width: 0; color: var(--neutral-1-on); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .type-row .meta { flex-shrink: 0; text-align: right; } .type-row .meta .token { cursor: pointer; } .families { display: grid; gap: var(--size-1); } .family-row { display: grid; grid-template-columns: 12rem 1fr; gap: var(--size-2); align-items: baseline; padding: var(--size-0) 0; border-bottom: var(--border-width-1) solid var(--neutral-3); } .family-row .specimen { font-size: var(--font-size-2); } .weights { display: flex; flex-wrap: wrap; gap: var(--size-2); align-items: baseline; } .weight-item { text-align: center; cursor: pointer; } .weight-item .word { font-size: var(--font-size-4); display: block; } .weight-item .token { cursor: pointer; } .leading-demo { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--size-2); } .leading-demo .box { border: var(--border-width-1) solid var(--neutral-4); border-radius: var(--border-radius-2); padding: var(--size-1); } .leading-demo p { margin: 0 0 var(--size-0); font-size: var(--font-size--1); } .tracking-demo p { margin: var(--size--1) 0; cursor: pointer; } /* ---- spacing ----------------------------------------------------- */ .space-stack { display: flex; flex-direction: column; gap: 2px; margin: var(--size-2) 0; } .space-bar { display: flex; align-items: center; gap: var(--size-1); cursor: pointer; } .space-bar .bar { background: var(--primary-6); border-radius: var(--border-radius-1); height: var(--size-1); } .space-bar .lbl { font-family: var(--font-mono); font-size: var(--font-size--2); color: var(--neutral-1-dim); width: 9rem; flex-shrink: 0; } /* ---- borders / radius -------------------------------------------- */ .box-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: var(--size-2); } .demo-box { aspect-ratio: 1; background: var(--primary-5); display: flex; align-items: flex-end; justify-content: center; padding: var(--size--1); font-family: var(--font-mono); font-size: var(--font-size--2); color: var(--primary-5-on); cursor: pointer; } .border-box { aspect-ratio: 1; background: var(--neutral-2); border: var(--border-width-1) solid var(--neutral-7); border-radius: var(--border-radius-2); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--font-size--2); color: var(--neutral-1-dim); cursor: pointer; } .organic-box { background: var(--secondary-6); } /* ---- elevation --------------------------------------------------- */ .elevation { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--size-3); padding: var(--size-3) var(--size-1); } .elev-item { display: flex; flex-direction: column; align-items: center; gap: var(--size-0); cursor: pointer; } .elev-box { width: 100%; aspect-ratio: 1; background: var(--neutral-2); border-radius: var(--border-radius-3); } /* ---- layout ------------------------------------------------------ */ .zindex-demo { position: relative; height: var(--size-9); margin: var(--size-2) 0; } .z-card { position: absolute; width: var(--size-8); height: var(--size-7); border-radius: var(--border-radius-2); box-shadow: var(--shadow-3); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--font-size--2); color: var(--neutral-1-on); border: var(--border-width-1) solid var(--neutral-6); cursor: pointer; } .aspect-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--size-2); align-items: end; } .aspect-box { width: 100%; background: var(--neutral-variant-5); color: var(--neutral-variant-5-on); border-radius: var(--border-radius-2); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--font-size--2); cursor: pointer; } .toast-copied { position: fixed; bottom: var(--size-3); left: 50%; transform: translateX(-50%); background: var(--neutral-12); color: var(--neutral-1); padding: var(--size-0) var(--size-2); border-radius: var(--border-radius-3); box-shadow: var(--shadow-4); font-size: var(--font-size--1); z-index: var(--zindex-toast); opacity: 0; transition: opacity var(--anim-duration-base) var(--anim-ease-standard); } .toast-copied.show { opacity: 1; } /* section nav collapses behind a toggle on narrow screens; on desktop the toggle is hidden and the list always shows. */ .nav-toggle { display: none; font: inherit; font-size: var(--font-size--1); font-weight: var(--font-weight-semi-bold); width: 100%; text-align: left; background: none; border: none; border-bottom: var(--border-width-1) solid var(--neutral-4); border-radius: 0; color: var(--neutral-1-dim); cursor: pointer; padding: var(--size--1) 0; } .nav-toggle::after { content: " \25be"; } .sidebar.nav-open .nav-toggle::after { content: " \25b4"; } @media (max-width: 60rem) { .shell { grid-template-columns: 1fr; } .sidebar { position: static; height: auto; } .nav-toggle { display: block; } .section-nav { display: none; } .sidebar.nav-open .section-nav { display: block; } } /* ---- block spacing + code demo ----------------------------------- */ .block { margin: var(--size-2) 0; } .code-demo { background: var(--code-bg); border: var(--border-width-1) solid var(--code-border); border-radius: var(--border-radius-3); box-shadow: var(--shadow-2); overflow-x: auto; margin: var(--size-1) 0; } .code-demo pre { margin: 0; padding: var(--size-2); } .code-demo code { font-family: var(--font-mono); font-size: var(--font-size--1); line-height: var(--font-line-height--1); color: var(--code-fg); } /* syntax highlight class map (from .highlight output) */ .code-demo .comment { color: var(--code-comment); } .code-demo .string { color: var(--code-string); } .code-demo .constant.numeric { color: var(--code-number); } .code-demo .constant.character { color: var(--code-string-escape); } .code-demo .keyword { color: var(--code-keyword); } .code-demo .keyword.operator { color: var(--code-operator); } .code-demo .storage, .code-demo .storage.type { color: var(--code-keyword-decl); } .code-demo .entity.name.function { color: var(--code-name-function); } .code-demo .entity.name.type, .code-demo .entity.name.class { color: var(--code-name-class); } .code-demo .support.function { color: var(--code-name-builtin); } .code-demo .variable { color: var(--code-name-variable); } .code-demo .variable.parameter { color: var(--code-name-variable); } .code-demo .punctuation { color: var(--code-fg); } .code-demo .punctuation.definition.string { color: var(--code-string-delim); } .code-demo .punctuation.definition.comment { color: var(--code-comment); } /* ---- compose (interactive transition builder) -------------------- */ .composer { display: grid; grid-template-columns: 1fr 17rem; gap: var(--size-3); align-items: start; margin-top: var(--size-1); } .config { display: flex; flex-direction: column; gap: var(--size-1); } .config-row { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--size-1); align-items: start; } .config-label { font-family: var(--font-mono); font-size: var(--font-size--1); color: var(--neutral-1-dim); padding-top: var(--size--2); } .chips { display: flex; flex-wrap: wrap; gap: var(--size--2); } .chip { font-family: var(--font-mono); font-size: var(--font-size--1); padding: var(--size--2) var(--size-0); border: var(--border-width-1) solid var(--neutral-5); border-radius: var(--border-radius-1); background: var(--neutral-2); color: var(--neutral-1-on); cursor: pointer; } .chip:hover { border-color: var(--primary-6); } .chip.on { background: var(--primary-6); color: var(--primary-6-on); border-color: var(--primary-6); } .stage-col { display: flex; flex-direction: column; gap: var(--size-1); align-items: center; } .stage { width: 100%; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; background: var(--neutral-2); border: var(--border-width-1) solid var(--neutral-4); border-radius: var(--border-radius-2); overflow: hidden; } .thing { width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; background: var(--primary-6); color: var(--primary-6-on); border-radius: var(--border-radius-2); font-family: var(--font-mono); font-size: var(--font-size--2); } .go-btn { display: inline-flex; align-items: center; gap: var(--size--2); font-family: var(--font-mono); font-size: var(--font-size-0); padding: var(--size--1) var(--size-2); border: var(--border-width-1) solid var(--primary-6); border-radius: var(--border-radius-1); background: var(--primary-6); color: var(--primary-6-on); cursor: pointer; } .go-btn:hover { background: var(--primary-7); border-color: var(--primary-7); } .compose-out { margin-top: var(--size-2); } .compose-code-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--size--2); } .compose-out pre { background: var(--code-bg); color: var(--code-fg); border: var(--border-width-1) solid var(--code-border); border-radius: var(--border-radius-1); padding: var(--size-0) var(--size-1); overflow-x: auto; font-family: var(--font-mono); font-size: var(--font-size--1); line-height: var(--font-line-height--1); } @media (max-width: 720px) { .composer { grid-template-columns: 1fr; } } /* compose: demoted numeric duration chips + active toggle */ .chip-num { font-size: var(--font-size--2); padding: var(--size--2) var(--size--1); opacity: 0.65; } .chip-num.on { opacity: 1; } .chip-sep { align-self: center; color: var(--neutral-1-dim); font-size: var(--font-size--2); padding: 0 var(--size--2); text-transform: uppercase; letter-spacing: var(--font-letter-spacing-1); } .go-btn.on { background: var(--neutral-2); color: var(--neutral-1-on); border-color: var(--neutral-5); } /* viewport bounds range bar */ .viewport-range { display: flex; align-items: center; gap: var(--size-1); margin: var(--size-1) 0; max-width: 34rem; } .vp-edge { font-family: var(--font-mono); font-size: var(--font-size--1); color: var(--neutral-1-dim); flex-shrink: 0; } .vp-bar { flex: 1; height: var(--size-2); border-radius: var(--border-radius-5); background: linear-gradient(90deg, var(--neutral-3), var(--primary-5)); display: flex; align-items: center; justify-content: center; color: var(--primary-5-on); font-family: var(--font-mono); font-size: var(--font-size--2); } /* ---- notes / pairing ---------------------------------------------- */ .brand h1 a { color: inherit; text-decoration: none; } .brand h1 a:hover { text-decoration: underline; } .section-nav .nav-page { margin-top: var(--size-0); padding-top: var(--size-0); border-top: var(--border-width-1) solid var(--neutral-4); } /* a run of page links sits under one divider, not one each */ .section-nav .nav-page + .nav-page { margin-top: 0; padding-top: 0; border-top: none; } .section-nav a.current { color: var(--neutral-1-on); font-weight: var(--font-weight-semi-bold); } .pairing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--size-2); margin: var(--size-1) 0; } .pair-card { border: var(--border-width-1) solid var(--neutral-4); border-radius: var(--border-radius-3); overflow: hidden; } /* the sample is the demo: the role's text shown in its own color on the surface. The meta below (usage + token chips) is the quiet caption. */ .pair-sample { position: relative; padding: var(--size-4) var(--size-2) var(--size-3); font-size: var(--font-size-1); } .pair-label { font-weight: var(--font-weight-semi-bold); } .pair-ratio { position: absolute; top: var(--size--1); right: var(--size--1); font-family: var(--font-mono); font-size: var(--font-size--2); padding: 0.15em 0.55em; border-radius: var(--border-radius-5); background: var(--neutral-12); color: var(--neutral-1); } .pair-ratio.bad { background: var(--error-9); color: var(--error-9-on); } .pair-meta { padding: var(--size-1) var(--size-2); display: flex; flex-direction: column; gap: var(--size--2); border-top: var(--border-width-1) solid var(--neutral-3); } .sweep { margin: var(--size-1) 0; } .sweep table { border-collapse: collapse; font-size: var(--font-size--1); } .sweep th, .sweep td { text-align: left; padding: var(--size--1) var(--size-1); border-bottom: var(--border-width-1) solid var(--neutral-3); } .sweep th { font-size: var(--font-size--2); color: var(--neutral-1-dim); text-transform: uppercase; letter-spacing: var(--font-letter-spacing-1); } .sweep td.num { font-family: var(--font-mono); } .sweep td.muted { color: var(--neutral-1-dim); } .ba { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-2); margin: var(--size-2) 0; } .ba figure { margin: 0; } .ba img { width: 100%; border: var(--border-width-1) solid var(--neutral-4); border-radius: var(--border-radius-2); display: block; } .ba figcaption { font-size: var(--font-size--1); color: var(--neutral-1-dim); margin-top: var(--size--1); font-family: var(--font-mono); }