/* ===================================================================== IT Rockstars — content pages (Contact / Privacy / Terms) Built on the homepage design tokens defined in styles.css. Loaded AFTER styles.css so it can extend / override safely. ===================================================================== */ /* Local Inter is loaded via assets/inter.css; styles.css already sets the Inter font-family on , so typography matches the homepage. */ /* ---- Navy hero band ---------------------------------------------------- The site-header is position:fixed with a white logo and a gradient that fades to transparent — designed to sit over the dark homepage hero. We give each content page a matching navy band so the header keeps its intended contrast, then the readable content sits on a light surface. */ .page-hero { position: relative; color: var(--paper); padding: 150px clamp(20px, 4vw, 56px) 66px; background: radial-gradient(1100px 460px at 72% -12%, rgba(40, 216, 239, 0.12), transparent 60%), linear-gradient(180deg, var(--navy-1000), var(--navy-900)); overflow: hidden; } .page-hero::after { /* subtle hairline grid, echoes the homepage's technical feel */ content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(80% 120% at 70% 0%, #000 30%, transparent 75%); mask-image: radial-gradient(80% 120% at 70% 0%, #000 30%, transparent 75%); pointer-events: none; } .page-hero-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; } .page-eyebrow { margin: 0 0 14px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); } .page-hero h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.02em; } .page-hero .lede { margin: 18px 0 0; max-width: 640px; font-size: 1.06rem; color: rgba(255, 255, 255, 0.82); } /* ---- Light content surface --------------------------------------------- */ .page-main { background: var(--mist-100); padding: 56px clamp(20px, 4vw, 56px) 88px; } /* Readable article card for long-form legal copy */ .prose { max-width: 840px; margin: 0 auto; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: clamp(28px, 4.2vw, 60px); } .prose > :first-child { margin-top: 0; } .prose h2 { margin: 42px 0 12px; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; color: var(--navy-900); } .prose h3 { margin: 28px 0 10px; font-size: 1.14rem; font-weight: 700; color: var(--navy-900); } .prose p { margin: 0 0 16px; color: var(--muted); } .prose strong { color: var(--ink); font-weight: 700; } .prose a { color: var(--brand-800); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; word-break: break-word; } .prose a:hover { color: var(--brand-600); } .prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; color: var(--muted); } .prose ol ol { list-style: lower-alpha; margin: 8px 0 8px; } .prose li { margin: 7px 0; } .prose hr { border: 0; border-top: 1px solid var(--line); margin: 34px 0; } .prose .last-edited { margin-top: 32px; font-size: 0.9rem; color: var(--steel-500); } /* ---- Contact cards ----------------------------------------------------- */ .contact-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .contact-card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 30px 28px; box-shadow: var(--shadow); } .contact-card .ic { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; background: rgba(40, 216, 239, 0.12); color: var(--brand-800); } .contact-card .ic svg { width: 22px; height: 22px; } .contact-card h3 { margin: 0 0 6px; font-size: 1.02rem; font-weight: 800; color: var(--navy-900); } .contact-card p, .contact-card a { margin: 0; color: var(--muted); font-size: 0.98rem; line-height: 1.55; } .contact-card a { font-weight: 600; } .contact-card a:hover { color: var(--brand-600); } .contact-note { max-width: 1000px; margin: 26px auto 0; font-size: 0.92rem; color: var(--steel-500); text-align: center; } @media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } .page-hero { padding-top: 128px; } } /* ---- Re-enable the footer's Privacy / Terms links ---------------------- On the homepage these are intentionally disabled placeholders. Now that the real pages exist, restore normal link styling. */ .site-footer-links a.site-footer-disabled { opacity: 1; cursor: pointer; } .site-footer-links a.site-footer-disabled:hover { color: var(--paper); }