/* ───────────────────────────────────────────────────────────────────────── GigFinder Connect — section-scoped styles layered on top of the public styles.css. Everything is gated behind .connect-page (set on by connect_header.asp) so the public site is never affected. ───────────────────────────────────────────────────────────────────────── */ /* NOTE: the Connect pages now use the shared public header (includes/header.asp), so the old Connect-specific nav overrides (full-bleed bar, taller --nav-h, and the enlarged Connect logo) were removed -- the top nav renders identically to the rest of the public site. Only the page CONTENT styling below is retained, gated behind .connect-page which the pages still set on . */ /* NOTE: the Sign Up / Login CTAs used to carry `margin-right: 28px` here to keep them off the far right edge. That margin is gone: it made the CTA column wider than the logo column and pushed the centered .nav-links off true center by half its width. styles.css now gives .site-nav .container a symmetric 52px desktop padding, which clears both edges without breaking centering. */ /* Free-trial starburst on the Connect home hero: reuses the public .hero-starburst art (styles.css), placed in-flow just under the heading and horizontally centered. position:relative (not static) so its ::before/::after star layers still anchor to it. */ .connect-page .hero-starburst { position: relative; /* Offset via top/left, NOT transform: the .hero-starburst pulse animation (styles.css) animates `transform`, which would override any translate here. */ top: -34px; left: -18px; right: auto; margin: 0; display: block; flex: 0 0 auto; } /* Hire Freelancers dropdown: a highlighted "Post a Project" row on a light gradient, then category rows with the member count aligned to the right. */ .cx-hire-menu { min-width: 264px; max-height: 72vh; overflow-y: auto; } .cx-hire-menu .cx-hire-post { background: linear-gradient(135deg, #F8FBFF, #EFF6FF); font-weight: 600; color: var(--primary); } .cx-hire-menu .cx-hire-post:hover { background: linear-gradient(135deg, #DBEAFE, #BFDBFE); } .cx-hire-menu .cx-hire-cat { display: flex; align-items: center; gap: 14px; padding-left: 30px; /* indent categories under the "Popular Categories" heading */ } /* Counters hidden for now (still queried; drives the >=9 filter + ordering). */ .cx-hire-menu .cx-hire-cat-count { display: none; } .cx-hire-menu .cx-hire-heading { padding: 10px 16px 5px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #9CA3AF; } /* Sticky footer: on short pages (e.g. the stub sections) the footer was floating mid-viewport. Make the body a full-height flex column so the main content grows to fill and pushes the footer to the bottom. The fixed nav and the hidden login modal are out of flow, so only .page-content and .site-footer participate. .brand-bg grows too, so its background fills the gap instead of leaving bare page behind it. */ body.connect-page { display: flex; flex-direction: column; min-height: 100vh; } .connect-page .page-content { flex: 1 0 auto; display: flex; flex-direction: column; } .connect-page .page-content > .brand-bg { flex: 1 0 auto; } .connect-page .site-footer { flex-shrink: 0; } /* Connect uses its own background image. Same darken + purple-tint layer stack as the public .brand-bg (styles.css) so the white section text stays legible; only the underlying image swaps to background-connect.png. */ .connect-page .brand-bg { background: /* Same uniform stack as .brand-bg / body.home-bg in styles.css (0.33 black + flat 0.69 navy); only the underlying image differs. */ linear-gradient(rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.33)), linear-gradient(rgba(17, 24, 39, 0.69), rgba(17, 24, 39, 0.69)), url('/images/background-connect.png') center/cover no-repeat; background-attachment: fixed; } /* styles.css strips the border off .section-tag inside a .brand-card (it sits on light-lavender instead of the dark backdrop). On Connect the "Our Purpose" pill reads flat without one, so put it back. */ .connect-page .brand-bg .brand-card .section-tag { border: 1px solid var(--primary); }