/* Sparktan — site styles Ported from the approved design. Keyframes and base rules are taken verbatim; the hover rules below replace the design tool's style-hover attributes, which were not real CSS. */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: #ffffff; } a { color: #0b1a2f; text-decoration: none; } a:hover { color: #16a34a; } @keyframes sk-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes sk-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes sk-counter { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } @keyframes sk-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @keyframes sk-ring { 0% { transform: scale(.85); opacity: .55; } 70% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } } @keyframes sk-rise { 0% { transform: translateY(16px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-58px); opacity: 0; } } @keyframes sk-scan { 0% { transform: translateX(0); } 62% { transform: translateX(1420px); } 100% { transform: translateX(1420px); } } @keyframes sk-shadow { 0%,100% { transform: scaleX(1); opacity: .5; } 50% { transform: scaleX(.86); opacity: .32; } } @keyframes sk-drift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(6px,-12px); } } @keyframes sk-blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } } @keyframes sk-in-a { from { opacity: 0; transform: translate3d(0,26px,0); } to { opacity: 1; transform: translate3d(0,0,0); } } @keyframes sk-in-b { from { opacity: 0; transform: translate3d(0,26px,0); } to { opacity: 1; transform: translate3d(0,0,0); } } /* ---- hero media ---------------------------------------------------- The GIF is shown plainly at full size: no mask, no fade, no backdrop. (Earlier revisions faded the edges into a dark stage; that was reverted deliberately — keep it simple here.) */ .hero-media img, .hero-media video { object-fit: cover; } /* ---- shared header / footer typography ------------------------------ On the homepage these sit inside a wrapper div that sets the page font; on the service pages they are direct children of and were falling back to the browser default (Times), which changed the nav's line height and made the header 77px there against 82px on the homepage. Setting the font on the elements themselves keeps every page identical. */ header, footer { font-family: 'Poppins', Helvetica, sans-serif; } /* ---- brand mark ----------------------------------------------------- The logo's bolt is white, which vanishes on the light header but is correct over the dark sections. Both variants are stacked and cross-faded by the same signal that re-tints the header, so the bolt always has contrast against whatever is behind it. */ .brand-mark img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .25s ease; } .brand-mark-light { opacity: 0; } /* white bolt — dark backdrops */ .brand-mark-dark { opacity: 1; } /* navy bolt — light header */ header.is-dark .brand-mark-light { opacity: 1; } header.is-dark .brand-mark-dark { opacity: 0; } /* ---- footer --------------------------------------------------------- Brand block plus four link columns. The brand column is given more room than the rest so the blurb and social row sit together as one unit. */ .foot-grid { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px); align-items: start; } .foot-brand { display: flex; flex-direction: column; gap: 16px; } .foot-col { display: flex; flex-direction: column; gap: 10px; } .foot-head { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #22c55e; margin-bottom: 4px; } .foot-col a { font-size: 14.5px; line-height: 1.45; color: rgba(234,241,247,.7); text-decoration: none; transition: color .25s ease; } /* social row — inline SVG so the icons inherit currentColor and need no extra request; the tile lifts to brand green on hover */ .foot-social { display: flex; align-items: center; gap: 10px; margin-top: 4px; } .foot-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9px; border: 1px solid rgba(234,241,247,.2); color: rgba(234,241,247,.78); transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease; } .foot-social a:hover { color: #0b1a2f; background: #22c55e; border-color: #22c55e; transform: translateY(-2px); } .foot-social svg { width: 18px; height: 18px; } @media (max-width: 900px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } } @media (max-width: 460px) { .foot-grid { grid-template-columns: 1fr; } } /* ---- services dropdown --------------------------------------------- Opens on hover and on keyboard focus. The panel is always in the DOM (visibility, not display) so focus can move into it and screen readers can reach it; pointer-events are gated so it can't be clicked while hidden. The header tints navy over dark sections, but the panel keeps its own light surface so the links stay readable throughout. */ .nav-drop { position: relative; display: inline-flex; align-items: center; } .nav-drop-trigger { display: inline-flex; align-items: center; } .nav-menu { position: absolute; top: 100%; left: 50%; margin-top: 14px; transform: translate(-50%, -6px); min-width: min(720px, 88vw); background: #ffffff; border: 1px solid rgba(11,26,47,.09); border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(11,26,47,.28), 0 2px 8px rgba(11,26,47,.06); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, transform .22s cubic-bezier(.22,1,.36,1), visibility .22s; z-index: 60; } /* a transparent bridge over the gap, so the pointer can travel from the trigger to the panel without the menu closing underneath it */ .nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } .nav-drop:hover .nav-menu, .nav-drop:focus-within .nav-menu, .nav-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } .nav-menu-inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 34px; padding: 28px 34px 30px; } .nav-col { display: flex; flex-direction: column; gap: 2px; } .nav-col-head { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #16a34a; padding: 0 10px 10px; } .nav-menu a { font-size: 14px; font-weight: 500; line-height: 1.35; color: #0b1a2f; padding: 9px 10px; border-radius: 6px; white-space: normal; transition: background .18s ease, color .18s ease; } .nav-menu a:hover, .nav-menu a:focus-visible { background: rgba(34,197,94,.1); color: #16a34a; } @media (prefers-reduced-motion: reduce) { .nav-menu { transition: none; } } /* ---- industry cards: photo backgrounds ------------------------------ The image goes on a ::before, not on `background` — the scroll handler rewrites each card's inline background every frame for the active-state highlight, and would overwrite an image set there. ::before = the photo ::after = a vignette dark enough to keep the existing text legible, weighted to the bottom where the bullet list sits. Both sit behind the content via z-index, and the card's own children are lifted to z-index 1 by .ind-card > * so nothing is buried. */ .ind-card::before, .ind-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; } .ind-card::before { background-image: var(--ind-img); background-size: cover; background-position: center; /* the photo carries the card — it is legible on its own, and the ::after vignette below only darkens the bands where text actually sits */ opacity: .82; transition: opacity .45s ease; z-index: 0; } .ind-card::after { /* a single vertical gradient: dark at the top behind the counter and title, clear through the middle so the image reads, dark again at the bottom behind the bullet list */ background: linear-gradient(180deg, rgba(11,26,47,.88) 0%, rgba(11,26,47,.55) 26%, rgba(11,26,47,.22) 46%, rgba(11,26,47,.62) 74%, rgba(11,26,47,.90) 100%); z-index: 0; } /* content above both layers */ .ind-card > * { position: relative; z-index: 1; } /* The scroll handler already fades whole inactive cards to .42 opacity, so the image needs no second reduction — the active card just gets a touch more punch. */ .ind-card.is-active::before, .ind-card:hover::before { opacity: 1; } /* the ghost numeral fights the photo for the same space — drop it right back so the image reads instead */ .ind-card [data-ref^="ig"] { opacity: .16 !important; } /* the JS paints a flat tint on the active card, which would sit on top of the photo; keep the card itself transparent and let ::before show */ .ind-card { background-color: transparent !important; } /* ---- what we do: three practice blocks ------------------------------ Static by design — no scroll choreography here. The energy comes from the oversized Anton numerals, the green rule that draws across on hover, and the service rows that indent as you move down them. Same taxonomy and same labels as the Services dropdown, so the two never disagree. */ .svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(16px, 2vw, 26px); } .svc-block { position: relative; display: flex; flex-direction: column; gap: 16px; padding: clamp(26px, 2.8vw, 38px) clamp(22px, 2.4vw, 32px) clamp(20px, 2.2vw, 28px); border: 1px solid rgba(11,26,47,.14); border-radius: 4px; background: #ffffff; transition: background .3s ease, border-color .3s ease, transform .3s cubic-bezier(.22,1,.36,1); } .svc-block:hover { background: #fbfdfb; border-color: rgba(34,197,94,.5); transform: translateY(-4px); } .svc-block-top { display: flex; align-items: center; gap: 14px; } /* Inline SVG rather than an icon font: no extra request, and the strokes inherit currentColor so the same hover state drives them. */ .svc-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: clamp(38px, 4vw, 48px); height: clamp(38px, 4vw, 48px); border: 1px solid rgba(11,26,47,.16); border-radius: 10px; color: rgba(11,26,47,.45); background: #ffffff; transition: color .3s ease, border-color .3s ease, background .3s ease; } .svc-icon svg { width: 60%; height: 60%; } .svc-block:hover .svc-icon { color: #16a34a; border-color: rgba(34,197,94,.55); background: rgba(34,197,94,.07); } .svc-rule { flex: 1; height: 2px; background: rgba(11,26,47,.14); transform-origin: left center; position: relative; overflow: hidden; } .svc-rule::after { content: ""; position: absolute; inset: 0; background: #22c55e; transform: scaleX(0); transform-origin: left center; transition: transform .5s cubic-bezier(.22,1,.36,1); } .svc-block:hover .svc-rule::after { transform: scaleX(1); } .svc-title { margin: 0; font-family: 'Anton', Impact, sans-serif; font-size: clamp(24px, 2.5vw, 34px); line-height: 1.04; text-transform: uppercase; font-weight: 400; } .svc-desc { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(11,26,47,.62); /* keeps the three descriptions from setting different block heights */ min-height: 4.8em; } .svc-list { display: flex; flex-direction: column; margin-top: auto; padding-top: 6px; } .svc-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid rgba(11,26,47,.12); font-size: 14.5px; font-weight: 500; line-height: 1.35; color: #0b1a2f; transition: color .22s ease, padding-left .22s ease; } .svc-item:last-child { border-bottom: 1px solid rgba(11,26,47,.12); } .svc-item:hover { color: #16a34a; padding-left: 8px; } .svc-arrow { font-family: 'JetBrains Mono', monospace; color: #22c55e; opacity: 0; transform: translateX(-6px); transition: opacity .22s ease, transform .22s ease; } .svc-item:hover .svc-arrow { opacity: 1; transform: translateX(0); } .svc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(16px, 2.5vw, 40px); padding-left: clamp(16px, 2vw, 28px); border-left: 3px solid #22c55e; } .svc-foot-line { font-family: 'Anton', Impact, sans-serif; font-size: clamp(19px, 2.1vw, 28px); line-height: 1.15; text-transform: uppercase; } .svc-foot-line span { color: #16a34a; } .svc-foot-cta { display: flex; align-items: center; gap: 10px; background: #22c55e; color: #0b1a2f; font-weight: 700; font-size: 15px; padding: 14px 24px; border-radius: 6px; white-space: nowrap; } @media (max-width: 760px) { .svc-desc { min-height: 0; } .svc-block:hover { transform: none; } } /* The header is fixed at ~82px, so an anchored section would otherwise scroll its heading underneath it. Most sections have enough top padding to clear it on their own; #get-started does not. */ #get-started { scroll-margin-top: 104px; } /* ---- hero headline cycle ------------------------------------------- The headline rotates through one line per service domain. Each word sits inside an overflow-hidden line box and slides up out of it, staggered — the same mask-rise motion as the "Why Sparktan" section, so the hero reads as part of the same system rather than a bolted-on effect. */ /* Exactly three lines, always — a headline that wrapped to four would shove the CTA down mid-cycle. nowrap guarantees three line boxes; the height is left to the content, since constraining it here would feed back into the font-size clamp and collapse the type. */ #heroHeadline { white-space: nowrap; } #heroHeadline .hero-line { display: block; overflow: hidden; /* descenders (y, p, g) get clipped by overflow:hidden without a little breathing room; the negative margin keeps the line spacing unchanged */ padding-bottom: .08em; margin-bottom: -.08em; } #heroHeadline .hero-word { display: inline-block; will-change: transform; transform: translateY(0); transition: transform .62s cubic-bezier(.22,1,.36,1); } /* words parked below the line, ready to rise */ #heroHeadline.is-out .hero-word { transform: translateY(115%); } #heroEyebrow { transition: opacity .34s ease; } #heroEyebrow.is-out { opacity: 0; } @media (prefers-reduced-motion: reduce) { #heroHeadline .hero-word { transition: none; } #heroHeadline.is-out .hero-word { transform: none; } } /* ---- hover states (were style-hover="..." in the design file) ---- */ /* primary green buttons */ [data-hv="hv1"]:hover { background: #3ee07a !important; } /* outcome rows fill green */ [data-hv="hv3"]:hover { background: #22c55e; } [data-hv="hv3"]:hover span[style*="-webkit-text-stroke"] { -webkit-text-fill-color: #0b1a2f; -webkit-text-stroke-color: #0b1a2f; } /* deliverable rows tint + indent */ [data-hv="hv4"]:hover { background: #f4f7f4; padding-left: clamp(18px,2.2vw,32px); } /* secondary outline button inverts */ [data-hv="hv5"]:hover { background: #0b1a2f; border-color: #0b1a2f; color: #ffffff; } /* footer links brighten */ [data-hv="hv6"]:hover { color: #ffffff; } /* ---- engagement model picker ---- */ [data-pick] { opacity: .42; transition: opacity .35s ease; } [data-pick].is-active { opacity: 1; } [data-pick] .model-mark { opacity: 0; transition: opacity .35s ease; } [data-pick].is-active .model-mark { opacity: 1; } /* ---- lead form ---- */ #leadSent { opacity: 0; transition: opacity .4s ease; } #leadSent.is-visible { opacity: 1; } #leadForm select { border-radius: 0; appearance: none; -webkit-appearance: none; } #leadForm input:focus, #leadForm select:focus, #leadForm textarea:focus { border-bottom-color: #22c55e; } /* brief highlight when "Start here" prefills the engagement model, so the user can see the click carried their selection into the form */ @keyframes sk-prefill { 0%, 70% { background: rgba(34,197,94,.16); border-bottom-color: #22c55e; } 100% { background: transparent; border-bottom-color: rgba(11,26,47,.22); } } #leadForm .is-prefilled { animation: sk-prefill 2s ease forwards; } /* ---- responsive ---- */ /* The fixed header's nav wraps badly below ~760px, so it collapses to the logo plus the contact button. The scroll-driven sections are tuned for landscape viewports; on narrow screens they release to normal flow. */ @media (max-width: 760px) { header nav a:not(.nav-cta) { display: none; } /* the hover dropdown has no touch equivalent; it hides with the rest of the nav until a proper mobile menu exists */ header nav .nav-drop { display: none; } header { gap: 16px; } /* The hero is a 100vh two-column grid. Stacked on a phone the columns no longer fit that height, so the media overlapped the stat row: let the section grow with its content and give the media a fixed slot. */ #hero { height: auto !important; min-height: 100vh; padding-bottom: 32px; } #hero > div:nth-of-type(3) { padding-bottom: 24px; } #hero [style*="max-width:520px"] { max-width: 100% !important; justify-self: stretch !important; } /* keep the GIF's own 16:9 proportions on phones too */ .hero-media { width: 100% !important; margin-right: 0 !important; } /* stat row reads as two columns rather than four cramped ones */ #hero [style*="repeat(auto-fit,minmax(210px,1fr))"] { grid-template-columns: repeat(2, 1fr); } #hero [style*="repeat(auto-fit,minmax(210px,1fr))"] > div { border-right: 0 !important; padding-left: 0 !important; padding-right: 12px !important; } #stage, #industries { height: auto !important; } #stage > div, #industries > div { position: static !important; height: auto !important; } /* The gallery is scroll-driven horizontally on desktop. On a phone there is no room to pan, so the track releases into a stacked column. */ #industries [data-ref="indTrack"] { flex-wrap: wrap; transform: none !important; justify-content: stretch; width: 100%; padding: 0 20px !important; gap: 16px; } #industries [data-ref="indTrack"] > div { width: 100% !important; flex: 1 1 100% !important; height: auto !important; max-height: none !important; min-height: 0 !important; opacity: 1 !important; transform: none !important; } /* the oversized ghost numeral is desktop chrome; it crowds a phone card */ #industries [data-ref^="ig"] { display: none; } /* margin-top:auto pushed the bullet list to the bottom of a full-height card */ #industries [data-ref="indTrack"] > div > div:last-child { margin-top: 12px !important; } /* the pinned viewport must scroll, since the cards now stack past 100vh */ #industries > div { overflow-y: auto !important; justify-content: flex-start !important; } #industries > div > div:nth-of-type(2) { overflow: visible !important; } #bolt-transition { height: 100vh !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }