/* /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 dashed rgba(150,180,255,.8); border-radius: 50%; transition: inset .2s, border-color .2s; animation: cursor-ring-spin-b-ej20wjf0lg 5s linear infinite; } #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; animation-play-state: paused; } #cursor-reticle.is-labeled .reticle-label[b-ej20wjf0lg] { opacity: 1; } @keyframes cursor-ring-spin-b-ej20wjf0lg { to { transform: rotate(360deg); } } /* /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 */ /* Native

disclosure — zero JS. Inactive-locale text uses an AA-legible muted colour (~6:1 on the dark canvas) rather than opacity-dimming. */ .lang-toggle[b-q8m3s0t1fp] { position: relative; } .lang-toggle summary[b-q8m3s0t1fp] { cursor: pointer; list-style: none; color: var(--c-text); } .lang-toggle summary[b-q8m3s0t1fp]::-webkit-details-marker { display: none; } .lang-toggle summary:focus-visible[b-q8m3s0t1fp] { outline: 2px solid var(--c-blue); outline-offset: 2px; } .lang-options[b-q8m3s0t1fp] { position: absolute; top: 100%; right: 0; margin-top: .4rem; padding: .4rem 0; list-style: none; display: flex; flex-direction: column; min-width: 3rem; background: rgba(10,10,15,.95); border: 1px solid var(--c-line); border-radius: 4px; } .lang-options a[b-q8m3s0t1fp] { display: block; padding: .3rem .8rem; color: var(--c-muted); text-decoration: none; } .lang-options a:hover[b-q8m3s0t1fp] { color: var(--c-text); } .lang-options a:focus-visible[b-q8m3s0t1fp] { color: var(--c-text); outline: 2px solid var(--c-blue); outline-offset: 2px; } /* /Components/Pages/Error.razor.rz.scp.css */ .err[b-9ihn7brum2] { padding-block: var(--space-xl); } /* /Components/Pages/NotFound.razor.rz.scp.css */ .nf[b-rfxa2irihd] { padding-block: var(--space-xl); } /* /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/AmePortalDetail.razor.rz.scp.css */ /* AME Portal product page — dark-canvas layout. Signature accent: the brand green (--c-brand-green-text, AA-legible on the dark canvas), the product's "gas" color — paralleling Arianna's scoped red thread. Diagram classes (apd-*) style the rebuilt SVG exhibits; ame-portal.js animates them via the data-ap-* hooks. */ .portal[b-ys3chskhfq] { --c-gas: var(--c-brand-green-text); padding-block: var(--space-xl); } /* --- Hero --- */ .ap-hero[b-ys3chskhfq] { display: flex; flex-direction: column; gap: var(--space-s); } .ap-back[b-ys3chskhfq] { color: var(--c-muted); transition: color var(--dur-micro) var(--ease-out); } .ap-back:hover[b-ys3chskhfq], .ap-back:focus-visible[b-ys3chskhfq] { color: var(--c-text); } .ap-kicker[b-ys3chskhfq] { color: var(--c-gas); } .ap-kicker.is-typing[b-ys3chskhfq]::after { content: "▍"; margin-left: 1px; color: var(--c-gas); animation: ap-caret-b-ys3chskhfq 1s steps(1) infinite; } @keyframes ap-caret-b-ys3chskhfq { 50% { opacity: 0; } } .ap-title[b-ys3chskhfq] { font-family: var(--f-display); font-size: var(--fs-step-5); line-height: 1; letter-spacing: -0.02em; } .ap-tagline[b-ys3chskhfq] { font-family: var(--f-display); font-size: var(--fs-step-3); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; max-width: 24ch; } .ap-cursor[b-ys3chskhfq] { color: var(--c-gas); animation: ap-caret-b-ys3chskhfq 1.2s steps(1) infinite; } @media (prefers-reduced-motion: reduce) { .ap-cursor[b-ys3chskhfq], .ap-kicker.is-typing[b-ys3chskhfq]::after { animation: none; } } .ap-intro[b-ys3chskhfq] { font-size: var(--fs-step-0); color: var(--c-muted); line-height: 1.7; max-width: 62ch; } .ap-actions[b-ys3chskhfq] { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-m); margin-top: var(--space-m); } .ap-cta[b-ys3chskhfq] { display: inline-block; background: var(--c-blue); color: #fff; padding: .8em 1.4em; border-radius: 4px; font-weight: 600; } .ap-cta:focus-visible[b-ys3chskhfq] { outline: 2px solid var(--c-blue); outline-offset: 3px; } .ap-cta-ghost[b-ys3chskhfq] { display: inline-block; border: 1px solid var(--c-line); color: var(--c-text); padding: .8em 1.4em; border-radius: 4px; font-weight: 600; transition: border-color var(--dur-micro) var(--ease-out); } .ap-cta-ghost:hover[b-ys3chskhfq], .ap-cta-ghost:focus-visible[b-ys3chskhfq] { border-color: var(--c-gas); } /* Stats strip */ .ap-stats[b-ys3chskhfq] { list-style: none; padding: 0; margin: var(--space-l) 0 0; display: grid; grid-template-columns: 1fr; gap: var(--space-m); } .ap-stat[b-ys3chskhfq] { border: 1px solid var(--c-line); border-radius: 6px; background: var(--c-surface); padding: var(--space-m); display: flex; flex-direction: column; gap: .4rem; } .ap-stat-v[b-ys3chskhfq] { font-family: var(--f-display); font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); font-weight: 700; color: var(--c-gas); } .ap-stat-v.is-typing[b-ys3chskhfq]::after { content: "▍"; color: var(--c-gas); animation: ap-caret-b-ys3chskhfq 1s steps(1) infinite; } .ap-stat-k[b-ys3chskhfq] { font-size: var(--fs-step--1); color: var(--c-muted); line-height: 1.55; } /* --- Beats --- */ .ap-beat[b-ys3chskhfq] { margin-top: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-s); scroll-margin-top: var(--anchor-offset); } .ap-beat-title[b-ys3chskhfq] { font-family: var(--f-display); font-size: var(--fs-step-3); line-height: 1.1; letter-spacing: -0.01em; max-width: 26ch; } .ap-beat-body[b-ys3chskhfq] { font-size: var(--fs-step-0); color: var(--c-muted); line-height: 1.7; max-width: 66ch; } .ap-sub-title[b-ys3chskhfq] { font-family: var(--f-display); font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); margin-top: var(--space-l); letter-spacing: -0.01em; } /* Steps */ .ap-steps[b-ys3chskhfq] { list-style: none; padding: 0; margin: var(--space-m) 0 0; display: grid; grid-template-columns: 1fr; gap: var(--space-m); counter-reset: none; } .ap-step[b-ys3chskhfq] { border: 1px solid var(--c-line); border-radius: 6px; background: var(--c-surface); padding: var(--space-m); display: flex; flex-direction: column; gap: .5rem; } .ap-step-num[b-ys3chskhfq] { color: var(--c-gas); } /* Cards */ .ap-grid2[b-ys3chskhfq] { display: grid; grid-template-columns: 1fr; gap: var(--space-m); margin-top: var(--space-m); } .ap-grid3[b-ys3chskhfq] { display: grid; grid-template-columns: 1fr; gap: var(--space-m); margin-top: var(--space-m); list-style: none; padding: 0; } .ap-card[b-ys3chskhfq] { border: 1px solid var(--c-line); border-radius: 6px; background: var(--c-surface); padding: var(--space-m); display: flex; flex-direction: column; gap: .5rem; } .ap-card[b-ys3chskhfq] .ap-card-icon { width: 26px; height: 26px; color: var(--c-gas); } .ap-card-title[b-ys3chskhfq] { font-family: var(--f-display); font-size: var(--fs-step-0); font-weight: 700; color: var(--c-text); letter-spacing: -0.01em; } .ap-card-body[b-ys3chskhfq] { font-size: var(--fs-step--1); color: var(--c-muted); line-height: 1.65; } /* --- Diagrams (SVG exhibits) --- */ .ap-diagram[b-ys3chskhfq] { margin: var(--space-m) 0 0; padding: var(--space-m); border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-surface); overflow-x: auto; } .ap-diagram svg[b-ys3chskhfq] { display: block; min-width: 840px; width: 100%; height: auto; } .ap-cap[b-ys3chskhfq] { font-family: var(--f-mono); font-size: var(--fs-step--1); letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); margin-top: var(--space-s); text-align: center; } .apd-zone[b-ys3chskhfq] { fill: rgba(255,255,255,.02); stroke: var(--c-line); } .apd-box[b-ys3chskhfq] { fill: var(--c-canvas); stroke: rgba(255,255,255,.24); } .apd-green[b-ys3chskhfq] { stroke: var(--c-gas); } .apd-bluebox[b-ys3chskhfq] { stroke: var(--c-blue); } .apd-nodebox[b-ys3chskhfq] { fill: rgba(4,92,250,.05); stroke: rgba(106,161,255,.45); } .apd-t[b-ys3chskhfq] { fill: var(--c-text); font-family: var(--f-body); font-size: 14px; font-weight: 600; } .apd-s[b-ys3chskhfq] { fill: var(--c-muted); font-family: var(--f-body); font-size: 12px; } .apd-mono[b-ys3chskhfq] { fill: var(--c-muted); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; } .apd-blue[b-ys3chskhfq] { fill: var(--c-blue-text); } .apd-greentext[b-ys3chskhfq] { fill: var(--c-gas); } .apd-red[b-ys3chskhfq] { fill: #FF7A6B; } .apd-amber[b-ys3chskhfq] { fill: var(--c-amber); } .apd-dim[b-ys3chskhfq] { fill: rgba(139,147,165,.55); } .apd-dot[b-ys3chskhfq] { fill: rgba(255,255,255,.25); } .apd-flow[b-ys3chskhfq] { stroke: var(--c-blue); stroke-width: 2; fill: none; } .apd-flowg[b-ys3chskhfq] { stroke: var(--c-gas); } .apd-flowd[b-ys3chskhfq] { stroke: rgba(139,147,165,.6); stroke-dasharray: 5 4; } /* ame-portal.js adds .is-live after draw-in → marching dashes = signal flowing */ html.motion-ready .apd-flow.is-live[b-ys3chskhfq] { stroke-dasharray: 7 6; animation: ap-march-b-ys3chskhfq 1.1s linear infinite; } @keyframes ap-march-b-ys3chskhfq { to { stroke-dashoffset: -13; } } .apd-trend[b-ys3chskhfq] { stroke: var(--c-gas); stroke-width: 2.5; fill: none; filter: drop-shadow(0 0 4px rgba(143,203,58,.5)); } .apd-limit[b-ys3chskhfq] { stroke: #FF7A6B; stroke-width: 1.5; stroke-dasharray: 5 4; } .apd-ha[b-ys3chskhfq] { stroke: var(--c-gas); stroke-width: 2; fill: none; } .apd-grid[b-ys3chskhfq] { stroke: rgba(255,255,255,.06); stroke-width: 1; } .apd-axis[b-ys3chskhfq] { stroke: rgba(255,255,255,.22); stroke-width: 1; } .apd-guide[b-ys3chskhfq] { stroke: var(--c-blue-text); stroke-width: 1.2; stroke-dasharray: 6 5; opacity: .7; } .apd-bar[b-ys3chskhfq] { fill: var(--c-gas); } .apd-val[b-ys3chskhfq] { fill: var(--c-text); font-family: var(--f-mono); font-size: 11px; text-anchor: middle; } .apd-xlab text[b-ys3chskhfq] { letter-spacing: .04em; } .apd-warn[b-ys3chskhfq] { fill: var(--c-amber); opacity: .1; } .apd-gap[b-ys3chskhfq] { stroke: var(--c-amber); stroke-width: 2; } .apd-mark-good[b-ys3chskhfq] { stroke: var(--c-gas); stroke-width: 2.5; } .apd-mark-bad[b-ys3chskhfq] { stroke: #FF7A6B; stroke-width: 2; stroke-dasharray: 5 4; } .apd-dotg[b-ys3chskhfq] { fill: var(--c-gas); } .apd-dotr[b-ys3chskhfq] { fill: #FF7A6B; } .apd-tolbox[b-ys3chskhfq] { fill: rgba(4,92,250,.08); stroke: rgba(106,161,255,.45); } .apd-sliver[b-ys3chskhfq] { fill: var(--c-gas); } .apd-down[b-ys3chskhfq] { stroke: #FF7A6B; stroke-dasharray: 6 4; fill: rgba(229,72,77,.05); } .apd-dead[b-ys3chskhfq] { fill: rgba(255,255,255,.02); stroke: rgba(229,72,77,.35); } /* Charts share the diagram frame */ .ap-chart-title[b-ys3chskhfq] { font-family: var(--f-display); font-size: var(--fs-step-0); font-weight: 700; } .ap-chart-sub[b-ys3chskhfq] { font-size: var(--fs-step--1); color: var(--c-muted); line-height: 1.6; max-width: 76ch; margin-top: .3rem; } .ap-chart-note[b-ys3chskhfq] { color: var(--c-text); margin-top: var(--space-s); } /* --- Proof quotes --- */ .ap-proof[b-ys3chskhfq] { margin: var(--space-m) 0 0; padding: var(--space-l); border: 1px solid var(--c-line); border-left: 2px solid var(--c-gas); background: var(--c-surface); border-radius: 0 6px 6px 0; } .ap-proof-quote[b-ys3chskhfq] { font-family: var(--f-display); font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem); font-weight: 600; line-height: 1.5; max-width: 58ch; color: var(--c-text); } .ap-proof-src[b-ys3chskhfq] { font-family: var(--f-mono); font-size: var(--fs-step--1); color: var(--c-muted); margin-top: var(--space-s); } /* --- Comparison / ISO tables --- */ .ap-tablewrap[b-ys3chskhfq] { overflow-x: auto; margin-top: var(--space-m); border: 1px solid var(--c-line); border-radius: 8px; } .ap-table[b-ys3chskhfq] { width: 100%; min-width: 720px; border-collapse: collapse; font-size: var(--fs-step--1); background: var(--c-surface); } .ap-table th[b-ys3chskhfq] { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-blue-text); text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--c-line); background: rgba(255,255,255,.02); } .ap-table th.ap-th-hl[b-ys3chskhfq] { color: var(--c-gas); } .ap-table td[b-ys3chskhfq] { padding: 12px 18px; border-bottom: 1px solid var(--c-line); color: var(--c-muted); line-height: 1.5; } .ap-table td:first-child[b-ys3chskhfq] { color: var(--c-text); font-weight: 600; } .ap-table tr:last-child td[b-ys3chskhfq] { border-bottom: none; } .ap-yes[b-ys3chskhfq] { color: var(--c-gas) !important; font-weight: 600; } .ap-no[b-ys3chskhfq] { color: rgba(139,147,165,.6) !important; } .ap-part[b-ys3chskhfq] { color: var(--c-amber) !important; } /* --- Closing CTA --- */ .ap-close[b-ys3chskhfq] { margin-top: var(--space-xl); padding: var(--space-l); border: 1px solid var(--c-line); border-left: 2px solid var(--c-gas); background: var(--c-surface); display: flex; flex-direction: column; gap: var(--space-s); align-items: flex-start; } .ap-close-title[b-ys3chskhfq] { font-family: var(--f-display); font-size: var(--fs-step-3); line-height: 1.1; letter-spacing: -0.01em; } .ap-close-body[b-ys3chskhfq] { color: var(--c-muted); line-height: 1.7; max-width: 60ch; } .ap-close .ap-cta[b-ys3chskhfq] { margin-top: var(--space-s); } /* --- Responsive --- */ @media (min-width: 640px) { .ap-stats[b-ys3chskhfq] { grid-template-columns: repeat(2, 1fr); } .ap-steps[b-ys3chskhfq] { grid-template-columns: repeat(3, 1fr); } .ap-grid2[b-ys3chskhfq] { grid-template-columns: repeat(2, 1fr); } .ap-grid3[b-ys3chskhfq] { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .ap-stats[b-ys3chskhfq] { grid-template-columns: repeat(4, 1fr); } .ap-grid3[b-ys3chskhfq] { grid-template-columns: repeat(3, 1fr); } } /* /Components/Sections/AmePortalTeaser.razor.rz.scp.css */ /* Teaser card for AME Portal on the Services page. Mirrors the product page's brand-green accent (the product's "gas" color). */ .ap-teaser[b-y0of8favn3] { margin-top: var(--space-m); padding: var(--space-l); border: 1px solid var(--c-line); border-left: 2px solid var(--c-brand-green-text); background: var(--c-surface); display: flex; flex-direction: column; gap: var(--space-s); align-items: flex-start; max-width: 44rem; } .ap-teaser-kicker[b-y0of8favn3] { color: var(--c-brand-green-text); } .ap-teaser-title[b-y0of8favn3] { font-family: var(--f-display); font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); line-height: 1.1; letter-spacing: -0.01em; } .ap-teaser-body[b-y0of8favn3] { color: var(--c-muted); line-height: 1.7; max-width: 60ch; } .ap-teaser-link[b-y0of8favn3] { font-weight: 600; color: var(--c-text); transition: color var(--dur-micro) var(--ease-out); } .ap-teaser-link:hover[b-y0of8favn3], .ap-teaser-link:focus-visible[b-y0of8favn3] { color: var(--c-brand-green-text); } /* /Components/Sections/AriannaDetail.razor.rz.scp.css */ /* Arianna 2.0 product page — dark-canvas layout with the "red thread" accent. --c-thread is scoped here on purpose: the Ariadne red belongs to this product only, not to the site-wide token palette. --c-thread-text is the AA-legible tint for small text. */ .arianna[b-f8w8i6nt1d] { --c-thread: #E8564A; --c-thread-text: #FF8A7A; padding-block: var(--space-xl); } /* --- Hero --- */ .ari-hero[b-f8w8i6nt1d] { display: flex; flex-direction: column; gap: var(--space-s); max-width: 70ch; } .ari-back[b-f8w8i6nt1d] { color: var(--c-muted); transition: color var(--dur-micro) var(--ease-out); } .ari-back:hover[b-f8w8i6nt1d], .ari-back:focus-visible[b-f8w8i6nt1d] { color: var(--c-text); } .ari-kicker[b-f8w8i6nt1d] { color: var(--c-thread-text); } .ari-title[b-f8w8i6nt1d] { font-family: var(--f-display); font-size: var(--fs-step-5); line-height: 1; letter-spacing: -0.02em; } .ari-manifesto[b-f8w8i6nt1d] { margin: var(--space-m) 0 0; padding-left: var(--space-m); border-left: 2px solid var(--c-thread); font-family: var(--f-display); font-size: var(--fs-step-3); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; max-width: 26ch; } .ari-intro[b-f8w8i6nt1d] { font-size: var(--fs-step-0); color: var(--c-muted); line-height: 1.7; max-width: 60ch; } .ari-actions[b-f8w8i6nt1d] { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-m); margin-top: var(--space-m); } .ari-cta[b-f8w8i6nt1d] { display: inline-block; background: var(--c-blue); color: #fff; padding: .8em 1.4em; border-radius: 4px; font-weight: 600; } .ari-cta:focus-visible[b-f8w8i6nt1d] { outline: 2px solid var(--c-blue); outline-offset: 3px; } .ari-cta-ghost[b-f8w8i6nt1d] { display: inline-block; border: 1px solid var(--c-line); color: var(--c-text); padding: .8em 1.4em; border-radius: 4px; font-weight: 600; transition: border-color var(--dur-micro) var(--ease-out); } .ari-cta-ghost:hover[b-f8w8i6nt1d], .ari-cta-ghost:focus-visible[b-f8w8i6nt1d] { border-color: var(--c-thread); } /* --- Story beats with the red thread running down the left --- */ .ari-story[b-f8w8i6nt1d] { position: relative; margin-top: var(--space-xl); padding-left: var(--space-m); display: flex; flex-direction: column; gap: var(--space-l); } /* Ariadne's thread — draws itself down the story on scroll (arianna-thread.js scrubs scaleY 0→1). Default (no-JS / reduced-motion) stays full-height so the beat still reads. */ .ari-thread[b-f8w8i6nt1d] { position: absolute; left: 0; top: .35em; bottom: .35em; width: 2px; background: linear-gradient(to bottom, var(--c-thread) 0%, var(--c-thread) 82%, rgba(232, 86, 74, .15) 100%); border-radius: 1px; transform-origin: top center; transform: scaleY(1); box-shadow: 0 0 7px rgba(232, 86, 74, .45); } html.motion-ready .ari-thread[b-f8w8i6nt1d] { transform: scaleY(0); will-change: transform; } .ari-beat[b-f8w8i6nt1d] { display: flex; flex-direction: column; gap: var(--space-s); } .ari-beat-title[b-f8w8i6nt1d] { font-family: var(--f-display); font-size: var(--fs-step-3); line-height: 1.1; letter-spacing: -0.01em; max-width: 24ch; } .ari-beat-body[b-f8w8i6nt1d] { font-size: var(--fs-step-0); color: var(--c-muted); line-height: 1.7; max-width: 60ch; } .ari-principle .ari-beat-body[b-f8w8i6nt1d] { color: var(--c-text); } /* The six labelled hierarchy levels, threaded together (Client → … → File) */ .ari-levels[b-f8w8i6nt1d] { list-style: none; padding: 0; margin: var(--space-s) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-m); } .ari-level[b-f8w8i6nt1d] { display: flex; align-items: center; gap: .5em; font-family: var(--f-mono); font-size: var(--fs-step--1); color: var(--c-text); white-space: nowrap; } .ari-level:not(:last-child)[b-f8w8i6nt1d]::after { content: "\2192"; color: var(--c-thread); margin-left: var(--space-s); } .ari-level-dot[b-f8w8i6nt1d] { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--c-thread); background: var(--c-canvas); flex: none; } .ari-level:first-child .ari-level-dot[b-f8w8i6nt1d] { background: var(--c-thread); } /* The six workflow statuses as a badge strip */ .ari-flow[b-f8w8i6nt1d] { list-style: none; padding: 0; margin: var(--space-s) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s); } .ari-flow-step[b-f8w8i6nt1d] { display: flex; align-items: center; gap: var(--space-s); } .ari-flow-step:not(:last-child)[b-f8w8i6nt1d]::after { content: "\2192"; color: var(--c-thread); } .ari-flow-badge[b-f8w8i6nt1d] { display: inline-block; border: 1px solid var(--c-line); border-radius: 999px; padding: .3em .85em; font-family: var(--f-mono); font-size: var(--fs-step--1); color: var(--c-muted); white-space: nowrap; } /* The released state carries the page accent, like the green badge in the app */ .ari-flow-step:nth-child(5) .ari-flow-badge[b-f8w8i6nt1d] { border-color: var(--c-thread); color: var(--c-text); } /* --- Capabilities --- */ .ari-features[b-f8w8i6nt1d] { margin-top: var(--space-xl); } .ari-cap-grid[b-f8w8i6nt1d] { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-l); } .ari-cap[b-f8w8i6nt1d] { display: flex; flex-direction: column; gap: var(--space-s); } /* ::deep reaches into the child LineIcon's scoped SVG */ .ari-cap[b-f8w8i6nt1d] .ari-cap-icon { width: 28px; height: 28px; color: var(--c-thread); } .ari-cap-label[b-f8w8i6nt1d] { font-family: var(--f-display); font-size: var(--fs-step-0); font-weight: 700; color: var(--c-text); letter-spacing: -0.01em; } .ari-cap-desc[b-f8w8i6nt1d] { font-size: var(--fs-step-0); color: var(--c-muted); line-height: 1.7; max-width: 42ch; } /* --- Technical foundations --- */ .ari-foundations[b-f8w8i6nt1d] { margin-top: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-m); } .ari-found-list[b-f8w8i6nt1d] { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-s); } .ari-found-item[b-f8w8i6nt1d] { font-family: var(--f-mono); font-size: var(--fs-step--1); color: var(--c-muted); line-height: 1.7; padding-left: var(--space-m); position: relative; max-width: 70ch; } .ari-found-item[b-f8w8i6nt1d]::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 1px; background: var(--c-thread); } /* --- Closing CTA --- */ .ari-close[b-f8w8i6nt1d] { margin-top: var(--space-xl); padding: var(--space-l); border: 1px solid var(--c-line); border-left: 2px solid var(--c-thread); background: var(--c-surface); display: flex; flex-direction: column; gap: var(--space-s); align-items: flex-start; } .ari-close-title[b-f8w8i6nt1d] { font-family: var(--f-display); font-size: var(--fs-step-3); line-height: 1.1; letter-spacing: -0.01em; } .ari-close-body[b-f8w8i6nt1d] { color: var(--c-muted); line-height: 1.7; max-width: 60ch; } .ari-close .ari-cta[b-f8w8i6nt1d] { margin-top: var(--space-s); } /* --- Responsive --- */ @media (min-width: 640px) { .ari-cap-grid[b-f8w8i6nt1d] { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .ari-cap-grid[b-f8w8i6nt1d] { grid-template-columns: repeat(3, 1fr); } .ari-story[b-f8w8i6nt1d] { padding-left: var(--space-l); } } /* /Components/Sections/AriannaTeaser.razor.rz.scp.css */ /* Teaser card for Arianna 2.0 on the Services page. Mirrors the product page's scoped red-thread accent (deliberately not a site-wide token). */ .ari-teaser[b-3c7sfm2za5] { --c-thread: #E8564A; --c-thread-text: #FF8A7A; margin-top: var(--space-l); padding: var(--space-l); border: 1px solid var(--c-line); border-left: 2px solid var(--c-thread); background: var(--c-surface); display: flex; flex-direction: column; gap: var(--space-s); align-items: flex-start; max-width: 44rem; } .ari-teaser-kicker[b-3c7sfm2za5] { color: var(--c-thread-text); } .ari-teaser-title[b-3c7sfm2za5] { font-family: var(--f-display); font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); line-height: 1.1; letter-spacing: -0.01em; } .ari-teaser-body[b-3c7sfm2za5] { color: var(--c-muted); line-height: 1.7; max-width: 60ch; } .ari-teaser-link[b-3c7sfm2za5] { font-weight: 600; color: var(--c-text); transition: color var(--dur-micro) var(--ease-out); } .ari-teaser-link:hover[b-3c7sfm2za5], .ari-teaser-link:focus-visible[b-3c7sfm2za5] { color: var(--c-thread-text); } /* /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