/* Graphite Mint: the shared theme for the Easy Kit family (T204). Every colour on the page comes from the tokens in :root. No hex or rgb value appears anywhere else in site/. No gradient, blur or light theme. Glow (T212): a soft neon glow, defined once as the --glow-* tokens below. A shadow declaration is only none, a --glow-* token or the inset accent line. Source of every value: the Graphite Mint implementation spec, accent and glow from the updated design board (T212). */ /* ---- fonts: IBM Plex, self-hosted (see fonts/README.txt) --------------- */ @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); } /* ---- tokens ------------------------------------------------------------ */ :root { color-scheme: dark; /* Surfaces */ --bg: #121413; /* page background */ --bg-sunken: #0E100F; /* code blocks, terminal boxes */ --bg-hover: #181B1A; /* hovered rows and nav items */ /* Lines */ --line-subtle: #1F2321; /* sidebar divider */ --line: #262B29; /* section strips, cards, tables */ --line-strong: #2C3230; /* buttons, chips, inputs, code box */ --line-header: #232826; /* header bottom border */ /* Text */ --text-strong: #EAEDEA; /* headings, numbers, active nav */ --text: #DCE0DD; /* body copy */ --text-2: #ABB3AE; /* lede, secondary nav links */ --text-nav: #B5BCB7; /* sidebar links */ --text-muted: #8C9590; /* labels, captions, table meta */ --text-dim: #6E7772; /* comments in code, "/ 11" suffixes */ /* Accent (mint) */ --accent: #3CF5A8; /* neon mint */ --accent-hover: #8AF9CB; /* primary button hover */ --accent-soft: rgba(60, 245, 168, 0.08); /* active nav background */ --accent-line: rgba(60, 245, 168, 0.35); /* highlighted card border */ --link: #7EDDB0; /* plain links stay soft mint */ --link-hover: #B2EDCF; --on-accent: #0E100F; /* text on a mint button */ --dot-idle: #3A413E; /* inactive family-nav dot */ /* Glow (decoration only; prefers-contrast: more turns every one off) */ --glow-text: 0 0 12px rgba(60, 245, 168, 0.35); --glow-button: 0 0 0 1px rgba(60, 245, 168, 0.25), 0 0 18px rgba(60, 245, 168, 0.25); --glow-dot: 0 0 8px var(--accent); --glow-box: 0 0 0 1px rgba(60, 245, 168, 0.20), 0 0 24px rgba(60, 245, 168, 0.12); /* Agent role colors (Easy Kit only, small dots) */ --role-backend: #7AA7E8; --role-infra: #E3A66B; --role-frontend: #B39AE8; --role-qa: #86CFA0; /* Type */ --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* Radius */ --r-xs: 4px; /* chips, version tag */ --r-sm: 6px; /* buttons, nav items, code box, single cards */ --r-md: 8px; /* grouped strips (stat row, step grid) */ /* Spacing (4px base) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 56px; /* Layout */ --header-h: 64px; --sidebar-w: 248px; --content-max: 920px; --page-max: 1280px; /* centered page container (T204 AC 9a) */ } /* ---- base -------------------------------------------------------------- */ * { box-sizing: border-box; } html { background: var(--bg); scroll-behavior: smooth; scrollbar-color: var(--line-strong) transparent; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--text); font: 400 15px/1.6 var(--font-sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; } ::selection { background: rgba(60, 245, 168, 0.25); color: var(--text-strong); } h1, h2, h3, h4, h5, h6 { font-weight: 600; color: var(--text-strong); margin: 0; } h1 { font-size: 44px; line-height: 1.1; letter-spacing: -0.02em; } h2 { font-size: 20px; line-height: 1.3; margin: 0 0 var(--s-4); } h3 { font-size: 15px; line-height: 1.4; } strong, b { font-weight: 600; } p { margin: 0 0 var(--s-3); max-width: 72ch; } ul, ol { max-width: 72ch; } code, pre { font-family: var(--font-mono); } code { font-size: 0.9em; color: var(--text); background: var(--bg-sunken); border-radius: var(--r-xs); padding: 1px 6px; } .eyebrow { font: 400 12.5px/1.4 var(--font-mono); color: var(--accent); margin: 0 0 var(--s-3); text-shadow: var(--glow-text); } /* Links */ a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; } /* Focus: visible on every interactive element */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 40; background: var(--bg-sunken); color: var(--accent); padding: var(--s-3) var(--s-4); border: 1px solid var(--line-strong); border-radius: 0 0 var(--r-sm) 0; } .skip-link:focus { left: 0; } /* ---- components -------------------------------------------------------- */ /* Buttons (min height 40px; 44px on touch) */ .btn { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: var(--r-sm); font: 500 14px var(--font-sans); cursor: pointer; } .btn-primary { background: var(--accent); color: var(--on-accent); border: 0; box-shadow: var(--glow-button); } .btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); text-decoration: none; } .btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--line-strong); } .btn-secondary:hover { background: var(--bg-hover); color: var(--text-strong); text-decoration: none; } /* Code block / terminal (with Copy button) */ .codebox { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 12px 12px 20px; background: var(--bg-sunken); border: 1px solid var(--line-strong); border-radius: var(--r-sm); font: 400 14px/1.6 var(--font-mono); overflow-x: auto; box-shadow: var(--glow-box); } .codebox code { flex: 1 1 auto; min-width: 0; padding: 0; background: none; font-size: inherit; white-space: pre-wrap; overflow-wrap: anywhere; } .codebox .prompt { color: var(--accent); } .codebox .comment { color: var(--text-dim); } .codebox .btn { height: 36px; padding: 0 16px; font-size: 13px; flex: none; } /* Strip: N equal cells inside one bordered box, hairline dividers */ .strip { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; list-style: none; margin: 0; padding: 0; max-width: none; } .strip > * { padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; } .strip > * + * { border-left: 1px solid var(--line); } .strip .num { font: 500 28px/1.1 var(--font-mono); color: var(--accent); text-shadow: var(--glow-text); } .strip .num small { font-size: 17px; color: var(--text-dim); } .strip .label { font-size: 13.5px; color: var(--text-muted); } /* Step grid: a strip whose cells are 16px padded and carry a step number. A 1px gap over a --line backdrop draws the hairlines, so a second row stays divided. */ .strip.steps { gap: 1px; background: var(--line); } .strip.steps > *, .strip.steps > * + * { padding: 16px; background: var(--bg); border-left: 0; } .step-no { font: 400 11.5px var(--font-mono); color: var(--accent); } .step-title { font-size: 15px; font-weight: 600; color: var(--text-strong); } .step-meta { font: 400 11.5px/1.5 var(--font-mono); color: var(--text-muted); } /* Standalone card */ .card { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-sm); display: flex; flex-direction: column; gap: 6px; min-width: 0; } .card.is-highlight { border-color: var(--accent-line); box-shadow: var(--glow-button); } /* at most one per section */ /* Chip (dimension names, tags) */ .chip { display: inline-block; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); font: 400 12px var(--font-mono); color: var(--text-nav); } /* Role dot (Easy Kit agent roles only) */ .dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; } /* Progress bar (scorecard coverage) */ .bar { height: 6px; border-radius: 3px; background: var(--line-header); overflow: hidden; } .bar > span { display: block; height: 100%; background: var(--accent); box-shadow: var(--glow-dot); } /* Tables. A table never scrolls sideways on this page (T167): the wrapper clips its rounded corners, and phones stack each row as a card (see index.html). */ .table-wrap { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); } table { width: 100%; border-collapse: collapse; font-size: 14px; } th { text-align: left; font: 500 12px var(--font-mono); color: var(--text-muted); padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--bg-sunken); } td { padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--text); vertical-align: top; } tr:last-child td { border-bottom: 0; } tbody tr:hover td { background: var(--bg-hover); } /* ---- shared layout: header, family nav, sidebar, main ------------------ */ /* The header background and bottom border span the screen; its content sits in the centered container. */ .site-header { position: sticky; top: 0; z-index: 30; height: var(--header-h); background: var(--bg); border-bottom: 1px solid var(--line-header); } .site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); max-width: var(--page-max); height: 100%; margin: 0 auto; padding: 0 var(--s-7); } .brand-wrap { display: flex; align-items: center; gap: var(--s-3); min-width: 0; } .brand { display: flex; align-items: center; gap: 10px; color: var(--text-strong); font: 600 17px/1 var(--font-sans); white-space: nowrap; } .brand:hover { color: var(--text-strong); text-decoration: none; } .brand svg { width: 26px; height: 26px; flex: none; color: var(--accent); } .tag-version { font: 400 12px var(--font-mono); color: var(--text-muted); border: 1px solid var(--line-strong); border-radius: var(--r-xs); padding: 3px 8px; white-space: nowrap; } .header-actions { display: flex; align-items: center; gap: var(--s-4); } .family-nav { display: flex; align-items: center; gap: 28px; font-size: 14px; } .family-nav a:not(.btn) { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text-2); white-space: nowrap; } .family-nav a:not(.btn):hover { color: var(--text-strong); text-decoration: none; } .family-nav a[aria-current="page"] { color: var(--text-strong); } .family-nav .dot { width: 7px; height: 7px; background: var(--dot-idle); } .family-nav a[aria-current="page"] .dot { background: var(--accent); box-shadow: var(--glow-dot); } .family-nav .btn { height: auto; padding: 8px 14px; } .family-nav-drawer { display: none; } /* Page nav (T231): Home and Docs, on both pages. Mint underline marks the current page. */ .page-nav { display: flex; align-items: center; gap: var(--s-4); padding-right: var(--s-4); border-right: 1px solid var(--line-header); font-size: 14px; } .page-nav a { color: var(--text-2); white-space: nowrap; } .page-nav a:hover { color: var(--text-strong); text-decoration: none; } .page-nav a[aria-current="page"] { color: var(--text-strong); font-weight: 500; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; } /* Two nav groups and the version tag do not fit one header below 1200px: the tag goes first. */ @media (max-width: 1199px) { .tag-version { display: none; } } /* 900-1099px: the page nav, the five family links and the Menu button share one header, so tighten them. */ @media (min-width: 900px) and (max-width: 1099px) { .header-actions { gap: var(--s-3); } .page-nav { gap: var(--s-3); padding-right: var(--s-3); } .family-nav { gap: var(--s-3); font-size: 13px; } .family-nav a:not(.btn) { gap: 6px; } .family-nav .btn { padding: 6px 10px; } } .nav-toggle { display: none; align-items: center; height: 40px; padding: 0 var(--s-4); font: 500 14px var(--font-sans); color: var(--text); background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-sm); cursor: pointer; } .nav-toggle:hover { background: var(--bg-hover); color: var(--text-strong); } .layout { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); max-width: var(--page-max); margin: 0 auto; } .sidebar { position: sticky; top: var(--header-h); align-self: start; height: calc(100vh - var(--header-h)); overflow-y: auto; scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; padding: var(--s-7) var(--s-5); border-right: 1px solid var(--line-subtle); } .sidebar::-webkit-scrollbar { width: 8px; } .sidebar::-webkit-scrollbar-track { background: transparent; } .sidebar::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-xs); } .nav-group-title { font: 400 11.5px/1.4 var(--font-mono); color: var(--text-muted); margin: 0; padding: 0 12px 8px; } .sidebar ul { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 2px; } .sidebar ul:last-child { margin-bottom: 0; } .sidebar a { display: block; padding: 7px 12px; border-radius: var(--r-sm); color: var(--text-nav); font-size: 14px; } .sidebar a:hover { background: var(--bg-hover); color: var(--text-strong); text-decoration: none; } .sidebar a.active { background: var(--accent-soft); color: var(--accent); font-weight: 500; text-shadow: var(--glow-text); box-shadow: inset 0 0 0 1px var(--accent-line); } .content { min-width: 0; padding: var(--s-9) var(--s-10); } .content > * { max-width: var(--content-max); } section { margin: var(--s-8) 0; scroll-margin-top: calc(var(--header-h) + var(--s-4)); } /* 720-1023px: the sidebar becomes the Menu toggle's drawer from the left. Without script it stays in the page flow, so no link is hidden. */ @media (max-width: 1023px) { .layout { grid-template-columns: minmax(0, 1fr); } .site-header-inner { padding: 0 var(--s-4); gap: var(--s-4); } .tag-version { display: none; } .family-nav { gap: var(--s-4); } .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line-subtle); } .js .nav-toggle { display: inline-flex; } .js .sidebar { position: fixed; top: var(--header-h); left: 0; z-index: 25; width: var(--sidebar-w); height: calc(100vh - var(--header-h)); background: var(--bg); border-right: 1px solid var(--line-subtle); border-bottom: 0; } .js .sidebar[data-collapsed="true"] { display: none; } .content { padding: var(--s-7); } } /* Under 900px: the family nav (5 sites since T224) no longer fits the header, so it moves to the top of the drawer; the header keeps glyph, name and Menu. */ @media (max-width: 899px) { .site-header .family-nav { display: none; } .family-nav-drawer { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: var(--s-4); margin-bottom: var(--s-4); border-bottom: 1px solid var(--line-subtle); } .family-nav-drawer a:not(.btn) { padding: 0 12px; } .family-nav-drawer .btn { margin-top: var(--s-2); justify-content: center; } } /* Under 720px: phone padding and type. */ @media (max-width: 719px) { .content { padding: var(--s-6) var(--s-4); } h1 { font-size: 32px; } .strip { --cols: 2; } .strip.steps { --cols: 1; } .strip > * + * { border-left: 0; } .strip > *:nth-child(even) { border-left: 1px solid var(--line); } .strip > *:nth-child(n+3) { border-top: 1px solid var(--line); } .strip.steps > *:nth-child(n) { border: 0; } /* touch targets: 44px minimum */ .btn, .codebox .btn, .family-nav .btn { min-height: 44px; } .nav-toggle { min-height: 44px; } .sidebar a { min-height: 44px; display: flex; align-items: center; } .family-nav a { min-height: 44px; } .page-nav a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; } .brand { min-height: 44px; } } /* ---- flow visuals (T207) ---------------------------------------------------- A diagram leads each heavy section: HTML lists drawn with the tokens above. Arrows are CSS content with an empty alt text, so a screen reader reads the list order only. Hooks differ by shape (solid, dashed, dotted edge) and by a text label, never by colour alone. Mint marks an outcome or the Done node. Role colours mark role nodes. No motion. Every flow stacks at 768px and below; the long ones stack at 1100px. */ .flow-visual { display: flex; flex-direction: column; gap: var(--s-5); margin: var(--s-5) 0; } .flow-visual h3 { margin: var(--s-2) 0 0; } .flow-visual ol, .flow-visual ul { list-style: none; margin: 0; padding: 0; max-width: none; } .flow-visual p { margin: 0; max-width: none; } .flow-visual code { font-size: 0.9em; } details.more { margin: var(--s-4) 0 0; } .flow-node { position: relative; display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; padding: var(--s-3) var(--s-4); background: var(--bg-sunken); border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow-wrap: anywhere; } .flow-node.is-plain { background: transparent; border-style: dashed; } .flow-node.is-outcome { border-color: var(--accent-line); box-shadow: var(--glow-button); } .flow-node.is-outcome > .flow-title { color: var(--accent); } .flow-title { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--text-strong); } .flow-meta { font: 400 12.5px/1.5 var(--font-mono); color: var(--text-muted); } .flow-key { font: 400 12px/1.4 var(--font-mono); color: var(--text-muted); } .flow-edge { font: 500 12px/1.4 var(--font-mono); color: var(--text-muted); } .flow-caption { font-size: 14px; color: var(--text-2); } /* A flow is an ordered list; the arrow between two steps is the ::after of the first. */ .flow { display: flex; gap: 28px; } .flow > li { position: relative; min-width: 0; } .flow-row > li { flex: 1 1 0; } .flow-row > li.is-plain { flex: 0 1 6rem; align-self: center; text-align: center; } .flow-row > li:not(:last-child)::after { content: "\2192" / ""; position: absolute; left: 100%; top: 50%; width: 28px; margin-top: -10px; text-align: center; font-size: 18px; line-height: 20px; color: var(--text-muted); } .flow-col { flex-direction: column; } .flow-col > li { width: min(100%, 36rem); margin: 0 auto; } .flow-col > li.flow-split { width: 100%; } .flow-col > li:not(:last-child)::after { content: "\2193" / ""; position: absolute; top: 100%; left: 0; right: 0; height: 28px; text-align: center; font-size: 18px; line-height: 28px; color: var(--text-muted); } /* Decision node (tracks): a diamond marker, the question, the triggers. */ .flow-head { display: flex; align-items: center; gap: var(--s-3); } .flow-diamond { flex: none; width: 10px; height: 10px; border: 1.5px solid var(--text-2); transform: rotate(45deg); } .flow-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1) var(--s-5); margin-top: var(--s-2); font-size: 14px; } .flow-list > li::before { content: "\2013\00a0" / ""; color: var(--text-muted); } .flow-branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } .flow-branches > li { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; } /* Lane: what stays with the user. */ .flow-lane { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4); border: 1px dashed var(--line-strong); border-radius: var(--r-sm); } .flow-lane-label { font: 500 12.5px/1.4 var(--font-mono); color: var(--text-strong); } .flow-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); } .flow-badge { padding: var(--s-3) var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-sm); color: var(--text-2); font-size: 14px; } .flow-badge strong { color: var(--text-strong); } /* Update map: one row per file state, the state, an arrow, what Update does. */ .flow-map { display: flex; flex-direction: column; gap: var(--s-3); } .flow-map > li { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.7fr); align-items: stretch; } .flow-arrow { display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--text-muted); } .flow-arrow::before { content: "\2192" / ""; } /* Hook lifecycle: phases hold the hooks; the edge shape tells blocking from advisory. */ .flow-row > li.is-phase { flex: 1 1 0; } .flow-items { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); font-size: 14px; } .flow-items > li { padding-left: var(--s-3); border-left: 1px solid var(--line-strong); } .flow-items > li.is-block { border-left: 3px solid var(--text-strong); } .flow-items > li.is-advise { border-left: 2px dashed var(--text-muted); } .flow-items > li.is-inert { border-left: 2px dotted var(--text-muted); } .flow-visual .tag-inert { color: var(--text-muted); } /* Hub (agent roles): the Supervisor in the middle, the four roles around it. */ .flow-roles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: ". n ." "w hub e" ". s ."; gap: 32px; } .flow-roles > li { position: relative; } .flow-roles > li[data-role="hub"] { grid-area: hub; text-align: center; border-color: var(--line-strong); } .flow-roles > li[data-role="backend"] { grid-area: n; } .flow-roles > li[data-role="infra"] { grid-area: w; } .flow-roles > li[data-role="frontend"] { grid-area: e; } .flow-roles > li[data-role="qa"] { grid-area: s; } .flow-roles > li[data-role]:not([data-role="hub"])::after { position: absolute; display: block; text-align: center; font-size: 18px; color: var(--text-muted); } .flow-roles > li[data-role="backend"]::after { content: "\2191" / ""; top: 100%; left: 0; right: 0; height: 32px; line-height: 32px; } .flow-roles > li[data-role="qa"]::after { content: "\2193" / ""; bottom: 100%; left: 0; right: 0; height: 32px; line-height: 32px; } .flow-roles > li[data-role="infra"]::after { content: "\2190" / ""; left: 100%; top: 50%; width: 32px; margin-top: -10px; line-height: 20px; } .flow-roles > li[data-role="frontend"]::after { content: "\2192" / ""; right: 100%; top: 50%; width: 32px; margin-top: -10px; line-height: 20px; } .flow-roles .dot { margin-right: var(--s-2); vertical-align: baseline; } .flow-roles [data-role="backend"] .dot { background: var(--role-backend); } .flow-roles [data-role="infra"] .dot { background: var(--role-infra); } .flow-roles [data-role="frontend"] .dot { background: var(--role-frontend); } .flow-roles [data-role="qa"] .dot { background: var(--role-qa); } /* The six-step and five-part flows stack at 1100px: four columns of a narrow column would not read. */ @media (max-width: 1100px) { .flow-row.is-long { flex-direction: column; } .flow-row.is-long > li:not(:last-child)::after { content: "\2193" / ""; left: 0; right: 0; top: 100%; width: auto; margin: 0; height: 28px; line-height: 28px; } .flow-row.is-long > li.is-plain { flex: 0 0 auto; align-self: stretch; } } @media (max-width: 768px) { .flow-row { flex-direction: column; } .flow-row > li:not(:last-child)::after { content: "\2193" / ""; left: 0; right: 0; top: 100%; width: auto; margin: 0; height: 28px; line-height: 28px; } .flow-row > li.is-plain { flex: 0 0 auto; align-self: stretch; } .flow-branches { grid-template-columns: minmax(0, 1fr); } .flow-list { grid-template-columns: minmax(0, 1fr); } .flow-map > li { grid-template-columns: minmax(0, 1fr); } .flow-arrow { height: 28px; } .flow-arrow::before { content: "\2193" / ""; } .flow-lane { flex-direction: column; align-items: flex-start; } .flow-roles { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; } .flow-roles > li[data-role] { grid-area: auto; } .flow-roles > li[data-role]:not([data-role="hub"])::after { content: none; } .flow-roles > li[data-role="hub"]::after { content: "\2193" / ""; position: absolute; top: 100%; left: 0; right: 0; height: 32px; text-align: center; font-size: 18px; line-height: 32px; color: var(--text-muted); } } /* ---- story page (T231) ------------------------------------------------------- index.html is five short screens: hero, journey, paths, stops, deeper. It reuses the flow classes above. A step's title is its link; the link stretches over the whole node so the node is the click target. Mint stays on the final node of the journey. */ .story { max-width: var(--page-max); margin: 0 auto; } .story > * { max-width: none; } .story section { margin: var(--s-9) 0; } .story .hero { margin-top: var(--s-4); } .story .hero .lead, .story .hero .codebox, .story-actions { max-width: 56rem; } .story-actions { margin: var(--s-5) 0 0; } .story .hero .strip { max-width: 56rem; margin-top: var(--s-6); } .story-note { margin: var(--s-5) 0 0; max-width: none; color: var(--text-2); font-size: 14px; } .flow-desc { font-size: 14px; line-height: 1.5; color: var(--text-2); } .flow-node.is-yours { border-color: var(--text-muted); } .flow-node.is-link:hover { background: var(--bg-hover); } .flow-node.is-link:focus-within { border-color: var(--accent); } .story .flow-title a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; } .story .flow-title a:hover { color: var(--link-hover); text-decoration-color: currentColor; } .story .flow-title a::after { content: ""; position: absolute; inset: 0; } .story-stops { max-width: 60rem; } .story-cards { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); } .story-cards .card { position: relative; } .story-cards h3 { margin: 0; } .story-cards h3 a { color: var(--text-strong); } .story-cards h3 a::after { content: ""; position: absolute; inset: 0; } .story-cards p { margin: 0; font-size: 14px; color: var(--text-2); } .story-cards p a { position: relative; z-index: 1; } .story-footer { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--s-4) var(--s-6); } .story-footer .family-nav-drawer { margin: 0; padding: 0; border-bottom: 0; } @media (max-width: 1100px) { .story-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .story-cards { grid-template-columns: minmax(0, 1fr); } } /* ---- skill flow and strip links (T231: moved from the docs page's