/* ============================================ SUPERPOWER FOR AI - GUIDES STYLES ============================================ Layered on top of the site-wide /style.css, which is loaded first and owns all the design tokens (--primary, --bg-card, --text-*, --radius-*, fonts). Nothing here redefines those tokens globally, so the guides automatically follow the site's light/dark theming and the shared theme toggle. Source of truth: guides/src/guides.css -> built to /Guides/guides.css. ============================================ */ /* The also carries `brand-neutral`, which style.css uses to supply the Superpower logo ramp (--brand-ramp / --hub-c*) in place of Gemini's purple. That covers the navbar wordmark, the footer hover effects and ::selection. What is left are the three brand TOKENS the rest of style.css reads, remapped here onto the ramp so every remaining Gemini colour follows automatically: plain links, .btn-primary, .nav-links a.nav-active, .guides-hero-title. Guides-scoped on purpose, so product pages keep their own theming. */ /* --- PAGE SURFACE: MATCHED TO GEMINI --- Measured off a live Gemini conversation (an existing chat, not the zero state, whose hero gradient is not representative): light background #fdfcfc chat text #1f1f1f dark background #0f0f0f chat text #e3e3e3 Only the background is set here. The site's --text-primary is ALREADY #1f1f1f / #e3e3e3, so guides text matches Gemini's without an override. The old page was #f0f4f8 / #131314: a blue-grey in light mode, which read as a distinctly different product next to the thing the guides are about. Guides-scoped on purpose. --bg-page is shared with all 20 product marketing pages, and those keep their own palette; this is only the reading surface. Knock-on, accepted: --bg-card is #ffffff, so in light mode cards and tables now sit 2 points off the page and read by their 1px border rather than by their fill. That is flatter, and closer to how Gemini itself looks. Dark mode gains separation instead, #1e1f20 on #0f0f0f rather than on #131314. */ .guides-body { --bg-page: #fdfcfc; /* ⚠ THE BACKGROUND MUST NOT BE TRANSITIONED ON THIS ELEMENT. Everywhere else on the site, --bg-page is INHERITED from :root / html.dark-theme and body just reads it, so flipping the theme class on repaints body normally. The guides overrides --bg-page on body ITSELF, which is also the element carrying the background-color transition, and in that arrangement Chrome never applies the new value: the background stays on the old theme's colour indefinitely while the text switches, leaving dark-on-dark until a reload. A literal `background-color` here does not help; the transition is the problem, not the var. `transition: none` snaps it correct instantly, which is how this was diagnosed. So the guides drops background-color from the inherited transition list and lets the page swap instantly. --hub-c0..c4 (the brand ramp) and color keep animating, so the toggle still feels animated. If you ever restore the background fade, move these overrides onto instead of body. */ transition-property: --hub-c0, --hub-c1, --hub-c2, --hub-c3, --hub-c4, color; --gradient-brand: var(--brand-ramp); --gradient-brand-text: var(--brand-ramp); /* The ramp's purple, matching ::selection. Drives every var(--primary) use. */ --primary: #A05FD6; --primary-hover: #8B4BC2; --guide-accent: var(--primary); --guide-cta-bg: var(--gradient-brand); --guide-cta-fg: #ffffff; --guide-measure: 720px; } html.dark-theme .guides-body { --bg-page: #0f0f0f; --primary: #B57CE8; --primary-hover: #C795EE; } /* Narrow reading column, still centered inside the shared .container. */ .container--narrow { max-width: var(--guide-measure); } /* Wider than the site's 1200px default. Three cards in the standard container leave more gutter than they need, so the guide grid gets a little more room and the cards grow with it. Guides index only: every other page keeps --max-width so nothing else on the site shifts. */ .container--wide { max-width: 1360px; } /* --- GUIDES INDEX HERO --- */ .guides-hero { padding-top: calc(var(--nav-height) + 60px); padding-bottom: 24px; text-align: center; } /* The hero needs more room than the reading measure --narrow otherwise gives it. "Getting more from NotebookLM" is 28 characters at 2.75rem and wants roughly 690px; 720px minus the shared .container's 24px of side padding leaves only 672px, so it wrapped to two lines while the other five archives stayed on one — exactly the reflow the matched copy lengths exist to avoid. Only the h1 can use the extra width: it is width: fit-content, so shorter titles still centre unchanged, the subtitle keeps its own 620px cap, and the squiggle underneath is 95% of the h1 box and so widens with it on its own. */ .guides-hero .container--narrow { max-width: 820px; } /* Also carries .hero-title (for the squiggle underline), so this overrides its size. width: fit-content makes the squiggle hug the text instead of spanning the full column — same trick the hub uses. */ .guides-hero-title { font-family: var(--font-sans); font-size: 2.75rem; font-weight: 700; line-height: 1.15; width: fit-content; max-width: 100%; margin: 16px auto 12px; background: var(--gradient-brand-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Every archive's intro is written to land on three lines here (620px at 1.1rem is roughly 70 characters a line, and the copy in products.json is held to a 160-200 character band). line-height is pinned rather than inherited so that band maps to a predictable height, and min-height reserves the three lines outright: if a future edit or a narrower font ever pushes one intro to two lines, the tab bar and the grid below still don't jump when a reader switches filters. Raising the band means raising this to match. */ .guides-hero-subtitle { font-size: 1.1rem; line-height: 1.6; min-height: 4.8em; color: var(--text-secondary); max-width: 620px; margin: 0 auto; } .hero-badge-icon { width: 18px; height: 18px; border-radius: 4px; } /* --- GUIDE LIST --- */ .guides-list-section { padding-top: 24px; } /* Three across on desktop, two on tablet, one on phone. minmax(0,1fr) rather than 1fr so a long unbroken word can't force a column wider than its share. */ .guide-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 0; margin: 0; } /* The
  • is the grid cell; stretching it and the card inside keeps every card in a row the same height regardless of title or description length. */ .guide-list-item { display: flex; } /* padding-top: 0 because the thumbnail is flush to the top edge; the inner padding resumes below it. */ .guide-card { position: relative; display: flex; flex-direction: column; width: 100%; padding: 0 24px 22px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } /* Bleeds to the card edges via negative side margins, so the image is full width while the text below keeps its padding. max-width: none is REQUIRED — style.css has a global `img { max-width: 100% }` that otherwise clamps this to the card's CONTENT width (card minus padding). The negative margin still shifts it left, so the image ends up flush left and exactly one padding-width short on the right. aspect-ratio matches the 1200x630 source, so nothing is cropped and one image serves both the card and the Open Graph preview. object-fit: cover is the safety net for images supplied at another ratio. */ .guide-card-image { width: calc(100% + 48px); max-width: none; margin: 0 -24px 18px; aspect-ratio: 1200 / 630; object-fit: cover; display: block; background: var(--bg-feature); border-bottom: 1px solid var(--border); } .guide-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--guide-accent); } /* The whole card is clickable: the title link is stretched over it. Everything else that must stay selectable/clickable sits above via z-index. */ .guide-card-title a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; } /* Footer row spanning the full card: product pinned to the left edge, reading time to the right. margin-top:auto pins the row to the bottom of the card so it lines up across a row of cards of unequal text length. Flex + space-between, which is right for exactly two items. It was a grid (`auto 1fr auto 1fr auto`, then `auto 1fr auto`) while a date and separator dots shared the row: a middle item has to sit optically centred regardless of how wide the outer two are, and space-between cannot do that. With the dots and the date gone there is no middle item, so the grid bought nothing. If a third item is ever added back, go back to a grid with explicit gap columns rather than adding a third flex child. */ .guide-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 4px; font-size: 1.05rem; color: var(--text-muted); } /* The reading time is short and fixed, so it never gives ground: any squeeze in the narrow two-column band just above 768px is absorbed by the product label, which already ellipsises (min-width:0 + overflow below). Without this the flex default shrinks both and "8 min" can wrap mid-phrase. */ .guide-card-meta .guide-meta-item { flex-shrink: 0; } /* Icons scale with the row rather than with the smaller default used in the guide header and the related rail, and are deliberately a good bit larger than the cap height of the text beside them. */ .guide-card-meta .guide-meta-icon { width: 26px; height: 26px; } /* Rendered even when a guide has no product, so the grid columns stay aligned. */ .guide-card-product { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-weight: 500; color: var(--guide-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ONE rule for this. There were previously two identical selectors, a 24px one above and a leftover 16px one below; the later won and silently pinned the logo at 16px no matter what the other said. */ .guide-card-product img { width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0; } /* Clamped so a long title can't push the rest of the card out of alignment with its row. Three lines is enough for any reasonable headline. */ .guide-card-title { font-family: var(--font-sans); font-size: 1.2rem; font-weight: 700; line-height: 1.3; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .guide-card-title a { color: var(--text-primary); text-decoration: none; } .guide-card:hover .guide-card-title a { color: var(--guide-accent); } /* Clamp raised from 4 to 5 now that the "Read guide" line is gone and the freed row belongs to the description. */ .guide-card-desc { color: var(--text-secondary); font-size: 1rem; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .guide-list-empty { text-align: center; color: var(--text-secondary); padding: 40px 0 80px; } /* --- GUIDE PAGE LAYOUT --- Article plus a related-guides rail. The article column works out at roughly 840px, wider than the old 720px single-column measure. Below 1080px the rail drops beneath the article, where it lays its cards out in a row instead. */ .container--guide { max-width: 1280px; } .guide-layout > .container { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; } /* --- GUIDE PAGE --- */ .guide-header { padding-top: calc(var(--nav-height) + 56px); padding-bottom: 8px; } .guide-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 18px; } /* "Guides" here is the section wordmark, not a product link, so it takes the brand ramp on every guide regardless of which extension the guide is about. Otherwise it inherits var(--primary) and reads as a flat purple. */ .guide-breadcrumb a { background-image: var(--brand-ramp); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 500; } .guide-breadcrumb span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; } /* Product pill and the date / read time on one line, wrapping on narrow screens. Everything is vertically centred against the pill. */ .guide-topline { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 20px; } .guide-product-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid var(--guide-accent); background: color-mix(in srgb, var(--guide-accent) 12%, transparent); color: var(--guide-accent); font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; line-height: 1; text-decoration: none; } .guide-product-badge:hover { text-decoration: none; background: color-mix(in srgb, var(--guide-accent) 20%, transparent); } .guide-product-badge img { width: 20px; height: 20px; border-radius: 4px; } .guide-title { font-family: var(--font-sans); font-size: 2.6rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--text-primary); margin-bottom: 16px; } .guide-standfirst { font-size: 1.15rem; color: var(--text-secondary); margin-bottom: 0; } /* Divider under the whole header block (was under .guide-meta, which has since moved up next to the product pill). */ .guide-header { padding-bottom: 28px; border-bottom: 1px solid var(--border); } /* Lives inside .guide-topline now, so it carries no padding or rule of its own; the divider moved to .guide-header. */ .guide-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 0.88rem; color: var(--text-muted); } .guide-meta-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .guide-meta-icon { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.85; } /* display: block matters here, it is not tidying. An inline img sits on a text baseline and carries a few px of descender space beneath it; the dark twin below is shown with display: block, so leaving the light one inline would nudge the page on every theme toggle. */ .guide-hero-image { display: block; width: 100%; border-radius: var(--radius-md); border: 1px solid var(--border); margin: 32px 0 8px; } /* --- SCREENSHOT SEPARATION --- A 1px border is not enough to hold a screenshot off the page, and the numbers say why. The page is #f0f4f8 (luma 243) light and #131314 (luma 19) dark. A light UI capture averages ~250 and a dark one ~20, so in the theme that matches it the image is within about 6 luma of the paper behind it and simply dissolves. The fix is an edge that does not depend on the fill: light: a soft shadow. Elevation separates two surfaces of the same tone, which is exactly the case a border cannot solve. dark: shadows are invisible on a near-black page, so the edge has to come from the border instead, lifted well above --border (#444746) to read against a dark capture. Applies to the hero and to figures; cards get their own treatment below. */ .guide-hero-image, .guide-figure img { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 20px rgba(0, 0, 0, 0.12); } html.dark-theme .guide-hero-image, html.dark-theme .guide-figure img { box-shadow: none; border-color: rgba(255, 255, 255, 0.22); } /* Card and rail thumbnails sit ON a card (--bg-card is #ffffff light), so a near-white screenshot merges into the card and the card reads as having no image at all. The existing border-bottom is the only edge, and it only covers one side. A hairline ring drawn INSIDE the image handles the other three without adding a second outline next to the card's own border, which is what a real border would do at these negative margins. */ .guide-card-image, .related-card-image { box-shadow: inset 0 0 0 1px var(--border); } html.dark-theme .guide-card-image, html.dark-theme .related-card-image { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); } /* --- GUIDE BODY TYPOGRAPHY --- */ /* --- READING CONTRAST --- The standfirst only. Body text is NOT overridden here: the site's --text-primary is already #1f1f1f / #e3e3e3, which is exactly what Gemini paints its own chat text (measured in a live conversation, see the .guides-body background note above), so it already matches by default. The standfirst was --text-secondary at 5.5:1 on the page background, the lightest thing in the reading column despite sitting directly under the title at 1.15rem. Gemini has no equivalent element to copy, so it takes a darker grey than the site default: 5.5:1 -> 9.9:1 light, 10.9:1 -> 12.9:1 dark. Scoped to .guide-layout, not global: --text-secondary is shared with all 20 product pages and this is a reading-page decision. */ .guide-layout { --text-secondary: #3c4043; } html.dark-theme .guide-layout { --text-secondary: #d9dcda; } .guide-body { padding: 36px 0 8px; font-size: 1.06rem; line-height: 1.75; color: var(--text-primary); } .guide-body > *:first-child { margin-top: 0; } .guide-body p, .guide-body ul, .guide-body ol, .guide-body blockquote, .guide-body pre, .guide-table { margin-bottom: 24px; } .guide-body h2 { font-family: var(--font-sans); font-size: 1.75rem; font-weight: 700; line-height: 1.25; margin: 48px 0 16px; color: var(--text-primary); } .guide-body h3 { font-family: var(--font-sans); font-size: 1.3rem; font-weight: 600; margin: 36px 0 12px; color: var(--text-primary); } .guide-body h4 { font-family: var(--font-sans); font-size: 1.08rem; font-weight: 600; margin: 28px 0 10px; color: var(--text-primary); } .guide-body a { color: var(--guide-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .guide-body ul, .guide-body ol { padding-left: 24px; } .guide-body li { margin-bottom: 8px; } .guide-body li > ul, .guide-body li > ol { margin: 8px 0 0; } .guide-body img { display: block; width: 100%; border-radius: var(--radius-md); border: 1px solid var(--border); margin: 28px 0; } .guide-body blockquote { padding: 4px 0 4px 20px; border-left: 3px solid var(--guide-accent); color: var(--text-secondary); font-style: italic; } .guide-body blockquote p:last-child { margin-bottom: 0; } .guide-body hr { border: 0; border-top: 1px solid var(--border); margin: 44px 0; } .guide-body code { font-family: 'SF Mono', 'Consolas', 'Roboto Mono', ui-monospace, monospace; font-size: 0.88em; padding: 2px 6px; border-radius: 6px; background: var(--bg-feature); border: 1px solid var(--border); } .guide-body pre { padding: 18px 20px; border-radius: var(--radius-sm); background: var(--bg-feature); border: 1px solid var(--border); overflow-x: auto; line-height: 1.55; } /* Inside a block the chip styling would double up on the 
     box. */
.guide-body pre code {
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.86rem;
}

/* --- TABLES ---
   The markdown-it rule in eleventy.config.js wraps every guide table in
   .guide-table. The wrapper owns the scrolling and the outer frame; the table
   inside is a plain table again. It used to carry `display: block` itself to
   get overflow-x, which scrolls but also stops it laying out as a table: a
   block box shrinks to its content, so a two-column table sat at content width
   in the middle of the reading column and width: 100% could not override it. */
.guide-table {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  /* Guide content sits straight on the page background, so the table needs its
     own surface to sit on. Without this the rows are the page colour and only
     the border separates the table from the prose around it. */
  background: var(--bg-card);
  /* Any non-visible overflow clips to the radius, which is what rounds off the
     header fill at the top and the last row at the bottom. */
}

.guide-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.guide-body th,
.guide-body td {
  padding: 12px 16px;
  text-align: left;
  /* Row rules only. A full 1px grid reads as a spreadsheet and boxes in every
     cell; rows are the direction a reader actually scans, and the wrapper
     already draws the outer edge. */
  border-bottom: 1px solid var(--border);
}

/* The wrapper's own border is the bottom edge, so the last row must not draw a
   second line just inside it. */
.guide-body tbody tr:last-child td {
  border-bottom: 0;
}

/* The header wears the guide's own product colour, mixed down into the table
   surface: Gemini lavender, Claude terracotta, NotebookLM green, and the ramp
   purple on a cross-product guide.

   It used to be `background: var(--bg-feature)`, which is INVISIBLE in light
   mode. Guide content sits directly on the page, and in the light theme
   --bg-feature and --bg-page are the same #f0f4f8, so the header had literally
   zero contrast; only the dark theme, where those two tokens differ, looked
   right. Mixing toward --bg-card instead keeps one declaration correct in both
   themes, because --bg-card is the surface the header actually sits on.
   NOTE: .guide-body pre and inline code still use --bg-feature and have the
   same blind spot in light mode. */
.guide-body th {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--guide-accent) 14%, var(--bg-card));
  /* A tinted rule under the head, stronger than the row separators, so the
     header still reads as a header on a product whose accent is near-neutral
     (ChatGPT's is black in light mode and white in dark). */
  border-bottom-color: color-mix(in srgb, var(--guide-accent) 35%, var(--border));
  /* Headers are short labels; letting them wrap while the cells below stay on
     one line makes the head look ragged. The wrapper scrolls if that pushes
     the table wider than the column. */
  white-space: nowrap;
}

/* Zebra and hover are grey at low alpha rather than a theme token, so a single
   value works in both themes: it darkens a light row and lightens a dark one,
   and stays subtle against --bg-feature in the header. */
.guide-body tbody tr:nth-child(even) {
  background: rgba(128, 128, 128, 0.05);
}

.guide-body tbody tr:hover {
  background: rgba(128, 128, 128, 0.09);
}

/* --- FIGURES (the {% figure %} shortcode) ---
   Three widths: default sits in the text column, --wide spills past it, --full
   goes edge to edge. Both breakouts collapse back to column width on narrow
   screens, where there is no room to spill into. */
.guide-figure {
  margin: 32px 0;
}

/* Beats .guide-body img, which sets its own margin and would double up. */
.guide-figure img {
  display: block;
  width: 100%;
  margin: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

/* --- THEME-PAIRED SCREENSHOTS ---
   A product screenshot captured in one theme looks wrong on a page in the
   other, so a figure can carry both and show the matching one. The site theme
   toggle drives `html.dark-theme` (website/script.js), so this follows the
   toggle, NOT prefers-color-scheme: a  media query would ignore the
   button and strand a reader who overrode their OS setting.
   Both files are fetched, so pair images only where the swap is worth the
   bytes. Keep them the same pixel size or the figure reflows on toggle.

   Deliberately NOT scoped to .guide. The same pair of classes has to work on the
   hero, on the grid cards on /Guides/, and on the "Related guides" rail, and that
   rail is an