— so those bands can span the full viewport; each full-bleed section's own `*-inner` class (`.dc-hero-inner`, `.dc-dev-hero-inner`, `.dc-guides-inner`) does the centering instead. Plain (white-bg) sections — .dc-roles, .dc-index, .dc-community, .dc-ref — have no background/border of their own, so they carry max-width + margin directly with no inner wrapper needed. #dc-home-results / #dc-home-default (inline hero/header search, wired by a later task) need NO CSS here: they toggle via the plain [hidden] attribute (browser default `[hidden]{display:none}`), and results reuse the existing .dc-sr* row classes above verbatim — adding an ID rule with a `display` property would out-specificity [hidden] and break the toggle. ========================================================================== */ .dc-home { flex: 1; width: 100%; } /* -------------------------------------------------------------------------- User/docs home — hero RT User Docs B.dc.html lines 50-68 -------------------------------------------------------------------------- */ .dc-hero { background: linear-gradient(150deg,#004a70 0%,#006699 55%,#0d7ab0 100%); color: #eaf4fb; } .dc-hero-inner { max-width: 1240px; margin: 0 auto; padding: 32px 24px 56px; } .dc-hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.14); border-radius: 999px; padding: 5px 13px; font-size: 12.5px; font-weight: 700; margin-bottom: 22px; color: #eaf4fb; } .dc-hero-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #FDB724; flex-shrink: 0; } .dc-hero h1 { font-size: 54px; line-height: 1.03; font-weight: 300; letter-spacing: -1.2px; color: #fff; margin: 0 0 16px; max-width: 820px; } .dc-hero p { font-size: 18px; line-height: 1.55; color: #cfe4f2; max-width: 620px; margin: 0 0 28px; } .dc-hero-search { display: flex; align-items: center; gap: 11px; background: #fff; border-radius: 13px; padding: 0 16px; height: 58px; max-width: 640px; box-shadow: 0 16px 48px rgba(0,20,35,0.30); } .dc-hero-search svg { stroke: #006699; flex-shrink: 0; } .dc-hero-search input { border: 0; outline: 0; background: transparent; font-size: 16px; color: #3a4045; width: 100%; } /* "Press Enter to search" hint under the hero box (the hero searches on Enter, not as-you-type). Light on the docs hero's dark gradient; muted on the dev hero's white background. */ .dc-hero-search-hint { font-size: 12.5px; margin-top: 9px; color: #6b7681; } .dc-hero .dc-hero-search-hint { color: #9fd0ec; } /* Results view: a persistent search bar above the list. Reuses .dc-hero-search but on the white results page, so swap the drop shadow for a border and let it span the results column. The list is width-constrained to match. */ .dc-results-bar { max-width: 760px; margin: 0 auto; padding: 30px 24px 6px; } .dc-results-search { max-width: none; box-shadow: none; border: 1px solid #d4dde3; height: 52px; } #dc-home-results-list { max-width: 760px; margin: 0 auto; padding: 4px 24px 64px; } .dc-hero-chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; } /* "Popular:" label — the leading, unlinked span before the chip links (RT User Docs B.dc.html line 62) — dimmer than the hero body text. */ .dc-hero-chips > span:first-child { font-size: 13px; color: #9fd0ec; font-weight: 600; } .dc-chip { font-size: 13px; font-weight: 500; color: #eaf4fb; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.20); border-radius: 999px; padding: 6px 13px; } .dc-chip:hover { background: rgba(255,255,255,0.24); } /* -------------------------------------------------------------------------- User/docs home — role cards ("Start with your role") RT User Docs B.dc.html lines 88-104 -------------------------------------------------------------------------- */ .dc-roles { max-width: 1240px; margin: 0 auto; padding: 44px 24px 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 16px; } .dc-role { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; border: 1px solid #e2e8ec; border-radius: 14px; background: #fff; transition: transform .12s ease; } .dc-role:hover { border-color: #006699; transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,102,153,0.12); } .dc-role-num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: #E5F6FF; color: #00537d; font-weight: 800; font-size: 14px; } .dc-role-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #006699; } .dc-role-title { font-size: 19px; font-weight: 700; color: #1c2b36; letter-spacing: -0.3px; } .dc-role-desc { font-size: 13.5px; line-height: 1.5; color: #5a6068; } .dc-role-cta { margin-top: 4px; font-size: 13.5px; font-weight: 700; color: #006699; } /* -------------------------------------------------------------------------- User/docs home — full documentation index (DocTree-driven category grid) RT User Docs B.dc.html lines 106-125 -------------------------------------------------------------------------- */ .dc-index { max-width: 1240px; margin: 32px auto 0; padding: 40px 24px 16px; border-top: 2px solid #E5F6FF; } .dc-index h2 { font-size: 24px; font-weight: 400; letter-spacing: -0.5px; color: #1c2b36; margin: 0 0 4px; } .dc-index p { font-size: 14px; color: #78828c; margin: 0 0 24px; } .dc-index-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px,1fr)); gap: 14px 40px; } /* Category cell. cellStyle ternary: base padding always; >25 pages additionally spans the full row width and gets the top rule (mirrors the prototype's componentDidMount()-driven cellStyle/linksStyle in the JS block). */ .dc-index-group { padding: 6px 0 18px; } .dc-index-group.wide { grid-column: 1 / -1; border-top: 1px solid #e9eff3; padding-top: 16px; } .dc-index-group h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 2px solid #006699; transition: border-color .15s ease; font-size: 15px; font-weight: 700; color: #1c2b36; letter-spacing: -0.2px; } .dc-index-group h3:hover { border-bottom-color: #FDB724; } .dc-index-count { margin-left: auto; font-size: 12px; color: #99a2ab; font-weight: 600; } /* linksStyle ternary: >25 pages -> multi-column grid (fixed 210px track, per the prototype's JS for ALL wide categories); else a plain single column. */ .dc-index-links { display: flex; flex-direction: column; } .dc-index-group.wide .dc-index-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap: 0 12px; } .dc-index-links a { padding: 6px 8px; margin: 0 -8px; border-radius: 7px; font-size: 14px; color: #5a6068; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dc-index-links a:hover { background: #E5F6FF; color: #006699; } /* -------------------------------------------------------------------------- User/docs home — community strip RT User Docs B.dc.html lines 128-139 -------------------------------------------------------------------------- */ .dc-community { max-width: 1240px; margin: 28px auto 72px; padding: 28px 32px; background: #E5F6FF; border: 1px solid #BFE3F5; border-radius: 16px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .dc-community h2 { font-size: 19px; font-weight: 500; color: #1c2b36; margin: 0; flex: 1; min-width: 220px; } .dc-community-links { display: flex; gap: 10px; flex-wrap: wrap; } .dc-community-links a { background: #fff; border: 1px solid #BFE3F5; border-radius: 999px; padding: 9px 16px; font-size: 13.5px; font-weight: 600; color: #00537d; } .dc-community-links a:hover { border-color: #006699; } /* -------------------------------------------------------------------------- Dev home — slim hero + curl panel RT Developer Portal B.dc.html lines 66-87 -------------------------------------------------------------------------- */ .dc-dev-hero { border-bottom: 1px solid #e2e8ec; } .dc-dev-hero-inner { max-width: 1280px; margin: 0 auto; padding: 44px 24px 36px; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 40px; align-items: center; } /* .dc-hero-badge is reused here with a fully different (light, monospace, dot-less) treatment — RT Developer Portal B.dc.html line 69. */ .dc-dev-hero .dc-hero-badge { display: inline-block; font-family: ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 600; color: #7a5200; background: #FFF1D3; border-radius: 6px; padding: 4px 10px; margin-bottom: 14px; } .dc-dev-hero .dc-hero-badge::before { content: none; } .dc-dev-hero h1 { font-size: 40px; line-height: 1.06; font-weight: 300; letter-spacing: -0.9px; color: #1c2b36; margin: 0 0 10px; } .dc-dev-hero p { font-size: 15.5px; line-height: 1.6; color: #666666; margin: 0 0 18px; max-width: 480px; } /* Quick chips reuse .dc-hero-chips/.dc-chip; dev row is tighter + monospace. margin-top gives the pills room below the "Press Enter to search" hint. */ .dc-dev-hero .dc-hero-chips { gap: 8px; margin-top: 20px; font-family: ui-monospace, Menlo, monospace; } /* "Popular:" label: the default (#9fd0ec, for the docs hero's dark gradient) is invisible on the dev hero's white background — recolor it. */ .dc-dev-hero .dc-hero-chips > span:first-child { color: #6b7681; } .dc-dev-hero .dc-chip { font-size: 12.5px; font-weight: 600; color: #00537d; background: #E5F6FF; border: 1px solid #BFE3F5; border-radius: 6px; padding: 6px 11px; } .dc-dev-hero .dc-chip:hover { background: #E5F6FF; border-color: #006699; } /* Dark curl panel — RT Developer Portal B.dc.html lines 78-85. Single class hook per the brief; the title-bar row and the two syntax-highlight tones inside

 are addressed structurally (no extra class names needed). */
.dc-code { background: #0e1c26; border-radius: 12px; overflow: hidden; }
.dc-code > div:first-child { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid #1f3547; }
.dc-code > div:first-child span { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: #7fa6bb; }
.dc-code pre { margin: 0; padding: 16px 18px; font-size: 12.5px; line-height: 1.7; color: #d7e6ef; overflow-x: auto; }
.dc-code pre span:first-of-type { color: #3FB4F2; }
.dc-code pre span:not(:first-of-type) { color: #FDB724; }

/* --------------------------------------------------------------------------
   Dev home — dense reference index
   RT Developer Portal B.dc.html lines 89-111
   Unlike the user index, EVERY category here is "wide" (the dev prototype's
   refGroups always computes the grid-column:1/-1 cellStyle), so .dc-ref-group
   has no separate .wide modifier.
   -------------------------------------------------------------------------- */

.dc-ref {
  max-width: 1280px; margin: 0 auto;
  padding: 40px 24px 8px; scroll-margin-top: 76px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 8px 32px;
}

/* RTIR user home reuses .dc-ref for its reference band, preceded by a styled
   heading section. Tighten the seam between the two so the heading sits close
   to the first group instead of stacking two 40px top-paddings. */
.dc-ref-intro { padding-bottom: 0; }
.dc-ref-intro p { margin-bottom: 0; }
.dc-ref-intro + .dc-ref { padding-top: 14px; }

.dc-ref-group { grid-column: 1 / -1; padding: 6px 0 18px; }
.dc-ref-group + .dc-ref-group { border-top: 1px solid #e9eff3; padding-top: 16px; }

.dc-ref-group h3 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-size: 13px; font-weight: 700; color: #1c2b36; text-transform: uppercase; letter-spacing: 0.5px;
}
.dc-ref-group h3::before { content: ""; width: 7px; height: 7px; background: #FDB724; flex-shrink: 0; }
.dc-ref-count { margin-left: auto; font-size: 11.5px; color: #99a2ab; font-family: ui-monospace, Menlo, monospace; }

/* linksStyle: the prototype varies minmax(220px..360px,1fr) per category
   (longer module/path names get a wider track); ported as one representative
   value (300px, the per-category median: 220/220/300/300/340/360) rather
   than a per-category modifier class — see Task 2 report. */
.dc-ref-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 0 14px; }
.dc-ref-links a { padding: 5px 7px; margin: 0 -7px; border-radius: 5px; font-size: 13px; color: #5a6068; font-family: ui-monospace, Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-ref-links a:hover { background: #E5F6FF; color: #006699; }

/* Over-long reference groups (e.g. "Modules — Core", ~175 items) render
   truncated: show the first 40 links, hide the rest behind the .dc-ref-more
   toggle until docs.js adds .expanded. The n+41 boundary MUST match the >40
   threshold in templates/page.html. */
.dc-ref-group.truncatable:not(.expanded) .dc-ref-links a:nth-child(n+41) { display: none; }
.dc-ref-more { display: inline-block; margin-top: 10px; background: none; border: 0; cursor: pointer; padding: 4px 0; font-size: 12.5px; font-weight: 700; color: #006699; font-family: inherit; }
.dc-ref-more:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Dev home — guides strip
   RT Developer Portal B.dc.html lines 113-141
   -------------------------------------------------------------------------- */

.dc-guides {
  background: #f7fafc; border-top: 1px solid #e2e8ec; border-bottom: 1px solid #e2e8ec;
  margin-top: 28px; scroll-margin-top: 76px;
}

.dc-guides-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 34px 24px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px,1fr)); gap: 30px;
}

.dc-guide-col { display: flex; flex-direction: column; scroll-margin-top: 76px; }
.dc-guide-col h3 { font-size: 14px; font-weight: 700; color: #1c2b36; margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.dc-guide-col a { padding: 6px 0; border-bottom: 1px solid #e9eff3; font-size: 13.5px; font-weight: 500; color: #3a4045; }
.dc-guide-col a:hover { color: #006699; }

/* --------------------------------------------------------------------------
   Responsive: the dev slim hero is a fixed 2-column grid (unlike the
   auto-fit/auto-fill grids elsewhere on the home pages, which already reflow
   to one column on narrow viewports without help). Not in either prototype
   (both are fixed-width design previews); added for the same reason Task 8
   added the 1024px breakpoint to the 3-column article layout.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .dc-dev-hero-inner { grid-template-columns: 1fr; }

  /* Header reflows to stacked rows and stops being sticky (a multi-row sticky
     bar would eat too much of a phone screen). DOM order is
     logo, nav, spacer, search, version, devlink; `order` rearranges it to:
       row 1: logo .......... version  devlink
       row 2: search (full width)
       row 3: nav (full width, horizontally scrollable) */
  .dc-header { position: static; }
  /* Nothing overlaps an anchor landing once the header scrolls away, so drop the
     offset rather than leave a 76px gap above the target. */
  .pod [id] { scroll-margin-top: 0; }
  .dc-header-inner { height: auto; flex-wrap: wrap; padding: 10px 16px; gap: 10px 12px; }
  .dc-header-spacer { display: none; }
  .dc-header-logo { order: 1; margin-right: auto; }
  .dc-version { order: 2; }
  .dc-devlink  { order: 3; }
  .dc-search {
    order: 4; flex: 0 0 100%; width: 100%; min-width: 0; max-width: none; height: 40px;
  }
  .dc-nav {
    order: 5; flex: 0 0 100%; width: 100%; margin-left: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .dc-nav a { flex-shrink: 0; white-space: nowrap; }

  /* Content-page search results: full-width overlay under the static header. */
  .dc-search-panel { top: 8px; left: 4vw; right: 4vw; width: auto; max-height: calc(100vh - 24px); }

  /* Hero scales down. */
  .dc-hero-inner { padding: 28px 20px 40px; }
  .dc-hero h1 { font-size: 40px; letter-spacing: -0.8px; }
  .dc-hero p  { font-size: 16px; }

  /* Home bands: trim the 24px side gutters to 16px (grids already reflow). */
  .dc-roles     { padding: 28px 16px 4px; }
  .dc-index     { padding: 30px 16px 12px; margin-top: 20px; }
  .dc-ref       { padding-left: 16px; padding-right: 16px; }
  .dc-community { padding-left: 16px; padding-right: 16px; }
  .dc-guides-inner { padding-left: 16px; padding-right: 16px; }
}

/* Phones: finer scaling below the tablet reflow. */
@media (max-width: 560px) {
  .dc-hero-inner { padding: 22px 16px 30px; }
  .dc-hero h1 { font-size: 29px; line-height: 1.08; }
  .dc-hero-badge { margin-bottom: 16px; }
  .dc-hero-search { height: 52px; padding: 0 14px; }
  .dc-hero-search input { font-size: 15px; }

  .dc-article { padding: 22px 16px 56px; }
  .dc-prevnext { grid-template-columns: 1fr; }   /* stack prev/next */

  .dc-roles { padding-top: 22px; }
  .dc-index h2 { font-size: 21px; }
}