/* download-redesign.css — Connecter Download page (indigo redesign). All rules scoped under body.dc-download. Loaded AFTER redesign-tokens.css. Tokens (fonts, indigo colors, radii) are NOT duplicated here — they are inherited via the `dc-redesign` class added to (see newindex.htm), which puts this page under the `.dc-redesign, .dc-auth` selector scope in redesign-tokens.css. */ /* Base font for the whole page. The `!important` is REQUIRED: a shared global legacy rule (from another app's stylesheet) forces `font-family: designconnected !important` — an icon font with no text glyphs — onto the body, so any text that merely INHERITS from body (the footer copyright text node, the feedback/Contact modal, the mobile nav link text) renders in the browser's serif fallback. Re-declaring with !important wins. This does NOT break icons: every icon on the page (.icn-nav, .cnnctr-icon, the download / info glyphs) declares its own `font-family` (connecter / connecter-new), and a self-declared font always beats an inherited one — verified in-browser. */ body.dc-download { margin: 0; font-family: var(--dc-font-body) !important; } /* ========================================================================== Task 2 — Header reskin (`.dl-header`) The legacy `header` rule in new_style.css is a fixed, 200px-wide vertical icon rail (position:absolute; width:200px) meant for other Connecter pages. `header_connecter.htm` is only ever used by this page (verified — DesktopApp::actionIndex() is its sole caller), so we fully replace that layout here rather than patch it. The header is transparent and sits over the hero aurora painted by `.dl-hero` in Task 3 (this page has no hero background yet, so it renders on a plain page for now — expected). ========================================================================== */ body.dc-download .dl-header { position: relative; z-index: 3; width: auto; /* The legacy `header` rule forces height:170px at <=1024px, which is far taller than this slim flex row and leaves a white band above the aurora (the hero pulls up by the header height). Pin the height to the content so the header always sits within the aurora at every width. */ height: auto; min-height: 0; display: flex; align-items: center; justify-content: space-between; /* Base = mobile: full-width row, logo left + hamburger right at 48px. On desktop (>=1025px) the whole row (logo + nav) is constrained to the centred section content column instead — see the desktop block below. */ padding: 28px 48px; margin: 0; background-color: transparent; } /* White logo: the source asset (logo_suite_blue.svg) is blue; the header sits on a dark aurora so it must read as clean white. Inverting via filter keeps the shared asset untouched and this rule page-scoped. Size override is REQUIRED: the legacy `header .logo img` rule in new_style.css sets height:126px (140px/110px in its media queries), sized for a 200px-wide vertical icon rail — that would render the mark hugely oversized in this slim ~28px-padded header row. This selector out-specifies `header .logo img`, so the mark tracks the ~40px height it has in Hero Image.png. Scoped to `.dl-header__logo` (the top header-row logo only), so the mobile-overlay duplicate (`li.logo-mobile a.logo img`, which has no `dl-header__logo` class) keeps its own larger sizing. */ body.dc-download .dl-header .dl-header__logo img { filter: brightness(0) invert(1); /* Base (mobile) keeps the original 40px so the mobile header stays ~96px and its hero spacing is unchanged. The 2x (80px) enlargement is applied on desktop (>=1025px) only — see the desktop header block — where the layout already changes from the hamburger overlay to the full nav row. */ height: 40px; width: auto; max-height: 40px; } body.dc-download .dl-header .dl-header__logo { margin: 0; display: inline-flex; align-items: center; } /* Mobile hamburger / close icon bars: recolor to white so they read over the dark aurora. Only visible at <=1024px via the existing `.mobile-only` rule in new_style.css — safe to set unconditionally here. */ body.dc-download .dl-header span.icon-hamburger i, body.dc-download .dl-header span.icon-hamburger i:before, body.dc-download .dl-header span.icon-hamburger i:after { background-color: var(--dc-white); } body.dc-download .dl-header span.icon-close-nav:before, body.dc-download .dl-header span.icon-close-nav:after { background-color: var(--dc-white); } /* "NEW" badge on the Connecter 8 nav item. Defined OUTSIDE the desktop media query so it also renders in the <=1024px mobile overlay. Self-colored (brand blue gradient + white text) so it reads on both the dark desktop bar and the light mobile overlay panel. */ body.dc-download .dl-header .dl-header__badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: var(--dc-radius-pill); background: var(--dc-btn-gradient); color: var(--dc-white); font-family: var(--dc-font-body); font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; opacity: 1; } /* Desktop nav row (>1024px matches the breakpoint new_style.css uses to switch into the full-screen mobile overlay nav — leave that overlay's own layout/colors alone below 1025px so the existing hamburger behaviour keeps working unmodified). */ @media screen and (min-width: 1025px) { /* Desktop header: the WHOLE row (logo + nav) is constrained to the centred section content column — the logo aligns to the section content-left and "Get started" to the content-right. Mirrors the sections exactly: their max-width:1600 inner sits inside 64px section padding, so reproducing that here (max-width 1600 + 2*64, box-sizing:border-box, 64px side padding, auto margins) yields the same content box, min(1600px, 100vw - 128px), centred. min-height holds the row tall enough for the 2x (80px) logo. */ body.dc-download .dl-header { max-width: 1728px; margin: 0 auto; padding: 28px 64px; box-sizing: border-box; min-height: 136px; } /* 2x logo (80px, up from the 40px base) — desktop only. Portrait asset (viewBox 140.6x223.1) → ~50px wide, so it barely affects the nav; it does make the header ~136px tall, so the hero -136px pull-up (desktop-scoped) keeps the aurora covering the full header (no white band). */ body.dc-download .dl-header .dl-header__logo img { height: 80px; max-height: 80px; } /* Nav fills from the logo across to the header content-right (= section content-right); the right cluster is pushed there by margin-left:auto on `.nav-right-start`. 64px gap between the logo and the first item. */ body.dc-download .dl-header .dl-header__nav { display: flex; align-items: center; flex: 1 1 auto; margin-left: 64px; } body.dc-download .dl-header .dl-header__nav .nav { display: flex; align-items: center; /* 32px (was 40) keeps all 8 items on one row down to the 1025px desktop floor; below 1025px the mobile overlay takes over. */ gap: 32px; list-style: none; margin: 0; padding: 0; width: 100%; } body.dc-download .dl-header .dl-header__nav .nav li { display: block; /* Hold each item at its natural single-line width so a tight row never shrinks an item enough to wrap its label; at <=1232px the gap/offsets tighten instead (media block after this one). */ flex-shrink: 0; } /* Mobile-only duplicate logo inside the nav — never shown on desktop. */ body.dc-download .dl-header .dl-header__nav .nav li.logo-mobile { display: none; } /* The legacy new_style.css puts clearfix ::before/::after (content:" "; display:table) on `.nav`. In this flex row they blockify into zero-width flex items, so `gap:32px` reserves 32px before the first and after the last real item — that trailing 32px pushes the right cluster (Get started) in from the section content edge. Drop them so the row sits flush with the content column on both sides. Desktop-only (>=1025px) — the <=1024 mobile overlay keeps the legacy clearfix untouched. */ body.dc-download .dl-header .dl-header__nav .nav::before, body.dc-download .dl-header .dl-header__nav .nav::after { display: none; } /* Split the row into a left cluster (Pricing…Connecter 8, by the logo) and a right cluster (Login/Logout · Feedback · Get started). `.nav-right-start` is set on BOTH the login_button and logout_button

in header_connecter.htm; exactly one renders, so it is always the first right-cluster item — `margin-left:auto` on it pushes it and everything after to the right, regardless of how many left items precede it. This replaces an earlier `nth-last-child(3)` selector that hard-coded a 5-

nav; nav items can now be added/removed without touching this rule. */ body.dc-download .dl-header .dl-header__nav .nav li.nav-right-start { margin-left: auto; } body.dc-download .dl-header .dl-header__nav .nav li a { display: inline-flex; align-items: center; position: static; margin: 0; padding: 0; font-family: var(--dc-font-body); font-size: 15px; font-weight: 500; line-height: 1; text-transform: none; /* Multi-word labels ("Customer Stories", "Get started") never break to a second line; the 1025–1232px media block tightens spacing to keep the nowrap row fitting. */ white-space: nowrap; text-decoration: none; color: var(--dc-white); opacity: .92; border-top: none; background-color: transparent; transition: opacity .2s ease-in-out; } body.dc-download .dl-header .dl-header__nav .nav li a:hover, body.dc-download .dl-header .dl-header__nav .nav li a:focus { color: var(--dc-white); opacity: 1; background-color: transparent; } /* Plain text nav — icons from the legacy icon-rail layout are hidden. */ body.dc-download .dl-header .dl-header__nav .nav li a .icn-nav { display: none; } /* Get started — the sole white-outlined rounded pill, transparent fill. (Login/Logout are now plain text links; they inherit the nav-link style above.) */ body.dc-download .dl-header .dl-header__nav .nav li a.nav-cta { padding: 10px 24px; border: 1px solid var(--dc-white); border-radius: var(--dc-radius-pill); opacity: 1; text-align: center; } body.dc-download .dl-header .dl-header__nav .nav li a.nav-cta:hover, body.dc-download .dl-header .dl-header__nav .nav li a.nav-cta:focus { background-color: rgba(255, 255, 255, .12); } } /* ========================================================================== Narrow desktop (1025–1232px): with the whole row constrained to the content column (64px side padding) plus the 2x logo, the 8 nav items + Get-started pill don't fit at the base 64px logo-gap / 32px item-gap once labels are `nowrap`. Tighten both (logo→nav gap 32px, item gap 16px). Below 1100px the page sections drop to 24px side padding, so the header padding follows suit — this keeps the logo aligned to the section content-left AND frees the extra room the tightest widths (down to the 1025px floor) need. Verified no horizontal overflow down to 1025px (below that the mobile overlay takes over). ========================================================================== */ @media screen and (min-width: 1025px) and (max-width: 1232px) { body.dc-download .dl-header .dl-header__nav { margin-left: 32px; } body.dc-download .dl-header .dl-header__nav .nav { gap: 16px; } } @media screen and (min-width: 1025px) and (max-width: 1100px) { body.dc-download .dl-header { padding-left: 24px; padding-right: 24px; } } /* ========================================================================== Task 7 — Mobile nav legibility (<=1024px) Below 1025px, new_style.css swaps `header nav` into a full-screen LIGHT overlay panel (background:#fff; each `header nav .nav li a` row painted on #f4f4f4). The white nav-link color set above is scoped to the >=1025px desktop rule only, so it never reaches this range — the legacy base rule `header .nav li a{color:#444}` is what actually paints the text there. Pin that explicitly to the design token (rather than resting on the legacy fallback) so it can't regress if the legacy rule changes. Also fixes a real bug: the close (X) icon was forced white unconditionally above (correct for the hamburger's resting state over the dark aurora), but the (X) itself is only ever drawn on top of this light open panel — white-on-white was invisible. Icons inside nav links (`.icn-nav`) have no color of their own (icon-font glyphs use `currentColor`), so they follow the link color fix automatically. */ @media screen and (max-width: 1024px) { body.dc-download .dl-header .dl-header__nav .nav li a { color: var(--dc-ink); } body.dc-download .dl-header .dl-header__nav .nav li a:hover, body.dc-download .dl-header .dl-header__nav .nav li a:focus { color: var(--dc-ink); } body.dc-download .dl-header span.icon-close-nav:before, body.dc-download .dl-header span.icon-close-nav:after { background-color: var(--dc-ink); } } /* ========================================================================== Task 3 — Hero (`.dl-hero`) `header` and `.dl-hero` are adjacent siblings under `#main` (index.htm outputs {$header}{$content}{$footer} in normal flow). `.dl-hero` gets a negative top margin equal to the header's own layout height (96px: 28px padding top+bottom + 40px logo, see Task 2) so its aurora background starts at the very top of the page, behind the transparent header, instead of leaving a plain gap above it. `padding-top` then pushes the H1 back down to clear the header row (96px) plus the breathing room visible in Hero Image.png before the title starts. No z-index is needed on `.dl-hero` for the header to stay on top: the header is a positioned element with an explicit z-index (3), which always paints above an in-flow, non-positioned sibling like `.dl-hero`, regardless of DOM order. */ body.dc-download .dl-hero { /* `cover` keeps the aurora spanning the full width at every viewport (no side gaps). Because the hero is shorter than the image's natural height at desktop widths, cover crops vertically — `background-position: center 82%` pulls that crop down so the lighter lower band sits behind the H1/subtitle (keeping the dark title + muted subtitle readable) while the nav keeps a darker blue above. The indigo background-color only shows through the fully transparent nothing — it's a harmless backstop. */ background-image: url("../../../img/cnnctr/download/header-bg.png"); background-repeat: no-repeat; background-position: center 82%; background-size: cover; background-color: var(--dc-indigo-deep); /* Pull the aurora up under the full header height so it covers the header with no white band. Base = the ~96px mobile header (40px logo + 2*28 padding). On desktop the logo is 80px → 136px header, so the pull-up and padding-top are overridden to -136 / 208 in the desktop block below. */ margin-top: -96px; padding: 168px 24px 96px; text-align: center; } /* Desktop (>=1025px): the 2x (80px) logo makes the header 136px, so pull the aurora up the extra 40px and add it back to padding-top, keeping the title's spacing below the taller header and the aurora covering it (no white band). */ @media screen and (min-width: 1025px) { body.dc-download .dl-hero { margin-top: -136px; padding-top: 208px; } } body.dc-download .dl-hero__inner { max-width: 1200px; margin: 0 auto; } body.dc-download .dl-hero__title { margin: 0 0 20px; font-family: var(--dc-font-display); font-size: 76px; font-weight: 800; line-height: 1.08; color: var(--dc-ink); } /* Keep the title on ONE line only where it actually fits: at 76px it renders ~1050px wide, so it needs ≥~1100px of viewport. Below that it must wrap (otherwise it overflows the right edge, e.g. at ~1030px). nowrap is opt-in above the safe width rather than a base rule with narrower overrides. */ @media screen and (min-width: 1120px) { body.dc-download .dl-hero__title { white-space: nowrap; } } body.dc-download .dl-hero__subtitle { margin: 0 0 44px; font-family: var(--dc-font-body); font-size: 23px; line-height: 1.5; color: var(--dc-muted); } body.dc-download .dl-hero__cta { display: flex; align-items: center; justify-content: center; margin: 0 0 32px; } /* Single