/* /Components/Layout/Atmosphere.razor.rz.scp.css */ /* Full-viewport decorative overlay. The grain + blue mesh sit ON TOP of content as a texture wash (opaque section backgrounds would hide a behind-overlay), so z-index is above content/chrome but below the custom cursor (9999) to keep the reticle crisp. pointer-events:none keeps it inert; contain:strict + overflow:hidden isolate/clip its paint. Opacities stay low enough to preserve AA. */ .atmosphere[b-altxp0p9n6] { position: fixed; inset: 0; pointer-events: none; z-index: 9000; contain: strict; overflow: hidden; } /* Static film grain — opacity low enough to preserve AA text contrast above it; never animated. */ .atmosphere-grain[b-altxp0p9n6] { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: .04; } /* Electric-blue mesh: a large, very-low-alpha radial glow, heavily blurred. Oversized via negative inset so the drift never exposes an edge. color-mix keeps the brand token while dialing alpha down. Transform-only animation = compositor-friendly. */ .atmosphere-mesh[b-altxp0p9n6] { position: absolute; inset: -25%; background: radial-gradient(45% 45% at 50% 50%, color-mix(in srgb, var(--c-blue) 6%, transparent), transparent 70%); filter: blur(110px); animation: atmosphere-drift-b-altxp0p9n6 52s linear infinite; } @keyframes atmosphere-drift-b-altxp0p9n6 { 0% { transform: translate3d(-6%, -4%, 0) scale(1); } 50% { transform: translate3d(6%, 5%, 0) scale(1.12); } 100% { transform: translate3d(-6%, -4%, 0) scale(1); } } /* Freeze the drift for reduced-motion (the grain stays — it is static texture, not motion). */ @media (prefers-reduced-motion: reduce) { .atmosphere-mesh[b-altxp0p9n6] { animation: none; } } /* /Components/Layout/Cursor.razor.rz.scp.css */ /* Scoped reticle styling. Every selector targets #cursor-reticle or its children (all rendered by this component, so Blazor's scope attribute matches). The native `cursor: none` rule lives in wwwroot/css/motion.css — it must reach every element under , which a scoped rule cannot. Hidden until cursor.js adds the body class. */ #cursor-reticle[b-ej20wjf0lg] { position: fixed; top: 0; left: 0; z-index: 9999; width: 36px; height: 36px; pointer-events: none; opacity: 0; transition: width .22s, height .22s, opacity .25s; } body.has-custom-cursor #cursor-reticle[b-ej20wjf0lg] { opacity: 1; } #cursor-reticle .reticle-ring[b-ej20wjf0lg] { position: absolute; inset: 0; border: 1px solid rgba(150,180,255,.8); border-radius: 50%; transition: inset .2s, border-color .2s; } #cursor-reticle .reticle-dot[b-ej20wjf0lg] { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--c-amber); transform: translate(-50%, -50%); } #cursor-reticle .reticle-label[b-ej20wjf0lg] { position: absolute; left: 50%; top: 120%; transform: translateX(-50%); white-space: nowrap; font-family: var(--f-mono); font-size: .56rem; letter-spacing: .12em; color: var(--c-blue-text); opacity: 0; transition: opacity .2s; } #cursor-reticle.is-hot[b-ej20wjf0lg] { width: 58px; height: 58px; } #cursor-reticle.is-hot .reticle-ring[b-ej20wjf0lg] { border-color: var(--c-blue); inset: -2px; } #cursor-reticle.is-labeled .reticle-label[b-ej20wjf0lg] { opacity: 1; } /* /Components/Layout/Footer.razor.rz.scp.css */ .site-footer[b-299o8uxgc2] { border-top: 1px solid var(--c-line); margin-top: var(--space-xl); padding-block: var(--space-l); color: var(--c-muted); } .site-footer .container[b-299o8uxgc2] { display: flex; flex-direction: column; gap: var(--space-s); } .footer-logo[b-299o8uxgc2] { width: 200px; height: auto; margin-bottom: var(--space-s); } .footer-controls[b-299o8uxgc2] { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-m); } /* In-UI reduce-motion control. Hidden until JS wires it, so no-JS users never see a dead button. */ .motion-toggle[b-299o8uxgc2] { display: none; align-items: center; gap: .5rem; background: transparent; border: 1px solid var(--c-line); border-radius: 2px; color: var(--c-muted); font-family: var(--f-mono); font-size: var(--fs-step--1); padding: .35rem .7rem; cursor: pointer; transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); } .motion-toggle[data-wired][b-299o8uxgc2] { display: inline-flex; } .motion-toggle:hover[b-299o8uxgc2] { color: var(--c-text); border-color: var(--c-text); } .motion-toggle:focus-visible[b-299o8uxgc2] { outline: 2px solid var(--c-blue); outline-offset: 2px; } .motion-toggle-dot[b-299o8uxgc2] { width: 8px; height: 8px; border-radius: 50%; background: var(--c-brand-green-text); flex: none; } .motion-toggle[aria-pressed="true"] .motion-toggle-dot[b-299o8uxgc2] { background: var(--c-muted); } /* /Components/Layout/Header.razor.rz.scp.css */ .site-header[b-pjj3k6k561] { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(8px); background: rgba(10,10,15,.55); border-bottom: 1px solid var(--c-line); } .row[b-pjj3k6k561] { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); padding-block: var(--space-s); } .brand[b-pjj3k6k561] { display: flex; align-items: center; gap: .55rem; text-decoration: none; font-family: var(--f-display); font-weight: 700; color: var(--c-text); } .brand-mark[b-pjj3k6k561] { height: 30px; width: auto; flex: none; } .brand-name span[b-pjj3k6k561] { color: var(--c-brand-green-text); } .overlay-mark[b-pjj3k6k561] { height: 44px; width: auto; margin-bottom: var(--space-s); } nav#primary-nav[b-pjj3k6k561] { display: flex; gap: var(--space-m); } .hamburger[b-pjj3k6k561] { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 2.5rem; height: 2.5rem; padding: 0.5rem; background: transparent; border: none; cursor: pointer; color: var(--c-text); border-radius: 4px; } .hamburger:focus-visible[b-pjj3k6k561] { outline: 2px solid var(--c-blue); outline-offset: 2px; } .bar[b-pjj3k6k561] { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px; transition: transform var(--dur-micro) var(--ease-out), opacity var(--dur-micro) var(--ease-out); } .hamburger[aria-expanded="true"] .bar:nth-child(1)[b-pjj3k6k561] { transform: translateY(7px) rotate(45deg); } .hamburger[aria-expanded="true"] .bar:nth-child(2)[b-pjj3k6k561] { opacity: 0; } .hamburger[aria-expanded="true"] .bar:nth-child(3)[b-pjj3k6k561] { transform: translateY(-7px) rotate(-45deg); } .mobile-overlay[b-pjj3k6k561] { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-l); background: rgba(10,10,15,.97); backdrop-filter: blur(12px); opacity: 0; pointer-events: none; transition: opacity var(--dur-reveal) var(--ease-out); } .mobile-overlay.is-open[b-pjj3k6k561] { opacity: 1; pointer-events: auto; } .overlay-close[b-pjj3k6k561] { position: absolute; top: var(--space-m); right: var(--space-m); background: transparent; border: none; color: var(--c-text); font-size: 2rem; line-height: 1; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 4px; } .overlay-close:focus-visible[b-pjj3k6k561] { outline: 2px solid var(--c-blue); outline-offset: 2px; } .mobile-overlay nav[b-pjj3k6k561] { display: flex; flex-direction: column; align-items: center; gap: var(--space-m); } .overlay-link[b-pjj3k6k561] { font-family: var(--f-display); font-size: var(--fs-step-3); font-weight: 700; color: var(--c-text); text-decoration: none; transition: color var(--dur-micro) var(--ease-out); } .overlay-link:hover[b-pjj3k6k561] { color: var(--c-blue); } .overlay-link:focus-visible[b-pjj3k6k561] { outline: 2px solid var(--c-blue); outline-offset: 4px; border-radius: 2px; } .overlay-lang[b-pjj3k6k561] { margin-top: var(--space-s); } @media (max-width: 720px) { nav#primary-nav[b-pjj3k6k561] { display: none; } .hamburger[b-pjj3k6k561] { display: flex; } } /* /Components/Layout/LangToggle.razor.rz.scp.css */ /* Inactive locale uses an AA-legible muted colour (~6:1 on the dark canvas) rather than opacity-dimming, which had halved contrast below WCAG AA. Active stays full-strength text. */ .lang-toggle .lang[b-q8m3s0t1fp] { color: var(--c-muted); } .lang-toggle .lang.is-current[b-q8m3s0t1fp] { color: var(--c-text); } /* /Components/Sections/About.razor.rz.scp.css */ .about[b-nlicg8e3g0] { padding-block: var(--space-xl); background: var(--c-surface); overflow: hidden; } .about-inner[b-nlicg8e3g0] { display: grid; grid-template-columns: 1fr; gap: var(--space-l); align-items: start; } @media (min-width: 1024px) { .about-inner[b-nlicg8e3g0] { grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; } } /* Image column */ .about-image-col[b-nlicg8e3g0] { order: -1; /* image above text on mobile */ } @media (min-width: 1024px) { .about-image-col[b-nlicg8e3g0] { order: 0; } } .about-image-wrap[b-nlicg8e3g0] { position: relative; overflow: hidden; border-radius: 2px; /* portrait aspect ratio */ aspect-ratio: 4 / 5; } .about-image-wrap img[b-nlicg8e3g0] { width: 100%; height: 100%; object-fit: cover; object-position: 75% 25%; /* face + hard hat on the right, upper portion */ display: block; /* subtle on-brand grade — keeps natural/warm skin tones */ filter: saturate(0.92) contrast(1.03); } /* Parallax buffer: oversize the image only under motion so the ±24px scrub never exposes the wrap edges (mirrors the Astro source). */ html.motion-ready .about-image-wrap img[b-nlicg8e3g0] { height: calc(100% + 48px); margin-top: -24px; } /* soft brand accent overlay — lighter than stock-photo treatment */ .about-image-overlay[b-nlicg8e3g0] { position: absolute; inset: 0; background: linear-gradient( 200deg, rgba(4, 92, 250, 0.1) 0%, rgba(12, 45, 209, 0.04) 50%, transparent 100% ); pointer-events: none; } /* Text column */ .about-text-col[b-nlicg8e3g0] { display: flex; flex-direction: column; gap: var(--space-m); } .about-heading[b-nlicg8e3g0] { font-size: var(--fs-step-3); line-height: 1.1; max-width: 28ch; } .brand-rule[b-nlicg8e3g0] { border: none; border-top: 1px solid var(--c-blue); width: 80px; margin-block: 0; margin-inline: 0; } .about-body[b-nlicg8e3g0] { font-size: var(--fs-step-0); color: var(--c-muted); line-height: 1.7; max-width: 60ch; } /* /Components/Sections/Clients.razor.rz.scp.css */ .clients[b-usmuhqyb9u] { padding-block: var(--space-xl); background: var(--c-surface); overflow: hidden; } .clients-heading[b-usmuhqyb9u] { margin-bottom: var(--space-l); } /* marquee viewport: clips the scrolling track */ .marquee[b-usmuhqyb9u] { overflow: hidden; width: 100%; } /* track: both chip-lists side by side; width = sum of both → xPercent:-50 lands at midpoint */ .marquee-track[b-usmuhqyb9u] { display: flex; flex-wrap: nowrap; width: max-content; } /* chip-list: horizontal, non-wrapping row */ .chip-list[b-usmuhqyb9u] { display: flex; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; gap: var(--space-m); padding-inline: var(--space-m); } /* bordered pill chip */ .chip[b-usmuhqyb9u] { padding: .4em 1em; border: 1px solid var(--c-line); border-radius: 2em; font-family: var(--f-mono); font-size: var(--fs-step--1); color: var(--c-text); white-space: nowrap; } /* reduced-motion fallback: wrap into a static chip cloud; hide the aria-hidden duplicate */ @media (prefers-reduced-motion: reduce) { .marquee[b-usmuhqyb9u] { overflow: visible; } .marquee-track[b-usmuhqyb9u] { flex-wrap: wrap; width: auto; /* GSAP motion is suppressed via initMarquee's prefersReducedMotion() early return */ } .chip-list[b-usmuhqyb9u] { flex-wrap: wrap; } /* hide the second (aria-hidden) copy — redundant in the static wrapped layout */ .marquee-track > [aria-hidden="true"][b-usmuhqyb9u] { display: none; } } /* /Components/Sections/Contact.razor.rz.scp.css */ /* Contact.razor.css — scoped styles ported verbatim from Contact.astro