/*------------------------------------*\ Homepage v2 - "the site as a topology" Loaded only on / (partials/home/head.hbs). Every rule is scoped under .gg-home, except the body.home-template block that re-points the theme's colour variables so the shared header and footer read on the dark page. The palette follows the site's appearance switcher: theme-init.hbs puts .dark on before first paint, so :not(.dark) is the light page. --amber is only ever a fill, so it holds on both; --amber-text is the readable version for text and lines, and --ink / --ink-text are what sit on an amber or near-black fill. \*------------------------------------*/ .gg-home { --bg: #0E1116; --band: #121720; --card: #161B22; --card-active: #1A2130; --line: #222832; --line-strong: #2E3541; --term-bg: #07090C; --text: #E8E6E1; --body: #B8BFC8; --muted: #9AA3AE; --faint: #8A939E; --amber: #F2A65A; --amber-hover: #F7C28C; --amber-text: var(--amber); --amber-text-hover: var(--amber-hover); --cyan: #7CC8CC; --ink: var(--bg); --ink-text: var(--text); --serif: 'Instrument Serif', Georgia, serif; --sans: 'IBM Plex Sans', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; color: var(--body); background: var(--bg); font-family: var(--sans); font-size: 16px; line-height: 1.6; font-variant-ligatures: none; } html:not(.dark) .gg-home { --bg: #FFFFFF; --band: #F5F7F9; --card: #F2F4F7; --card-active: #E8F1F3; --line: #E2E6EB; --line-strong: #C4CBD4; --term-bg: #F5F7F9; --text: #12161C; --body: #414A57; --muted: #5A6472; --faint: #616A78; --amber-hover: #E89442; --amber-text: #8A5214; --amber-text-hover: #6B3F0D; --cyan: #10686F; --ink: #12161C; --ink-text: #FFFFFF; } /* With JS off, theme-init never runs and never sets data-platform, so the shared chrome falls back to the OS preference. Follow it here too. */ @media (prefers-color-scheme: dark) { html:not([data-platform]) .gg-home { --bg: #0E1116; --band: #121720; --card: #161B22; --card-active: #1A2130; --line: #222832; --line-strong: #2E3541; --term-bg: #07090C; --text: #E8E6E1; --body: #B8BFC8; --muted: #9AA3AE; --faint: #8A939E; --amber-hover: #F7C28C; --amber-text: var(--amber); --amber-text-hover: var(--amber-hover); --cyan: #7CC8CC; --ink: var(--bg); --ink-text: var(--text); } } /* Shared chrome on the dark page: header, footer, body. The light page keeps the theme's own chrome colours. */ html.dark body.home-template { --color-text-primary: #E8E6E1; --color-text-secondary: #9AA3AE; --color-border: #222832; --background-primary: #0E1116; --background-secondary: #161B22; --background-hero: #121720; --card-shadow: rgba(0, 0, 0, .5); --color-theme-accent: #F2A65A; color-scheme: dark; background-color: #0E1116; } body.home-template .c-search-trigger__placeholder { font-size: 0; } body.home-template .c-search-trigger__placeholder::before { content: 'Search errors'; font-size: var(--font-size-xsmall, 14px); } /* The homepage has its own signup card; skip the footer's duplicate. */ body.home-template .c-footer__subscribe { display: none; } /* Base */ .gg-home *, .gg-home *::before, .gg-home *::after { box-sizing: border-box; } .gg-home a { color: inherit; text-decoration: none; } .gg-home :focus-visible { outline: 2px solid var(--amber-text); outline-offset: 2px; } .gg-home .gg-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .gg-home .gg-container { width: 100%; max-width: 1440px; margin: 0 auto; padding-inline: 20px; } @media (min-width: 768px) { .gg-home .gg-container { padding-inline: 40px; } } @media (min-width: 1280px) { .gg-home .gg-container { padding-inline: 80px; } } .gg-home .gg-kicker { margin: 0 0 12px; font: 400 13px/1.4 var(--mono); color: var(--cyan); } .gg-home .gg-h2 { margin: 0; font-family: var(--serif); font-size: clamp(36px, 2.6vw + 22px, 56px); font-weight: 400; line-height: 1.05; letter-spacing: -.005em; color: var(--text); } .gg-home .gg-h2--sm { font-size: clamp(30px, 1.4vw + 22px, 40px); } .gg-home .gg-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; font: 600 15px/1.2 var(--sans); color: var(--ink); background: var(--amber); border: 0; border-radius: 8px; transition: background-color .15s ease; } .gg-home .gg-btn:hover { background: var(--amber-hover); } /* 3.1 Hero */ .gg-home .gg-hero { padding: 64px 0 72px; } .gg-home .gg-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: end; } @media (min-width: 1024px) { .gg-home .gg-hero { padding: 96px 0 88px; } .gg-home .gg-hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; } .gg-home .gg-hero__main { grid-column: 1 / span 9; } .gg-home .gg-library { grid-column: 10 / span 3; } } .gg-home .gg-eyebrow { margin: 0 0 24px; font: 500 13px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--amber-text); } .gg-home .gg-hero__title { margin: 0 0 28px; font-family: var(--serif); font-size: clamp(48px, 5.4vw + 18px, 96px); font-weight: 400; line-height: .98; letter-spacing: -.01em; color: var(--text); } .gg-home .gg-hero__title em { font-style: italic; color: var(--amber-text); } .gg-home .gg-hero__lede { max-width: 760px; margin: 0; font-size: 18px; line-height: 1.6; color: var(--body); } @media (min-width: 768px) { .gg-home .gg-hero__lede { font-size: 20px; } } .gg-home .gg-library { padding: 20px 24px; font: 400 14px/1.5 var(--mono); border: 1px solid var(--line); border-radius: 12px; } .gg-home .gg-library__title { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .gg-home .gg-library__list { margin: 0; } .gg-home .gg-library__row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid var(--line); } .gg-home .gg-library__row dt { color: var(--body); } .gg-home .gg-library__row dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; } /* 3.2 Topology - mobile first: stacked lists, start panel as accordion */ .gg-home .gg-topo { padding: 56px 0; background: var(--band); border-block: 1px solid var(--line); } @media (min-width: 768px) { .gg-home .gg-topo { padding: 72px 0; } } .gg-home .gg-topo__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 40px; } .gg-home .gg-topo__note { margin: 0; font: 400 13px/1.4 var(--mono); color: var(--muted); } .gg-home .gg-diagram { display: flex; flex-direction: column; gap: 24px; } .gg-home .gg-diagram__svg { display: none; } .gg-home .gg-edge { fill: none; stroke: var(--line-strong); stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: stroke .15s ease; } .gg-home .gg-edge.is-active { stroke: var(--amber-text); stroke-width: 2.5; } .gg-home .flow { stroke-dasharray: 6 6; animation: gg-dash .9s linear infinite; } @keyframes gg-dash { to { stroke-dashoffset: -12; } } @media (prefers-reduced-motion: reduce) { .gg-home .flow { animation: none; } } .gg-home .gg-producer { padding: 20px; background: var(--bg); border: 1px solid var(--amber); border-radius: 14px; } .gg-home .gg-producer__label { margin: 0 0 8px; font: 400 12px/1.3 var(--mono); color: var(--amber-text); } .gg-home .gg-producer__name { margin: 0 0 10px; font: 400 30px/1.1 var(--serif); color: var(--text); } .gg-home .gg-producer__text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--body); } .gg-home .gg-topics__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } .gg-home .gg-topic { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 13px 17px; color: var(--text); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 12px; transition: border-color .15s ease, background-color .15s ease; } .gg-home .gg-topic:hover { border-color: var(--cyan); } .gg-home .gg-topic.is-active { padding: 12px 16px; background: var(--card-active); border: 2px solid var(--cyan); } .gg-home .gg-topic__label { font: 400 12px/1.3 var(--mono); color: var(--cyan); } .gg-home .gg-topic__name { font: 600 19px/1.25 var(--sans); } .gg-home .gg-topic__sub { font-size: 14px; line-height: 1.4; color: var(--muted); } .gg-home .gg-personas { display: flex; flex-direction: column; gap: 12px; } .gg-home .gg-persona { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; width: 100%; min-height: 64px; margin: 0; padding: 12px 20px; font: inherit; text-align: left; color: var(--text); background: var(--card); border: 1px solid var(--line-strong); border-radius: 12px; cursor: pointer; appearance: none; transition: border-color .15s ease, background-color .15s ease; } .gg-home .gg-persona:hover { border-color: var(--amber); } .gg-home .gg-persona[aria-pressed='true'] { padding: 11px 19px; color: var(--ink); background: var(--amber); border: 2px solid var(--amber); } .gg-home .gg-persona__label { font: 400 12px/1.3 var(--mono); color: var(--muted); } .gg-home .gg-persona[aria-pressed='true'] .gg-persona__label { color: var(--ink); } .gg-home .gg-persona__text { font: 600 17px/1.3 var(--sans); } /* Start-here panel */ .gg-home .gg-start { margin-top: 24px; padding: 24px 20px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 16px; } .gg-home .gg-personas .gg-start { margin-top: 0; } @media (min-width: 768px) { .gg-home .gg-start { padding: 32px; } } .gg-home .gg-route { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } .gg-home .gg-route[hidden] { display: none; } @media (min-width: 900px) { .gg-home .gg-route { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 40px; } .gg-home .gg-route__intro { grid-column: 1 / span 5; } .gg-home .gg-route__links { grid-column: 6 / span 7; } } .gg-home .gg-route__kicker { margin: 0 0 12px; font: 500 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--amber-text); } .gg-home .gg-route__title { margin: 0 0 12px; font-family: var(--serif); font-size: clamp(30px, 1.6vw + 20px, 40px); font-weight: 400; line-height: 1.05; color: var(--text); } .gg-home .gg-route__desc { margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: var(--body); } .gg-home .gg-route__links { align-self: center; margin: 0; padding: 0; list-style: none; } .gg-home .gg-route__link { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; padding: 14px 4px; color: var(--text); border-bottom: 1px solid var(--line); } .gg-home .gg-route__links li:last-child .gg-route__link { border-bottom: 0; } .gg-home .gg-route__kind { grid-column: 1; font: 400 12px/1.3 var(--mono); color: var(--cyan); } .gg-home .gg-route__name { grid-column: 1; font-size: 18px; font-weight: 500; line-height: 1.35; } .gg-home .gg-route__arrow { grid-column: 2; grid-row: 1 / span 2; font: 400 18px/1 var(--mono); color: var(--amber-text); transition: transform .15s ease; } .gg-home .gg-route__link:hover .gg-route__name { text-decoration: underline; text-decoration-color: var(--amber-text); text-underline-offset: 3px; } .gg-home .gg-route__link:hover .gg-route__arrow { transform: translateX(3px); } /* Topology desktop: absolute 1280x640 diagram. Horizontal positions are % of 1280 so the SVG (preserveAspectRatio=none) stays aligned when the content box is narrower; nodes are centred on each path's y. */ @media (min-width: 1100px) { .gg-home .gg-diagram { display: block; position: relative; max-width: 1280px; height: 640px; margin: 0 auto; } .gg-home .gg-diagram__svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .gg-home .gg-producer, .gg-home .gg-topics__item, .gg-home .gg-persona { position: absolute; transform: translateY(-50%); } .gg-home .gg-producer { left: 0; top: 320px; width: 21.875%; min-height: 200px; display: flex; flex-direction: column; justify-content: center; } .gg-home .gg-topics__list, .gg-home .gg-personas { display: block; } .gg-home .gg-topics__item { left: 35.9375%; width: 28.125%; } .gg-home .gg-topic { min-height: 100px; padding-block: 8px; } .gg-home .gg-topic.is-active { padding-block: 7px; } .gg-home .gg-persona { left: 78.125%; width: 21.875%; min-height: 100px; } .gg-home .gg-topics__item:nth-child(1), .gg-home .gg-persona:nth-of-type(1) { top: 50px; } .gg-home .gg-topics__item:nth-child(2), .gg-home .gg-persona:nth-of-type(2) { top: 185px; } .gg-home .gg-topics__item:nth-child(3), .gg-home .gg-persona:nth-of-type(3) { top: 320px; } .gg-home .gg-topics__item:nth-child(4), .gg-home .gg-persona:nth-of-type(4) { top: 455px; } .gg-home .gg-topics__item:nth-child(5), .gg-home .gg-persona:nth-of-type(5) { top: 590px; } .gg-home .gg-start { margin-top: 40px; } } /* 3.3 Directory */ .gg-home .gg-dir { padding: 72px 0 32px; } .gg-home .gg-dir .gg-h2 { margin-bottom: 32px; } .gg-home .gg-table-wrap { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .gg-home .gg-table { width: 100%; max-width: none; margin: 0; border-collapse: collapse; background: transparent; } .gg-home .gg-table th, .gg-home .gg-table td { padding: 18px 20px; font-size: 14px; line-height: 1.5; text-align: left; vertical-align: middle; white-space: normal; color: var(--body); border: 0; border-bottom: 1px solid var(--line); } .gg-home .gg-table thead th { padding-block: 14px; font: 400 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); background: var(--band); } .gg-home .gg-table tbody tr { position: relative; transition: background-color .15s ease; } .gg-home .gg-table tbody tr:last-child > * { border-bottom: 0; } .gg-home .gg-table tbody tr:hover { background: var(--card); } .gg-home .gg-table tbody th { font-size: 15px; font-weight: 600; color: var(--text); } .gg-home .gg-table__link::after { content: ''; position: absolute; inset: 0; } .gg-home .gg-table__link:focus-visible { outline: 0; } .gg-home .gg-table__link:focus-visible::after { outline: 2px solid var(--amber-text); outline-offset: -2px; } .gg-home .gg-table td.gg-table__path { font: 400 13px/1.4 var(--mono); white-space: nowrap; color: var(--amber-text); } .gg-home .gg-table__extra { position: relative; z-index: 1; text-decoration: underline; text-underline-offset: 3px; } @media (min-width: 768px) { .gg-home .gg-table tbody th { width: 20%; } .gg-home .gg-table td:nth-of-type(1) { width: 32%; } .gg-home .gg-table td:nth-of-type(2) { width: 26%; } } @media (max-width: 767px) { .gg-home .gg-table, .gg-home .gg-table tbody, .gg-home .gg-table tr, .gg-home .gg-table th, .gg-home .gg-table td { display: block; } .gg-home .gg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .gg-home .gg-table tbody tr { padding: 16px 20px; border-bottom: 1px solid var(--line); } .gg-home .gg-table tbody tr:last-child { border-bottom: 0; } .gg-home .gg-table tbody th, .gg-home .gg-table td { padding: 4px 0; border: 0; } .gg-home .gg-table tbody th { padding-bottom: 8px; font-size: 17px; } .gg-home .gg-table td::before { content: attr(data-label); display: block; font: 400 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } } /* 3.4 Logbook */ .gg-home .gg-log { padding: 64px 0 32px; } .gg-home .gg-log .gg-h2 { margin-bottom: 28px; } .gg-home .gg-term { background: var(--term-bg); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .gg-home .gg-term__head { margin: 0; padding: 14px 20px; font: 400 13px/1.4 var(--mono); color: var(--body); border-bottom: 1px solid var(--line); } .gg-home .gg-term__prompt { color: var(--cyan); } .gg-home .gg-term__rows { margin: 0; padding: 0; list-style: none; } .gg-home .gg-log-row { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; padding: 12px 20px; border-bottom: 1px solid var(--line); transition: background-color .15s ease; } .gg-home .gg-log-row:hover { background: var(--card); } .gg-home .gg-log-date { font: 400 13px/1.5 var(--mono); color: var(--faint); } .gg-home .gg-log-area { font: 400 13px/1.5 var(--mono); color: var(--cyan); } .gg-home .gg-log-title { grid-column: 1 / -1; font-size: 15px; line-height: 1.5; color: var(--text); } .gg-home .gg-log-row:hover .gg-log-title { text-decoration: underline; text-decoration-color: var(--amber-text); text-underline-offset: 3px; } @media (min-width: 768px) { .gg-home .gg-log-row { grid-template-columns: 130px 110px minmax(0, 1fr); align-items: baseline; } .gg-home .gg-log-title { grid-column: auto; } } .gg-home .gg-term__more { display: inline-block; padding: 14px 20px; font: 400 13px/1.4 var(--mono); color: var(--amber-text); } .gg-home .gg-term__more:hover { color: var(--amber-text-hover); } /* 3.5 About + subscribe */ .gg-home .gg-about { padding: 64px 0 96px; } .gg-home .gg-about__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } @media (min-width: 900px) { .gg-home .gg-about__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .gg-home .gg-about__card { display: flex; align-items: flex-start; gap: 24px; padding: 28px; border: 1px solid var(--line); border-radius: 16px; } .gg-home .gg-about__photo { flex-shrink: 0; display: block; width: 88px; height: 88px; object-fit: cover; background: var(--card); border: 1px solid var(--line-strong); border-radius: 50%; } .gg-home .gg-about__title { margin: 0 0 10px; font: 400 32px/1.1 var(--serif); color: var(--text); } .gg-home .gg-about__bio { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--body); } .gg-home .gg-about__more { font-weight: 500; color: var(--amber-text); } .gg-home .gg-about__more:hover { color: var(--amber-text-hover); } @media (max-width: 479px) { .gg-home .gg-about__card { flex-direction: column; } } .gg-home .gg-sub { padding: 28px; color: var(--ink); background: var(--amber); border-radius: 16px; } .gg-home .gg-sub :focus-visible { outline-color: var(--ink); } .gg-home .gg-sub__title { margin: 0 0 20px; font: 400 clamp(28px, 1.2vw + 20px, 36px)/1.1 var(--serif); color: var(--ink); } .gg-home .gg-sub__note { margin: 0; font-size: 16px; } .gg-home .gg-sub__label { display: block; margin-bottom: 8px; font: 500 12px/1.3 var(--mono); color: var(--ink); } .gg-home .gg-sub__row { display: flex; flex-wrap: wrap; gap: 10px; } .gg-home .gg-sub__input { flex: 1 1 220px; width: auto; min-height: 48px; margin: 0; padding: 12px 16px; font: 400 15px/1.4 var(--sans); color: var(--ink); background: #FBEAD6; border: 1px solid rgba(14, 17, 22, .35); border-radius: 8px; } .gg-home .gg-sub__input::placeholder { color: #5C4A38; opacity: 1; } .gg-home .gg-sub__btn { flex: 0 0 auto; min-height: 48px; margin: 0; padding: 0 22px; font: 600 15px/1 var(--sans); color: var(--ink-text); background: var(--ink); border: 0; border-radius: 8px; cursor: pointer; transition: background-color .15s ease; } .gg-home .gg-sub__btn:hover { background: #1C222C; } .gg-home .gg-sub__form.loading .gg-sub__btn { opacity: .7; cursor: progress; } .gg-home .gg-sub__status p { margin: 12px 0 0; font-size: 14px; font-weight: 500; } .gg-home .gg-sub__form.success .gg-success, .gg-home .gg-sub__form.error .gg-error { display: block; } .gg-home .gg-sub__form.success .gg-sub__row { display: none; }