/* ========================================================================== services-2027.css — page-specific rules for /services -------------------------------------------------------------------------- Loaded after css/site-2027.css, which supplies the token layer, the chrome, and the shared vocabulary (.cy27-container, .cy27-phero, .cy27-jump, .cy27-rows/.cy27-row, .cy27-card, .cy27-shot, .cy27-btn, .cy27-beam). Only what the shared file cannot express lives here: - the hero's price-summary aside - the five alternating service blocks - the tuning the shared row/jump primitives need in this context - the process split and the final CTA panel No importance overrides, no bare element resets — every selector is anchored on a .cy27- class so it cannot outrank the shared layer by accident. ========================================================================== */ /* -------------------------------------------------------------------------- Global smooth-scroll is set on in the shared file. Anchor jumps on this page are its main consumer, so gate it here for reduced motion. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* -------------------------------------------------------------------------- 1. Hero — copy left, a price summary in hairline rows right -------------------------------------------------------------------------- */ .cy27-svchero .cy27-phero__inner { padding-bottom: 90px; } .cy27-svchero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: end; } .cy27-svchero__copy .cy27-phero__eyebrow { margin-bottom: 22px; } .cy27-svchero__copy h1 { margin-bottom: 26px; font-size: clamp(2.3rem, 4.6vw, 4rem); line-height: 1.03; } .cy27-svchero__copy .cy27-phero__lead { max-width: 560px; } /* Grid, not flow, so the trailing link keeps its intrinsic width — stretched it would drag its focus ring across the whole column. */ .cy27-svchero__aside { display: grid; justify-items: start; align-content: end; } .cy27-svchero__summary { width: 100%; display: grid; gap: 14px; margin: 0 0 22px; padding: 0; } .cy27-svchero__summary li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--cy27-line); } .cy27-svchero__name { color: var(--cy27-body-strong); font-size: .98rem; font-weight: 600; } .cy27-svchero__meta { flex-shrink: 0; font-family: var(--cy27-mono); font-size: .78rem; color: var(--cy27-accent); text-align: right; } /* Websites and Apps moved to their own pages; this keeps a visible route to them for anyone who lands on Services from an old link or the footer. */ .cy27-svchero__note { margin: 0 0 18px; color: var(--cy27-subtle); font-size: .92rem; line-height: 1.6; } .cy27-svchero__note a { color: var(--cy27-accent); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(0, 192, 250, .35); } .cy27-svchero__note a:hover, .cy27-svchero__note a:focus-visible { border-bottom-color: var(--cy27-accent); } .cy27-svchero__link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--cy27-accent); font-size: .97rem; font-weight: 700; } .cy27-svchero__link i { font-size: .8rem; } /* -------------------------------------------------------------------------- 2. Sticky jump bar — shared .cy27-jump, raised to a 44px tap target -------------------------------------------------------------------------- */ .cy27-jump a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; } .cy27-jump a.is-active { background: rgba(0, 192, 250, .14); color: var(--cy27-heading); } /* -------------------------------------------------------------------------- 3. The five service blocks -------------------------------------------------------------------------- */ /* The jump bar already contributes its own 80px of clearance below itself, so this section only owns the gap down to the process split. */ .cy27-svclist { padding-bottom: 40px; } .cy27-svclist__inner { display: grid; gap: 22px; } .cy27-svc { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; border-radius: 18px; overflow: hidden; /* Clears the fixed nav plus the sticky jump bar on an anchor jump. */ scroll-margin-top: 150px; } /* Even-numbered blocks put the screenshot on the left. The body still comes first in the DOM so the reading order is copy-then-image at every width. */ .cy27-svc--flip { grid-template-columns: .85fr 1.15fr; } .cy27-svc--flip .cy27-svc__shot { order: -1; border-left: 0; border-right: 1px solid var(--cy27-line-soft); } .cy27-svc__body { padding: 44px 40px; } .cy27-svc__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 8px; } .cy27-svc__eyebrow { font-family: var(--cy27-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cy27-accent); } .cy27-svc__price { font-family: var(--cy27-mono); font-size: .78rem; color: var(--cy27-accent); } .cy27-svc__title { margin-bottom: 16px; font-size: clamp(1.7rem, 2.4vw, 2.2rem); } .cy27-svc__lead { max-width: 520px; margin-bottom: 26px; color: var(--cy27-body); font-size: 1.08rem; line-height: 1.7; text-wrap: pretty; } /* Deliverables: hairline rows laid out two-up inside the block. */ .cy27-svc__rows { grid-template-columns: 1fr 1fr; column-gap: 28px; margin-bottom: 30px; } .cy27-svc__rows .cy27-row { padding: 18px 0 0; gap: 6px; } /* The shared sheet closes a row list with a bottom rule on the last child. In a two-column grid that would underline one cell of the bottom pair, so it is cancelled and the closing rule is not used here. */ .cy27-svc__rows > .cy27-row:last-child { border-bottom: 0; } .cy27-svc__rows .cy27-row h3 { margin-bottom: 0; font-size: 1rem; font-weight: 700; } .cy27-svc__rows .cy27-row p { font-size: .93rem; line-height: 1.6; } /* "Included" line — technical SEO is a website inclusion, not an offer. */ .cy27-svc__included { display: flex; align-items: baseline; gap: 10px; margin-bottom: 28px; font-family: var(--cy27-mono); font-size: .78rem; line-height: 1.6; color: var(--cy27-subtle); } .cy27-svc__included i { flex-shrink: 0; font-size: .72rem; color: var(--cy27-accent); } .cy27-svc__actions { display: flex; flex-wrap: wrap; gap: 12px; } .cy27-svc__link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--cy27-accent); font-size: .97rem; font-weight: 700; } .cy27-svc__link i { font-size: .8rem; } .cy27-svc__shot { align-items: stretch; border-left: 1px solid var(--cy27-line-soft); } /* A captioned placeholder must not stretch its text block to the full height of a tall block — pin it to the top edge. */ .cy27-svc__shot .cy27-shot__caption { align-self: flex-start; } /* -------------------------------------------------------------------------- 4. Process — heading left, numbered hairline rows right -------------------------------------------------------------------------- */ /* Restores the full 120px rhythm the shortened services section gave up. */ .cy27-svcprocess { padding-top: 80px; } .cy27-svcprocess__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; } .cy27-svcprocess__eyebrow { display: block; margin-bottom: 16px; } .cy27-svcprocess__intro h2 { margin-bottom: 20px; } .cy27-svcprocess__steps { margin: 0; padding: 0; list-style: none; } .cy27-svcprocess__steps .cy27-row { gap: 24px; } /* The shared numeral is an uppercase micro-label; the process wants it read as a figure. */ .cy27-svcprocess__steps .cy27-row__num { font-size: .9rem; letter-spacing: .05em; padding-top: .2em; } .cy27-svcprocess__steps .cy27-row p { font-size: 1rem; line-height: 1.7; } /* -------------------------------------------------------------------------- 5. Final CTA panel -------------------------------------------------------------------------- */ .cy27-svccta { border-radius: 20px; padding: clamp(40px, 6vw, 84px) clamp(24px, 5vw, 64px); text-align: center; } .cy27-svccta h2 { margin-bottom: 16px; font-size: clamp(1.9rem, 3.2vw, 2.9rem); } .cy27-svccta p { max-width: 520px; margin: 0 auto 32px; color: var(--cy27-body); font-size: 1.1rem; line-height: 1.7; text-wrap: pretty; } .cy27-svccta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .cy27-svccta .cy27-svccta__note { margin: 28px auto 0; font-family: var(--cy27-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cy27-subtle); } /* -------------------------------------------------------------------------- 6. Responsive -------------------------------------------------------------------------- */ @media (max-width: 1000px) { .cy27-svchero__grid { grid-template-columns: 1fr; gap: 44px; align-items: start; } .cy27-svchero .cy27-phero__inner { padding-bottom: 64px; } .cy27-svc, .cy27-svc--flip { grid-template-columns: 1fr; } /* Stacked: copy first, screenshot beneath it. */ .cy27-svc__shot, .cy27-svc--flip .cy27-svc__shot { order: 2; min-height: 260px; border-left: 0; border-right: 0; border-top: 1px solid var(--cy27-line-soft); } .cy27-svcprocess__grid { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 760px) { .cy27-svc__body { padding: 28px 22px; } .cy27-svc__rows { grid-template-columns: 1fr; } .cy27-svcprocess__grid { gap: 32px; } } /* -------------------------------------------------------------------------- Screenshot fit -------------------------------------------------------------------------- The service captures are landscape whole-page shots, but a service block's slot is as tall as its copy column, so the shared `object-fit:cover` rule was cropping away roughly half the image width (the MATRIX wordmark came out sliced in half). Pin each capture as a full-width landscape band at the top of the slot instead, and let the card surface fill the remainder. -------------------------------------------------------------------------- */ .cy27-svc__shot img { align-self: start; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; } /* A slot that carries a real capture shows the card surface beneath the image band — not the placeholder hatching, which otherwise reads as a second, missing screenshot below the first. */ .cy27-svc__shot:has(img) { background: linear-gradient(160deg, rgba(20, 27, 40, .5), rgba(11, 16, 25, .42)); }