/* Contact page design layer — /company/contact. * * The presentation layer for the `webpages` row whose slug is 'company/contact'. * That row holds every word on the page; Components/Pages/CompanyContactPage.razor * renders it and splices in at a placeholder comment. Nothing in here * is content — no text, no links, no image URLs. See docs/company-contact-redesign.sql. * * Global CSS, linked from App.razor, so the two rules every sibling page sheet * calls out apply here too: * * 1. Nothing confines these rules to this page, so every selector is qct- * prefixed or a descendant of one. No bare element selectors. * 2. @keyframes names are global as well, hence the prefix on those — they must * not collide with the compiled Tailwind bundle or with the qh-, qp-, qco-, * qcp-, qps-, qsm- and qfh- animations the other page sheets declare. * * These rules are unlayered and Tailwind v4's utilities live inside @layer, so * they win regardless of specificity. That is why this page can be styled * entirely from here rather than from utility classes in the CMS textarea: the * bundle the site serves is a prebuilt Next.js artefact, so it contains only the * utilities that build emitted, and a class invented in the textarea would not * exist at runtime. The page this replaces was authored against those utilities * and was already paying for it. * * `boxed-container` IS from the bundle and is used deliberately: it is the * site's own container (max-width and gutters stepping 1200 → 1400 → 1600px), * so this page's content column lines up with the header, the footer and every * other page. Do not replace it with a max-width of this sheet's own. * * THE HERO BUTTONS ARE THE HOME PAGE'S, ON PURPOSE. `.qh-btn` and * `.qh-btn-ghost` come from css/pages/home.css, which is linked globally. They * are the site's primary call-to-action pair and the contact hero now uses the * same two, pointing at the same two destinations, so the pair reads identically * wherever a visitor meets it. Nothing about them is redefined here — the only * qh- rules in this sheet are the two defensive ones at the end of the hero * block, which undo the CMS wrapper's inherited line-height and underline. * Restyling .qh-btn here would change the home page too. * * PALETTE. The logo ramp the pricing, payroll, careers, CPCM and site-map sheets * already share — #4f46e5 (indigo, primary) → #7c3aed (violet) → #a22dea * (magenta-violet). Exactly one surface is dark, the closing "Get Started Today" * band; the hero is a pale violet wash and everything between is white on a very * light tint. The three channel cards keep the three hues the old page gave them * (indigo, violet, blue), because they are three equal-weight cards with no other * way to tell them apart at a glance — but the hue now tints a small icon tile * and a hairline top rule on a white card instead of flooding a pastel gradient * across the whole thing. Each hue is one modifier class setting three custom * properties, so adding a fourth channel means adding three lines here. */ /* ── page shell ───────────────────────────────────────────────────────── * * CompanyContactPage reproduces ContentPage's wrapper so an edit in the Page * HTML textarea behaves here exactly as it does on every other CMS page. That * wrapper carries `style="color:#1a1a1a;line-height:1.8"` inline, which every * stored page depends on and which would otherwise cascade into every heading, * button and card on this one. Both are re-declared here so this page's type * inherits from .qct-page down rather than from the wrapper. Do not remove them. */ .qct-page { color: #14103a; line-height: 1.6; background: #fbfbfe; } /* The inquiry form is a fragment target — the closing band links to * #inquiry-form and so does anything else that deep-links into the form. * is this site's scroll container, and against a scrolling Chromium * ignores the target's own scroll-margin entirely, so the offset has to be * scroll-padding on the box that actually scrolls. Declared on both and * because which one owns the scrollbar depends on CSS that may yet * change; only the real container's value is ever read, so the other is inert * rather than a second offset that would add. :has() keeps it to this page — * the sticky header clearance belongs here, not to every fragment landing on * the site. */ html:has(.qct-page), body:has(.qct-page) { scroll-padding-top: 104px; } /* Visually hidden, still read out. */ .qct-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* The eyebrow pill, used three times: over the hero H1, over the channel list * and over the form heading. One rule rather than three near-copies. */ .qct-eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid #e7e4fb; box-shadow: 0 10px 26px -20px rgba(79, 70, 229, .55); font-size: 13.5px; font-weight: 650; letter-spacing: .01em; color: #4f46e5; line-height: 1; } .qct-eyebrow__dot { width: 7px; height: 7px; border-radius: 999px; flex: 0 0 auto; background: linear-gradient(135deg, #4f46e5, #a22dea); animation: qct-pulse 2.4s ease-in-out infinite; } @keyframes qct-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } } /* ── hero ─────────────────────────────────────────────────────────────── * * A pale violet wash rather than the old two-stop Tailwind gradient: three very * soft radial pools placed off the corners, so the colour has somewhere to come * from instead of sliding evenly across the band. */ .qct-hero { position: relative; overflow: hidden; padding: 84px 0 92px; background: radial-gradient(920px 520px at 8% -12%, rgba(79, 70, 229, .13), transparent 62%), radial-gradient(760px 480px at 96% 6%, rgba(162, 45, 234, .12), transparent 60%), linear-gradient(180deg, #f7f5ff 0%, #fbfbfe 78%); } /* A hairline of the ramp closing the band off from the section below it. */ .qct-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(124, 58, 237, .28) 30%, rgba(162, 45, 234, .28) 70%, transparent); } .qct-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; } .qct-hero__title { margin: 24px 0 0; font-size: clamp(34px, 4.6vw, 58px); font-weight: 800; line-height: 1.08; letter-spacing: -.022em; color: #14103a; } .qct-hero__title span { display: block; } .qct-hero__accent { margin-top: 6px; background: linear-gradient(100deg, #4f46e5, #7c3aed 46%, #a22dea); -webkit-background-clip: text; background-clip: text; color: transparent; } .qct-hero__lede { margin: 20px 0 0; max-width: 560px; font-size: clamp(15.5px, 1.15vw, 17.5px); line-height: 1.68; color: #5b5673; } /* The three reassurances, as a row of icon tiles under the buttons. */ .qct-trust { display: flex; flex-wrap: wrap; gap: 14px 30px; margin: 40px 0 0; padding: 0; list-style: none; } .qct-trust__item { display: flex; align-items: center; gap: 11px; font-size: 14.5px; font-weight: 620; color: #423d5e; } .qct-trust__icon { width: 38px; height: 38px; border-radius: 12px; flex: 0 0 auto; display: grid; place-items: center; color: var(--qct-a, #4f46e5); background: var(--qct-wash, rgba(79, 70, 229, .1)); border: 1px solid var(--qct-edge, rgba(79, 70, 229, .18)); transition: transform .25s cubic-bezier(.2, .8, .2, 1); } .qct-trust__item:hover .qct-trust__icon { transform: translateY(-2px) scale(1.06); } .qct-hero__media { display: none; } /* The image sits in a frame rather than bare on the wash: a white card, a soft * violet glow behind it, and a 1px inner edge so the photo has an end. */ .qct-hero__frame { position: relative; border-radius: 24px; padding: 10px; background: rgba(255, 255, 255, .72); border: 1px solid #ece9fc; box-shadow: 0 40px 90px -50px rgba(52, 32, 120, .55); backdrop-filter: blur(6px); } .qct-hero__frame::before { content: ""; position: absolute; inset: -22% -10% -14%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(124, 58, 237, .3), transparent 72%); filter: blur(38px); } .qct-hero__img { display: block; width: 100%; height: auto; border-radius: 16px; } /* Defensive, and scoped so the home page is untouched: the CMS wrapper's inline * line-height:1.8 would otherwise stretch both buttons, and the bundle's link * styling would underline them inside an article. */ .qct-page .qh-btn, .qct-page .qh-btn-ghost { line-height: 1.2; text-decoration: none; } /* ── contact band ─────────────────────────────────────────────────────── * * Channels on one side, the form on the other. The form leads on a phone and * moves to the right on desktop, which is the order the page has always had: * on a small screen the visitor came to write, not to read three cards first. */ .qct-connect { position: relative; padding: 88px 0 96px; background: radial-gradient(700px 420px at 92% 0%, rgba(79, 70, 229, .07), transparent 60%), #fbfbfe; } .qct-connect__grid { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: start; } .qct-connect__aside { order: 2; } .qct-connect__form { order: 1; } .qct-lede { margin: 18px 0 0; font-size: 15.5px; line-height: 1.7; color: #5b5673; } .qct-channels { display: grid; gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; } /* White card, hairline of the card's hue across the top, hue-tinted icon tile. * The old card put the hue everywhere — a pastel gradient fill and a 4px bar * down the left edge — which made three cards of equal importance read as three * different kinds of thing. */ .qct-channel { position: relative; display: flex; align-items: flex-start; gap: 18px; padding: 22px 24px; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid #eceafb; box-shadow: 0 22px 48px -40px rgba(52, 32, 120, .6); transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s, border-color .28s; } .qct-channel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--qct-a, #4f46e5), var(--qct-b, #a22dea)); opacity: .85; } .qct-channel:hover { transform: translateY(-3px); border-color: var(--qct-edge, rgba(79, 70, 229, .3)); box-shadow: 0 34px 60px -38px var(--qct-glow, rgba(79, 70, 229, .55)); } .qct-channel__icon { width: 50px; height: 50px; border-radius: 15px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--qct-a, #4f46e5), var(--qct-b, #a22dea)); box-shadow: 0 14px 26px -14px var(--qct-glow, rgba(79, 70, 229, .8)); transition: transform .28s cubic-bezier(.2, .8, .2, 1); } .qct-channel:hover .qct-channel__icon { transform: translateY(-2px) rotate(-4deg); } .qct-channel__body { min-width: 0; } .qct-channel__title { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8a84a6; } .qct-channel__value { margin: 5px 0 0; font-size: 17.5px; font-weight: 700; line-height: 1.35; color: #14103a; word-break: break-word; } .qct-channel__link { color: #4f46e5; text-decoration: none; border-bottom: 1px solid rgba(79, 70, 229, .3); transition: color .2s, border-color .2s; } .qct-channel__link:hover { color: #a22dea; border-color: rgba(162, 45, 234, .55); } .qct-channel__note { margin: 7px 0 0; font-size: 13.5px; line-height: 1.55; color: #78738f; } /* The three card hues. Each sets the same four properties, so a fourth channel * is four lines and nothing else in this sheet has to know about it. */ .qct-hue--indigo { --qct-a: #4f46e5; --qct-b: #7c3aed; --qct-wash: rgba(79, 70, 229, .1); --qct-edge: rgba(79, 70, 229, .3); --qct-glow: rgba(79, 70, 229, .55); } .qct-hue--violet { --qct-a: #7c3aed; --qct-b: #a22dea; --qct-wash: rgba(124, 58, 237, .1); --qct-edge: rgba(124, 58, 237, .3); --qct-glow: rgba(124, 58, 237, .55); } .qct-hue--blue { --qct-a: #2563eb; --qct-b: #06b6d4; --qct-wash: rgba(37, 99, 235, .1); --qct-edge: rgba(37, 99, 235, .3); --qct-glow: rgba(37, 99, 235, .5); } /* The response-time note under the channels. Tinted rather than white, so it * reads as a footnote to the list above it and not as a fourth channel. */ .qct-promise { display: flex; align-items: flex-start; gap: 14px; margin: 24px 0 0; padding: 20px 22px; border-radius: 18px; background: linear-gradient(135deg, rgba(79, 70, 229, .07), rgba(162, 45, 234, .07)); border: 1px solid #e9e5fb; } .qct-promise__icon { width: 36px; height: 36px; border-radius: 11px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #4f46e5, #7c3aed); box-shadow: 0 12px 22px -14px rgba(79, 70, 229, .9); } .qct-promise__title { margin: 0; font-size: 14.5px; font-weight: 700; color: #14103a; } .qct-promise__text { margin: 4px 0 0; font-size: 13.5px; line-height: 1.6; color: #625d7c; } /* ── the form card ────────────────────────────────────────────────────── * * The card is styled; the form inside it is not. is the same * component five other pages use and it brings its own field styling, so this * sheet stops at the slot. Restyling its internals from here would change those * pages too — the component is shared, this sheet is global. */ .qct-form__card { position: relative; padding: 30px 26px 32px; border-radius: 24px; background: #fff; border: 1px solid #eceafb; box-shadow: 0 48px 90px -56px rgba(52, 32, 120, .7); } .qct-form__card::before { content: ""; position: absolute; top: 0; left: 26px; right: 26px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, #4f46e5, #7c3aed 52%, #a22dea); } .qct-form__title { margin: 18px 0 0; font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; background: linear-gradient(100deg, #4f46e5, #7c3aed 46%, #a22dea); -webkit-background-clip: text; background-clip: text; color: transparent; } .qct-form__lede { margin: 14px 0 0; font-size: 15.5px; line-height: 1.7; color: #5b5673; } /* Where CompanyContactPage splices in. The margin is this sheet's * only claim on the form: everything inside the slot is the component's. */ .qct-form__slot { margin-top: 26px; } /* ── closing band ─────────────────────────────────────────────────────── * * The one dark surface on the page. * * THE BAND IS DARK BECAUSE THE BUTTONS ON IT ARE. It carries the same * .qh-btn / .qh-btn-ghost pair the hero does, and .qh-btn is a #4f46e5 → #7c3aed * gradient. This band used to run #3f37c9 → #6d28d9 → #a22dea, which is the same * violet at the same lightness — the primary button sat on it and disappeared, * readable only by its shadow. The ramp is now taken down into near-navy, so the * button's own violet is the lightest thing in the area and reads as a raised * object. The hue is unchanged; only the lightness moved. If this band is ever * lightened again, the buttons have to be reconsidered with it. */ .qct-cta { position: relative; overflow: hidden; padding: 86px 0 92px; text-align: center; color: #fff; background: linear-gradient(120deg, #16123f 0%, #241a5c 46%, #3c1c6b 100%); } .qct-cta__orb { position: absolute; width: 460px; height: 460px; border-radius: 50%; background: rgba(255, 255, 255, .12); filter: blur(70px); pointer-events: none; } .qct-cta__orb--a { top: -180px; left: 12%; } .qct-cta__orb--b { bottom: -200px; right: 10%; } .qct-cta__inner { position: relative; z-index: 1; } .qct-cta__title { margin: 0; font-size: clamp(28px, 3.6vw, 46px); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: #fff; } .qct-cta__lede { margin: 18px auto 0; max-width: 640px; font-size: clamp(15.5px, 1.15vw, 18px); line-height: 1.65; color: rgba(255, 255, 255, .86); } /* The band's buttons are the hero's, which are the home page's — same markup, * same two destinations, so the pair reads identically wherever a visitor meets * it. `qh-hero__actions` lays them out left-aligned, which is right in the hero * and wrong here, so the centring is the one thing overridden — scoped under * .qct-cta so the hero and the home page keep their own alignment. Nothing else * about .qh-btn or .qh-btn-ghost is touched anywhere in this sheet. */ .qct-cta .qh-hero__actions { justify-content: center; margin-top: 34px; } /* ── two columns ──────────────────────────────────────────────────────── * * 900px is where the form and the channel list can sit side by side without * either dropping under 380px. Below it everything is one column and the form * is first, which is what the `order` values above already say. */ @media (min-width: 900px) { .qct-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; } .qct-hero__media { display: block; } .qct-connect__grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 52px; } .qct-connect__aside { order: 1; } .qct-connect__form { order: 2; } /* The channel list is shorter than the form, so it rides along rather than * leaving a column of empty page beside a long form. 104px clears the * sticky header, matching the scroll-padding above. */ .qct-connect__sticky { position: sticky; top: 104px; } .qct-form__card { padding: 38px 36px 40px; } .qct-form__card::before { left: 36px; right: 36px; } } @media (min-width: 1200px) { .qct-hero { padding: 100px 0 108px; } } /* Small phones: the trust row and the closing buttons stack rather than * squeezing to two per line. */ @media (max-width: 480px) { .qct-hero { padding: 60px 0 66px; } .qct-connect { padding: 62px 0 68px; } .qct-cta { padding: 62px 0 68px; } .qct-trust { gap: 14px; } .qct-trust__item { width: 100%; } .qct-cta .qh-hero__actions { flex-direction: column; align-items: stretch; } .qct-cta .qh-btn, .qct-cta .qh-btn-ghost { justify-content: center; } .qct-channel { padding: 20px; gap: 14px; } } @media (prefers-reduced-motion: reduce) { .qct-eyebrow__dot { animation: none; } .qct-channel, .qct-channel__icon, .qct-trust__icon { transition: none; } .qct-channel:hover, .qct-channel:hover .qct-channel__icon, .qct-trust__item:hover .qct-trust__icon { transform: none; } }